/* ============================================================
   LUXERA DESIGN SYSTEM — TOKENS
   Extracted 1:1 from the published Framer build (17 May 2026)
   Framer token UUIDs kept in comments for traceability.
   ============================================================ */

:root {
  /* ---------- 1. RAW COLOR ---------- */
  --lx-deep:            #011014;  /* token-0f493e21 "Dark"  + token-62390e7d "Black" */
  --accent-rgb:         207, 246, 255;  /* per-page accent triplet — overridden on service routes */
  --lx-ice:             rgb(var(--accent-rgb));  /* brand accent — derives from --accent-rgb */
  --lx-pulse:           #5de84f;  /* booking-status green */
  --lx-white:           #ffffff;  /* token-79a073c1 */
  --lx-mist:            #e8eaf6;  /* token-ad9a6b71 */
  --lx-slate:           #5b5b74;  /* token-7748867d */
  --lx-indigo:          #0a0e24;  /* token-516e7cd3 */
  --lx-void:            #050912;  /* body gradient midpoint (not a Framer token) */

  /* ---------- 2. SEMANTIC COLOR ---------- */
  --surface-page:       linear-gradient(90deg, #011014 0%, #050912 51.56%, #011014 100%);
  --surface-card:       var(--lx-deep);
  --surface-card-alpha: rgba(1, 16, 20, 0.9);   /* testimonials */
  --surface-raised:     rgba(255, 255, 255, 0.05);
  --surface-hover:      rgba(255, 255, 255, 0.1);
  --surface-scrim:      rgba(1, 16, 20, 0.5);   /* image hover overlay */
  --surface-accent-dim: rgba(var(--accent-rgb), 0.1);
  --surface-pulse-dim:  rgba(93, 232, 79, 0.15);    /* booking-dot ring */

  --text-primary:       #cff6ff;                /* headings — stays ice; accent recolors separately */
  --text-on-dark:       var(--lx-white);        /* card titles */
  --text-body:          rgba(232, 234, 246, 0.7);  /* token-3c641913 = #e8eaf6b3 */
  --text-muted:         rgba(255, 255, 255, 0.6);
  --text-subtle:        rgba(255, 255, 255, 0.5);
  --text-on-accent:     var(--lx-deep);         /* text on ice buttons */
  --text-placeholder:   #999999;

  --border-hairline:    rgba(255, 255, 255, 0.05);   /* nav */
  --border-faint:       rgba(var(--accent-rgb), 0.05);   /* FAQ rows */
  --border-card:        rgba(var(--accent-rgb), 0.1);    /* all cards, 2px */
  --border-accent:      rgba(var(--accent-rgb), 0.2);    /* pricing card, 2px */
  --border-input:       rgba(255, 255, 255, 0.1);
  --border-btn:         var(--lx-white);
  --border-btn-ghost:   rgba(255, 255, 255, 0.5);

  /* ---------- 3. TYPOGRAPHY ---------- */
  --font-display:       "Gabarito", sans-serif;
  --font-emphasis:      "Inter", sans-serif;    /* only <strong>/<em> inside some presets */
  --font-mono:          "Fragment Mono", monospace;
  --font-features:      "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on;
  --root-font-size:     1rem;   /* html { font-size: 100% } */

  /* Type scale — desktop (≥1200px). See media queries below. */
  --fs-display:  5.5rem;   /* 88px  */
  --fs-h1:       4rem;     /* 64px  */
  --fs-h2:       3rem;     /* 48px  */
  --fs-h3:       2.5rem;   /* 40px  */
  --fs-h4:       2rem;     /* 32px  */
  --fs-lead:     1.5rem;   /* 24px  */
  --fs-h5:       1rem;     /* 16px  */
  --fs-h5-sm:    0.875rem; /* 14px  */
  --fs-h6:       1rem;     /* 16px  */
  --fs-body:     1rem;     /* 16px  */

  --lh-tight:    120%;
  --lh-body:     140%;
  --lh-nav:      1.4em;

  --ls-display: -0.03em;
  --ls-h2:      -0.02em;
  --ls-h4:      -0.04em;
  --ls-h5:      -0.01em;
  --ls-h6:      -0.02em;
  --ls-body:    -0.03em;

  /* ---------- 4. SPACING ---------- */
  --space-1:  4px;   --space-2:  6px;   --space-3:  8px;   --space-4:  10px;
  --space-5:  12px;  --space-6:  16px;  --space-7:  20px;  --space-8:  24px;
  --space-9:  32px;  --space-10: 40px;  --space-11: 48px;  --space-12: 64px;
  --space-13: 80px;  --space-14: 100px; --space-15: 120px; --space-16: 140px;
  --space-17: 160px;

  /* ---------- 5. LAYOUT ---------- */
  --container-max:      1520px;
  --content-max:        1440px;
  --measure-max:        800px;   /* headline + paragraph line length */
  --gutter:             40px;    /* 24px tablet / 16px mobile */
  --section-y:          120px;   /* 80px tablet / 40–80px mobile */
  --nav-offset:         100px;   /* sticky offset for the FAQ side card */

  /* ---------- 6. RADII ---------- */
  --radius-sm:   5px;
  --radius-md:   7px;    /* inputs */
  --radius-lg:   9px;    /* work cards, mobile */
  --radius-xl:   11px;   /* FAQ rows */
  --radius-2xl:  13px;   /* service + testimonial cards */
  --radius-3xl:  16px;   /* work cards, desktop */
  --radius-4xl:  20px;   /* FAQ sticky card */
  --radius-pill: 10px;   /* buttons — softened rounded-rect, no longer a full pill */
  --radius-full: 999px;  /* genuine circles only (avatars, dots, thumbs) */
  --corner-squircle: superellipse(1.4);  /* blog cards */

  /* ---------- 7. ELEVATION ---------- */
  /* elevation removed — flat, shadowless surfaces */
  --shadow-card:        none;
  --shadow-glow-card:   none;
  --shadow-btn-primary: none;
  --shadow-btn-ghost:   none;
  --shadow-input:       none;
  --shadow-nav:         none;

  --glow-text:        0 4px 24px rgba(var(--accent-rgb), 0.25);
  --glow-text-hero:   0 4px 24px rgba(var(--accent-rgb), 0.25);
  --blur-glass:       blur(10px);

  /* ---------- 8. MOTION ---------- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      200ms;
  --dur-base:      400ms;
  --dur-slow:      1000ms;
  --dur-ambient:   2000ms;
  /* Framer springs, for JS parity:
     entrance  → spring, bounce 0.1,  duration 1–2s
     micro     → spring, bounce 0.2,  duration 0.4s
     chat bubble → spring, stiffness 130, damping 75, delay 4.5s
     text reveal → per-word: opacity .001→1, blur 10px→0, translateY 10px→0 */
}

/* ---------- BREAKPOINT OVERRIDES ---------- */

/* Tablet: 810–1199.98px */
@media (min-width: 810px) and (max-width: 1199.98px) {
  :root {
    --fs-display: 4rem;      /* 64px */
    --fs-h1:      3rem;      /* 48px */
    --fs-h2:      2.5rem;    /* 40px */
    --fs-h3:      2rem;      /* 32px */
    --fs-h4:      1.75rem;   /* 28px */
    --fs-lead:    1.4rem;    /* 22.4px */
    --fs-h5-sm:   0.75rem;   /* 12px */
    --fs-body:    0.85rem;   /* 13.6px */
    --gutter:     24px;
    --section-y:  80px;
  }
}

/* Mobile: ≤809.98px */
@media (max-width: 809.98px) {
  :root {
    --fs-display: 3.2rem;    /* 51.2px */
    --fs-h1:      2.5rem;    /* 40px */
    --fs-h2:      2rem;      /* 32px */
    --fs-h3:      1.75rem;   /* 28px */
    --fs-h4:      1.5rem;    /* 24px */
    --fs-lead:    1rem;      /* 16px */
    --fs-h5-sm:   0.75rem;   /* 12px */
    --fs-body:    0.85rem;   /* 13.6px */
    --gutter:     16px;
    --section-y:  40px;
  }
}

/* ---------- TYPE PRESETS ----------
   Names map to the original Framer style presets.
   ------------------------------------ */

.t-display { /* rwvEDxNeo — hero H1, desktop only */
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-display); line-height: var(--lh-tight);
  letter-spacing: var(--ls-display); text-transform: capitalize;
  font-feature-settings: var(--font-features); color: var(--text-primary);
}
.t-h1 { /* FLs3rjDjN — section heroes */
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-h1); line-height: var(--lh-tight);
  letter-spacing: var(--ls-display); text-transform: capitalize;
  font-feature-settings: var(--font-features); color: var(--text-primary);
}
.t-h2 { /* lqjPHjYKU */
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-h2); line-height: var(--lh-tight);
  letter-spacing: var(--ls-h2); text-transform: capitalize;
  font-feature-settings: var(--font-features); color: var(--text-primary);
}
.t-h3 { /* rxyXKXUww */
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-h3); line-height: var(--lh-tight);
  letter-spacing: var(--ls-h2); font-feature-settings: var(--font-features);
  color: var(--text-primary);
}
.t-h4 { /* qAkA6xsuj — card titles */
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-h4); line-height: var(--lh-tight);
  letter-spacing: var(--ls-h4); text-transform: capitalize;
  font-feature-settings: var(--font-features); color: var(--text-on-dark);
}
.t-lead { /* mpFZ2ZWQN — quotes, intro paragraphs */
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-lead); line-height: var(--lh-tight);
  letter-spacing: var(--ls-h4); font-feature-settings: var(--font-features);
  color: var(--text-primary);
}
.t-h5 { /* RBCMU3gvI — button labels, FAQ questions */
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h5); line-height: var(--lh-tight);
  letter-spacing: var(--ls-h5); font-feature-settings: var(--font-features);
}
.t-h5-sm { /* P6ql0TYMg — small buttons, form labels */
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h5-sm); line-height: var(--lh-tight);
  letter-spacing: var(--ls-h5); font-feature-settings: var(--font-features);
}
.t-h6 { /* JNioVJoqo — nav links, tabs */
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-h6); line-height: var(--lh-nav);
  letter-spacing: var(--ls-h6); font-feature-settings: var(--font-features);
}
.t-body { /* ifCLtbI_y */
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-body); line-height: var(--lh-body);
  letter-spacing: var(--ls-body); font-feature-settings: var(--font-features);
  color: var(--text-body);
}
.t-link { /* fMEUGPF6I */
  color: var(--text-muted); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.t-link:hover { color: var(--lx-ice); }

/* ============================================================
   LUXERA — MAIN STYLESHEET
   Depends on css/tokens.css. Nothing here hardcodes a colour,
   size or radius that isn't a token.
   ============================================================ */

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:var(--surface-page);background-attachment:fixed;
  color:var(--text-body);font-family:var(--font-display);
  font-feature-settings:var(--font-features);overflow-x:hidden}
h1,h2,h3,h4,h5,h6,p,figure{margin:0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--lx-ice);outline-offset:3px;border-radius:4px}

/* ---------- LAYOUT ---------- */
.wrap{width:100%;max-width:var(--container-max);margin-inline:auto;
  padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.measure{max-width:var(--measure-max);margin-inline:auto}
.page{display:flex;flex-direction:column}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- SHARED PRIMITIVES ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-2)}
.dot-pulse{width:10px;height:10px;border-radius:50%;background:var(--lx-pulse);flex:none;
  box-shadow:0 0 0 4px var(--surface-pulse-dim);animation:dotPulse 2s var(--ease-out) infinite}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}}

.glow{text-shadow:none}
.center{text-align:center}

/* ---------- BUTTON ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
  border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn__icon{width:20px;height:20px;flex:none}
/* crisp Google Meet mark for the "Book a call" CTAs (replaces the raster PNG) */
.btn__icon--meet{width:21px;height:17px;flex:none;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 87.5 72'%3E%3Cpath fill='%2300832d' d='M49.5 36l8.53 9.75 11.47 7.33 2-17.02-2-16.64-11.69 6.44z'/%3E%3Cpath fill='%230066da' d='M0 51.5V66c0 3.315 2.685 6 6 6h14.5l3-10.96-3-9.54-9.95-3z'/%3E%3Cpath fill='%23e94235' d='M20.5 0L0 20.5l10.55 3 9.95-3 2.95-9.41z'/%3E%3Cpath fill='%232684fc' d='M0 20.5h20.5v31H0z'/%3E%3Cpath fill='%2300ac47' d='M82.6 8.68L69.5 19.42v33.66l13.16 10.79c1.97 1.54 4.85.135 4.85-2.37V11c0-2.535-2.945-3.925-4.91-2.32z'/%3E%3Cpath fill='%2300ac47' d='M49.5 36v15.5h-29V72h43c3.315 0 6-2.685 6-6V53.08z'/%3E%3Cpath fill='%23ffba00' d='M63.5 0h-43v20.5h29V36l20-16.57V6c0-3.315-2.685-6-6-6z'/%3E%3C/svg%3E")}

.btn--primary{background:var(--lx-white);border:1.5px solid var(--border-btn);
  color:var(--lx-deep);box-shadow:var(--shadow-btn-primary)}
.btn--primary:hover{transform:translateY(-2px)}

.btn--ghost{background:var(--surface-hover);border:1.5px solid var(--border-btn-ghost);
  color:var(--lx-white);box-shadow:var(--shadow-btn-ghost)}
.btn--ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.16);
  border-color:var(--lx-ice)}

.btn--lg{padding:20px 32px}
.btn--md{padding:14px 24px}
.btn--sm{padding:8px 16px;gap:var(--space-2)}
.btn--block{width:100%}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;
  border-bottom:1px solid var(--border-hairline);
  background:linear-gradient(180deg,rgba(1,16,20,.95) 0%,rgba(1,16,20,0) 100%);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow-nav);
  transform:translateY(-100px);opacity:.001;
  animation:navDrop 1s var(--ease-out) .2s forwards}
@keyframes navDrop{to{transform:translateY(0);opacity:1}}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);
  padding-block:12px}
.nav__logo{display:flex;align-items:center;padding-block:10px}
.nav__logo img{width:144px;height:auto}
.nav__links{display:flex;gap:var(--space-9)}
.nav__links a{color:var(--text-muted);position:relative;
  transition:color var(--dur-fast) var(--ease-out)}
.nav__links a:hover,.nav__links a[aria-current=page]{color:var(--lx-ice)}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;
  background:var(--lx-ice);transition:right var(--dur-base) var(--ease-out)}
.nav__links a:hover::after{right:0}
.nav__actions{display:flex;align-items:center;gap:var(--space-5)}
.nav__burger{display:inline-flex;width:44px;height:44px;position:relative;cursor:pointer;flex:none;
  background:none;border:0;padding:0;border-radius:var(--radius-md);
  transition:background var(--dur-fast) var(--ease-out)}
.nav__burger:hover{background:var(--surface-accent-dim)}
.nav__burger span{position:absolute;left:50%;width:20px;height:2px;border-radius:10px;
  background:var(--lx-white);transform:translateX(-50%);
  transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
.nav__burger span:nth-child(1){top:37.5%}
.nav__burger span:nth-child(2){top:62.5%}
.nav[data-open=true] .nav__burger span:nth-child(1){top:50%;transform:translateX(-50%) rotate(45deg)}
.nav[data-open=true] .nav__burger span:nth-child(2){top:50%;transform:translateX(-50%) rotate(-45deg)}
/* the header "Book a Call" hides while the menu is open — the menu carries its own CTA.
   visibility (not display) keeps its slot so the burger/X never shifts. */
.nav__book{transition:opacity var(--dur-fast) var(--ease-out),visibility var(--dur-fast) var(--ease-out)}
.nav[data-open=true] .nav__book{opacity:0;visibility:hidden;pointer-events:none}
/* ---------- FULL-SCREEN MEGA MENU ---------- */
.nav__menu{position:fixed;top:0;left:0;width:100vw;height:100dvh;z-index:48;
  background:radial-gradient(120% 90% at 85% 0%,rgba(10,14,36,.6),transparent 60%),
             linear-gradient(180deg,rgba(1,16,20,.98),rgba(5,9,18,.99));
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  overflow:hidden;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out),visibility var(--dur-base) var(--ease-out)}
.nav__menu[data-open=true]{opacity:1;visibility:visible;pointer-events:auto}
.nav__menu-inner{display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:var(--space-12);align-items:start;align-content:center;
  padding-top:calc(64px + var(--space-9));padding-bottom:var(--space-10);height:100%}
.nav__menu-eyebrow,.nav__col-head{font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-subtle)}

/* left — service cards (2×2 grid, art below copy) */
.nav__menu-services{display:grid;grid-template-columns:1fr 1fr;
  gap:var(--space-4);align-content:start}
.nav__menu-eyebrow{grid-column:1/-1;margin-bottom:0}
.nav__card{position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:0;
  border:1px solid var(--border-card);border-radius:var(--radius-2xl);
  background:var(--surface-card);
  transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.nav__card:hover{transform:translateY(-3px);border-color:var(--border-accent)}
.nav__card--aeo{background:linear-gradient(160deg,rgba(184,255,230,.16),rgba(184,255,230,.02))}
.nav__card--uxax{background:linear-gradient(160deg,rgba(130,180,255,.16),rgba(130,180,255,.02))}
.nav__card--ds{background:linear-gradient(160deg,rgba(255,140,180,.15),rgba(255,140,180,.02))}
.nav__card--bot{background:linear-gradient(160deg,rgba(170,130,255,.16),rgba(170,130,255,.02))}
.nav__card-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;
  padding:var(--space-7) var(--space-8) var(--space-6)}
.nav__card-title{font-family:var(--font-display);font-size:1.5rem;line-height:1.12;
  letter-spacing:var(--ls-h2);color:var(--lx-white)}
.nav__card:hover .nav__card-title{color:var(--lx-ice)}
.nav__card-desc{display:none}   /* menu service cards show the title only */
.nav__card-art{position:relative;margin-top:auto;width:100%;aspect-ratio:16/10;
  overflow:hidden;background:transparent}
.nav__card-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;
  transition:transform var(--dur-slow) var(--ease-out)}
.nav__card:hover .nav__card-art img{transform:scale(1.04)}

/* right — text link columns (vertical stack) */
.nav__menu-explore{display:flex;flex-direction:column;gap:var(--space-9);align-self:start}
.nav__col{display:flex;flex-direction:column;gap:var(--space-4)}
.nav__col-head{margin-bottom:var(--space-1)}
.nav__col a{font-family:var(--font-display);font-size:1.5rem;line-height:1.15;
  color:var(--text-on-dark);transition:color var(--dur-fast) var(--ease-out)}
.nav__col a:hover{color:var(--lx-ice)}
.nav__social{display:flex;gap:var(--space-5)}
.nav__social a{display:inline-flex;color:var(--text-muted);
  transition:color var(--dur-fast) var(--ease-out)}
.nav__social a:hover{color:var(--lx-ice)}
.nav__social svg{width:22px;height:22px}

/* ---- two-level mobile menu: root list (level 1) + back control (level 2) ----
   These live only on phones; desktop keeps the full two-column menu, so they
   are display:none by default and only revealed inside the phone media query. */
.nav__menu-root,.nav__menu-back{display:none}
.nav__drill{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  width:100%;min-height:56px;padding:var(--space-8) var(--space-1);
  background:none;border:0;border-bottom:1px solid var(--border-hairline);
  cursor:pointer;text-align:left;color:var(--text-on-dark);
  font-family:var(--font-display);font-size:1.6rem;line-height:1.1;letter-spacing:var(--ls-h2);
  transition:color var(--dur-fast) var(--ease-out)}
.nav__drill:hover,.nav__drill:focus-visible{color:var(--lx-ice)}
.nav__drill svg{width:24px;height:24px;flex:none;color:var(--text-subtle);
  transition:color var(--dur-fast) var(--ease-out)}
.nav__drill:hover svg,.nav__drill:focus-visible svg{color:var(--lx-ice)}
.nav__drill-follow{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  min-height:56px;padding:var(--space-8) var(--space-1);border-bottom:1px solid var(--border-hairline)}
.nav__drill-follow-label{color:var(--text-on-dark);
  font-family:var(--font-display);font-size:1.6rem;line-height:1.1;letter-spacing:var(--ls-h2)}
.nav__menu-cta{margin-top:auto;width:100%;justify-content:center}
/* the back control doubles as the panel title — brand display font, category name set by JS */
.nav__menu-back{align-items:center;gap:var(--space-4);background:none;border:0;cursor:pointer;
  color:var(--text-on-dark);font-family:var(--font-display);
  font-size:1.6rem;line-height:1.1;letter-spacing:var(--ls-h2);
  padding:var(--space-3) 0;margin-bottom:var(--space-8);
  transition:color var(--dur-fast) var(--ease-out)}
.nav__menu-back:hover,.nav__menu-back:focus-visible{color:var(--lx-ice)}
.nav__menu-back svg{width:24px;height:24px;flex:none}

@media (max-width:1023.98px){
  /* one column; services (natural, locked-ratio cards) then nav directly below,
     the whole block vertically centred in the leftover space */
  .nav__menu-inner{grid-template-columns:1fr;grid-template-rows:auto auto;
    align-content:center;gap:var(--space-8);
    padding-top:calc(60px + var(--space-7));padding-bottom:var(--space-8)}
}
@media (max-width:809.98px){
  /* 2×2 stays; compact so everything (incl. Explore/Company/Follow) fits in-viewport */
  .nav__card-copy{padding:var(--space-5) var(--space-5) var(--space-4)}
  .nav__card-title{font-size:1.1rem;line-height:1.1}
  .nav__card-desc{font-size:13px;line-height:1.3}
  .nav__menu-services{gap:var(--space-3)}
  .nav__menu-explore{flex-direction:row;flex-wrap:wrap;gap:var(--space-6) var(--space-9)}
  .nav__col{gap:var(--space-3)}
  .nav__col a{font-size:1.15rem}
}

/* ---- phones: the menu becomes a two-level drill-down ---- */
@media (max-width:809.98px){
  /* inner is a flex column so the CTA can pin to the bottom of level 1 */
  .nav__menu-inner{display:flex;flex-direction:column;height:100%;overflow-y:auto;
    align-items:stretch;align-content:normal;gap:0;
    padding-top:calc(60px + var(--space-7));padding-bottom:var(--space-8)}

  /* level 1 fills the height; the explore wrapper dissolves so each column
     can be shown one at a time as its own level-2 panel */
  .nav__menu-root{display:flex;flex-direction:column;flex:1 0 auto}
  .nav__menu-explore{display:contents}

  /* at the root, every drillable section is hidden; Follow lives inline in level 1 */
  .nav__menu-services,
  .nav__col--explore,
  .nav__col--company{display:none}
  .nav__col--follow{display:none}
  /* services panel becomes a vertical stack of text-left / image-right cards
     that grow to fill the viewport height (each card gets an equal share) */
  .nav__menu-services{grid-template-columns:1fr;grid-auto-rows:1fr;gap:var(--space-4);
    flex:1 1 auto;align-content:stretch}
  .nav__menu-services .nav__card{flex-direction:row;align-items:stretch;min-height:96px}
  .nav__menu-services .nav__card-copy{flex:1;justify-content:center;padding:var(--space-5) var(--space-6)}
  .nav__menu-services .nav__card-art{margin-top:0;width:42%;max-width:168px;aspect-ratio:auto;align-self:stretch}
  .nav__col--explore,.nav__col--company{gap:var(--space-8)}
  .nav__col--explore a,.nav__col--company a{font-size:1.6rem}
  /* tags removed on mobile — the category name now lives in the back control */
  .nav__menu-eyebrow,.nav__col-head{display:none}

  /* a panel is open: hide level 1, reveal the back control + the chosen section */
  #menu[data-panel] .nav__menu-root{display:none}
  #menu[data-panel] .nav__menu-back{display:inline-flex}
  #menu[data-panel="services"] .nav__menu-services{display:grid}
  #menu[data-panel="explore"]  .nav__col--explore{display:flex}
  #menu[data-panel="company"]  .nav__col--company{display:flex}
}

/* ---------- HERO ---------- */
.hero{position:relative;overflow:clip;display:flex;flex-direction:column;align-items:center;
  gap:var(--space-12);padding:140px var(--gutter) 120px}
.hero__orn{position:absolute;top:-154px;width:603px;z-index:0;pointer-events:none;
  opacity:.001}
.hero__orn img{width:100%;height:auto}
.hero__orn--l{left:-415px;transform:translateX(-200px);
  animation:ornL 2s var(--ease-out) forwards}
.hero__orn--r{right:-415px;transform:translateX(200px) rotate(180deg);
  animation:ornR 2s var(--ease-out) forwards}
@keyframes ornL{to{opacity:1;transform:translateX(0) rotate(35deg)}}
@keyframes ornR{to{opacity:1;transform:translateX(0) rotate(145deg)}}
.hero__head{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  gap:var(--space-8);width:100%}
.hero__title{max-width:var(--measure-max);text-align:center}
.hero__proof{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);margin-top:calc(-1*var(--space-3))}
.hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4)}
.hero__rows{position:relative;z-index:1;display:flex;flex-direction:column;
  gap:var(--space-7);width:100%}

/* ---------- MARQUEE ---------- */
.mq{overflow:hidden;width:100%;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  mask:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
.mq__track{display:flex;width:max-content;align-items:center;
  animation:marquee var(--mq-dur,40s) linear infinite}
.mq--reverse .mq__track{animation-direction:reverse}
.mq:hover .mq__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.mq--shots .mq__track{gap:var(--space-5)}
.mq--shots img{width:427px;aspect-ratio:1.333;object-fit:cover;
  border-radius:var(--radius-2xl);flex:none}
.mq--logos .mq__track{gap:80px}
.mq--logos img{height:26px;width:auto;opacity:.5;flex:none;
  transition:opacity var(--dur-fast) var(--ease-out)}
.mq--logos img:hover{opacity:.9}

/* ---------- SECTION HEADINGS ---------- */
.sec-title{text-align:center;max-width:var(--measure-max);margin-inline:auto}

/* ---------- WORK GRID ---------- */
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-12);
  margin-top:var(--space-9)}
.work{display:flex;flex-direction:column;gap:var(--space-6)}
.work__frame{position:relative;border:2px solid var(--border-card);
  border-radius:var(--radius-3xl);overflow:hidden;box-shadow:var(--shadow-card);
  opacity:.8;transition:opacity var(--dur-base) var(--ease-out)}
.work:hover .work__frame{opacity:1}
.work__frame img{width:100%;aspect-ratio:1.34;object-fit:cover}
.work__scrim{position:absolute;inset:0;background:var(--surface-scrim);
  border-radius:inherit;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--space-10);opacity:0;
  transition:opacity var(--dur-base) var(--ease-out),gap var(--dur-base) var(--ease-out)}
.work:hover .work__scrim{opacity:1;gap:var(--space-8)}
.work__arrow{width:100px;height:98px;color:var(--lx-white)}
.work__title{opacity:.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}

/* ---------- SERVICE GRID ---------- */
.svc-grid{display:flex;gap:var(--space-7);margin-top:var(--space-9)}
.svc{flex:1 1 0;min-width:0;background:var(--surface-card);
  border:2px solid var(--border-card);border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.svc:hover{border-color:var(--border-accent);transform:translateY(-4px)}
.svc__media{position:relative;aspect-ratio:1.218;overflow:hidden}
.svc__media img{width:100%;height:100%;object-fit:contain;object-position:center;padding:var(--space-6);
  transition:transform 600ms var(--ease-out)}
.svc:hover .svc__media img{transform:scale(1.04)}
.svc__fade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(1,16,20,0) 0%,rgba(1,16,20,0) 75%,var(--lx-deep) 100%)}
.svc__scrim{position:absolute;inset:0;background:var(--surface-scrim);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:var(--space-6);
  opacity:0;transition:opacity var(--dur-base) var(--ease-out)}
.svc:hover .svc__scrim{opacity:1}
.svc__arrow{width:57px;height:56px;color:var(--lx-white)}
.svc__body{padding:var(--space-8);display:grid;gap:var(--space-3);text-align:center}
/* service cards tinted per service (matches the burger menu), heading only */
.svc{--svc-accent:207,246,255}
.svc[href="#/services/aeo"]{--svc-accent:184,255,230}
.svc[href="#/services/uxax"]{--svc-accent:130,180,255}
.svc[href="#/services/ds"]{--svc-accent:255,140,180}
.svc[href="#/services/bot"]{--svc-accent:170,130,255}
.svc[href^="#/services/"]{
  background:linear-gradient(165deg,rgba(var(--svc-accent),.14),rgba(var(--svc-accent),.02)),var(--surface-card);
  border-color:rgba(var(--svc-accent),.18)}
.svc[href^="#/services/"]:hover{border-color:rgba(var(--svc-accent),.45)}
.svc__body .t-h4{color:rgb(var(--svc-accent)) !important;text-shadow:0 4px 24px rgba(var(--svc-accent),.28)}
.svc__body .t-body{display:none}
/* title on top, visual on the bottom (matches the burger menu) */
.svc[href^="#/services/"] .svc__body{order:-1}
.svc[href^="#/services/"] .svc__media{order:0}

/* ---------- STATEMENT CARD ---------- */
.statement{background:var(--surface-card);border:2px solid var(--border-accent);
  border-radius:var(--radius-3xl);box-shadow:var(--shadow-glow-card);
  padding:64px 48px;overflow:hidden}
.statement h2{text-align:center}
.statement .dim{color:var(--text-muted)}

/* ---------- DESIGN OS ---------- */
.os{display:flex;flex-direction:column;align-items:center;gap:var(--space-9)}
.os__copy{display:grid;gap:var(--space-3);max-width:var(--measure-max);text-align:center}
.os__shot{position:relative;width:100%;max-width:var(--content-max);margin-inline:auto}
.os__shot img{width:100%;height:auto}
.os__shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--lx-deep) 0%,rgba(1,16,20,0) 10%,
    rgba(1,16,20,0) 90%,var(--lx-deep) 100%)}

/* stacked mobile service cards */
.svc-stack{display:grid;gap:var(--space-6)}
.svc-stack .svc{flex:none}

/* ---------- CALCULATOR ---------- */
.calc-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--space-9)}
.tabs{display:inline-flex;gap:var(--space-3);padding:4px;border-radius:var(--radius-full);
  background:var(--surface-raised);border:1px solid var(--border-input)}
.tab{padding:12px 24px;border-radius:var(--radius-full);border:1px solid transparent;
  color:var(--text-muted);cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out)}
.tab:hover{color:var(--lx-white)}
.tab[aria-selected=true]{background:var(--surface-accent-dim);border-color:var(--lx-ice);
  color:var(--lx-ice)}

.calc{width:100%;display:grid;grid-template-columns:1fr 1fr;
  background:var(--surface-card);border:1px solid var(--border-input);
  border-radius:var(--radius-2xl);overflow:hidden}
.calc__col{padding:36px 32px;display:flex;flex-direction:column}
.calc__col + .calc__col{border-left:1px solid var(--border-input)}
.calc h3{font-size:24px;font-weight:500;color:var(--lx-ice);letter-spacing:var(--ls-h2);
  margin-bottom:var(--space-2)}
.calc__lede{font-size:14px;color:var(--text-muted);margin-bottom:var(--space-9)}
.ctrl{margin-bottom:var(--space-7)}
.ctrl__head{display:flex;justify-content:space-between;align-items:baseline;
  gap:var(--space-5);margin-bottom:var(--space-4)}
.ctrl__name{font-size:13px;font-weight:600;color:var(--lx-white)}
.ctrl__desc{font-size:11px;color:var(--text-muted);margin-top:2px}
.ctrl__val{font-size:15px;font-weight:600;color:var(--lx-white);
  background:rgba(255,255,255,.08);padding:6px 16px;border-radius:var(--radius-md);
  min-width:104px;text-align:center;font-variant-numeric:tabular-nums;flex:none}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:20px;
  background:transparent;cursor:pointer;margin:0;display:block}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;
  background:rgba(255,255,255,.1)}
input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:rgba(255,255,255,.1)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;
  border-radius:50%;background:var(--lx-ice);border:3px solid var(--lx-deep);
  margin-top:-5.5px;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2);
  transition:box-shadow var(--dur-fast) var(--ease-out)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
  background:var(--lx-ice);border:3px solid var(--lx-deep);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2)}
input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(var(--accent-rgb),.28)}
.stat{padding-bottom:var(--space-7);border-bottom:1px solid var(--border-input);
  margin-bottom:var(--space-7)}
.stat--last{border-bottom:0;margin-bottom:0;padding-bottom:0}
.stat__label{font-size:10px;font-weight:600;color:var(--text-muted);letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:var(--space-4)}
.stat__row{display:flex;align-items:baseline;gap:var(--space-4)}
.stat__base{font-size:14px;font-weight:500;color:var(--text-subtle);
  font-variant-numeric:tabular-nums;flex:none}
.stat__num{font-size:28px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--text-on-dark)}
.stat__num--burn{color:#fca5a5}
.stat__num--save{color:var(--lx-ice)}
.stat__num--big{font-size:32px;color:var(--lx-ice)}
.stat__side{font-size:15px;font-weight:600;color:var(--text-muted);margin-left:auto;flex:none}
.calc__cta{margin-top:auto;padding-top:var(--space-10)}

/* ---------- PROOF + TESTIMONIALS ---------- */
.proof{display:flex;flex-direction:column;align-items:center;gap:var(--space-5)}
.proof__pill{display:inline-flex;align-items:center;gap:var(--space-2);
  background:var(--surface-hover);border-radius:var(--radius-full);
  padding:8px 12px 8px 8px}
.proof__avatars{display:flex}
.proof__avatars img{width:24px;height:24px;border-radius:50%;object-fit:cover;
  border:1.5px solid #233034;margin-left:-8px;
  transition:transform var(--dur-fast) var(--ease-out)}
.proof__avatars img:first-child{margin-left:0}
.proof__pill:hover .proof__avatars img{transform:translateY(-3px)}

.tmq{margin-top:var(--space-9);cursor:grab}
.tmq:active{cursor:grabbing}
.tmq .mq__track{gap:var(--space-7);align-items:stretch}
.tcard{width:640px;flex:none;display:flex;flex-direction:column;gap:var(--space-11);
  padding:40px;background:var(--surface-card-alpha);border:2px solid var(--border-card);
  border-radius:var(--radius-2xl);box-shadow:var(--shadow-card);
  transition:border-color var(--dur-base) var(--ease-out)}
.tcard:hover{border-color:var(--border-accent)}
.tcard__logo{height:40px;display:flex;align-items:center}
.tcard__logo img{max-height:28px;width:auto}
.tcard__body{display:flex;flex-direction:column;gap:var(--space-11);flex:1}
.tcard__quote{flex:1}
.tcard__foot{display:flex;align-items:center;gap:var(--space-5)}
.tcard__foot img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}

/* ---------- FAQ ---------- */
.faq-layout{display:flex;align-items:flex-start;gap:var(--space-9);
  max-width:var(--content-max);margin-inline:auto}
.faq-aside{flex:.6 1 0;min-width:0;position:sticky;top:var(--nav-offset);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-6);
  padding:40px 28px 28px;border:2px solid var(--border-card);border-radius:var(--radius-4xl);
  background:linear-gradient(125deg,var(--lx-deep) 0%,rgba(var(--accent-rgb),.15) 100%);
  overflow:hidden}
.faq-aside__photo{width:80px;height:80px;border-radius:99px;object-fit:cover;
  object-position:center top}
.faq-list{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--space-6)}
.faq-list__title{text-align:left}
.faq-items{display:grid;gap:var(--space-3)}
details.faq{background:linear-gradient(180deg,rgba(1,16,20,.05) 0%,rgba(var(--accent-rgb),.05) 100%);
  border:1px solid var(--border-faint);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);padding:12px 12px 12px 8px;
  transition:border-color var(--dur-fast) var(--ease-out)}
details.faq:hover{border-color:var(--border-card)}
details.faq summary{display:flex;align-items:center;cursor:pointer;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
.faq__icon{width:40px;height:40px;position:relative;flex:none}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;top:50%;left:50%;
  background:var(--text-subtle);border-radius:10px;transform:translate(-50%,-50%);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.faq__icon::before{width:14px;height:2px}
.faq__icon::after{width:2px;height:14px}
details.faq[open] .faq__icon::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}
.faq__q{color:rgba(255,255,255,.8);flex:1}
.faq__a{padding:2px 20px 6px 40px;text-wrap:balance}

/* ---------- BLOG ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-10);margin-top:var(--space-9)}
.blog-cta{margin-top:var(--space-11)}
.post{min-width:0;display:flex;flex-direction:column;gap:var(--space-6)}
.post__frame{border:1px solid rgba(0,0,0,.06);border-radius:var(--radius-2xl);overflow:hidden;opacity:.8;
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
@supports (corner-shape:superellipse(1.4)){
  .post__frame{corner-shape:superellipse(1.4)}
}
.post:hover .post__frame{opacity:1;transform:translateY(-4px)}
.post__frame img{width:100%;aspect-ratio:1.8;object-fit:cover}
.post__title{opacity:.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}

/* ---------- FOOTER CTA + FORM ---------- */
.cta{background:var(--surface-card);display:flex;flex-direction:column;
  align-items:center;gap:var(--space-11);padding:80px var(--gutter) 0;position:relative;
  overflow:hidden}
.cta__head{display:flex;flex-direction:column;align-items:center;gap:var(--space-8);
  width:100%;max-width:var(--content-max)}
.cta__actions{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
  justify-content:center}
.cta__body{display:flex;gap:var(--space-7);width:100%;max-width:var(--content-max)}
.form{flex:1 1 0;min-width:0;max-width:var(--measure-max);margin-inline:auto;
  display:flex;flex-direction:column;gap:var(--space-9);padding:32px;
  background:var(--surface-card-alpha);border:2px solid var(--border-card);
  border-radius:var(--radius-2xl);box-shadow:var(--shadow-card)}
.form__row{display:flex;gap:var(--space-5)}
.field{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}
.field label{color:var(--text-muted)}
.input{width:100%;background:var(--surface-raised);border:1px solid var(--border-input);
  border-radius:var(--radius-md);box-shadow:var(--shadow-input);padding:16px 12px;
  font-family:var(--font-display);font-size:14px;line-height:1.2em;color:var(--lx-white);
  outline:none;transition:border-color var(--dur-fast) var(--ease-out),
                          background var(--dur-fast) var(--ease-out)}
.input::placeholder{color:var(--text-placeholder)}
.input:hover{border-color:rgba(255,255,255,.2)}
.input:focus{background:rgba(255,255,255,.15);border-color:var(--lx-ice)}
textarea.input{min-height:100px;resize:vertical}
select.input{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-placeholder) 50%),
                   linear-gradient(135deg,var(--text-placeholder) 50%,transparent 50%);
  background-position:calc(100% - 20px) 24px,calc(100% - 14px) 24px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
select.input option{background:var(--lx-indigo);color:var(--lx-white)}
.form__status{font-size:13px;color:var(--lx-ice);min-height:18px}
.cta__glow{width:100%;height:4px;
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.7) 0%,var(--lx-ice) 51%,rgba(var(--accent-rgb),.7) 100%)}
.cta__art{width:100%;max-width:var(--content-max)}
.cta__art img{width:100%;height:auto}

/* ---------- CHAT WIDGET ---------- */
.chat{position:fixed;right:24px;bottom:24px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;
  gap:0}
.chat__bubble{background:rgba(var(--accent-rgb),.9);color:var(--text-on-accent);
  border:1.5px solid var(--lx-white);border-radius:var(--radius-pill);padding:12px 24px;
  text-align:center;box-shadow:var(--shadow-btn-primary);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:.001;transform:translateY(20px);
  animation:bubbleIn 700ms var(--ease-out) 4.5s forwards;
  transition:transform var(--dur-base) var(--ease-out)}
@keyframes bubbleIn{to{opacity:1;transform:translateY(0)}}
.chat:hover .chat__bubble{transform:translateY(-4px)}
.chat__avatar{width:144px;height:150px;flex:none;pointer-events:none}
.chat__avatar video{width:100%;height:100%;object-fit:cover;border-radius:999px}
.chat__avatar img{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.5))}

/* ---------- SCROLL REVEAL ---------- */
[data-reveal]{opacity:.001;transform:translateY(20px);
  transition:opacity 900ms var(--ease-out),transform 900ms var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}
.words span{display:inline-block;opacity:.001;filter:blur(10px);transform:translateY(10px)}
.words.is-in span{animation:wordIn 800ms var(--ease-out) forwards}
@keyframes wordIn{to{opacity:1;filter:blur(0);transform:translateY(0)}}

/* ---------- VISIBILITY HELPERS ---------- */
.only-mobile{display:none}

/* ============================================================
   TABLET — 810 to 1199.98px
   ============================================================ */
@media (max-width:1199.98px){
  .svc-grid{flex-direction:column}
  .svc-grid .svc{flex:none}
  .calc{grid-template-columns:1fr}
  .calc__col + .calc__col{border-left:0;border-top:1px solid var(--border-input)}
  .faq-layout{flex-direction:column}
  .faq-aside{position:static;flex:none;width:100%}
  .cta__body{flex-direction:column}
  .mq--shots img{width:340px}
}

/* ============================================================
   MOBILE — up to 809.98px
   ============================================================ */
@media (max-width:809.98px){
  .only-mobile{display:revert}
  .only-desktop{display:none}

  .nav__inner{justify-content:space-between}

  .hero{padding:120px var(--gutter) 0;gap:var(--space-9)}
  .hero__head{gap:var(--space-8)}
  .hero__cta{width:100%;flex-direction:column;gap:var(--space-4)}
  .hero__cta .btn{width:100%}
  /* wings adapted for mobile — small accents tucked into the side edges */
  .hero__orn{width:190px;top:-24px}
  .hero__orn--l{left:-140px}
  .hero__orn--r{right:-140px}
  .hero__rows{gap:var(--space-5)}

  .mq--shots .mq__track{gap:var(--space-5)}
  .mq--shots img{width:320px;border-radius:var(--radius-lg)}
  .mq--logos .mq__track{gap:var(--space-10)}
  .mq--logos img{height:18px}
  .mq--logos{-webkit-mask:none;mask:none}

  .work-grid{grid-template-columns:1fr;gap:var(--space-11)}
  .work__frame{border-radius:var(--radius-lg)}
  .work__arrow{width:57px;height:56px}

  .blog-grid{grid-template-columns:1fr;gap:var(--space-11)}

  .statement{padding:32px 20px;border-radius:var(--radius-2xl)}

  .tcard{width:340px;padding:32px;gap:var(--space-9)}
  .tcard__body{gap:var(--space-9)}
  .tmq .mq__track{gap:var(--space-5)}
  .tmq{-webkit-mask:none;mask:none}

  .form__row{flex-direction:column}
  .form{padding:24px;gap:var(--space-7)}
  .cta{padding:40px var(--gutter) 0;gap:var(--space-10)}
  .cta__actions{flex-direction:column;width:100%}
  .cta__actions > *{width:100%}

  .chat{right:12px;bottom:12px;gap:0}
  .chat__avatar{width:96px;height:100px}
  .chat__bubble{padding:10px 18px;font-size:13px}

  /* Framer's mobile reorder — pricing statement drops below the calculator */
  .page{display:flex;flex-direction:column}
  /* mobile section order mirrors the desktop DOM order
     (svc-mobile stands in for the only-desktop services grid) */
  .order-hero{order:1}
  #cases-home{order:2}
  .order-svc-mobile{order:3}
  .order-os{order:4}
  .order-calc{order:5}
  .order-proof{order:6}
  .order-faq{order:7}
  .order-blog{order:8}
  .order-cta{order:9}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
  .words span{opacity:1;filter:none;transform:none}
  .hero__orn,.nav,.chat__bubble{opacity:1;transform:none}
  .mq__track{animation:none}
}

/* ============================================================
   INTERACTION STATES
   ============================================================ */

/* nav — condenses and solidifies once you leave the hero */
.nav.is-scrolled{background:rgba(1,16,20,.92);
  border-bottom-color:var(--border-card)}
.nav.is-scrolled .nav__inner{padding-block:8px}
.nav__inner{transition:padding var(--dur-base) var(--ease-out)}
.nav{transition:background var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out)}
.nav__links a[data-active]{color:var(--lx-ice)}
.nav__links a[data-active]::after{right:0}
.nav__drawer a[data-active]{color:var(--lx-ice)}

/* hero ornaments — parallax on the inner image so the entrance
   animation on the wrapper stays untouched */
.hero__orn img{transform:translateY(var(--par,0));
  transition:transform 120ms linear;will-change:transform}

/* marquee — grab cursor and no text selection while dragging */
.tmq .mq__track{user-select:none;-webkit-user-select:none;touch-action:pan-y}
.mq__track.is-dragging{cursor:grabbing;animation-play-state:paused}
.mq__track.is-dragging *{pointer-events:none}

/* FAQ — animated open/close */
.faq__panel{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 420ms var(--ease-out)}
.faq__panel > div{overflow:hidden;min-height:0}
details.faq.is-open .faq__panel{grid-template-rows:1fr}
details.faq summary{border-radius:var(--radius-md)}

/* sliders — filled portion of the track */
input[type=range]::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,var(--lx-ice) 0 var(--fill,0%),
                             rgba(255,255,255,.1) var(--fill,0%) 100%)}
input[type=range]::-moz-range-track{
  background:linear-gradient(90deg,var(--lx-ice) 0 var(--fill,0%),
                             rgba(255,255,255,.1) var(--fill,0%) 100%)}

/* calculator numbers — tabular so tweening doesn't jitter the layout */
.stat__num,.ctrl__val{font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1}

/* form validation */
.input.is-invalid{border-color:#fca5a5;background:rgba(252,165,165,.06)}
.input.is-invalid:focus{border-color:#fca5a5}
.form__status[data-state=error]{color:#fca5a5}
.form__status[data-state=busy]{color:var(--text-muted)}
.form__status[data-state=ok]{color:var(--lx-ice)}
.btn[data-busy]{opacity:.7;pointer-events:none}
.btn[disabled]{cursor:default}

/* work + service cards — media lift on hover */
.work__frame img{transition:transform 700ms var(--ease-out)}
.work:hover .work__frame img{transform:scale(1.03)}
.post__frame img{transition:transform 700ms var(--ease-out)}
.post:hover .post__frame img{transform:scale(1.03)}

@media (prefers-reduced-motion:reduce){
  .faq__panel{transition:none}
  .hero__orn img{transform:none}
  .work:hover .work__frame img,
  .post:hover .post__frame img,
  .svc:hover .svc__media img{transform:none}
}

/* ============================================================
   LUXERA — PAGE COMPONENTS
   Layouts used by the inner pages. Same tokens, no new values.
   ============================================================ */

/* ---------- SUB-PAGE HERO ---------- */
.subhero{position:relative;overflow:clip;padding:180px var(--gutter) var(--space-13);
  text-align:center}
.subhero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 0%,rgba(var(--accent-rgb),.13),transparent 70%)}
.subhero__inner{position:relative;max-width:var(--measure-max);margin-inline:auto;
  display:flex;flex-direction:column;align-items:center;gap:var(--space-6)}
.subhero__lede{max-width:640px}

.crumbs{display:flex;align-items:center;gap:var(--space-3);justify-content:center;
  color:var(--text-subtle)}
.crumbs a{transition:color var(--dur-fast) var(--ease-out)}
.crumbs a:hover{color:var(--lx-ice)}
.crumbs span[aria-hidden]{opacity:.5}

/* ---------- META ROW ---------- */
.meta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3)}
.chip{display:inline-flex;align-items:center;gap:var(--space-2);
  background:var(--surface-raised);border:1px solid var(--border-input);
  border-radius:var(--radius-full);padding:8px 16px;color:var(--text-muted)}
.chip--accent{background:var(--surface-accent-dim);border-color:var(--lx-ice);
  color:var(--lx-ice)}

/* ---------- PROSE ---------- */
.prose{max-width:var(--measure-max);margin-inline:auto;display:flex;
  flex-direction:column;gap:var(--space-7)}
.prose h2{margin-top:var(--space-9)}
.prose h3{margin-top:var(--space-7)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul{display:flex;flex-direction:column;gap:var(--space-4)}
.prose li{display:flex;gap:var(--space-5);align-items:flex-start}
.prose li::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--lx-ice);margin-top:.55em;
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.12)}
.prose blockquote{border-left:2px solid var(--lx-ice);padding:var(--space-3) 0
  var(--space-3) var(--space-8);margin:var(--space-5) 0}
.prose img{width:100%;border-radius:var(--radius-2xl);border:2px solid var(--border-card);
  box-shadow:var(--shadow-card)}
.prose a:not(.btn){color:var(--lx-ice);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}

/* ---------- FEATURE / VALUE CARDS ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--space-6)}
.tile-card{background:var(--surface-card);border:2px solid var(--border-card);
  border-radius:var(--radius-2xl);box-shadow:var(--shadow-card);padding:var(--space-9);
  display:flex;flex-direction:column;gap:var(--space-4);
  transition:border-color var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out)}
.tile-card:hover{border-color:var(--border-accent);transform:translateY(-4px)}
.tile-card__num{font-family:var(--font-mono);font-size:12px;color:var(--lx-ice);
  opacity:.7;letter-spacing:.08em}

/* ---------- STAT GRID ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--space-6)}
.stat-card{background:var(--surface-card);border:2px solid var(--border-card);
  border-radius:var(--radius-2xl);box-shadow:var(--shadow-card);padding:var(--space-9);
  display:flex;flex-direction:column;gap:var(--space-3);text-align:left}
.stat-card__val{font-size:48px;font-weight:500;line-height:1;color:var(--lx-ice);
  letter-spacing:var(--ls-h2);text-shadow:var(--glow-text);
  font-variant-numeric:tabular-nums}
.stat-card__lab{font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted)}

/* ---------- CASE STUDY MINI CARDS ---------- */
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:var(--space-6);max-width:var(--content-max);margin-inline:auto}
.case-mini{display:flex;flex-direction:column;background:var(--surface-card);
  border:2px solid var(--border-card);border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-card);overflow:hidden;
  transition:border-color var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out)}
.case-mini:hover{border-color:var(--border-accent);transform:translateY(-4px)}
.case-mini__media{position:relative;aspect-ratio:16/9;overflow:hidden;
  border-bottom:2px solid var(--border-card);background:var(--surface-accent-dim)}
.case-mini__media img{width:100%;height:100%;object-fit:cover;display:block}
.case-mini__tag{position:absolute;top:var(--space-4);left:var(--space-4);
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lx-ice);background:rgba(6,12,20,.72);
  border:1px solid var(--border-card);border-radius:var(--radius-full);
  padding:6px 12px}
.case-mini__body{display:flex;flex-direction:column;gap:var(--space-5);
  padding:var(--space-8)}
.case-mini__title{color:var(--text-on-dark)}
.case-mini__metrics{display:flex;gap:var(--space-8);flex-wrap:wrap;margin-top:auto}
.case-mini__metric{display:flex;flex-direction:column;gap:var(--space-1)}
.case-mini__val{font-size:34px;font-weight:500;line-height:1;color:var(--lx-ice);
  letter-spacing:var(--ls-h2);text-shadow:var(--glow-text);
  font-variant-numeric:tabular-nums}
.case-mini__lab{font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted)}

/* ---------- merged case-study + testimonial ("pcase") — service pages only ---------- */
/* proof cases live in ONE bordered container; rows are divided, not separate
   cards, and the image side alternates (odd = right, even = left). */
.pcase-list{display:flex;flex-direction:column;gap:0;
  max-width:var(--content-max);margin:var(--space-10) auto 0;
  background:var(--surface-card);border:2px solid var(--border-card);
  border-radius:var(--radius-3xl);overflow:hidden;box-shadow:var(--shadow-card)}
.pcase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-10);
  align-items:stretch;padding:var(--space-10)}
.pcase + .pcase{border-top:2px solid var(--border-card)}
/* even rows: image on the left, copy on the right (grid-row:1 keeps them on the
   same row — without it, auto-placement bumps the media to a second row) */
.pcase:nth-child(even) .pcase__copy{grid-column:2;grid-row:1}
.pcase:nth-child(even) .pcase__media{grid-column:1;grid-row:1}
.pcase__copy{display:flex;flex-direction:column;gap:var(--space-6);min-width:0;
  justify-content:center}
.pcase__tag{align-self:flex-start;font-family:var(--font-display);font-size:var(--fs-body);font-weight:400;
  line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--lx-ice);
  background:var(--surface-accent-dim);border:1px solid var(--border-card);
  border-radius:var(--radius-full);padding:6px 12px}
.pcase__title{color:var(--text-primary)}
.pcase__metrics{display:flex;gap:var(--space-9);flex-wrap:wrap}
.pcase__quote{margin:0;padding-top:var(--space-6);border-top:1px solid var(--border-card);
  display:flex;flex-direction:column;gap:var(--space-5)}
.pcase__quote blockquote{margin:0;color:var(--text-body)}
.pcase__author{display:flex;align-items:center;gap:var(--space-5)}
.pcase__author img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
.pcase__author-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.pcase__media{overflow:hidden;background:var(--surface-accent-dim);min-height:280px;
  border-radius:var(--radius-2xl);
  /* image inset 32px from the row's top / outer / bottom edges (row padding = --space-10);
     the inner side keeps the gap from the copy column */
  margin:calc(32px - var(--space-10)) calc(32px - var(--space-10)) calc(32px - var(--space-10)) 0}
/* even rows: the 32px inset is on the LEFT (outer) edge instead of the right */
.pcase:nth-child(even) .pcase__media{
  margin:calc(32px - var(--space-10)) 0 calc(32px - var(--space-10)) calc(32px - var(--space-10))}
.pcase__media img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:809.98px){
  .pcase{grid-template-columns:1fr;gap:var(--space-7);padding:var(--space-7)}
  /* single column: drop the alternation, image on top for every row */
  .pcase:nth-child(even) .pcase__copy,
  .pcase:nth-child(even) .pcase__media{grid-column:1;grid-row:auto}
  .pcase__media{order:-1;min-height:0;aspect-ratio:16/10}
  /* 32px inset on the top / sides; the bottom keeps the gap above the copy */
  .pcase__media,
  .pcase:nth-child(even) .pcase__media{
    margin:calc(32px - var(--space-7)) calc(32px - var(--space-7)) 0 calc(32px - var(--space-7))}
}

/* ---------- SPLIT ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);
  align-items:center}
.split__media img{width:100%;border-radius:var(--radius-3xl);
  border:2px solid var(--border-card);box-shadow:var(--shadow-card)}
.split__copy{display:flex;flex-direction:column;gap:var(--space-6)}
.split--reverse .split__media{order:2}

/* ---------- CASE STUDY COVER ---------- */
.cover{width:100%;max-width:var(--content-max);margin-inline:auto;
  border:2px solid var(--border-card);border-radius:var(--radius-3xl);overflow:hidden;
  box-shadow:var(--shadow-glow-card)}
.cover img{width:100%;aspect-ratio:1.4;object-fit:cover}

/* ---------- PERSON CARD ---------- */
.person{display:flex;align-items:center;gap:var(--space-6);
  background:var(--surface-card-alpha);border:2px solid var(--border-card);
  border-radius:var(--radius-2xl);box-shadow:var(--shadow-card);padding:var(--space-8)}
.person img{width:72px;height:72px;border-radius:50%;object-fit:cover;
  object-position:center top;flex:none}

/* ---------- NEXT LINK ---------- */
.next{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);
  background:var(--surface-card);border:2px solid var(--border-card);
  border-radius:var(--radius-2xl);box-shadow:var(--shadow-card);padding:var(--space-9);
  transition:border-color var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out)}
.next:hover{border-color:var(--border-accent);transform:translateY(-3px)}
.next__label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:var(--space-2)}
.next__arrow{width:40px;height:40px;color:var(--lx-ice);flex:none;
  transition:transform var(--dur-base) var(--ease-out)}
.next:hover .next__arrow{transform:translateX(6px)}

/* ---------- CONTACT PANELS ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-7);
  align-items:start;max-width:var(--content-max);margin-inline:auto}
.panel{background:var(--surface-card-alpha);border:2px solid var(--border-card);
  border-radius:var(--radius-2xl);box-shadow:var(--shadow-card);padding:var(--space-9);
  display:flex;flex-direction:column;gap:var(--space-6)}
.panel__row{display:flex;align-items:center;gap:var(--space-5);
  padding-block:var(--space-5);border-bottom:1px solid var(--border-faint)}
.panel__row:last-child{border-bottom:0;padding-bottom:0}
.panel__icon{width:40px;height:40px;border-radius:var(--radius-md);flex:none;
  background:var(--surface-accent-dim);border:1px solid var(--border-card);
  display:flex;align-items:center;justify-content:center;color:var(--lx-ice)}

/* ---------- ARTICLE ---------- */
.article-meta{display:flex;flex-wrap:wrap;gap:var(--space-5);justify-content:center;
  color:var(--text-subtle)}
.article-meta span{display:inline-flex;align-items:center;gap:var(--space-2)}

/* ---------- SERVICE / POST INDEX GRIDS ---------- */
.index-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--space-8)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1199.98px){
  .split{grid-template-columns:1fr;gap:var(--space-9)}
  .split--reverse .split__media{order:0}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:809.98px){
  .subhero{padding:120px var(--gutter) var(--space-11)}
  .tile-card,.stat-card,.panel{padding:var(--space-8)}
  .stat-card__val{font-size:36px}
  .case-mini__body{padding:var(--space-7)}
  .case-mini__val{font-size:30px}
  .person{flex-direction:column;text-align:center}
  .next{flex-direction:column;align-items:flex-start;gap:var(--space-5)}
  .cover{border-radius:var(--radius-lg)}
}

/* ============================================================
   PRODUCTION-MATCHED COMPONENTS  (added after the audit)
   ============================================================ */

/* ---------- NAV DROPDOWN (Services has no href in production) ---------- */
.nav__item{position:relative}
.nav__trigger{color:var(--text-muted);cursor:pointer;display:inline-flex;align-items:center;
  gap:var(--space-2);font-family:var(--font-display);
  transition:color var(--dur-fast) var(--ease-out)}
.nav__trigger:hover,.nav__item[data-open=true] .nav__trigger{color:var(--lx-ice)}
.nav__trigger svg{width:10px;height:6px;transition:transform var(--dur-base) var(--ease-out)}
.nav__item[data-open=true] .nav__trigger svg{transform:rotate(180deg)}
/* Services mega-menu — matches the live two-column panel */
.nav__mega{position:fixed;top:74px;left:50%;z-index:49;
  width:min(1160px,calc(100vw - 48px));
  transform:translateX(-50%) translateY(-8px);
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,0.88fr);
  background:var(--surface-card);border:1px solid var(--border-card);
  border-radius:var(--radius-3xl);
  box-shadow:none;
  padding:var(--space-12) var(--space-11);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),
             visibility var(--dur-base)}
/* invisible bridge over the gap so hover survives trigger -> panel */
.nav__mega::before{content:"";position:absolute;left:0;right:0;top:-34px;height:34px}
.nav__item[data-open=true] .nav__mega{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0)}
.nav__mega a::after{display:none}

.nav__mega-services{display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-4);min-height:312px;padding-right:var(--space-10)}
.nav__svc{display:block;padding:var(--space-5) var(--space-5);border-radius:var(--radius-lg);
  transition:background var(--dur-fast) var(--ease-out)}
.nav__svc-explore{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);text-transform:uppercase;font-size:11px;letter-spacing:.09em;
  color:var(--lx-ice);opacity:0;transform:translateY(4px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.nav__svc-explore svg{width:13px;height:13px}
.nav__svc:hover .nav__svc-explore,.nav__svc:focus-visible .nav__svc-explore{opacity:1;transform:translateY(0)}
.nav__svc-title{display:block;font-family:var(--font-display);font-size:1.6rem;line-height:1.15;
  color:var(--text-muted);letter-spacing:-.01em;margin:3px 0 5px;
  transition:color var(--dur-fast) var(--ease-out)}
.nav__svc:hover .nav__svc-title,.nav__svc:focus-visible .nav__svc-title{color:var(--lx-ice)}
.nav__svc-desc{display:block;font-size:var(--fs-body);line-height:1.4;color:var(--text-body);
  opacity:0;transform:translateY(4px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.nav__svc:hover .nav__svc-desc,.nav__svc:focus-visible .nav__svc-desc{opacity:1;transform:translateY(0)}

/* right column — decorative AI-readable infrastructure card */
.nav__mega-aside{position:relative;align-self:stretch;overflow:hidden;
  margin:calc(-1*var(--space-12)) calc(-1*var(--space-11)) calc(-1*var(--space-12)) 0;
  border-radius:0 var(--radius-3xl) var(--radius-3xl) 0}
.llms-wrap{position:relative;width:100%}
.llms-card{position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(5,9,18,.92),rgba(1,16,20,.92));
  border:1px solid var(--border-card);border-radius:var(--radius-2xl);
  padding:var(--space-9) var(--space-8);box-shadow:var(--shadow-glow-card)}
.llms-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 82% -12%,rgba(var(--accent-rgb),.10),transparent 60%)}
.llms-code{position:relative;z-index:1;font-family:var(--font-mono);font-size:12.5px;
  line-height:1.6;color:var(--text-body)}
.llms-code p{margin:0 0 9px}
.llms-h1{color:var(--lx-ice)}
.llms-h2{color:var(--text-muted);margin-top:14px !important}
.llms-p{color:var(--text-subtle)}
.llms-list{list-style:none;display:grid;gap:7px;margin:0}
.llms-list li{color:var(--text-subtle)}
.llms-b{color:var(--text-on-dark)}

.llms-badge{position:absolute;z-index:2;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:var(--lx-deep);border:1px solid var(--border-card);
  box-shadow:none}
.llms-badge svg{width:23px;height:23px}
.llms-badge--openai{top:-18px;left:-20px;background:#fff}
.llms-badge--openai svg{color:#0b0b0b}
.llms-badge--spark{top:20px;right:-22px;background:linear-gradient(140deg,#ff9d4d,#ff5f1f)}
.llms-badge--spark svg{color:#fff}
.llms-badge--framer{bottom:34px;left:-24px}
.llms-badge--framer svg{color:var(--lx-ice)}
.llms-badge--claude{bottom:-18px;right:30px;background:#141414}
.llms-badge--claude svg{color:#ff8a5c}
.nav__drawer .nav__sub{display:grid;gap:2px;padding-left:var(--space-5);
  border-left:1px solid var(--border-card);margin:var(--space-2) 0}
.nav__drawer .nav__sub a{display:block;font-size:15px;color:var(--text-on-dark);padding:8px 0}
.nav__drawer .nav__sub a small{display:block;font-size:13px;color:var(--text-subtle);margin-top:2px}

/* ---------- PHASES / TIMELINE ---------- */
.phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--space-6);margin-top:var(--space-9)}
.phase{background:var(--surface-card);border:2px solid var(--border-card);
  border-radius:var(--radius-2xl);box-shadow:var(--shadow-card);padding:var(--space-9);
  display:flex;flex-direction:column;gap:var(--space-4);
  transition:border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.phase:hover{border-color:var(--border-accent);transform:translateY(-4px)}
.phase__days{display:inline-flex;align-self:flex-start;align-items:center;
  background:var(--surface-accent-dim);border:1px solid var(--border-card);
  border-radius:var(--radius-full);padding:6px 14px;
  font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--lx-ice)}

/* ---------- FEATURE CARDS (three-up on service pages) ---------- */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--space-6);margin-top:var(--space-9)}
.feature{background:var(--surface-card);border:2px solid var(--border-card);
  border-radius:var(--radius-2xl);box-shadow:var(--shadow-card);padding:var(--space-9);
  display:flex;flex-direction:column;gap:var(--space-4);
  transition:border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.feature:hover{border-color:var(--border-accent);transform:translateY(-4px)}

/* ---------- PROBLEM BLOCK ---------- */
.problem{max-width:var(--measure-max);margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;gap:var(--space-7)}

/* ---------- CASE STUDY ---------- */
.case-hero{padding:180px var(--gutter) var(--space-11);text-align:center;position:relative;
  overflow:clip}
.case-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 0%,rgba(var(--accent-rgb),.13),transparent 70%)}
.case-hero h1{position:relative;max-width:var(--content-max);margin-inline:auto}
.case-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-7);
  max-width:var(--measure-max);margin:var(--space-11) auto 0;text-align:left}
.case-meta__k{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:var(--space-3)}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);
  max-width:var(--content-max);margin-inline:auto}
.gallery img{width:100%;aspect-ratio:1.333;object-fit:cover;
  border:2px solid var(--border-card);border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-card);transition:transform 700ms var(--ease-out)}
.gallery img:hover{transform:scale(1.02)}
.results{max-width:var(--measure-max);margin-inline:auto;display:flex;
  flex-direction:column;gap:var(--space-7)}
.results li{display:flex;gap:var(--space-5);align-items:flex-start}
.results li::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--lx-ice);margin-top:.6em;box-shadow:0 0 0 4px rgba(var(--accent-rgb),.12)}
.results strong{color:var(--lx-ice);font-weight:500}

/* ---------- ABOUT ---------- */
.about-hero{display:grid;grid-template-columns:.85fr 1fr;gap:var(--space-12);
  align-items:center;max-width:var(--content-max);margin-inline:auto}
.about-hero__photo{width:100%;border-radius:var(--radius-3xl);border:2px solid var(--border-card);
  box-shadow:var(--shadow-glow-card);aspect-ratio:.75;object-fit:cover;object-position:center top}
.about-hero__copy{display:flex;flex-direction:column;gap:var(--space-6)}
.about-hero__sign{display:flex;flex-direction:column;gap:var(--space-2)}
.about-hero__sign a{color:var(--lx-ice);display:inline-flex;align-items:center;gap:var(--space-2)}

@media (max-width:1199.98px){
  .about-hero{grid-template-columns:1fr;gap:var(--space-9)}
  .case-meta{grid-template-columns:1fr;gap:var(--space-6)}
}
@media (max-width:809.98px){
  .case-hero{padding:120px var(--gutter) var(--space-9)}
  .gallery{grid-template-columns:1fr}
  .nav__mega{display:none}
}

/* ============================================================
   AUDIT-2 CORRECTIONS
   Values read from the production stylesheet.
   ============================================================ */

/* 1 · desktop nav order — production reassigns flex order so About
      renders before Services (DOM order is Work, Services, About…) */
@media (min-width:810px){
  .nav__links{display:flex}
  .nav__links > :nth-child(1){order:0}   /* Work        */
  .nav__links > :nth-child(2){order:2}   /* Services    */
  .nav__links > :nth-child(3){order:1}   /* About       */
  .nav__links > :nth-child(4){order:3}   /* Contact Us  */
  .nav__links > :nth-child(5){order:4}   /* Insights    */
}

/* 9 · logo shrinks on mobile */
@media (max-width:809.98px){
  .nav__logo img{width:108px}
}

/* 2 · statement heading drops to the H2 preset on mobile, not just a smaller H1 */
@media (max-width:809.98px){
  .statement h2{font-size:var(--fs-h2);letter-spacing:var(--ls-h2)}
}

/* 3 · calculator tab indicator slides between tabs */
.tabs{position:relative}
.tabs__pill{position:absolute;top:4px;bottom:4px;left:4px;width:0;
  background:var(--surface-accent-dim);border:1px solid var(--lx-ice);
  border-radius:var(--radius-full);pointer-events:none;
  transition:transform var(--dur-base) var(--ease-out),width var(--dur-base) var(--ease-out)}
.tabs:has(.tabs__pill) .tab[aria-selected=true]{background:none;border-color:transparent;
  box-shadow:none}
.tab{position:relative;z-index:1}

/* 4 · calculator CTA uses its own dark and a tighter halo */
.calc__cta .btn--primary{color:var(--text-on-accent)}

/* 5 · quote block is a fixed height so every card's footer aligns */
.tcard__quote{height:340px;overflow:hidden}
@media (max-width:809.98px){ .tcard__quote{height:264px} }

/* 6 · FAQ row opens to a tight 5px gap between question and answer */
details.faq{display:grid;gap:0;transition:gap var(--dur-base) var(--ease-out),
                                          border-color var(--dur-fast) var(--ease-out)}
details.faq.is-open{gap:5px}

/* 7 · glow bar sits at the top edge of the CTA section */
.cta{position:relative}
.cta__glow{position:absolute;top:0;left:0;right:0;width:auto}

/* 8 · chat: speech tail, blurred backdrop, smaller avatar on mobile */
.chat__stack{display:flex;flex-direction:column;align-items:flex-end;gap:0}
.chat__tail{width:10px;height:12px;margin-right:44px;color:var(--lx-ice);display:block;transform:rotate(180deg)}
.chat__tail svg{width:100%;height:100%;display:block}
.chat__backdrop{position:absolute;inset:-70px -78px -78px auto;width:360px;
  opacity:.2;pointer-events:none;z-index:-1;filter:blur(10px)}
.chat__backdrop img{width:100%;height:100%;object-fit:cover}
@media (max-width:809.98px){
  .chat__avatar{width:96px;height:100px}
  .chat__tail{margin-right:32px}
  .chat__backdrop{width:240px}
}

/* 10 · Design OS mobile gradient stops tighten to 5% / 95% */
@media (max-width:809.98px){
  .os__shot::after{background:linear-gradient(180deg,var(--lx-deep) 0%,
    rgba(1,16,20,0) 5%,rgba(1,16,20,0) 95%,var(--lx-deep) 100%)}
}

/* ============================================================
   ABOUT + PHASES — rebuilt from the published About stylesheet
   ============================================================ */

/* hero card: gradient panel, portrait bleeds off the right edge */
.about-card{position:relative;display:flex;flex-flow:row;align-items:center;gap:var(--space-10);
  width:100%;max-width:var(--content-max);margin-inline:auto;padding:0 0 0 var(--space-10);
  border:2px solid var(--border-card);border-radius:var(--radius-4xl);overflow:clip;
  background:linear-gradient(133deg,var(--lx-deep) 0%,rgba(var(--accent-rgb),.05) 100%);
  box-shadow:var(--shadow-card)}
.about-card__orn{position:absolute;top:-124px;right:-123px;width:437px;height:433px;
  opacity:.1;z-index:0;pointer-events:none}
.about-card__orn svg{width:100%;height:100%;color:var(--lx-ice)}
.about-card__photo{position:absolute;top:0;right:-40px;width:486px;aspect-ratio:.697161;
  object-fit:cover;object-position:center top;z-index:0}
.about-card__copy{position:relative;z-index:1;flex:.6 0 0;width:1px;
  display:flex;flex-flow:column;align-items:flex-start;gap:var(--space-8);
  padding:var(--space-13) 0}
.about-lede{display:flex;flex-flow:column;align-items:flex-start;gap:var(--space-6);width:100%}
.about-body{display:flex;flex-flow:column;align-items:flex-start;gap:var(--space-8);width:100%}
.about-body__text{display:flex;flex-flow:column;gap:var(--space-6);width:100%}
.about-sign{display:flex;flex-flow:row;align-items:center;gap:var(--space-3);width:100%}
.about-sign__name{padding-top:4px}
.about-sign a{display:inline-flex;align-items:center;color:var(--text-muted);
  transition:color var(--dur-fast) var(--ease-out)}
.about-sign a:hover{color:var(--lx-ice)}
.about-sign svg{width:20px;height:20px}

@media (max-width:1199.98px){
  .about-card__photo{width:623px;right:-195px}
}
@media (max-width:809.98px){
  .about-card{flex-flow:column;gap:var(--space-5);padding:var(--space-10) var(--space-6) 0;
    border-radius:var(--radius-3xl)}
  .about-card__orn{width:311px;height:308px}
  .about-card__photo{position:relative;order:2;top:auto;right:auto;width:100%;
    aspect-ratio:1.01875;border-radius:var(--radius-2xl)}
  .about-card__copy{order:0;flex:none;width:100%;padding:0}
  .about-body__text{gap:var(--space-5)}
}

/* phases: ONE divided card, not separate cards */
.phase-card{display:flex;flex-flow:row;width:100%;overflow:clip;
  border:2px solid var(--border-card);border-radius:var(--radius-3xl);
  background:linear-gradient(270deg,var(--lx-deep) 0%,rgba(var(--accent-rgb),.11) 100%);
  box-shadow:var(--shadow-card)}
.phase-col{flex:1 0 0;width:1px;display:flex;flex-flow:column;align-items:center;
  border-right:2px solid var(--border-card)}
.phase-col:last-child{border-right:0}
.phase-day{display:flex;align-items:center;justify-content:center;gap:var(--space-4);width:100%;
  padding:var(--space-8);border-bottom:2px solid var(--border-card)}
.phase-body{flex:1 0 0;display:flex;flex-flow:column;align-items:center;
  gap:var(--space-6);width:100%;padding:var(--space-8)}
.phase-icon{width:40px;height:40px;flex:none;color:var(--lx-ice)}
.phase-icon svg{width:100%;height:100%}
.phase-txt{display:flex;flex-flow:column;align-items:center;gap:var(--space-1);
  width:100%;text-align:center}

@media (max-width:809.98px){
  .phase-card{flex-flow:column;border:0;border-radius:var(--radius-2xl)}
  .phase-col{flex:none;flex-flow:row;width:100%;border-right:0;
    border-bottom:1px solid var(--border-card)}
  .phase-col:last-child{border-bottom:0}
  .phase-day{flex:.15 0 0;width:1px;align-self:stretch;padding:var(--space-8) var(--space-6);
    border-bottom:0;border-right:1px solid var(--border-card)}
  .phase-body{padding:var(--space-8)}
}

/* ============================================================
   CONTACT — rebuilt from the published /contact stylesheet
   ============================================================ */
.contact-page{display:flex;flex-flow:column;align-items:center;gap:var(--space-11);
  width:100%;max-width:var(--container-max);margin-inline:auto;
  padding:160px var(--gutter) var(--space-10)}
.contact-head{display:flex;flex-flow:column;align-items:center;gap:var(--space-8);width:100%}
.contact-head__top{display:flex;flex-flow:column;align-items:center;gap:var(--space-1);width:100%}
.contact-actions{display:flex;flex-flow:row;align-items:center;justify-content:center;
  gap:var(--space-4);width:100%}
.contact-cols{display:flex;flex-flow:row;align-items:flex-start;justify-content:center;
  gap:var(--space-7);width:100%}

.contact-form{flex:1 0 0;width:1px;display:flex;flex-flow:column;align-items:center;
  gap:var(--space-9);padding:var(--space-9);
  background:var(--surface-card-alpha);border:2px solid var(--border-card);
  border-radius:var(--radius-2xl)}
.contact-form__row{display:flex;flex-flow:row;align-items:center;gap:var(--space-7);width:100%}
.contact-field{flex:1 0 0;width:1px;display:flex;flex-flow:column;align-items:flex-start;
  gap:var(--space-1)}
.contact-field--full{width:100%;flex:none;gap:var(--space-3)}

.contact-side{flex:.75 0 0;width:1px;display:flex;flex-flow:column;align-items:center;
  gap:var(--space-9);padding:48px var(--space-9) var(--space-9);
  background:var(--surface-card-alpha);border:2px solid var(--border-card);
  border-radius:var(--radius-2xl)}
.trusted{display:flex;flex-flow:column;align-items:center;gap:var(--space-6);width:100%}
.trusted__row{display:flex;flex-flow:row;align-items:center;gap:var(--space-10);width:100%;
  border-radius:var(--radius-sm);overflow:clip;
  -webkit-mask:linear-gradient(270deg,transparent 0%,#000 20%,#000 80%,transparent 100%);
  mask:linear-gradient(270deg,transparent 0%,#000 20%,#000 80%,transparent 100%)}
.trusted__row img{width:146px;height:18px;object-fit:contain;object-position:left center;
  opacity:.5;flex:none;transition:opacity var(--dur-fast) var(--ease-out)}
.trusted__row img:hover{opacity:.9}
.contact-rule{width:100%;height:1px;background:rgba(255,255,255,.1);flex:none}
.contact-quote{display:flex;flex-flow:column;align-items:center;gap:var(--space-8);width:100%}
.contact-quote__who{display:flex;flex-flow:column;align-items:center;gap:var(--space-5);width:100%}
.contact-quote__who img{width:52px;height:52px;border-radius:999px;object-fit:cover;flex:none}
.contact-quote__meta{display:flex;flex-flow:column;align-items:center;gap:0}

/* footer used on Contact: glow bar + artwork only, no repeated CTA */
.site-footer{position:relative;display:flex;flex-flow:column;align-items:center;
  gap:var(--space-11);width:100%;padding:80px var(--gutter) 0;overflow:hidden;
  background:var(--lx-deep)}
.site-footer__glow{position:absolute;top:0;left:0;right:0;height:4px;z-index:1;
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.7) 0%,var(--lx-ice) 51.1789%,rgba(var(--accent-rgb),.7) 100%)}
.site-footer__art{width:100%;max-width:var(--content-max)}
.site-footer__art img{width:100%;aspect-ratio:3.5641;object-fit:cover}

/* ---------- global footer sitemap ---------- */
.footer{background:var(--lx-deep);border-top:1px solid var(--border-hairline);
  padding:var(--space-13) 0 var(--space-10)}
.footer__inner{display:flex;flex-direction:column;gap:var(--space-11)}
.footer__top{display:flex;flex-direction:column;gap:var(--space-4);max-width:46ch}
.footer__brand img{width:132px;height:auto}
.footer__tagline{color:var(--text-muted);font-size:15px}
.footer__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-9)}
.footer__col{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.footer__col-head{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.09em;
  font-size:12px;color:var(--text-subtle);margin-bottom:var(--space-1)}
.footer__col a{color:var(--text-body);font-size:15px;
  transition:color var(--dur-fast) var(--ease-out)}
.footer__col a:hover{color:var(--lx-ice)}
.footer__wordmark{width:100%}
.footer__wordmark img{display:block;width:100%;height:auto}
.footer__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);
  flex-wrap:wrap;padding-top:var(--space-8);border-top:1px solid var(--border-hairline)}
.footer__legal{color:var(--text-subtle);font-size:13px}
.footer__links{display:flex;gap:var(--space-7);flex-wrap:wrap}
.footer__links a{color:var(--text-subtle);font-size:13px;transition:color var(--dur-fast) var(--ease-out)}
.footer__links a:hover{color:var(--lx-ice)}
.footer__social{color:var(--text-muted);transition:color var(--dur-fast) var(--ease-out)}
.footer__social:hover{color:var(--lx-ice)}
.footer__social svg{width:20px;height:20px}
@media (max-width:809.98px){
  .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
}
@media (max-width:479.98px){
  .footer__cols{grid-template-columns:1fr}
  .footer__bar{flex-direction:column;align-items:flex-start}
}

@media (max-width:1199.98px){
  .contact-cols{flex-flow:column}
  .contact-form,.contact-side{flex:none;width:100%}
  .site-footer{padding:80px var(--space-8) 0}
}
@media (max-width:809.98px){
  .contact-page{gap:var(--space-10);padding:120px var(--gutter) var(--space-10)}
  .contact-head{gap:var(--space-6)}
  .contact-head__top{gap:var(--space-3)}
  .contact-actions{flex-flow:column}
  .contact-actions > *{width:100%}
  .contact-form{padding:var(--space-8);gap:var(--space-8)}
  .contact-form__row{flex-flow:column;gap:var(--space-8)}
  .trusted{gap:var(--space-5)}
  .contact-quote{gap:var(--space-5)}
  .site-footer__art img{aspect-ratio:auto;height:214px;object-fit:cover}
}

/* ============================================================
   CASE STUDY — rebuilt from the published /portfolio/gohype DOM
   ============================================================ */
.case-page{display:flex;flex-flow:column;align-items:center;gap:var(--space-15);
  width:100%;max-width:var(--container-max);margin-inline:auto;
  padding:160px var(--gutter) var(--space-15)}
.case-block{display:flex;flex-flow:column;align-items:center;gap:var(--space-9);
  width:100%;max-width:var(--content-max)}
.case-title{width:100%}
.case-cover{width:100%;border-radius:var(--radius-3xl);overflow:hidden;
  border:2px solid var(--border-card);box-shadow:var(--shadow-card)}
.case-cover img{width:100%;aspect-ratio:1.4;object-fit:cover}

/* meta strip: label above value, divided by vertical rules */
.case-strip{display:flex;flex-flow:row;align-items:stretch;width:100%}
.case-strip__cell{flex:1 0 0;display:flex;flex-flow:column;gap:var(--space-2);
  padding:var(--space-8) var(--space-9)}
.case-strip__rule{width:1px;background:var(--border-card);flex:none}
.case-strip__k{color:var(--lx-white)}
.case-strip__v{color:var(--lx-ice)}

/* before / after comparison */
.compare{position:relative;width:100%;border-radius:var(--radius-3xl);overflow:hidden;
  border:2px solid var(--border-card);box-shadow:var(--shadow-card);
  --split:50%;--thumb:64px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.compare img{display:block;width:100%;aspect-ratio:1.4;object-fit:cover}
.compare__after{position:absolute;inset:0;width:100%;
  clip-path:inset(0 0 0 var(--split))}
.compare__after img{height:100%}
.compare__tag{position:absolute;top:var(--space-8);padding:8px 16px;
  background:rgba(1,16,20,.6);border:1px solid var(--border-card);
  border-radius:var(--radius-full);backdrop-filter:blur(10px);color:var(--lx-ice);z-index:2}
.compare__tag--before{left:var(--space-8)}
.compare__tag--after{right:var(--space-8)}
.compare__handle{position:absolute;top:0;bottom:0;left:var(--split);width:2px;
  background:var(--lx-ice);transform:translateX(-1px);z-index:3;cursor:ew-resize}
.compare__thumb{position:absolute;top:50%;left:50%;width:var(--thumb);height:var(--thumb);
  transform:translate(-50%,-50%);border-radius:999px;background:var(--lx-ice);
  border:1.5px solid var(--lx-white);box-shadow:var(--shadow-btn-primary);
  display:flex;align-items:center;justify-content:center;gap:4px;color:var(--lx-deep)}
.compare__thumb svg{width:18px;height:18px}
.compare:focus-visible{outline:2px solid var(--lx-ice);outline-offset:3px}

/* prose + galleries */
.case-copy{display:flex;flex-flow:column;gap:var(--space-8);width:100%}
.case-gallery{display:flex;flex-flow:column;gap:var(--space-8);width:100%}
.case-gallery img{width:100%;aspect-ratio:1.4;object-fit:cover;
  border-radius:var(--radius-3xl);border:2px solid var(--border-card);
  box-shadow:var(--shadow-card)}
.case-gallery__pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}
.case-results{display:flex;flex-flow:column;gap:var(--space-8);width:100%}
.case-results li{display:flex;gap:var(--space-6);align-items:flex-start}
.case-results li::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;
  background:var(--lx-ice);margin-top:.55em;box-shadow:0 0 0 5px rgba(var(--accent-rgb),.12)}
.case-results strong{color:var(--lx-ice);font-weight:500}

@media (max-width:1199.98px){
  .case-strip{flex-flow:column}
  .case-strip__rule{width:100%;height:1px}
}
@media (max-width:809.98px){
  .case-page{padding:120px var(--gutter) var(--space-13);gap:var(--space-13)}
  .case-cover,.case-gallery img,.compare{border-radius:var(--radius-lg)}
  .case-gallery__pair{grid-template-columns:1fr}
  .compare{--thumb:48px}
  .compare__tag{top:var(--space-5)}
  .compare__tag--before{left:var(--space-5)}
  .compare__tag--after{right:var(--space-5)}
}

.route[hidden]{display:none}

/* Boot: until router.js reveals the active route (it stamps <html data-route>),
   every .route is hidden. The footer and chat launcher aren't routes, so without
   this they'd flash alone under the nav before the hero mounts. Hide them until
   the app is ready so they appear together with the page. */
:root:not([data-route]) .footer,
:root:not([data-route]) .chat{display:none}


/* ---------- services mega preview (one image at a time, swaps on hover) ---------- */
.nav__preview{position:absolute;inset:0;
  opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out)}
.nav__preview img{display:block;width:100%;height:100%;object-fit:cover;
  border:0;border-radius:0;box-shadow:none}
.nav__preview.is-active{opacity:1}


/* ---------- service page hero (2-column, product-right) ---------- */
.svc-hero{position:relative;overflow:clip;min-height:80svh;display:flex;align-items:center;
  padding:var(--space-14) 0 var(--space-13);text-align:center}
.svc-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(52% 60% at 50% 0%,rgba(var(--accent-rgb),.12),transparent 72%),
    linear-gradient(rgba(var(--accent-rgb),.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--accent-rgb),.05) 1px,transparent 1px);
  background-size:100% 100%,42px 42px,42px 42px;
  -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent);
          mask-image:linear-gradient(to bottom,#000 58%,transparent)}
.svc-hero .wrap{position:relative;width:100%}
.svc-hero__grid{display:grid;justify-items:center;position:relative;z-index:1}
.svc-hero__copy{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);
  min-width:0;max-width:820px;margin-inline:auto}
.svc-hero__eyebrow{font-family:var(--font-mono);text-transform:uppercase;
  letter-spacing:.09em;font-size:12px;line-height:1;color:var(--lx-ice)}
.svc-hero__icon{display:block}
.svc-hero__icon img{display:block;width:clamp(116px,13vw,168px);height:auto;
  filter:drop-shadow(0 18px 42px rgba(var(--accent-rgb),.38));
  animation:heroIconFloat 6s ease-in-out infinite}
@keyframes heroIconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){.svc-hero__icon img{animation:none}}
.svc-hero__title{margin:0}
.svc-hero__lede{max-width:52ch;color:var(--text-body)}
.svc-hero__actions{margin-top:var(--space-2)}
.svc-hero__note{color:var(--text-subtle)}
@media (max-width:899.98px){
  .svc-hero{padding-top:var(--space-13)}
  .svc-hero__title{font-size:clamp(2.2rem,7vw,3rem)}
}
/* hero topic decoration — floating accent icon badges (per-service, auto-themed) */
.svc-hero__decor{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(1160px,100%);z-index:0;pointer-events:none}
.svc-deco{position:absolute;display:grid;place-items:center;width:60px;height:60px;
  border-radius:20px;color:rgb(var(--accent-rgb));
  background:linear-gradient(160deg,rgba(var(--accent-rgb),.14),rgba(255,255,255,.02));
  border:1px solid rgba(var(--accent-rgb),.30);
  box-shadow:0 16px 36px -14px rgba(var(--accent-rgb),.6),inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;animation:decoIn .7s var(--ease-out) forwards,decoFloat 7s ease-in-out infinite}
.svc-deco svg{width:27px;height:27px;filter:drop-shadow(0 0 9px rgba(var(--accent-rgb),.5))}
.svc-deco--1{top:2%;left:.5%;animation-delay:.15s,.6s}
.svc-deco--2{top:76%;left:5%;animation-delay:.3s,1.7s}
.svc-deco--3{top:6%;right:.5%;animation-delay:.45s,2.5s}
.svc-deco--4{top:74%;right:4.5%;animation-delay:.6s,3.4s}
@keyframes decoIn{to{opacity:1}}
@keyframes decoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@media (prefers-reduced-motion:reduce){.svc-deco{animation:decoIn .3s var(--ease-out) forwards}}
@media (max-width:1079.98px){.svc-hero__decor{display:none}}

/* ---------- per-service accent — each landing page gets its own colour ----------
   The accent-derived tokens are RE-declared here on the service-route element so
   they recompute from that page's --accent-rgb (declaring them only at :root would
   bake in the ice value and inherit it down regardless of the override).
   Scoped to the page subtree, so the shared header/menu stays brand-ice.
   Hues match the burger-menu service cards for menu↔page cohesion. */
.route[data-route^="/services/"]{
  --accent-rgb: 207, 246, 255;                                   /* default = ice (fallback) */
  --lx-ice: rgb(var(--accent-rgb));

  /* surfaces stay the design-system black (cards, inputs, scrims inherit :root);
     the colour comes from the accent, the tinted text, and the ellipses below */
  --surface-accent-dim: rgba(var(--accent-rgb), 0.12);
  --border-card:   rgba(var(--accent-rgb), 0.16);
  --border-accent: rgba(var(--accent-rgb), 0.26);
  --border-input:  rgba(var(--accent-rgb), 0.22);
  --glow-text:      0 4px 24px rgba(var(--accent-rgb), 0.25);
  --glow-text-hero: 0 4px 24px rgba(var(--accent-rgb), 0.25);
  --shadow-glow-card:   none;
  --shadow-btn-primary: none;

  /* TEXT — tinted toward the hue, high contrast on black (AA-verified) */
  --text-primary:   color-mix(in srgb, rgb(var(--accent-rgb)) 36%, #ffffff);   /* headings   */
  --text-on-dark:   color-mix(in srgb, rgb(var(--accent-rgb)) 22%, #ffffff);   /* card titles */
  --text-body:      color-mix(in srgb, rgb(var(--accent-rgb)) 26%, #c4c9d8);   /* body copy  */
  --text-muted:     color-mix(in srgb, rgb(var(--accent-rgb)) 30%, #9aa1b4);   /* secondary  */
  --text-subtle:    color-mix(in srgb, rgb(var(--accent-rgb)) 30%, #848b9e);   /* tertiary   */
  --text-on-accent: color-mix(in srgb, rgb(var(--accent-rgb)) 16%, #05070c);   /* on accent buttons */

  /* black canvas (design system) + blurred accent ellipses scattered down the page */
  background:
    radial-gradient(760px 520px at 12% 3%,  rgba(var(--accent-rgb), 0.22), transparent 68%),
    radial-gradient(680px 480px at 90% 14%, rgba(var(--accent-rgb), 0.15), transparent 70%),
    radial-gradient(720px 520px at 20% 40%, rgba(var(--accent-rgb), 0.13), transparent 70%),
    radial-gradient(700px 500px at 86% 64%, rgba(var(--accent-rgb), 0.14), transparent 70%),
    radial-gradient(760px 520px at 34% 90%, rgba(var(--accent-rgb), 0.11), transparent 70%),
    #05070e;
  background-repeat: no-repeat;
}
/* per-service palettes — light tints of each Flowninja service-page hue */
.route[data-route="/services/aeo"]{--accent-rgb: 184, 255, 230}   /* mint green — web-design (flowtransform) */
.route[data-route="/services/uxax"]{--accent-rgb: 130, 180, 255}  /* azure blue — webflow-development (flowbuild) */
.route[data-route="/services/ds"]{--accent-rgb: 255, 140, 180}    /* rose pink  — webflow-maintenance (flowoperate) */
.route[data-route="/services/bot"]{--accent-rgb: 170, 130, 255}   /* violet     — growth (flowgrowth) */

/* global footer picks up the active service's theme. The footer lives OUTSIDE the
   routes (always visible), so it can't inherit the route's accent — but the router
   mirrors the active route onto <html data-route>, so we key off that instead.
   Tokens are re-declared on .footer itself so they recompute from the winning
   --accent-rgb (same element → the derived var()s pick up the per-service override). */
:root[data-route^="/services/"] .footer{
  --accent-rgb: 207, 246, 255;                 /* default = ice (fallback) */
  --lx-ice: rgb(var(--accent-rgb));
  --text-body:   color-mix(in srgb, rgb(var(--accent-rgb)) 26%, #c4c9d8);
  --text-muted:  color-mix(in srgb, rgb(var(--accent-rgb)) 30%, #9aa1b4);
  --text-subtle: color-mix(in srgb, rgb(var(--accent-rgb)) 30%, #848b9e);
  border-top-color: rgba(var(--accent-rgb), 0.14);
  background:
    radial-gradient(680px 320px at 50% 0%, rgba(var(--accent-rgb), 0.13), transparent 70%),
    #05070e;
  background-repeat: no-repeat;
}
:root[data-route="/services/aeo"]  .footer{--accent-rgb: 184, 255, 230}   /* mint green */
:root[data-route="/services/uxax"] .footer{--accent-rgb: 130, 180, 255}   /* azure blue */
:root[data-route="/services/ds"]   .footer{--accent-rgb: 255, 140, 180}   /* rose pink  */
:root[data-route="/services/bot"]  .footer{--accent-rgb: 170, 130, 255}   /* violet     */

/* ---------- service page: trusted carousel ---------- */
.svc-trusted{padding-block:var(--space-11)}
.svc-trusted__label{text-align:center;color:var(--text-subtle);
  font-family:var(--font-display);font-size:var(--fs-body);letter-spacing:var(--ls-body);
  line-height:var(--lh-body);margin-bottom:var(--space-8)}

/* ---------- service page: hero booking / scarcity pill ---------- */
.svc-hero__note{display:inline-flex;align-items:center;gap:var(--space-3)}

/* ---------- service page: guarantee promises band ---------- */
.svc-promises{padding-block:var(--space-9)}
.promise-row{display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--space-4) var(--space-8);max-width:var(--content-max);margin-inline:auto}
.promise{display:inline-flex;align-items:center;gap:var(--space-3);
  font-size:15px;font-weight:500;color:var(--text-body)}
.promise svg{width:19px;height:19px;flex:none;color:var(--lx-ice)}
.promise strong{color:var(--text-on-dark);font-weight:600}

/* ---------- service page: aggregate results strip ---------- */
.svc-results{padding-block:var(--space-9)}
.results-strip{display:grid;grid-template-columns:repeat(4,1fr);
  max-width:var(--content-max);margin-inline:auto;
  border:1px solid var(--border-card);border-radius:var(--radius-2xl);
  background:var(--surface-card);overflow:hidden}
.rstat{padding:var(--space-8) var(--space-5);text-align:center;
  border-left:1px solid var(--border-card)}
.rstat:first-child{border-left:0}
.rstat__val{display:block;font-family:var(--font-display);font-weight:500;
  font-size:clamp(30px,4vw,42px);line-height:1;color:var(--lx-ice);
  font-variant-numeric:tabular-nums;text-shadow:var(--glow-text)}
.rstat__unit{font-size:.5em;color:var(--text-muted)}
.rstat__lab{display:block;margin-top:var(--space-3);font-size:13px;color:var(--text-muted)}
@media (max-width:720px){
  .results-strip{grid-template-columns:repeat(2,1fr)}
  .rstat:nth-child(3){border-left:0}
  .rstat:nth-child(n+3){border-top:1px solid var(--border-card)}
}
@media (max-width:430px){
  .results-strip{grid-template-columns:1fr}
  .rstat{border-left:0;border-top:1px solid var(--border-card)}
  .rstat:first-child{border-top:0}
}

/* ---------- service page: pricing + what's included ---------- */
.svc-pricing .pricing{display:grid;grid-template-columns:minmax(0,0.84fr) minmax(0,1.16fr);
  margin-top:var(--space-10);border:2px solid var(--border-accent);border-radius:var(--radius-3xl);
  overflow:hidden;background:var(--surface-card);box-shadow:var(--shadow-glow-card)}
.pricing__head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5);
  padding:var(--space-11);border-right:1px solid var(--border-faint)}
.pricing__eyebrow{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.09em;
  font-size:12px;color:var(--lx-ice)}
.pricing__price{display:flex;align-items:baseline;gap:var(--space-3)}
.pricing__amount{font-family:var(--font-display);font-size:clamp(2.8rem,5.5vw,4rem);line-height:1;
  color:var(--lx-white)}
.pricing__term{color:var(--text-subtle)}
.pricing__lede{color:var(--text-body);max-width:44ch}
.pricing__head .btn{margin-top:var(--space-2)}
.pricing__note{color:var(--text-subtle);font-size:var(--fs-h5-sm)}
.pricing__incl{padding:var(--space-11);display:flex;flex-direction:column;gap:var(--space-6);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.035),transparent 60%)}
.pricing__incl-title{color:var(--text-muted);font-family:var(--font-mono);text-transform:uppercase;
  letter-spacing:.09em;font-size:12px}
.incl-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5)}
.incl-list li{position:relative;padding-left:var(--space-8);color:var(--text-body);line-height:1.5}
.incl-list li strong{color:var(--lx-white);font-weight:600}
.incl-list li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;
  background:var(--lx-ice);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- service page: showcase of screens ---------- */
.svc-showcase .sec-title{margin-bottom:var(--space-7)}

/* ---------- service page: full-bleed portfolio slider ----------
   One edge-to-edge screenshot at a time. No fixed arrows — the left half is
   "previous", the right half is "next", and on hover-capable devices the
   pointer itself turns into a chevron that follows the mouse and points the
   way it will move. */
.shots{position:relative;width:100%;overflow:hidden}
.shots__viewport{width:100%}
.shots__track{display:flex;transition:transform .55s var(--ease-out);will-change:transform}
.shots__slide{flex:0 0 100%;min-width:0}
.shots__slide img{display:block;width:100%;aspect-ratio:1.333;object-fit:cover}

/* two invisible click halves — left = previous, right = next */
.shots__zone{position:absolute;top:0;bottom:0;z-index:2;width:50%;
  border:0;background:transparent;padding:0;-webkit-tap-highlight-color:transparent}
.shots__zone--prev{left:0}
.shots__zone--next{right:0}

/* the pointer-following custom cursor (a direction chevron in a dark disc) */
.shots__cursor{position:absolute;top:0;left:0;z-index:3;pointer-events:none;
  width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  display:grid;place-items:center;color:#fff;background:rgba(10,14,20,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity var(--dur-base) var(--ease-out)}
.shots__cursor.is-on{opacity:1}
.shots__cursor svg{width:30px;height:30px;transition:transform var(--dur-fast) var(--ease-out)}
.shots__cursor.is-prev svg{transform:scaleX(-1)}

/* hide the OS cursor over the slider once the follower is live */
@media (hover:hover){
  .shots--ready,.shots--ready .shots__zone{cursor:none}
}

/* dots overlaid at the bottom, no extra layout height */
.shots__dots{position:absolute;left:0;right:0;bottom:var(--space-6);z-index:2;
  display:flex;gap:var(--space-3);justify-content:center;pointer-events:none}
.shots__dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;pointer-events:auto;
  background:rgba(255,255,255,.4);
  transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.shots__dot[aria-current="true"]{background:#fff;transform:scale(1.35)}

/* touch devices have no pointer to follow — keep static tap halves */
@media (hover:none){
  .shots__cursor{display:none}
  .shots__zone{cursor:pointer}
}
@media (max-width:640px){
  .shots__cursor{width:52px;height:52px;margin:-26px 0 0 -26px}
  .shots__cursor svg{width:26px;height:26px}
}

/* ---------- service page: low-friction soft CTA band ---------- */
.svc-soft{display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);flex-wrap:wrap;
  padding:var(--space-8) var(--space-9);border:1px solid var(--border-accent);border-radius:var(--radius-2xl);
  background:var(--surface-card);box-shadow:var(--shadow-glow-card)}
.svc-soft__copy{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.svc-soft__copy h3{color:var(--text-on-dark)}
.svc-soft__copy p{color:var(--text-muted);max-width:52ch}
.svc-soft__cta{flex:none}

@media (max-width:809.98px){
  .svc-pricing .pricing{grid-template-columns:1fr}
  .pricing__head{border-right:0;border-bottom:1px solid var(--border-faint)}
  .pricing__head .btn{width:100%}
}
@media (max-width:640px){
  .svc-soft{flex-direction:column;align-items:flex-start;padding:var(--space-7)}
  .svc-soft__cta{width:100%;justify-content:center}
}


/* ---------- prose: styles CMS-authored (markdown -> unclassed) elements; existing classed copy is untouched ---------- */
.prose > :not([class]) + :not([class]){margin-top:var(--space-8)}
.prose h2:not([class]){font-family:var(--font-display);font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:var(--ls-h2);color:var(--text-primary);text-transform:capitalize}
.prose h3:not([class]){font-family:var(--font-display);font-size:var(--fs-h3);line-height:var(--lh-tight);letter-spacing:var(--ls-h2);color:var(--text-primary)}
.prose p:not([class]){font-family:var(--font-display);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--text-body)}
.prose > p:not([class]):first-child{font-size:var(--fs-lead);line-height:var(--lh-tight);letter-spacing:var(--ls-h4)}
.prose ul:not([class]),.prose ol:not([class]){padding-left:var(--space-8);color:var(--text-body);font-size:var(--fs-body);line-height:var(--lh-body);display:flex;flex-direction:column;gap:var(--space-3)}
.prose blockquote:not([class]){font-family:var(--font-display);font-size:var(--fs-lead);line-height:var(--lh-tight);color:var(--text-primary);border-left:2px solid var(--border-accent);padding-left:var(--space-6)}
.prose a{color:var(--lx-ice)}
.prose :not([class]) strong{color:var(--text-on-dark)}
.prose img:not([class]){width:100%;border-radius:var(--radius-2xl);margin-block:var(--space-8)}