/* ZERO11 shared tokens, base, header, overlay and footer (extracted from the homepage) */
/* ============================================================================
   ZERO11 — Homepage, first working draft
   Built from ZERO11-homepage-design-v1.png.
   Section boundaries are marked [COMPONENT] so each block maps to a Framer
   reusable component; project and article cards carry data-cms-* hooks.
   ========================================================================= */

/* --- Tokens ------------------------------------------------------------- */
:root{
  --bg:var(--zero11-light);               /* page background — never pure white */
  --fg:var(--zero11-dark);
  --dark:var(--zero11-dark);             /* black sections and footer */
  --on-dark:var(--zero11-light);
  --muted:#595959;            /* secondary text on --bg   — 6.3:1 */
  --muted-dark:#9A9A9A;       /* secondary text on black  — 7.4:1 */
  --hair:rgba(0,0,0,.18);
  --hair-dark:rgba(242,242,242,.22);
  --placeholder:#D8D8D8;      /* intentional grey blocks from the design */

  /* Sofia Pro: everything structural. IvyPresto Display: large italic
     editorial statements only. The kit ships IvyPresto in a single cut —
     300 italic — which is exactly the weight the design uses. */
  --sans:"sofia-pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:"ivypresto-display",Georgia,"Times New Roman",serif;

  /* ---------------------------------------------------------------------
     Type scale.

     Deliberately non-uniform: editorial type is very large, utility type
     stays small. The gap between them is what carries the hierarchy —
     huge headline → 30px statement → 23px body → 13px navigation.
     --------------------------------------------------------------------- */
  --t-micro:  clamp(11px, .30vw +  9.8px, 13px);   /* eyebrows                */
  --t-nav:    clamp(12px, .35vw + 10.5px, 14px);   /* navigation, links       */
  --t-label:  clamp(15px, .35vw + 13.6px, 18px);   /* service / category      */
  --t-body:   clamp(18px, .50vw + 15.4px, 24px);   /* body copy               */
  --t-state:  clamp(24px, .78vw + 19.5px, 32px);   /* statements, intro copy  */
  --t-title:  clamp(24px, .70vw + 19.9px, 32px);   /* project titles          */
  --t-h-std:  clamp(40px, 3.2vw + 12px,   76px);   /* standard editorial      */
  --t-h-major:clamp(48px, 7vw,           128px);   /* major section headline  */
  --t-h-work: clamp(56px, 8vw,           145px);   /* Selected Work           */
  --t-hero:   clamp(90px, 9vw,           170px);   /* hero — JS caps at 170   */
  --t-cta:    clamp(28px, 1.40vw + 20px,  40px);   /* footer CTA              */
  --t-foot:   clamp(17px, .35vw + 14.6px, 20px);   /* footer supporting copy  */

  /* Editorial pacing. Sections breathe far more than before. */
  --section-y:clamp(88px,11.5vw,200px);      /* between major sections   */
  --space-head:clamp(36px,3.4vw,80px);       /* headline → copy          */
  --space-media:clamp(48px,5vw,110px);       /* copy → media             */

  /* ---------------------------------------------------------------------
     Page grid — a viewport-based measure, not a centred website container.
     Content sits close to the true left/right edges: ~40-55px of outer
     margin at 1440-1600px, not the 130-200px a conventional narrow
     max-width container would leave. --maxw exists only as a sanity cap
     for ultra-wide monitors (>2600px) — it never engages at any width this
     site is actually tested against. */
  --page-gutter:clamp(22px,2.5vw,48px);
  --gutter:var(--page-gutter);
  /* The design is authored to a 1920px canvas. Above that width the layout
     stops expanding and stays centred, like the reference sites. */
  --maxw:1920px;

  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--fg);color:var(--bg)}

/* --- Accessibility ------------------------------------------------------ */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:1px}
.skip-link{
  position:absolute;top:0;left:0;z-index:200;
  transform:translateY(-120%);
  background:var(--fg);color:var(--bg);
  padding:.85rem 1.4rem;font-weight:700;letter-spacing:.02em;
}
.skip-link:focus{transform:translateY(0)}

/* --- Layout primitives -------------------------------------------------- */
.shell{
  width:min(100%,var(--maxw));
  margin-inline:auto;
  padding-inline:var(--page-gutter);
}
.section{padding-block:var(--section-y);position:relative;overflow-x:clip}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2vw,2rem)}

/* --- Type roles --------------------------------------------------------- */
/* Small tracked label, used for every eyebrow in the design */
.label{
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0;
}
.label--muted{color:var(--muted);font-weight:400}

/* Large italic editorial statement — IvyPresto Display, its only cut */
.editorial{
  font-family:var(--serif);
  font-weight:300;
  font-style:italic;
  font-size:var(--t-h-major);
  line-height:1.0;
  letter-spacing:-.018em;
  margin:0;
}
/* Section-scale variant — sits with a Sofia statement rather than dominating */
.editorial--sm{font-size:var(--t-h-std);line-height:1.02}

/* Bold sans statement — Sofia Pro */
.statement{
  font-family:var(--sans);
  font-weight:700;
  font-size:var(--t-h-major);
  line-height:1.0;
  letter-spacing:-.025em;
  text-transform:uppercase;
  margin:0;
}
.heading{
  font-weight:700;
  font-size:var(--t-h-major);
  line-height:1.0;
  letter-spacing:-.025em;
  text-transform:uppercase;
  margin:0;
}
.body{font-size:var(--t-body);line-height:1.45;letter-spacing:-.005em;max-width:44ch}

/* --- Wrapping -------------------------------------------------------------
   Headings balance across their lines; paragraphs use `pretty`, which pulls a
   word back from the last line rather than leaving it stranded. Hyphenation
   stays off so no approved copy is ever broken mid-word. */
h1,h2,h3,.label,.project__name,.statement,.heading,.editorial{text-wrap:balance}
p,.body,.project__desc,.project__services,.method__intro,.stage__q{
  text-wrap:pretty;
  hyphens:none;
}
.body--muted{color:var(--muted)}
.tm{font-size:.55em;vertical-align:.62em;letter-spacing:.02em}

/* Underlined text link with a down arrow — the only CTA style in the design */
.tlink{
  display:inline-flex;
  align-items:baseline;
  gap:.55em;
  position:relative;
  padding-bottom:.3em;
  border-bottom:1px solid currentColor;
  font-size:var(--t-nav);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.tlink::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .55s var(--ease-out);
}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1);transform-origin:left}
.tlink .arw{display:inline-block;transition:transform .5s var(--ease-out)}
.tlink:hover .arw,.tlink:focus-visible .arw{transform:translateY(3px)}
.tlink--soft{font-weight:400;letter-spacing:.04em;text-transform:none;font-size:var(--t-nav)}

/* Grey placeholder block from the design */
.ph{
  background:var(--placeholder);
  display:grid;
  place-items:center;
  color:var(--fg);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:var(--t-state);
}

/* --- Reveal system ------------------------------------------------------ */
[data-reveal]{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity .55s var(--ease-out),transform .65s var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{opacity:1;transform:none}

/* ---------------------------------------------------------------------------
   Masked line reveal.

   IMPORTANT — why this is NOT em-based padding on the mask itself:
   an em unit resolves against the font-size of the element the rule is
   written on, not against the font-size of whatever it happens to wrap. Every
   line here is a plain <span> wrapped one level OUTSIDE the actual sized
   heading (h2.statement, .editorial, etc. or, for the hero, a JS-fitted size),
   so an em-padding on the wrapper itself resolves against the small inherited
   body font-size — nowhere near enough room for a 48-190px display glyph's
   descender or an italic overhang. That mismatch is exactly what let the
   IvyPresto "J" clip: the mask's own padding was only a few px, regardless of
   how large the type inside it actually was.

   Fixed generously in real pixels instead, scaled with viewport width so it
   still grows with the type, and inflated then pulled back by matching
   negative margins so the safety margin never shifts layout or the widths any
   JS measures. Sized for the largest font-size any of these classes carries
   (~145px) — oversizing costs nothing since the margin cancels it in the
   resting state; it is a bigger animation gutter, not new whitespace.

   Only the vertical axis ever clips. Horizontal never does — an italic
   overhang is a horizontal problem, and no reveal here needs a horizontal
   clip, so there is nothing to trade off. */
.serif-line-mask,.mask-line{
  display:block;
  overflow-x:visible;
  overflow-y:hidden;
  padding-block:clamp(6px,1.2vw,16px) clamp(16px,3.4vw,44px);
  padding-inline:clamp(8px,1.8vw,22px);
  margin-block:clamp(-16px,-1.2vw,-6px) clamp(-44px,-3.4vw,-16px);
  margin-inline:clamp(-22px,-1.8vw,-8px);
}
.serif-line,.mask-line > span{display:block;line-height:1.05;will-change:transform}
/* Once a one-time entrance has finished there is nothing left to mask, so the
   clip is dropped entirely and no glyph can ever be cut. */
.serif-line-mask.is-open,.mask-line.is-open{overflow-y:visible}

/* ==========================================================================
   [COMPONENT] Header
   ========================================================================== */
.header{
  position:fixed;inset:0 0 auto 0;z-index:90;
  background:var(--bg);
  padding-block:clamp(22px,1.7vw,32px);
  transition:transform .55s var(--ease-out),box-shadow .4s;
  will-change:transform;
}
.header.is-solid{box-shadow:0 1px 0 rgba(0,0,0,.08)}
.header.is-hidden{transform:translate3d(0,-105%,0)}
.header__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:clamp(1.5rem,3vw,4rem);
}

.brand{display:flex;align-items:center;justify-self:start;flex:0 0 auto}
.brand svg{width:clamp(46px,3vw,58px);height:auto;color:var(--fg)}
.brand svg path{fill:currentColor}
.brand:hover svg{opacity:.6}

.nav{display:none;justify-self:center;margin:0}
.nav ul{display:flex;align-items:center;gap:clamp(.9rem,1.9vw,2.1rem)}
.nav a{
  font-size:var(--t-nav);
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  position:relative;
  padding-block:.35rem;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="page"]::after,.header__cta[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}

.header__cta{display:none;justify-self:end;margin:0}
.header .tlink{font-size:var(--t-nav);padding-bottom:.25em}

/* Mobile only: the design has no menu control, so this stays text-only and
   disappears the moment the full navigation fits. */
.menu-toggle{
  justify-self:end;
  font-size:var(--t-nav);font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  padding-bottom:.25em;border-bottom:1px solid currentColor;
}
@media (min-width:1080px){
  .nav{display:block}
  .header__cta{display:inline-flex}
  .menu-toggle{display:none}
}

/* Mobile menu overlay */
.overlay{
  position:fixed;inset:0;z-index:100;
  background:var(--bg);
  display:grid;grid-template-rows:auto 1fr;
  padding-block:clamp(1rem,1.7vw,1.6rem) 2rem;
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  transition:clip-path .7s var(--ease-out),visibility 0s linear .7s;
}
.overlay.is-open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .7s var(--ease-out),visibility 0s}
.overlay__top{display:flex;align-items:center}
.overlay__close{
  margin-left:auto;
  font-size:var(--t-nav);font-weight:700;letter-spacing:.10em;text-transform:uppercase;
  padding-bottom:.25em;border-bottom:1px solid currentColor;
}
.overlay__nav{align-self:center}
.overlay__nav li + li{margin-top:.4rem}
.overlay__nav a.overlay__cta{display:inline-flex;font-size:var(--t-nav);letter-spacing:.12em;line-height:1;margin-top:clamp(28px,7vw,52px)}
.overlay__nav a{
  display:block;
  font-size:clamp(1.6rem,7vw,2.6rem);
  font-weight:700;letter-spacing:-.02em;text-transform:uppercase;line-height:1.15;
}

/* ==========================================================================
   [COMPONENT] Footer — a full final page, not a utility bar
   ========================================================================== */
/* The footer is now a full final page — min-height:100vh, a generous CTA and a
   monumental wordmark — which makes it taller than the viewport. It therefore
   sits in normal flow: pinning it behind the page would push the CTA above the
   top of the screen and out of reach. The sense of arrival comes from the
   staggered entrance and the wordmark drift instead. */
.footer{
  background:var(--dark);
  color:var(--on-dark);
  overflow:hidden;
  min-height:100vh;                 /* reads as a final page */
  display:flex;
  flex-direction:column;
}
.footer ::selection{background:var(--on-dark);color:var(--dark)}
.footer .brand svg{color:var(--on-dark)}

/* --- CTA: the first thing the black section says ------------------------- */
.footer__cta{
  padding-block:clamp(72px,9vh,140px);
  border-bottom:1px solid var(--hair-dark);
}
.footer__cta .label{color:var(--muted-dark);font-weight:400}
.footer__cta-head{
  margin-top:clamp(24px,2.6vw,40px);
  font-size:var(--t-cta);
  font-weight:400;
  line-height:1.18;
  letter-spacing:-.02em;
  max-width:22ch;
}

.footer__cta-line{display:block;white-space:nowrap}
@media (max-width:820px){
  .footer__cta-line{white-space:normal}
}
.footer__cta-sub{
  margin-top:clamp(18px,1.8vw,26px);
  font-size:var(--t-foot);
  line-height:1.45;
  color:var(--muted-dark);
  max-width:44ch;
}
.footer__cta-link{margin-top:clamp(30px,3.2vw,48px)}
.footer__cta-link .tlink{font-size:var(--t-nav)}

/* --- Navigation: small and restrained, well below the CTA ---------------- */
.footer__body{
  padding-block:clamp(40px,4.4vh,64px);
  flex:1 0 auto;
}
.footer__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2rem,4vw,3rem);
}
@media (min-width:760px){
  .footer__grid{grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:clamp(3rem,8vw,10rem)}
}
.footer h2.label,.footer h3.label{color:var(--muted-dark);font-weight:400;margin-bottom:1rem}
.footer__links li + li{margin-top:.6rem}
.footer__links--inline{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.2rem,2.2vw,2.8rem)}
.footer__links--inline li + li{margin-top:0}
.footer__follow{justify-self:start}
@media (min-width:760px){.footer__follow{justify-self:end}}
.footer__links--social{gap:clamp(1.2rem,1.8vw,2.2rem)}
.footer__links a{
  font-size:var(--t-nav);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .45s var(--ease-out);
  padding-bottom:2px;
}
.footer__links a:hover{background-size:100% 1px}
.footer__bottom{
  margin-top:clamp(36px,4vh,60px);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  font-size:var(--t-micro);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted-dark);
}

/* --- Monumental wordmark, anchored to the bottom edge -------------------- */
.footer__wordmark{
  margin-top:auto;
  padding-inline:clamp(.6rem,1.6vw,2rem);
  padding-bottom:clamp(.5rem,1.2vw,1.4rem);
  position:relative;
}
.footer__wordmark svg{width:100%;height:auto;color:var(--on-dark);display:block}
.footer__wordmark svg path{fill:currentColor}
/* The Lottie is authored in pure white; on pure black .949 opacity lands
   exactly on var(--zero11-light), so it matches the rest of the footer text. */
.footer__lottie,.footer__wordmark-fallback{
  width:100%;
  margin-inline:auto;
}
.footer__lottie{
  aspect-ratio:1860 / 580;   /* reserved before the animation loads */
  opacity:.949;
  display:none;
}
.footer__lottie svg{display:block;width:100%;height:100%}
/* Once the player has mounted, it replaces the static wordmark fallback */
.has-lottie .footer__lottie{display:block}
.has-lottie .footer__wordmark-fallback{display:none}