/* ============================================================
   DEPOPAS — depopas.com
   Two modes: .home (amber signature screen) and .sheet (white editorial)
   Plain CSS. No build step, no framework, no JavaScript.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face{font-family:"Helvena";src:url("/fonts/Helvena-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Helvena";src:url("/fonts/Helvena-Semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Helvena";src:url("/fonts/Helvena-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Bespoke Serif";src:url("/fonts/BespokeSerif-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --amber:#F7A400;
  --ink:#002027;
  --ink-85:rgba(0,32,39,.85);
  --ink-62:rgba(0,32,39,.62);
  --ink-55:rgba(0,32,39,.55);
  --ink-45:rgba(0,32,39,.45);
  --ink-30:rgba(0,32,39,.3);

  --pad:48px;      /* side padding */
  --top:36px;      /* header top padding */
  --mark-h:66px;

  --sans:"Helvena",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --serif:"Bespoke Serif",Georgia,"Times New Roman",serif;
  --text:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--text);font-weight:500;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,p{margin:0}
a{color:inherit;text-decoration:none}
svg{display:block}
img{max-width:100%}
a:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- Page transitions ----------
   The header is a fixed constant on every page (same pixels everywhere), so
   only the CONTENT moves: out in .35s, a short beat, in over .5s. On the home
   page the amber field itself fades up from white on arrival from another
   page of the site (arrivals from outside get the splash instead), and fades
   back to white on leaving. The script at the end of each page adds
   html.leaving and navigates after 400ms. */
@keyframes content-in{from{opacity:0}}
@keyframes content-out{to{opacity:0}}
@keyframes field-in{from{background-color:#fff}}
@keyframes field-out{to{background-color:#fff}}
.sheet .plate,.sheet .foot,.sheet .foot__rule,.sheet .sheet__wordmark,
html.splash-off .lockup{animation:content-in .5s ease-out .1s backwards}
html.splash-off .hero{animation:field-in .5s ease-out backwards}
html.leaving .plate,html.leaving .foot,html.leaving .foot__rule,html.leaving .sheet__wordmark,
html.leaving .lockup{animation:content-out .35s ease-in forwards}
html.leaving .hero{animation:field-out .35s ease-in forwards}
@media (prefers-reduced-motion:reduce){
  .sheet .plate,.sheet .foot,.sheet .foot__rule,.sheet .sheet__wordmark,.lockup,.hero{animation:none!important}
}

/* ---------- Shared chrome ---------- */
.masthead{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:var(--top) var(--pad) 0;flex:none;
}
.mark{width:54px;height:var(--mark-h);flex:none}
.mark svg{width:100%;height:100%}
.nav{display:flex;gap:32px;padding-top:2px}
.nav a{
  font-family:var(--sans);font-weight:600;font-size:14px;line-height:1.05;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
}
.nav a{transition:color .2s ease,opacity .2s ease}
.sheet .nav a:hover,.sheet .nav a:active{color:var(--amber)}
.home .nav a{transition:opacity .2s ease}   /* colour eases with the field, not on its own clock */
.home .nav a:hover,.home .nav a:active{opacity:.55}

.wordmark{width:100%}
.wordmark svg{width:100%;height:auto}

/* ============================================================
   HOME — amber signature screen
   100svh is the SMALL viewport (mobile toolbars showing), so the screen is
   never taller than what the phone actually displays: nothing to scroll,
   and the header can never load out of view.
   ============================================================ */
body.home{background:var(--amber);color:var(--ink)}
.hero{
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  background:var(--field,var(--amber));color:var(--ink-live,var(--ink));
  transition:background-color 2.2s ease-in-out,color 2.2s ease-in-out;
}
@media (prefers-reduced-motion:reduce){.hero{transition:none}}
.hero__void{flex:1 1 auto;min-height:0}

.lockup{flex:none}
.lockup__row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  padding:0 var(--pad);
}
.kicker{font-family:var(--serif);font-size:30px;line-height:1.15;letter-spacing:-.07em;width:240px}
.lede{font-family:var(--serif);font-size:30px;line-height:1.2;letter-spacing:-.07em;text-align:right;width:445px}
.nb{white-space:nowrap}
.lockup__wordmark{padding:30px var(--pad) 56px}
.tagline{display:none}

/* ---------- Splash (home only) ----------
   Default state: a plain dark field, nothing in it (that is what a cold
   launch shows until it reloads). .is-warm plays the sequence: mark fades in
   on the dark field, the field crossfades to amber while the mark turns ink,
   then the whole thing dissolves into the page. ~3.6s. */
.splash{
  position:fixed;inset:0;z-index:1000;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.splash__mark{width:68px;color:var(--amber);opacity:0}
.splash__mark svg{width:100%;height:auto}
html.splash-play .splash{animation:splash-field 2.6s ease forwards}
html.splash-play .splash__mark{animation:splash-mark 2.6s ease forwards}
html.splash-off .splash{display:none}
@keyframes splash-field{
  0%,20%{background:#002027;opacity:1;visibility:visible}
  62%,76%{background:#F7A400;opacity:1;visibility:visible}
  100%{background:#F7A400;opacity:0;visibility:hidden}
}
@keyframes splash-mark{
  0%{opacity:0;color:#F7A400}
  17%,30%{opacity:1;color:#F7A400}
  62%,70%{opacity:1;color:#002027}
  88%,100%{opacity:0;color:#002027}
}
@media (prefers-reduced-motion:reduce){
  html.splash-play .splash,html.splash-play .splash__mark{animation-duration:.5s}
}

/* ============================================================
   SHEET — white editorial pages (Services, Contact)
   ============================================================ */
body.sheet{background:#fff;color:var(--ink)}
.sheet__inner{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.plate{flex:1 1 auto;padding:0 var(--pad);display:flex;flex-direction:column;justify-content:flex-end}
.plate::after{content:"";display:block;height:56px;flex:none}

/* H1 and the section eyebrow share a bottom edge. min-height locks the
   rule position so Services and Contact never shift against each other. */
.head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  margin-top:88px;min-height:192px;flex:none;
}
.statement{font-family:var(--serif);font-weight:400;font-size:56px;line-height:1.14;letter-spacing:-.015em}
.statement--wide{max-width:780px}
.statement--narrow{max-width:740px}

.eyebrow{
  font-family:var(--text);font-weight:600;font-size:12px;line-height:16px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-55);
  text-align:right;flex:none;
}
.standfirst{
  font-family:var(--text);font-weight:500;font-size:17px;line-height:28px;
  letter-spacing:-.01em;color:var(--ink-85);max-width:550px;
  margin-top:52px;min-height:56px;flex:none;
}
.rule{border:0;height:1px;background:var(--ink);margin:40px 0 0;flex:none}

.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding-top:41px;flex:none}
.col__head{display:flex;align-items:baseline;gap:10px}
.col__num{font-family:var(--serif);font-size:26px;line-height:1;color:var(--ink-30)}
.col__label,.col__solo{
  font-family:var(--text);font-weight:600;font-size:12px;line-height:16px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-55);
}
.col__lead{font-family:var(--text);font-weight:500;font-size:17px;line-height:28px;letter-spacing:-.01em;color:var(--ink);margin-top:14px}
.col__body{font-family:var(--text);font-weight:500;font-size:17px;line-height:29px;letter-spacing:-.01em;color:var(--ink-62);margin-top:6px}
.col__link{
  font-family:var(--text);font-weight:500;font-size:17px;line-height:28px;
  letter-spacing:-.01em;color:var(--ink);display:block;width:max-content;
}
.col__link--first{margin-top:14px}
.col__link{transition:color .2s ease}
.col__link:hover{color:var(--amber)}

.foot{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:0 var(--pad) 28px;flex:none;
}
.foot span,.foot a{
  font-family:var(--sans);font-weight:500;font-size:11px;line-height:1.4;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);
}
.foot a{transition:color .2s ease}
.foot a:hover{color:var(--amber)}
.foot__rule{display:none}
.sheet__wordmark{display:none}

/* ============================================================
   Tablet
   ============================================================ */
@media (max-width:1199px){
  :root{--pad:40px}
  .statement{font-size:44px}
  .statement--wide,.statement--narrow{max-width:620px}
  .head{margin-top:96px;min-height:150px}
  .lede{width:min(445px,52%)}
  .kicker{width:min(240px,34%)}
  .cols{grid-template-columns:repeat(2,1fr);gap:40px 40px;row-gap:44px}
}

/* ============================================================
   Phone
   ============================================================ */
@media (max-width:809px){
  :root{--pad:20px;--top:24px;--mark-h:46px}
  .mark{width:38px}
  .nav{gap:18px}

  /* Home — NO viewport units on phones. iOS resolves 100svh/100vh to the
     toolbar-hidden height when a page is opened from another app, which makes
     the document taller than the screen and loads it scrolled with the nav
     off the top. A fixed spacer instead: the page is shorter than any phone
     screen, so it cannot scroll, so the nav cannot move. */
  /* The whole screen is one fixed box: header at the top, lockup at the
     bottom, spacer between. The document itself is empty, so there is
     nothing for the browser to drag — the nav cannot scroll off. The canvas
     behind it is ink so a cold launch (solid dark splash) is uniform even
     while Chrome for iOS has the box mis-placed. */
  body.home{background:var(--ink)}
  .hero{
    position:fixed;inset:0;min-height:0;background:var(--field,var(--amber));
    display:flex;flex-direction:column;overflow:auto;overscroll-behavior:none;
  }
  .hero__void{display:block;flex:1 1 auto;min-height:0}
  .lockup{position:static}
  .sheet__inner{min-height:0}
  .lockup__row{display:block;padding:0 var(--pad)}
  .kicker{display:none}
  .lede{text-align:left;width:100%;font-size:23px;line-height:1.24}
  .lockup__wordmark{padding:16px var(--pad) 0}
  .tagline{
    display:block;padding:24px var(--pad) 36px;
    font-family:var(--sans);font-weight:600;font-size:13px;line-height:1.3;
    letter-spacing:.14em;text-transform:uppercase;
  }

  /* Sheet — eyebrow moves above the headline */
  .head{
    display:flex;flex-direction:column-reverse;align-items:stretch;
    margin-top:81px;min-height:0;gap:40px;
  }
  .statement{font-size:30px;line-height:1.14;max-width:none}
  .eyebrow{text-align:left}
  .standfirst{font-size:19px;line-height:29px;max-width:none;margin-top:55px;min-height:0}
  .cols{grid-template-columns:1fr;gap:38px;padding-bottom:56px}
  .plate{justify-content:flex-start}
  .plate::after{display:none}
  .col__num{font-size:22px}
  .foot{flex-direction:column;align-items:flex-start;gap:8px;padding-top:29px;padding-bottom:25px}
  .foot__rule{display:block;border:0;height:1px;background:var(--ink);margin:0 var(--pad)}
  .sheet__wordmark{display:block;padding:0 15px 20px;color:var(--ink)}
}