/* ==========================================================================
   M3 AGENCY — "PREMIUM DARK 2026" DESIGN SYSTEM
   Shared stylesheet for the /te/ rebuild. Linked as: /te/assets/m3.css
   Fonts (loaded per-page via <link>): Bricolage Grotesque (display) + Inter (body)
   This file is the single source of truth for tokens, layout, components & motion.
   Every /te/ page reuses these classes — do not fork styles per page.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  /* ---- Palette --------------------------------------------------------- */
  --bg:            #08080B;
  --bg-2:          #0B0B10;
  --panel:         #0F0F14;
  --panel-2:       #111119;
  --panel-3:       #15151D;
  --hair:          rgba(255,255,255,.07);
  --hair-strong:   rgba(255,255,255,.14);
  --text:          #F5F5F7;
  --muted:         #9CA0AB;
  --muted-2:       #868A96;   /* ~4.8:1 on --bg — passes WCAG AA for small text */

  /* ---- Accent ---------------------------------------------------------- */
  --blue:          #3B82F6;
  --violet:        #7C3AED;
  --cyan:          #22D3EE;
  --focus-ring:    #3B82F6;   /* single focus color across all components */
  --accent-grad:   linear-gradient(100deg,#3B82F6 0%,#7C3AED 55%,#22D3EE 120%);
  --accent-grad-soft: linear-gradient(120deg,rgba(59,130,246,.16),rgba(124,58,237,.16));
  --glow:          radial-gradient(closest-side,rgba(124,58,237,.35),transparent);

  /* ---- Emergency (recovery fast-lane) ---------------------------------- */
  --emergency:      #F43F5E;
  --emergency-2:    #FB7185;
  --emergency-grad: linear-gradient(100deg,#F43F5E 0%,#FB7185 60%,#F59E0B 130%);
  --emergency-soft: rgba(244,63,94,.12);

  /* ---- Type families --------------------------------------------------- */
  --font-display: "Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --font-body:    "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* ---- Fluid type scale (360 → ~1440px) — tuned so desktop maxes stay
         controlled (hero was 168px / far too tall; now ~104px). ------------- */
  --fs-eyebrow:  clamp(0.72rem, 0.68rem + 0.20vw, 0.82rem);
  --fs-small:    clamp(0.85rem, 0.82rem + 0.18vw, 0.95rem);
  --fs-body:     clamp(1rem,    0.95rem + 0.30vw, 1.12rem);
  --fs-lead:     clamp(1.15rem, 1.05rem + 0.55vw, 1.45rem);
  --fs-h4:       clamp(1.25rem, 1.12rem + 0.65vw, 1.6rem);
  --fs-h3:       clamp(1.6rem,  1.30rem + 1.40vw, 2.4rem);
  --fs-h2:       clamp(1.95rem, 1.50rem + 2.00vw, 3rem);
  --fs-display:  clamp(2.4rem,  1.70rem + 3.20vw, 4rem);
  --fs-hero:     clamp(2.6rem,  1.70rem + 4.00vw, 5rem);
  --fs-stat:     clamp(2.1rem,  1.60rem + 2.00vw, 3.6rem);
  --fs-wordmark: clamp(3rem, 0.5rem + 10vw, 8rem);

  /* ---- Spacing scale (8px base) ---------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;

  --section-y:  clamp(2.75rem, 2rem + 2.6vw, 5rem);   /* chapter gap — compact */
  --block-gap:  clamp(1.6rem, 1.2rem + 1.3vw, 2.75rem); /* header → content */
  --stack:      clamp(1rem, 0.8rem + 0.8vw, 1.5rem);

  /* ---- Layout ---------------------------------------------------------- */
  --page-margin: clamp(1.25rem, 0.5rem + 4.5vw, 7rem);
  --maxw:        1600px;
  --maxw-text:   68rem;
  --gutter:      clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --nav-h:       clamp(64px, 8vh, 84px);

  /* ---- Radii ----------------------------------------------------------- */
  --r-sm: 10px;  --r-md: 16px;  --r-lg: 20px;  --r-xl: 28px;  --r-pill: 999px;

  /* ---- Shadows --------------------------------------------------------- */
  --shadow-sm:  0 8px 30px -12px rgba(0,0,0,.5);
  --shadow-md:  0 24px 60px -24px rgba(0,0,0,.65);
  --shadow-lift:0 30px 60px -24px rgba(0,0,0,.55);
  --shadow-nav: 0 8px 40px -12px rgba(0,0,0,.6);

  /* ---- Easing tokens (the house curves) -------------------------------- */
  --ease-out-expo:    cubic-bezier(.16, 1, .3, 1);
  --ease-out-quart:   cubic-bezier(.25, 1, .5, 1);
  --ease-out-back:    cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out-cubic:cubic-bezier(.65, 0, .35, 1);
  --ease-smooth:      cubic-bezier(.4, 0, .2, 1);
  --ease-magnetic:    cubic-bezier(.23, 1, .32, 1);

  /* ---- Durations ------------------------------------------------------- */
  --d-fast: .18s;  --d-med: .4s;  --d-slow: .8s;  --d-reveal: 1s;

  --z-nav: 100;  --z-orb: -1;  --z-grain: 2;  --z-fluid: -2;
}

/* ==========================================================================
   2. RESET
   ========================================================================== */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

/* Kill the grey/blue tap flash mobile browsers paint over anything tappable —
   it reads as a stray box/circle and clashes with our own press states.
   `touch-action:manipulation` also removes the DOUBLE-TAP-to-zoom gesture (which
   left the page zoomed and drifting sideways) while KEEPING two-finger pinch-zoom
   and normal scrolling — matching native iOS behaviour. */
*{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }

/* On touch devices a tap latches :hover, so hover-only glows (the cursor-tracking
   sheen inside buttons, card spotlights) would freeze on screen as a stray
   circle after every tap. Neutralise them where there is no real hover — the
   fluid/mouse effects are desktop-only anyway, so touch stays clean. */
@media (hover:none){
  .btn--primary::before,
  .btn--emergency::before,
  .service-card::after{ opacity:0 !important; }
}

html{
  overflow-x:clip;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  font:400 var(--fs-body)/1.65 var(--font-body);
  background:var(--bg);
  color:var(--muted);
  overflow-x:clip;
  max-width:100%;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
}

img,svg,video{ display:block; max-width:100%; height:auto; }
ul,ol{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }

::selection{ background:rgba(124,58,237,.35); color:#fff; }

:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:3px;
}
/* Components living inside overflow:hidden ancestors would have their focus
   ring clipped — draw it just inside instead so it stays visible. */
.svc-link:focus-visible,.service-card:focus-visible,.work-card:focus-visible,
.faq-q:focus-visible,.topic-card:focus-visible,.service-selection-card:focus-visible{
  outline-offset:-2px;
}

/* Custom scrollbar (progressive) */
*{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:99px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.24); }

/* Skip link (a11y) */
.skip-link{
  position:absolute; left:var(--s-4); top:-100px; z-index:1000;
  background:var(--text); color:var(--bg);
  padding:.7rem 1.2rem; border-radius:var(--r-sm);
  font:600 var(--fs-small)/1 var(--font-body);
  transition:top var(--d-med) var(--ease-out-expo);
}
.skip-link:focus{ top:var(--s-4); }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
.eyebrow{
  font:600 var(--fs-eyebrow)/1 var(--font-body);
  text-transform:uppercase; letter-spacing:.18em; color:var(--muted);
  display:inline-flex; align-items:center; gap:.65em;
}
.eyebrow .idx{ color:var(--blue); font-variant-numeric:tabular-nums; }
.eyebrow::before{ content:none; }

.hero-title{
  font:800 var(--fs-hero)/0.92 var(--font-display);
  letter-spacing:-.03em; color:var(--text);
  text-wrap:balance;
}
.display{
  font:700 var(--fs-display)/0.95 var(--font-display);
  letter-spacing:-.028em; color:var(--text); text-wrap:balance;
}
.h1{ font:800 var(--fs-hero)/.94 var(--font-display); letter-spacing:-.03em; color:var(--text); text-wrap:balance; }
.h2{ font:700 var(--fs-h2)/1.02 var(--font-display); letter-spacing:-.025em; color:var(--text); text-wrap:balance; }
.h3{ font:600 var(--fs-h3)/1.08 var(--font-display); letter-spacing:-.015em; color:var(--text); text-wrap:balance; }
.h4{ font:600 var(--fs-h4)/1.15 var(--font-display); letter-spacing:-.01em; color:var(--text); }
/* Never let a long unbroken word overflow the viewport on small screens */
.hero-title,.display,.h1,.h2,.h3,.h4,.svc-name,.work-title{ overflow-wrap:break-word; }

.lead{
  font:400 var(--fs-lead)/1.45 var(--font-body); letter-spacing:-.01em;
  color:var(--text); max-width:38ch;
}
p{ max-width:64ch; }
.small{ font-size:var(--fs-small); }
.muted{ color:var(--muted); }

/* Signature gradient keyword — apply to ONE word per heading */
.gradient-text,.grad-word{
  background:var(--accent-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  /* subtle glow behind the gradient text */
}
/* Fallback for engines without background-clip:text — keep text visible */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .gradient-text,.grad-word{ color:var(--blue); -webkit-text-fill-color:currentColor; }
  .grad-word--emergency{ color:var(--emergency); }
}
.grad-word--emergency{
  background:var(--emergency-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}

/* ==========================================================================
   4. LAYOUT — containers, grid, sections
   ========================================================================== */
.container{
  width:100%; max-width:var(--maxw);
  margin-inline:auto; padding-inline:var(--page-margin);
}
.container--text{ max-width:var(--maxw-text); }

.section{ padding-block:var(--section-y); position:relative; }
.section + .section{ padding-top:0; }  /* single gap between chapters */
.section--tight{ padding-block:calc(var(--section-y) * .62); }
.section--flush-top{ padding-top:0; }

/* anchor offset so sticky nav never covers section tops */
[id]{ scroll-margin-top:calc(var(--nav-h) + 1.25rem); }

.grid12{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter); }
@media (max-width:640px){ .grid12{ grid-template-columns:1fr; } }

/* Standard section intro block (reused by Services / Work / Testimonials …) */
.section-header{
  display:grid; gap:var(--s-5);
  margin-bottom:var(--block-gap);
}
.section-header .lead,
.section-header .section-description{ color:var(--muted); }
.section-header .section-title{ margin-top:.2em; }

/* Asymmetric editorial header: title cols 1–8, support cols 8–13 */
.section-header--split{ gap:var(--s-6); }
@media (min-width:900px){
  .section-header--split{
    grid-template-columns:repeat(12,1fr);
    align-items:end;
  }
  .section-header--split .sh-lead{ grid-column:1 / 8; }
  .section-header--split .sh-support{ grid-column:8 / 13; justify-self:start; padding-bottom:.4rem; }
}

.hairline{ height:1px; background:var(--hair); border:0; width:100%; }

/* ==========================================================================
   5. ATMOSPHERICS — orbs, grain, grid backdrop
   ========================================================================== */
/* Decorative background layer — clips orbs/grain with universally-supported
   overflow:hidden so nothing ever expands the page width (no reliance on
   overflow-x:clip, which older iOS Safari ignores). Absolute (not fixed) keeps
   the orbs scrolling with the page and avoids fixed-layer repaint jank. */
.bg-decor{
  position:fixed; inset:0; overflow:hidden;
  pointer-events:none; z-index:var(--z-orb);
}
.orb{
  position:absolute; border-radius:50%;
  filter:blur(44px); opacity:.30;
  pointer-events:none;
}
.orb--blue{   background:radial-gradient(circle,var(--blue),transparent 68%); }
.orb--violet{ background:radial-gradient(circle,var(--violet),transparent 68%); }
.orb--cyan{   background:radial-gradient(circle,var(--cyan),transparent 70%); }

.orb--1{ width:52vw; height:52vw; top:-16vw; left:-12vw; animation:drift1 24s ease-in-out infinite; }
.orb--2{ width:46vw; height:46vw; top:24vw; right:-14vw; animation:drift2 30s ease-in-out infinite; }
.orb--3{ width:30vw; height:30vw; bottom:-10vw; left:38%; opacity:.14; animation:drift1 36s ease-in-out infinite reverse; }

@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(6vw,4vw) scale(1.12); } }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-5vw,-3vw) scale(1.08); } }

/* Film-grain overlay — inline SVG feTurbulence data-URI, no image file */
.grain{
  position:absolute; inset:0; z-index:var(--z-grain);
  pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* static grain (no shimmer) */
}
/* grainShift keyframes removed — grain is static */

/* Hero grid backdrop with radial mask */
.grid-bg{
  position:absolute; inset:0; z-index:var(--z-orb); opacity:.5; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask:radial-gradient(ellipse 70% 60% at 50% 38%,#000,transparent 76%);
          mask:radial-gradient(ellipse 70% 60% at 50% 38%,#000,transparent 76%);
}

/* soft top vignette that anchors the fixed nav on scroll */
.page-shell{ position:relative; isolation:isolate; }

/* ==========================================================================
   6. NAV — sticky, condensing, blur
   ========================================================================== */
#nav-sentinel{ position:absolute; top:0; left:0; height:1px; width:100%; }

/* --- Apple-style floating pill nav: the wrapper is transparent, the pill is .nav-inner --- */
.site-nav{
  position:sticky; top:0; z-index:var(--z-nav);
  display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(10px,1.4vh,16px) clamp(14px,2vw,40px);   /* slim gutters → the pill keeps its width on smaller laptops (pill still caps at 1120, so the wide look is unchanged) */
  background:transparent; border-bottom:0;
  pointer-events:none;               /* transparent side gutters never block the hero */
  transition:padding var(--d-med) var(--ease-in-out-cubic);
}
.site-nav.is-condensed{
  padding-top:clamp(6px,1vh,11px); padding-bottom:clamp(6px,1vh,11px);
}
.nav-inner{
  pointer-events:auto;               /* the pill itself is fully interactive */
  width:100%; max-width:1120px; margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:clamp(.8rem,1.5vw,1.35rem);
  padding:.5rem 1.15rem;             /* symmetric breathing room so the CTA sits clearly INSIDE the pill (≥ the 18px corner radius) */
  background:rgba(18,19,24,.72);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
          backdrop-filter:blur(24px) saturate(150%);
  border:1px solid var(--hair);
  border-radius:18px;
  box-shadow:0 16px 44px -22px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.045);
  transition:max-width var(--d-med) var(--ease-out-expo),
             padding var(--d-med) var(--ease-out-expo),
             background var(--d-med) var(--ease-smooth),
             box-shadow var(--d-med) var(--ease-smooth);
}
.site-nav.is-condensed .nav-inner{
  max-width:1080px;                  /* stays wider than the content so the CTA never spills when condensed */
  padding-top:.4rem; padding-bottom:.4rem;
  background:rgba(12,13,17,.85);
  box-shadow:0 18px 48px -20px rgba(0,0,0,.82), inset 0 1px 0 rgba(255,255,255,.05);
}

.brand{ display:inline-flex; align-items:center; gap:.6rem; flex-shrink:0;
  transition:transform var(--d-med) var(--ease-in-out-cubic); }
.site-nav.is-condensed .brand{ transform:scale(.92); }
.brand img{ height:38px; width:auto; }
.brand-word{ font:800 1.15rem/1 var(--font-display); letter-spacing:-.02em; color:var(--text); }

.nav-menu{ display:flex; align-items:center; gap:clamp(.5rem,1.4vw,1.55rem); }
.nav-link{
  position:relative; display:inline-block;
  font:500 var(--fs-small)/1 var(--font-body);
  letter-spacing:.01em; color:var(--muted);
  padding:.35rem .1rem;
  transform-origin:center bottom; will-change:transform;   /* macOS-dock magnification (JS-driven, Home→Contact only) */
  transition:color var(--d-med) var(--ease-smooth),
             transform .16s var(--ease-out-expo);
}
.nav-link:hover,.nav-link.is-active{ color:var(--text); }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--accent-grad); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out-expo);
}
.nav-link:hover::after,.nav-link.is-active::after{ transform:scaleX(1); transform-origin:left; }

.nav-actions{ display:flex; align-items:center; gap:var(--s-4); }
/* keep the two header controls sharing one height so they line up */
.nav-actions .btn--primary,.nav-actions .nav-pill--emergency{ min-height:48px; }

/* Emergency fast-lane pill in the nav */
.nav-pill--emergency{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.6rem 1.3rem; min-height:44px; border-radius:var(--r-pill);
  font:600 var(--fs-small)/1 var(--font-body); white-space:nowrap;
  color:#fff; background:var(--emergency-soft);
  border:1px solid rgba(244,63,94,.4);
  transition:background var(--d-med) var(--ease-smooth), border-color var(--d-med) var(--ease-smooth), transform var(--d-med) var(--ease-out-expo);
}
.nav-pill--emergency .dot{
  width:7px; height:7px; border-radius:50%; background:var(--emergency);
  box-shadow:0 0 8px rgba(244,63,94,.5);
}
.nav-pill--emergency:hover{ background:rgba(244,63,94,.22); border-color:var(--emergency); transform:translateY(-1px); }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(244,63,94,.55); }
  70%{ box-shadow:0 0 0 8px rgba(244,63,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(244,63,94,0); }
}

/* Mobile toggle + drawer */
.mobile-toggle{
  display:none; flex-direction:column; gap:5px; width:44px; height:44px;
  align-items:center; justify-content:center;
}
.mobile-toggle span{
  width:24px; height:2px; background:var(--text); border-radius:2px;
  transition:transform var(--d-med) var(--ease-out-expo), opacity var(--d-fast) linear;
}
.mobile-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.mobile-toggle.is-open span:nth-child(2){ opacity:0; }
.mobile-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-drawer{
  position:fixed; inset:0; z-index:calc(var(--z-nav) - 1);
  background:rgba(8,8,11,.92);
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  display:flex; flex-direction:column; justify-content:center; gap:var(--s-2);
  padding:var(--s-9) var(--page-margin) var(--s-8);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--d-med) var(--ease-smooth), transform var(--d-med) var(--ease-out-expo), visibility var(--d-med);
}
/* short / landscape phones: don't center (centered overflow clips the top unscrollably) */
@media (max-height:640px){ .nav-drawer{ justify-content:flex-start; } }
.nav-drawer.is-open{ opacity:1; visibility:visible; transform:none; }
.nav-drawer a{
  font:700 clamp(1.8rem,9vw,2.6rem)/1.1 var(--font-display);
  letter-spacing:-.02em; color:var(--text); padding:.35rem 0;
  border-bottom:1px solid var(--hair);
}
.nav-drawer a:last-of-type{ border-bottom:0; }
.nav-drawer .nav-pill--emergency{ margin-top:var(--s-5); align-self:flex-start; font-size:var(--fs-body); padding:.9rem 1.6rem; min-height:52px; }

/* ==========================================================================
   7. BUTTONS & LINKS
   ========================================================================== */
.btn{
  --btn-pad-y:1rem; --btn-pad-x:1.9rem;
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border-radius:var(--r-pill);
  font:600 var(--fs-small)/1 var(--font-body); letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; isolation:isolate;
  border:1px solid transparent;
  transition:transform var(--d-med) var(--ease-magnetic),
             border-color var(--d-med) var(--ease-smooth),
             background var(--d-med) var(--ease-smooth),
             color var(--d-med) var(--ease-smooth);

}
.btn i,.btn svg{ font-size:1em; }
.btn .btn-label{ display:inline-flex; align-items:center; gap:.55rem; position:relative; z-index:1; }
.btn .btn-label svg{ transition:transform var(--d-med) var(--ease-out-expo); }
.btn:hover .btn-label svg:last-child{ transform:translateX(3px); }

/* Primary — gradient fill + cursor-tracking glow + magnetic */
.btn--primary{ background:var(--accent-grad); color:#fff; box-shadow:0 10px 30px -12px rgba(124,58,237,.5); }
.btn--primary::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 60%);
  opacity:0; transition:opacity var(--d-med) var(--ease-smooth);
}
.btn--primary:hover::before{ opacity:1; }
.btn--primary:hover{ box-shadow:0 16px 40px -12px rgba(124,58,237,.65); }

/* Secondary — hairline outline */
.btn--secondary{ background:rgba(255,255,255,.02); color:var(--text); border-color:var(--hair-strong); }
.btn--secondary:hover{ border-color:var(--text); background:rgba(255,255,255,.06); }

/* Ghost — text-only */
.btn--ghost{ background:transparent; color:var(--text); }
.btn--ghost:hover{ color:var(--blue); background:rgba(255,255,255,.04); }

/* Emergency */
.btn--emergency{ background:var(--emergency-grad); color:#fff; box-shadow:0 10px 30px -12px rgba(244,63,94,.55); }
.btn--emergency::before{
  content:''; position:absolute; inset:0; z-index:0;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 60%);
  opacity:0; transition:opacity var(--d-med) var(--ease-smooth);
}
.btn--emergency:hover::before{ opacity:1; }
.btn--emergency:hover{ box-shadow:0 16px 40px -12px rgba(244,63,94,.7); }

.btn--lg{ --btn-pad-y:1.25rem; --btn-pad-x:2.4rem; font-size:var(--fs-body); }
.btn--block{ width:100%; }

/* Pressed + disabled feedback — applies to every .btn variant */
.btn:active{ transform:translateY(1px) scale(.985); }
.btn--primary:active{ box-shadow:0 6px 18px -10px rgba(124,58,237,.55); }
.btn--emergency:active{ box-shadow:0 6px 18px -10px rgba(244,63,94,.55); }
.btn:disabled,.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.5; cursor:not-allowed; box-shadow:none; transform:none; pointer-events:none;
}

/* Inline "Learn More →" arrow link */
.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font:600 var(--fs-small)/1 var(--font-body); color:var(--text);
  transition:gap var(--d-med) var(--ease-out-expo), color var(--d-med) var(--ease-smooth);
}
.link-arrow .arrow{
  display:inline-flex; transition:transform var(--d-med) var(--ease-out-expo);
}
.link-arrow:hover{ color:var(--blue); }
.link-arrow:hover .arrow{ transform:translateX(5px); }

/* Wipe-underline text link */
.link{ position:relative; display:inline-block; color:var(--text); }
.link::after{
  content:''; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out-expo);
}
.link:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ==========================================================================
   8. BADGES / PILLS
   ========================================================================== */
.badge{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.5rem 1rem; border-radius:var(--r-pill);
  font:600 var(--fs-eyebrow)/1 var(--font-body);
  text-transform:uppercase; letter-spacing:.14em; color:var(--muted);
  background:rgba(255,255,255,.03); border:1px solid var(--hair);
}
.badge i{ color:var(--blue); }
.badge--accent{ color:var(--text); background:var(--accent-grad-soft); border-color:rgba(124,58,237,.3); }
.badge--emergency{ color:#fff; background:var(--emergency-soft); border-color:rgba(244,63,94,.35); }
.badge--emergency i{ color:var(--emergency-2); }

/* ==========================================================================
   9. REVEAL-ON-SCROLL SYSTEM
   ========================================================================== */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity var(--d-reveal) var(--ease-out-quart),
             transform var(--d-reveal) var(--ease-out-quart),
             filter var(--d-reveal) var(--ease-out-quart);
  transition-delay:calc(var(--i,0) * 90ms);
  /* will-change removed (perf) */
}
.reveal.is-in{ opacity:1; transform:none; filter:none; }

.reveal--up{ transform:translateY(52px); }
.reveal--left{ transform:translateX(-44px); }
.reveal--right{ transform:translateX(44px); }
.reveal--scale{ transform:translateY(28px) scale(.96); }
.reveal--blur{ filter:blur(12px); }

/* Masked word-rise headline */
.splitline .word{ display:inline-block; overflow:hidden; vertical-align:top; padding:.05em .06em .22em; margin:-.05em -.06em -.22em; }
/* once the rise finishes, let descenders + the gradient glow escape the mask */
.splitline.is-in .word{ overflow:visible; }
.splitline .word > span{
  display:inline-block; transform:translateY(112%);
  transition:transform 1s var(--ease-out-expo);
  transition-delay:calc(var(--wi,0) * 60ms);
}
.splitline.is-in .word > span{ transform:translateY(0); }

/* ==========================================================================
   10. MARQUEE
   ========================================================================== */
.marquee{
  overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{ display:flex; width:max-content; animation:marquee 34s linear infinite; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee.is-paused .marquee__track{ animation-play-state:paused; }
.marquee__track--reverse{ animation-direction:reverse; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__group{ display:flex; align-items:center; gap:2.5rem; padding-right:2.5rem; white-space:nowrap; }
.marquee__item{
  font:700 clamp(1.4rem,4vw,2.9rem)/1 var(--font-display);
  letter-spacing:-.02em; color:var(--text);
}
.marquee__sep{ color:var(--blue); font-size:clamp(1rem,2.4vw,1.6rem); }
.marquee__item--ghost{
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.22);
}

/* ==========================================================================
   11. STATS
   ========================================================================== */
.stats{ border-block:1px solid var(--hair); }
.stats-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-6) var(--gutter);
}
@media (min-width:768px){ .stats-grid{ grid-template-columns:repeat(4,1fr); } }
.stat{ display:grid; gap:.4rem; }
.stat-num{
  font:700 var(--fs-stat)/1 var(--font-display); letter-spacing:-.03em; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.stat-num .grad-word{ display:inline; }
.stat-label{
  font:600 var(--fs-eyebrow)/1.3 var(--font-body);
  text-transform:uppercase; letter-spacing:.14em; color:var(--muted);
}

/* ==========================================================================
   12. HERO
   ========================================================================== */
.hero{ position:relative; min-height:min(80vh,760px); display:flex; align-items:center;
  padding-block:clamp(2.5rem,4vh,4rem) clamp(2.5rem,3vw,4rem); overflow:hidden; }
.hero-inner{ position:relative; z-index:1; width:100%; display:grid; gap:var(--block-gap); }
.hero-copy{ display:grid; gap:var(--s-6); max-width:min(100%,54rem); }
/* the badge must hug its text, not stretch the full grid column */
.hero-copy .badge{ justify-self:start; }
.hero-title{ max-width:16ch; }
.hero .lead{ max-width:44ch; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:var(--s-4); }

/* Floating value cards under hero */
.float-grid{ display:grid; grid-template-columns:1fr; gap:var(--gutter); }
@media (min-width:700px){ .float-grid{ grid-template-columns:repeat(3,1fr); } }
.float-card{
  position:relative; padding:clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem);
  background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-lg);
  transition:transform var(--d-med) var(--ease-out-expo), border-color var(--d-med) var(--ease-smooth), box-shadow var(--d-med) var(--ease-out-expo);
}
.float-card:hover{ transform:translateY(-6px); border-color:var(--hair-strong); box-shadow:var(--shadow-lift); }
.float-card .card-icon{ font-size:2.4rem; display:block; margin-bottom:var(--s-4); }
.float-num{
  display:block; margin-bottom:var(--s-4);
  font:700 clamp(1.6rem,2.4vw,2.1rem)/1 var(--font-display); letter-spacing:-.02em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.28); font-variant-numeric:tabular-nums;
  transition:color var(--d-med) var(--ease-smooth), -webkit-text-stroke-color var(--d-med) var(--ease-smooth);
}
.float-card:hover .float-num{ color:var(--text); -webkit-text-stroke-color:transparent; }
.float-card .h4{ margin-bottom:.5rem; }
.float-card p{ font-size:var(--fs-small); color:var(--muted); max-width:36ch; }

/* ==========================================================================
   13. RECOVERY BAND (emergency fast-lane)
   ========================================================================== */
.recovery{ position:relative; }
.recovery-band{
  position:relative; overflow:hidden;
  border:1px solid rgba(244,63,94,.28); border-radius:var(--r-xl);
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(244,63,94,.14),transparent 55%),
    radial-gradient(120% 140% at 0% 100%,rgba(245,158,11,.10),transparent 55%),
    var(--panel);
  padding:clamp(1.5rem,3vw,2.75rem);
  display:grid; gap:var(--block-gap); align-items:start;
}
@media (min-width:900px){ .recovery-band{ grid-template-columns:1.9fr 1fr; gap:clamp(1.5rem,3vw,2.75rem); } }
.recovery-band .h2{ margin-block:.4rem .6rem; }
.recovery-band p{ color:var(--muted); max-width:56ch; }
.recovery-features{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-3);
  margin-block:var(--s-6);
}
.feature-item{
  display:flex; align-items:center; gap:.7rem;
  padding:.85rem 1rem; border-radius:var(--r-sm);
  background:rgba(255,255,255,.03); border:1px solid var(--hair);
  font:500 var(--fs-small)/1.3 var(--font-body); color:var(--text);
}
.feature-item i{ color:var(--emergency-2); font-size:1rem; flex-shrink:0; }
.recovery-visual{
  text-align:center; padding:clamp(1.5rem,3vw,2.4rem);
  border-radius:var(--r-lg); border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
}
.recovery-visual .icon-xl{ font-size:3rem; margin-bottom:var(--s-3); }
.recovery-metric{
  display:block; font:700 clamp(2.8rem,7vw,3.6rem)/0.92 var(--font-display); letter-spacing:-.03em;
  color:var(--text); font-variant-numeric:tabular-nums;
}
.recovery-metric-label{
  display:block; margin:.1rem 0 clamp(1.4rem,3vw,2rem); font-size:var(--fs-small);
  color:var(--muted); letter-spacing:.02em;
}
.recovery-visual .h4{ margin-bottom:.6rem; }
.platform-list{ color:var(--muted); font-size:var(--fs-small); line-height:1.9; }
.platform-list b{ color:var(--text); font-weight:600; }

/* ==========================================================================
   14. SERVICE CARDS
   ========================================================================== */
.services-grid{ display:grid; grid-template-columns:1fr; gap:var(--gutter); }
@media (min-width:640px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .services-grid{ grid-template-columns:repeat(3,1fr); } }

.service-card{
  position:relative; overflow:hidden;
  padding:clamp(1.6rem,2.4vw,2.4rem);
  background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-lg);
  display:flex; flex-direction:column; gap:var(--s-4);
  transition:transform var(--d-med) var(--ease-out-expo), border-color var(--d-med) var(--ease-smooth), box-shadow var(--d-med) var(--ease-out-expo);
}
.service-card:hover{ transform:translateY(-8px); border-color:var(--hair-strong); box-shadow:var(--shadow-lift); }
/* gradient outline on hover */
.service-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:var(--accent-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity var(--d-med) var(--ease-smooth);
}
.service-card:hover::before{ opacity:.9; }
/* cursor spotlight */
.service-card::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(124,58,237,.14),transparent 55%);
  opacity:0; transition:opacity var(--d-med) var(--ease-smooth);
}
.service-card:hover::after{ opacity:1; }

.service-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-4); }
.service-icon{
  width:58px; height:58px; border-radius:var(--r-md); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  color:var(--text); background:var(--accent-grad-soft); border:1px solid var(--hair);
  transition:transform var(--d-med) var(--ease-out-back);
}
.service-card:hover .service-icon{ transform:scale(1.04); }
.card-index{
  font:700 clamp(2.2rem,4vw,3.2rem)/1 var(--font-display); letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.16);
  font-variant-numeric:tabular-nums; user-select:none;
}
.service-card .service-title{ position:relative; z-index:1; }
.service-card .service-description{ font-size:var(--fs-small); color:var(--muted); position:relative; z-index:1; }
.service-features{ display:grid; gap:.55rem; position:relative; z-index:1; }
.service-features li{
  position:relative; padding-left:1.65rem; font-size:var(--fs-small); color:var(--muted);
}
.service-features li::before{
  content:''; position:absolute; left:0; top:.5em; width:14px; height:8px;
  border-left:2px solid var(--cyan); border-bottom:2px solid var(--cyan);
  transform:rotate(-45deg) translateY(-2px);
}
.service-card .link-arrow{ margin-top:auto; position:relative; z-index:1; }

/* Services — editorial numbered index (homepage) */
.services-index{ list-style:none; margin:clamp(1rem,2vw,1.75rem) 0 0; padding:0; border-top:1px solid var(--hair); }
.svc-row{ border-bottom:1px solid var(--hair); }
.svc-link{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(1rem,3vw,2.6rem);
  padding:clamp(1rem,1.8vw,1.6rem) clamp(.2rem,1vw,1rem);
  text-decoration:none; color:var(--text); position:relative;
  border-radius:var(--r-md);
  transition:padding-left var(--d-slow) var(--ease-out-expo), background var(--d-med) var(--ease-smooth);
}
.svc-num{
  align-self:start; padding-top:.35em;
  font:600 clamp(.95rem,1.3vw,1.15rem)/1 var(--font-display);
  letter-spacing:.02em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.30);
  font-variant-numeric:tabular-nums;
  transition:color var(--d-med) var(--ease-smooth), -webkit-text-stroke-color var(--d-med) var(--ease-smooth);
}
.svc-body{ display:flex; flex-direction:column; gap:.55rem; min-width:0; }
.svc-name{
  font:600 clamp(1.5rem,3.2vw,2.35rem)/1.04 var(--font-display); letter-spacing:-.022em;
  color:var(--text); transition:transform var(--d-slow) var(--ease-out-expo);
  transform-origin:left center;
}
.svc-desc{ font-size:var(--fs-small); color:var(--muted); max-width:54ch; }
.svc-tags{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin-top:.35rem; }
.svc-tags span{
  font-size:.72rem; letter-spacing:.015em; color:var(--muted-2);
  padding:.3em .75em; border:1px solid var(--hair); border-radius:var(--r-pill); white-space:nowrap;
  transition:border-color var(--d-med) var(--ease-smooth), color var(--d-med) var(--ease-smooth);
}
.svc-arrow{
  align-self:center; flex-shrink:0; width:46px; height:46px; border-radius:var(--r-pill);
  border:1px solid var(--hair-strong); color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--d-med) var(--ease-out-back), background var(--d-med) var(--ease-smooth), color var(--d-med) var(--ease-smooth), border-color var(--d-med) var(--ease-smooth);
}
.svc-arrow .m3-icon{ --icn:1.05rem; transform:rotate(-45deg); }
@media (hover:hover){
  .svc-link:hover{ padding-left:clamp(.8rem,2.2vw,1.8rem); background:linear-gradient(90deg,rgba(255,255,255,.03),transparent 70%); }
  .svc-link:hover .svc-num{ color:var(--text); -webkit-text-stroke-color:transparent; }
  .svc-link:hover .svc-name{ transform:translateX(4px); }
  .svc-link:hover .svc-arrow{ transform:translate(4px,-4px); background:var(--accent-grad); color:#fff; border-color:transparent; }
  .svc-link:hover .svc-tags span{ border-color:var(--hair-strong); color:var(--muted); }
}
.svc-link:focus-visible{ outline:2px solid var(--focus-ring); }
@media (max-width:640px){
  .svc-link{ grid-template-columns:auto 1fr; gap:.85rem 1rem; padding:1.35rem .1rem; }
  .svc-arrow{ display:none; }
  .svc-num{ padding-top:.3em; }
}

/* ==========================================================================
   15. WORK / PORTFOLIO GRID
   ========================================================================== */
.work-grid{ display:grid; grid-template-columns:1fr; gap:var(--gutter); }
@media (min-width:700px){ .work-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .work-grid{ grid-template-columns:repeat(3,1fr); } }

.work-card{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:var(--panel); border:1px solid var(--hair);
  display:flex; flex-direction:column;
  transition:transform var(--d-med) var(--ease-out-expo), border-color var(--d-med) var(--ease-smooth), box-shadow var(--d-med) var(--ease-out-expo);
}
.work-card:hover{ transform:translateY(-8px); border-color:var(--hair-strong); box-shadow:var(--shadow-md); }
.work-media{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding:clamp(1.4rem,2.4vw,1.9rem);
  border-bottom:1px solid var(--hair);
  background:
    radial-gradient(120% 120% at 15% 8%,rgba(59,130,246,.20),transparent 55%),
    radial-gradient(120% 120% at 92% 95%,rgba(124,58,237,.20),transparent 55%),
    var(--panel-2);
}
.work-metric{ display:flex; flex-direction:column; align-items:flex-start; gap:.1rem; position:relative; z-index:1; }
.wm-value{
  font:700 clamp(2.2rem,4.5vw,3rem)/0.95 var(--font-display); letter-spacing:-.03em;
  color:var(--text); font-variant-numeric:tabular-nums;
  transition:transform var(--d-med) var(--ease-out-expo);
}
.wm-label{ font-size:var(--fs-small); color:var(--muted); letter-spacing:.005em; }
.work-card:hover .wm-value{ transform:translateY(-3px); }
.work-emoji{ font-size:clamp(3rem,7vw,4.6rem); transform:scale(1); transition:transform .7s var(--ease-out-expo); filter:drop-shadow(0 10px 30px rgba(0,0,0,.4)); }
.work-card:hover .work-emoji{ transform:scale(1.04); }
.work-body{ padding:clamp(1.4rem,2.2vw,1.9rem); display:grid; gap:.7rem; }
.work-category{
  font:600 var(--fs-eyebrow)/1 var(--font-body); text-transform:uppercase; letter-spacing:.14em;
  color:var(--blue);
}
.work-title{ font:600 var(--fs-h4)/1.15 var(--font-display); letter-spacing:-.01em; color:var(--text); }
.work-desc{ font-size:var(--fs-small); color:var(--muted); }

/* ==========================================================================
   16. TESTIMONIALS
   ========================================================================== */
.testimonials-grid{ display:grid; grid-template-columns:1fr; gap:var(--gutter); }
@media (min-width:700px){ .testimonials-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .testimonials-grid{ grid-template-columns:repeat(3,1fr); } }

.testimonial-card{
  position:relative; padding:clamp(1.6rem,2.4vw,2.2rem);
  background:var(--panel); border:1px solid var(--hair); border-radius:var(--r-lg);
  display:flex; flex-direction:column; gap:var(--s-5);
  transition:transform var(--d-med) var(--ease-out-expo), border-color var(--d-med) var(--ease-smooth), box-shadow var(--d-med) var(--ease-out-expo);
}
.testimonial-card:hover{ transform:translateY(-6px); border-color:var(--hair-strong); box-shadow:var(--shadow-lift); }
.testimonial-stars{ color:#FBBF24; font-size:1.05rem; letter-spacing:.15em; }
.testimonial-text{ font:400 var(--fs-body)/1.65 var(--font-body); color:var(--text); max-width:none; }
.testimonial-author{ display:flex; align-items:center; gap:.9rem; margin-top:auto; }
.author-avatar{
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font:700 1rem/1 var(--font-display); color:var(--muted);
  background:var(--panel-3); border:1px solid var(--hair-strong);
}
.author-info .author-name{ font:600 var(--fs-small)/1.3 var(--font-display); color:var(--text); }
.author-info p{ font-size:var(--fs-eyebrow); color:var(--muted); }

/* ==========================================================================
   17. CTA BAND
   ========================================================================== */
.cta-band{
  position:relative; overflow:hidden; text-align:center;
  border:1px solid var(--hair); border-radius:var(--r-xl);
  padding:clamp(2.25rem,4vw,3.75rem) clamp(1.5rem,4vw,3rem);
  background:
    radial-gradient(120% 120% at 20% 0%,rgba(59,130,246,.16),transparent 55%),
    radial-gradient(120% 120% at 85% 100%,rgba(124,58,237,.18),transparent 55%),
    var(--panel);
  display:grid; justify-items:center; gap:var(--s-6);
}
.cta-band .display{ max-width:16ch; }
.cta-band p{ max-width:52ch; margin-inline:auto; color:var(--muted); }
.cta-actions{ display:flex; flex-wrap:wrap; gap:var(--s-4); justify-content:center; }

/* ==========================================================================
   18. CONTACT SECTION  (fixes bug: nav Contact → #contact)
   ========================================================================== */
.contact-grid{ display:grid; gap:var(--block-gap); }
@media (min-width:900px){ .contact-grid{ grid-template-columns:1fr 1fr; align-items:center; } }
.contact-list{ display:grid; gap:var(--s-4); }
.contact-item{
  display:flex; align-items:center; gap:1rem;
  padding:1.1rem 1.3rem; border-radius:var(--r-md);
  background:var(--panel); border:1px solid var(--hair);
  transition:border-color var(--d-med) var(--ease-smooth), transform var(--d-med) var(--ease-out-expo);
}
a.contact-item:hover{ border-color:var(--hair-strong); transform:translateX(4px); }
.contact-item .ci-icon{
  width:46px; height:46px; border-radius:var(--r-sm); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  color:var(--text); background:var(--accent-grad-soft); border:1px solid var(--hair);
}
/* Stack the label above the value (the text wrapper span is unclassed) */
.contact-item > span:not(.ci-icon){ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.contact-item .ci-label{ display:block; font:600 var(--fs-eyebrow)/1 var(--font-body); text-transform:uppercase; letter-spacing:.14em; color:var(--muted); }
.contact-item .ci-value{ display:block; font:600 var(--fs-body)/1.25 var(--font-body); color:var(--text); word-break:break-word; }

/* ==========================================================================
   19. FOOTER
   ========================================================================== */
.site-footer{ position:relative; overflow:hidden; border-top:1px solid var(--hair); }
.footer-wordmark{
  font:700 var(--fs-wordmark)/0.82 var(--font-display); letter-spacing:.02em;
  color:transparent; -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.25px rgba(255,255,255,.14);
  line-height:.82; white-space:nowrap; user-select:none;
  padding-block:clamp(1.25rem,3.5vw,2.5rem) 0;
  display:flex; align-items:baseline; gap:.12em;
  /* Let a finger PAINT the letters (fill follows the touch) instead of the drag
     scrolling the page — the wordmark is a decorative footer element. */
  touch-action:none;
}
/* subtle brand-accent sub-lockup beside the watermark */
.footer-wordmark .fw-sub{
  /* same outlined-ghost treatment as "M3", sized down and sitting on the SAME
     baseline as "M3" for a clean lockup (not floating in the middle) */
  color:transparent; -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.14);
  font:700 .5em/1 var(--font-display); letter-spacing:.06em; text-transform:uppercase;
  align-self:baseline;
}
/* Cursor-reactive colour fill — the M3 accent gradient pools inside the outlined
   letters wherever the pointer is (see /assets/wordmark-hover.js sets --mx/--my
   per span). Off-pointer the gradient centre is parked off-canvas → stays outlined. */
.footer-wordmark > span{
  background:radial-gradient(clamp(130px,11vw,240px) circle at var(--mx,-500px) var(--my,-500px),
    #3B82F6 0%, #7C3AED 38%, #22D3EE 62%, transparent 74%);
  -webkit-background-clip:text; background-clip:text;
}
.footer-top{
  display:grid; grid-template-columns:1fr; gap:var(--block-gap);
  padding-block:var(--s-7) var(--s-6);
  border-bottom:1px solid var(--hair);
}
@media (min-width:640px){ .footer-top{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .footer-top{ grid-template-columns:2fr 1fr 1fr 1.4fr; } }
.footer-brand .footer-desc{ color:var(--muted); font-size:var(--fs-small); max-width:44ch; margin-block:var(--s-4) var(--s-5); }
.footer-social{ display:flex; gap:.7rem; }
.footer-social a{
  width:44px; height:44px; border-radius:var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); background:rgba(255,255,255,.03); border:1px solid var(--hair);
  transition:color var(--d-med) var(--ease-smooth), border-color var(--d-med) var(--ease-smooth), transform var(--d-med) var(--ease-out-expo), background var(--d-med) var(--ease-smooth);
}
.footer-social a:hover{ color:var(--text); border-color:var(--hair-strong); background:var(--accent-grad-soft); transform:translateY(-3px); }
.footer-col .footer-title{
  font:600 var(--fs-eyebrow)/1 var(--font-body); text-transform:uppercase; letter-spacing:.16em;
  color:var(--muted-2); margin-bottom:var(--s-5);
}
.footer-links{ display:grid; gap:.85rem; }
.footer-links a{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:var(--fs-small); color:var(--muted);
  transition:color var(--d-med) var(--ease-smooth), gap var(--d-med) var(--ease-out-expo);
}
.footer-links a:hover{ color:var(--text); gap:.85rem; }
.footer-contact{ display:grid; gap:1rem; }
.footer-contact li{ display:flex; align-items:flex-start; gap:.75rem; font-size:var(--fs-small); color:var(--muted); }
.footer-contact li i{ color:var(--blue); margin-top:.2em; }
.footer-contact a{ color:var(--muted); transition:color var(--d-med) var(--ease-smooth); }
.footer-contact a:hover{ color:var(--text); }

.footer-bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-5);
  padding-block:var(--s-5) var(--s-6);
}
.footer-copyright{ font-size:var(--fs-small); color:var(--muted-2); }
.footer-copyright b{ color:var(--muted); font-weight:600; }
.footer-legal{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.footer-legal a{ font-size:var(--fs-small); color:var(--muted-2); }
.footer-legal a:hover{ color:var(--text); }
.footer-legal .sep{ color:rgba(255,255,255,.16); }

.back-to-top{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:44px;
  font:600 var(--fs-small)/1 var(--font-body); color:var(--muted);
  padding:.7rem 1.1rem; border-radius:var(--r-pill);
  border:1px solid var(--hair); background:rgba(255,255,255,.02);
  transition:color var(--d-med) var(--ease-smooth), border-color var(--d-med) var(--ease-smooth), transform var(--d-med) var(--ease-out-expo);
}
.back-to-top:hover{ color:var(--text); border-color:var(--hair-strong); transform:translateY(-2px); }
.back-to-top:hover .m3-icon{ transform:translateY(-3px); }

/* ==========================================================================
   20. GENERIC PAGE HERO (for subpages: about / faq / case)
   ========================================================================== */
.page-hero{ position:relative; overflow:hidden; padding-block:clamp(2.5rem,5vw,4.25rem) clamp(2rem,3vw,3rem); }
.page-hero .eyebrow{ margin-bottom:var(--s-5); }
.page-hero .lead{ margin-top:var(--s-5); }

/* Utility */
.text-center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.stack{ display:grid; gap:var(--stack); }
.stack-lg{ display:grid; gap:var(--s-6); }
.flow > * + *{ margin-top:var(--stack); }
.hidden{ display:none !important; }
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ==========================================================================
   21. RESPONSIVE — nav collapse & scale-downs
   ========================================================================== */
/* Collapse to the hamburger/drawer BEFORE the pill can overflow (≤1024px = small
   window / tablet). Every real laptop is ≥1280px, so the full nav always shows there. */
@media (max-width:1080px){
  .nav-menu{ display:none; }
  .nav-actions .btn--primary,
  .nav-actions .nav-pill--emergency{ display:none; }
  .mobile-toggle{ display:flex; }
}
@media (min-width:1081px){
  .nav-drawer{ display:none; }
}

@media (max-width:700px){
  .hero{ min-height:auto; padding-top:var(--s-8); }
  .recovery-features{ grid-template-columns:1fr; }
  .service-top{ align-items:center; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ==========================================================================
   22. ICON SYSTEM — "M3 Line"  (the single house iconography)
   --------------------------------------------------------------------------
   ONE cohesive set, one visual language, two sub-families:
     • .m3-icon           → line UI icons  (1.5 stroke, currentColor, no fill)
     • .m3-icon--brand    → solid brand marks (fill currentColor, no stroke)
   Every icon inherits COLOR from its context (currentColor) and SIZE from --icn.
   Stroke weight is locked with non-scaling-stroke so a 14px icon and a 42px
   icon read at the exact same weight — the hallmark of a real icon system.

   MARKUP (never restyle inline — only the classes below):
     <svg class="m3-icon" aria-hidden="true"><use href="#i-name"/></svg>
     <svg class="m3-icon m3-icon--brand" aria-hidden="true"><use href="#i-instagram"/></svg>

   SIZES:  --xs  --sm  (base ≈ text)  --md  --lg  --xl  --2xl
   TILE :  wrap a line icon in <span class="icon-tile">…</span> for the framed chip.
   ADD AN ICON: add a <symbol id="i-name" viewBox="0 0 24 24">…</symbol> to the
     shared #m3-sprite block (same block on every page), then reference it.
   ========================================================================== */
.m3-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.m3-icon{
  --icn:1.25rem;
  width:var(--icn); height:var(--icn);
  flex:0 0 auto; display:inline-block; vertical-align:-0.2em;
  color:currentColor;
  fill:none; stroke:currentColor;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  overflow:visible;
}
.m3-icon *{ vector-effect:non-scaling-stroke; }   /* uniform weight at every size */
.m3-icon--brand,
.m3-icon--solid{ fill:currentColor; stroke:none; }   /* solid glyphs (brand marks, stars) */
.m3-icon--brand *,
.m3-icon--solid *{ vector-effect:none; }

/* optical size scale — fixed rem so icons stay consistent regardless of context font-size */
.m3-icon--xs{  --icn:1rem; }
.m3-icon--sm{  --icn:1.125rem; }
.m3-icon--md{  --icn:1.5rem; }
.m3-icon--lg{  --icn:1.75rem; }
.m3-icon--xl{  --icn:2.25rem; }
.m3-icon--2xl{ --icn:2.75rem; }

/* framed icon "chip" — wraps a line icon (services, contact, value cards…) */
.icon-tile{
  width:58px; height:58px; border-radius:var(--r-md); flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--text);
  background:var(--accent-grad-soft); border:1px solid var(--hair);
  transition:transform var(--d-med) var(--ease-out-back),
             border-color var(--d-med) var(--ease-smooth);
}
.icon-tile .m3-icon{ --icn:1.55rem; }
.icon-tile--lg{ width:68px; height:68px; border-radius:var(--r-lg); }
.icon-tile--lg .m3-icon{ --icn:1.8rem; }
.icon-tile--emergency{ background:var(--emergency-soft); border-color:rgba(244,63,94,.35); }
.icon-tile--emergency .m3-icon{ color:var(--emergency-2); }

/* ---- contextual icon colouring (inherits currentColor otherwise) ---- */
.badge .m3-icon{ color:var(--blue); --icn:1rem; }
.badge--accent .m3-icon{ color:var(--cyan); }
.badge--emergency .m3-icon{ color:var(--emergency-2); }
.feature-item .m3-icon{ color:var(--emergency-2); --icn:1.15rem; }
.link-arrow .m3-icon{ --icn:1.05rem; }
.marquee__sep{ --icn:0.85rem; color:var(--blue); display:inline-flex; align-items:center; }
.footer-contact li .m3-icon{ color:var(--blue); margin-top:.2em; --icn:1.05rem; }
.back-to-top .m3-icon{ --icn:1rem; transition:transform var(--d-med) var(--ease-out-expo); }
.back-to-top:hover .m3-icon{ transform:translateY(-3px); }
.contact-item .ci-icon .m3-icon{ --icn:1.2rem; }
.service-icon .m3-icon{ --icn:1.55rem; }

/* rating (testimonials) — filled stars, one warm accent */
.rating{ display:inline-flex; align-items:center; gap:.18rem; color:#FBBF24; }
.rating .m3-icon{ --icn:1.05rem; }

/* work-card media icon (line icon inside the gradient plate) */
.work-media .m3-icon{
  --icn:2.6rem; color:var(--text);
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.45));
  transition:transform .7s var(--ease-out-expo);
}
.work-card:hover .work-media .m3-icon{ transform:scale(1.04); }

/* recovery-visual big chip */
.recovery-visual .icon-tile{ margin:0 auto var(--s-4); }

/* ==========================================================================
   23. PREFERS-REDUCED-MOTION — full fallback
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal,.reveal.is-in{ opacity:1 !important; transform:none !important; filter:none !important; }
  .splitline .word > span{ transform:none !important; }
  .marquee__track{ animation:none !important; }
  .orb{ animation:none !important; }
  .grain{ animation:none !important; }
  .nav-pill--emergency .dot{ animation:none !important; }
}

/* ==========================================================================
   26. GRADIENT-TEXT FALLBACK (last, so it wins source order)
   On engines without background-clip:text, transparent text would vanish.
   ========================================================================== */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .gradient-text,.grad-word{ color:var(--blue); -webkit-text-fill-color:currentColor; }
  .grad-word--emergency{ color:var(--emergency); -webkit-text-fill-color:currentColor; }
  .recovery-metric{ color:var(--emergency); -webkit-text-fill-color:currentColor; }
  .wm-value{ color:var(--blue); -webkit-text-fill-color:currentColor; }
}

/* Recovery platform chips — centered inside the (centered) recovery panel */
.platform-tags{ justify-content:center; margin-top:.6rem; }

/* ==========================================================================
   27. MOBILE PERFORMANCE — cut heavy continuous compositing on small screens
   ========================================================================== */
@media (max-width:768px){
  .orb{ filter:blur(22px); opacity:.24; animation:none !important; }  /* cheap static blur */
  .orb--1,.orb--2{ width:60vw; height:60vw; }
  .orb--3{ display:none; }                     /* drop the 3rd blurred layer on phones */
  .grain{ display:none; }                      /* drop the overlay repaint on mobile */
  .site-nav.is-condensed .nav-inner{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(12,13,17,.95); }
}


/* ==========================================================================
   29. WebGL fluid cursor background — homepage only (canvas exists only there).
   z-index:-2 sits BEHIND grain(-1)/content, ABOVE the body #08080B paint,
   inside the .page-shell isolate context (same trick the orbs use).
   ========================================================================== */
.fluid-bg{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:var(--z-fluid,-2);
}
@media (prefers-reduced-motion:reduce){ .fluid-bg{ display:none !important; } }
/* The fluid runs on touch too (finger-drag = same flowing smoke as the desktop
   cursor, like /test). Quality is lowered for touch inside fluid.js. */