/* ============ RESET & TOKENS ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#0B0B0B;
  --cream:#F7F0E4;
  --olive:#5A6552;
  --olive-2:#98A487;      /* lighter olive — accent text on dark */
  --olive-deep:#3D4636;
  --cream-80:rgba(247,240,228,.82);
  --cream-55:rgba(247,240,228,.55);
  --hair:rgba(247,240,228,.14);
  --hair-2:rgba(247,240,228,.28);
  --hair-dark:rgba(11,11,11,.16);
  --font-display:"Archivo","Arial Black",sans-serif;
  --font-sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-serif:"Fraunces",Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,5vw,80px);
  --maxw:1440px;
  /* modular type scale — display 6–9x body, big "missing middle" */
  --t-display:clamp(3.4rem,1.2rem + 10vw,10rem);
  --t-h1:clamp(2.4rem,1.3rem + 5vw,4.5rem);
  --t-h2:clamp(1.85rem,1.3rem + 2.5vw,3rem);
  --t-h3:clamp(1.3rem,1.05rem + 1.1vw,1.75rem);
  --t-body:clamp(1rem,.95rem + .35vw,1.1rem);
  --t-small:.875rem;
  --t-eyebrow:.72rem;
}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--font-sans);background:var(--black);color:var(--cream-80);font-size:var(--t-body);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul{list-style:none}
em{font-style:italic}
::selection{background:var(--olive-2);color:var(--black)}

/* ============ GRAIN OVERLAY ============ */
.grain{position:fixed;inset:0;z-index:9998;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='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============ TOP UTILITY BAR ============ */
.topbar{position:relative;z-index:60;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:9px var(--pad);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-55);background:var(--black);border-bottom:1px solid var(--hair)}
.topbar-mid{display:none}
.status{display:inline-flex;align-items:center;gap:8px;color:var(--cream-80)}
.status .dot{width:7px;height:7px;border-radius:50%;background:var(--olive-2);box-shadow:0 0 0 0 rgba(152,164,135,.6);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(152,164,135,.5)}70%{box-shadow:0 0 0 7px rgba(152,164,135,0)}100%{box-shadow:0 0 0 0 rgba(152,164,135,0)}}

/* ============ TYPOGRAPHY PRIMITIVES ============ */
.eyebrow{font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--olive-2)}
.index{font-family:var(--font-sans);font-size:var(--t-small);font-weight:600;letter-spacing:.05em;color:var(--olive-2)}
.section-name{font-size:var(--t-eyebrow);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-55)}
.section-aside{display:flex;align-items:baseline;gap:14px;margin-bottom:clamp(22px,3vw,36px)}
.section-aside .index::after{content:" —";color:var(--olive-2)}
.meta-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--hair);font-size:var(--t-small)}
.meta-row span:first-child{color:var(--cream-55);text-transform:uppercase;letter-spacing:.1em;font-size:.75rem;font-weight:500}
.meta-row span:last-child{color:var(--cream-80);text-align:right}

/* ghost stroked word behind headings */
.ghost{position:absolute;top:.1em;left:-2vw;font-family:var(--font-display);font-weight:900;font-size:clamp(7rem,22vw,20rem);line-height:.8;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px rgba(247,240,228,.09);text-stroke:1px rgba(247,240,228,.09);pointer-events:none;z-index:0;user-select:none}
.ghost-right{left:auto;right:-2vw}
.section-cream .ghost{-webkit-text-stroke-color:rgba(11,11,11,.08)}
.section-olive .ghost{-webkit-text-stroke-color:rgba(11,11,11,.12)}

/* ============ SECTION SHELLS ============ */
section{position:relative;padding:clamp(64px,11vw,150px) var(--pad);border-top:1px solid var(--hair)}
.section-dark{background:transparent;color:var(--cream-80)}
.section-olive{background:var(--olive);color:var(--black);border-top-color:rgba(11,11,11,.18)}
.section-cream{background:var(--cream);color:var(--black);border-top-color:rgba(11,11,11,.14)}
.section-olive .eyebrow,.section-olive .index,.section-cream .eyebrow,.section-cream .index{color:var(--olive-deep)}
.section-olive .section-name,.section-cream .section-name{color:rgba(11,11,11,.6)}
.section-olive .section-aside .index::after,.section-cream .section-aside .index::after{color:var(--olive-deep)}
.about,.work,.contact{overflow:clip}

h1,h2,h3{font-family:var(--font-display);font-weight:900;color:var(--cream);line-height:1;letter-spacing:-.02em}
.section-olive h1,.section-olive h2,.section-olive h3,.section-cream h1,.section-cream h2,.section-cream h3{color:var(--black)}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:70;transition:background .4s var(--ease),backdrop-filter .4s var(--ease)}
.nav.scrolled{background:rgba(11,11,11,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.nav.on-light.scrolled{background:rgba(90,101,82,.85)}
.nav.on-cream.scrolled{background:rgba(247,240,228,.85)}
.nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px var(--pad)}
.nav-logo{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1;color:var(--cream)}
.nav-logo span{opacity:.5;margin-left:3px}
.nav-links{display:none;position:relative;align-items:center;gap:clamp(14px,2vw,30px)}
.nav-links a{font-size:13.5px;font-weight:500;padding:6px 2px;position:relative;color:var(--cream-55);transition:color .3s var(--ease)}
.nav-links a.is-active,.nav-links a:hover{color:var(--cream)}
.nav-indicator{position:absolute;bottom:0;height:2px;background:var(--olive-2);width:0;left:0;transition:transform .45s var(--ease),width .45s var(--ease);will-change:transform,width}
.nav-cta{display:none;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--black);background:var(--cream);padding:10px 20px;border-radius:0;transition:transform .25s var(--ease)}
.nav-cta:hover{transform:translateY(-2px)}
.nav.on-light .nav-logo,.nav.on-light .nav-links a.is-active{color:var(--black)}
.nav.on-light .nav-links a{color:rgba(11,11,11,.6)}
.nav.on-light .nav-cta{background:var(--black);color:var(--cream)}
.nav.on-light .nav-indicator{background:var(--black)}
.nav.on-cream .nav-logo,.nav.on-cream .nav-links a.is-active{color:var(--black)}
.nav.on-cream .nav-links a{color:rgba(11,11,11,.55)}
.nav.on-cream .nav-cta{background:var(--black);color:var(--cream)}
.nav.on-cream .nav-indicator{background:var(--olive)}
.nav-burger{display:flex;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:6px;z-index:120;color:var(--cream)}
.nav.on-light .nav-burger,.nav.on-cream .nav-burger{color:var(--black)}
.nav-burger span{width:26px;height:2px;background:currentColor;transition:transform .35s var(--ease),opacity .35s var(--ease)}
body.menu-open .nav{z-index:130}
body.menu-open .nav-links{display:none}
body.menu-open .nav-burger{color:var(--cream)}
body.menu-open .nav-burger span:first-child{transform:translateY(4px) rotate(45deg)}
body.menu-open .nav-burger span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ============ SIDE LABEL ============ */
.side-label{display:none;position:fixed;left:14px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;z-index:55;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-55);pointer-events:none;mix-blend-mode:difference}

/* ============ MOBILE MENU ============ */
.mobile-menu{position:fixed;inset:0;z-index:110;background:var(--black);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--pad);transform:translateY(-100%);transition:transform .6s var(--ease);will-change:transform}
body.menu-open .mobile-menu{transform:translateY(0)}
.mobile-menu a{display:flex;align-items:baseline;gap:14px;font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,9vw,3.2rem);color:var(--cream);line-height:1.15;opacity:0;transform:translateY(20px)}
.mobile-menu .mm-no{font-family:var(--font-sans);font-size:.85rem;font-weight:600;color:var(--olive-2)}
body.menu-open .mobile-menu a{opacity:1;transform:translateY(0);transition:opacity .5s var(--ease),transform .5s var(--ease)}
body.menu-open .mobile-menu a:nth-child(1){transition-delay:.12s}
body.menu-open .mobile-menu a:nth-child(2){transition-delay:.18s}
body.menu-open .mobile-menu a:nth-child(3){transition-delay:.24s}
body.menu-open .mobile-menu a:nth-child(4){transition-delay:.3s}
body.menu-open .mobile-menu a:nth-child(5){transition-delay:.36s}
.mobile-menu-cta{font-family:var(--font-sans)!important;font-size:1rem!important;font-weight:600;margin-top:22px;color:var(--olive-2)!important;transition-delay:.42s!important}

/* ============ HERO ============ */
.hero{min-height:calc(100svh - 38px);display:flex;flex-direction:column;padding-top:clamp(30px,6vw,60px);padding-bottom:clamp(24px,4vw,44px);border-top:0;overflow:clip}
.hero-glow{position:absolute;inset:0;background:radial-gradient(55% 45% at 62% 55%,rgba(90,101,82,.4),transparent 68%);filter:blur(20px);z-index:0}
.hero>:not(.hero-glow){position:relative;z-index:1}
.hero-top{display:flex;justify-content:space-between;gap:16px}
.hero-content{margin-top:auto}
.hero-mark{font-family:var(--font-display);font-weight:900;font-size:var(--t-display);line-height:.86;letter-spacing:-.035em}
.hero-mark .reveal-mask{display:block}
.hero-mark .reveal-mask:nth-child(2){margin-left:.14em}
.hero-tagline{max-width:32ch;margin-top:clamp(20px,3vw,32px);font-size:clamp(1.05rem,.9rem + .9vw,1.5rem);line-height:1.4;color:var(--cream-80)}
.hero-tagline em{font-family:var(--font-serif);font-weight:400;color:var(--cream)}
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-top:clamp(28px,5vw,52px)}
.ticker{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:inline-flex;align-items:center;gap:20px;width:max-content;animation:scroll 34s linear infinite;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-55)}
.ticker-track i{color:var(--olive-2);font-style:normal;font-size:9px}
@keyframes scroll{to{transform:translateX(-50%)}}

/* rotating badge */
.badge{position:relative;flex-shrink:0;width:clamp(84px,10vw,116px);height:clamp(84px,10vw,116px);display:grid;place-items:center;color:var(--cream-55)}
.badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 16s linear infinite;fill:currentColor;font-size:9.2px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.badge .badge-arrow{font-size:18px;color:var(--olive-2)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ ABOUT ============ */
.about-body{position:relative;z-index:1}
.lead{font-size:var(--t-h3);line-height:1.35;font-weight:500;color:var(--cream);max-width:24ch;margin-bottom:clamp(32px,5vw,56px)}
.lead em,.manifesto-text em{font-family:var(--font-serif);font-weight:400}
.about-cols{display:grid;gap:clamp(24px,4vw,44px)}
.about-cols p{color:var(--cream-80);max-width:44ch}

/* ============ MANIFESTO ============ */
.manifesto{padding-top:clamp(48px,8vw,86px);padding-bottom:clamp(48px,8vw,86px)}
.manifesto-text{font-size:clamp(1.5rem,3vw,2.6rem);font-weight:600;line-height:1.32;max-width:24ch;color:var(--black)}
.manifesto-text em{color:var(--olive-deep)}
.mark-circle{position:relative;display:inline-block;padding:0 6px;white-space:nowrap}
.mark-circle::after{content:"";position:absolute;inset:-8% -6%;border:2px solid var(--black);border-radius:50%/64%;transform:rotate(-3deg)}

/* ============ MARQUEE ============ */
.marquee{padding:clamp(8px,1.6vw,16px) 0;overflow:hidden;border-top:1px solid rgba(11,11,11,.18);border-bottom:1px solid rgba(11,11,11,.18)}
.marquee-track{display:inline-flex;align-items:center;gap:26px;width:max-content;animation:scroll 30s linear infinite;font-family:var(--font-display);font-weight:900;font-size:clamp(2.4rem,8vw,6.5rem);line-height:1;letter-spacing:-.02em;color:var(--black)}
.marquee-track i{font-size:.32em;font-style:normal;transform:translateY(-.35em);color:var(--olive-deep)}

/* ============ SERVICES ============ */
.services-aside .aside-note{display:none;font-size:var(--t-small);color:var(--cream-55);margin-top:14px;max-width:20ch}
.services-list{display:flex;flex-direction:column}
.service{padding:clamp(26px,4vw,44px) 0;border-top:1px solid var(--hair)}
.service:first-child{border-top:0;padding-top:0}
.service-head{display:flex;align-items:baseline;gap:14px;margin-bottom:16px}
.service-no{font-family:var(--font-sans);font-size:var(--t-small);font-weight:600;color:var(--olive-2)}
.service-head h3{font-size:var(--t-h1)}
.service-list{display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:20px}
.service-list li{position:relative;font-size:var(--t-small);color:var(--cream-80);padding-left:16px}
.service-list li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--olive-2)}
.service-cta{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--cream);border:1px solid var(--hair-2);padding:11px 20px;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.service-cta span{transition:transform .3s var(--ease)}
.service-cta:hover{background:var(--cream);color:var(--black);border-color:var(--cream)}
.service-cta:hover span{transform:translate(2px,-2px)}

/* ============ WORK ============ */
.section-head-row{margin-bottom:clamp(28px,4vw,48px)}
.work-note{max-width:40ch;color:var(--cream-80);margin-top:8px}
.work-grid{display:grid;gap:clamp(28px,4vw,48px) clamp(16px,2.5vw,26px)}
.work-tile{display:block;position:relative;z-index:1}
.work-media{position:relative;aspect-ratio:4/3;overflow:hidden;display:flex;align-items:center;justify-content:center}
.work-media::after{content:"View";position:absolute;bottom:12px;right:14px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cream);background:var(--olive);padding:6px 12px;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.work-word{font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,5vw,3.4rem);line-height:1;letter-spacing:-.02em;transition:transform .6s var(--ease);will-change:transform}
.work-tile[data-tone="olive"] .work-media{background:var(--olive)}
.work-tile[data-tone="olive"] .work-word{color:var(--black)}
.work-tile[data-tone="cream"] .work-media{background:var(--cream)}
.work-tile[data-tone="cream"] .work-word{color:var(--black)}
.work-tile[data-tone="dark"] .work-media{background:#161a14;border:1px solid var(--hair)}
.work-tile[data-tone="dark"] .work-word{color:var(--cream)}
.work-meta{display:flex;flex-direction:column;gap:3px;padding-top:14px;border-top:1px solid var(--hair);margin-top:14px}
.work-meta h3{font-size:var(--t-h3);color:var(--cream)}
.work-tags{font-size:.78rem;letter-spacing:.06em;color:var(--cream-55);text-transform:uppercase}

/* ============ RESULTS (cream) ============ */
.results-head{font-family:var(--font-display);font-weight:900;font-size:clamp(2.6rem,9vw,7rem);line-height:.92;letter-spacing:-.03em;color:var(--black)}
.results-head:last-of-type{margin-bottom:clamp(36px,5vw,64px)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,4vw,44px);margin-bottom:clamp(40px,6vw,68px)}
.stat{border-top:1px solid var(--hair-dark);padding-top:16px}
.stat-num{display:block;font-family:var(--font-display);font-weight:900;font-size:clamp(2.6rem,7vw,5.5rem);line-height:1;letter-spacing:-.03em;color:var(--black)}
.stat-num::after{content:attr(data-suffix);color:var(--olive)}
.stat-label{font-size:var(--t-small);font-weight:500;color:var(--olive-deep)}
.logos{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;border-top:1px solid var(--hair-dark);padding-top:clamp(22px,3vw,34px)}
.logos-label{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(11,11,11,.5);margin-right:8px}
.logos span:not(.logos-label){font-size:clamp(1rem,2vw,1.5rem);font-family:var(--font-display);font-weight:700;color:rgba(11,11,11,.75)}

/* ============ CONTACT ============ */
.pull-quote{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:clamp(1.4rem,3.4vw,2.4rem);line-height:1.35;max-width:24ch;color:var(--black);margin-bottom:clamp(24px,4vw,20px)}
.contact-grid{position:relative;z-index:1}
.thanks{font-family:var(--font-display);font-weight:900;font-size:var(--t-display);line-height:.82;letter-spacing:-.035em;color:var(--black)}
.contact-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(34px,5vw,56px)}
.btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;padding:15px 28px;border-radius:0;transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.btn span{transition:transform .3s var(--ease)}
.btn:hover span{transform:translate(2px,-2px)}
.btn-solid{background:var(--black);color:var(--cream)}
.btn-solid:hover{transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--black);color:var(--black)}
.btn-ghost:hover{background:var(--black);color:var(--cream)}

/* ============ FOOTER ============ */
.footer{display:grid;gap:32px;padding-top:clamp(44px,6vw,64px);padding-bottom:clamp(44px,6vw,64px)}
.footer-mark{font-family:var(--font-display);font-weight:900;font-size:clamp(2.4rem,7vw,4.5rem);color:var(--cream);line-height:1}
.footer-mark span{opacity:.45;margin-left:3px}
.footer-sign{font-family:var(--font-serif);font-style:italic;font-size:1.4rem;color:var(--olive-2);margin-top:6px}
.footer-meta .meta-row:first-child{border-top:1px solid var(--hair)}

/* ============ FLOATING WA ============ */
.wa-float{position:fixed;bottom:20px;right:20px;z-index:90;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.28);transition:transform .3s var(--ease)}
.wa-float:hover{transform:translateY(-3px) scale(1.04)}

/* ============ MOTION / REVEAL (progressive enhancement) ============ */
.reveal{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal-mask{overflow:hidden}
.reveal-mask>span{display:inline-block;transition:transform 1s var(--ease);will-change:transform}
.reveal-mask[data-d="1"]>span{transition-delay:.12s}
.service-list li,.stat{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.stagger.is-in>*:nth-child(1){transition-delay:.05s}
.stagger.is-in>*:nth-child(2){transition-delay:.12s}
.stagger.is-in>*:nth-child(3){transition-delay:.19s}
.stagger.is-in>*:nth-child(4){transition-delay:.26s}
.stagger.is-in>*:nth-child(5){transition-delay:.33s}
.js .reveal{opacity:0;transform:translateY(28px)}
.js .reveal-mask>span{transform:translateY(105%)}
.js .service-list li{opacity:0;transform:translateY(14px)}
.js .stat{opacity:0;transform:translateY(16px)}
.js .reveal.is-in{opacity:1;transform:none}
.js .reveal-mask.is-in>span{transform:translateY(0)}
.js .stagger.is-in li{opacity:1;transform:none}
.js .stagger.is-in .stat{opacity:1;transform:none}

/* ============ DESKTOP ============ */
@media(min-width:900px){
  .nav-links,.nav-cta{display:flex}
  .nav-burger{display:none}
  .topbar-mid{display:block}
  .side-label{display:block}
  .about,.services{display:grid;grid-template-columns:260px 1fr;gap:clamp(40px,5vw,80px);align-items:start}
  .about .section-aside,.services-aside{position:sticky;top:120px;margin-bottom:0;flex-direction:column;gap:8px}
  .services-aside .aside-note{display:block}
  .about-cols{grid-template-columns:1fr 1fr}
  .work-grid{grid-template-columns:repeat(3,1fr)}
  .work-tile.wide{grid-column:span 2}
  .work-tile.wide .work-media{aspect-ratio:16/9}
  .work-tile.push{margin-top:56px}
  .stats{grid-template-columns:repeat(4,1fr)}
  .footer{grid-template-columns:1fr 1fr;align-items:end}
}
@media(min-width:600px) and (max-width:899px){
  .work-grid{grid-template-columns:repeat(2,1fr)}
  .work-tile.wide{grid-column:span 2}
}

/* ============ MOBILE HERO — balanced distribution (fixes dead space) ============ */
@media(max-width:899px){
  .hero{justify-content:space-between}
  .hero-top{flex-wrap:wrap;gap:6px 16px}
  .hero-content{margin-top:0}
  .hero-mark{font-size:clamp(4rem,17vw,7rem)}
  .hero-tagline{max-width:26ch}
  .hero-foot{margin-top:0}
  .badge{display:none}
}

/* hover-only richness */
@media(hover:hover) and (pointer:fine){
  .work-tile:hover .work-word{transform:scale(1.05)}
  .work-tile:hover .work-media::after{opacity:1;transform:translateY(0)}
}

/* ============ LIVING BACKGROUND ============ */
.bg-field{position:fixed;inset:0;z-index:-3;background:var(--black);overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(120px);mix-blend-mode:screen;will-change:transform}
.blob.b1{width:65vw;height:65vw;background:radial-gradient(circle,rgba(90,101,82,.55),transparent 66%);top:-12%;left:-8%;animation:drift1 34s ease-in-out infinite alternate}
.blob.b2{width:54vw;height:54vw;background:radial-gradient(circle,rgba(90,101,82,.42),transparent 70%);bottom:0;right:-10%;animation:drift2 44s ease-in-out infinite alternate}
.blob.b3{width:46vw;height:46vw;background:radial-gradient(circle,rgba(128,116,72,.24),transparent 72%);top:42%;left:34%;animation:drift3 38s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(14vw,12vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-16vw,-10vh) scale(1.12)}}
@keyframes drift3{to{transform:translate(10vw,-14vh) scale(.88)}}
.spotlight{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(560px circle at var(--mx,60%) var(--my,24%),rgba(152,164,135,.15),transparent 58%)}
.grain{inset:-6%}
@media(min-width:900px){.grain{animation:grainshift 6s steps(5) infinite}}
@keyframes grainshift{0%{transform:translate(0,0)}20%{transform:translate(-2%,1.5%)}40%{transform:translate(1.5%,-2%)}60%{transform:translate(-1.5%,-1.5%)}80%{transform:translate(2%,1.5%)}100%{transform:translate(0,0)}}

/* scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;background:var(--olive-2);transform:scaleX(0);transform-origin:0 50%}
@supports (animation-timeline:scroll()){.scroll-progress{animation:progressbar linear both;animation-timeline:scroll(root block)}}
@keyframes progressbar{to{transform:scaleX(1)}}

/* custom cursor + magnetic (desktop only) */
.cursor{display:none}
@media(hover:hover) and (pointer:fine){
  .cursor{display:block;position:fixed;top:0;left:0;width:26px;height:26px;border-radius:50%;border:1px solid var(--olive-2);z-index:9999;pointer-events:none;transform:translate(calc(var(--cx,-100px) - 50%),calc(var(--cy,-100px) - 50%));transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),opacity .3s}
  .cursor.big{width:82px;height:82px;background:var(--cream);border-color:transparent}
  .cursor.big::after{content:"View";position:absolute;inset:0;display:grid;place-items:center;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--black)}
  .magnetic{will-change:transform;transition:transform .35s var(--ease)}
}
@media(max-width:768px){
  .blob.b3{display:none}
  .blob.b1{animation-duration:48s}
  .blob.b2{animation-duration:56s}
}

/* ============ REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal,.reveal-mask>span,.service-list li,.stat{opacity:1!important;transform:none!important}
  .ticker-track,.marquee-track,.badge svg,.status .dot,.blob,.grain,.scroll-progress{animation:none!important}
  .cursor{display:none!important}
}