/* fonts (generated from src/fonts.mjs) */
@font-face{font-family:'Montserrat';src:url(/assets/fonts/montserrat-latin-var.6438d7b8ea.woff2) format('woff2');font-weight:500 700;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat Fallback';src:local('Arial');size-adjust:112%;ascent-override:86%;descent-override:22%}
@font-face{font-family:'Inter';src:url(/assets/fonts/inter-latin-var.c940764593.woff2) format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter Fallback';src:local('Arial');size-adjust:107%;ascent-override:90%;descent-override:22%}
:root{--font-display:'Montserrat', 'Montserrat Fallback', 'Segoe UI', system-ui, -apple-system, sans-serif;--font-body:'Inter', 'Inter Fallback', 'Segoe UI', system-ui, -apple-system, sans-serif;}
/* 00-tokens.css */
/* Palette MEASURED from their logo + ad (BRIEF §5, DESIGN §1). Every pair contrast-computed (DESIGN §1.3,
   re-asserted from THIS file by static 13). Hex only. Never put a brand hex in JS — read these tokens. */
:root{
  --brand-teal:#0AB6B0; --brand-teal-deep:#00968A;
  --brand-orange:#F8901F; --brand-orange-deep:#F06000;

  --ink-950:#001212; --ink-900:#001818; --ink-800:#00241E; --ink-700:#0B3B35;

  --surface:#F2F8F7; --surface-2:#E4F0EE; --surface-card:#FFFFFF;
  --line:#CFE0DD; --line-input:#7A8F8B;

  --snow:#ECF5F4; --mist:#A3BAB6;
  --text:#0A1F1D; --muted:#465B58;

  --teal-ink:#06716E; --orange-ink:#B04600;

  --cta:#F8901F; --cta-hover:#F06000; --cta-active:#D85400; --cta-label:#001212; --cta-edge:#B04600;
  --wa:#25D366; --wa-label:#FFFFFF;

  --error:#B3261E; --error-lift:#FF8A80;
  --focus-dark:#0AB6B0; --focus-light:#06716E;

  /* Andy 29 Sep: "video hero with no gradient" — ONE flat, even tint over the footage (white on raw footage is
     ~2.2:1; a flat 50% layer keeps text ≥4.5:1, re-measured over live frames by R13b). */
  --hero-tint:rgba(0,18,18,.50);
  --band-cta: linear-gradient(135deg, #001818 0%, #012E29 100%);

  --nav-h:72px; --wrap:1200px; --gutter:24px; --proof-h:120px;
  --r-btn:4px; --r-card:14px; --r-panel:20px; --r-pill:999px;
  --section-y:112px;

  --shadow-hover: 0 2px 4px rgba(0,18,18,.06), 0 24px 48px -16px rgba(0,18,18,.26);
  --glow-teal: 0 0 0 1px rgba(10,182,176,.45), 0 12px 40px -12px rgba(10,182,176,.30);
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-std:cubic-bezier(.22,.61,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --t-fast:160ms; --t:220ms; --t-slow:420ms; --reveal-y:24px;

  /* Andy's rule: modest hero headings (BRIEF §1). Caps asserted by R23: 32/34/40/44/48. */
  --fs-hero: clamp(1.75rem, 1.375rem + 1.667vw, 3rem);          /* 28 → 48 */
  --fs-page-hero: clamp(1.75rem, 1.5rem + 1.1vw, 2.75rem);       /* 28 → 44 */
  --fs-h2: clamp(1.625rem, 1.3rem + 1.2vw, 2.5rem);
  --fs-h3: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem);
  --fs-h4: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  --fs-statement: clamp(1.375rem, 1.1rem + 1.2vw, 2.125rem);
  --fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  --fs-body: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --fs-sm: .9375rem; --fs-label: .8125rem;
  --fs-num: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --fs-price: clamp(2rem, 1.6rem + 1vw, 2.5rem);
  --fs-btn: 1rem;
}
@media (max-width:1023px){ :root{ --nav-h:68px; --section-y:88px; } }
@media (max-width:767px){ :root{ --section-y:64px; } }
@media (max-width:359px){ :root{ --gutter:16px; } }
@media (min-width:768px) and (max-width:1279px){ :root{ --gutter:32px; } }
@media (min-width:1280px){ :root{ --gutter:40px; } }
@media (min-width:1024px) and (max-height:800px){ :root{ --section-y:80px; } }

/* canvases — components never pick a colour themselves */
.is-dark{ --bg:var(--ink-900); --fg:var(--snow); --fg-muted:var(--mist); --link:var(--brand-teal); --eyebrow:var(--brand-teal);
  --focus:var(--focus-dark); --hair:var(--ink-700); --card:var(--ink-800); --wm:var(--snow); --tick:var(--brand-teal); }
.is-dark.is-deep{ --bg:var(--ink-950); }
.is-light{ --bg:var(--surface); --fg:var(--text); --fg-muted:var(--muted); --link:var(--teal-ink); --eyebrow:var(--teal-ink);
  --focus:var(--focus-light); --hair:var(--line); --card:var(--surface-card); --wm:var(--text); --tick:var(--teal-ink); }
.is-light.is-alt{ --bg:var(--surface-2); }

/* 10-base.css */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:auto; background:var(--ink-950); interpolate-size:allow-keywords; }
body{ margin:0; font:400 var(--fs-body)/1.7 var(--font-body); color:var(--text); background:var(--surface);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
img,video{ display:block; max-width:100%; height:auto; }
svg{ display:block; }
.ic{ display:inline-block; flex:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; color:var(--fg); text-wrap:balance; }
h1{ font-size:var(--fs-page-hero); font-weight:700; line-height:1.15; letter-spacing:-.02em; }
h2{ font-size:var(--fs-h2); line-height:1.18; letter-spacing:-.015em; }
h3{ font-size:var(--fs-h3); line-height:1.3; letter-spacing:-.01em; }
p{ margin:0; text-wrap:pretty; }
ul,ol{ margin:0; padding:0; list-style:none; }
address{ font-style:normal; }
a{ color:var(--link); text-decoration-thickness:1px; text-underline-offset:3px; }
button{ font:inherit; color:inherit; }
strong{ font-weight:600; }
::selection{ background:var(--brand-teal); color:var(--ink-950); }
:focus-visible{ outline:3px solid var(--focus, var(--focus-light)); outline-offset:3px; border-radius:2px; }
.email{ overflow-wrap:anywhere; }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

section{ background:var(--bg); color:var(--fg); padding-block:var(--section-y); position:relative; }
section p{ color:var(--fg-muted); }
.wrap{ width:min(100% - 2*var(--gutter), var(--wrap)); margin-inline:auto; }
.lead{ font-size:var(--fs-lead); line-height:1.6; max-width:38rem; }
.statement{ font:500 var(--fs-statement)/1.3 var(--font-display); letter-spacing:-.01em; color:var(--fg); max-width:24ch; }
.statement .hl{ color:var(--link); }
.label{ font:600 var(--fs-label)/1.3 var(--font-display); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-muted); }
section p.label{ color:var(--fg-muted); }

.skip{ position:fixed; left:16px; top:-80px; z-index:80; background:var(--cta); color:var(--cta-label); padding:12px 20px; border-radius:var(--r-btn);
  font:700 1rem/1.25 var(--font-display); text-decoration:none; }
.skip:focus{ top:12px; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* ------------------------------------------------------------------ logo */
.lockup{ width:auto; height:40px; }
.lockup--lg{ height:44px; }
.nm-a{ fill:var(--brand-teal); } .nm-b{ fill:var(--brand-orange); } .nm-w{ fill:var(--wm, var(--snow)); }
.nmark{ width:auto; }
.brand{ display:inline-flex; align-items:center; min-height:44px; text-decoration:none; --wm:var(--snow); }
@media (max-width:1023px){ .nav .lockup, .overlay .lockup{ height:34px; } }

/* diagonal eyebrow glyph */
.dglyph{ flex:none; }
.dg-a{ fill:var(--brand-teal); } .dg-b{ fill:var(--brand-orange); }
.is-light .dg-a{ fill:var(--teal-ink); } .is-light .dg-b{ fill:var(--orange-ink); }

/* ---------------------------------------------------------------- eyebrow */
.eyebrow{ display:flex; align-items:center; gap:10px; margin:0 0 8px; color:var(--eyebrow);
  font:600 var(--fs-label)/1.3 var(--font-display); letter-spacing:.14em; text-transform:uppercase; }
section .eyebrow{ color:var(--eyebrow); }
.sechead{ margin-bottom:48px; max-width:46rem; }
.sechead h2{ max-width:24ch; }
.sechead .lead{ margin-top:16px; }
.sechead--c{ text-align:center; margin-inline:auto; }
.sechead--c .eyebrow{ justify-content:center; }
@media (max-width:1023px){ .sechead{ margin-bottom:32px; } }

/* ---------------------------------------------------------------- buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font:700 var(--fs-btn)/1.25 var(--font-display);
  letter-spacing:.005em; border-radius:var(--r-btn); text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:background-color .2s var(--ease-std), border-color .2s var(--ease-std), color .2s var(--ease-std), box-shadow .2s var(--ease-std); white-space:nowrap; }
.btn--sm{ min-height:44px; padding:0 20px; font-size:.9375rem; }
.btn--md{ min-height:52px; padding:0 28px; }
.btn--lg{ min-height:56px; padding:0 32px; }
.btn--full{ width:100%; }
.btn .ext{ opacity:.8; }
.btn--primary{ background:var(--cta); color:var(--cta-label); }
.btn--primary:hover{ background:var(--cta-hover); }
.btn--primary:active{ background:var(--cta-active); }
.is-light .btn--primary{ box-shadow:inset 0 0 0 1px var(--cta-edge); }
.btn--ghost{ background:transparent; color:var(--snow); border-color:rgba(236,245,244,.5); }
.btn--ghost:hover{ background:rgba(236,245,244,.08); border-color:var(--snow); }
.btn--ghost:active{ background:rgba(236,245,244,.14); }
.btn--secondary{ background:transparent; color:var(--text); border-color:var(--text); }
.btn--secondary:hover{ background:var(--text); color:var(--surface); }
.is-dark .btn--secondary{ color:var(--snow); border-color:rgba(236,245,244,.5); }
.is-dark .btn--secondary:hover{ background:var(--snow); color:var(--ink-950); }
.btnrow{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
@media (max-width:767px){
  .btnrow{ flex-direction:column; align-items:stretch; }
  .btnrow > .btn{ width:100%; white-space:normal; text-align:center; }
}
.tlink{ display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--link);
  font:600 .9375rem/1.3 var(--font-display); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.tlink:hover{ text-decoration-thickness:2px; }
.tlink .ic{ transition:translate .2s var(--ease-std); }
@media (hover:hover) and (min-width:1024px){ .tlink:hover .ic:not(.ext){ translate:3px 0; } }

/* ------------------------------------------------------------------- chips */
.chip{ display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:0 14px; border-radius:var(--r-pill); width:max-content; max-width:100%;
  font:600 .8125rem/1.2 var(--font-display); letter-spacing:.08em; text-transform:uppercase; text-decoration:none; }
.is-dark .chip{ border:1px solid rgba(10,182,176,.45); background:rgba(10,182,176,.12); color:var(--snow); }
.is-light .chip{ border:1px solid rgba(6,113,110,.35); background:rgba(6,113,110,.08); color:var(--teal-ink); }
.chip--sm{ min-height:28px; font-size:.8125rem; letter-spacing:.04em; text-transform:none; }
.chip--link{ min-height:44px; letter-spacing:.04em; text-transform:none; font-size:.9375rem; }
.chip--btn{ min-height:44px; cursor:pointer; letter-spacing:.02em; text-transform:none; font-size:.9375rem; }
.is-light .chip--btn[aria-pressed="true"]{ background:var(--teal-ink); color:var(--surface-card); border-color:var(--teal-ink); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.chips li{ display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:var(--r-pill); background:var(--card); border:1px solid var(--hair);
  font:500 .9375rem/1.2 var(--font-body); color:var(--fg); }
.chips--grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:0; }
.chips--grid li{ border-radius:10px; min-height:52px; }
@media (min-width:768px){ .chips--grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:1024px){ .chips--grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.badge{ position:absolute; top:-13px; right:24px; display:inline-flex; align-items:center; height:26px; padding:0 12px; border-radius:var(--r-btn);
  background:var(--cta); color:var(--cta-label); font:600 var(--fs-label)/1 var(--font-display); letter-spacing:.14em; text-transform:uppercase; }

/* ------------------------------------------------------------------- ticks */
.ticks{ display:grid; gap:10px; }
.ticks li{ display:grid; grid-template-columns:20px minmax(0,1fr); gap:12px; align-items:start; color:var(--fg); }
.ticks .ic{ color:var(--tick); margin-top:3px; }
.ticks--cols{ margin-top:32px; }
@media (min-width:1024px){ .ticks--cols{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; } }

/* ------------------------------------------------------------------- grids */
.grid2,.grid3,.grid4{ display:grid; gap:24px; grid-template-columns:minmax(0,1fr); }
.grid2 > *,.grid3 > *,.grid4 > *{ min-width:0; }
@media (min-width:640px){ .grid3,.grid4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:768px){ .grid2{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .grid3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; } .grid4{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ------------------------------------------------------------------- tiles (30° chamfer) */
.tile{ width:48px; height:48px; flex:none; display:grid; place-items:center; color:var(--link);
  background:color-mix(in srgb, var(--link) 12%, transparent);
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 8px, 100% 100%, 0 100%); }
.tile--sm{ width:40px; height:40px; }

/* ------------------------------------------------------------------- cards */
.card{ position:relative; display:grid; grid-template-rows:auto auto 1fr auto; gap:14px; padding:28px; border-radius:var(--r-card);
  background:var(--card); border:1px solid var(--hair);
  transition:translate var(--t) var(--ease-std), box-shadow var(--t) var(--ease-std), border-color var(--t) var(--ease-std); }
.card h3{ font-size:var(--fs-h4); line-height:1.35; }
.card p{ color:var(--fg-muted); }
.card__go{ display:inline-flex; align-items:center; gap:6px; font:600 .9375rem/1.3 var(--font-display); color:var(--link); text-decoration:none; align-self:end; min-height:24px; }
.stretch::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.card--svc{ grid-template-rows:none; display:block; padding:0; overflow:hidden; }
.card__body{ display:grid; grid-template-rows:auto auto 1fr auto; gap:14px; padding:28px; height:100%; }
@media (hover:hover) and (min-width:1024px){
  .is-light .card--svc:hover{ translate:0 -4px; box-shadow:var(--shadow-hover); border-color:color-mix(in srgb, var(--teal-ink) 40%, var(--line)); }
  .card--svc:hover .card__go{ text-decoration:underline; text-underline-offset:4px; }
}
@media (max-width:767px){ .card, .card__body{ padding:24px; } }

/* 20-nav.css */
/* --------------------------------------------------------------------- nav */
.nav{ position:fixed; inset:0 0 auto; z-index:50; height:var(--nav-h); padding-inline:var(--gutter);
  background:transparent; border-bottom:1px solid transparent; color:var(--snow);
  transition:background-color .24s var(--ease-std), border-color .24s var(--ease-std); }
.nav.scrolled, .nav.mega-open, html:not(.js) .nav{ background:rgba(0,18,18,.97); border-bottom-color:rgba(236,245,244,.08); }
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .nav.scrolled{ background:rgba(0,18,18,.90); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); }
}
.nav__in{ position:relative; height:100%; max-width:var(--wrap); margin-inline:auto; display:grid; align-items:center;
  grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"brand links cta"; }
.nav .brand{ grid-area:brand; }
.nav__links{ grid-area:links; justify-self:end; display:flex; align-items:center; gap:2px; margin-right:24px; }
.nav__links a{ position:relative; display:flex; align-items:center; height:44px; padding:0 12px; color:var(--mist);
  font:600 .9375rem/1 var(--font-display); text-decoration:none; transition:color .16s var(--ease-std); }
.nav__links a:hover, .nav__links a[aria-current="page"]{ color:var(--snow); }
.nav__links a[aria-current="page"]::after{ content:""; position:absolute; left:50%; bottom:5px; width:14px; height:5px; margin-left:-7px;
  background:var(--brand-orange); clip-path:polygon(0 0, 100% 60%, 100% 100%, 0 40%); }
.nav__sub{ display:grid; place-items:center; width:44px; height:44px; margin-left:-10px; border:0; background:transparent; color:var(--mist); cursor:pointer; border-radius:var(--r-btn); }
.nav__sub:hover{ color:var(--snow); }
.nav__sub .ic{ transition:rotate .2s var(--ease-std); }
.nav__sub[aria-expanded="true"] .ic{ rotate:180deg; }
.nav__cta{ grid-area:cta; }
.nav__call, .burger{ display:none; }
.nav :focus-visible{ outline-color:var(--focus-dark); }
@media (min-width:1280px){ .nav__links a{ padding:0 16px; font-size:1rem; } }

/* ------------------------------------------------------------ services mega menu */
.mega{ position:absolute; top:calc(var(--nav-h) - 8px); right:0; width:min(760px, 100%); z-index:55;
  display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:24px; padding:24px;
  background:var(--ink-900); border:1px solid var(--ink-700); border-radius:var(--r-panel); box-shadow:0 24px 64px -24px rgba(0,0,0,.6);
  animation:megain .18s var(--ease-std) both; }
.mega[hidden]{ display:none; }
@keyframes megain{ from{ opacity:0; translate:0 -6px; } to{ opacity:1; translate:0 0; } }
.mega__list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px 16px; }
.mega__item{ display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:center; min-height:64px; padding:10px 12px;
  border-radius:12px; text-decoration:none; color:var(--snow); }
.mega__item:hover, .mega__item:focus-visible{ background:var(--ink-800); }
.mega__item--all{ grid-template-columns:minmax(0,1fr) auto; color:var(--brand-teal); }
.mega__t{ display:grid; gap:2px; min-width:0; }
.mega__n{ font:600 .9375rem/1.3 var(--font-display); }
.mega__b{ font:400 .875rem/1.4 var(--font-body); color:var(--mist); }
.mega__rail{ display:grid; align-content:start; gap:8px; padding-left:24px; border-left:1px solid var(--ink-700); }
.mega__price{ font:600 .9375rem/1.5 var(--font-display); color:var(--snow); font-variant-numeric:tabular-nums lining-nums; }
.mega__vat{ font-size:.875rem; color:var(--mist); }
.mega__rail hr{ width:100%; border:0; border-top:1px solid var(--ink-700); margin:8px 0; }
.mega .tlink{ color:var(--brand-teal); }
@media (max-width:1023px){ .mega{ display:none !important; } }

@media (max-width:1023px){
  .nav__in{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); grid-template-areas:"call brand burger"; }
  .nav__links, .nav__cta{ display:none; }
  .nav__call{ grid-area:call; justify-self:start; display:grid; place-items:center; width:44px; height:44px; color:var(--snow); border-radius:50%; }
  .burger{ grid-area:burger; justify-self:end; align-self:center; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    width:44px; height:44px; padding:0; border:0; background:transparent; cursor:pointer; }
  .burger span{ display:block; width:22px; height:2px; border-radius:2px; background:var(--snow); transition:transform .2s var(--ease-std), opacity .2s var(--ease-std); }
  .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }
}

/* ----------------------------------------------------------------- overlay */
.overlay{ position:fixed; inset:0; z-index:70; background:rgba(0,18,18,.985); display:flex; flex-direction:column; align-items:center; justify-content:safe center;
  padding:88px 24px 48px; opacity:0; transition:opacity .2s var(--ease-std); overflow-y:auto; }
.overlay[hidden]{ display:none; }
.overlay.is-open{ opacity:1; }
.overlay__brand{ position:absolute; top:17px; left:24px; }
.overlay__close{ position:absolute; top:12px; right:24px; width:44px; height:44px; display:grid; place-items:center; border:0; background:transparent; color:var(--snow); cursor:pointer; }
.overlay__links{ display:flex; flex-direction:column; align-items:center; gap:4px; width:min(100%, 360px); }
.overlay__links > a, .ov-svc > summary{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:52px; color:var(--snow);
  font:600 1.625rem/1.2 var(--font-display); text-decoration:none; cursor:pointer; list-style:none; }
.ov-svc > summary::-webkit-details-marker{ display:none; }
.ov-svc > summary .ic{ transition:rotate .2s var(--ease-std); }
.ov-svc[open] > summary .ic{ rotate:180deg; }
.ov-svc ul{ display:grid; justify-items:center; padding:4px 0 12px; }
.ov-svc li a{ display:flex; align-items:center; min-height:44px; color:var(--mist); font:500 1.125rem/1.3 var(--font-body); text-decoration:none; }
.overlay [aria-current="page"], .ov-svc > summary.is-current{ color:var(--brand-teal); }
.overlay__cta{ display:flex; flex-direction:column; align-items:center; gap:4px; width:min(100%, 320px); margin-top:32px; }
.overlay__cta .btn{ white-space:normal; text-align:center; }
.overlay__call{ display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--brand-teal); font:600 1rem/1.3 var(--font-display); }
body.menu-open .wafloat{ display:none; }

/* ---------------------------------------------------------- whatsapp float */
.wafloat{ position:fixed; z-index:60; right:max(16px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom));
  width:56px; height:56px; border-radius:50%; background:var(--wa); color:#FFFFFF; display:grid; place-items:center;
  box-shadow:0 0 0 2px var(--ink-950), 0 10px 24px -8px rgba(0,18,18,.55); text-decoration:none; }
.wafloat__lbl{ position:absolute; right:calc(100% + 12px); top:50%; translate:0 -50%; height:36px; padding:0 14px; display:flex; align-items:center;
  white-space:nowrap; border-radius:var(--r-pill); background:var(--ink-800); border:1px solid var(--ink-700); color:var(--snow);
  font:600 .875rem/1 var(--font-display); opacity:0; pointer-events:none; transition:opacity .16s var(--ease-std); }
@media (min-width:1024px){ .wafloat{ right:24px; bottom:24px; width:60px; height:60px; } }
@media (hover:hover){ .wafloat:hover .wafloat__lbl, .wafloat:focus-visible .wafloat__lbl{ opacity:1; } }

/* 30-hero.css */
/* ==================================================================== HOME HERO (DESIGN §5.1)
   The hero wins on composition, video and proof — never type size (Andy). */
.hero{ min-height:100vh; min-height:100svh; padding:0; display:flex; flex-direction:column; justify-content:center; overflow:hidden; isolation:isolate; }
/* Desktop: hero = one viewport MINUS the proof strip, so hero + stats land exactly on the fold (R21).
   min-height (not height): if content ever needs more, the hero grows instead of cropping. */
@media (min-width:1024px){ .hero{ min-height:max(560px, calc(100vh - var(--proof-h))); min-height:max(560px, calc(100svh - var(--proof-h))); } }
.hero__media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__poster, .hero__poster img, .hero__video{ position:absolute; inset:0; width:100%; height:100%; }
.hero__poster img, .hero__video{ object-fit:cover; object-position:50% 50%; }
.hero__video{ opacity:0; transition:opacity .4s var(--ease-std); }
.hero__media[data-ready][data-state="playing"] .hero__video,
.hero__media[data-ready][data-state="paused-user"] .hero__video,
.hero__media[data-ready][data-state="paused-auto"] .hero__video{ opacity:1; }
.hero__scrim{ position:absolute; inset:0; background-color:var(--hero-tint); }

.page-hero__lines{ position:absolute; z-index:1; right:0; top:var(--nav-h); width:62%; height:calc(100% - var(--nav-h)); pointer-events:none;
  -webkit-mask:linear-gradient(180deg, #000 0%, #000 55%, transparent 90%); mask:linear-gradient(180deg, #000 0%, #000 55%, transparent 90%); }
.dl{ fill:none; stroke-width:1.5; vector-effect:non-scaling-stroke; stroke-dasharray:1000; stroke-dashoffset:0; }
.dl--a{ stroke:var(--brand-teal); opacity:.55; } .dl--b{ stroke:var(--brand-orange); opacity:.45; }

.hero__grid{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; align-items:center; gap:32px;
  padding-top:calc(var(--nav-h) + 24px); padding-bottom:clamp(40px, 9svh, 104px); }
.hero__content{ min-width:0; display:grid; justify-items:center; max-width:880px; }
.hero .hero__eb{ color:var(--snow); margin-bottom:20px; justify-content:center; }
@media (max-width:479px){ .hero .hero__eb{ display:block; text-align:center; letter-spacing:.1em; } .hero .hero__eb .dglyph{ display:inline-block; vertical-align:-1px; margin-right:8px; } }
.hero__eb .dglyph{ width:16px; }
.hero__h1{ font-size:var(--fs-hero); font-weight:700; line-height:1.12; letter-spacing:-.02em; color:var(--snow); max-width:none; }
.hero__h1 .w{ display:inline-block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; vertical-align:top; }
.hero__h1 .w > span{ display:inline-block; }
.hero__h1 .amp{ color:var(--brand-orange); }
.hero__sub{ margin-top:16px; font-size:var(--fs-lead); line-height:1.6; color:var(--snow); max-width:40rem; }
.hero__ctas{ margin-top:32px; justify-content:center; }


.hero__toggle{ position:absolute; z-index:3; left:max(var(--gutter), calc((100% - var(--wrap)) / 2)); bottom:20px; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; background:rgba(0,18,18,.35); border:1px solid rgba(236,245,244,.35); color:var(--snow); cursor:pointer;
  transition:background-color .16s var(--ease-std), border-color .16s var(--ease-std); }
.hero__toggle[hidden]{ display:none; }
.hero__toggle[aria-disabled="true"]{ opacity:.6; cursor:progress; }
.hero__toggle:hover{ background:rgba(236,245,244,.08); border-color:var(--snow); }
.hero__toggle .i-play{ display:none; }
.hero__toggle[aria-pressed="false"] .i-play{ display:block; }
.hero__toggle[aria-pressed="false"] .i-pause{ display:none; }
.hero__toggle span{ display:grid; }
@media (min-width:1024px){ .hero__grid{ padding-bottom:clamp(84px, 11svh, 120px); } }
@media (min-width:1600px) and (min-height:900px){ .hero__grid{ padding-bottom:clamp(120px, 17svh, 220px); } }
@media (min-width:1024px) and (max-height:800px){
  .hero__grid{ padding-top:calc(var(--nav-h) + 16px); padding-bottom:80px; }
  .hero .hero__eb{ margin-bottom:14px; } .hero__ctas{ margin-top:24px; }
}
@media (max-width:1023px){
  .hero{ min-height:max(560px, 100svh); }
  .hero__grid{ padding-bottom:88px; }
}

/* ------------------------------------------------------------ proof cards (Andy 29 Sep: "this section become cards")
   Still composed with the hero into exactly one desktop viewport (R21: band ≤120px, ends on the fold). */
.proof{ padding-block:0; background:var(--ink-950); }
.proof__grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; padding-block:8px; }
.proof__i{ display:grid; align-content:center; justify-items:center; gap:4px; min-width:0; padding:10px 12px; text-align:center;
  background:var(--ink-800); border:1px solid rgba(236,245,244,.10); border-radius:var(--r-card); }
.proof__n{ white-space:nowrap; font:600 clamp(1.375rem, 1.1rem + 1vw, 2rem)/1 var(--font-display); letter-spacing:-.01em; color:var(--snow); font-variant-numeric:tabular-nums lining-nums; }
.proof__l{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2px 8px; font:500 .8125rem/1.35 var(--font-body); color:var(--mist); }
.proof__top{ display:flex; align-items:center; justify-content:center; gap:8px; }
@media (min-width:1024px){
  .proof{ height:var(--proof-h); display:flex; align-items:center; }
  .proof .wrap{ width:min(100% - 2*var(--gutter), var(--wrap)); }
  .proof__grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; padding:0 76px 0 0; }
  .proof__i{ height:88px; padding:12px 16px; gap:6px; }
  .proof__l{ font-size:var(--fs-sm); }
}
@media (min-width:1280px){ .proof__l{ white-space:nowrap; } }
@media (min-width:1368px){ .proof__grid{ padding-right:0; } }

.stars{ position:relative; display:inline-block; line-height:0; }
.stars__row{ display:inline-flex; gap:2px; }
.stars__bg{ color:rgba(236,245,244,.22); }
.stars__fg{ position:absolute; inset:0; color:var(--cta); clip-path:inset(0 calc(100% - var(--fill)) 0 0); }
.is-light .stars__bg{ color:var(--line); } .is-light .stars__fg{ color:var(--brand-orange-deep); }

/* ============================================================== PAGE HERO (DESIGN §5.12) — never text on a photo */
.page-hero{ padding:calc(var(--nav-h) + 40px) 0 64px; display:flex; align-items:center; overflow:hidden; isolation:isolate; min-height:clamp(360px, 48svh, 460px); }
.page-hero--split{ min-height:clamp(440px, 62svh, 580px); }
.page-hero--compact{ min-height:clamp(300px, 40svh, 380px); }
.page-hero__lines{ opacity:.8; z-index:-1; }
.page-hero__in{ display:grid; grid-template-columns:minmax(0,1fr); gap:40px; align-items:center; }
@media (min-width:1024px){
  .page-hero--split .page-hero__in, .page-hero--about .page-hero__in{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; }
}
.page-hero__txt{ min-width:0; max-width:760px; }
.page-hero h1{ font-size:var(--fs-page-hero); font-weight:700; color:var(--snow); margin-top:16px; max-width:22ch; }
.page-hero .chip{ margin-top:16px; }
.page-hero .chip + h1{ margin-top:12px; }
/* their 56-character article title, verbatim: one step smaller on the narrowest phones so it stays ≤3 lines (R23) */
[data-page="insight"] .page-hero h1{ font-size:clamp(1.625rem, 1.3rem + 1.4vw, 2.75rem); }
.page-hero .lead{ margin-top:16px; color:var(--mist); }
.page-hero .btnrow{ margin-top:32px; }
.page-hero__frame{ margin:0; min-width:0; }
.page-hero__frame picture{ display:block; aspect-ratio:4/3; max-height:420px; border-radius:var(--r-panel); overflow:hidden; border:1px solid rgba(236,245,244,.12); background:var(--ink-800); }
.page-hero__frame img{ width:100%; height:100%; object-fit:cover; }
.page-hero__frame figcaption{ margin-top:12px; font-size:var(--fs-sm); color:var(--mist); }
.page-hero__mark{ display:none; justify-self:center; }
@media (min-width:1024px){ .page-hero__mark{ display:block; } }
.mark--hero{ width:auto; height:280px; }
.jump{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.page-hero .jump .chip{ margin-top:0; }
@media (max-width:639px){ .jump .chip--link{ min-height:44px; padding:0 12px; font-size:.875rem; } }
.crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; font:500 var(--fs-sm)/1.4 var(--font-body); color:var(--snow); }
.crumbs li{ display:inline-flex; align-items:center; min-width:0; }
.crumbs li + li::before{ content:""; width:5px; height:9px; margin:0 10px; background:var(--brand-teal); clip-path:polygon(0 0, 100% 30%, 100% 100%, 0 70%); }
.crumbs a{ color:var(--snow); text-decoration:none; display:inline-flex; align-items:center; min-height:44px; min-width:44px; }
.crumbs a:hover{ text-decoration:underline; }
.crumbs [aria-current]{ color:var(--mist); }
@media (max-width:1023px){
  .page-hero, .page-hero--split, .page-hero--compact{ min-height:0; padding:calc(var(--nav-h) + 24px) 0 48px; }
  .page-hero .btnrow{ margin-top:24px; }
  .page-hero__frame picture{ aspect-ratio:16/10; }
}
@media (min-width:1024px) and (max-height:800px){ .page-hero{ padding-top:calc(var(--nav-h) + 24px); padding-bottom:48px; } }

/* entrance — CSS keyframes, desktop motion only; every final frame is opacity:1 + transform:none */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .hero__eb{ animation:rise8 .48s var(--ease-out) 60ms both; }
  .hero__h1 .w > span{ animation:maskup .72s var(--ease-out) both; animation-delay:calc(120ms + var(--i) * 40ms); }
  .hero__sub{ animation:rise12 .52s var(--ease-out) 380ms both; }
  .hero__cta{ animation:rise10 .44s var(--ease-out) 480ms both; }
  .hero__cta2{ animation:rise10 .44s var(--ease-out) 540ms both; }
  .proof__i{ animation:rise8 .42s var(--ease-out) both; }
  .proof__i:nth-child(1){ animation-delay:640ms } .proof__i:nth-child(2){ animation-delay:700ms } .proof__i:nth-child(3){ animation-delay:760ms } .proof__i:nth-child(4){ animation-delay:820ms }
  .page-hero__lines .dl{ animation:draw 1.4s var(--ease-io) 700ms both; }
  .page-hero .crumbs{ animation:rise12 .48s var(--ease-out) 60ms both; }
  .page-hero h1{ animation:rise12 .48s var(--ease-out) 120ms both; }
  .page-hero .lead{ animation:rise12 .48s var(--ease-out) 200ms both; }
  .page-hero__frame picture{ animation:clipdown .9s var(--ease-out) 160ms both; }
  .page-hero__mark .nm-a{ animation:armA 1.2s var(--ease-out) both; }
  .page-hero__mark .nm-b{ animation:armB 1.2s var(--ease-out) 120ms both; }
}
@keyframes rise8{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes rise10{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes rise12{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes maskup{ from{ transform:translateY(105%); } to{ transform:none; } }
@keyframes draw{ from{ stroke-dashoffset:1000; } to{ stroke-dashoffset:0; } }
@keyframes clipup{ from{ clip-path:inset(0 0 100% 0 round 14px); } to{ clip-path:inset(0 round 14px); } }
@keyframes clipdown{ from{ clip-path:inset(8% 0 0 0 round 20px); } to{ clip-path:inset(0 round 20px); } }
@keyframes armA{ from{ opacity:0; transform:translate(-60px,-35px); } to{ opacity:1; transform:none; } }
@keyframes armB{ from{ opacity:0; transform:translate(60px,35px); } to{ opacity:1; transform:none; } }

/* 40-sections.css */
/* ------------------------------------------------------------ home: about — as cards (Andy 29 Sep) */
.about-cards{ display:grid; gap:24px; grid-template-columns:minmax(0,1fr); }
.about-cards > *{ min-width:0; }
.acard{ grid-template-rows:auto auto 1fr auto; }
.acard p{ max-width:62ch; }
.acard .tlink{ margin-top:4px; }
.acard--statement{ display:grid; grid-template-rows:none; align-content:center; gap:20px; padding:36px; background:var(--ink-900); border-color:var(--ink-700); }
.acard--statement .statement{ color:var(--snow); max-width:none; }
.acard--statement .statement .hl{ color:var(--brand-teal); }
.acard--statement p:not(.statement){ color:var(--mist); }
@media (min-width:768px){ .about-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); } .acard--statement, .acard--wide{ grid-column:span 2; } }
@media (min-width:1024px){
  .about-cards{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .acard--statement{ grid-column:3; grid-row:1 / span 2; }
  .acard--wide{ grid-column:1 / span 2; grid-row:2; }
}

/* ------------------------------------------------------------ bento */
.bento{ display:grid; gap:24px; grid-template-columns:minmax(0,1fr); }
.bento > *{ min-width:0; }
@media (min-width:768px){ .bento{ grid-template-columns:repeat(2, minmax(0,1fr)); } .bento .card--feature{ grid-column:span 2; } }
@media (min-width:1024px){
  .bento{ grid-template-columns:repeat(12, minmax(0,1fr)); gap:24px; }
  .bento > *{ grid-column:span 3; }
  .bento .card--feature{ grid-column:span 6; }
  .bento > :nth-child(2), .bento > :nth-child(3){ grid-column:span 3; }
}
.card--feature{ display:grid; grid-template-columns:minmax(0,1fr); }
.card--feature .card__media{ margin:0; order:-1; aspect-ratio:16/10; overflow:hidden; }
.card--svc h3{ text-wrap:pretty; }
.card--feature .card__media img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:1024px){
  .card--feature{ grid-template-columns:minmax(0,55fr) minmax(0,45fr); }
  .card--feature .card__media{ order:0; aspect-ratio:4/3; align-self:center; margin:20px 20px 20px 0; border-radius:10px; }
}
.bento__price{ margin-top:32px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; font:600 var(--fs-sm)/1.5 var(--font-display); color:var(--fg); font-variant-numeric:tabular-nums; }
section .bento__price{ color:var(--fg); }

/* ------------------------------------------------------------ project cards */
.pcard{ position:relative; display:grid; grid-template-rows:auto 1fr; border-radius:var(--r-card); overflow:hidden; background:var(--card); border:1px solid var(--hair);
  transition:border-color var(--t) var(--ease-std); scroll-margin-top:calc(var(--nav-h) + 80px); }
.pcard[hidden]{ display:none; }
.pcard__media{ margin:0; aspect-ratio:4/3; overflow:hidden; background:var(--surface-2); }
.pcard--16-10 .pcard__media{ aspect-ratio:16/10; }
.pcard__media img{ width:100%; height:100%; object-fit:cover; transition:scale .6s var(--ease-out); }
.pcard__body{ display:grid; align-content:start; gap:6px; padding:20px; }
.pcard__body h3{ font-size:var(--fs-h4); line-height:1.35; }
.pcard__body p{ font-size:var(--fs-sm); color:var(--fg-muted); }
.pcard__tag{ margin-top:6px; font:600 var(--fs-label)/1.3 var(--font-display) !important; letter-spacing:.12em; text-transform:uppercase; color:var(--link) !important; }
.pcard--dark{ --card:var(--ink-800); --hair:rgba(236,245,244,.10); }
@media (hover:hover) and (min-width:1024px){ .pcard:hover{ border-color:color-mix(in srgb, var(--link) 40%, transparent); } .pcard:hover img{ scale:1.04; } }

/* ------------------------------------------------------------ work track (home, DESIGN §6.2) */
.work{ padding-block:var(--section-y); overflow:hidden; }
.work__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 32px; margin-bottom:32px; }
.work__head .lead{ margin-top:12px; }
.work__track{ display:grid; gap:24px; grid-template-columns:repeat(3, minmax(0,1fr)); width:min(100% - 2*var(--gutter), var(--wrap)); margin-inline:auto; }
.work__track .pcard{ min-width:0; }
.pcard--end{ display:grid; align-content:center; justify-items:start; gap:12px; padding:32px; background:var(--ink-800); border:1px solid rgba(236,245,244,.10); }
.pcard--end h3{ font-size:var(--fs-h3); }
.pcard--end p{ color:var(--mist); }
.work__rail{ display:none; }
@media (max-width:1023px){ .work__track{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:639px){
  .work__track{ width:auto; grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:min(84%, 340px); gap:16px; overflow-x:auto;
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); padding-inline:var(--gutter); padding-bottom:12px; overscroll-behavior-x:contain; scrollbar-width:none; }
  .work__track::-webkit-scrollbar{ display:none; }
  .work__track > *{ scroll-snap-align:start; }
}
/* desktop track mode — added by motion.js ONLY inside MQ.pin; cleanup removes it */
.work.is-track{ height:100vh; height:100svh; padding:calc(var(--nav-h) + 24px) 0 24px; display:flex; flex-direction:column; justify-content:center; }
.work.is-track .work__head{ margin-bottom:24px; }
.work.is-track .work__track{ --tw:min(30vw, calc((100svh - 390px) * 1.3)); display:flex; gap:32px; width:max-content; margin:0;
  padding-left:max(var(--gutter), calc((100vw - var(--wrap)) / 2)); padding-right:var(--gutter); will-change:transform; }
.work.is-track .work__track > .pcard{ width:var(--tw); flex:none; }
.work.is-track .work__track > .pcard--end{ width:calc(var(--tw) * .7); }
.work.is-track .work__rail{ display:flex; align-items:center; gap:16px; margin-top:16px; padding-right:88px; }
.work__bar{ position:relative; flex:1; height:2px; background:var(--ink-700); }
.work__bar i{ position:absolute; inset:0; background:var(--brand-teal); transform-origin:0 50%; transform:scaleX(0); }
.work__idx::after{ content:attr(data-idx); font:600 var(--fs-label)/1 var(--font-display); letter-spacing:.08em; color:var(--mist); font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------ reviews */
.reviews-sec__head{ max-width:none; }
.rating{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:16px; font:500 var(--fs-sm)/1.4 var(--font-body); }
section .rating{ color:var(--fg); }
.rating strong{ font-family:var(--font-display); font-size:1.125rem; }
.reviews{ display:grid; gap:24px; grid-template-columns:minmax(0,1fr); }
.reviews > *{ min-width:0; }
@media (min-width:640px){ .reviews{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1024px){ .reviews{ grid-template-columns:repeat(3, minmax(0,1fr)); } .review--tall{ grid-column:span 2; } .reviews--two{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.review{ margin:0; display:grid; grid-template-rows:auto 1fr auto; gap:16px; padding:28px; border-radius:var(--r-card); background:var(--surface-card); border:1px solid var(--line); }
.review__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.review__text{ position:relative; margin:0; padding-top:28px; font:400 var(--fs-body)/1.65 var(--font-body); color:var(--text); }
.review__text::before{ content:"“"; position:absolute; left:-4px; top:-10px; font:700 3rem/1 var(--font-display); color:var(--teal-ink); }
.review__by{ display:flex; align-items:center; gap:12px; }
.review__av{ width:40px; height:40px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--teal-ink); color:var(--surface-card); font:600 1rem/1 var(--font-display); }
.review__name{ display:block; font:600 .9375rem/1.3 var(--font-display); color:var(--text); }
.review__date{ display:block; font-size:.875rem; color:var(--muted); }
.review--solo{ max-width:560px; margin-inline:auto; }
.one-review{ padding-block:64px; }
.clients{ margin-top:56px; padding-top:32px; border-top:1px solid var(--hair); }
.clients__list{ display:flex; flex-wrap:wrap; gap:8px 0; margin-top:12px; }
.clients__list li{ display:inline-flex; align-items:center; font:600 .9375rem/1.4 var(--font-display); color:var(--fg-muted); }
.clients__list li + li::before{ content:""; width:5px; height:9px; margin:0 14px; background:var(--link); clip-path:polygon(0 0, 100% 30%, 100% 100%, 0 70%); }
@media (max-width:639px){ .clients__list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px 16px; } .clients__list li + li::before{ content:none; } }

/* ------------------------------------------------------------ CTA band (DESIGN §5.11) */
.cta-band{ background:var(--band-cta); padding-block:clamp(72px, 8vw, 112px); overflow:hidden; }
.cta-band__slab{ position:absolute; top:-20%; right:-10%; width:900px; height:140%; background:var(--brand-teal-deep); opacity:.18;
  clip-path:polygon(30% 0, 100% 0, 100% 100%, 0 100%); pointer-events:none; }
.cta-band__in{ position:relative; display:grid; gap:32px; grid-template-columns:minmax(0,1fr); }
.cta-band__txt{ max-width:40rem; }
.cta-band h2{ color:var(--snow); }
.cta-band .lead{ margin-top:16px; color:var(--mist); }
.cta-band__small{ margin-top:16px; font-size:var(--fs-sm); color:var(--mist); }
section .cta-band__small{ color:var(--mist); }
.cta-band--slim{ padding-block:48px; }
@media (min-width:1024px){ .cta-band--slim .cta-band__in{ grid-template-columns:minmax(0,1fr) auto; align-items:center; } }

/* ------------------------------------------------------------ services hub rows */
.rows .wrap{ display:grid; gap:80px; }
.row{ display:grid; gap:32px; grid-template-columns:minmax(0,1fr); align-items:center; }
.row__media{ margin:0; min-width:0; aspect-ratio:3/2; border-radius:var(--r-panel); overflow:hidden; border:1px solid var(--line); background:var(--surface-2); }
.row__media img{ width:100%; height:100%; object-fit:cover; }
.row__txt{ display:grid; gap:16px; justify-items:start; min-width:0; }
.row__txt h2{ font-size:var(--fs-h2); }
@media (min-width:1024px){
  .row{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:0 8.33%; }
  .row--flip .row__media{ order:2; }
}
.row__media--mini{ display:grid; place-items:center; background:var(--ink-900); border-color:var(--ink-700); padding:24px; }
.mini-relay{ display:grid; gap:12px; width:min(100%, 360px); }
.mini-relay li{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; padding:0 18px; border-radius:var(--r-pill);
  border:1.5px solid var(--brand-teal); background:rgba(10,182,176,.16); color:var(--snow); font:600 .9375rem/1.2 var(--font-display); }
.mini-relay li .ic{ color:var(--brand-orange); }
.mini-browser{ width:min(100%, 380px); aspect-ratio:16/10; display:grid; grid-template-rows:28px 1fr auto; gap:10px; padding:0 0 14px; border-radius:12px; background:var(--surface-card); overflow:hidden; }
.mini-browser__bar{ display:flex; gap:6px; align-items:center; padding:0 12px; background:var(--surface-2); }
.mini-browser__bar i{ width:8px; height:8px; border-radius:50%; background:var(--line); }
.mini-browser__hero{ margin:0 14px; border-radius:8px; background:var(--ink-900); }
.mini-browser__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0 14px; height:40px; }
.mini-browser__cards i{ border-radius:6px; background:var(--surface-2); }
.strength{ padding-block:80px; }
.strength .statement{ max-width:32ch; }

/* ------------------------------------------------------------ service page */
.svc-intro__grid{ display:grid; gap:40px; grid-template-columns:minmax(0,1fr); align-items:start; }
.svc-intro__txt p{ margin-top:16px; max-width:65ch; }
@media (min-width:1024px){ .svc-intro__grid{ grid-template-columns:minmax(0,7fr) minmax(0,4fr); gap:0 8.33%; } .glance{ position:sticky; top:calc(var(--nav-h) + 32px); } }
.glance{ border-radius:var(--r-panel); overflow:hidden; background:var(--surface-card); border:1px solid var(--line); }
.glance__media{ margin:0; aspect-ratio:16/9; overflow:hidden; } .glance__media img{ width:100%; height:100%; object-fit:cover; }
.glance__body{ display:grid; gap:16px; padding:28px; }
.glance__time{ font-size:var(--fs-sm); }
.glance__act{ display:grid; gap:8px; }
.feat__grid{ display:grid; gap:48px; grid-template-columns:minmax(0,1fr); align-items:center; }
.feat__grid > *{ min-width:0; }
.feat__grid h2{ margin-bottom:16px; }
.feat__grid p + .ticks{ margin-top:24px; }
@media (min-width:1024px){ .feat__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 64px; } }
.feat__media{ margin:0; border-radius:var(--r-panel); overflow:hidden; aspect-ratio:4/3; } .feat__media img{ width:100%; height:100%; object-fit:cover; }
.builtwith{ margin-top:24px; display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; font:500 var(--fs-sm)/1.5 var(--font-body); color:var(--fg); }
section .builtwith{ color:var(--fg); }
.card--ai .chip{ margin-top:-4px; }
.card--ai{ grid-template-rows:auto auto auto 1fr; }
.why__i{ padding-top:20px; border-top:2px solid var(--link); }
.why__i h3{ font-size:var(--fs-h4); margin-bottom:8px; }
.pkg-sec__more{ margin-top:24px; }
.related{ padding-block:var(--section-y); }
.uxui{ display:grid; gap:24px; }
.uxui__i{ padding:24px; border-radius:var(--r-card); background:var(--surface-card); border:1px solid var(--line); }
.uxui__i h3{ margin-bottom:8px; } .uxui__i p{ margin-bottom:16px; }
.disc__grid{ display:grid; gap:24px; grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:1024px){ .disc__grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.disc__grid figure{ margin:0; aspect-ratio:1; border-radius:var(--r-card); overflow:hidden; } .disc__grid img{ width:100%; height:100%; object-fit:cover; }
.disc__t{ margin-top:12px; font:600 var(--fs-h4)/1.3 var(--font-display); }
section .disc__t{ color:var(--fg); }
.bars__h{ margin-bottom:24px; font-size:var(--fs-h3); }

/* process steps (DESIGN §5.8) */
.steps{ --rail:1; position:relative; display:grid; gap:32px; grid-template-columns:minmax(0,1fr); }
@media (min-width:1024px){
  .steps{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:48px; }
  .steps::before, .steps::after{ content:""; position:absolute; left:22px; right:22px; top:20px; height:2px; background:var(--hair); }
  .steps::after{ background:var(--link); transform-origin:0 50%; transform:scaleX(var(--rail)); }
}
.step{ position:relative; z-index:1; display:grid; gap:10px; align-content:start; }
.step__n{ width:44px; height:40px; display:grid; place-items:center; font:600 .9375rem/1 var(--font-display); font-variant-numeric:tabular-nums;
  background:var(--link); color:var(--bg); clip-path:polygon(0 0, 100% 25%, 100% 100%, 0 75%); transition:background-color .2s, color .2s; }
.step[data-on="0"] .step__n{ background:var(--hair); color:var(--fg-muted); }
.step h3{ font-size:var(--fs-h4); margin-top:6px; }

/* ------------------------------------------------------------ work page */
.filters{ position:sticky; top:var(--nav-h); z-index:5; background:var(--surface); border-bottom:1px solid var(--line); margin:calc(-1 * var(--section-y)) 0 40px; }
.filters__in{ display:flex; flex-wrap:wrap; gap:8px; padding-block:10px; }
@media (max-width:639px){ .filters__in{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-inline:2px; } .filters__in::-webkit-scrollbar{ display:none; } .filters .chip--btn{ flex:none; } }
.also{ margin-top:48px; padding:28px; border-radius:var(--r-card); border:1px dashed var(--line-input); }
.also__h{ font-size:var(--fs-h4); margin-bottom:12px; }
.also li{ padding:4px 0; color:var(--fg); }

/* ------------------------------------------------------------ about */
.story__grid{ display:grid; gap:32px; grid-template-columns:minmax(0,1fr); }
.story__txt p{ margin-top:16px; max-width:62ch; }
.story__n{ font:700 var(--fs-price)/1 var(--font-display); color:var(--teal-ink); font-variant-numeric:tabular-nums; margin-top:8px; }
@media (min-width:1024px){ .story__grid{ grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:0 8.33%; } .story__year{ position:sticky; top:calc(var(--nav-h) + 40px); align-self:start; } }
.card--vm{ grid-template-rows:auto auto 1fr; }
.vm__glyph{ width:24px; height:14px; background:var(--link); clip-path:polygon(0 0, 100% 58%, 100% 100%, 0 42%); }
.vm__glyph--b{ background:var(--orange-ink); }
.facts-sec .statement{ max-width:30ch; margin-bottom:40px; }
.proof__grid--about{ padding:32px 0 0; border-top:1px solid var(--ink-700); }
@media (min-width:1024px){ .proof__grid--about{ padding-right:0; } }
.mosaic__grid{ margin-bottom:8px; }

/* ------------------------------------------------------------ pricing */
.note{ display:inline-block; font-weight:600; color:var(--fg); }
.eng .card--eng{ grid-template-rows:auto auto 1fr; }
.notes{ margin-top:32px; display:grid; gap:4px; color:var(--fg-muted); font-size:var(--fs-sm); }
.notes li{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; }

/* ------------------------------------------------------------ contact */
.contact__grid{ display:grid; gap:32px; grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:1024px){ .contact__grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); } }
@media (max-width:1023px){ .cpanel .wacard{ } }
.cpanel{ display:grid; gap:24px; padding:32px; border-radius:var(--r-panel); background:var(--ink-900); color:var(--snow); }
@media (max-width:767px){ .cpanel{ padding:24px; } }
.wacard{ display:grid; gap:12px; justify-items:start; padding:24px; border-radius:var(--r-card); background:var(--ink-800); border:1px solid rgba(37,211,102,.45); }
.wacard__disc{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; background:var(--wa); color:#FFFFFF; }
.wacard__h{ font-size:var(--fs-h3); color:var(--snow); }
.wacard p{ color:var(--mist); }
.cpanel__rows{ display:grid; gap:16px; }
.cpanel__rows li{ display:grid; grid-template-columns:20px minmax(0,1fr); gap:14px; align-items:start; color:var(--snow); }
.cpanel__rows .ic{ color:var(--brand-teal); margin-top:12px; }
.cpanel__rows a{ display:inline-flex; align-items:center; min-height:44px; color:var(--snow); }
.cpanel__rows address{ padding-top:10px; color:var(--snow); }
.cpanel .hours{ margin:10px 0 0; color:var(--mist); }
.cpanel__links{ display:grid; gap:8px; padding-top:24px; border-top:1px solid var(--ink-700); }
@media (max-width:1023px){ .contact__grid .cpanel{ order:-1; } }

/* ------------------------------------------------------------ FAQ */
.faq{ display:grid; }
.faq__i{ border-bottom:1px solid var(--hair); }
.faq__i summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; padding:18px 0; cursor:pointer; list-style:none; }
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__i summary h3{ font-size:var(--fs-h4); line-height:1.4; }
.faq__ic{ position:relative; width:20px; height:20px; flex:none; }
.faq__ic::before, .faq__ic::after{ content:""; position:absolute; left:0; right:0; top:9px; height:2px; background:var(--link); transition:rotate .2s var(--ease-std); }
.faq__ic::after{ rotate:90deg; }
.faq__i[open] .faq__ic::after{ rotate:0deg; }
.faq__a{ padding:0 0 24px; display:grid; gap:12px; max-width:65ch; }
.faq__i::details-content{ height:0; overflow:clip; transition:height .24s var(--ease-std), content-visibility .24s allow-discrete; }
.faq__i[open]::details-content{ height:auto; }
.faq-sec__grid{ display:grid; gap:24px; }
.faqpage__grid{ display:grid; gap:32px; grid-template-columns:minmax(0,1fr); }
@media (min-width:1024px){ .faqpage__grid{ grid-template-columns:minmax(0,3fr) minmax(0,8fr); gap:0 64px; } .faqnav{ position:sticky; top:calc(var(--nav-h) + 32px); align-self:start; } .faqnav ul{ display:grid; gap:8px; } }
.faqnav ul{ display:flex; flex-wrap:wrap; gap:8px; }
.faqgroup + .faqgroup{ margin-top:56px; }
.faqgroup h2{ font-size:var(--fs-h3); margin-bottom:8px; scroll-margin-top:calc(var(--nav-h) + 24px); }
.faqgroup{ scroll-margin-top:calc(var(--nav-h) + 24px); }

/* ------------------------------------------------------------ insights, prose, legal */
.post-card{ display:grid; gap:0; grid-template-columns:minmax(0,1fr); border-radius:var(--r-panel); overflow:hidden; background:var(--surface-card); border:1px solid var(--line); max-width:960px; }
@media (min-width:768px){ .post-card{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); } }
.post-card__media{ display:block; aspect-ratio:16/11; overflow:hidden; } .post-card__media img{ width:100%; height:100%; object-fit:cover; }
.post-card__body{ display:grid; gap:12px; align-content:center; padding:32px; }
.post-card h2{ font-size:var(--fs-h3); } .post-card h2 a{ color:var(--text); text-decoration:none; } .post-card h2 a:hover{ text-decoration:underline; }
.prose__in{ max-width:720px; }
.prose__cover{ margin:0 0 40px; border-radius:var(--r-card); overflow:hidden; aspect-ratio:16/9; } .prose__cover img{ width:100%; height:100%; object-fit:cover; }
.prose h2{ font-size:var(--fs-h3); margin:40px 0 12px; }
.prose p{ margin-top:16px; font-size:1.0625rem; line-height:1.75; color:var(--text); }
.prose{ background:var(--surface); padding-block:var(--section-y); }
.legal__grid{ display:grid; gap:40px; grid-template-columns:minmax(0,1fr); }
@media (min-width:1024px){ .legal__grid{ grid-template-columns:minmax(0,3fr) minmax(0,8fr); gap:0 64px; } .toc{ position:sticky; top:calc(var(--nav-h) + 32px); align-self:start; max-height:calc(100vh - var(--nav-h) - 64px); overflow:auto; } }
.toc summary{ display:flex; align-items:center; min-height:44px; font:600 var(--fs-h4)/1.3 var(--font-display); cursor:pointer; color:var(--fg); }
.toc ol{ display:grid; gap:0; margin-top:8px; }
.toc a{ display:flex; align-items:center; min-height:44px; color:var(--fg-muted); text-decoration:none; font-size:var(--fs-sm); }
.toc a:hover{ color:var(--link); text-decoration:underline; }
.legal__body{ max-width:72ch; }
.legal__body--solo{ max-width:72ch; }
.legal__body h2{ font-size:var(--fs-h3); margin:40px 0 12px; scroll-margin-top:calc(var(--nav-h) + 24px); }
.legal__body h2:first-child{ margin-top:0; }
.legal__body p{ margin-top:12px; color:var(--text); }
.legal__list{ display:grid; gap:10px; margin-top:12px; padding-left:20px; list-style:disc; color:var(--text); }
.linkrow-sec{ padding-block:40px; }
.linkrow-sec__in{ display:flex; flex-wrap:wrap; gap:8px 32px; }
.draft-banner{ position:relative; z-index:2; margin-top:var(--nav-h); background:var(--surface-2); border-left:4px solid var(--orange-ink); }
.draft-banner .wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; padding-block:14px; }
.draft-banner p{ color:var(--text); font-weight:600; }
.draft-banner .chip{ border:1px solid var(--orange-ink); background:transparent; color:var(--orange-ink); }
.draft-banner + .page-hero{ padding-top:48px; }

/* ------------------------------------------------------------ 404 */
.nf{ min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:calc(var(--nav-h) + 40px) 0 64px; }
.nf__in{ display:grid; justify-items:start; gap:16px; }
.nf__mark{ width:auto; height:min(200px, 40vw); margin-bottom:16px; overflow:visible; }
.nf__guide{ fill:none; stroke:var(--brand-orange); stroke-width:4; stroke-dasharray:14 12; opacity:.5; }
.nf__b{ transform:translate(48px, 28px) rotate(6deg); transform-box:fill-box; transform-origin:50% 50%; }
.nf h1{ font-size:var(--fs-page-hero); color:var(--snow); }
.nf .lead{ color:var(--mist); }
.nf__links{ display:flex; flex-wrap:wrap; gap:4px 20px; margin-top:24px; }
.nf__links a{ display:inline-flex; align-items:center; min-height:44px; min-width:44px; color:var(--brand-teal); }

/* 45-scenes.css */
/* All scenes ship FINAL (DESIGN §6). Captions are always opacity 1 — only colour/fill/border change. */

/* ------------------------------------------------------------ The Relay (AI page) */
.relay-sec__grid{ display:grid; gap:48px; grid-template-columns:minmax(0,1fr); align-items:center; }
.relay-sec__txt p{ margin-top:16px; max-width:52ch; }
.relay-sec__txt .tlink{ margin-top:16px; }
@media (min-width:1024px){ .relay-sec__grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:0 64px; } }
.relay-sec.is-pinned{ height:100vh; height:100svh; padding:calc(var(--nav-h) + 32px) 0 32px; display:flex; align-items:center; }
.relay-sec.is-pinned .wrap{ width:min(100% - 2*var(--gutter), var(--wrap)); }
.relay{ position:relative; margin:0; padding-left:28px; min-width:0; }
.relay__spine{ position:absolute; left:6px; top:32px; bottom:32px; width:2px; background:var(--ink-700); }
.relay__spine span{ position:absolute; inset:0; background:var(--brand-teal); transform-origin:50% 0; }
.relay__rows{ display:grid; gap:24px; }
.relay__row{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr); align-items:center; min-height:64px; }
@media (max-width:1279px){ .relay__row{ grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr); } }
.relay__ev, .relay__re{ position:relative; display:flex; align-items:center; gap:10px; min-height:56px; padding:8px 18px; border-radius:28px; min-width:0;
  border:1.5px solid rgba(236,245,244,.18); color:var(--mist); font:600 1rem/1.25 var(--font-display);
  transition:border-color .2s var(--ease-std), background-color .2s var(--ease-std), color .2s var(--ease-std); }
.relay__node{ position:absolute; left:-29px; top:50%; width:12px; height:12px; margin-top:-6px; background:var(--ink-700); clip-path:polygon(0 0, 100% 30%, 100% 100%, 0 70%); }
.relay__ic{ display:none; flex:none; }
@media (min-width:1280px){ .relay__ic{ display:block; } }
.relay__ok{ flex:none; opacity:0; transition:opacity .2s; }
.relay__arm{ width:100%; height:64px; overflow:visible; }
.relay__arm--v{ display:none; }
.relay__track{ fill:none; stroke:var(--ink-700); stroke-width:2; vector-effect:non-scaling-stroke; }
.relay__flow{ fill:none; stroke:var(--brand-teal); stroke-width:2; vector-effect:non-scaling-stroke; stroke-dasharray:1000; stroke-dashoffset:0; }
.relay__pkt{ fill:var(--brand-orange); opacity:0; }
.relay__pkt[data-show="1"]{ opacity:1; }
/* states */
.relay__row[data-state="event"] .relay__ev, .relay__row[data-state="done"] .relay__ev{ border-color:var(--brand-teal); background:rgba(10,182,176,.16); color:var(--snow); }
.relay__row[data-state="event"] .relay__node, .relay__row[data-state="done"] .relay__node{ background:var(--brand-teal); }
.relay__row[data-state="done"] .relay__flow{ stroke:var(--brand-orange); }
.relay__row[data-state="done"] .relay__re{ border-color:var(--brand-orange); background:rgba(248,144,31,.16); color:var(--snow); }
.relay__row[data-state="done"] .relay__ok{ opacity:1; color:var(--brand-orange); }
.relay__row.is-active .relay__ev{ box-shadow:0 0 0 3px rgba(10,182,176,.25); }
@media (max-width:639px){
  .relay__row{ grid-template-columns:minmax(0,1fr); gap:0; }
  .relay__arm{ display:none; }
  .relay__arm--v{ display:block; width:40px; height:40px; margin-left:24px; }
  .relay__re{ margin-left:24px; }
}

/* ------------------------------------------------------------ Select → Customise → Launch (prebuilt) */
.build-sec__grid{ display:grid; gap:40px; grid-template-columns:minmax(0,1fr); align-items:center; }
@media (min-width:1024px){ .build-sec__grid{ grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:0 8.33%; } }
.build__steps{ display:grid; gap:12px; }
.build__step{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:4px 16px; padding:16px 16px 16px 0; border-left:3px solid transparent; padding-left:16px; transition:border-color .2s; }
.build__step .step__n{ grid-row:span 2; }
.build__step h3{ font-size:var(--fs-h4); align-self:center; }
.build__step p{ grid-column:2; font-size:var(--fs-sm); }
.build__step.is-active{ border-left-color:var(--link); }
.browser{ position:relative; margin:0; width:100%; max-width:640px; aspect-ratio:16/10; border-radius:var(--r-panel); overflow:hidden; background:var(--surface-card); border:1px solid var(--line);
  display:grid; grid-template-rows:40px 2px 1fr; box-shadow:var(--shadow-hover); }
.browser__bar{ display:flex; align-items:center; gap:6px; padding:0 14px; background:var(--surface-2); }
.browser__bar > i{ width:9px; height:9px; border-radius:50%; background:var(--line); flex:none; }
.browser__addr{ display:flex; align-items:center; gap:6px; margin-left:12px; width:44%; min-width:0; height:24px; padding:0 10px; border-radius:var(--r-pill); background:var(--surface-card);
  font:500 .8125rem/1 var(--font-body); color:var(--muted); overflow:hidden; white-space:nowrap; }
.browser__url{ overflow:hidden; text-overflow:ellipsis; }
.browser__lock{ color:var(--teal-ink); }
.browser__live{ display:inline-flex; align-items:center; gap:6px; margin-left:auto; font:600 .8125rem/1 var(--font-display); color:var(--text); }
.browser__live i{ width:8px; height:8px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 1px var(--ink-950); }
.browser__prog{ background:var(--link); transform-origin:0 50%; }
.browser__stage{ grid-row:3; grid-column:1; padding:16px; opacity:0; visibility:hidden; transition:opacity .24s var(--ease-std), visibility .24s; min-height:0; }
.browser[data-step="1"] [data-for="1"], .browser[data-step="2"] [data-for="2"], .browser[data-step="3"] [data-for="3"]{ opacity:1; visibility:visible; }
.browser[data-step="1"] .browser__live, .browser[data-step="2"] .browser__live{ visibility:hidden; }
.browser__chips{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; height:100%; }
.browser__chips li{ display:flex; align-items:center; justify-content:center; gap:4px; padding:6px; border-radius:8px; background:var(--surface-2); text-align:center;
  font:500 .8125rem/1.2 var(--font-body); color:var(--text); }
.browser__chips li.is-pick{ box-shadow:inset 0 0 0 2px var(--brand-orange-deep); }
.sk{ display:grid; grid-template-rows:14% 42% 1fr auto; gap:10px; height:100%; }
.sk > span{ display:block; border-radius:8px; background:var(--surface-2); transition:background-color .32s var(--ease-std); }
.sk__hero{ position:relative; }
.sk__btn{ position:absolute; left:8%; bottom:16%; width:22%; height:18%; border-radius:4px; background:var(--line); transition:background-color .32s; }
.sk__cards{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:8px; background:none !important; }
.sk__cards i{ border-radius:6px; background:var(--surface-2); }
.sk__sw{ display:flex !important; gap:6px; background:none !important; height:14px; }
.sk__sw i{ width:14px; height:14px; border-radius:50%; background:var(--line); transition:background-color .32s; }
.browser__stage--live .sk__nav, .browser__stage--live .sk__hero{ background:var(--ink-900); }
.browser__stage--live .sk__btn{ background:var(--cta); }
.browser__stage--live .sw1{ background:var(--ink-900); } .browser__stage--live .sw2{ background:var(--brand-teal); } .browser__stage--live .sw3{ background:var(--brand-orange); }
[data-for="2"] .sk__nav, [data-for="2"] .sk__hero{ background:var(--ink-800); }
[data-for="2"] .sw1{ background:var(--ink-900); } [data-for="2"] .sw2{ background:var(--brand-teal); } [data-for="2"] .sw3{ background:var(--brand-orange); }
@media (max-width:639px){ .browser__chips{ grid-template-columns:repeat(3, minmax(0,1fr)); } .browser__chips li{ font-size:.75rem; } }

/* ------------------------------------------------------------ sitemap + shop flow */
.sitemap{ position:relative; margin:0; aspect-ratio:1000/360; width:100%; }
.sitemap svg{ position:absolute; inset:0; width:100%; height:100%; }
.sm__edge{ fill:none; stroke:var(--teal-ink); stroke-width:1.5; vector-effect:non-scaling-stroke; stroke-dasharray:1000; stroke-dashoffset:0; }
.sm__node{ position:absolute; translate:-50% -50%; display:grid; place-items:center; min-width:88px; height:36px; padding:0 10px; border-radius:8px;
  background:var(--surface-card); border:1.5px solid var(--teal-ink); font:600 .8125rem/1 var(--font-display); color:var(--text); white-space:nowrap; transition:border-color .2s; }
.sm__node[data-on="0"]{ border-color:var(--line); }
@media (max-width:1279px){ .sm__node{ min-width:0; padding:0 8px; } }
@media (max-width:639px){ .sitemap{ display:none; } }   /* review P2-M2: on phones the chips read as dead buttons; the copy beside it says it */
.shopflow{ position:relative; margin:0 0 8px; }
.shopflow__nodes{ position:relative; z-index:1; display:grid; gap:16px; grid-template-columns:minmax(0,1fr); }
@media (min-width:768px){ .shopflow__nodes{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:48px; } }
.shopflow__nodes li{ display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:var(--r-card); background:var(--surface-card); border:1.5px solid var(--teal-ink);
  font:600 var(--fs-h4)/1.3 var(--font-display); color:var(--text); transition:border-color .2s; }
.shopflow__nodes li[data-on="0"]{ border-color:var(--line); }
.shopflow__i{ width:40px; height:40px; flex:none; display:grid; place-items:center; color:var(--teal-ink); background:rgba(6,113,110,.10);
  clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 7px, 100% 100%, 0 100%); }
.shopflow__line{ display:none; }
@media (min-width:768px){ .shopflow__line{ display:block; position:absolute; left:8%; right:8%; top:50%; width:84%; height:8px; margin-top:-4px; } }
.sf__track{ stroke:var(--line); stroke-width:2; vector-effect:non-scaling-stroke; }
.sf__flow{ fill:none; stroke:var(--brand-orange-deep); stroke-width:2; vector-effect:non-scaling-stroke; stroke-dasharray:1000; stroke-dashoffset:0; }

/* ------------------------------------------------------------ growth bars */
.bars{ margin:0; }
.bars__list{ display:grid; gap:18px; }
.bars__list li{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px; }
.bars__n{ font:600 .9375rem/1.3 var(--font-display); color:var(--fg); }
.bars__track{ position:relative; height:12px; border-radius:6px; background:var(--surface-card); border:1px solid var(--line); }
.bars__fill, .bars__lead{ position:absolute; top:-1px; bottom:-1px; border-radius:6px; transform-origin:0 50%; }
.bars__fill{ left:var(--l); width:var(--w); background:var(--teal-ink); }
.bars__lead{ left:0; width:var(--w); background:color-mix(in srgb, var(--teal-ink) 22%, transparent); }
.bars__t{ font-size:var(--fs-sm); color:var(--fg-muted); }
.bars__axis{ position:relative; height:24px; margin-top:14px; border-top:1px solid var(--line); font:500 .8125rem/1 var(--font-body); color:var(--muted); font-variant-numeric:tabular-nums; }
.bars__axis span{ position:absolute; top:8px; translate:-50% 0; }
.bars__axis span:first-child{ translate:none; }
.bars__axis .bars__unit{ right:0; left:auto; translate:none; top:28px; }
.bars figcaption{ margin-top:24px; font-size:var(--fs-sm); color:var(--muted); }

/* 50-motion.css */
/* ============================================================================
   MOTION GATE. html.js-motion is added ONLY by the inline head script, and only when the desktop
   motion query matches — never typed into markup (K3). `:not([data-done])` IS LOAD-BEARING: without
   it the gate re-applies itself when an inline transform is cleared (stranded 24px low at opacity 1).
   ========================================================================== */
html.js-motion [data-reveal]:not([data-done]){ opacity:0; }
html.js-motion [data-reveal="up"]:not([data-done]){ transform:translateY(var(--reveal-y)); }
html.js-motion [data-clip]:not([data-done]){ clip-path:inset(0 0 100% 0 round 14px); }
html.js-motion [data-clip="l"]:not([data-done]){ clip-path:inset(0 0 0 12% round 20px); }
html.js-motion [data-clip="r"]:not([data-done]){ clip-path:inset(0 12% 0 0 round 20px); }
@media (max-width:1023px), (prefers-reduced-motion:reduce){
  html.js-motion [data-reveal], html.js-motion [data-clip]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.001ms !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}

/* 60-form.css */
.form{ padding:40px; border-radius:var(--r-panel); background:var(--surface-card); border:1px solid var(--line); min-width:0; }
@media (max-width:767px){ .form{ padding:24px; } }
.form__h{ font-size:var(--fs-h3); }
.form__intro{ margin:8px 0 24px; font-size:var(--fs-sm); color:var(--muted); }
section .form__intro{ color:var(--muted); }
.form__summary{ margin-bottom:24px; padding:16px 20px; border-left:4px solid var(--error); background:var(--surface-card); border-radius:var(--r-btn); box-shadow:inset 0 0 0 1px var(--line); }
.form__summary p{ color:var(--text); } .form__summary ul{ margin-top:8px; display:grid; gap:4px; } .form__summary a{ color:var(--error); display:inline-flex; min-height:32px; align-items:center; }
.form__summary[hidden]{ display:none; }
.form__row{ display:grid; gap:0 20px; grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){ .form__row{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.field{ display:grid; gap:8px; margin-bottom:20px; min-width:0; }
.field label{ font:600 .9375rem/1.3 var(--font-body); color:var(--text); }
.req{ color:var(--error); }
.field input, .field select, .field textarea{ width:100%; min-width:0; min-height:52px; padding:0 16px; font:400 1rem/1.5 var(--font-body); color:var(--text);
  background:#FFFFFF; border:1px solid var(--line-input); border-radius:var(--r-btn); transition:border-color .16s var(--ease-std); }
.field textarea{ min-height:144px; padding:12px 16px; resize:vertical; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--muted); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{ border-color:var(--focus-light); outline:3px solid var(--focus-light); outline-offset:2px; }
.field [aria-invalid="true"]{ border:2px solid var(--error); }
.field__err{ font:500 .875rem/1.4 var(--font-body); color:var(--error); }
section .field__err{ color:var(--error); }
.field__err[hidden]{ display:none; }
.select{ position:relative; }
.select select{ appearance:none; -webkit-appearance:none; padding-right:44px; text-overflow:ellipsis; }
.select__chev{ position:absolute; right:14px; top:50%; translate:0 -50%; color:var(--muted); pointer-events:none; }
.field--check{ margin-top:4px; }
.check{ position:relative; display:grid; grid-template-columns:24px minmax(0,1fr); gap:12px; align-items:start; min-height:44px; padding-top:10px; font:400 .9375rem/1.5 var(--font-body); color:var(--text); cursor:pointer; }
.check input{ position:absolute; opacity:0; width:24px; height:24px; margin:0; left:0; top:10px; }
.check__box{ width:24px; height:24px; border:1.5px solid var(--line-input); border-radius:var(--r-btn); display:grid; place-items:center; color:transparent; background:#FFFFFF; }
.check input:checked + .check__box{ background:var(--teal-ink); border-color:var(--teal-ink); color:#FFFFFF; }
.check input:focus-visible + .check__box{ outline:3px solid var(--focus-light); outline-offset:2px; }
.check input[aria-invalid="true"] + .check__box{ border:2px solid var(--error); }
.check a{ color:var(--teal-ink); }
.form__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
@media (max-width:767px){ .form__actions{ flex-direction:column; } .form__actions .btn{ width:100%; } }
.form__status{ margin-top:20px; padding:16px 20px; background:var(--surface-2); border-left:4px solid var(--teal-ink); border-radius:var(--r-btn); display:grid; gap:12px; }
.form__status p{ color:var(--text); }
.form__status[hidden]{ display:none; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* 70-footer.css */
.footer{ background:var(--ink-950); color:var(--mist); padding:72px 0 32px; border-top:1px solid var(--ink-700); }
.footer__grid{ display:grid; gap:48px; grid-template-columns:minmax(0,1.5fr) repeat(3, minmax(0,1fr)); padding-bottom:48px; }
.footer__brand p{ margin-top:20px; max-width:38ch; font-size:var(--fs-sm); color:var(--mist); }
.footer__brand address{ margin-top:16px; font-size:var(--fs-sm); line-height:1.6; }
.hours{ display:grid; gap:2px; margin:16px 0 0; font-size:var(--fs-sm); }
.hours div{ display:flex; gap:12px; }
.hours dt{ min-width:84px; } .hours dd{ margin:0; font-variant-numeric:tabular-nums; }
.footer__h{ display:flex; align-items:center; gap:10px; margin-bottom:12px; color:var(--mist);
  font:600 var(--fs-label)/1.3 var(--font-display); letter-spacing:.14em; text-transform:uppercase; }
.footer ul{ display:grid; gap:4px; }
.footer li a{ display:inline-flex; align-items:center; gap:6px; min-height:44px; min-width:44px; color:var(--mist); text-decoration:none; font-size:var(--fs-sm); }
.footer li a:hover{ color:var(--snow); text-decoration:underline; }
.footer__touch .btn{ margin-bottom:8px; }
.footer__bot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px; padding-top:24px; border-top:1px solid var(--ink-700); font-size:var(--fs-sm); }
.footer .footer__legal{ display:flex; flex-wrap:wrap; gap:4px 24px; }
@media (min-width:1024px){ .footer__bot{ padding-right:96px; } }
@media (max-width:1023px){ .footer__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:767px){
  .footer{ padding-bottom:96px; }
  .footer__grid{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .footer__col:not(.footer__touch) ul{ grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:16px; }
  .footer__bot{ flex-direction:column; align-items:flex-start; }
}

/* 80-pricing.css */
.prices{ display:grid; gap:24px; grid-template-columns:minmax(0,1fr); align-items:stretch; }
.prices > *{ min-width:0; }
@media (min-width:768px){ .prices{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1280px){ .prices{ grid-template-columns:repeat(4, minmax(0,1fr)); } .prices:has(> :nth-child(3):last-child){ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.price{ position:relative; display:grid; grid-template-rows:auto auto auto 1fr auto; gap:20px; padding:32px; border-radius:var(--r-panel);
  background:var(--surface-card); border:1px solid var(--line); color:var(--text); }
.price h3{ font-size:var(--fs-h3); }
.price__unit{ margin-top:4px; font-size:var(--fs-sm); color:var(--muted); }
section .price__unit{ color:var(--muted); }
.price__row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.price__amt{ font:700 var(--fs-price)/1 var(--font-display); letter-spacing:-.02em; color:var(--text); font-variant-numeric:tabular-nums lining-nums; white-space:nowrap; }
.price__meta{ font-size:var(--fs-sm); color:var(--muted); }
.price__del{ display:flex; align-items:center; gap:8px; font-size:var(--fs-sm); color:var(--text); }
section .price__del{ color:var(--text); }
.price__del .ic{ color:var(--teal-ink); }
.price__act{ display:grid; gap:4px; justify-items:center; }
.price--compact{ grid-template-rows:auto auto auto 1fr; }
.price--pop{ background:var(--ink-900); border:1px solid color-mix(in srgb, var(--brand-orange) 60%, transparent); color:var(--snow); }
.price--pop h3, .price--pop .price__amt, .price--pop .price__del{ color:var(--snow); }
.price--pop .price__unit, .price--pop .price__meta{ color:var(--mist); }
.price--pop .price__del .ic{ color:var(--brand-teal); }
.price--pop .tlink{ color:var(--brand-teal); }
@media (min-width:1280px){ .price--pop:not(.price--compact){ margin-top:-12px; padding-bottom:44px; } }
.price--custom{ background:var(--surface-2); border:1px dashed var(--line-input); grid-template-rows:auto auto 1fr auto; }
.price__quoted{ font:600 var(--fs-h3)/1.3 var(--font-display); color:var(--text); }
section .price__quoted{ color:var(--text); }
.price__eng{ display:grid; gap:8px; align-content:start; font-size:var(--fs-sm); color:var(--text); }
@media (max-width:767px){ .price{ padding:24px; } }