/* ==========================================================================
   JOLA · site.css
   Shared tokens, reset, base type and every shared component.
   Contract: docs/brief.md sections 4 and 5. Page-specific styles live in a
   single <style> block per page, scoped under .page-{slug}.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* Brand */
  --navy-950:#020d17;
  --navy-900:#03121f;
  --navy-850:#04182b;
  --navy-800:#062138;
  --navy-700:#0a2f4c;
  --blue:#2ea8e7;
  --blue-bright:#4fbff5;
  --cyan:#63e6ff;
  --orange:#f35a22;
  --orange-soft:#ff8154;
  --paper:#eef3f7;
  --paper-ink:#03121f;
  --paper-muted:#40586b;

  /* Text on navy */
  --text:#e9f2fa;
  --text-strong:#ffffff;
  --text-muted:#93aec2;
  --text-dim:#6a869b;

  /* Lines and glass */
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.15);
  --glass:rgba(255,255,255,.035);
  --glass-2:rgba(255,255,255,.06);

  /* Semantic */
  --surface-0:var(--navy-900);
  --surface-1:var(--navy-800);
  --surface-2:var(--navy-700);
  --link:var(--blue-bright);
  --focus:var(--cyan);
  --live:#3ddc97;
  --soon:var(--orange-soft);
  --grad-signal:linear-gradient(135deg,var(--cyan),var(--blue));

  /* Type */
  /* Two families only. Newsreader (serif, weight 400 + italic) is display-only: H1s,
     case titles and section titles at 40px and up. General Sans does everything else,
     including the small uppercase labels. No monospace. */
  --font-serif:'Newsreader',Georgia,'Times New Roman',serif;
  --font-sans:'General Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:var(--font-sans);
  --font-label:var(--font-sans);
  /* legacy aliases: anything still pointing at these resolves to the sans */
  --font-display:var(--font-sans);
  --font-mono:var(--font-sans);

  --fs-mega: clamp(3.4rem, 1.2rem + 9vw, 10.5rem);
  --fs-d1:   clamp(2.9rem, 1.4rem + 6vw, 7rem);
  --fs-d2:   clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem);
  --fs-d3:   clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
  --fs-h4:   clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --fs-lede: clamp(1.15rem, 1.05rem + .5vw, 1.45rem);
  --fs-body: 1.0625rem;
  --fs-small:.9375rem;
  --fs-meta: .75rem;
  --fs-micro:.6875rem;

  /* Space and layout */
  --space-3xs:4px; --space-2xs:8px; --space-xs:12px; --space-s:16px; --space-m:24px;
  --space-l:32px;  --space-xl:48px; --space-2xl:72px; --space-3xl:112px; --space-4xl:160px;
  --section-y: clamp(80px, 6vw + 48px, 168px);
  --gutter: clamp(20px, 2.5vw, 40px);
  --maxw: 1360px;
  --maxw-text: 760px;
  --grid-cols: 12; --grid-gap: clamp(16px, 2vw, 32px);
  --header-h: 64px;

  /* Shape */
  --r-xs:6px; --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:32px; --r-pill:999px;
  --hairline:1px solid var(--line);
  --shadow-1:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-2:0 1px 0 rgba(255,255,255,.05) inset, 0 30px 60px -30px rgba(0,0,0,.75);
  --shadow-device:0 50px 100px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06);
  --glow-signal:0 10px 24px -16px rgba(2,13,23,.55);

  /* Motion */
  --dur-1:120ms; --dur-2:220ms; --dur-3:420ms; --dur-4:800ms; --dur-5:1400ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-settle:cubic-bezier(.22,1,.36,1); /* exponential ease-out; no overshoot */

  color-scheme:dark;
}
@media (min-width:1024px){ :root{ --header-h:76px; } }

/* Product accents: only inside that product's own modules and case page */
.acc-benvena    { --acc:#cbdc3c; --acc-ink:#1a1f0a; --acc-bg:#f3efe6; }
.acc-escapeto   { --acc:#e4632b; --acc-ink:#ffffff; --acc-bg:#1d2333; }
.acc-camping    { --acc:#3fae6a; --acc-ink:#04140b; --acc-bg:#0d2418; }
.acc-ozbbq      { --acc:#d2241c; --acc-ink:#ffffff; --acc-bg:#16171a; }
.acc-spambuster { --acc:#8a2bb0; --acc-ink:#ffffff; --acc-bg:#2e133c; }
.acc-cartspy    { --acc:#63e6ff; --acc-ink:#03121f; --acc-bg:#061b2e; }

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
@view-transition{ navigation:auto; }
::view-transition-old(root),::view-transition-new(root){ animation-duration:240ms; animation-timing-function:var(--ease-out); }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 16px); }
/* smooth only for user-initiated in-page jumps (focus-within), never for scripted scrolls */
@media (prefers-reduced-motion:no-preference){ html:focus-within{ scroll-behavior:smooth; } }
body{
  margin:0; min-height:100vh;
  font-family:var(--font-body); font-size:var(--fs-body); line-height:1.55; letter-spacing:0;
  color:var(--text); background:var(--navy-900);
  font-synthesis:none; /* never fake a bold or italic: Newsreader ships at 400 only */
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,video,picture{ display:block; max-width:100%; }
img{ height:auto; }
h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote,dl,dd{ margin:0; }
ul[role="list"],ol[role="list"]{ list-style:none; padding:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
a{ color:inherit; text-decoration-thickness:1px; text-underline-offset:.22em; }
p{ text-wrap:pretty; }
h1,h2,h3,h4,h5,h6{ text-wrap:balance; color:var(--text-strong); }
h1{ font-family:var(--font-serif); font-weight:400; font-variation-settings:"opsz" 72; }
strong,b{ font-weight:600; color:var(--text-strong); }
/* Emphasis: in body copy it is weight, never italic. In a serif headline it is the one
   serif-italic phrase (same weight). */
em{ font-style:normal; font-weight:500; color:var(--text-strong); }
:is(h1,h2,h3,h4,h5,h6) em{ font-weight:inherit; }
h1 em,h1 .grad,.serif em,.t-mega em,.t-d1 em,.t-d2 em,.sec-head h2 em,.sec-head h2 .grad,.cta-band h2 em,.cta-band h2 .grad{ font-style:italic; font-weight:400; }
@media (max-width:599.98px){ body{ font-size:1rem; } }
hr{ border:0; border-top:var(--hairline); margin:0; }

::selection{ background:var(--cyan); color:var(--navy-900); }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:inherit; }
:focus:not(:focus-visible){ outline:none; }
html{ scrollbar-color:var(--navy-700) var(--navy-950); }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:var(--navy-950); }
::-webkit-scrollbar-thumb{ background:var(--navy-700); border-radius:12px; border:3px solid var(--navy-950); }
::-webkit-scrollbar-thumb:hover{ background:#12406a; }
input,textarea,select{ caret-color:var(--cyan); }

.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; }

/* Atmosphere: grain over everything, faint grid near the top */
body::after{
  content:""; position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grid-bg{ position:relative; isolation:isolate; }
.grid-bg::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:none;
  background-size:66px 66px; background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 60% 30%,#000 30%,transparent 85%);
          mask-image:radial-gradient(ellipse 90% 70% at 60% 30%,#000 30%,transparent 85%);
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-text{ max-width:var(--maxw-text); }
.grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--grid-gap); }
@media (min-width:480px){ .grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:760px){ .grid{ grid-template-columns:repeat(12,minmax(0,1fr)); } }

.section{ position:relative; padding-block:var(--section-y); }
.surface-900{ background:var(--navy-900); }
.surface-850{ background:var(--navy-850); }
.surface-950{ background:var(--navy-950); }
.section + .section{ border-top:var(--hairline); }
.surface-paper{
  background:var(--paper); color:var(--paper-ink);
  --text:var(--paper-ink); --text-strong:var(--paper-ink); --text-muted:var(--paper-muted); --text-dim:var(--paper-muted);
  --line:rgba(3,18,31,.12); --line-strong:rgba(3,18,31,.22); --link:#0a5d8f; --focus:#0a5d8f;
  --blue-bright:#0a5d8f;
}
.surface-paper ::selection{ background:var(--navy-900); color:var(--paper); }

/* --------------------------------------------------------------------------
   4. Type helpers
   -------------------------------------------------------------------------- */
/* Serif display: weight 400 always, opsz 72, never tighter than -.025em */
.serif,.display,.t-mega,.t-d1,.t-d2{ font-family:var(--font-serif); font-weight:400; font-variation-settings:"opsz" 72; color:var(--text-strong); text-wrap:balance; }
.t-mega{ font-size:var(--fs-mega); line-height:.95; letter-spacing:-.02em; }
.t-d1{ font-size:var(--fs-d1); line-height:.98; letter-spacing:-.02em; }
.t-d2{ font-size:var(--fs-d2); line-height:1.05; letter-spacing:-.01em; }
/* Below 40px everything is sans */
.t-d3{ font-family:var(--font-sans); font-weight:600; font-size:var(--fs-d3); line-height:1.12; letter-spacing:-.01em; color:var(--text-strong); }
.t-h4{ font-family:var(--font-sans); font-weight:600; font-size:var(--fs-h4); line-height:1.2; letter-spacing:0; }
.lede{ font-size:var(--fs-lede); line-height:1.45; color:var(--text-muted); max-width:34ch; }
.lede strong{ color:var(--text-strong); font-weight:500; }
.prose{ max-width:62ch; }
.prose > * + *{ margin-top:1em; }
.prose a{ color:var(--link); }
.muted{ color:var(--text-muted); }
.mono{ font-family:var(--font-label); font-size:var(--fs-meta); letter-spacing:.09em; text-transform:uppercase; font-weight:500; font-variant-numeric:tabular-nums; }
.grad{ color:var(--blue-bright); }

.eyebrow{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--font-label); font-size:var(--fs-meta); letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-muted); line-height:1.4; font-weight:500; font-variant-numeric:tabular-nums;
}
.eyebrow::before{ content:""; width:28px; height:1px; flex:none; background:linear-gradient(90deg,var(--blue),transparent); }
.surface-paper .eyebrow::before{ background:linear-gradient(90deg,currentColor,transparent); }

.idx{ font-family:var(--font-label); font-size:var(--fs-meta); letter-spacing:0; color:var(--text-dim); font-variant-numeric:tabular-nums; font-weight:500; }

/* Text links: underline grows from the left */
.link{
  color:var(--link); text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat;
  transition:background-size var(--dur-2) var(--ease-out), color var(--dur-1);
  padding-bottom:2px;
}
.link:hover{ background-size:100% 1px; }

/* Phones: one H1 scale everywhere (beats page-level sizes on purpose) */
@media (max-width:599.98px){
  h1,.t-mega,.t-d1{ font-size:clamp(44px, 12vw, 64px)!important; line-height:1!important; }
}

/* --------------------------------------------------------------------------
   5. Skip link
   -------------------------------------------------------------------------- */
.skip{
  position:fixed; left:16px; top:12px; z-index:200; transform:translateY(-200%);
  background:var(--cyan); color:var(--navy-900); font-weight:600; padding:12px 18px; border-radius:var(--r-pill);
  text-decoration:none; transition:transform var(--dur-2) var(--ease-out);
}
.skip:focus{ transform:none; outline:2px solid var(--text-strong); outline-offset:3px; }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn{
  --btn-h:48px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--btn-h); padding:0 24px; border-radius:var(--r-pill);
  font-family:var(--font-sans); font-weight:500; font-size:1rem; line-height:1.1; letter-spacing:0;
  text-decoration:none; white-space:nowrap; border:1px solid transparent; cursor:pointer;
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2);
}
.btn .arr{ display:inline-block; transition:transform var(--dur-2) var(--ease-out); }
.btn:hover .arr{ transform:translateX(3px); }
.btn:hover .arr-ext{ transform:translate(2px,-2px); }
.btn-primary{ color:var(--navy-900); background:var(--grad-signal); box-shadow:var(--glow-signal); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(2,13,23,.55); }
.btn-primary:active{ transform:translateY(0); }
.btn-ghost{ color:var(--text-strong); background:var(--glass); border-color:var(--line-strong); }
.btn-ghost:hover{ transform:translateY(-2px); background:var(--glass-2); border-color:rgba(255,255,255,.32); }
.surface-paper .btn-ghost{ color:var(--paper-ink); background:transparent; border-color:rgba(3,18,31,.25); }
.surface-paper .btn-ghost:hover{ border-color:var(--paper-ink); }
.btn-link{ padding:0; min-height:44px; border:0; background:none; color:var(--link); border-radius:var(--r-xs); }
.btn-link:hover{ color:var(--text-strong); }
.btn-sm{ --btn-h:40px; padding:0 18px; font-size:.9375rem; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
@media (max-width:479px){ .btn{ --btn-h:48px; } }

/* --------------------------------------------------------------------------
   7. Header and navigation
   -------------------------------------------------------------------------- */
.site-header{ position:sticky; top:0; z-index:60; isolation:isolate; }
/* glass lives on a pseudo so the fixed mobile panel is not trapped by backdrop-filter */
.site-header::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:rgba(3,18,31,.72); border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  opacity:0; transition:opacity var(--dur-3) var(--ease-out);
}
.site-header.is-scrolled::before{ opacity:1; }
.nav{ position:relative; z-index:2; display:flex; align-items:center; gap:var(--space-m); min-height:var(--header-h); }
.brand{
  display:inline-flex; align-items:center; gap:11px; margin-right:auto; text-decoration:none;
  font-family:var(--font-sans); font-weight:700; font-size:1.3rem; letter-spacing:0; color:var(--text-strong);
  min-height:44px; border-radius:var(--r-s);
}
.brand img{ width:32px; height:32px; border-radius:9px; box-shadow:0 4px 18px rgba(2,13,23,.55); }
.nav-primary{ display:flex; }
.nav-links{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:clamp(20px,2.4vw,36px); }
.nav-links a{
  position:relative; display:inline-flex; align-items:center; min-height:44px;
  color:var(--text-muted); text-decoration:none; font-weight:500; font-size:.9375rem; letter-spacing:0;
  transition:color var(--dur-1);
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:8px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform var(--dur-2) var(--ease-out);
}
.nav-links a:hover,.nav-links a[aria-current="page"]{ color:var(--text-strong); }
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-extra{ display:none; }
.nav-cta{ --btn-h:42px; padding:0 20px; font-size:.9375rem; }
.nav-toggle{
  display:none; position:relative; width:48px; height:48px; margin-right:-10px; border:0; background:transparent; border-radius:var(--r-pill);
}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{
  position:absolute; left:50%; width:22px; height:1.5px; margin-left:-11px; background:var(--text-strong); border-radius:2px;
  transition:transform var(--dur-3) var(--ease-out), opacity var(--dur-2);
}
.nav-toggle-bars{ top:50%; background:transparent; }
.nav-toggle-bars::before,.nav-toggle-bars::after{ content:""; left:0; margin:0; }
.nav-toggle-bars::before{ transform:translateY(-4px); }
.nav-toggle-bars::after{ transform:translateY(4px); }
.menu-open .nav-toggle-bars::before{ transform:rotate(45deg); }
.menu-open .nav-toggle-bars::after{ transform:rotate(-45deg); }


/* Mobile (< 1024): JS on = full-screen panel; JS off = links wrap below brand */
@media (max-width:1023.98px){
  .nav-cta{ display:none; }
  html:not(.js) .nav{ flex-wrap:wrap; padding-block:10px; row-gap:0; }
  html:not(.js) .nav-primary{ order:3; width:100%; }
  html:not(.js) .nav-links{ flex-wrap:wrap; gap:4px 20px; }

  .js .nav-toggle{ display:inline-block; }
  .js .nav-primary{
    position:fixed; inset:0; z-index:-1; display:flex; flex-direction:column; justify-content:space-between;
    padding:calc(var(--header-h) + 28px) var(--gutter) max(28px, env(safe-area-inset-bottom));
    background:var(--navy-950); overflow-y:auto; overscroll-behavior:contain;
    visibility:hidden; opacity:0; clip-path:inset(0 0 100% 0);
    transition:clip-path var(--dur-3) var(--ease-in-out), opacity var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
  }
  .js .menu-open .nav-primary{ visibility:visible; opacity:1; clip-path:inset(0 0 0 0); transition:clip-path var(--dur-3) var(--ease-in-out), opacity var(--dur-2) var(--ease-out), visibility 0s; }
  .js .nav-primary .nav-links{ flex-direction:column; align-items:stretch; gap:0; }
  .js .nav-primary .nav-links li{ border-bottom:var(--hairline); }
  .js .nav-primary .nav-links a{
    display:flex; justify-content:space-between; padding-block:14px; color:var(--text-strong);
    font-family:var(--font-sans); font-weight:500;
    font-size:clamp(1.75rem, 1.3rem + 2.2vw, 2.4rem); line-height:1.1; letter-spacing:-.01em;
    opacity:0; transform:translateY(18px);
    transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), color var(--dur-1);
  }
  .js .nav-primary .nav-links a::after{ content:"→"; position:static; height:auto; background:none; transform:none; font-size:.5em; align-self:center; color:var(--text-dim); }
  .js .nav-primary .nav-links a[aria-current="page"]{ color:var(--cyan); }
  .js .menu-open .nav-primary .nav-links a{ opacity:1; transform:none; }
  .js .menu-open .nav-links li:nth-child(1) a{ transition-delay:80ms; }
  .js .menu-open .nav-links li:nth-child(2) a{ transition-delay:140ms; }
  .js .menu-open .nav-links li:nth-child(3) a{ transition-delay:200ms; }
  .js .menu-open .nav-links li:nth-child(4) a{ transition-delay:260ms; }
  .js .nav-extra{ display:grid; gap:var(--space-m); padding-top:var(--space-xl); }
  .nav-extra .footer-h{ margin-bottom:var(--space-xs); }
  .nav-extra-email{ font-family:var(--font-sans); font-weight:600; font-size:1.35rem; color:var(--cyan); text-decoration:none; }
  .nav-extra ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
  .nav-extra ul a{ display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border:1px solid var(--line-strong); border-radius:var(--r-pill); text-decoration:none; color:var(--text-muted); font-size:var(--fs-small); }
  .nav-extra .btn{ justify-self:start; }
  .menu-open .site-header::before{ opacity:0; }
}
html.menu-locked{ overflow:hidden; }

/* --------------------------------------------------------------------------
   8. Section head
   -------------------------------------------------------------------------- */
.sec-head{ display:grid; gap:var(--space-s); margin-bottom:clamp(40px,5vw,80px); }
.sec-head .sec-label{ display:flex; flex-direction:column; gap:var(--space-xs); }
.sec-head h2{ font-family:var(--font-serif); font-weight:400; font-variation-settings:"opsz" 72; font-size:var(--fs-d2); line-height:1; letter-spacing:-.02em; max-width:18ch; }
.sec-head .lede{ margin-top:var(--space-m); max-width:46ch; }
@media (min-width:1024px){
  .sec-head{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--grid-gap); align-items:start; }
  .sec-head .sec-label{ grid-column:1 / span 3; padding-top:.9em; }
  .sec-head .sec-body{ grid-column:4 / -1; }
}

/* --------------------------------------------------------------------------
   9. Status pill and tag
   -------------------------------------------------------------------------- */
.status{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-family:var(--font-label); font-size:var(--fs-micro); letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); font-weight:500; font-variant-numeric:tabular-nums;
}
.status::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.status--live{ color:var(--text); }
.status--live::before{ background:var(--live); box-shadow:none; }
.status--soon{ color:var(--soon); }
.status--soon::before{ background:transparent; border:1.5px solid var(--soon); width:8px; height:8px; }

.tags{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; }
.tag{
  display:inline-flex; align-items:center; min-height:26px; padding:0 10px; border:1px solid var(--line-strong); border-radius:var(--r-pill);
  font-family:var(--font-label); font-size:.8125rem; letter-spacing:0; text-transform:none; color:var(--text-muted); white-space:nowrap; font-weight:500; font-variant-numeric:tabular-nums;
}

/* --------------------------------------------------------------------------
   10. Stats
   -------------------------------------------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:var(--hairline); }
.stat{ padding:var(--space-m) var(--space-s) var(--space-m) 0; border-bottom:var(--hairline); }
.stat:nth-child(odd){ border-right:var(--hairline); }
.stat:nth-child(even){ padding-left:var(--space-s); }
.stat-n{ display:block; font-family:var(--font-sans); font-weight:600; font-variant-numeric:tabular-nums; font-size:clamp(1.6rem,1.2rem + 1.6vw,2.6rem); line-height:1; letter-spacing:-.01em; color:var(--text-strong); }
.stat-l{ display:block; margin-top:10px; font-family:var(--font-sans); font-size:.875rem; letter-spacing:0; color:var(--text-muted); line-height:1.4; font-weight:500; }
@media (min-width:1024px){
  .stats{ grid-template-columns:repeat(4,minmax(0,1fr)); border-bottom:var(--hairline); }
  .stat{ border-bottom:0; border-right:var(--hairline); padding:var(--space-l) var(--space-m); }
  .stat:nth-child(odd),.stat:nth-child(even){ padding-left:var(--space-m); }
  .stat:first-child{ padding-left:0; }
  .stat:last-child{ border-right:0; }
}

/* --------------------------------------------------------------------------
   11. Device frames and media
   -------------------------------------------------------------------------- */
.frame-browser{
  position:relative; border-radius:var(--r-m); overflow:hidden; background:var(--navy-950);
  box-shadow:var(--shadow-device);
}
.frame-bar{ display:flex; align-items:center; gap:14px; height:34px; padding:0 14px; background:#0b1724; border-bottom:1px solid rgba(255,255,255,.06); }
.frame-dots{ display:flex; gap:6px; flex:none; }
.frame-dots i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.16); }
.frame-url{
  flex:1; max-width:340px; margin-inline:auto; height:20px; border-radius:var(--r-pill); background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--font-label); font-size:var(--fs-micro); letter-spacing:0; color:var(--text-muted); white-space:nowrap; overflow:hidden; font-weight:500; font-variant-numeric:tabular-nums;
}
.frame-url::before{ content:""; width:8px; height:9px; border-radius:2px; border:1.5px solid currentColor; border-top-width:3px; opacity:.6; }
.frame-browser img{ width:100%; }
.frame-phone{
  position:relative; width:100%; max-width:300px; aspect-ratio:9/19.5; padding:10px; border-radius:44px;
  background:linear-gradient(160deg,#16324c,#061626); box-shadow:var(--shadow-device), inset 0 1px 1px rgba(255,255,255,.14);
}
.frame-phone img{ width:100%; height:100%; object-fit:cover; object-position:top center; border-radius:34px; }
figure.media figcaption{ margin-top:var(--space-s); font-family:var(--font-sans); font-size:.875rem; line-height:1.45; letter-spacing:0; color:var(--text-muted); font-weight:400; }

/* --------------------------------------------------------------------------
   12. Work card (featured media + meta). Whole card clickable via stretched title link
   -------------------------------------------------------------------------- */
.work-card{ position:relative; display:flex; flex-direction:column; gap:var(--space-m); }
.work-card-media{
  position:relative; overflow:hidden; border-radius:var(--r-l); aspect-ratio:16/11;
  background:var(--acc-bg,var(--navy-800));
  display:flex; align-items:flex-end; justify-content:center; padding:clamp(20px,4vw,56px) clamp(20px,4vw,56px) 0;
  isolation:isolate;
}
.work-card-media::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(80% 70% at 50% 110%, color-mix(in srgb,var(--acc,#2ea8e7) 38%,transparent), transparent 70%);
  opacity:.9; transition:opacity var(--dur-3) var(--ease-out);
}
.work-card-media .frame-browser{
  width:100%; border-bottom-left-radius:0; border-bottom-right-radius:0;
  transform:translateY(2%); transition:transform var(--dur-4) var(--ease-out);
}
.work-card:hover .work-card-media .frame-browser{ transform:translateY(-1.5%); }
.work-card-body{ display:grid; gap:var(--space-xs); }
.work-card-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-s); flex-wrap:wrap; }
.work-card h3{ font-family:var(--font-sans); font-weight:600; font-size:var(--fs-d3); line-height:1.05; letter-spacing:-.01em; }
.work-card h3 a{ text-decoration:none; color:inherit; }
.work-card h3 a::after{ content:""; position:absolute; inset:0; z-index:1; border-radius:var(--r-l); }
.work-card h3 a:focus-visible{ outline:none; }
.work-card h3 a:focus-visible::after{ outline:2px solid var(--focus); outline-offset:6px; }
.work-card h3 .arr{ display:inline-block; margin-left:.25em; color:var(--acc,var(--cyan)); transition:transform var(--dur-2) var(--ease-out); }
.work-card:hover h3 .arr{ transform:translateX(6px); }
.work-card p{ color:var(--text-muted); max-width:52ch; }
.work-card .store-links,.work-card .above{ position:relative; z-index:2; }
.work-card-rule{ height:2px; width:96px; background:var(--acc,var(--cyan)); border-radius:2px; transform:scaleX(.5); transform-origin:left; transition:transform var(--dur-3) var(--ease-out); }
.work-card:hover .work-card-rule{ transform:scaleX(1); }

/* --------------------------------------------------------------------------
   13. Work index rows
   -------------------------------------------------------------------------- */
.work-list{ list-style:none; margin:0; padding:0; border-top:var(--hairline); }
.work-list > li{ border-bottom:var(--hairline); }
.work-row{
  position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; column-gap:var(--space-s); row-gap:6px;
  padding:22px 0; text-decoration:none; color:inherit; isolation:isolate;
}
.work-row::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--acc,var(--cyan));
  transform:scaleX(0); transform-origin:left; transition:transform var(--dur-3) var(--ease-out);
}
.work-row:hover::after,.work-row:focus-visible::after{ transform:scaleX(1); }
.work-row:focus-visible{ outline-offset:-2px; border-radius:var(--r-s); }
.work-row .idx{ align-self:start; padding-top:.45em; grid-row:span 2; min-width:2.6em; }
.work-row-name{
  font-family:var(--font-sans); font-weight:600; font-size:var(--fs-d3); line-height:1.05; letter-spacing:-.01em; color:var(--text-strong);
  transition:transform var(--dur-3) var(--ease-out), color var(--dur-2);
}
.work-row-desc{ grid-column:2 / 3; color:var(--text-muted); font-size:var(--fs-small); line-height:1.45; }
.work-row .tags{ display:none; }
.work-row-arrow{
  grid-row:1 / span 2; grid-column:3; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong);
  display:grid; place-items:center; color:var(--text-muted);
  transition:transform var(--dur-3) var(--ease-out), background-color var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}
.work-row-arrow svg{ width:16px; height:16px; }
.work-row:hover .work-row-arrow{ background:var(--acc,var(--cyan)); border-color:transparent; color:var(--acc-ink,var(--navy-900)); transform:rotate(-45deg); }
@media (min-width:760px){
  .work-row{ grid-template-columns:3.5em minmax(0,1.05fr) minmax(0,1fr) auto; padding:28px 0; column-gap:var(--space-m); }
  .work-row .idx{ grid-row:auto; padding-top:0; align-self:center; }
  .work-row-desc{ grid-column:auto; }
  .work-row-arrow{ grid-row:auto; grid-column:auto; }
  .work-row:hover .work-row-name{ transform:translateX(10px); }
}
@media (min-width:1280px){
  .work-row{ grid-template-columns:3.5em minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr) auto; }
  .work-row .tags{ display:flex; justify-content:flex-end; }
}
/* Hover preview that follows the pointer (created by site.js; desktop pointer only) */
.work-preview{
  position:fixed; left:0; top:0; z-index:40; width:min(380px,28vw); aspect-ratio:16/10; pointer-events:none;
  border-radius:var(--r-m); overflow:hidden; background:var(--navy-800); box-shadow:var(--shadow-device);
  opacity:0; transform:translate3d(var(--px,0),var(--py,0),0) scale(.92);
  transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.work-preview.is-on{ opacity:1; transform:translate3d(var(--px,0),var(--py,0),0) scale(1); }
.work-preview img{ width:100%; height:100%; object-fit:cover; object-position:top left; }

/* --------------------------------------------------------------------------
   14. Service list (compact, home) and service block (services page)
   -------------------------------------------------------------------------- */
.service-list{ list-style:none; margin:0; padding:0; display:grid; border-top:var(--hairline); }
.service-list > li{ border-bottom:var(--hairline); }
.service-item{
  position:relative; display:grid; grid-template-columns:2.6em minmax(0,1fr) auto; gap:6px var(--space-s); padding:24px 0;
  text-decoration:none; color:inherit;
}
.service-item .idx{ padding-top:.5em; }
.service-item h3{ font-family:var(--font-sans); font-weight:600; font-size:var(--fs-h4); line-height:1.15; letter-spacing:0; transition:color var(--dur-2); }
.service-item p{ grid-column:2; color:var(--text-muted); font-size:var(--fs-small); line-height:1.55; max-width:44ch; }
.service-item .seen{ grid-column:2; margin-top:6px; font-family:var(--font-sans); font-size:.875rem; letter-spacing:0; color:var(--text-dim); font-weight:400; }
.service-item .arr{ grid-column:3; grid-row:1; align-self:start; padding-top:.2em; color:var(--text-dim); transition:transform var(--dur-2) var(--ease-out), color var(--dur-2); }
.service-item:hover h3{ color:var(--cyan); }
.service-item:hover .arr{ transform:translateX(4px); color:var(--cyan); }
@media (min-width:760px){
  .service-list{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--grid-gap); border-top:0; }
  .service-list > li{ border-top:var(--hairline); border-bottom:0; }
  .service-list > li:nth-last-child(-n+2){ border-bottom:var(--hairline); }
  .service-item{ padding:32px 0 36px; }
}
.service{ display:grid; gap:var(--space-m); padding-block:var(--space-xl); border-top:var(--hairline); }
.service h3{ font-family:var(--font-sans); font-weight:600; font-size:var(--fs-d3); line-height:1.08; letter-spacing:-.01em; }
.service p{ color:var(--text-muted); max-width:60ch; }
.service ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.service ul li{ padding-left:20px; position:relative; }
.service ul li::before{ content:""; position:absolute; left:0; top:.7em; width:8px; height:1px; background:var(--cyan); }
@media (min-width:1024px){ .service{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--grid-gap); } .service > .idx{ grid-column:1 / span 3; } .service > .service-body{ grid-column:4 / -1; } }

/* --------------------------------------------------------------------------
   15. Process steps
   -------------------------------------------------------------------------- */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:0; counter-reset:step; }
.step{ position:relative; padding:0 0 var(--space-l) 36px; }
.step::before{
  content:""; position:absolute; left:6px; top:8px; width:13px; height:13px; border-radius:50%;
  border:1.5px solid var(--blue-bright); background:var(--surface-0);
}
.step::after{ content:""; position:absolute; left:12px; top:28px; bottom:4px; width:1px; background:var(--line-strong); }
.step:last-child::after{ display:none; }
.step:last-child::before{ background:var(--orange); border-color:var(--orange); box-shadow:none; }
.step .idx{ display:block; margin-bottom:6px; }
.step h3{ font-family:var(--font-sans); font-weight:600; font-size:var(--fs-h4); line-height:1.15; letter-spacing:0; }
.step p{ margin-top:8px; color:var(--text-muted); font-size:var(--fs-small); line-height:1.55; max-width:34ch; }
@media (min-width:1024px){
  .steps{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--grid-gap); }
  .step{ padding:40px 0 0; }
  .step::before{ left:0; top:0; }
  .step::after{ left:20px; right:calc(-1 * var(--grid-gap)); top:6px; bottom:auto; width:auto; height:1px; display:block; }
  .step:last-child::after{ display:none; }
}

/* --------------------------------------------------------------------------
   16. Features, pull fact, store links
   -------------------------------------------------------------------------- */
.features{ list-style:none; margin:0; padding:0; border-top:var(--hairline); }
.features > li{ display:grid; gap:4px; padding:18px 0; border-bottom:var(--hairline); }
.features strong{ font-family:var(--font-sans); font-weight:600; font-size:1.15rem; letter-spacing:0; }
.features span{ color:var(--text-muted); font-size:var(--fs-small); }
@media (min-width:760px){ .features > li{ grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:var(--space-m); align-items:baseline; } }
.pull{
  position:relative; padding-left:var(--space-m); font-family:var(--font-sans); font-weight:600;
  font-size:var(--fs-d3); line-height:1.12; letter-spacing:-.01em; color:var(--text-strong); max-width:28ch;
}
.pull::before{ content:""; position:absolute; left:0; top:.15em; bottom:.15em; width:2px; background:var(--acc,var(--cyan)); border-radius:2px; }
.store-links{ display:flex; flex-wrap:wrap; gap:8px; }
.store-link{
  display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:0 16px 0 14px; border-radius:var(--r-pill);
  border:1px solid var(--line-strong); background:var(--glass); color:var(--text-strong); text-decoration:none; font-weight:600; font-size:var(--fs-small);
  transition:border-color var(--dur-2), background-color var(--dur-2), transform var(--dur-2) var(--ease-out);
}
.store-link svg{ width:17px; height:17px; flex:none; }
.store-link:hover{ border-color:rgba(255,255,255,.35); background:var(--glass-2); transform:translateY(-1px); }

/* --------------------------------------------------------------------------
   17. CTA band
   -------------------------------------------------------------------------- */
.cta-band{ position:relative; overflow:hidden; isolation:isolate; padding-block:calc(var(--section-y) * 1.1); background:var(--navy-950); border-top:var(--hairline); }
.cta-band::before{
  content:""; position:absolute; inset:-20% -10% auto auto; width:min(900px,90vw); aspect-ratio:1; z-index:-1;
  background:radial-gradient(closest-side, rgba(46,168,231,.22), transparent 70%);
}
.cta-band h2{ font-family:var(--font-serif); font-weight:400; font-variation-settings:"opsz" 72; font-size:var(--fs-d1); line-height:.98; letter-spacing:-.02em; max-width:13ch; }
.cta-band p{ margin-top:var(--space-l); max-width:46ch; color:var(--text-muted); font-size:var(--fs-lede); line-height:1.5; }
.cta-band .btn-row{ margin-top:var(--space-xl); }

/* --------------------------------------------------------------------------
   18. Case pages (shells; polished by case-page owners)
   -------------------------------------------------------------------------- */
.case-hero{ padding-block:clamp(48px,6vw,96px) 0; }
.case-hero h1{ font-family:var(--font-serif); font-weight:400; font-variation-settings:"opsz" 72; font-size:var(--fs-d1); line-height:.98; letter-spacing:-.02em; }
.case-meta{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-m) var(--grid-gap); padding-block:var(--space-l); border-top:var(--hairline); border-bottom:var(--hairline); margin-top:var(--space-xl); }
.case-meta dt{ font-family:var(--font-label); font-size:var(--fs-micro); letter-spacing:.09em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; font-weight:500; font-variant-numeric:tabular-nums; }
.case-meta dd{ margin:0; color:var(--text); }
@media (min-width:1024px){ .case-meta{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.case-section{ display:grid; gap:var(--space-m); padding-block:var(--section-y); border-top:var(--hairline); }
.case-section > .case-label{ font-family:var(--font-label); font-size:var(--fs-meta); letter-spacing:.09em; text-transform:uppercase; color:var(--acc,var(--blue-bright)); font-weight:500; font-variant-numeric:tabular-nums; }
@media (min-width:1024px){ .case-section{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--grid-gap); } .case-section > .case-label{ grid-column:1 / span 3; } .case-section > .case-body{ grid-column:4 / -1; } }
.next-case{
  display:block; position:relative; padding-block:var(--section-y); text-decoration:none; color:inherit; border-top:var(--hairline); overflow:hidden;
}
.next-case .idx{ display:block; margin-bottom:var(--space-s); }
.next-case strong{ display:block; font-family:var(--font-serif); font-weight:400; font-variation-settings:"opsz" 72; font-size:var(--fs-d1); line-height:.98; letter-spacing:-.02em; transition:transform var(--dur-4) var(--ease-out); }
.next-case:hover strong{ transform:translateX(16px); }
.next-case::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:var(--acc,var(--cyan)); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-4) var(--ease-out); }
.next-case:hover::after{ transform:scaleX(1); }

/* --------------------------------------------------------------------------
   19. Contact composer (contact page)
   -------------------------------------------------------------------------- */
.composer{ display:grid; gap:var(--space-m); }
.field{ display:grid; gap:8px; }
.field label{ font-family:var(--font-sans); font-size:.9375rem; letter-spacing:0; color:var(--text); font-weight:500; }
.field input,.field select,.field textarea{
  width:100%; min-height:52px; padding:14px 16px; border-radius:var(--r-s); border:1px solid var(--line-strong); background:var(--surface-1); color:var(--text-strong);
  transition:border-color var(--dur-2), box-shadow var(--dur-2);
}
.field textarea{ min-height:160px; resize:vertical; line-height:1.55; }
.field input::placeholder,.field textarea::placeholder{ color:var(--text-dim); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--cyan); box-shadow:none; }
.field [aria-invalid="true"]{ border-color:var(--orange-soft); }
.field-error{ color:var(--orange-soft); font-size:var(--fs-small); }
.composer-note{ color:var(--text-muted); font-size:var(--fs-small); }

/* --------------------------------------------------------------------------
   20. Legal (legal page)
   -------------------------------------------------------------------------- */
.legal{ display:grid; gap:var(--space-xl); }
.legal-toc{ font-size:var(--fs-small); }
.legal-toc ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.legal-toc a{ display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border-radius:var(--r-pill); border:1px solid var(--line-strong); text-decoration:none; color:var(--text-muted); }
.legal-toc a:hover{ color:var(--text-strong); border-color:rgba(255,255,255,.35); }
.legal-doc{ max-width:72ch; color:var(--text-muted); }
.legal-doc section{ padding-bottom:var(--space-2xl); margin-bottom:var(--space-2xl); border-bottom:var(--hairline); }
.legal-doc section:last-child{ border-bottom:0; }
.legal-doc h2{ font-family:var(--font-sans); font-weight:600; font-size:var(--fs-d3); letter-spacing:-.01em; line-height:1.1; }
.legal-doc h3{ margin-top:var(--space-l); font-size:1.15rem; font-weight:600; }
.legal-doc h4{ margin-top:var(--space-m); font-size:1rem; font-weight:600; color:var(--orange-soft); }
.legal-doc p,.legal-doc ul{ margin-top:12px; }
.legal-doc ul{ padding-left:22px; }
.legal-doc li{ margin-bottom:6px; }
.legal-doc a{ color:var(--link); }
.legal-doc .updated{ display:block; margin-top:10px; font-family:var(--font-label); font-size:var(--fs-micro); letter-spacing:.09em; text-transform:uppercase; color:var(--text-dim); font-weight:500; font-variant-numeric:tabular-nums; }
@media (min-width:1024px){
  .legal{ grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--grid-gap); }
  .legal-toc{ grid-column:1 / span 3; position:sticky; top:calc(var(--header-h) + 24px); align-self:start; }
  .legal-toc ul{ flex-direction:column; }
  .legal-doc{ grid-column:4 / -1; }
}

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */
.site-footer{ position:relative; overflow:hidden; background:var(--navy-950); border-top:var(--hairline); padding-top:clamp(64px,8vw,120px); }
.footer-cta{ display:grid; gap:var(--space-s); padding-bottom:clamp(48px,6vw,88px); border-bottom:var(--hairline); }
.footer-cta-line{ font-family:var(--font-sans); font-weight:600; font-size:var(--fs-d3); line-height:1.05; letter-spacing:-.01em; color:var(--text-strong); }
.footer-email{
  justify-self:start; font-family:var(--font-sans); font-weight:500;
  font-size:clamp(1.5rem,1rem + 2.4vw,3rem); letter-spacing:-.01em; line-height:1.2; color:var(--cyan); text-decoration:none; overflow-wrap:anywhere;
  background:linear-gradient(currentColor,currentColor) 0 100% / 0 2px no-repeat; transition:background-size var(--dur-3) var(--ease-out);
}
.footer-email:hover{ background-size:100% 2px; }
@media (min-width:1024px){ .footer-cta{ grid-template-columns:1fr auto; align-items:end; } }
.footer-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-xl) var(--grid-gap); padding-block:var(--space-xl); }
/* Phones and tablets: Studio | Work, Legal, then Products on its own full row (long domains never squeeze or orphan their arrow) */
.footer-cols .fc-legal{ order:3; }
.footer-cols .fc-products{ grid-column:1 / -1; order:4; }
.footer-cols .fc-products a{ white-space:nowrap; }
@media (min-width:600px){ .footer-cols .fc-products ul{ grid-template-columns:repeat(2,max-content); column-gap:var(--space-xl); } }
@media (min-width:1024px){
  .footer-cols{ grid-template-columns:minmax(0,.8fr) minmax(0,1fr) minmax(0,1.35fr) minmax(0,.9fr); }
  .footer-cols .fc-legal{ order:0; }
  .footer-cols .fc-products{ grid-column:auto; order:0; }
  .footer-cols .fc-products ul{ grid-template-columns:none; }
}
.footer-h{ font-family:var(--font-label); font-size:var(--fs-micro); letter-spacing:.09em; text-transform:uppercase; color:var(--text-dim); margin-bottom:var(--space-s); font-weight:500; font-variant-numeric:tabular-nums; }
.footer-cols ul{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.footer-cols a{
  display:inline-flex; align-items:center; min-height:36px; color:var(--text-muted); text-decoration:none; font-size:var(--fs-small);
  transition:color var(--dur-1);
}
.footer-cols a:hover{ color:var(--text-strong); }
.footer-legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px var(--space-l); padding-block:var(--space-m); border-top:var(--hairline); color:var(--text-muted); font-size:.875rem; }
.footer-legal .abn{ font-family:var(--font-sans); font-size:.875rem; letter-spacing:0; font-weight:400; font-variant-numeric:tabular-nums; }
.footer-legal .abn span{ white-space:nowrap; }
.footer-word{
  font-family:var(--font-sans); font-weight:700;
  /* one signature size everywhere: the wordmark spans the content width and is cropped by the page edge */
  max-width:var(--maxw); margin:clamp(24px,4vw,56px) auto 0; padding-inline:var(--gutter);
  font-size:calc((min(100vw, var(--maxw)) - 2 * var(--gutter)) * .5);
  line-height:.74; letter-spacing:-.02em; text-align:left; white-space:nowrap; height:.64em; overflow:hidden;
  user-select:none; pointer-events:none;
  /* filled, not stroked: variable-font contours overlap and would show through a stroke */
  color:rgba(79,191,245,.16);
}

/* --------------------------------------------------------------------------
   22. Signal map (home hero signature)
   -------------------------------------------------------------------------- */
.signal-map{ position:relative; width:100%; aspect-ratio:1; max-width:640px; margin-inline:auto; container-type:inline-size; }
.signal-map svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sm-ring{ fill:none; stroke:rgba(255,255,255,.07); stroke-width:1; vector-effect:non-scaling-stroke; }
.sm-ring--dash{ stroke-dasharray:2 6; stroke:rgba(99,230,255,.18); }
.sm-tick{ stroke:rgba(255,255,255,.18); stroke-width:1; vector-effect:non-scaling-stroke; }
.sm-tick--major{ stroke:rgba(99,230,255,.5); }
.sm-edge{ fill:none; stroke:rgba(99,230,255,.22); stroke-width:1; vector-effect:non-scaling-stroke; }
.sm-pulse{ fill:none; stroke:var(--cyan); stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke; stroke-dasharray:3 97; stroke-dashoffset:100; opacity:0; }
.sm-node{ fill:var(--navy-900); stroke:var(--cyan); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.sm-halo{ fill:var(--cyan); opacity:0; transform-box:fill-box; transform-origin:center; }
.sm-sweep{
  position:absolute; inset:8%; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg, transparent 0deg 300deg, rgba(99,230,255,.0) 300deg, rgba(99,230,255,.08) 350deg, rgba(99,230,255,.22) 360deg);
  -webkit-mask-image:radial-gradient(circle, transparent 13%, #000 14%); mask-image:radial-gradient(circle, transparent 13%, #000 14%);
  opacity:0;
}
.sm-core{
  position:absolute; left:50%; top:50%; width:19%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle, rgba(46,168,231,.32), rgba(3,18,31,.9) 70%);
  border:1px solid rgba(79,191,245,.45); box-shadow:none;
}
.sm-core img{ width:52%; height:auto; border-radius:22%; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.sm-label{
  position:absolute; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:7px 12px 8px; border-radius:12px; white-space:nowrap;
  background:rgba(4,24,43,.78); border:1px solid var(--line-strong);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.8);
}
.sm-label b{ display:flex; align-items:center; gap:7px; font-family:var(--font-body); font-weight:600; font-size:clamp(.72rem, 2.6cqi, .95rem); color:var(--text-strong); letter-spacing:-.005em; }
.sm-label b::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--live); box-shadow:none; }
.sm-label small{ font-family:var(--font-label); font-size:clamp(.56rem, 1.8cqi, .68rem); letter-spacing:0; text-transform:none; color:var(--text-muted); font-weight:500; font-variant-numeric:tabular-nums; }
@container (max-width:420px){ .sm-label small{ display:none; } .sm-label{ padding:5px 10px; } }
.sm-coords{ position:absolute; font-family:var(--font-label); font-size:var(--fs-micro); letter-spacing:0; color:var(--text-dim); font-weight:500; font-variant-numeric:tabular-nums; }

/* Ambient motion (only when allowed, paused off-screen via .is-paused) */
@media (prefers-reduced-motion:no-preference){
  .signal-map .sm-pulse{ animation:sm-pulse var(--d,3.2s) var(--ease-in-out) infinite; animation-delay:var(--dl,0s); }
  .signal-map .sm-halo{ animation:sm-halo 3.2s var(--ease-out) infinite; animation-delay:var(--dl,0s); }
  .signal-map .sm-sweep{ opacity:1; animation:sm-sweep 9s linear infinite; }
  .signal-map.is-paused *,.signal-map.is-paused{ animation-play-state:paused!important; }
}
@keyframes sm-pulse{ 0%{ stroke-dashoffset:100; opacity:0; } 8%{ opacity:1; } 85%{ opacity:1; } 100%{ stroke-dashoffset:3; opacity:0; } }
@keyframes sm-halo{ 0%{ transform:scale(.6); opacity:.45; } 100%{ transform:scale(4.5); opacity:0; } }
@keyframes sm-sweep{ to{ transform:rotate(360deg); } }

/* --------------------------------------------------------------------------
   23. Motion: hero line masks + reveal on scroll (JS-gated, safe defaults)
   -------------------------------------------------------------------------- */
.lines{ display:block; }
.line{ display:block; overflow:hidden; padding-block:.12em .1em; margin-block:-.12em -.1em; } /* room for serif ascenders and descenders */
.line > span{ display:inline-block; }
@media (prefers-reduced-motion:no-preference){
  .js .lines .line > span{ transform:translateY(105%); animation:line-up var(--dur-4) var(--ease-out) forwards; }
  .js .lines .line:nth-child(2) > span{ animation-delay:80ms; }
  .js .lines .line:nth-child(3) > span{ animation-delay:160ms; }
  .js .lines .line:nth-child(4) > span{ animation-delay:240ms; }
  .js .lines .line:nth-child(5) > span{ animation-delay:320ms; }
  .js .enter{ opacity:0; transform:translateY(16px); animation:enter var(--dur-4) var(--ease-out) forwards; animation-delay:var(--enter-delay,360ms); }
  .js .reveal{ opacity:0; translate:0 24px; transition:opacity var(--dur-4) var(--ease-out), translate var(--dur-4) var(--ease-out); transition-delay:var(--reveal-delay,0ms); }
  .js .reveal.is-in{ opacity:1; translate:0 0; }
}
@keyframes line-up{ to{ transform:none; } }
@keyframes enter{ to{ opacity:1; transform:none; } }

/* --------------------------------------------------------------------------
   24. Reduced motion (global kill switch)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* --------------------------------------------------------------------------
   25. Print
   -------------------------------------------------------------------------- */
@media print{
  body{ background:#fff; color:#000; }
  body::after,.site-header,.footer-word,.signal-map,.nav-toggle{ display:none!important; }
  a{ color:#000; }
}

/* Homepage dial: tick bezel turns slowly, dashed orbit counter-rotates.
   Labels and product nodes stay put so they stay readable. */
.page-home .signal-map svg > g,
.page-home .signal-map .sm-ring--orbit{ transform-box:view-box; transform-origin:300px 300px; }
@media (prefers-reduced-motion: no-preference){
  .page-home .signal-map svg > g{ animation:sm-spin 60s linear infinite; }
  .page-home .signal-map .sm-ring--orbit{ animation:sm-spin 90s linear infinite reverse; }
}
@keyframes sm-spin{ to{ transform:rotate(360deg); } }

/* Dial needle (homepage), shown while the pointer is over the dial */
.page-home .signal-map .sm-needle{ transform-box:view-box; transform-origin:300px 300px; opacity:0; transition:opacity var(--dur-2) var(--ease-out); pointer-events:none; }
.page-home .signal-map .sm-needle line{ stroke:var(--cyan); stroke-width:1.5; stroke-linecap:round; }
.page-home .signal-map .sm-needle circle{ fill:var(--cyan); }
.page-home .signal-map.is-aiming .sm-needle{ opacity:.9; }
.page-home .signal-map.is-aiming{ cursor:pointer; }