/* /site_assets/tokens.css */
/* ===========================================================
   AURALIS — shared design tokens & primitives
   Palette + reset + grain + custom cursor scaffolding.
   Layout & type live in each option's own stylesheet.
   =========================================================== */

:root{
  /* ===== AURALIS brand palette — the ONLY colours used site-wide ===== */
  --black: #000000;   /* Black           — site background          */
  --green: #00534D;   /* Plankton Green  — accents + surfaces        */
  --cream: #E6E4C4;   /* Fountain Frolic — primary text / paper      */
  --white: #FFFFFF;   /* White           — max-contrast highlight    */

  /* ---- semantic aliases, mapped onto the four brand colours ---- */
  --ink:        var(--black);   /* page background — black         */
  --ink-2:      var(--black);   /* raised panel                    */
  --ink-3:      var(--green);   /* media / card placeholder fill   */
  --cream-soft: var(--cream);
  --blue:       var(--green);   /* accent (dots, emphasis, rules)  */
  --teal:       var(--green);   /* gradient accent                 */
  --ember:      var(--green);   /* gradient accent                 */

  /* Black at reduced opacity — secondary text on a Fountain Frolic "paper" surface */
  --ink-72: rgba(0,0,0,.72);

  /* Fountain Frolic at reduced opacity (same hue, faded) */
  --cream-60: rgba(230,228,196,.60);
  --cream-40: rgba(230,228,196,.40);
  --cream-24: rgba(230,228,196,.24);
  --line:     rgba(230,228,196,.12);
  --line-2:   rgba(230,228,196,.22);

  --ease:      cubic-bezier(.2,.8,.2,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.76,0,.24,1);

  --shell: clamp(20px, 5vw, 96px); /* page gutter */

  /* Iconography — optically-centred, properly-weighted arrows. The Unicode
     → / ↑ glyphs render thin and sit slightly off-centre in a disc; these are
     drawn on a 24×24 grid centred on (12,12) and applied as a mask so the arrow
     takes its colour from the element (currentColor) and transitions with it. */
  --arrow-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12.5 6 19 12l-6.5 6'/%3E%3C/svg%3E");
  --arrow-u: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M6 11 12 5l6 6'/%3E%3C/svg%3E");
  --arrow-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M6 13 12 19l6-6'/%3E%3C/svg%3E");

  /* ===========================================================
     THEMEABLE TOKENS — the surface the /admin Design-system editor
     controls at runtime (site_assets/theme.js injects a :root override
     from Supabase). Every value below is the FROZEN default from
     stylesheet.md; nothing changes unless a token is edited in the CMS.
     When wiring a component to a token, use var(--token, <literal>) so
     the literal stays the source-of-truth default if the token is unset.
     =========================================================== */

  /* ---- typeface + weights ---- */
  --font: "Helvetica Neue","HelveticaNeue",Helvetica,"Arial Nova",Arial,sans-serif;
  --type-scale: 1;                 /* global multiplier on the type utilities */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* ---- type scale (mirrors stylesheet.md §3) ---- */
  --fz-display:   clamp(2.6rem, 8.5vw, 7.4rem);
  --fz-title:     clamp(2.2rem, 5vw,   4rem);
  --fz-h2:        clamp(2rem,   4.4vw, 3.6rem);
  --fz-statement: clamp(1.7rem, 4.3vw, 3.7rem);
  --fz-lede:      clamp(1.5rem, 3.2vw, 2.6rem);
  --fz-h3:        clamp(1.5rem, 3vw,   2.7rem);
  --fz-subhead:   clamp(1.4rem, 2.4vw, 2.2rem);
  --fz-num:       clamp(2.6rem, 7vw,   6rem);
  --fz-num-s:     clamp(2.2rem, 4vw,   3.4rem);
  --fz-title-s:   clamp(1.1rem, 1.8vw, 1.6rem);
  --fz-kicker:    1.05rem;
  --fz-lead:      clamp(1rem,   1.4vw, 1.25rem);
  --fz-body:      15px;
  --fz-meta:      14px;
  --fz-small:     13px;
  --fz-label:     12px;
  --fz-caption:   12px;

  /* ---- corner radii (semantic; wired into the components below) ---- */
  --r-btn:    8px;    /* filled/outline buttons: the CTA + .pill--ghost         */
  --r-chip:   10px;   /* content tag chips: .feature__tags span, .t-chip        */
  --r-toggle: 40px;   /* on/off filter chips: .filters button                   */
  --r-card:   4px;    /* paper cards: .scard, .switch__panel                    */
  --r-media:  3px;    /* image/media wells                                      */

  /* ---- primary CTA — the ONE filled button, reused everywhere
     (nav "Start a project", homepage .pill CTAs, footer subscribe).
     One component, one look, tuned from these tokens. Radius = --r-btn. ---- */
  --cta-bg: var(--cream);   /* fill                                */
  --cta-fg: var(--ink);     /* label (black on cream)              */
  --cta-py: 10px;           /* vertical padding                    */
  --cta-px: 20px;           /* horizontal padding                  */
  --cta-fz: 13px;           /* label size                          */
  --cta-fw: 500;            /* label weight                        */
  --cta-gap: 9px;           /* gap before a trailing → / ↗ glyph   */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font,"Helvetica Neue","HelveticaNeue",Helvetica,"Arial Nova",Arial,sans-serif);
  font-weight:400;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit;color:inherit}
::selection{background:var(--blue);color:var(--cream)}

/* ---- film grain overlay (shared) ---- */
.grain{
  position:fixed;inset:-50%;
  z-index:9000;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}10%{transform:translate(-4%,-4%)}
  20%{transform:translate(-8%,2%)}30%{transform:translate(2%,-8%)}
  40%{transform:translate(-2%,6%)}50%{transform:translate(-8%,4%)}
  60%{transform:translate(4%,0)}70%{transform:translate(0,6%)}
  80%{transform:translate(-6%,-2%)}90%{transform:translate(2%,8%)}
  100%{transform:translate(0,0)}
}

/* ---- custom cursor (shared scaffold) ---- */
@media (hover:hover) and (pointer:fine){
  .cursor{
    position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
    width:8px;height:8px;border-radius:50%;
    background:var(--cream);
    transform:translate(-50%,-50%);
    transition:width .25s var(--ease),height .25s var(--ease),
               background .25s var(--ease),opacity .25s var(--ease);
    mix-blend-mode:difference;
  }
  .cursor.is-hover{width:46px;height:46px;background:var(--cream)}
  .cursor.is-hidden{opacity:0}
  body.has-cursor{cursor:none}
  body.has-cursor a,body.has-cursor button{cursor:none}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .grain{animation:none}
}

/* accessibility helper */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--cream);outline-offset:3px}

/* ===========================================================
   TYPE UTILITIES (stylesheet.md §3 / §9) — apply a canonical
   role with one class. Sizes read the --fz-* tokens and the
   global --type-scale, so the Design-system editor retunes them
   live. Existing components encode the same values inline; both
   must stay in sync with §3.
   =========================================================== */
.t-display  {font-size:calc(var(--fz-display)   * var(--type-scale,1)); font-weight:var(--fw-medium); letter-spacing:-.035em; line-height:.96}
.t-title    {font-size:calc(var(--fz-title)     * var(--type-scale,1)); font-weight:var(--fw-medium); letter-spacing:-.03em;  line-height:1.02}
.t-h2       {font-size:calc(var(--fz-h2)        * var(--type-scale,1)); font-weight:var(--fw-medium); letter-spacing:-.03em;  line-height:1}
.t-statement{font-size:calc(var(--fz-statement) * var(--type-scale,1)); font-weight:var(--fw-medium); letter-spacing:-.025em; line-height:1.12}
.t-lede     {font-size:calc(var(--fz-lede)      * var(--type-scale,1)); font-weight:var(--fw-regular);letter-spacing:-.02em;  line-height:1.16}
.t-h3       {font-size:calc(var(--fz-h3)        * var(--type-scale,1)); font-weight:var(--fw-medium); letter-spacing:-.025em; line-height:1.05}
.t-subhead  {font-size:calc(var(--fz-subhead)   * var(--type-scale,1)); font-weight:var(--fw-medium); letter-spacing:-.02em;  line-height:1.1}
.t-num      {font-size:calc(var(--fz-num)       * var(--type-scale,1)); font-weight:var(--fw-semibold);letter-spacing:-.04em; line-height:1}
.t-num-s    {font-size:calc(var(--fz-num-s)     * var(--type-scale,1)); font-weight:var(--fw-semibold);letter-spacing:-.04em; line-height:1}
.t-title-s  {font-size:calc(var(--fz-title-s)   * var(--type-scale,1)); font-weight:var(--fw-medium); letter-spacing:-.02em;  line-height:1.2}
.t-kicker   {font-size:calc(var(--fz-kicker)    * var(--type-scale,1)); font-weight:var(--fw-medium); letter-spacing:-.011em; line-height:1.2; display:block}
.t-lead     {font-size:calc(var(--fz-lead)      * var(--type-scale,1)); font-weight:var(--fw-regular);letter-spacing:-.011em; line-height:1.5}
.t-body     {font-size:calc(var(--fz-body)      * var(--type-scale,1)); font-weight:var(--fw-regular);line-height:1.5; color:var(--cream)}
.t-meta     {font-size:calc(var(--fz-meta)      * var(--type-scale,1)); font-weight:var(--fw-regular);line-height:1.6; color:var(--cream-60)}
.t-chip     {font-size:calc(var(--fz-small)     * var(--type-scale,1)); font-weight:var(--fw-regular);letter-spacing:0; color:var(--cream);
             border:1px solid var(--line-2); border-radius:var(--r-chip); padding:8px 15px; line-height:1}
.t-eyebrow  {font-size:calc(var(--fz-label)     * var(--type-scale,1)); font-weight:var(--fw-regular);letter-spacing:.14em; text-transform:uppercase; color:var(--cream-60)}
.t-label    {font-size:calc(var(--fz-label)     * var(--type-scale,1)); font-weight:var(--fw-regular);letter-spacing:.1em;  text-transform:uppercase; color:var(--cream-40)}
.t-caption  {font-size:calc(var(--fz-caption)   * var(--type-scale,1)); font-weight:var(--fw-regular);letter-spacing:.04em; color:var(--cream-40)}

/* /site_assets/site.css */
/* ===========================================================
   AURALIS — faithful homepage rebuild (shared by both options)
   Helvetica Neue · black background · matches high-fidelity comp
   =========================================================== */

:root{ --shell:clamp(20px,3vw,44px); }

.star{width:100%;height:100%;object-fit:contain}
.star path{fill:currentColor}
img.star{display:block}

/* tighter heading defaults */
h1,h2,h3{font-weight:500;letter-spacing:-.03em;line-height:1}

/* ---------- reveal primitives (only hidden when JS is active) ---------- */
.js [data-reveal]{opacity:0}
/* the line mask needs room for descenders (g, y) — the tight heading
   line-heights would otherwise clip them at the baseline. Pad the bottom
   inside the clip and cancel it with a negative margin so spacing is unchanged. */
.line-wrap{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
.line-inner{display:block;will-change:transform}

/* =================== NAV =================== */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px var(--shell);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),backdrop-filter .3s var(--ease),border-color .3s var(--ease),padding .3s var(--ease);
}
/* the nav is sticky (never hides); once scrolled, fade in a subtle backdrop
   so cream links stay legible over imagery/content passing beneath it */
.nav.is-scrolled{
  background:rgba(0,0,0,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--line);padding-top:16px;padding-bottom:16px;
}
/* full lockup: spinning mark + static wordmark, proportions from the brand lockup
   (mark 114 : wordmark 80 : gap 11) anchored to a single --m mark size */
.nav__logo{--m:26px;display:inline-flex;align-items:center;gap:calc(var(--m)*.097)}
.nav__logo .star{width:var(--m);height:var(--m);flex:0 0 auto;
  transition:transform .9s var(--ease-out)}
.nav__logo .wordmark{height:calc(var(--m)*.702);width:auto;display:block;flex:0 0 auto}
.nav__logo:hover .star{transform:rotate(180deg)}
.nav__links{display:flex;gap:clamp(18px,2.2vw,34px)}
/* padding enlarges the hover/click target; the equal negative margin keeps the
   visible position & spacing identical (the underline is inset to match) */
.nav__links a{font-size:14px;color:var(--cream);opacity:.92;position:relative;letter-spacing:-.01em;
  padding:10px;margin:-10px}
.nav__links a::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
/* primary CTA in the nav ("Start a project") — appearance comes from the shared
   .pill/CTA rule below; here we only slot it into the bar row. Negative block
   margin keeps the bar height tight; opacity 1 overrides the nav-link fade. */
.nav__links .nav__cta{opacity:1;margin:-6px 0 -6px 8px}
.nav__links .nav__cta::after{display:none}                 /* no sliding underline on the button */
.nav__burger{display:none;flex-direction:column;gap:6px;padding:6px}
.nav__burger i{width:24px;height:1.5px;background:var(--cream);display:block}
/* meta block lives inside the mobile overlay only — hidden on desktop */
.nav__meta{display:none}

/* scroll-to-top button (shared on every page; injected by site.js).
   Matches the Fountain Frolic "Read more" pill: cream fill, ink up-arrow.
   z-index below the nav (200) and the mobile menu overlay (150). */
.to-top{
  position:fixed;right:24px;bottom:24px;z-index:140;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--cream);color:var(--ink);
  box-shadow:0 16px 40px rgba(0,0,0,.45);cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
.to-top.is-on{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{transform:translateY(-2px)}
.to-top i{font-style:normal;font-size:0;position:relative;display:block;width:18px;height:18px}
.to-top i::before{content:"";position:absolute;inset:0;background:currentColor;
  -webkit-mask:var(--arrow-u) center/18px no-repeat;mask:var(--arrow-u) center/18px no-repeat}
.menu-open .to-top{opacity:0;visibility:hidden;pointer-events:none}
/* on project pages, sit just above the bottom-right "Read more" pill */
body:has(.proj-pill) .to-top{bottom:90px}
@media (max-width:560px){
  .to-top{right:16px;bottom:16px;width:44px;height:44px}
  body:has(.proj-pill) .to-top{bottom:74px}
}

/* =================== HERO =================== */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero__grad{position:absolute;inset:0;z-index:0;
  background:url("img/hero-poster.jpg") center/cover no-repeat;}
.hero__grad::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,transparent 24%,transparent 72%,var(--ink) 100%)}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block}
.hero__video+.hero__grad{display:none} /* video, when present, replaces the static gradient */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 68%,var(--ink))}
/* showreel tile — centered electric-blue block */
.reel{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:min(800px,63vw);aspect-ratio:628/348;background:var(--ink);
  border-radius:3px;overflow:hidden;
  display:grid;place-items:center;transition:transform .6s var(--ease-out)}
.reel__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.reel__pix{position:relative;z-index:1;width:7px;height:7px;background:var(--cream);
  box-shadow:7px 7px 0 var(--cream),14px 14px 0 var(--cream);
  transition:transform .45s var(--ease)}
.reel__tag{position:absolute;left:16px;bottom:13px;z-index:1;font-size:12px;
  letter-spacing:.04em;color:var(--cream);text-shadow:0 1px 10px rgba(0,0,0,.45)}
.reel__tag i{font-style:normal;opacity:.7;transition:transform .4s var(--ease)}
.reel:hover .reel__tag i{transform:translate(3px,-3px)}
.reel:hover .reel__pix{transform:translate(2px,2px)}

/* =================== shared label bar =================== */
.bar{display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:16px var(--shell) 0;flex-wrap:wrap}
.bar__name{font-size:14px;color:var(--cream);letter-spacing:-.01em}
.bar__tags{display:flex;gap:8px;flex-wrap:wrap}
.bar__tags i{font-style:normal;font-size:12px;color:var(--cream);
  border:1px solid var(--line-2);border-radius:40px;padding:7px 14px;
  transition:border-color .3s,background .3s,color .3s}
.proj:hover .bar__tags i,.feat:hover .bar__tags i{border-color:var(--cream-40)}

/* =================== FEATURED =================== */
.feat{padding-top:clamp(40px,7vw,90px)}
.feat__media{display:block;margin:0 var(--shell);overflow:hidden;border-radius:2px;
  aspect-ratio:1352/514}
.feat__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);
  transition:transform 1.2s var(--ease-out)}
.feat:hover .feat__media img{transform:scale(1.035)}   /* subtle hover zoom */

/* =================== PROJECTS (staggered) =================== */
.projects{padding-top:clamp(48px,6vw,80px)}
.proj{margin-top:clamp(40px,6vw,80px)}
.proj:first-child{margin-top:0}
.proj__media{display:block;overflow:hidden;border-radius:2px;aspect-ratio:808/396;background:var(--ink-3)}
.proj__media img{width:100%;height:100%;object-fit:cover;object-position:right center;
  transform:scale(1.02);transition:transform 1.2s var(--ease-out)}
.proj:hover .proj__media img{transform:scale(1.035)}   /* subtle hover zoom */
.proj__media--solid{aspect-ratio:780/420;
  background:linear-gradient(160deg,var(--green),var(--black))}
.proj--right .proj__media{margin-left:clamp(40px,28vw,42%);margin-right:var(--shell)}
.proj--left .proj__media{margin-left:var(--shell);margin-right:clamp(40px,30vw,44%)}

/* =================== MISSION =================== */
.mission{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);
  padding:clamp(110px,16vw,230px) var(--shell) clamp(60px,9vw,120px)}
/* NOTE: stylesheet.md §11 lists this as Title-S, but the rendered design is a
   column heading at 1.7→2.6rem opposite the lede. The doc drifted, not the CSS —
   left on the H3 role (nearest by size + weight) rather than shrunk to Title-S. */
.mission__label{font-size:var(--fz-h3);font-weight:500;letter-spacing:-.025em;
  line-height:1.02;align-self:start}
.mission__lede{font-size:var(--fz-lede);font-weight:400;line-height:1.16;
  letter-spacing:-.02em;max-width:none}

/* =================== MISSION IMAGES =================== */
.m-imgs{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:0;
  padding:clamp(20px,3vw,40px) 0 clamp(60px,9vw,120px)}
.m-imgs figure{overflow:hidden}
.m-imgs__a{width:clamp(160px,20vw,290px);aspect-ratio:290/224}
.m-imgs__b{justify-self:end;width:min(50vw,720px);aspect-ratio:720/300}
.m-imgs img{width:100%;height:100%;object-fit:cover}

/* =================== GLOBALLY =================== */
.globe{position:relative;padding:clamp(50px,8vw,120px) var(--shell) clamp(50px,8vw,110px);
  display:grid;grid-template-columns:1.2fr 1fr;
  grid-template-areas:"title img" "sub btn";
  gap:clamp(20px,4vw,40px) clamp(24px,5vw,70px);align-items:start}
.globe__ring{position:absolute;right:8%;top:-6%;width:min(58vw,720px);aspect-ratio:1;
  border:1px solid var(--line);border-radius:50%;z-index:0;pointer-events:none}
.globe__title{grid-area:title;align-self:center;position:relative;z-index:1;
  font-size:clamp(2.8rem,8.5vw,7.4rem);font-weight:500;line-height:.96;letter-spacing:-.035em}
.globe__img{grid-area:img;justify-self:end;width:min(34vw,470px);aspect-ratio:470/210;
  overflow:hidden;border-radius:2px;position:relative;z-index:1}
.globe__img img{width:100%;height:100%;object-fit:cover}
.globe__sub{grid-area:sub;max-width:34ch;font-size:14px;line-height:1.55;color:var(--cream);
  align-self:end;position:relative;z-index:1}
.globe .pill{grid-area:btn;align-self:end;justify-self:center}

/* ============================================================
   PRIMARY CTA — the single filled button, reused everywhere.
   .pill (page CTAs), .nav__links .nav__cta (nav "Start a project")
   and .signup__btn (newsletter/forms) are ONE component: same fill,
   size, radius and magnetic hover, all driven by the --cta-* tokens
   so the Design editor tunes them in one place. See stylesheet.md §7.
   ============================================================ */
.pill,
.nav__links .nav__cta,
.signup__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--cta-gap,9px);
  background:var(--cta-bg,var(--cream));color:var(--cta-fg,var(--ink));
  border:1px solid var(--cta-bg,var(--cream));
  padding:var(--cta-py,10px) var(--cta-px,20px);border-radius:var(--r-btn,8px);
  font-size:var(--cta-fz,13px);font-weight:var(--cta-fw,500);letter-spacing:-.011em;line-height:1;
  white-space:nowrap;transition:transform .4s var(--ease);
}
/* Secondary / lower-emphasis — the only permitted variant (one filled primary
   per view). Outline, inherits the CTA size. */
.pill--ghost{background:transparent;color:var(--cream);border-color:var(--line-2)}
.pill--ghost:hover{border-color:var(--cream)}

/* =================== SERVICES =================== */
.services{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,70px);
  align-items:center;padding:clamp(60px,9vw,130px) var(--shell)}
.services__img{aspect-ratio:430/520;overflow:hidden;border-radius:2px}
.services__img img{width:100%;height:100%;object-fit:cover}
.services__title{font-size:var(--fz-lede);font-weight:500;line-height:1.02;
  letter-spacing:-.025em;margin-bottom:14px}                 /* matches Our Mission title */
.services__body{font-size:clamp(1rem,1.3vw,1.15rem);color:var(--cream);line-height:1.55;
  max-width:44ch;margin-bottom:clamp(28px,3vw,44px)}         /* matches Globally-collaborative body */
.svc{list-style:none}
.svc li{border-bottom:1px solid var(--line)}
.svc li:first-child{border-top:1px solid var(--line)}
.svc a{display:flex;justify-content:space-between;align-items:center;
  padding:16px 0;font-size:clamp(1rem,1.4vw,1.25rem);transition:padding-left .4s var(--ease)}
/* horizontal right arrow (matches the scroll-to-top --arrow-r style), Fountain
   Frolic, revealed sliding in from the left on hover */
.svc a i{font-style:normal;font-size:0;position:relative;display:block;width:18px;height:18px;
  flex:0 0 auto;opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s}
.svc a i::before{content:"";position:absolute;inset:0;background:var(--cream);
  -webkit-mask:var(--arrow-r) center/18px no-repeat;mask:var(--arrow-r) center/18px no-repeat}
.svc a:hover{padding-left:12px}
.svc a:hover i{opacity:1;transform:translateX(0)}
.services .pill{margin-top:clamp(28px,3vw,44px)}

/* =================== STATS =================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);
  padding:clamp(60px,9vw,120px) var(--shell) clamp(60px,9vw,120px)}
/* each stat centred between its dividers; whole row centred on the page */
.stat{padding:0 clamp(14px,2vw,28px);border-left:1px solid var(--line);text-align:center}
.stat:first-child{border-left:none}
.stat__num{display:block;font-size:var(--fz-num);font-weight:700;
  letter-spacing:.01em;line-height:1}
/* Helvetica Neue's "1" is a narrow glyph in a full-width (tabular) cell, leaving
   extra slack each side; pull it in so digit spacing reads optically even. */
.stat__num .d1{margin:0 -.12em 0 -.04em;letter-spacing:inherit}
.stat__lab{display:block;margin-top:14px;font-size:14px;color:var(--cream)}

/* =================== START =================== */
.start{padding:0 var(--shell) clamp(50px,7vw,90px)}
/* Homepage: when the start cards sit directly under the stats (testimonials
   hidden), give them a matching top padding so the stats get equal space above
   and below. Self-scopes via the sibling combinator (comments/whitespace are
   ignored) — when testimonials return, .stats is followed by .quotes, not
   .start, so this no longer applies. */
.stats + .start{padding-top:clamp(60px,9vw,130px)}
.start__title{font-size:var(--fz-title);font-weight:500;line-height:1.02;
  letter-spacing:-.03em;margin-bottom:clamp(36px,5vw,60px)}
.start__cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,30px)}
/* "Green flood": the paper card floods to Plankton Green from the base on hover,
   text turns cream and the arrow disc inverts to cream-on-green. */
.scard{background:var(--cream);color:var(--ink);border-radius:var(--r-card,4px);
  padding:clamp(26px,2.6vw,38px);min-height:clamp(200px,21vw,272px);
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;
  transition:transform .55s var(--ease),box-shadow .55s var(--ease)}
.scard>*{position:relative;z-index:1}
.scard::before{content:"";position:absolute;inset:0;z-index:0;background:var(--green);
  transform:translateY(101%);transition:transform .6s var(--ease-out)}
.scard h3{font-size:var(--fz-subhead);font-weight:500;letter-spacing:-.025em;line-height:1.06;
  transition:color .45s var(--ease) .05s}
.scard__foot{display:flex;justify-content:space-between;align-items:center;gap:16px}
.scard__foot span{font-size:13px;color:rgba(0,0,0,.66);transition:color .45s var(--ease) .05s}
.scard__foot i{font-style:normal;width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  background:var(--ink);color:var(--cream);position:relative;font-size:0;
  transition:transform .45s var(--ease),background .4s var(--ease),color .4s var(--ease)}
.scard__foot i::before{content:"";position:absolute;inset:0;background:currentColor;
  -webkit-mask:var(--arrow-r) center/16px no-repeat;mask:var(--arrow-r) center/16px no-repeat}
.scard:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(0,0,0,.4)}
.scard:hover::before{transform:translateY(0)}
.scard:hover h3{color:var(--cream)}
.scard:hover .scard__foot span{color:var(--cream-60)}
.scard:hover .scard__foot i{background:var(--cream);color:var(--green)}

/* =================== FOOTER =================== */
.foot{position:relative;padding:clamp(160px,24vw,360px) var(--shell) 30px;overflow:hidden;
  margin-top:clamp(30px,5vw,60px)}
/* the gradient/video bleeds up behind the content and dissolves into the black
   page via a long mask — no hard top edge, no premature fade-out */
.foot__video,.foot__grad{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center bottom;z-index:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 34%,#000 72%);
          mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 34%,#000 72%)}
.foot__video+.foot__grad{display:none} /* video replaces the static gradient when present */
.foot__grad{background:url("img/footer-poster.jpg") center bottom/cover no-repeat}
/* keep the video/gradient as a true background; only lift the content */
.foot>*:not(.foot__video):not(.foot__grad){position:relative;z-index:1}
.foot__top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);
  padding-bottom:clamp(70px,13vw,180px)}
.foot__h{font-size:var(--fz-title-s);font-weight:400}
.signup{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line-2);
  padding-bottom:11px;margin-top:22px;max-width:420px}
.signup input{flex:1;background:none;border:none;outline:none;font-size:1rem;color:var(--cream)}
.signup input::placeholder{color:var(--cream-40)}
/* .signup__btn inherits the shared CTA rule above — no bespoke button styles here. */
.foot__line{font-size:var(--fz-title-s);font-weight:400;line-height:1.32;
  letter-spacing:-.01em;max-width:34ch;align-self:stretch;
  padding-left:clamp(26px,5vw,70px);border-left:1px solid var(--line)}
/* logo left · legal line truly centred · socials right. The copy is absolutely
   centred so an unequal logo/social width can't shove it off-centre (grid fr tracks
   won't shrink below the wide logo). Below ~1360px it drops to its own row. */
.foot__bottom{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
/* logo lockup at 2× the previous size */
.foot__brand{justify-self:start;--m:clamp(68px,10vw,128px);display:flex;align-items:center;gap:calc(var(--m)*.097)}
.foot__copy{position:absolute;left:50%;bottom:0;transform:translateX(-50%);white-space:nowrap;margin:0;
  text-align:center;font-size:13px;color:var(--cream-60);letter-spacing:-.01em}
.foot__brand .star{width:var(--m);height:var(--m);flex:0 0 auto;
  transition:transform 1s var(--ease-out)}
.foot__brand .wordmark{height:calc(var(--m)*.702);width:auto;display:block;flex:0 0 auto}
.foot__brand:hover .star{transform:rotate(180deg)}
/* baseline so the FAQ link (plain text) lines up with the social links even when
   they carry a taller ↗ glyph — otherwise stretch top-aligns it and it reads lifted */
.foot__social{display:flex;align-items:baseline;gap:22px;padding-bottom:6px}
.foot__social{justify-self:end}
/* same trick as the nav links: bigger hit area, unchanged visual layout */
.foot__social a{font-size:13px;color:var(--cream);opacity:.8;padding:10px;margin:-10px;position:relative}
.foot__social a:hover{opacity:1}
/* wipe-in underline on hover, matching .nav__links a */
.foot__social a::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.foot__social a:hover::after{transform:scaleX(1);transform-origin:left}
.foot__social i{font-style:normal}

/* Anything below large desktop stacks the bottom row left — same format as the
   mobile footer. Only ≥1441px gets the horizontal (logo · centred legal · socials) row. */
@media (min-width:861px) and (max-width:1440px){
  .foot__bottom{display:grid;grid-template-columns:1fr;grid-template-areas:none;justify-items:start;gap:22px}
  .foot__copy{position:static;transform:none;justify-self:start;text-align:left}
  .foot__social{justify-self:start}
}

/* =================== RESPONSIVE =================== */
@media (max-width:860px){
  .nav__burger{display:flex}
  .reel{width:78vw}
  .mission{grid-template-columns:1fr;gap:18px}
  .mission__lede{max-width:none}
  .m-imgs{padding-bottom:70px}
  .proj--right .proj__media{margin-left:var(--shell)}
  .proj--left .proj__media{margin-right:var(--shell)}
  .globe{grid-template-columns:1fr;grid-template-areas:"title" "img" "sub" "btn";gap:24px}
  .globe__img{justify-self:start;width:min(70vw,470px)}
  .globe .pill{justify-self:start}
  .services{grid-template-columns:1fr;gap:30px}
  .stats{grid-template-columns:1fr 1fr;gap:30px 0}
  .stat{padding-left:clamp(16px,2vw,28px)}
  .stat:nth-child(odd){border-left:none;padding-left:0}
  .start__cards{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr}
  .foot__line{justify-self:start;border-left:none;padding-left:0}
  .foot__bottom{display:grid;grid-template-columns:1fr;grid-template-areas:none;justify-items:start;gap:22px}
  .foot__copy{position:static;transform:none;justify-self:start;text-align:left}
  .foot__social{justify-self:start}
}

/* =================== MOBILE MENU — full-screen frost ===================
   The overlay (.nav__menu) is a direct child of <body>, NOT inside .nav:
   GSAP transforms .nav, and a transformed ancestor would become the
   containing block for the fixed overlay and shrink it to the bar.
   Desktop is untouched (everything here is inside the ≤860px query). Only
   brand colours: black frost, Fountain Frolic text, Plankton Green accents. */
.nav__menu{display:none}                           /* desktop: no overlay */

@media (max-width:860px){
  .nav__links{display:none}                        /* hide the desktop row */

  /* burger → X (stays in the bar, above the frost) */
  .nav__burger i{transition:transform .4s var(--ease-out),opacity .3s var(--ease)}
  html.menu-open .nav__burger i:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
  html.menu-open .nav__burger i:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}

  /* the overlay — viewport-sized, sits below the bar (z 200) so logo + X stay crisp on top */
  .nav__menu{
    position:fixed;inset:0;z-index:150;
    display:flex;flex-direction:column;
    padding:clamp(96px,15vh,150px) var(--shell) clamp(36px,7vh,72px);
    background:rgba(0,0,0,.58);
    -webkit-backdrop-filter:blur(22px) saturate(125%);
            backdrop-filter:blur(22px) saturate(125%);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .45s var(--ease),visibility .45s var(--ease);
  }
  html.menu-open{overflow:hidden}
  html.menu-open .nav__menu{opacity:1;visibility:visible;pointer-events:auto}

  /* big, left-aligned links, vertically centred above the social row */
  .nav__menu-links{
    display:flex;flex-direction:column;flex:1 1 auto;min-height:0;
    justify-content:center;align-items:flex-start;gap:clamp(6px,1.4vh,14px);
  }
  .nav__menu-links > a{
    font-size:clamp(2rem,11vw,3.4rem);
    color:var(--cream);font-weight:500;letter-spacing:-.03em;line-height:1.02;
    opacity:0;transform:translateY(42px);will-change:transform;
    transition:transform .6s var(--ease-out),opacity .55s var(--ease-out);
  }
  html.menu-open .nav__menu-links > a{opacity:1;transform:translateY(0)}
  /* primary action — a 1px Fountain Frolic hairline (like the homepage rules)
     that starts just past the text and bleeds off the right edge of the page. */
  .nav__menu-links .nav__cta{position:relative}
  .nav__menu-links .nav__cta::after{
    content:"";position:absolute;top:55%;left:calc(100% + 16px);
    width:100vw;height:1px;background:var(--line-2);
  }
  .nav__menu-links > a:nth-child(1){transition-delay:.06s}
  .nav__menu-links > a:nth-child(2){transition-delay:.12s}
  .nav__menu-links > a:nth-child(3){transition-delay:.18s}
  .nav__menu-links > a:nth-child(4){transition-delay:.24s}
  .nav__menu-links > a:nth-child(5){transition-delay:.30s}
  .nav__menu-links > a:nth-child(6){transition-delay:.36s}

  /* social row at the foot of the overlay */
  .nav__meta{
    display:flex;flex-direction:column;gap:14px;flex:0 0 auto;
    opacity:0;transition:opacity .5s var(--ease) .28s;
  }
  html.menu-open .nav__meta{opacity:1}
  .nav__meta-social{display:flex;gap:24px}
  .nav__meta-social a{font-size:14px;color:var(--cream-60)}

  @media (prefers-reduced-motion:reduce){
    .nav__menu,.nav__menu-links > a,.nav__meta{transition-duration:.001ms;transition-delay:0s}
  }
}

/* /site_assets/work.css */
/* ===========================================================
   AURALIS — Work / Projects page
   Loads ON TOP of tokens.css + site.css. Black background,
   Fountain Frolic text, Plankton Green accents.
   All type maps to roles in stylesheet.md (FROZEN):
   Display · Subhead · Title-S · Body · Body-S · Caption · Eyebrow.
   =========================================================== */

/* =================== HERO =================== */
.work-hero{
  position:relative;
  padding:clamp(150px,20vw,250px) var(--shell) clamp(34px,5vw,60px);
  text-align:center;
}
/* Homepage hero gradient video, reused here. Covers the hero band and fades to
   black at the bottom so the project listing below continues seamlessly. The
   poster still shows while the video loads / where autoplay is blocked. */
/* NB: do NOT clip the hero — the open filter dropdown extends below it and
   would be cut off / hidden behind the cards. The video stays bounded anyway
   (absolute, inset:0, object-fit:cover). */
.work-hero{overflow:visible}
.work-hero__media{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  width:100%;height:100%;object-fit:cover;display:block;
}
.work-hero::after{                       /* fade the video into the black page */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,transparent 22%,transparent 58%,var(--ink) 100%);
}
.work-hero__title{position:relative;z-index:1}
/* keep the filter (and its open dropdown) above the project cards below */
.work-hero .work-filter{position:relative;z-index:30}
.work-hero__title{                       /* Display */
  font-size:clamp(2.6rem,12vw,7.4rem);
  font-weight:500;letter-spacing:-.035em;line-height:.96;
}

/* =================== FILTER =================== */
.work-filter{
  max-width:680px;margin:clamp(28px,4vw,48px) auto 0;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.work-filter__label{font-size:15px;color:var(--cream-60);letter-spacing:-.01em}
.work-filter__controls{display:flex;align-items:center;justify-content:flex-end;gap:10px}

/* custom dropdown — bordered field (reads as a real control: border + hover + open states) */
.dropdown{position:relative}
.dropdown.open{z-index:50}
.dropdown__toggle{
  display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-width:190px;
  font-size:14px;color:var(--cream);letter-spacing:-.011em;line-height:1;cursor:pointer;
  background:rgba(230,228,196,.03);border:1px solid var(--line-2);border-radius:8px;padding:12px 15px;
  transition:border-color .25s var(--ease),background .25s var(--ease);
}
.dropdown__toggle:hover{border-color:var(--cream-40)}
.dropdown.open .dropdown__toggle{border-color:var(--cream);background:rgba(230,228,196,.06)}
.dropdown__value{color:var(--cream)}
.dropdown__caret{
  display:inline-flex;align-items:center;color:var(--cream);line-height:1;
  transition:transform .3s var(--ease);
}
.dropdown__caret svg{width:17px;height:17px;display:block}  /* sharp chevron, a touch larger */
.dropdown.open .dropdown__caret{transform:rotate(180deg)}
.dropdown__menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:100%;width:max-content;max-width:280px;
  list-style:none;margin:0;background:#050505;border:1px solid var(--line-2);border-radius:8px;
  padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);max-height:340px;overflow:auto;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
  box-shadow:0 26px 60px rgba(0,0,0,.7);
}
.dropdown.open .dropdown__menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown__menu li{
  display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--cream-60);
  padding:10px 11px;border-radius:6px;cursor:pointer;transition:color .2s,background .2s;white-space:nowrap;
}
.dropdown__menu li::before{content:"\2713";flex:0 0 auto;width:15px;color:var(--green);opacity:0;
  font-size:13px;transition:opacity .2s} /* green check on the active option */
.dropdown__menu li:hover{color:var(--cream);background:rgba(230,228,196,.06)}
.dropdown__menu li.is-active{color:var(--cream)}
.dropdown__menu li.is-active::before{opacity:1}

/* =================== WORK BODY =================== */
.work{padding:clamp(30px,4vw,56px) var(--shell) clamp(70px,11vw,150px)}
.work__sections{display:flex;flex-direction:column;gap:clamp(56px,8vw,120px)}
.work__count{font-size:14px;color:var(--cream-60);letter-spacing:-.01em}
.work__empty{
  display:none;font-size:clamp(1.4rem,2.4vw,2.2rem);font-weight:500;
  letter-spacing:-.02em;color:var(--cream-40);padding:clamp(40px,8vw,100px) 0;text-align:center;
}
.work.is-empty .work__empty{display:block}

/* ---- featured row: small + large (default), flipped = large + small ----
   1fr : 2fr  ->  the large card is exactly double the width of the small one;
   with both at the same aspect ratio that also makes it double the height. ---- */
.feat-row{
  display:grid;grid-template-columns:1fr 2fr;
  gap:clamp(14px,1.8vw,30px);align-items:start;
}
.feat-row--flip{grid-template-columns:2fr 1fr}
.feat-row.is-hidden,.work-grid.is-hidden{display:none}

/* ---- 3 × 2 grid ---- */
.work-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  /* column gap matches the featured row's gap so cards are evenly spaced */
  gap:clamp(24px,2.8vw,40px) clamp(14px,1.8vw,30px);
}

/* =================== PROJECT ITEM =================== */
.work-item{display:block}
.work-item.is-hidden{display:none}

.work-item__media{
  position:relative;overflow:hidden;border-radius:3px;
  background:linear-gradient(160deg,var(--green),var(--black));
  aspect-ratio:16/10;                     /* clean landscape — small card size */
}
.work-item__media img{
  width:100%;height:100%;object-fit:cover;transform:scale(1.02);
  transition:transform 1.1s var(--ease-out);
}
.work-item:hover .work-item__media img{transform:scale(1.035)}   /* subtle hover zoom */

/* every card keeps the 16:10 ratio; the large featured card is simply 2× wide
   (via the 2fr column above), so it lands at double the small card's height. */

/* text bar */
.work-item__bar{padding-top:16px}
/* title + tags share a row: title on the left, tag chips pushed to the far
   right (auto space between), both aligned to the top */
.work-item__head{display:flex;align-items:flex-start;gap:14px}
.work-item__titlewrap{min-width:0}       /* keeps the inline title underline hugging text */
.work-item__cat{                          /* Disciplines — pill row, top-right */
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;
  margin-left:auto;flex:0 1 auto;
}
.work-tag{                                /* Mirrors the homepage .pill, inverted */
  display:inline-flex;align-items:center;background:var(--ink);color:var(--cream);
  border:1px solid var(--line-2);border-radius:8px;
  padding:5px 13px;font-size:11px;font-weight:500;letter-spacing:.02em;line-height:1;
}
.work-item__title{                        /* Title-S (grid default) */
  font-size:clamp(1.1rem,1.6vw,1.4rem);font-weight:500;
  letter-spacing:-.02em;line-height:1.2;color:var(--cream);
  display:inline;background-image:linear-gradient(var(--green),var(--green));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .45s var(--ease);
}
.work-item:hover .work-item__title{background-size:100% 1px}
.work-item__desc{                         /* Body-S */
  margin-top:8px;font-size:14px;line-height:1.5;color:var(--cream-60);max-width:48ch;
}

/* featured items get a larger title + body (Subhead / Body) */
.feat-row .work-item--lg .work-item__title{
  font-size:clamp(1.4rem,2.4vw,2.2rem);letter-spacing:-.025em;line-height:1.1;
}
.feat-row .work-item__desc{font-size:15px;max-width:42ch}

/* =================== RESPONSIVE =================== */
@media (max-width:880px){
  /* stack featured cards; both keep the 16:10 ratio at full width */
  .feat-row,.feat-row--flip{grid-template-columns:1fr;gap:clamp(40px,8vw,56px)}
  .work-grid{grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,44px) 20px}
  /* give the filter room to breathe under the title… */
  .work-filter{flex-wrap:wrap;gap:14px;margin-top:clamp(42px,10vw,60px)}
  .work-filter__controls{gap:10px}
  /* …and a bit more space before the first project */
  .work{padding-top:clamp(44px,8vw,64px)}
}
@media (max-width:560px){
  .work-grid{grid-template-columns:1fr}
  /* the two toggles have a 190px min-width each, which overflows narrow phones.
     Let the controls span the full row and each toggle flex down to share it. */
  .work-filter__controls{width:100%}
  .work-filter__controls .dropdown{flex:1 1 0;min-width:0}
  .dropdown__toggle{width:100%;min-width:0;gap:8px;padding:12px 13px}
  .dropdown__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* keep both filter menus fully on-screen: the left ("disciplines") menu opens
     rightward, the right ("markets") menu opens leftward, and cap the width so
     neither runs off the edge. */
  .dropdown__menu{right:auto;left:0;max-width:calc(100vw - 2*var(--shell))}
  .dropdown[data-filter="market"] .dropdown__menu{left:auto;right:0}
}