/* ============================================================
   AETHR: Work page. Immersive WebGL scroll experience,
   rebranded from the motion engine onto Aethr's brand system:
   espresso / cream / oxblood, Gilroy + Good Night, no mono, no JP.
   ============================================================ */

@font-face{font-family:'Gilroy';font-weight:800;font-style:normal;font-display:swap;src:url("../fonts/gilroy-extrabold.woff2") format("woff2");}
@font-face{font-family:'Gilroy';font-weight:300;font-style:normal;font-display:swap;src:url("../fonts/gilroy-light.woff2") format("woff2");}
@font-face{font-family:'Good Night';font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/good-night.woff2") format("woff2");}

*{ box-sizing:border-box; margin:0; padding:0; }

:root{
  /* brand */
  --ox:#7E1F33; --ox-hi:#9A2840; --ox-lt:#A84258; --ox-deep:#5E1626; --ox-black:#3E0E1A;
  --cream:#F4EEE2; --sand:#E2DACB; --stone:#C9BFAD; --esp:#1C1813;
  --rose:#E0BFC7; --blush:#F1DEE3;
  /* warm translucent neutrals for UI chrome on the dark scenes */
  --cream-80:rgba(244,238,226,.80); --cream-62:rgba(244,238,226,.62);
  --cream-42:rgba(244,238,226,.42); --cream-hair:rgba(244,238,226,.14);
  --f-disp:'Gilroy',system-ui,sans-serif;
  --f-body:'Gilroy',system-ui,sans-serif;
  --f-script:'Good Night',cursive;
  --e-decel:cubic-bezier(0.16,1,0.3,1);
  --e-spring:cubic-bezier(0.34,1.56,0.64,1);
  --e-std:cubic-bezier(0.25,0.46,0.45,0.94);
  --pill:999px;
  /* spring fallback for engines without linear() (custom props skip parse-time
     validation, so the fallback has to live behind @supports, not a double declaration) */
  --aethr-ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
}
@supports (animation-timing-function:linear(0,1)){
  :root{ --aethr-ease-bounce:linear(0,.5 8%,.9 16%,1.08 23%,1.12 28%,1.08 35%,1 46%,.98 55%,1); }
}

html, body{
  background:var(--esp);
  color:var(--cream);
  font-family:var(--f-body); font-weight:300;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
a{ color:var(--cream); text-decoration:none; }
button{ background:none; border:none; color:inherit; cursor:pointer; font-family:inherit; }
::selection{ background:var(--ox); color:var(--cream); }
h1,h2,h3{ font-family:var(--f-disp); font-weight:800; letter-spacing:-0.02em; line-height:1.0; }
.scr{ font-family:var(--f-script); font-weight:400; letter-spacing:0; text-transform:none; }
:focus-visible{ outline:2px solid transparent; outline-offset:2px; box-shadow:0 0 0 2px var(--esp),0 0 0 4px var(--ox-lt); border-radius:10px; }
@media (forced-colors:active){ :focus-visible{ outline-color:Highlight; } }

/* label idiom: replaces YUGEN's mono chrome: Gilroy Light, tracked, uppercase */
.label{ font-family:var(--f-disp); font-weight:300; font-size:12px; letter-spacing:.22em; text-transform:uppercase; }

/* ============ WEBGL CANVAS ============ */
.GLCanvas{ position:fixed; inset:0; z-index:1; }
.GLCanvas canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
body.no-gl{ background:var(--esp); }

/* readability scrim over the canvas: the case-studies popup sits on a calmer,
   dimmed wall; normal brightness returns the moment the works take over */
.Scrim{ position:fixed; inset:0; z-index:5; background:rgba(20,16,13,.6); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .5s ease, visibility 0s .5s; }
body[data-current_section="works_intro"] .Scrim{ opacity:1; visibility:visible; transition:opacity .5s ease; }

/* ============ SECTIONS (scroll spacers) ============ */
main{ position:relative; z-index:2; pointer-events:none; }
/* vh line first = fallback for frozen in-app WebViews without lvh support */
.Section{ min-height:100vh; min-height:100lvh; position:relative; }
.Section--tall150{ min-height:150vh; min-height:150lvh; }
.Section--tall180{ min-height:180vh; min-height:180lvh; }
.Section--tall220{ min-height:220vh; min-height:220lvh; }   /* Team scene: the exploded stack holds longer */
.Works__scroll_item{ height:100vh; height:100lvh; }
.Service__scroll_item{ height:150vh; height:150lvh; }

/* ============ PRELOADER ============ */
.Loading{
  position:fixed; inset:0; z-index:9999; background:var(--esp);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
}
.Loading__logo{ height:56px; width:auto; display:block; }
.Loading__bar{ width:min(320px,60vw); height:1.5px; background:rgba(244,238,226,.14); overflow:hidden; }
.Loading__bar_fill{ height:100%; width:0%; background:var(--ox-lt); }
.Loading__caption{ font-family:var(--f-disp); font-weight:300; font-size:13px; letter-spacing:.14em; color:var(--cream-62); min-height:1.4em; }
.Loading__pct{ position:absolute; right:32px; bottom:26px; font-family:var(--f-disp); font-weight:300; font-size:12px; letter-spacing:.24em; color:var(--cream-42); }
.Loading.is-done{ pointer-events:none; }

/* ============ NAV (retained Aethr header) ============ */
#hdr{ position:fixed; inset:0 0 auto 0; z-index:99; pointer-events:none; transition:transform .6s var(--e-std); }
#hdr .wrap.nav{ max-width:none; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px clamp(20px,4vw,50px);
  padding-left:max(clamp(20px,4vw,50px), env(safe-area-inset-left, 0px));
  padding-right:max(clamp(20px,4vw,50px), env(safe-area-inset-right, 0px)); }
#hdr a, #hdr button{ pointer-events:auto; }
/* real brand wordmark: cream on dark scenes, dark variant crossfaded over light scenes */
.nav-logo{ position:relative; display:block; height:38px; }
.nav-logo-img{ height:38px; width:auto; display:block; transition:opacity .5s var(--e-std); }
.nav-logo-dark{ position:absolute; inset:0; opacity:0; }
.nav-mid{ display:flex; gap:2px; padding:5px; background:rgba(244,238,226,.08); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); border:1px solid var(--cream-hair); border-radius:var(--pill); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); transition:background .5s,border-color .5s; }
.nav-mid a{ padding:9px 17px; border-radius:var(--pill); color:var(--cream-80); font-family:var(--f-disp); font-weight:300; font-size:13px; letter-spacing:.02em; transition:color .25s,background-color .25s var(--e-std); }
.nav-mid a:hover{ color:var(--cream); background:rgba(244,238,226,.12); }
.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-social{ display:flex; gap:6px; }
.nav-social a{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--cream-80); transition:color .25s,background-color .25s; }
.nav-social a:hover{ color:var(--cream); background:rgba(244,238,226,.1); }
.sic{ width:17px; height:17px; display:block; }
.nav-sep{ width:1px; height:22px; background:var(--cream-hair); }
.nav-cta{ font-family:var(--f-disp); font-weight:800; font-size:13px; letter-spacing:-0.01em; color:var(--cream) !important; background:var(--ox); padding:11px 20px; border-radius:var(--pill); transition:transform .28s var(--e-std),background-color .3s var(--e-std); }
.nav-cta:hover{ background:var(--ox-hi); transform:translateY(-2px); }
/* SlotButton rolling-text hover (source signature micro-interaction), on brand colors */
.SlotButton{ overflow:hidden; }
.SlotButton .SlotButton__wrap{ display:block; position:relative; transition:transform .3s var(--e-std); }
.SlotButton .SlotButton__text{ display:block; }
.SlotButton .SlotButton__text--hover{ position:absolute; top:100%; left:0; width:100%; color:var(--ox); }
.nav-cta.SlotButton:hover{ background:var(--cream); }
.nav-cta.SlotButton:hover .SlotButton__wrap{ transform:translateY(-100%); }
/* 44x44 touch target; the two 22px bars stay visually identical (centers 7px apart) */
.nav-burger{ display:none; width:44px; height:44px; margin:-7px -10px -7px 0; flex-direction:column; align-items:center; justify-content:center; gap:5px; position:relative; z-index:1001; }
.nav-burger span{ display:block; width:22px; height:2px; background:var(--cream); border-radius:2px; transition:transform .3s var(--e-std),opacity .3s,background-color .5s var(--e-std); }
.nav-burger.is-open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav-burger.is-open span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

/* mobile drawer */
.nav-mobile{ position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 32px;
  background:rgba(20,16,13,.86); backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2);
  opacity:0; pointer-events:none; transition:opacity .4s var(--e-std); }
.nav-mobile.is-open{ opacity:1; pointer-events:auto; }
.nav-mobile a{ font-family:var(--f-disp); font-weight:800; font-size:30px; letter-spacing:-0.02em; color:var(--cream); padding:10px 0; text-transform:uppercase; }
.nav-mobile .nav-cta-m{ display:inline-flex; align-self:flex-start; margin-top:16px; font-size:14px; background:var(--ox); color:var(--cream) !important; padding:14px 24px; border-radius:var(--pill); text-transform:none; letter-spacing:-0.01em; }
.nav-social-m{ position:absolute; bottom:44px; left:32px; }

/* header slides away over the footer/outro */
body[data-current_section="footer"] #hdr{ transform:translateY(-115%); }

/* --- SECTION FLIP: over the light Studio / Results scenes (and the frames where
      that light scene is still pinned over the top of screen: mission_in, service_in),
      the nav goes espresso so it never reads cream-on-cream. --- */
:is(
  body[data-current_section="mission_in"],
  body[data-current_section="mission"],
  body[data-current_section="vision"],
  body[data-current_section="vision_out"],
  body[data-current_section="service_in"]
) :is(.nav-logo, .nav-mid a){ color:var(--esp); }
:is(
  body[data-current_section="mission_in"],
  body[data-current_section="mission"],
  body[data-current_section="vision"],
  body[data-current_section="vision_out"],
  body[data-current_section="service_in"]
) .nav-logo-cream{ opacity:0; }
:is(
  body[data-current_section="mission_in"],
  body[data-current_section="mission"],
  body[data-current_section="vision"],
  body[data-current_section="vision_out"],
  body[data-current_section="service_in"]
) .nav-logo-dark{ opacity:1; }
:is(
  body[data-current_section="mission_in"],
  body[data-current_section="mission"],
  body[data-current_section="vision"],
  body[data-current_section="vision_out"],
  body[data-current_section="service_in"]
) .nav-social a{ color:rgba(28,24,19,.66); }
:is(
  body[data-current_section="mission_in"],
  body[data-current_section="mission"],
  body[data-current_section="vision"],
  body[data-current_section="vision_out"],
  body[data-current_section="service_in"]
) .nav-mid{ background:rgba(28,24,19,.06); border-color:rgba(28,24,19,.14); }
:is(
  body[data-current_section="mission_in"],
  body[data-current_section="mission"],
  body[data-current_section="vision"],
  body[data-current_section="vision_out"],
  body[data-current_section="service_in"]
) .nav-mid a:hover{ color:var(--esp); background:rgba(28,24,19,.08); }
:is(
  body[data-current_section="mission_in"],
  body[data-current_section="mission"],
  body[data-current_section="vision"],
  body[data-current_section="vision_out"],
  body[data-current_section="service_in"]
) .nav-sep{ background:rgba(28,24,19,.16); }
:is(
  body[data-current_section="mission_in"],
  body[data-current_section="mission"],
  body[data-current_section="vision"],
  body[data-current_section="vision_out"],
  body[data-current_section="service_in"]
) .nav-burger span{ background:var(--esp); }

/* ============ SCROLL INDICATOR ============ */
.Indicator{ position:fixed; left:max(22px, env(safe-area-inset-left, 0px)); top:50%; transform:translateY(-50%); z-index:100; mix-blend-mode:difference; display:flex; flex-direction:column; gap:5px; transition:opacity .4s; }
body[data-current_section="kv"] .Indicator, body[data-current_section="footer"] .Indicator{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .4s, visibility 0s .4s; }
/* 18px-tall hit areas (was 1px); the 1.5px line stays centered so nothing moves visually */
.Indicator__item{ position:relative; height:18px; display:flex; align-items:center; cursor:pointer; pointer-events:auto; }
.Indicator__item i{ display:block; width:16px; height:1.5px; background:#fff; transition:width .3s var(--e-std); }
.Indicator__item em{ position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%); font-style:normal; font-family:var(--f-disp); font-weight:300; font-size:10px; letter-spacing:.18em; color:#fff; opacity:0; transition:opacity .3s; white-space:nowrap; }
.Indicator__item.is-active i{ width:24px; }
.Indicator__item.is-active em{ opacity:1; }

/* ============ KV HERO OVERLAY ============ */
.KV__scrollText{ position:fixed; bottom:30px; left:50%; transform:translateX(-50%); z-index:100; font-family:var(--f-disp); font-weight:300; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-80); opacity:0; transition:opacity .5s; pointer-events:none; }
body[data-current_section="kv"] .KV__scrollText{ opacity:1; }

.KV__title{ position:fixed; left:clamp(20px,5vw,64px); left:max(clamp(20px,5vw,64px), env(safe-area-inset-left, 0px)); bottom:9vh; z-index:10; max-width:min(780px,88vw); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .6s var(--e-decel), visibility 0s .6s; }
body[data-current_section="kv"] .KV__title{ opacity:1; visibility:visible; transition:opacity .6s var(--e-decel); }
body[data-current_section="kv"] .KV__title a{ pointer-events:auto; }
.KV__est{ font-family:var(--f-disp); font-weight:300; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--cream-62); margin-bottom:14px; }
.KV__eyebrow{ font-family:var(--f-disp); font-weight:800; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--ox-lt); display:inline-flex; align-items:center; gap:12px; margin-bottom:16px; }
.KV__eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ox-lt); }
/* home-hero pattern: sentence-case bold line + script line (never uppercase the hero h1) */
.KV__head{ text-transform:none; color:var(--cream); }
.KV__bold{ display:block; font-size:clamp(42px,7.4vw,96px); line-height:1.04; letter-spacing:-0.02em; }
.KV__bold .scr{ color:var(--rose); font-size:1.16em; letter-spacing:0; }
.KV__lead{ margin-top:20px; max-width:50ch; font-size:clamp(15px,1.4vw,18px); line-height:1.55; color:var(--cream-80); }
.KV__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
/* frosted glass CTAs (home-page idiom) */
.btn--frost{ background:rgba(244,238,226,.09); color:var(--cream); border-color:rgba(244,238,226,.3);
  -webkit-backdrop-filter:blur(12px) saturate(1.7); backdrop-filter:blur(12px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 1px rgba(0,0,0,.12), 0 10px 30px -14px rgba(0,0,0,.5); }
.btn--frost:hover{ background:rgba(244,238,226,.16); border-color:rgba(244,238,226,.62); }
.btn--frost-line{ background:transparent; color:var(--cream); border-color:rgba(244,238,226,.35);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.btn--frost-line:hover{ border-color:var(--cream); background:rgba(244,238,226,.07); }
.KV__trust{ margin-top:22px; font-family:var(--f-disp); font-weight:300; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-42); }

/* ============ FIXED OVERLAYS: section state machine ============ */
/* visibility gating keeps hidden overlays out of the tab order and the
   accessibility tree; the 0s .5s delay lets the opacity fade finish first */
.Works__content, .MV__content, .Service__content{ position:fixed; inset:0; height:100vh; height:100dvh; z-index:10; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .5s ease, visibility 0s .5s; }
body[data-current_section="works"] .Works__content{ opacity:1; visibility:visible; transition:opacity .5s ease; }
body[data-current_section="works"] .Works__content a{ pointer-events:auto; }
/* the bio rests visible; while the reel is in motion (body.works-flow, velocity-driven)
   it fades out of the way and comes back when the user settles on a work */
body[data-current_section="works"].works-flow .Works__content{ opacity:0; }
body[data-current_section="works"].works-flow .Works__content a{ pointer-events:none; }
body[data-current_section="mission"] #mission-content{ opacity:1; visibility:visible; transition:opacity .5s ease; }
body[data-current_section="vision"]  #vision-content{ opacity:1; visibility:visible; transition:opacity .5s ease; }
body[data-current_section="service"] .Service__content{ opacity:1; visibility:visible; transition:opacity .5s ease; }

/* ============ WORKS OVERLAY ============ */
.Works__item{ position:absolute; left:clamp(20px,8%,110px); bottom:12vh; width:min(70%,720px); }
.Works__item_info{ display:flex; align-items:center; gap:14px; margin-bottom:16px; flex-wrap:wrap; }
.Works__item_date{ font-family:var(--f-disp); font-weight:300; font-size:12px; letter-spacing:.24em; color:var(--cream-62); }
.Works__item_impression{ font-family:var(--f-disp); font-weight:800; font-size:12px; letter-spacing:.01em; line-height:1.2; color:var(--cream); background:var(--ox); border-radius:var(--pill); padding:7px 14px 6px; }
.Works__item_title{ font-family:var(--f-disp); font-weight:800; font-size:max(38px,4vw); line-height:.98; letter-spacing:-0.03em; color:var(--cream); margin:6px 0 12px; text-transform:uppercase; }
.Works__item_ja{ font-family:var(--f-disp); font-weight:300; font-size:15px; letter-spacing:.02em; margin-bottom:18px; color:var(--cream-80); }
.Works__item_cats{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; }
.Works__item_cats li{ font-family:var(--f-disp); font-weight:300; font-size:11px; letter-spacing:.14em; text-transform:uppercase; line-height:1.4; border:1px solid var(--cream-hair); border-radius:var(--pill); padding:6px 14px; color:var(--cream-80); }
.Works__more{ position:absolute; right:clamp(20px,4%,64px); bottom:12vh; font-family:var(--f-disp); font-weight:800; font-size:14px; letter-spacing:.02em; display:flex; align-items:center; gap:9px; padding-bottom:5px; color:var(--cream); }
.Works__more svg{ transition:transform .3s var(--e-std); }
.Works__more::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1.5px; background:var(--ox-lt); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--e-decel); }
.Works__more:hover::after{ transform:scaleX(1); transform-origin:left; }
.Works__more:hover svg{ transform:translate(3px,-3px); }

/* ============ STUDIO / RESULTS (light scenes) ============ */
.MV__content{ display:flex; flex-direction:column; justify-content:center; padding:16vh 10% 0; color:var(--esp);
  mask:linear-gradient(to top, black var(--mask-height,0%), transparent calc(var(--mask-height,0%) + 5%));
  -webkit-mask:linear-gradient(to top, black var(--mask-height,0%), transparent calc(var(--mask-height,0%) + 5%)); }
.MV__mark{ display:none; }   /* phones only; desktop renders the mark in the WebGL scene */
.MV__outline{ width:min(560px,64vw); height:auto; margin-bottom:5vh; overflow:visible; }
.MV__outline_text{ font-family:var(--f-disp); font-weight:800; font-size:96px; letter-spacing:-0.02em; fill:none; stroke:rgba(126,31,51,.5); stroke-width:1; }
.MV__lines{ display:flex; flex-direction:column; gap:.15em; margin-bottom:5vh; }
/* each line is its own mask: the words slide up into view (site DNA reveal),
   and slide on out through the same mask on exit. JS drives the transform. */
.MV__line{ font-family:var(--f-disp); font-weight:800; font-size:clamp(30px,5.4vw,64px); line-height:1.16; letter-spacing:-0.03em; overflow:hidden; padding-bottom:.07em; margin-bottom:-.07em; }
/* espresso text stays legible on the cream scene at all times; the oxblood accent
   draws in as an underline synced to the words (kept off the cream-on-cream trap). */
.MV__line mark{ display:inline-block; transform:translateY(112%); color:var(--esp); background:linear-gradient(var(--ox),var(--ox)) no-repeat left bottom; background-size:0% 5px; padding:0 .02em .14em; }
.MV__en{ font-family:var(--f-body); font-weight:300; font-size:clamp(15px,1.6vw,19px); line-height:1.5; letter-spacing:0; color:rgba(28,24,19,.72); max-width:40ch; }
/* the See wedge: an in-context link into /marketing-you-can-see, revealed by the
   panel mask like the rest of the composition; clickable only while vision is active */
.MV__cta{ align-self:flex-start; display:inline-flex; align-items:center; gap:8px; margin-top:clamp(22px,3.4vh,40px); font-family:var(--f-disp); font-weight:800; font-size:14px; letter-spacing:.01em; color:var(--ox); border-bottom:1.5px solid var(--ox); padding-bottom:3px; pointer-events:none; transition:color .25s, border-color .25s, transform .3s var(--e-std); }
.MV__cta:hover{ color:var(--ox-hi); border-color:var(--ox-hi); transform:translateX(2px); }
body[data-current_section="vision"] #vision-content .MV__cta{ pointer-events:auto; }

/* ============ APPROACH (service wave strip) ============ */
.Service__content{ padding:12vh 5% 0; }
.Service__title{ font-family:var(--f-disp); font-weight:800; font-size:max(64px,5vw); letter-spacing:-0.03em; line-height:1; color:var(--cream); }
.Service__item{ position:absolute; top:32%; right:5%; max-width:520px; text-align:left; }
.Service__item_no{ font-family:var(--f-disp); font-weight:800; font-size:14px; letter-spacing:.12em; color:var(--ox-lt); margin-bottom:14px; }
.Service__item_title{ font-family:var(--f-disp); font-weight:800; font-size:max(38px,3vw); line-height:1.04; letter-spacing:-0.03em; margin-bottom:18px; color:var(--cream); text-shadow:0 2px 24px rgba(0,0,0,.5); }
.Service__item_en{ font-family:var(--f-body); font-weight:300; font-size:16px; letter-spacing:0; line-height:1.55; color:var(--cream-80); max-width:34em; }

/* ============ OUTRO + FOOTER ============ */
.Outro{ position:relative; min-height:100vh; min-height:100lvh; z-index:2; pointer-events:auto; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; background:var(--esp); }
.Outro__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.Outro__cta{ position:relative; z-index:3; text-align:center; padding:14vh clamp(20px,5vw,48px) 6vh; }
.Outro__eyebrow{ font-family:var(--f-disp); font-weight:800; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--ox-lt); display:inline-flex; align-items:center; gap:12px; margin-bottom:20px; }
.Outro__eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ox-lt); }
.Outro__head{ font-family:var(--f-disp); font-weight:800; font-size:clamp(32px,5.6vw,74px); line-height:1.02; letter-spacing:-0.03em; text-transform:uppercase; color:var(--cream); }
.Outro__head .scr{ text-transform:none; color:var(--rose); }
.Outro__row{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:36px; }
.btn{ display:inline-flex; align-items:center; gap:10px; border-radius:var(--pill); padding:15px 26px; font-family:var(--f-disp); font-weight:800; font-size:14px; letter-spacing:-0.01em; cursor:pointer; border:1.5px solid transparent; transition:transform .28s var(--e-std),background-color .28s,border-color .28s; }
.btn svg{ width:16px; height:16px; transition:transform .28s var(--e-std); }
.btn:hover{ transform:translateY(-2px); } .btn:hover svg{ transform:translateX(3px); }
.btn--solid{ background:var(--ox); color:var(--cream); } .btn--solid:hover{ background:var(--ox-hi); }
.btn--ghost{ background:transparent; color:var(--cream); border-color:var(--cream-42); } .btn--ghost:hover{ border-color:var(--cream); background:rgba(244,238,226,.06); }

.Footer{ position:relative; z-index:3; background:#15110d; padding:clamp(44px,6vh,72px) clamp(20px,5vw,48px) 30px; }
.Footer__top{ max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:34px; border-bottom:1px solid var(--cream-hair); }
.Footer__brand{ max-width:340px; }
.Footer__logo{ height:42px; width:auto; display:block; }
.Footer__brand p{ margin-top:14px; font-size:14px; line-height:1.55; color:var(--cream-62); }
.Footer__social{ display:flex; gap:8px; margin-top:20px; }
.Footer__social a{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid var(--cream-hair); border-radius:50%; color:var(--cream-80); transition:color .25s,border-color .25s,background-color .25s; }
.Footer__social a:hover{ color:var(--cream); border-color:var(--cream); background:rgba(244,238,226,.06); }
.Footer__cols{ display:flex; gap:64px; }
.Footer__col{ display:flex; flex-direction:column; gap:12px; }
.Footer__col h3{ font-family:var(--f-disp); font-weight:800; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream); margin-bottom:4px; }
.Footer__col a{ font-family:var(--f-body); font-weight:300; font-size:14px; color:var(--cream-62); transition:color .25s; }
.Footer__col a:hover{ color:var(--cream); }
.Footer__legal{ max-width:1200px; margin:22px auto 0; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--f-disp); font-weight:300; font-size:12px; letter-spacing:.04em; color:var(--cream-42); }

/* ============ NAV INTRO ANIMATION (the original Aethr home entrance) ============ */
@keyframes aethrNavRise{0%{opacity:0;transform:translateY(13px);}100%{opacity:1;transform:translateY(0);}}
@keyframes aethrPillPop{0%{opacity:0;transform:translateY(-6px) scale(.8);}100%{opacity:1;transform:translateY(0) scale(1);}}
@keyframes aethrPopIn{0%{opacity:0;transform:translateY(26px) scale(.955);}100%{opacity:1;transform:translateY(0) scale(1);}}
/* fires when the chrome is released after the preloader iris (main.js adds .chrome-in) */
.chrome-in .nav-logo{ animation:aethrNavRise .58s var(--e-decel) .06s backwards; }
.chrome-in .nav-mid{ transform-origin:center; animation:aethrPillPop .72s var(--aethr-ease-bounce) .14s backwards; }
.chrome-in .nav-mid a{ animation:aethrNavRise .52s var(--aethr-ease-bounce) backwards; }
.chrome-in .nav-mid a:nth-child(1){ animation-delay:.30s; }
.chrome-in .nav-mid a:nth-child(2){ animation-delay:.37s; }
.chrome-in .nav-mid a:nth-child(3){ animation-delay:.44s; }
.chrome-in .nav-mid a:nth-child(4){ animation-delay:.51s; }
.chrome-in .nav-social{ animation:aethrNavRise .5s var(--e-decel) .44s backwards; }
.chrome-in .nav-cta{ animation:aethrNavRise .54s var(--e-std) .5s backwards; }
.chrome-in .nav-burger{ animation:aethrNavRise .46s var(--e-std) .3s backwards; }

/* ============ CLIENTS: "brands that needed results" (works intro) ============ */
.Clients__content{ position:fixed; inset:0; z-index:10; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:12vh 6vw 0; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .5s ease, visibility 0s .5s; }
body[data-current_section="works_intro"] .Clients__content{ opacity:1; visibility:visible; transition:opacity .5s ease; }
.Clients__eyebrow{ font-family:var(--f-disp); font-weight:800; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--ox-lt); margin-bottom:16px; }
.Clients__head{ font-family:var(--f-disp); font-weight:800; font-size:clamp(30px,5vw,58px); line-height:1.02; letter-spacing:-0.03em; text-transform:uppercase; color:var(--cream); }
.Clients__head .scr{ text-transform:none; color:var(--rose); font-size:1.08em; }
.Clients__row{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-end; gap:clamp(28px,5vw,72px); margin-top:7vh; }
.Clients__item{ display:flex; flex-direction:column; align-items:center; gap:16px; opacity:0; transform:translateY(26px) scale(.955); }
body[data-current_section="works_intro"] .Clients__item{ animation:aethrPopIn .66s var(--aethr-ease-bounce) backwards; opacity:1; transform:none; }
body[data-current_section="works_intro"] .Clients__item:nth-child(2){ animation-delay:.08s; }
body[data-current_section="works_intro"] .Clients__item:nth-child(3){ animation-delay:.16s; }
.Clients__logo{ height:52px; display:flex; align-items:center; justify-content:center; }
.Clients__logo img{ height:52px; width:auto; max-width:120px; object-fit:contain; filter:brightness(0) invert(1); opacity:.92; }
.Clients__logo--text{ font-family:var(--f-disp); font-weight:800; font-size:34px; letter-spacing:.04em; color:var(--cream); }
.Clients__item em{ font-family:var(--f-disp); font-weight:300; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-62); font-style:normal; position:relative; padding-bottom:5px; transition:color .25s; }
.Clients__item em::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1.5px; background:var(--ox-lt); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--e-decel); }
/* the brands are the doors to their case studies */
body[data-current_section="works_intro"] a.Clients__item{ pointer-events:auto; cursor:pointer; }
body[data-current_section="works_intro"] a.Clients__item:hover{ transform:translateY(-5px); transition:transform .3s var(--e-std); }
a.Clients__item:hover em{ color:var(--cream); }
a.Clients__item:hover em::after{ transform:scaleX(1); transform-origin:left; }
.Clients__hint{ margin-top:4.5vh; font-family:var(--f-disp); font-weight:300; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-42); }

/* ============ DISCIPLINE STACK: explodes on the Team scene ============ */
.Stack__content{ position:fixed; top:0; right:0; bottom:0; width:46vw; z-index:11; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .5s ease, visibility 0s .5s; perspective:1300px; }
body[data-current_section="mission"] .Stack__content{ opacity:1; visibility:visible; transition:opacity .5s ease; }
.Stack__stage{ position:relative; width:330px; height:380px; transform-style:preserve-3d; transform:rotateX(52deg) rotateZ(-24deg); }
.Stack__plate{ position:absolute; left:50%; top:50%; width:280px; height:280px; margin:-140px 0 0 -140px; border-radius:22px; background:rgba(28,24,19,.05); border:1px solid rgba(28,24,19,.16); transform:translateZ(-20px); box-shadow:0 50px 80px -40px rgba(0,0,0,.35); }
.Stack__pane{ position:absolute; left:50%; top:50%; width:290px; height:62px; margin:-31px 0 0 -145px; border-radius:16px; display:flex; align-items:center; gap:14px; padding:0 20px; overflow:hidden;
  background:var(--esp); border:1px solid rgba(244,238,226,.10);
  box-shadow:0 26px 44px -22px rgba(0,0,0,.5), inset 0 1px 0 rgba(244,238,226,.12);
  transform:translateY(var(--cy)) translateZ(var(--cz)) scale(.84); opacity:0;
  transition:transform .5s var(--e-decel), opacity .3s ease; }   /* exit path: collapse fast, no lingering panes */
/* enter path re-declares the unhurried explode; the scene holds long enough to read it */
body[data-current_section="mission"] .Stack__pane{ transform:translateY(var(--y)) translateZ(var(--z)) scale(1); opacity:1; transition:transform 1.15s var(--e-decel), opacity .6s ease; }
body[data-current_section="mission"] .Stack__pane:nth-child(2){ transition-delay:.06s; }
body[data-current_section="mission"] .Stack__pane:nth-child(3){ transition-delay:.14s; }
body[data-current_section="mission"] .Stack__pane:nth-child(4){ transition-delay:.22s; }
body[data-current_section="mission"] .Stack__pane:nth-child(5){ transition-delay:.30s; }
body[data-current_section="mission"] .Stack__pane:nth-child(6){ transition-delay:.38s; }
.Stack__ic{ width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:none; background:var(--ox); color:var(--cream); }
.Stack__ic svg{ width:17px; height:17px; }
.Stack__tx{ font-family:var(--f-disp); font-weight:800; font-size:14px; letter-spacing:-0.01em; color:var(--cream); line-height:1.1; }
.Stack__tx small{ display:block; font-family:var(--f-disp); font-weight:300; font-size:9px; letter-spacing:.12em; color:var(--cream-62); text-transform:uppercase; margin-top:3px; }
.Stack__chev{ margin-left:auto; color:var(--ox-lt); flex:none; font-size:18px; }

/* ============ LOADING GATES ============ */
body[data-gl_loading="true"] #hdr,
body[data-gl_loading="true"] .KV__scrollText,
body[data-gl_loading="true"] .KV__title,
body[data-gl_loading="true"] .Indicator{ opacity:0; }

/* ============ MOBILE ============ */
/* width covers portrait phones/tablets; the coarse+short clause catches phones
   held in landscape (about 800px wide) that would otherwise get the desktop chrome */
@media (max-width:768px), ((pointer:coarse) and (max-height:500px)){
  #hdr .wrap.nav{ padding:20px 18px; padding-left:max(18px, env(safe-area-inset-left, 0px)); padding-right:max(18px, env(safe-area-inset-right, 0px)); }
  .nav-mid, .nav-social, .nav-sep, .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
  .Indicator{ display:none; }
  .KV__scrollText{ writing-mode:vertical-rl; text-orientation:mixed; left:auto; right:15px; right:max(15px, env(safe-area-inset-right, 0px)); bottom:30px; transform:none; font-size:10px; }
  .KV__title{ left:20px; right:20px; bottom:12vh; max-width:none; }
  .KV__eyebrow{ display:flex; flex-wrap:wrap; font-size:11px; letter-spacing:.14em; }
  .KV__est{ display:none; }
  .KV__trust{ display:none; }
  .nav-logo, .nav-logo-img{ height:30px; }
  .Loading__logo{ height:42px; }
  .Works__item{ left:20px; width:calc(100% - 40px); bottom:14vh; }
  .Works__item_title{ font-size:max(30px,9vw); }
  .Works__more{ right:20px; bottom:5vh; font-size:13px; }
  .MV__content{ padding:14vh 6% 0; }
  /* crisp HTML brand mark, top-right above the outline: sharp at native resolution,
     clear of the headline (the old WebGL version was blurry and sat on the text) */
  .MV__mark{ display:block; position:absolute; top:13vh; right:6%; width:min(58vw,290px); height:auto; }
  .MV__outline{ width:76vw; }
  .MV__lines{ gap:.26em; }   /* the two headline lines were nearly touching on phones */
  .Service__content{ padding-top:16vh; }
  .Service__title{ font-size:52px; }
  .Service__item{ top:auto; bottom:6vh; right:6%; left:6%; max-width:none; }
  .Service__item_title{ font-size:30px; }
  .Footer__top{ flex-direction:column; gap:32px; }
  .Footer__cols{ gap:40px; flex-wrap:wrap; }
  .Footer__col a{ padding:6px 0; margin:-4px 0; }  /* bigger touch targets, same rhythm */
  .Loading__pct{ right:20px; bottom:20px; }
  .Stack__content{ display:none; }
  .Clients__content{ padding-top:16vh; justify-content:flex-start; }
  .Clients__row{ gap:20px 28px; margin-top:5vh; }
  .Clients__logo, .Clients__logo img{ height:38px; }
  .Clients__logo--text{ font-size:24px; }
  .Clients__item em{ font-size:10px; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .KV__title, .Works__more svg, .btn, .nav-cta, .Indicator__item i, .nav-mid a, .SlotButton .SlotButton__wrap{ transition:none !important; }
  /* keep the pop / explode content visible without motion */
  .Clients__item{ opacity:1 !important; transform:none !important; }
  .Stack__pane{ opacity:1 !important; transform:translateY(var(--y)) translateZ(var(--z)) !important; }
  html{ scroll-behavior:auto; }
}