/* ============================================================
   The 66th — Shared Canonical Stylesheet
   ============================================================
   Single source of truth for tokens, base styles, type system,
   layout primitives, and chrome components (nav, marquee,
   section heads, footer, CTA, utilities).

   Page-specific styles stay in each page's inline <style> block.

   FONT SIZE CONTROL
   -----------------
   The entire type system scales from `:root { font-size }`.
   Change ONE value to scale every body text size site-wide.

      :root { font-size: 16px }   ← default
      :root { font-size: 17px }   ← +6.25% bigger everywhere
      :root { font-size: 15px }   ← -6.25% smaller everywhere

   All component font sizes use rem. Display/hero sizes
   stay in clamp(px, vw, px) since they're viewport-relative.
   ============================================================ */

:root{
  /* Type scale base (controls all rem) */
  font-size: 16px;

  /* Surface */
  --bg:#0A0A0B;
  --bg-2:#0E0E10;
  --ink:#EDE8DE;          /* warm off-white */
  --ink-dim:#8A857A;      /* secondary */
  --ink-mute:#55524C;     /* tertiary, labels */
  --line:rgba(237,232,222,.08);
  --line-2:rgba(237,232,222,.14);

  /* Brand */
  --accent: oklch(78% 0.12 72);          /* warm amber — focal */
  --accent-2: oklch(88% 0.06 72);        /* pale champagne — italic */
  --glow: oklch(78% 0.12 72 / 0.35);     /* shadow / halo */
  --good: #7FB28F;                       /* positive deltas only */

  /* Type families */
  --f-sans: 'Geist', system-ui, sans-serif;
  --f-serif: 'Instrument Serif', serif;
  --f-mono: 'Geist Mono', monospace;

  /* Motion */
  --motion-fast: 240ms;
  --motion-base: 600ms;
  --motion-slow: 1200ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-sans);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","cv11";
}
html{scroll-behavior:auto}
body{
  overflow-x:hidden;
  line-height:1.45;
  font-size:1rem;            /* = root font-size, scales with --text-scale */
  letter-spacing:-0.005em;
}
::selection{background:var(--accent);color:#0A0A0B}

/* ============ GRAIN OVERLAY ============ */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/></svg>");
}

/* ============ CONTAINER ============ */
.wrap{max-width:1440px;margin:0 auto;padding:0 40px}
@media (max-width:800px){.wrap{padding:0 20px}}

/* ============ HAIRLINES ============ */
.hr{height:1px;background:var(--line);width:100%}
.vline{width:1px;background:var(--line);height:100%}

/* ============ TYPE UTILITIES ============ */
.mono{
  font-family:var(--f-mono);
  font-weight:400;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-size:0.75rem;         /* 12px @ root 16px — readability rule minimum for mono labels */
  color:var(--ink-dim);
}
.serif{
  font-family:var(--f-serif);
  font-weight:400;
  font-style:italic;
  letter-spacing:-0.01em;
}
.display{
  font-family:var(--f-sans);
  font-weight:500;
  letter-spacing:-0.035em;
  line-height:0.95;
}

/* ============ NAV (floating-island, double-bezel) ============ */
/* Outer shell — the "tray" the inner pill sits inside. */
nav.top{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);
  z-index:50;display:flex;align-items:center;gap:6px;
  padding:6px;
  background:linear-gradient(180deg,rgba(20,20,24,.55) 0%,rgba(10,10,12,.55) 100%);
  -webkit-backdrop-filter:blur(28px) saturate(140%);
  backdrop-filter:blur(28px) saturate(140%);
  border:1px solid rgba(237,232,222,.06);
  border-radius:999px;
  box-shadow:
    0 1px 0 rgba(237,232,222,.05) inset,
    0 0 0 1px rgba(0,0,0,.4),
    0 24px 60px -20px rgba(0,0,0,.7),
    0 8px 24px -8px rgba(0,0,0,.5);
  transition:top .6s cubic-bezier(.32,.72,0,1), padding .6s cubic-bezier(.32,.72,0,1), transform .6s cubic-bezier(.32,.72,0,1), background .35s;
  isolation:isolate;
}
/* Soft top-edge sheen — the "light catching the bezel" */
nav.top::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 0%, rgba(237,232,222,.08) 0%, transparent 50%);
  opacity:.9;
}
nav.top.scrolled{
  top:14px;
  padding:5px;
  background:linear-gradient(180deg,rgba(14,14,17,.85) 0%,rgba(8,8,10,.85) 100%);
  box-shadow:
    0 1px 0 rgba(237,232,222,.06) inset,
    0 0 0 1px rgba(0,0,0,.5),
    0 18px 40px -16px rgba(0,0,0,.8);
}

/* Inner core — the actual pill */
.nav-left{
  display:flex;align-items:center;gap:6px;
  height:40px;padding:0 6px 0 14px;
  border-radius:999px;
  position:relative;
}
.nav-left::after{
  content:"";position:absolute;right:-3px;top:18%;bottom:18%;width:1px;
  background:linear-gradient(180deg, transparent 0%, rgba(237,232,222,.12) 50%, transparent 100%);
}

/* Logo */
.logo{
  display:flex;align-items:center;gap:11px;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  padding-right:12px;
  transition:opacity .35s ease;
}
.logo:hover{opacity:.85}
.logo-mark{
  width:26px;height:26px;
  border-radius:5px;
  flex-shrink:0;
  display:block;
}

/* Primary links */
.navlinks{display:flex;gap:2px;align-items:center}
.nav-dd{position:relative;display:flex;align-items:center}
.navlinks a{
  position:relative;
  padding:9px 14px;border-radius:999px;
  font-size:.81rem;font-weight:400;letter-spacing:-.005em;
  color:rgba(237,232,222,.62);text-decoration:none;white-space:nowrap;
  transition:color .4s cubic-bezier(.32,.72,0,1);
  display:inline-flex;align-items:center;gap:6px;
}
.nav-dd-caret{display:inline-flex;width:9px;height:6px;color:rgba(237,232,222,.4);transition:transform .4s cubic-bezier(.32,.72,0,1), color .35s ease;position:relative;z-index:1}
.nav-dd:hover .nav-dd-caret,.nav-dd.open .nav-dd-caret{color:var(--ink);transform:translateY(1px) rotate(-180deg)}

/* ===== Dropdown panel ===== */
.nav-dd-panel{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px) scale(.985);
  width:max-content;max-width:min(760px,94vw);
  padding:6px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(22,22,26,.7) 0%,rgba(10,10,12,.7) 100%);
  -webkit-backdrop-filter:blur(32px) saturate(160%);
  backdrop-filter:blur(32px) saturate(160%);
  border:1px solid rgba(237,232,222,.07);
  box-shadow:
    0 1px 0 rgba(237,232,222,.06) inset,
    0 0 0 1px rgba(0,0,0,.4),
    0 36px 80px -24px rgba(0,0,0,.85),
    0 12px 30px -12px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;
  transition:opacity .35s cubic-bezier(.32,.72,0,1), transform .45s cubic-bezier(.32,.72,0,1);
  isolation:isolate;
}
.nav-dd-panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 0%, rgba(237,232,222,.08) 0%, transparent 55%);
}
/* Bridge so the gap between trigger and panel doesn't drop hover */
.nav-dd-panel::after{
  content:"";position:absolute;top:-18px;left:0;right:0;height:18px;
}
.nav-dd.open .nav-dd-panel{
  opacity:1;pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}
.nav-dd-inner{
  position:relative;
  border-radius:calc(24px - 6px);
  background:linear-gradient(180deg,rgba(14,14,17,.85),rgba(10,10,13,.85));
  border:1px solid rgba(237,232,222,.05);
  padding:22px;
  overflow:hidden;
}
.nav-dd-head{
  display:flex;align-items:baseline;gap:14px;
  padding:0 6px 16px;
  border-bottom:1px solid rgba(237,232,222,.06);
  margin-bottom:14px;
}
.nav-dd-eyebrow{
  font-family:var(--f-mono);font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);
}
.nav-dd-caption{
  font-family:var(--f-serif);font-style:italic;font-size:.95rem;
  color:var(--accent-2);
  letter-spacing:-.01em;
}
.nav-dd-body{
  display:flex;align-items:flex-start;gap:18px;
  padding:0 6px;
}
.nav-dd-col{display:flex;flex-direction:column;gap:8px;min-width:0}
.nav-dd-col:first-child{flex:0 0 320px}
.nav-dd-col:nth-child(2){flex:0 0 220px;border-left:1px solid rgba(237,232,222,.06);padding-left:18px}
.nav-dd-col:only-child{flex:0 0 320px}
.nav-dd-collabel{
  font-family:var(--f-mono);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-mute);
  padding:4px 12px;
}
.nav-dd-list{display:flex;flex-direction:column;gap:1px}
.nav-dd-item{
  position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;
  padding:11px 12px;border-radius:12px;
  text-decoration:none;color:var(--ink);
  transition:background .35s cubic-bezier(.32,.72,0,1), color .35s ease;
}
.nav-dd-item:hover{background:rgba(237,232,222,.04)}
.nav-dd-item-title{
  grid-column:1;
  font-family:var(--f-sans);font-size:.92rem;font-weight:400;letter-spacing:-.01em;
  color:var(--ink);
  line-height:1.2;
}
.nav-dd-item-blurb{
  grid-column:1;grid-row:2;
  font-family:var(--f-sans);font-size:.74rem;
  color:var(--ink-dim);
  line-height:1.45;margin-top:2px;
}
.nav-dd-item-arr{
  grid-column:2;grid-row:1 / span 2;
  font-family:var(--f-mono);font-size:.78rem;color:var(--ink-mute);
  align-self:center;
  transition:transform .4s cubic-bezier(.32,.72,0,1), color .35s ease;
}
.nav-dd-item:hover .nav-dd-item-arr{transform:translate(3px,-3px);color:var(--accent)}
.nav-dd-foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:16px;padding:14px 16px;
  border-radius:14px;
  background:rgba(237,232,222,.025);
  border:1px solid rgba(237,232,222,.06);
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  transition:background .35s cubic-bezier(.32,.72,0,1), border-color .35s ease;
}
.nav-dd-foot:hover{background:rgba(237,232,222,.05);border-color:rgba(237,232,222,.12)}
.nav-dd-foot .arr{color:var(--accent);transition:transform .35s cubic-bezier(.32,.72,0,1)}
.nav-dd-foot:hover .arr{transform:translateX(4px)}
@media (prefers-reduced-motion: reduce){
  .nav-dd-panel,.nav-dd-item,.nav-dd-item-arr,.nav-dd-caret,.nav-dd-foot,.nav-dd-foot .arr{transition-duration:.15s !important}
}
.navlinks a::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:rgba(237,232,222,.04);
  opacity:0;transform:scale(.92);
  transition:opacity .35s cubic-bezier(.32,.72,0,1), transform .35s cubic-bezier(.32,.72,0,1);
}
.navlinks a:hover{color:var(--ink)}
.navlinks a:hover::before{opacity:1;transform:scale(1)}
.navlinks a.active{color:var(--ink)}
.navlinks a.active::before{
  opacity:1;transform:scale(1);
  background:rgba(237,232,222,.05);
  box-shadow:inset 0 0 0 1px rgba(237,232,222,.1), inset 0 1px 0 rgba(237,232,222,.08);
}
.navlinks a.active::after{
  content:"";position:absolute;left:50%;bottom:1px;width:4px;height:4px;margin-left:-2px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--glow);
}

/* Ghost "Contact" button */
.nav-cta-ghost{
  display:inline-flex;align-items:center;gap:9px;
  height:40px;padding:0 18px;
  background:transparent;color:rgba(237,232,222,.7);
  border:1px solid rgba(237,232,222,.08);
  border-radius:999px;
  font-family:var(--f-mono);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  text-decoration:none;white-space:nowrap;flex-shrink:0;
  margin-right:2px;position:relative;
  transition:color .4s cubic-bezier(.32,.72,0,1), border-color .4s cubic-bezier(.32,.72,0,1), background .4s cubic-bezier(.32,.72,0,1);
}
.nav-cta-ghost::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:rgba(237,232,222,.3);
  transition:background .35s cubic-bezier(.32,.72,0,1), box-shadow .35s cubic-bezier(.32,.72,0,1), transform .35s cubic-bezier(.32,.72,0,1);
}
.nav-cta-ghost:hover{
  color:var(--ink);
  border-color:rgba(237,232,222,.2);
  background:rgba(237,232,222,.03);
}
.nav-cta-ghost:hover::before{
  background:var(--accent-2);
  box-shadow:0 0 12px var(--glow);
  transform:scale(1.2);
}

/* Primary CTA — button-in-button, magnetic hover */
.nav-cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 6px 6px 18px;height:40px;
  background:var(--ink);color:var(--bg);
  border-radius:999px;
  font-family:var(--f-mono);font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  text-decoration:none;white-space:nowrap;flex-shrink:0;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 8px 20px -10px rgba(0,0,0,.6);
  transition:background .4s cubic-bezier(.32,.72,0,1), transform .25s cubic-bezier(.32,.72,0,1), box-shadow .4s cubic-bezier(.32,.72,0,1);
}
.nav-cta .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px var(--glow), 0 0 0 3px rgba(255,180,100,.12);
  animation:cta-pulse 2.6s cubic-bezier(.32,.72,0,1) infinite;
}
@keyframes cta-pulse{
  0%,100%{box-shadow:0 0 10px var(--glow), 0 0 0 3px rgba(255,180,100,.1)}
  50%{box-shadow:0 0 16px var(--glow), 0 0 0 5px rgba(255,180,100,.18)}
}
@media (prefers-reduced-motion: reduce){ .nav-cta .dot{animation:none} }
.nav-cta .arr{
  width:28px;height:28px;border-radius:50%;
  background:var(--bg);color:var(--ink);
  display:grid;place-items:center;font-size:.75rem;
  transition:transform .45s cubic-bezier(.32,.72,0,1), background .4s cubic-bezier(.32,.72,0,1);
}
.nav-cta:hover{
  background:var(--accent);color:var(--bg);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 14px 30px -10px var(--glow);
}
.nav-cta:hover .arr{
  transform:translate(2px,-2px) rotate(-12deg) scale(1.06);
  background:var(--bg);
}
.nav-cta:active{transform:scale(.97)}

/* Hamburger */
.nav-burger{
  display:none;width:40px;height:40px;
  border:1px solid rgba(237,232,222,.1);border-radius:50%;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  padding:0;background:rgba(237,232,222,.02);cursor:pointer;
  transition:background .35s ease, border-color .35s ease;
}
.nav-burger:hover{background:rgba(237,232,222,.06);border-color:rgba(237,232,222,.18)}
.nav-burger span{
  display:block;width:14px;height:1.5px;background:var(--ink);
  transition:transform .5s cubic-bezier(.32,.72,0,1), opacity .35s ease;
}
.nav-burger.open span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-3.25px) rotate(-45deg)}

/* Mobile menu — staggered mask reveal */
.mobile-menu{
  display:none;position:fixed;inset:0;
  background:radial-gradient(120% 80% at 50% 0%, rgba(20,20,24,.4), rgba(6,6,8,.94) 60%);
  -webkit-backdrop-filter:blur(28px) saturate(140%);
  backdrop-filter:blur(28px) saturate(140%);
  z-index:49;padding:104px 28px 40px;
  flex-direction:column;
  opacity:0;pointer-events:none;
  transition:opacity .5s cubic-bezier(.32,.72,0,1);
}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu a{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 4px;
  border-bottom:1px solid rgba(237,232,222,.08);
  font-size:1.6rem;letter-spacing:-.025em;line-height:1;
  color:var(--ink);text-decoration:none;
  opacity:0;transform:translateY(28px);filter:blur(8px);
  transition:opacity .7s cubic-bezier(.32,.72,0,1), transform .7s cubic-bezier(.32,.72,0,1), filter .7s cubic-bezier(.32,.72,0,1), color .3s ease;
}
.mobile-menu a::after{
  content:"→";font-family:var(--f-mono);font-size:.85rem;color:var(--ink-mute);
  transition:transform .35s cubic-bezier(.32,.72,0,1), color .3s ease;
}
.mobile-menu a:hover::after{transform:translateX(6px) rotate(-12deg);color:var(--accent)}
.mobile-menu.open a{opacity:1;transform:translateY(0);filter:blur(0)}
.mobile-menu.open a:nth-child(1){transition-delay:.08s}
.mobile-menu.open a:nth-child(2){transition-delay:.14s}
.mobile-menu.open a:nth-child(3){transition-delay:.20s}
.mobile-menu.open a:nth-child(4){transition-delay:.26s}
.mobile-menu.open a:nth-child(5){transition-delay:.32s}
.mobile-menu.open a:nth-child(6){transition-delay:.38s}
.mobile-menu.open a:nth-child(7){transition-delay:.44s}
.mobile-menu.open a:nth-child(8){transition-delay:.50s}
@media (prefers-reduced-motion: reduce){
  .mobile-menu a,.mobile-menu.open a{transition-duration:.2s !important;filter:none !important;transform:none !important}
}

@media (max-width:1000px){
  nav.top{top:14px;padding:5px;gap:4px}
  .navlinks{display:none}
  .nav-left{padding:0 4px 0 12px;gap:0}
  .nav-left::after{display:none}
  .logo{padding-right:0}
  .nav-burger{display:flex}
  .mobile-menu{display:flex}
  .nav-cta-ghost{display:inline-flex}
  .nav-cta{display:none}
}
@media (max-width:520px){
  nav.top{left:14px;right:14px;transform:none;width:auto;justify-content:space-between}
  .logo span:not(.logo-mark){font-size:.66rem}
}

/* ============ MARQUEE ============ */
.marquee{padding:60px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;position:relative;background:var(--bg-2)}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:200px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--bg-2),transparent)}
.marquee::after{right:0;background:linear-gradient(-90deg,var(--bg-2),transparent)}
.marquee-track{display:flex;gap:96px;width:max-content;animation:scroll 50s linear infinite;align-items:center}
.marquee-item{display:flex;align-items:center;white-space:nowrap;flex:0 0 auto}
.marquee-item img{height:42px;width:auto;max-width:170px;object-fit:contain;opacity:.55;filter:grayscale(1) brightness(1.6) contrast(1.1);transition:opacity .35s ease,filter .35s ease}
.marquee-item:hover img{opacity:1;filter:grayscale(0) brightness(1) contrast(1)}
@media (max-width:700px){.marquee-track{gap:64px}.marquee-item img{height:32px}}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============ SECTION HEADERS ============ */
.section{padding:140px 40px;position:relative}
.section-head{display:grid;grid-template-columns:200px 1fr;gap:60px;margin-bottom:80px;align-items:start}
.section-head .label{font-family:var(--f-mono);font-size:0.75rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--ink-dim);padding-top:18px;border-top:1px solid var(--accent);display:inline-block;align-self:start}
.section-head h2{font-family:var(--f-sans);font-weight:400;font-size:clamp(36px,5vw,72px);line-height:1.02;letter-spacing:-0.035em;max-width:22ch}
.section-head h2 .it{font-family:var(--f-serif);font-style:italic;color:var(--accent-2)}
.section-head .intro{margin-top:24px;color:#B8B2A7;font-size:clamp(1rem,1.2vw,1.1875rem);max-width:52ch;line-height:1.6}  /* readability: bigger + lighter dim */
@media (max-width:900px){.section{padding:100px 20px}.section-head{grid-template-columns:1fr;gap:24px;margin-bottom:48px}}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line);padding:80px 40px 40px;background:var(--bg-2)}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:60px;margin-bottom:80px}
.footer-brand h3{font-family:var(--f-sans);font-weight:400;font-size:4.5rem;line-height:1;letter-spacing:-0.04em;margin-bottom:24px}
.footer-brand h3 .it{font-family:var(--f-serif);font-style:italic;color:var(--accent-2)}
.footer-brand p{color:#B8B2A7;font-size:0.9375rem;max-width:32ch;line-height:1.6}    /* 15px, lighter dim */
.footer-col h4{font-family:var(--f-mono);font-size:0.75rem;color:var(--ink-dim);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:24px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col a{color:var(--ink);text-decoration:none;font-size:0.9375rem;transition:color .2s}    /* 15px, was 14px */
.footer-col a:hover{color:var(--accent)}
.footer-bot{display:flex;justify-content:space-between;align-items:center;padding-top:32px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:0.75rem;color:var(--ink-mute);letter-spacing:0.1em;text-transform:uppercase}
@media (max-width:900px){.footer-top{grid-template-columns:1fr;gap:40px}footer{padding:60px 20px 32px}.footer-bot{flex-direction:column;gap:12px}}

/* ============ REVEAL ANIMATIONS ============ */
.reveal{opacity:0;transform:translateY(30px)}
.reveal-word{display:inline-block;overflow:hidden}
.reveal-word > span{display:inline-block;transform:translateY(110%)}
.mask{overflow:hidden}
.mask > *{display:inline-block;transform:translateY(110%)}

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--ink-mute)}

/* ============================================================
   COMPONENTS — moved from homepage inline <style> 2026-05-08
   These are the canonical homepage components. Every page that
   uses them inherits from here. Do NOT redeclare in page <style>.
   ============================================================ */

/* ---- Hero ---- */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px 40px 40px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-bg::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, oklch(78% 0.12 72 / 0.15), transparent 60%),
    radial-gradient(circle 600px at 20% 30%, oklch(78% 0.12 72 / 0.08), transparent);
}
.hero-grid{position:absolute;inset:0;background-image:
  linear-gradient(to right, var(--line) 1px, transparent 1px),
  linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:120px 120px;mask-image:radial-gradient(ellipse 100% 70% at 50% 70%, black 20%, transparent 80%);opacity:.6}
.cursor-glow{position:absolute;width:800px;height:800px;border-radius:50%;
  background:radial-gradient(circle, oklch(78% 0.12 72 / 0.12), transparent 60%);
  transform:translate(-50%,-50%);pointer-events:none;z-index:1;filter:blur(40px);mix-blend-mode:screen}
.hero-inner{position:relative;z-index:2;max-width:1440px;margin:0 auto;width:100%}
.hero-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:40px;font-family:var(--f-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-dim)}
.hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--glow);animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.85)}}
.hero h1{font-family:var(--f-sans);font-weight:400;font-size:clamp(56px,9vw,152px);line-height:0.92;letter-spacing:-0.045em;color:var(--ink);max-width:14ch}
.hero h1 .it{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--accent-2);letter-spacing:-0.02em}
.hero-sub{margin-top:36px;display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end;padding-top:32px;border-top:1px solid var(--line)}
.hero-sub p{max-width:52ch;color:#B8B2A7;font-size:clamp(17px,1.3vw,20px);line-height:1.6}
.hero-cta{display:flex;align-items:center;gap:14px;padding:18px 28px;background:var(--ink);color:var(--bg);border-radius:999px;text-decoration:none;font-weight:500;font-size:15px;letter-spacing:-0.01em;transition:all .3s;white-space:nowrap}
.hero-cta:hover{background:var(--accent);transform:translateY(-2px)}
.hero-cta .arr{width:20px;height:20px;border-radius:50%;background:var(--bg);color:var(--ink);display:grid;place-items:center;font-size:10px;transition:transform .3s}
.hero-cta:hover .arr{background:var(--bg);color:var(--accent);transform:translateX(2px) rotate(-45deg)}
.hero-meta{position:absolute;bottom:40px;right:40px;z-index:2;text-align:right;font-family:var(--f-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-mute);line-height:1.8}
.hero-corner{position:absolute;top:100px;right:40px;z-index:2;font-family:var(--f-mono);font-size:10px;color:var(--ink-mute);letter-spacing:0.1em;text-transform:uppercase;line-height:1.8;text-align:right}
@media (max-width:900px){.hero{padding:120px 20px 40px}.hero-sub{grid-template-columns:1fr}.hero-meta,.hero-corner{display:none}}
@media (max-width:900px){.hero.compact{padding:100px 20px 48px;min-height:auto;justify-content:flex-start}.hero.compact h1{font-size:clamp(34px,9vw,44px);max-width:100%}.hero.compact .hero-eyebrow{margin-bottom:40px}.hero.compact .hero-sub{margin-top:20px;padding-top:16px;gap:20px;border-top:none}.hero.compact .scroll-ind{display:none}}

/* ---- Scroll indicator ---- */
.scroll-ind{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--f-mono);font-size:10px;color:var(--ink-mute);letter-spacing:0.2em;text-transform:uppercase;z-index:3}
.scroll-ind .ln{width:1px;height:40px;background:var(--line-2);position:relative;overflow:hidden}
.scroll-ind .ln::after{content:"";position:absolute;left:0;top:0;width:100%;height:40%;background:var(--accent);animation:slide 2.2s ease-in-out infinite}
@keyframes slide{0%{top:-40%}100%{top:100%}}

/* ---- Services sticky stack (4 pillars on home, 3 on service pages) ---- */
.services-section{position:relative}
.services-stack{position:relative}
.service-card{position:sticky;top:10vh;height:80vh;display:flex;align-items:center;border:1px solid var(--line);background:var(--bg-2);border-radius:8px;overflow:hidden;margin-bottom:24px}
.services-stack > article:nth-child(1){z-index:1}
.services-stack > article:nth-child(2){z-index:2}
.services-stack > article:nth-child(3){z-index:3}
.services-stack > article:nth-child(4){z-index:4}
.service-card .card-inner{display:grid;grid-template-columns:1fr 1fr;width:100%;height:100%}
.service-card .left{padding:56px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--line)}
.service-card .right{padding:56px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 50%, oklch(78% 0.12 72 / 0.06), transparent 70%);overflow:hidden}
.service-num{font-family:var(--f-mono);font-size:12px;color:var(--ink-dim);letter-spacing:0.15em}
.service-num .accent{color:var(--accent)}
.service-card h3{font-family:var(--f-sans);font-weight:400;font-size:clamp(32px,3.6vw,56px);line-height:1.02;letter-spacing:-0.03em;margin:auto 0;max-width:14ch}
.service-card h3 .it{font-family:var(--f-serif);font-style:italic;color:var(--accent-2)}
.service-card p{color:#B8B2A7;font-size:clamp(15px,1.15vw,17px);max-width:52ch;line-height:1.6}
.service-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.service-tag{font-family:var(--f-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-dim);padding:8px 14px;border:1px solid var(--line-2);border-radius:999px}
@media (max-width:900px){.service-card{position:relative;top:0;height:auto}.service-card .card-inner{grid-template-columns:1fr}.service-card .left{border-right:none;border-bottom:1px solid var(--line);padding:32px}.service-card .right{padding:32px;min-height:260px}}

/* ---- Service card visualizations ---- */
.viz{width:100%;height:100%;position:relative;min-height:360px}
.viz-rings{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;padding:32px}
.gpt{width:100%;max-width:480px;background:#1B1B1F;border:1px solid var(--line-2);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.02) inset;overflow:hidden;font-family:var(--f-sans)}
.gpt-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.06);font-family:var(--f-mono);font-size:10px;color:var(--ink-mute);letter-spacing:0.12em;text-transform:uppercase}
.gpt-head .dots{display:flex;gap:6px;margin-right:6px}
.gpt-head .dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.12)}
.gpt-body{padding:18px 18px 22px;display:flex;flex-direction:column;gap:18px;min-height:300px}
.gpt-msg{display:flex;gap:12px;align-items:flex-start}
.gpt-msg .av{width:26px;height:26px;border-radius:50%;flex:0 0 26px;display:grid;place-items:center;font-family:var(--f-mono);font-size:9px;font-weight:600;letter-spacing:0.05em}
.gpt-msg.user .av{background:#3F3F46;color:var(--ink)}
.gpt-msg.ai .av{background:#10A37F;color:#fff}
.gpt-msg .body{flex:1;font-size:14px;line-height:1.55;color:var(--ink);padding-top:4px}
.gpt-msg .label{display:block;font-family:var(--f-mono);font-size:9px;letter-spacing:0.15em;color:var(--ink-mute);text-transform:uppercase;margin-bottom:6px}
.gpt-q{display:inline}
.gpt-q .caret{display:inline-block;width:7px;height:14px;background:var(--accent);vertical-align:-2px;margin-left:2px;animation:gptCaret 1s steps(1) infinite}
@keyframes gptCaret{50%{opacity:0}}
.gpt-stream{display:inline}
.gpt-stream .tok{opacity:0}
.gpt-stream .tok.brand{color:var(--accent);font-weight:500;background:oklch(78% 0.12 72 / 0.12);padding:1px 6px;border-radius:4px;border:1px solid oklch(78% 0.12 72 / 0.3)}
.gpt-sources{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06);display:flex;flex-wrap:wrap;gap:8px;opacity:0}
.gpt-source{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid rgba(255,255,255,.08);border-radius:999px;font-family:var(--f-mono);font-size:10px;color:var(--ink-dim);letter-spacing:0.06em}
.gpt-source .fav{width:6px;height:6px;border-radius:50%;background:#666}
.gpt-source.brand{border-color:var(--accent);color:var(--ink);background:oklch(78% 0.12 72 / 0.08)}
.gpt-source.brand .fav{background:var(--accent);box-shadow:0 0 8px var(--glow)}
@media (prefers-reduced-motion: reduce){.gpt *{animation:none !important}}

.viz-code{font-family:var(--f-mono);font-size:12px;line-height:1.8;color:var(--ink-dim);padding:32px;background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:6px;width:100%;max-width:480px;position:relative;overflow:hidden}
.viz-code .ln{display:block}
.viz-code .key{color:var(--accent-2)}
.viz-code .str{color:#9FB8A8}
.viz-code .num{color:var(--accent)}
.viz-code .c{color:var(--ink-mute)}
.viz-code::before{content:"schema.json";position:absolute;top:10px;right:14px;font-size:10px;color:var(--ink-mute)}

/* viz-morph (Wireframe → Design → Live) */
.viz-morph{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;padding:32px}
.morph{width:100%;max-width:480px;background:#101013;border:1px solid var(--line-2);border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden}
.morph-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:#0C0C0F}
.morph-bar .tl{display:flex;gap:5px}
.morph-bar .tl span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.1)}
.morph-bar .url{flex:1;font-family:var(--f-mono);font-size:10px;color:var(--ink-mute);letter-spacing:0.06em;text-align:center;padding:5px 12px;background:rgba(255,255,255,.03);border-radius:5px}
.morph-stage{position:relative;padding:22px;min-height:340px;background:#0E0E10;transition:background .8s ease}
.morph-label{position:absolute;top:14px;right:14px;display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line-2);border-radius:999px;background:rgba(0,0,0,.4);font-family:var(--f-mono);font-size:9px;color:var(--ink-dim);letter-spacing:0.18em;text-transform:uppercase;z-index:5;backdrop-filter:blur(6px)}
.morph-label .dot{width:6px;height:6px;border-radius:50%;background:var(--ink-mute);transition:background .4s}
.morph[data-stage="design"] .morph-label .dot{background:var(--accent-2)}
.morph[data-stage="live"] .morph-label .dot{background:var(--accent);box-shadow:0 0 10px var(--glow)}
.morph[data-stage="live"] .morph-stage{background:#0A0A0B}
.morph-grid{display:flex;flex-direction:column;gap:12px}
.b{border-radius:6px;background:rgba(255,255,255,.05);border:1px dashed rgba(255,255,255,.12);transition:all .9s cubic-bezier(.65,.05,.35,1)}
.morph-h{height:18px;width:55%}
.morph-sub{height:10px;width:78%}
.morph-sub2{height:10px;width:66%}
.morph-row{display:flex;gap:10px}
.morph-img{flex:1;height:90px}
.morph-side{flex:1;display:flex;flex-direction:column;gap:8px;justify-content:center}
.morph-side .b{height:8px}
.morph-side .b:nth-child(1){width:90%}
.morph-side .b:nth-child(2){width:75%}
.morph-side .b:nth-child(3){width:82%}
.morph-cta{height:32px;width:140px;border-radius:999px}
.morph[data-stage="design"] .b,
.morph[data-stage="live"] .b{border-style:solid;border-color:transparent;background:rgba(255,255,255,.08)}
.morph[data-stage="design"] .morph-h,
.morph[data-stage="live"] .morph-h{height:24px;width:70%;background:rgba(237,232,222,.85)}
.morph[data-stage="design"] .morph-sub,
.morph[data-stage="live"] .morph-sub{height:8px;background:rgba(237,232,222,.25)}
.morph[data-stage="design"] .morph-sub2,
.morph[data-stage="live"] .morph-sub2{height:8px;background:rgba(237,232,222,.18)}
.morph[data-stage="design"] .morph-img,
.morph[data-stage="live"] .morph-img{background:linear-gradient(135deg, oklch(78% 0.12 72 / 0.18), oklch(78% 0.12 72 / 0.04));border:1px solid var(--line-2)}
.morph[data-stage="design"] .morph-cta,
.morph[data-stage="live"] .morph-cta{background:var(--accent);border:none;box-shadow:0 0 30px var(--glow)}
.morph[data-stage="live"] .morph-h{background:transparent;border:none;height:auto;width:auto;padding:0;display:block}
.morph[data-stage="live"] .morph-h .morph-h-real{display:block !important;font-family:var(--f-sans);font-weight:400;font-size:22px;letter-spacing:-0.025em;color:var(--ink);line-height:1.1}
.morph[data-stage="live"] .morph-h .morph-h-real .it{font-family:var(--f-serif);font-style:italic;color:var(--accent-2)}
.morph[data-stage="live"] .morph-sub,
.morph[data-stage="live"] .morph-sub2{background:transparent;border:none;height:auto;width:auto;padding:0;display:block}
.morph[data-stage="live"] .morph-sub .morph-sub-real,
.morph[data-stage="live"] .morph-sub2 .morph-sub2-real{display:block !important;font-size:11px;color:var(--ink-dim);line-height:1.5}
.morph[data-stage="live"] .morph-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:auto;width:auto;padding:9px 18px;color:var(--bg);font-family:var(--f-sans);font-size:12px;font-weight:500;background:var(--accent);box-shadow:0 0 30px var(--glow);align-self:flex-start;transition:transform .3s, box-shadow .3s}
.morph[data-stage="live"] .morph-cta .morph-cta-real{display:inline !important}
.morph[data-stage="live"] .morph-cta::after{content:"→";font-size:11px;display:inline}
.morph[data-stage="live"] .morph-cta.hover{transform:translateY(-2px);box-shadow:0 0 50px var(--glow), 0 0 0 4px oklch(78% 0.12 72 / 0.15)}
.morph[data-stage="live"] .morph-img{background:linear-gradient(135deg, oklch(78% 0.12 72 / 0.22), oklch(78% 0.12 72 / 0.04));border:1px solid var(--line-2);position:relative;overflow:hidden}
.morph[data-stage="live"] .morph-img::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 30% 40%, rgba(255,255,255,.1), transparent 50%), radial-gradient(circle at 80% 70%, oklch(78% 0.12 72 / 0.3), transparent 50%)}
.morph[data-stage="live"] .morph-side .b{background:rgba(237,232,222,.16);height:7px}
.morph-cursor{position:absolute;width:18px;height:24px;pointer-events:none;opacity:0;z-index:10;transition:transform .9s cubic-bezier(.65,.05,.35,1), opacity .3s}
.morph[data-stage="live"] .morph-cursor{opacity:1}
.morph-cursor svg{width:100%;height:100%;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
@media (prefers-reduced-motion: reduce){.morph *{transition:none !important}}

/* viz-tool (Spreadsheet → Dashboard) */
.viz-tool{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;padding:32px}
.tool-frame{width:100%;max-width:480px;position:relative;height:380px}
.tool-sheet, .tool-dash{position:absolute;inset:0;background:#101013;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);transition:opacity .8s ease, transform .8s cubic-bezier(.65,.05,.35,1), filter .8s ease}
.tool-sheet-head, .tool-dash-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);background:#0C0C0F;font-family:var(--f-mono);font-size:10px;letter-spacing:0.08em;color:var(--ink-mute);text-transform:uppercase}
.tool-tag{color:var(--ink-dim)}
.tool-tag-live{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.tool-tag-live .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--glow);animation:toolPulse 1.6s ease-in-out infinite}
@keyframes toolPulse{50%{opacity:.4}}
.tool-sheet-grid{display:flex;flex-direction:column}
.tool-row{display:grid;grid-template-columns:60px 1fr 90px 80px;gap:10px;padding:10px 14px;font-family:var(--f-mono);font-size:11px;color:var(--ink-dim);border-bottom:1px solid rgba(255,255,255,.04);transition:transform .9s cubic-bezier(.6,.05,.35,1), opacity .6s ease, filter .6s ease}
.tool-row.hdr{color:var(--ink-mute);font-size:9px;letter-spacing:0.12em;text-transform:uppercase;background:rgba(255,255,255,.02)}
.tool-row .st{color:var(--ink-mute)}
.tool-row[data-r] .st{padding:2px 7px;border:1px solid var(--line-2);border-radius:4px;font-size:9px;text-align:center}
.tool-row[data-r] .st:not(.hdr){display:inline-block}
.tool-dash{opacity:0;pointer-events:none}
.tool-dash-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:10px;padding:14px}
.tool-tile{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:8px;padding:14px;opacity:0;transform:translateY(8px);transition:opacity .6s ease, transform .6s ease}
.tool-metric .tool-metric-label{font-family:var(--f-mono);font-size:9px;color:var(--ink-mute);letter-spacing:0.12em;text-transform:uppercase}
.tool-metric .tool-metric-value{font-family:var(--f-sans);font-size:28px;font-weight:400;color:var(--ink);letter-spacing:-0.02em;margin-top:6px;line-height:1}
.tool-metric .tool-metric-delta{font-family:var(--f-mono);font-size:10px;color:var(--accent);margin-top:4px}
.tool-chart{display:grid;place-items:center;padding:8px;position:relative}
.tool-chart svg{width:100%;height:80px;display:block}
.tool-chart::before{content:"30d";position:absolute;top:6px;left:10px;font-family:var(--f-mono);font-size:8px;color:var(--ink-mute);letter-spacing:0.12em;text-transform:uppercase;z-index:2}
.tool-feed{grid-column:1 / -1;display:flex;flex-direction:column;gap:8px;padding:12px 14px}
.tool-feed-row{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:10px;color:var(--ink-dim)}
.tool-feed-dot{width:5px;height:5px;border-radius:50%}
.tool-feed-dot.ok{background:#7FB28F;box-shadow:0 0 6px rgba(127,178,143,.5)}
.tool-feed-dot.warn{background:var(--accent);box-shadow:0 0 6px var(--glow)}
.tool-frame[data-state="dash"] .tool-sheet{opacity:0;transform:scale(.96) translateY(-8px);filter:blur(6px)}
.tool-frame[data-state="dash"] .tool-dash{opacity:1;pointer-events:auto}
.tool-frame[data-state="dash"] .tool-tile{opacity:1;transform:translateY(0)}
.tool-frame[data-state="dash"] .tool-tile:nth-child(1){transition-delay:.2s}
.tool-frame[data-state="dash"] .tool-tile:nth-child(2){transition-delay:.35s}
.tool-frame[data-state="dash"] .tool-tile:nth-child(3){transition-delay:.5s}
.tool-frame[data-state="leaving"] .tool-row[data-r]{opacity:0;filter:blur(2px)}
.tool-frame[data-state="leaving"] .tool-row[data-r="0"]{transform:translateX(-30px)}
.tool-frame[data-state="leaving"] .tool-row[data-r="1"]{transform:translateX(40px)}
.tool-frame[data-state="leaving"] .tool-row[data-r="2"]{transform:translateX(-50px)}
.tool-frame[data-state="leaving"] .tool-row[data-r="3"]{transform:translateX(30px)}
.tool-frame[data-state="leaving"] .tool-row[data-r="4"]{transform:translateX(-25px)}
@media (prefers-reduced-motion: reduce){.tool-frame *{transition:none !important;animation:none !important}}

/* viz-roadmap (Strategic Roadmap) */
.viz-roadmap{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;padding:32px}
.rm{width:100%;max-width:520px;background:#101013;border:1px solid var(--line-2);border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden}
.rm-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);background:#0C0C0F;font-family:var(--f-mono);font-size:10px;color:var(--ink-mute);letter-spacing:0.1em;text-transform:uppercase}
.rm-tag{color:var(--accent-2)}
.rm-stage{position:relative;padding:38px 28px 90px}
.rm-line{position:absolute;left:28px;right:28px;top:62px;height:1px;background:rgba(255,255,255,.08);overflow:hidden}
.rm-line-fill{display:block;height:100%;width:0%;background:linear-gradient(90deg, var(--accent-2), var(--accent));box-shadow:0 0 12px var(--glow);transition:width 2.4s cubic-bezier(.65,.05,.35,1)}
.rm-quarters{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rm-q{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .5s ease, transform .5s ease}
.rm-q.in{opacity:1;transform:translateY(0)}
.rm-q-label{font-family:var(--f-mono);font-size:10px;color:var(--ink-mute);letter-spacing:0.15em;margin-bottom:8px}
.rm-q-dot{width:14px;height:14px;border-radius:50%;background:#1B1B1F;border:1.5px solid rgba(255,255,255,.18);position:relative;z-index:2;transition:all .4s ease;margin-bottom:14px}
.rm-q.in .rm-q-dot{border-color:var(--accent-2);background:var(--accent-2)}
.rm-q.hl .rm-q-dot{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 5px oklch(78% 0.12 72 / 0.18), 0 0 16px var(--glow);transform:scale(1.15)}
.rm-q-title{font-family:var(--f-sans);font-size:13px;color:var(--ink);font-weight:500;letter-spacing:-0.01em;margin-bottom:4px}
.rm-q-sub{font-family:var(--f-mono);font-size:9px;color:var(--ink-mute);letter-spacing:0.05em;line-height:1.4}
.rm-callout{position:absolute;left:50%;top:118px;transform:translate(-50%, 8px);width:170px;padding:11px 13px;background:#1B1B1F;border:1px solid var(--accent);border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.5), 0 0 0 1px oklch(78% 0.12 72 / 0.2);opacity:0;transition:opacity .5s ease, transform .5s ease;z-index:3}
.rm-callout.in{opacity:1;transform:translate(-50%, 0)}
.rm-callout-arrow{position:absolute;top:-5px;left:50%;width:8px;height:8px;background:#1B1B1F;border-left:1px solid var(--accent);border-top:1px solid var(--accent);transform:translateX(-50%) rotate(45deg)}
.rm-callout-label{font-family:var(--f-mono);font-size:8px;color:var(--accent);letter-spacing:0.18em;text-transform:uppercase;margin-bottom:6px}
.rm-callout-text{font-family:var(--f-sans);font-size:10.5px;color:var(--ink);line-height:1.5}
.rm-callout-text em{font-family:var(--f-serif);font-style:italic;color:var(--accent-2);font-size:11.5px}
.rm-foot{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);background:#0C0C0F}
.rm-kpi{padding:14px 16px;text-align:center;border-right:1px solid var(--line);opacity:0;transition:opacity .5s ease}
.rm-kpi:last-child{border-right:none}
.rm.lit .rm-kpi{opacity:1}
.rm.lit .rm-kpi:nth-child(1){transition-delay:.2s}
.rm.lit .rm-kpi:nth-child(2){transition-delay:.35s}
.rm.lit .rm-kpi:nth-child(3){transition-delay:.5s}
.rm-kpi-v{display:block;font-family:var(--f-sans);font-size:18px;color:var(--ink);font-weight:400;letter-spacing:-0.02em}
.rm-kpi-l{display:block;font-family:var(--f-mono);font-size:9px;color:var(--ink-mute);letter-spacing:0.1em;text-transform:uppercase;margin-top:3px}
@media (prefers-reduced-motion: reduce){.rm *{transition:none !important;animation:none !important}}

.viz-sources{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%;max-width:420px}
.viz-sources .node{aspect-ratio:1;border:1px solid var(--line-2);border-radius:8px;display:grid;place-items:center;font-family:var(--f-mono);font-size:10px;color:var(--ink-dim);letter-spacing:0.08em;background:rgba(255,255,255,0.015);position:relative;transition:all .4s}
.viz-sources .node.hl{border-color:var(--accent);color:var(--ink);background:oklch(78% 0.12 72 / 0.08)}
.viz-sources .node.hl::after{content:"";position:absolute;inset:-1px;border-radius:8px;box-shadow:0 0 0 1px var(--accent), 0 0 30px var(--glow);opacity:.5}
.viz-quote{max-width:460px;position:relative}
.viz-quote .q{font-family:var(--f-serif);font-style:italic;font-size:28px;line-height:1.25;color:var(--ink)}
.viz-quote .cite{margin-top:20px;font-family:var(--f-mono);font-size:10px;color:var(--ink-dim);letter-spacing:0.1em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.viz-quote .cite::before{content:"";width:30px;height:1px;background:var(--accent)}
.viz-funnel{width:100%;max-width:380px;display:flex;flex-direction:column;gap:10px}
.viz-funnel .step{padding:14px 18px;border:1px solid var(--line-2);border-radius:6px;display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:11px;color:var(--ink-dim);letter-spacing:0.08em;text-transform:uppercase}
.viz-funnel .step.b{border-color:var(--accent);color:var(--ink);background:oklch(78% 0.12 72 / 0.06)}
.viz-funnel .step .v{color:var(--ink)}
.viz-funnel .step.b .v{color:var(--accent)}
.viz-funnel .arr{text-align:center;color:var(--ink-mute);font-family:var(--f-mono);font-size:10px}

/* ---- Process (horizontal pin scroll) ---- */
.process{position:relative}
.process-pin{height:100vh;overflow:hidden;display:flex;flex-direction:column;background:var(--bg)}
.process-head{padding:80px 40px 40px;display:grid;grid-template-columns:200px 1fr auto;gap:60px;align-items:end;border-bottom:1px solid var(--line)}
.process-head h2{font-family:var(--f-sans);font-weight:400;font-size:clamp(28px,3.6vw,48px);line-height:1.02;letter-spacing:-0.03em;max-width:22ch}
.process-head h2 .it{font-family:var(--f-serif);font-style:italic;color:var(--accent-2)}
.process-progress{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:11px;color:var(--ink-dim);letter-spacing:0.1em}
.process-bar{width:120px;height:2px;background:var(--line-2);position:relative}
.process-bar .fill{position:absolute;left:0;top:0;height:100%;background:var(--accent);width:0%}
.process-track{flex:1;display:flex;will-change:transform}
.process-step{flex:0 0 100vw;height:100%;padding:60px 40px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;border-right:1px solid var(--line)}
.process-step .text .num{font-family:var(--f-mono);font-size:13px;color:var(--accent);letter-spacing:0.2em;margin-bottom:24px}
.process-step .text h3{font-family:var(--f-sans);font-weight:400;font-size:clamp(32px,4vw,64px);line-height:1.02;letter-spacing:-0.035em;margin-bottom:24px;max-width:12ch}
.process-step .text h3 .it{font-family:var(--f-serif);font-style:italic;color:var(--accent-2)}
.process-step .text p{color:var(--ink-dim);font-size:17px;line-height:1.55;max-width:48ch}
.process-step .visual{height:100%;min-height:400px;position:relative;display:grid;place-items:center}
.dash{width:100%;max-width:520px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.5)}
.dash-top{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-family:var(--f-mono);font-size:10px;color:var(--ink-mute);letter-spacing:0.1em;text-transform:uppercase}
.dash-dots{display:flex;gap:6px}
.dash-dots span{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.dash-body{padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dash-stat{padding:16px;border:1px solid var(--line);border-radius:6px}
.dash-stat .lbl{font-family:var(--f-mono);font-size:10px;color:var(--ink-dim);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:8px}
.dash-stat .val{font-family:var(--f-sans);font-size:32px;font-weight:400;letter-spacing:-0.03em}
.dash-stat .val .s{color:var(--accent);font-size:14px;margin-left:4px}
.dash-chart{grid-column:1 / -1;height:120px;position:relative;border:1px solid var(--line);border-radius:6px;padding:14px;overflow:hidden}
.dash-chart svg{width:100%;height:100%}
.strategy-list{display:flex;flex-direction:column;gap:12px;width:100%;max-width:460px}
.strategy-list .row{padding:18px 22px;border:1px solid var(--line);border-radius:6px;display:flex;justify-content:space-between;align-items:center;transition:all .4s}
.strategy-list .row .name{font-size:15px;color:var(--ink)}
.strategy-list .row .status{font-family:var(--f-mono);font-size:10px;color:var(--accent);letter-spacing:0.1em}
.strategy-list .row.active{border-color:var(--accent);background:oklch(78% 0.12 72 / 0.05)}
.growth-chart{width:100%;max-width:540px;aspect-ratio:5/3;border:1px solid var(--line);border-radius:8px;padding:24px;background:var(--bg-2);position:relative}
.growth-chart svg{width:100%;height:100%}
@media (max-width:900px){
  .process-pin{height:auto}
  .process-head{grid-template-columns:1fr;padding:40px 20px}
  .process-track{flex-direction:column}
  .process-step{flex:1;padding:40px 20px;grid-template-columns:1fr;gap:32px;border-right:none;border-bottom:1px solid var(--line);width:100vw}
}

/* ---- Values grid ---- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.value{padding:64px 40px;border-right:1px solid var(--line);position:relative}
.value:last-child{border-right:none}
.value .num{font-family:var(--f-mono);font-size:11px;color:var(--ink-dim);letter-spacing:0.15em;margin-bottom:48px}
.value h3{font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:clamp(32px,3.2vw,44px);line-height:1.05;letter-spacing:-0.015em;margin-bottom:18px;color:var(--ink)}
.value p{color:var(--ink-dim);font-size:15px;line-height:1.55;max-width:34ch}
@media (max-width:900px){.values{grid-template-columns:1fr}.value{border-right:none;border-bottom:1px solid var(--line);padding:48px 20px}}

/* ---- Stats ---- */
.stats-section{padding:160px 40px;position:relative;border-top:1px solid var(--line)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:64px 40px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:24px}
.stat:last-child{border-right:none}
.stat .big{font-family:var(--f-sans);font-weight:300;font-size:clamp(80px,12vw,180px);line-height:0.85;letter-spacing:-0.05em;display:flex;align-items:baseline;gap:4px}
.stat .big .unit{font-family:var(--f-serif);font-style:italic;font-size:0.4em;color:var(--accent-2);font-weight:400;letter-spacing:-0.02em;line-height:1}
.stat .lbl{font-family:var(--f-mono);font-size:11px;color:var(--ink-dim);letter-spacing:0.15em;text-transform:uppercase;max-width:24ch;line-height:1.6}
@media (max-width:900px){.stats-grid{grid-template-columns:1fr}.stat{border-right:none;border-bottom:1px solid var(--line);padding:48px 20px}}

/* ---- Cases ---- */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.case{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg-2);padding:32px;display:flex;flex-direction:column;gap:32px;cursor:pointer;transition:all .4s;position:relative}
.case:hover{border-color:var(--line-2);transform:translateY(-4px)}
.case.lg{grid-column:span 2}
.case-top{display:flex;justify-content:space-between;align-items:center}
.case-client{font-family:var(--f-mono);font-size:11px;color:var(--ink-dim);letter-spacing:0.15em;text-transform:uppercase}
.case-date{font-family:var(--f-mono);font-size:10px;color:var(--ink-mute);letter-spacing:0.1em;text-transform:uppercase}
.case h3{font-family:var(--f-sans);font-weight:400;font-size:clamp(24px,2.8vw,38px);line-height:1.1;letter-spacing:-0.025em}
.case h3 .it{font-family:var(--f-serif);font-style:italic;color:var(--accent-2)}
.case p{color:#B8B2A7;font-size:clamp(15px,1.15vw,17px);line-height:1.6;max-width:48ch}
.case-chart{height:280px;border-top:1px solid var(--line);padding-top:24px;position:relative;overflow:hidden}
.case-chart svg{width:100%;height:100%}
.case-chart-y{position:absolute;left:8px;top:24px;bottom:32px;display:flex;flex-direction:column;justify-content:space-between;font-family:var(--f-mono);font-size:9px;color:var(--ink-mute);letter-spacing:0.1em;text-transform:uppercase;pointer-events:none;z-index:2}
.case-chart-x{position:absolute;left:50px;right:12px;bottom:8px;display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:9px;color:var(--ink-mute);letter-spacing:0.1em;text-transform:uppercase;pointer-events:none;z-index:2}
.case-link{font-family:var(--f-mono);font-size:11px;color:var(--ink);letter-spacing:0.1em;text-transform:uppercase;display:flex;align-items:center;gap:10px;margin-top:auto}
.case-link::after{content:"→";transition:transform .3s}
.case:hover .case-link::after{transform:translateX(6px)}
@media (max-width:900px){.cases{grid-template-columns:1fr}.case.lg{grid-column:span 1}}

/* ---- Reviews ---- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.review{padding:32px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);display:flex;flex-direction:column;gap:24px;min-height:280px}
.review .stars{color:var(--accent);font-size:12px;letter-spacing:4px}
.review .q{font-family:var(--f-serif);font-style:italic;font-size:20px;line-height:1.3;color:var(--ink);flex:1}
.review .who{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--line)}
.review .avatar{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-2);flex:0 0 48px;overflow:hidden;background:var(--bg)}
.review .avatar img{width:100%;height:100%;object-fit:cover;display:block}
.review .who .n{font-size:14px;color:var(--ink);font-weight:500}
.review .who .r{font-family:var(--f-mono);font-size:10px;color:var(--ink-dim);letter-spacing:0.1em;text-transform:uppercase;margin-top:3px}
@media (max-width:900px){.reviews{grid-template-columns:1fr}}

/* ---- Industries row list ---- */
.industries{border-top:1px solid var(--line)}
.industry{display:grid;grid-template-columns:80px 1fr 1fr 120px;gap:40px;padding:40px;align-items:center;border-bottom:1px solid var(--line);transition:all .4s;cursor:pointer;position:relative;overflow:hidden}
.industry:hover{background:var(--bg-2)}
.industry .num{font-family:var(--f-mono);font-size:12px;color:var(--ink-dim);letter-spacing:0.15em}
.industry .name{font-family:var(--f-sans);font-weight:400;font-size:clamp(24px,3vw,40px);line-height:1;letter-spacing:-0.03em}
.industry .name .it{font-family:var(--f-serif);font-style:italic;color:var(--accent-2)}
.industry .desc{color:#B8B2A7;font-size:clamp(15px,1.15vw,17px);line-height:1.6;max-width:52ch}
.industry .arr{font-family:var(--f-mono);font-size:10px;color:var(--ink-mute);letter-spacing:0.1em;text-align:right;text-transform:uppercase;transition:all .3s}
.industry:hover .arr{color:var(--accent)}
.industries.static .industry{cursor:default}
.industries.static .industry:hover{background:transparent}
@media (max-width:900px){.industry{grid-template-columns:1fr;gap:12px;padding:32px 20px}.industry .arr{display:none}}

/* ---- Comparison table ---- */
.compare{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg-2)}
.compare-row{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:1px solid var(--line)}
.compare-row:last-child{border-bottom:none}
.compare-row.head{background:var(--bg);border-bottom:1px solid var(--line-2)}
.compare-row > div{padding:24px 32px;border-right:1px solid var(--line);display:flex;align-items:center;gap:14px}
.compare-row > div:last-child{border-right:none}
.compare-row .us{color:var(--ink)}
.compare-row .them{color:var(--ink-dim)}
.compare-row .lbl{font-family:var(--f-mono);font-size:10px;color:var(--ink-mute);letter-spacing:0.15em;text-transform:uppercase}
.check{width:18px;height:18px;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:var(--bg);font-size:11px;flex:0 0 18px}
.cross{width:18px;height:18px;border-radius:50%;border:1px solid var(--ink-mute);display:grid;place-items:center;color:var(--ink-mute);font-size:11px;flex:0 0 18px}
@media (max-width:900px){.compare-row > div{padding:18px 20px;font-size:14px}}
@media (max-width:680px){
  .compare-row{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .compare-row.head{display:none}
  .compare-row > div:first-child{grid-column:1/-1;padding:10px 18px;background:rgba(237,232,222,.03);font-family:var(--f-mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-mute);align-items:center;border-right:none;border-bottom:1px solid var(--line)}
  .compare-row > div:nth-child(2){padding:16px 16px;font-size:13px;align-items:flex-start;flex-direction:column;gap:8px;border-right:1px solid var(--line)}
  .compare-row > div:nth-child(2)::before{content:"The 66th";font-family:var(--f-mono);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent)}
  .compare-row > div:nth-child(3){padding:16px 16px;font-size:13px;align-items:flex-start;flex-direction:column;gap:8px;border-right:none}
  .compare-row > div:nth-child(3)::before{content:"Others";font-family:var(--f-mono);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-mute)}
}

/* ---- AI sources viz (legacy, kept for spec back-compat) ---- */
.ai-viz{padding:80px 40px;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);position:relative;min-height:600px;overflow:hidden}
.ai-viz::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%, oklch(78% 0.12 72 / 0.06) 0%, transparent 50%);pointer-events:none}
.ai-viz .center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:22px 32px 20px;border:1px solid var(--accent);border-radius:14px;background:linear-gradient(135deg, oklch(78% 0.12 72 / 0.18), oklch(78% 0.12 72 / 0.04));box-shadow:0 0 0 1px oklch(78% 0.12 72 / 0.2), 0 30px 60px rgba(0,0,0,.4), 0 0 60px var(--glow);z-index:5;text-align:center;min-width:180px}
.ai-viz .center .center-label{font-family:var(--f-mono);font-size:9px;letter-spacing:0.2em;color:var(--accent);text-transform:uppercase;display:block;margin-bottom:6px}
.ai-viz .center .center-name{font-family:var(--f-sans);font-size:18px;font-weight:500;color:var(--ink);letter-spacing:-0.01em;display:block}
.ai-viz .center .center-stat{font-family:var(--f-mono);font-size:9px;color:var(--ink-mute);letter-spacing:0.12em;text-transform:uppercase;display:block;margin-top:8px;padding-top:8px;border-top:1px solid oklch(78% 0.12 72 / 0.2)}
.ai-viz .center .center-stat .v{color:var(--ink)}
.ai-node{position:absolute;display:flex;align-items:center;gap:11px;padding:12px 16px 12px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg);box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:3;transition:all .4s;min-width:170px}
.ai-node:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.5), 0 0 0 1px oklch(78% 0.12 72 / 0.2)}
.ai-node .ai-logo{width:30px;height:30px;flex:0 0 30px;border-radius:7px;display:grid;place-items:center;background:#0E0E10;border:1px solid var(--line);overflow:hidden}
.ai-node .ai-logo svg{width:18px;height:18px;display:block}
.ai-node .ai-meta{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ai-node .ai-name{font-family:var(--f-sans);font-size:12px;font-weight:500;color:var(--ink);letter-spacing:-0.005em;line-height:1.1}
.ai-node .ai-stat{font-family:var(--f-mono);font-size:9px;color:var(--ink-mute);letter-spacing:0.08em;text-transform:uppercase;line-height:1.1;display:flex;align-items:center;gap:5px}
.ai-node .ai-stat .pulse{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--glow);animation:aiPulse 2s ease-in-out infinite}
@keyframes aiPulse{50%{opacity:.35}}
.ai-node .ai-stat .v{color:var(--accent-2)}
.ai-lines{position:absolute;inset:0;z-index:1;pointer-events:none}
.ai-lines path.line{stroke:rgba(255,255,255,.08);stroke-width:1;fill:none;stroke-dasharray:3 4}
.ai-lines circle.particle{fill:var(--accent);filter:drop-shadow(0 0 4px var(--glow))}
@media (max-width:900px){.ai-viz{min-height:auto;padding:32px 16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;justify-items:stretch}.ai-viz .center{position:static;transform:none;grid-column:1/-1;text-align:center;justify-self:center;min-width:0;width:100%;max-width:280px}.ai-node{position:static;width:100%;min-width:0;padding:10px 12px}.ai-node .ai-name{font-size:11.5px}.ai-lines{display:none}}

/* ---- AI Fan (canonical fan-in convergence) ---- */
.ai-fan{position:relative;padding:70px 40px 70px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);overflow:hidden;min-height:460px}
.ai-fan::before{content:"";position:absolute;left:0;right:0;bottom:0;height:240px;background:radial-gradient(ellipse at 50% 100%, oklch(78% 0.12 72 / 0.10), transparent 60%);pointer-events:none}
.ai-fan-icons{display:flex;justify-content:space-between;align-items:flex-end;max-width:760px;margin:0 auto;position:relative;z-index:3}
.ai-fan-icon-svg{position:relative;z-index:4;background:var(--bg-2)}
.ai-fan-icon{display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--ink);min-width:0}
.ai-fan-icon-svg{width:34px;height:34px;display:grid;place-items:center;color:var(--ink)}
.ai-fan-icon-svg svg{width:100%;height:100%;display:block}
.ai-fan-icon-name{font-family:var(--f-mono);font-size:9px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-mute);white-space:nowrap}
.ai-fan-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.ai-fan-canvas path.base{fill:none;stroke:rgba(237,232,222,.16);stroke-width:1;stroke-linecap:round}
.ai-fan-canvas path.flow{fill:none;stroke:oklch(78% 0.12 72 / 0.85);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:3 9;animation:aiFanFlow 1.8s linear infinite;filter:drop-shadow(0 0 4px oklch(78% 0.12 72 / 0.5))}
@keyframes aiFanFlow{from{stroke-dashoffset:12}to{stroke-dashoffset:0}}
.ai-fan-target{position:absolute;left:50%;bottom:50px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:3}
.ai-fan-anchor{width:6px;height:6px;border-radius:50%;background:oklch(78% 0.12 72);box-shadow:0 0 12px oklch(78% 0.12 72 / 0.6),0 0 0 6px oklch(78% 0.12 72 / 0.08)}
.ai-fan-name{font-family:var(--f-serif);font-style:italic;font-size:54px;font-weight:400;color:var(--ink);letter-spacing:-0.02em;line-height:1;margin-top:6px}
.ai-fan-meta{font-family:var(--f-mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-mute);margin-top:6px}
.ai-fan-meta .v{color:var(--accent)}
@media (max-width:900px){.ai-fan{padding:50px 24px 56px;min-height:380px}.ai-fan-icon-svg{width:28px;height:28px}.ai-fan-icon-name{font-size:8px;letter-spacing:0.12em}.ai-fan-name{font-size:38px}}
@media (max-width:560px){.ai-fan-icons{max-width:100%}.ai-fan-icon-name{display:none}.ai-fan-icon-svg{width:24px;height:24px}.ai-fan-name{font-size:30px}}

/* ---- Calls tracker viz (service-card 01 — More families calling you) ---- */
.viz-calls{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;padding:32px}
.calls{width:100%;max-width:480px;background:#101013;border:1px solid var(--line-2);border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden;font-family:var(--f-sans)}
.calls-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);background:#0C0C0F}
.calls-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:10px;color:var(--ink);letter-spacing:0.12em;text-transform:uppercase}
.calls-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--glow);animation:callsPulse 1.6s ease-in-out infinite}
.calls-meta{font-family:var(--f-mono);font-size:10px;color:var(--ink-mute);letter-spacing:0.12em;text-transform:uppercase}
@keyframes callsPulse{50%{opacity:.4}}
.calls-counter{display:flex;align-items:baseline;gap:14px;padding:22px 18px 18px;border-bottom:1px solid var(--line)}
.calls-counter-v{font-family:var(--f-sans);font-weight:300;font-size:64px;line-height:0.95;letter-spacing:-0.04em;color:var(--ink);min-width:90px}
.calls-counter-l{font-family:var(--f-mono);font-size:10px;color:var(--ink-mute);letter-spacing:0.12em;text-transform:uppercase;line-height:1.4}
.calls-feed{display:flex;flex-direction:column;min-height:180px}
.calls-feed-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:11px 18px;border-bottom:1px solid rgba(255,255,255,.04);opacity:0;transform:translateX(-12px);transition:opacity .5s ease, transform .5s cubic-bezier(.32,.72,0,1)}
.calls-feed-row:last-child{border-bottom:none}
.calls-feed-row.in{opacity:1;transform:translateX(0)}
.calls-feed-row .ic{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--glow);flex:0 0 8px}
.calls-feed-row .lbl{font-size:13px;color:var(--ink);line-height:1.3;letter-spacing:-0.005em}
.calls-feed-row .lbl em{font-family:var(--f-serif);font-style:italic;color:var(--accent-2);font-size:14px}
.calls-feed-row .t{font-family:var(--f-mono);font-size:9px;color:var(--ink-mute);letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap}
@media (prefers-reduced-motion: reduce){.calls *{animation:none !important;transition:none !important}.calls-feed-row{opacity:1;transform:none}}

/* ---- Compound curve viz (service-card 02 — An asset that compounds) ---- */
.viz-compound{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;padding:32px}
.compound{width:100%;max-width:520px;background:#101013;border:1px solid var(--line-2);border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden;font-family:var(--f-sans)}
.compound-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);background:#0C0C0F;font-family:var(--f-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase}
.compound-tag{color:var(--accent-2)}
.compound-meta{color:var(--ink-mute)}
.compound-stage{position:relative;padding:14px 16px 4px;background:#0E0E10}
.compound-svg{width:100%;height:auto;display:block}
.compound-axis{display:grid;grid-template-columns:repeat(3,1fr);padding:0 8px 14px;margin-top:-4px}
.compound-tick{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;opacity:0;transform:translateY(6px);transition:opacity .5s ease, transform .5s ease}
.compound-tick.in{opacity:1;transform:translateY(0)}
.compound-tick .t{font-family:var(--f-sans);font-size:13px;color:var(--ink);font-weight:500;letter-spacing:-0.01em}
.compound-tick .s{font-family:var(--f-mono);font-size:9px;color:var(--ink-mute);letter-spacing:0.1em;text-transform:uppercase}
.compound-foot{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);background:#0C0C0F}
.compound-kpi{padding:14px 12px;text-align:center;border-right:1px solid var(--line);opacity:0;transition:opacity .5s ease}
.compound-kpi:last-child{border-right:none}
.compound.lit .compound-kpi{opacity:1}
.compound.lit .compound-kpi:nth-child(1){transition-delay:.2s}
.compound.lit .compound-kpi:nth-child(2){transition-delay:.35s}
.compound.lit .compound-kpi:nth-child(3){transition-delay:.5s}
.compound-kpi-v{display:block;font-family:var(--f-sans);font-size:18px;color:var(--ink);font-weight:400;letter-spacing:-0.02em}
.compound-kpi-l{display:block;font-family:var(--f-mono);font-size:9px;color:var(--ink-mute);letter-spacing:0.1em;text-transform:uppercase;margin-top:3px}
@media (prefers-reduced-motion: reduce){.compound *{animation:none !important;transition:none !important}.compound-tick{opacity:1;transform:none}.compound .compound-kpi{opacity:1}}

/* ---- Industry stats (4-up bordered grid for SERP-derived data) ---- */
.industry-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:60px}
.industry-stat{padding:40px 32px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.industry-stat:last-child{border-right:none}
.industry-stat-label{font-family:var(--f-mono);font-size:10px;color:var(--ink-mute);letter-spacing:0.15em;text-transform:uppercase}
.industry-stat-num{font-family:var(--f-sans);font-weight:300;font-size:clamp(56px,7vw,96px);line-height:0.9;letter-spacing:-0.04em;color:var(--ink);display:flex;align-items:baseline}
.industry-stat-num .it{font-family:var(--f-serif);font-style:italic;font-size:0.5em;color:var(--accent-2);letter-spacing:-0.02em;line-height:1;margin-left:2px}
.industry-stat-take{font-size:14px;color:#B8B2A7;line-height:1.55;max-width:34ch}
.industry-stat-cite{font-family:var(--f-mono);font-size:10px;color:var(--ink-mute);letter-spacing:0.1em;text-transform:uppercase;margin-top:auto}
@media (max-width:1100px){.industry-stats{grid-template-columns:repeat(2,1fr)}.industry-stat:nth-child(2){border-right:none}.industry-stat:nth-child(1),.industry-stat:nth-child(2){border-bottom:1px solid var(--line)}}
@media (max-width:640px){.industry-stats{grid-template-columns:1fr}.industry-stat{border-right:none;border-bottom:1px solid var(--line);padding:32px 20px}.industry-stat:last-child{border-bottom:none}}

/* ---- Moment section (creative beat — staggered timestamped lines) ---- */
.moment-section{position:relative}
.moment-track{display:flex;flex-direction:column;gap:24px;margin-top:60px;padding-left:200px;max-width:1200px}
.moment-line{display:grid;grid-template-columns:120px 1fr;gap:48px;align-items:baseline;opacity:0;transform:translateY(16px);transition:opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1)}
.moment-line.is-revealed{opacity:1;transform:translateY(0)}
.moment-time{font-family:var(--f-mono);font-size:11px;color:var(--accent);letter-spacing:0.18em;text-transform:uppercase;padding-top:8px}
.moment-text-wrap{padding:24px 0;border-top:1px solid var(--line)}
.moment-text{font-family:var(--f-sans);font-weight:400;font-size:clamp(24px,3vw,40px);line-height:1.15;letter-spacing:-0.025em;color:var(--ink)}
.moment-text .it{font-family:var(--f-serif);font-style:italic;color:var(--accent-2)}
@media (max-width:900px){.moment-track{padding-left:0}.moment-line{grid-template-columns:1fr;gap:8px}.moment-time{padding-top:0}}

/* ---- Final CTA section ---- */
.cta-section{padding:180px 40px;text-align:center;position:relative;overflow:hidden;border-top:1px solid var(--line)}
.cta-section::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:900px;height:900px;border-radius:50%;background:radial-gradient(circle, oklch(78% 0.12 72 / 0.12), transparent 60%);pointer-events:none;filter:blur(40px)}
.cta-section .eyebrow{font-family:var(--f-serif);font-style:italic;font-size:22px;color:#B8B2A7;margin-bottom:24px;position:relative}
.cta-section h2{font-family:var(--f-sans);font-weight:400;font-size:clamp(48px,8vw,128px);line-height:0.95;letter-spacing:-0.045em;max-width:18ch;margin:0 auto 48px;position:relative}
.cta-section h2 .it{font-family:var(--f-serif);font-style:italic;color:var(--accent-2)}
.cta-section .ctas{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;position:relative}
.cta-section .mail{color:var(--ink-dim);font-family:var(--f-mono);font-size:13px;letter-spacing:0.05em}

/* ============================================================
   NAV DROPDOWNS — Editorial Mega Pane (from proto Option A)
   Adds dropdowns to Services / Industries / Locations links.
   Hover-trigger, 80ms intent gate, ESC closes. JS in nav-dropdowns.js.
   ============================================================ */
.navlinks .has-drop{position:relative;display:inline-flex;align-items:center}
.navlinks .has-drop > a{display:inline-flex;align-items:center;gap:7px}
.navlinks .has-drop > a::after{
  content:"";width:5px;height:5px;border-right:1.2px solid currentColor;border-bottom:1.2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);opacity:.55;
  transition:transform .35s cubic-bezier(.32,.72,0,1),opacity .35s,border-color .35s;
}
.navlinks .has-drop.open > a::after,
.navlinks .has-drop > a:hover::after{opacity:1;transform:rotate(225deg) translate(0,-2px)}
.navlinks .has-drop.open > a::after{border-color:var(--accent)}

.nav-mega-pane{
  position:fixed;left:50%;transform:translateX(-50%) translateY(-8px);
  top:78px;width:min(1180px,calc(100vw - 48px));z-index:48;
  padding:8px;background:rgba(13,13,16,.86);
  backdrop-filter:blur(28px) saturate(1.05);-webkit-backdrop-filter:blur(28px) saturate(1.05);
  border:1px solid var(--line-2);border-radius:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(237,232,222,.05);
  opacity:0;pointer-events:none;clip-path:inset(0 0 100% 0 round 24px);
  transition:opacity .42s cubic-bezier(.32,.72,0,1), clip-path .55s cubic-bezier(.32,.72,0,1), transform .42s cubic-bezier(.32,.72,0,1);
}
.nav-mega-pane.open{opacity:1;pointer-events:auto;clip-path:inset(0 0 0 0 round 24px);transform:translateX(-50%) translateY(0)}
.nav-mega-pane-inner{
  background:linear-gradient(180deg, rgba(20,20,24,.6), rgba(13,13,16,.6));
  border:1px solid var(--line);border-radius:18px;
  padding:32px 36px;display:grid;grid-template-columns:5fr 7fr;gap:48px;
}
.nav-mega-pane .col-left .eyebrow{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.nav-mega-pane .col-left .pull{margin-top:20px;font-family:var(--f-serif);font-size:34px;line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
.nav-mega-pane .col-left .pull .it{font-style:italic;color:var(--accent-2)}
.nav-mega-pane .col-left .body{margin-top:20px;color:var(--ink-dim);font-size:14px;line-height:1.55;max-width:38ch}
.nav-mega-pane .col-left .all{
  margin-top:36px;display:inline-flex;align-items:center;gap:10px;padding:10px 14px;
  border:1px solid var(--line-2);border-radius:999px;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  transition:background .35s cubic-bezier(.32,.72,0,1),border-color .35s,transform .35s;
}
.nav-mega-pane .col-left .all:hover{background:rgba(237,232,222,.05);border-color:var(--ink-mute);transform:translateY(-1px)}
.nav-mega-pane .col-left .all .arr{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--bg);font-size:9px;transition:transform .4s cubic-bezier(.32,.72,0,1)}
.nav-mega-pane .col-left .all:hover .arr{transform:rotate(-12deg) translate(1px,-1px)}

.nav-mega-pane .col-right{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.nav-mega-pane .col-right .group{padding:6px 0}
.nav-mega-pane .col-right .group h4{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 8px;font-weight:500;display:flex;align-items:baseline;gap:8px}
.nav-mega-pane .col-right .group h4 .num{color:var(--accent);font-family:var(--f-mono)}
.nav-mega-pane .col-right ul{list-style:none;margin:0;padding:0}
.nav-mega-pane .col-right li{
  opacity:0;transform:translateY(8px) translateZ(0);
  transition:opacity .35s cubic-bezier(.32,.72,0,1), transform .42s cubic-bezier(.32,.72,0,1);
}
.nav-mega-pane.open .col-right li{opacity:1;transform:none}
.nav-mega-pane .col-right a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 10px;border-radius:9px;text-decoration:none;color:var(--ink);
  font-family:var(--f-sans,'Geist',sans-serif);font-size:14px;letter-spacing:-.005em;
  transition:background .3s cubic-bezier(.32,.72,0,1), color .3s, padding .35s cubic-bezier(.32,.72,0,1);
}
.nav-mega-pane .col-right a:hover{background:rgba(237,232,222,.04);padding-left:14px}
.nav-mega-pane .col-right a .name{display:flex;align-items:baseline;gap:8px}
.nav-mega-pane .col-right a .name .it{font-family:var(--f-serif);font-style:italic;font-size:16px;color:var(--accent-2);opacity:0;transform:translateX(-4px);transition:opacity .3s, transform .3s cubic-bezier(.32,.72,0,1)}
.nav-mega-pane .col-right a:hover .name .it{opacity:1;transform:translateX(0)}
.nav-mega-pane .col-right a .arr{
  width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--ink-mute);font-size:11px;
  transition:transform .35s cubic-bezier(.32,.72,0,1),border-color .3s,color .3s,background .3s;
}
.nav-mega-pane .col-right a:hover .arr{transform:rotate(-45deg);color:var(--bg);background:var(--accent);border-color:var(--accent)}

.nav-mega-pane.open .col-right li:nth-child(1){transition-delay:60ms}
.nav-mega-pane.open .col-right li:nth-child(2){transition-delay:90ms}
.nav-mega-pane.open .col-right li:nth-child(3){transition-delay:120ms}
.nav-mega-pane.open .col-right li:nth-child(4){transition-delay:150ms}
.nav-mega-pane.open .col-right li:nth-child(5){transition-delay:180ms}
.nav-mega-pane.open .col-right li:nth-child(6){transition-delay:210ms}
.nav-mega-pane.open .col-right li:nth-child(7){transition-delay:240ms}

@media (max-width:1000px){.nav-mega-pane{display:none}}
@media (prefers-reduced-motion:reduce){
  .nav-mega-pane{transition:none}
  .nav-mega-pane.open{clip-path:inset(0 0 0 0 round 24px)}
  .nav-mega-pane .col-right li{transition:none;opacity:1;transform:none}
}

/* ==========================================================
   WEB DESIGN LOCATION PAGES
   burnaby-web-design / coquitlam-web-design / delta-web-design
   ========================================================== */

/* shared section rhythm */
.wd-section{padding:140px 40px}
.wd-section--tight{padding:80px 40px}
.wd-section--lg{padding:180px 40px}
@media (max-width:800px){.wd-section{padding:80px 20px}.wd-section--lg{padding:120px 20px}.wd-section--tight{padding:60px 20px}}

/* HERO 1: editorial magazine (Burnaby) */
.wd-hero-ed{position:relative;min-height:100vh;padding:160px 40px 80px;display:grid;grid-template-columns:1fr 320px;gap:60px;align-items:end;overflow:hidden;border-bottom:1px solid var(--line)}
.wd-hero-ed::after{content:attr(data-stamp);position:absolute;right:40px;bottom:24px;font-family:var(--f-sans);font-weight:200;font-size:clamp(220px,30vw,460px);line-height:0.85;color:var(--ink);opacity:0.04;pointer-events:none;user-select:none;letter-spacing:-0.06em;z-index:0}
.wd-hero-ed-headline{position:relative;z-index:2;font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:clamp(72px,11vw,200px);line-height:0.92;letter-spacing:-0.025em;color:var(--ink);max-width:16ch}
.wd-hero-ed-headline .focal{color:var(--accent)}
.wd-hero-ed-aside{position:relative;z-index:2;display:flex;flex-direction:column;gap:24px;padding:0 0 12px 24px;border-left:1px solid var(--line)}
.wd-hero-ed-mono{font-family:var(--f-mono);font-size:0.75rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--ink-dim);line-height:1.7}
.wd-hero-ed-sub{font-family:var(--f-sans);font-weight:400;font-size:1rem;line-height:1.55;color:#B8B2A7;max-width:28ch}
.wd-hero-ed-cta{display:inline-flex;align-items:center;gap:12px;padding:14px 22px;background:var(--ink);color:var(--bg);border-radius:999px;text-decoration:none;font-size:14px;font-weight:500;transition:all .3s;width:max-content}
.wd-hero-ed-cta:hover{background:var(--accent);transform:translateY(-2px)}
@media (max-width:900px){.wd-hero-ed{grid-template-columns:1fr;gap:40px;padding:120px 20px 60px}.wd-hero-ed-aside{border-left:0;border-top:1px solid var(--line);padding:24px 0 0}.wd-hero-ed::after{font-size:180px;right:20px}}

/* HERO 2: architectural vertical type (Coquitlam) */
.wd-hero-vt{position:relative;min-height:100vh;padding:160px 40px 80px;display:grid;grid-template-columns:1fr 280px;gap:60px;align-items:end;border-bottom:1px solid var(--line)}
.wd-hero-vt-stack{font-family:var(--f-sans);font-weight:400;font-size:clamp(72px,12vw,200px);line-height:0.94;letter-spacing:-0.045em;color:var(--ink)}
.wd-hero-vt-stack>span{display:block}
.wd-hero-vt-stack>span.it{font-family:var(--f-serif);font-style:italic;color:var(--accent-2)}
.wd-hero-vt-rail{display:flex;flex-direction:column;gap:32px;padding:0 0 16px 24px;border-left:1px solid var(--line)}
.wd-hero-vt-rail .lbl{font-family:var(--f-mono);font-size:0.78rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink);padding-bottom:18px;border-bottom:1px solid var(--line)}
.wd-hero-vt-rail .lbl:last-of-type{border-bottom:none}
.wd-hero-vt-rail .lbl span{display:block;color:var(--ink-mute);margin-top:6px;font-size:0.7rem;letter-spacing:0.12em}
@media (max-width:900px){.wd-hero-vt{grid-template-columns:1fr;padding:120px 20px 60px}.wd-hero-vt-rail{border-left:none;padding:24px 0 0;border-top:1px solid var(--line)}}

/* HERO 3: minimal monolith (Delta) */
.wd-hero-mono{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:160px 40px 80px;border-bottom:1px solid var(--line)}
.wd-hero-mono-tag{font-family:var(--f-mono);font-size:0.78rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:56px}
.wd-hero-mono-line{font-family:var(--f-sans);font-weight:400;font-size:clamp(48px,7vw,120px);line-height:1.05;letter-spacing:-0.04em;color:var(--ink);max-width:22ch}
.wd-hero-mono-line .it{font-family:var(--f-serif);font-style:italic;color:var(--accent-2)}
.wd-hero-mono-rule{width:60px;height:1px;background:var(--line-2);margin:72px auto 0}
@media (max-width:800px){.wd-hero-mono-line{font-size:14vw}}

/* ANATOMY MOCKUP (Burnaby section 1) */
.wd-anatomy{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:60px;align-items:start}
.wd-anatomy-frame{position:relative;aspect-ratio:4 / 5;border:1px solid var(--line-2);border-radius:8px;background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%);padding:24px;overflow:hidden}
.wd-anatomy-frame .bar{display:flex;gap:6px;margin-bottom:24px}
.wd-anatomy-frame .bar .dot{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.wd-anatomy-frame .hb{font-family:var(--f-serif);font-style:italic;font-size:clamp(28px,3.5vw,44px);line-height:1;color:var(--ink);margin:12px 0 18px}
.wd-anatomy-frame .sb{font-family:var(--f-sans);font-size:13px;color:var(--ink-dim);margin-bottom:24px;line-height:1.5;max-width:38ch}
.wd-anatomy-frame .cb{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;background:var(--accent);color:var(--bg);border-radius:999px;font-family:var(--f-sans);font-size:12px;font-weight:500}
.wd-anatomy-frame .rb{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);display:flex;gap:18px;font-family:var(--f-mono);font-size:10px;color:var(--ink-mute);letter-spacing:0.1em;text-transform:uppercase}
.wd-anatomy-frame .pin{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--bg);display:grid;place-items:center;font-family:var(--f-mono);font-size:10px;font-weight:500;box-shadow:0 0 0 4px var(--bg),0 0 14px var(--glow);z-index:2}
.wd-anatomy-frame .pin-1{top:60px;right:24px}
.wd-anatomy-frame .pin-2{top:130px;left:24px}
.wd-anatomy-frame .pin-3{top:240px;left:140px}
.wd-anatomy-frame .pin-4{bottom:90px;right:60px}
.wd-anatomy-notes{display:flex;flex-direction:column;gap:0;padding-top:20px}
.wd-anatomy-note{display:grid;grid-template-columns:36px 1fr;gap:16px;padding:24px 0;border-bottom:1px solid var(--line)}
.wd-anatomy-note:first-child{padding-top:0}
.wd-anatomy-note:last-child{border-bottom:none}
.wd-anatomy-note .num{font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.12em;color:var(--accent);padding-top:4px}
.wd-anatomy-note h4{font-family:var(--f-sans);font-weight:400;font-size:1rem;line-height:1.3;color:var(--ink);margin-bottom:6px;letter-spacing:-0.01em}
.wd-anatomy-note p{font-family:var(--f-sans);font-size:0.875rem;line-height:1.55;color:var(--ink-dim);max-width:42ch}
@media (max-width:900px){.wd-anatomy{grid-template-columns:1fr;gap:40px}}

/* TYPE-SCALE DEMO (Burnaby section 2) */
.wd-typescale{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.wd-typescale-row{display:grid;grid-template-columns:1fr 240px;gap:40px;padding:40px 0;border-bottom:1px solid var(--line);align-items:end}
.wd-typescale-sample{color:var(--ink)}
.wd-typescale-sample.s-h1{font-family:var(--f-sans);font-weight:400;font-size:clamp(56px,7vw,104px);line-height:0.95;letter-spacing:-0.04em}
.wd-typescale-sample.s-h2{font-family:var(--f-sans);font-weight:400;font-size:clamp(36px,4.5vw,64px);line-height:1;letter-spacing:-0.03em}
.wd-typescale-sample.s-pull{font-family:var(--f-serif);font-style:italic;font-size:clamp(28px,3vw,44px);color:var(--accent-2)}
.wd-typescale-sample.s-body{font-family:var(--f-sans);font-size:1rem;line-height:1.6;color:#B8B2A7;max-width:56ch}
.wd-typescale-sample.s-lbl{font-family:var(--f-mono);font-size:0.75rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-mute)}
.wd-typescale-meta{font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-mute);line-height:1.7;text-align:right}
.wd-typescale-meta .v{color:var(--accent)}
@media (max-width:720px){.wd-typescale-row{grid-template-columns:1fr;gap:16px}.wd-typescale-meta{text-align:left}}

/* PAGES WE'D BUILD (Burnaby section 3) */
.wd-pages-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.wd-pages-card{padding:32px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);display:flex;flex-direction:column;gap:18px;min-height:280px}
.wd-pages-card .num{font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.15em;color:var(--ink-mute)}
.wd-pages-card h4{font-family:var(--f-sans);font-weight:400;font-size:1.5rem;line-height:1.1;color:var(--ink);letter-spacing:-0.02em}
.wd-pages-card h4 .it{font-family:var(--f-serif);font-style:italic;color:var(--accent-2)}
.wd-pages-card p{font-family:var(--f-sans);font-size:0.9375rem;line-height:1.55;color:var(--ink-dim)}
.wd-pages-card .modules{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.wd-pages-card .modules .mod{font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent)}
@media (max-width:900px){.wd-pages-grid{grid-template-columns:1fr}}

/* PULLED QUESTION (Burnaby section 4) */
.wd-pull-q{text-align:center;max-width:32ch;margin:0 auto}
.wd-pull-q .q{font-family:var(--f-serif);font-style:italic;font-size:clamp(36px,5vw,72px);line-height:1.15;color:var(--accent-2);letter-spacing:-0.02em}
.wd-pull-q .a{margin:36px auto 0;font-family:var(--f-sans);font-size:1rem;line-height:1.6;color:var(--ink);max-width:52ch}

/* GRID OVERLAY DEMO (Coquitlam section 1) */
.wd-grid-demo{position:relative;border:1px solid var(--line-2);border-radius:8px;padding:48px 32px;background:var(--bg-2);overflow:hidden}
.wd-grid-demo::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(to right,var(--line) 0,var(--line) 1px,transparent 1px,transparent calc(100% / 12));pointer-events:none;opacity:0.6}
.wd-grid-demo-rows{position:relative;display:flex;flex-direction:column;gap:16px}
.wd-grid-demo-row{display:grid;grid-template-columns:repeat(12,1fr);gap:0;align-items:center}
.wd-grid-demo-block{background:rgba(237,232,222,.05);border:1px solid var(--line);border-radius:4px;padding:14px 18px;font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.1em;color:var(--ink);text-transform:uppercase}
.wd-grid-demo-block.accent{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.wd-grid-demo-block.span-8{grid-column:span 8}
.wd-grid-demo-block.span-4{grid-column:span 4}
.wd-grid-demo-block.span-12{grid-column:span 12}
.wd-grid-demo-block.span-6{grid-column:span 6}
.wd-grid-demo-block.span-3{grid-column:span 3}
.wd-grid-demo-caption{margin-top:24px;font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-mute);position:relative}

/* COMPONENT LIBRARY FRAME (Coquitlam section 2) */
.wd-complib{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.wd-complib-cell{border:1px solid var(--line);border-radius:8px;background:var(--bg-2);padding:24px;min-height:200px;display:flex;flex-direction:column;gap:14px}
.wd-complib-cell .lbl{font-family:var(--f-mono);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent)}
.wd-complib-cell .preview{flex:1;display:flex;align-items:center;justify-content:center;padding:16px 0;color:var(--ink-dim)}
.wd-complib-cell .note{font-family:var(--f-sans);font-size:0.8125rem;line-height:1.5;color:var(--ink-dim)}
.wd-complib-mockpill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:rgba(237,232,222,.05);border:1px solid var(--line);border-radius:999px;font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.1em;color:var(--ink)}
.wd-complib-mockhero{display:flex;flex-direction:column;gap:6px;width:100%}
.wd-complib-mockhero .l1{height:14px;background:var(--ink);border-radius:3px;width:70%}
.wd-complib-mockhero .l2{height:8px;background:var(--line-2);border-radius:3px;width:90%}
.wd-complib-mockhero .l3{height:8px;background:var(--line-2);border-radius:3px;width:60%}
.wd-complib-mockcard{padding:14px;border:1px solid var(--line-2);border-radius:6px;width:100%;background:var(--bg)}
.wd-complib-mockcard .ml{font-family:var(--f-mono);font-size:9px;letter-spacing:0.12em;color:var(--ink-mute);text-transform:uppercase;margin-bottom:10px}
.wd-complib-mockcard .mt{font-family:var(--f-sans);font-size:13px;color:var(--ink);margin-bottom:6px}
.wd-complib-mockcard .mb{font-family:var(--f-sans);font-size:11px;color:var(--ink-dim)}
.wd-complib-mockfoot{display:flex;flex-direction:column;gap:6px;width:100%}
.wd-complib-mockfoot .row{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:9px;color:var(--ink-mute);letter-spacing:0.1em;text-transform:uppercase;padding:6px 0;border-bottom:1px solid var(--line)}
.wd-complib-mockfoot .row:last-child{border-bottom:none}
@media (max-width:900px){.wd-complib{grid-template-columns:1fr}}

/* BUYER JOURNEY TIMELINE (Coquitlam section 3) */
.wd-journey{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wd-journey-step{padding:32px 24px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.wd-journey-step:last-child{border-right:none}
.wd-journey-step .num{font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.15em;color:var(--accent)}
.wd-journey-step h4{font-family:var(--f-sans);font-weight:400;font-size:1.125rem;color:var(--ink);letter-spacing:-0.01em;line-height:1.25}
.wd-journey-step p{font-family:var(--f-sans);font-size:0.875rem;line-height:1.55;color:var(--ink-dim)}
@media (max-width:800px){.wd-journey{grid-template-columns:1fr}.wd-journey-step{border-right:none;border-bottom:1px solid var(--line)}.wd-journey-step:last-child{border-bottom:none}}

/* COMPONENT EXPLODED GRID (Coquitlam section 4) */
.wd-exploded{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.wd-exploded-cell{border:1px solid var(--line);border-radius:10px;background:var(--bg-2);padding:24px;min-height:220px;display:flex;flex-direction:column;gap:12px}
.wd-exploded-cell.is-light{background:var(--ink);border-color:var(--ink)}
.wd-exploded-cell .lbl{font-family:var(--f-mono);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute)}
.wd-exploded-cell.is-light .lbl{color:rgba(10,10,11,0.5)}
.wd-exploded-cell .demo-card{padding:16px;border:1px solid var(--line-2);border-radius:6px;background:var(--bg);margin-top:auto}
.wd-exploded-cell .demo-card h5{font-family:var(--f-sans);font-weight:400;font-size:0.9375rem;color:var(--ink);margin-bottom:6px}
.wd-exploded-cell .demo-card p{font-family:var(--f-sans);font-size:0.8125rem;color:var(--ink-dim);line-height:1.5}
.wd-exploded-cell.is-light .demo-card{background:#fff;border-color:rgba(10,10,11,0.08)}
.wd-exploded-cell.is-light .demo-card h5{color:var(--bg)}
.wd-exploded-cell.is-light .demo-card p{color:rgba(10,10,11,0.6)}
.wd-exploded-cell.is-hover .demo-card{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 8px 30px -10px var(--glow)}
@media (max-width:900px){.wd-exploded{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.wd-exploded{grid-template-columns:1fr}}

/* SCREEN-EDIT COMPARISON (Delta section 1) */
.wd-edit{display:grid;grid-template-columns:1fr 1fr 320px;gap:24px;align-items:stretch}
.wd-edit-screen{aspect-ratio:4 / 5;border:1px solid var(--line);border-radius:8px;background:var(--bg-2);padding:20px;display:flex;flex-direction:column;gap:8px;position:relative;overflow:hidden}
.wd-edit-screen .lbl{font-family:var(--f-mono);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:12px}
.wd-edit-screen.cluttered{gap:4px}
.wd-edit-screen.cluttered .blob{background:rgba(237,232,222,.06);border-radius:3px;height:22px}
.wd-edit-screen.cluttered .blob:nth-child(3n){height:30px}
.wd-edit-screen.cluttered .blob.acc{background:var(--accent);opacity:0.5}
.wd-edit-screen.cluttered .blob.tall{height:60px;background:rgba(237,232,222,.1)}
.wd-edit-screen.clean{display:flex;justify-content:center;align-items:center;padding:40px 24px;text-align:center}
.wd-edit-screen.clean .h{font-family:var(--f-serif);font-style:italic;font-size:clamp(20px,2.5vw,32px);line-height:1.15;color:var(--ink);max-width:14ch}
.wd-edit-screen.clean .b{font-family:var(--f-sans);font-size:0.8125rem;color:var(--ink-dim);margin-top:14px}
.wd-edit-screen.clean .cta{margin-top:24px;display:inline-flex;padding:10px 16px;background:var(--accent);color:var(--bg);border-radius:999px;font-family:var(--f-sans);font-size:12px}
.wd-edit-caption{padding:8px 0 0 24px;border-left:1px solid var(--line)}
.wd-edit-caption h4{font-family:var(--f-serif);font-style:italic;font-size:1.5rem;color:var(--accent-2);margin-bottom:16px;line-height:1.2}
.wd-edit-caption p{font-family:var(--f-sans);font-size:0.9375rem;color:var(--ink-dim);line-height:1.55}
.wd-edit-caption .removed{margin-top:24px;display:flex;flex-direction:column;gap:8px}
.wd-edit-caption .removed .item{font-family:var(--f-mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-mute);padding-left:14px;position:relative}
.wd-edit-caption .removed .item::before{content:"\2212";position:absolute;left:0;color:var(--accent)}
@media (max-width:900px){.wd-edit{grid-template-columns:1fr}.wd-edit-caption{border-left:none;border-top:1px solid var(--line);padding:24px 0 0}}

/* FOUR DECISIONS STACK (Delta section 2) */
.wd-decisions{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.wd-decisions-row{display:grid;grid-template-columns:60px 1fr 1fr;gap:32px;padding:32px 0;border-bottom:1px solid var(--line);align-items:baseline}
.wd-decisions-row .num{font-family:var(--f-mono);font-size:0.78rem;letter-spacing:0.15em;color:var(--accent)}
.wd-decisions-row .name{font-family:var(--f-sans);font-weight:400;font-size:clamp(28px,3.5vw,48px);line-height:1.05;letter-spacing:-0.025em;color:var(--ink)}
.wd-decisions-row .name .it{font-family:var(--f-serif);font-style:italic;color:var(--accent-2)}
.wd-decisions-row .desc{font-family:var(--f-sans);font-size:0.9375rem;line-height:1.55;color:var(--ink-dim);max-width:38ch}
@media (max-width:800px){.wd-decisions-row{grid-template-columns:40px 1fr}.wd-decisions-row .desc{grid-column:2}}

/* NO LIST CARDS (Delta section 3) */
.wd-no-list{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.wd-no-item{padding:32px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);display:flex;flex-direction:column;gap:14px}
.wd-no-item .lbl{font-family:var(--f-mono);font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-mute)}
.wd-no-item .line{font-family:var(--f-serif);font-style:italic;font-size:clamp(22px,2.5vw,32px);line-height:1.25;color:var(--ink)}
.wd-no-item .why{font-family:var(--f-sans);font-size:0.875rem;line-height:1.55;color:var(--ink-dim)}
@media (max-width:700px){.wd-no-list{grid-template-columns:1fr}}

/* MOTION DEMO (Delta section 4) */
.wd-motion{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:60px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.wd-motion-stage{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.wd-motion-btn{display:inline-flex;align-items:center;gap:12px;padding:16px 28px;background:var(--ink);color:var(--bg);border:none;border-radius:999px;font-family:var(--f-sans);font-size:15px;font-weight:500;cursor:pointer;transition:transform 240ms cubic-bezier(.2,.8,.2,1),background 240ms cubic-bezier(.2,.8,.2,1);text-decoration:none}
.wd-motion-btn:hover{background:var(--accent);transform:translateY(-2px)}
.wd-motion-btn .arr{width:18px;height:18px;border-radius:50%;background:var(--bg);color:var(--ink);display:grid;place-items:center;font-size:10px;transition:transform 240ms cubic-bezier(.2,.8,.2,1)}
.wd-motion-btn:hover .arr{transform:translateX(2px) rotate(-45deg)}
.wd-motion-spec{font-family:var(--f-mono);font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;line-height:1.7}
.wd-motion-spec .row{display:grid;grid-template-columns:100px 1fr;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.wd-motion-spec .row:last-child{border-bottom:none}
.wd-motion-spec .row .k{color:var(--ink-mute)}
.wd-motion-spec .row .v{color:var(--accent)}
.wd-motion-explainer{font-family:var(--f-sans);font-size:0.9375rem;line-height:1.6;color:var(--ink-dim);max-width:44ch;margin-top:24px}
@media (max-width:800px){.wd-motion{grid-template-columns:1fr;gap:32px;padding:32px}}

/* CROSS-LINK FOOTER (all 3 pages, before final CTA) */
.wd-crosslink{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:60px;border-top:1px solid var(--line)}
.wd-crosslink-card{display:flex;flex-direction:column;gap:12px;padding:32px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);text-decoration:none;color:var(--ink);transition:border-color .3s,transform .3s}
.wd-crosslink-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.wd-crosslink-card .lbl{font-family:var(--f-mono);font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-mute)}
.wd-crosslink-card .title{font-family:var(--f-sans);font-weight:400;font-size:1.5rem;letter-spacing:-0.02em;line-height:1.2}
.wd-crosslink-card .arr{margin-top:auto;padding-top:18px;font-family:var(--f-mono);font-size:0.72rem;color:var(--accent)}
@media (max-width:700px){.wd-crosslink{grid-template-columns:1fr}}

/* FAQ reuse, scoped */
.wd-faq{max-width:1100px;margin:56px auto 0}
.wd-faq-item{border-top:1px solid var(--line);padding:22px 0}
.wd-faq-item:last-child{border-bottom:1px solid var(--line)}
.wd-faq-item summary{font-family:var(--f-sans);font-size:18px;color:var(--ink);cursor:pointer;padding:6px 0;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;letter-spacing:-0.005em;transition:color .2s ease}
.wd-faq-item summary::-webkit-details-marker{display:none}
.wd-faq-item summary::after{content:"+";font-family:var(--f-mono);font-size:20px;color:var(--ink-mute);transition:color .25s ease,transform .25s ease;flex-shrink:0}
.wd-faq-item[open] summary::after{content:"\2212";color:var(--accent)}
.wd-faq-item summary:hover{color:var(--accent)}
.wd-faq-item p{font-family:var(--f-sans);font-size:15px;line-height:1.6;color:var(--ink);margin:14px 0 0;max-width:70ch}

/* WD STAT STRIP (all 3 web design pages) */
.wd-stat-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.wd-stat-strip-item{padding:52px 40px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.wd-stat-strip-item:last-child{border-right:none}
.wd-stat-num{font-family:var(--f-serif);font-style:italic;font-size:clamp(64px,8vw,108px);line-height:1;color:var(--accent);letter-spacing:-0.02em}
.wd-stat-lbl{font-family:var(--f-sans);font-size:0.9375rem;color:var(--ink);line-height:1.55;max-width:30ch}
.wd-stat-src{font-family:var(--f-mono);font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-mute);margin-top:4px}
@media (max-width:800px){.wd-stat-strip{grid-template-columns:1fr}.wd-stat-strip-item{border-right:none;border-bottom:1px solid var(--line);padding:32px 0}.wd-stat-strip-item:last-child{border-bottom:none}}

/* WD DELTA HERO: sub + CTA additions */
.wd-hero-mono-sub{font-family:var(--f-sans);font-size:1rem;line-height:1.55;color:#B8B2A7;max-width:36ch;margin-top:40px;text-align:center}
.wd-hero-mono-cta{display:inline-flex;align-items:center;gap:12px;padding:14px 22px;background:var(--ink);color:var(--bg);border-radius:999px;text-decoration:none;font-size:14px;font-weight:500;transition:all .3s;width:max-content;margin-top:24px}
.wd-hero-mono-cta:hover{background:var(--accent);transform:translateY(-2px)}

/* ============ PORTFOLIO REEL (shared) ============ */
.reel{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.reel-item{position:relative;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);overflow:hidden;transition:all .5s var(--ease-out);min-height:340px;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.reel-item:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.reel-item.span-7{grid-column:span 7}.reel-item.span-5{grid-column:span 5}.reel-item.span-6{grid-column:span 6}.reel-item.span-4{grid-column:span 4}.reel-item.span-8{grid-column:span 8}
.reel-thumb{position:relative;flex:1;min-height:200px;overflow:hidden;border-bottom:1px solid var(--line);background:#0C0C0F}
.reel-thumb-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px}
.reel-mock,.reel-shot{width:100%;max-width:380px;background:rgba(255,255,255,.02);border:1px solid var(--line-2);border-radius:8px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.4);transform:scale(.98);transition:transform .6s var(--ease-out)}
.reel-item:hover .reel-mock,.reel-item:hover .reel-shot{transform:scale(1)}
.reel-shot img{width:100%;height:auto;display:block;filter:saturate(1.04) contrast(1.02);transition:transform .8s var(--ease-out)}
.reel-item:hover .reel-shot img{transform:scale(1.025)}
.reel-mock-bar{display:flex;align-items:center;gap:5px;padding:7px 10px;border-bottom:1px solid var(--line);background:#0A0A0B}
.reel-mock-bar i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.15);display:inline-block}
.reel-mock-bar .url{flex:1;text-align:center;font-family:'Geist Mono',monospace;font-size:8px;color:var(--ink-mute);letter-spacing:0.05em;padding:3px 6px;background:rgba(255,255,255,.03);border-radius:3px;margin-left:6px}
.reel-meta{padding:24px 28px;display:flex;flex-direction:column;gap:14px}
.reel-meta-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.reel-name{font-family:'Geist',sans-serif;font-size:22px;letter-spacing:-0.025em;color:var(--ink)}
.reel-name .it{font-family:'Instrument Serif',serif;font-style:italic;color:var(--accent-2)}
.reel-cat{font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:0.18em;color:var(--ink-mute);text-transform:uppercase}
.reel-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--line-2);border-radius:999px;font-family:'Geist Mono',monospace;font-size:9px;letter-spacing:0.14em;color:var(--ink-dim);text-transform:uppercase}
.reel-tag .dot{width:5px;height:5px;border-radius:50%;background:var(--ink-mute)}
.reel-tag.live .dot{background:var(--accent);box-shadow:0 0 6px var(--glow)}
.reel-tag.live{color:var(--ink-soft);border-color:oklch(78% 0.12 72 / 0.3)}
.reel-desc{font-family:'Geist',sans-serif;font-size:13.5px;color:var(--ink-dim);line-height:1.55;max-width:46ch}
.reel-foot{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--line);font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.14em;color:var(--ink-mute);text-transform:uppercase}
.reel-foot .arr{transition:transform .3s}
.reel-item:hover .reel-foot{color:var(--ink-soft)}
.reel-item:hover .reel-foot .arr{transform:translateX(6px);color:var(--accent)}
.reel-foot .webd-stat{color:var(--accent-2)}
@media (max-width:1100px){.reel{grid-template-columns:repeat(2,1fr);gap:18px}.reel-item.span-7,.reel-item.span-5,.reel-item.span-6,.reel-item.span-4,.reel-item.span-8{grid-column:span 1}}
@media (max-width:680px){.reel{grid-template-columns:1fr;gap:18px}.reel-item{min-height:280px}.reel-meta{padding:20px}.reel-name{font-size:19px}}

/* ===== WD STICKY PROCESS SECTION ===== */
.wd-process{padding:var(--section-y) 0;border-top:1px solid var(--line)}
.wd-process-intro{margin-bottom:72px}
.wd-process-intro h2{font-family:var(--f-sans);font-size:clamp(28px,3.5vw,52px);font-weight:400;letter-spacing:-0.025em;line-height:1.15;color:var(--ink);margin-top:16px}
.wd-process-intro h2 .it{font-family:var(--f-serif);font-style:italic}
.wd-process-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.wd-process-left{position:sticky;top:120px}

/* browser mockup frame */
.wd-pm{background:#0F0F12;border:1px solid var(--line-2);border-radius:10px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.6)}
.wd-pm-bar{display:flex;align-items:center;gap:6px;padding:10px 16px;background:#0A0A0B;border-bottom:1px solid var(--line)}
.wd-pm-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.wd-pm-dot:nth-child(1){background:#FF5F56}
.wd-pm-dot:nth-child(2){background:#FEBC2E}
.wd-pm-dot:nth-child(3){background:#28C840}
.wd-pm-url{flex:1;text-align:center;font-family:var(--f-mono);font-size:10px;color:var(--ink-mute);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:4px;padding:4px 16px;margin-left:14px;transition:color .4s,background .4s}
.wd-pm-body{min-height:440px;position:relative;overflow:hidden}
.wd-pm-state{position:absolute;inset:0;padding:28px;opacity:0;transition:opacity .6s cubic-bezier(.2,.8,.2,1);pointer-events:none;display:flex;flex-direction:column;gap:14px}
.wd-pm-state.active{opacity:1;pointer-events:auto}

/* state 0: wireframe skeleton */
.wd-pm-wire-block{border-radius:4px;background:rgba(255,255,255,.07)}
.wd-pm-wire-block.h-10{height:10px}.wd-pm-wire-block.h-14{height:14px}.wd-pm-wire-block.h-60{height:60px}.wd-pm-wire-block.h-120{height:120px}
.wd-pm-wire-block.w-80{width:80%}.wd-pm-wire-block.w-60{width:60%}.wd-pm-wire-block.w-40{width:40%}.wd-pm-wire-block.w-30{width:30%}.wd-pm-wire-block.w-full{width:100%}

/* state 1: design preview */
.wd-pm-design-h1{font-family:var(--f-serif);font-style:italic;font-size:clamp(20px,2.8vw,34px);line-height:1.1;color:var(--ink);letter-spacing:-0.02em}
.wd-pm-design-rule{width:40px;height:2px;background:var(--accent);flex-shrink:0}
.wd-pm-design-body{font-family:var(--f-sans);font-size:12px;line-height:1.6;color:var(--ink-dim);max-width:28ch}
.wd-pm-design-btn{display:inline-flex;align-items:center;padding:9px 18px;background:var(--ink);color:var(--bg);border-radius:999px;font-size:11px;font-family:var(--f-sans);width:max-content}

/* state 2: build / nav preview */
.wd-pm-nav{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line);flex-shrink:0}
.wd-pm-nav-logo{font-family:var(--f-serif);font-style:italic;font-size:16px;color:var(--ink)}
.wd-pm-nav-links{display:flex;gap:14px}
.wd-pm-nav-link{font-family:var(--f-mono);font-size:8px;letter-spacing:0.12em;color:var(--ink-mute);text-transform:uppercase}
.wd-pm-build-block{border-radius:4px;background:rgba(255,255,255,.04);flex-shrink:0}
.wd-pm-build-block.h-8{height:8px;width:70%}.wd-pm-build-block.h-80{height:80px;width:100%}.wd-pm-build-block.h-10{height:10px;width:45%}

/* state 3: live and ranking */
.wd-pm-live-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid oklch(78% 0.12 72 / 0.3);border-radius:999px;font-family:var(--f-mono);font-size:10px;letter-spacing:0.1em;color:var(--accent);width:max-content;flex-shrink:0}
.wd-pm-live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--glow);animation:pm-pulse 2s ease-in-out infinite}
@keyframes pm-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
.wd-pm-rank-item{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);flex-shrink:0}
.wd-pm-rank-item:last-child{border-bottom:none}
.wd-pm-rank-pos{font-family:var(--f-serif);font-style:italic;font-size:30px;color:var(--accent);min-width:36px;line-height:1}
.wd-pm-rank-kw{font-family:var(--f-mono);font-size:9px;letter-spacing:0.1em;color:var(--ink-soft);text-transform:uppercase}

/* scrolling steps */
.wd-process-steps{padding-top:80px}
.wd-step{padding:52px 0;border-top:1px solid var(--line);opacity:.28;transition:opacity .5s}
.wd-step.active{opacity:1}
.wd-step-num{font-family:var(--f-mono);font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:20px}
.wd-step h3{font-family:var(--f-sans);font-size:clamp(24px,2.8vw,42px);font-weight:400;letter-spacing:-0.025em;line-height:1.15;color:var(--ink);margin-bottom:16px}
.wd-step h3 .it{font-family:var(--f-serif);font-style:italic}
.wd-step p{font-family:var(--f-sans);font-size:1rem;line-height:1.65;color:var(--ink-dim);max-width:38ch}

/* cursor ambient glow (desktop only) */
.wd-cursor-glow{position:fixed;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,oklch(78% 0.18 72 / 0.055) 0%,transparent 70%);pointer-events:none;z-index:0;mix-blend-mode:screen;will-change:transform;top:0;left:0}

/* responsive */
@media(max-width:960px){
  .wd-process-inner{grid-template-columns:1fr}
  .wd-process-left{position:relative;top:0;margin-bottom:48px}
  .wd-pm-body{min-height:300px}
  .wd-process-steps{padding-top:0}
  .wd-step{padding:36px 0}
  .wd-process-intro{margin-bottom:48px}
}
@media(max-width:600px){
  .wd-pm-body{min-height:240px}
  .wd-pm-design-h1{font-size:20px}
  .wd-pm-rank-pos{font-size:24px}
  .wd-cursor-glow{display:none}
}

/* ============================================================
   GOOGLE AI OVERVIEWS PAGE (.aio-*). Added 2026-05-17.
   Local namespace for /services/ai-search-optimization/google-ai-overviews/.
   Mock Google SERP with AI Overview box citing the brand, plus
   stat row and FAQ. Page-local only. Do not redeclare in inline <style>.
   ============================================================ */

.aio-viz{width:100%;display:grid;place-items:center;padding:48px 32px;background:radial-gradient(circle at 50% 50%, oklch(78% 0.12 72 / 0.06), transparent 70%);border:1px solid var(--line);border-radius:12px;min-height:560px}
@media (max-width:700px){.aio-viz{padding:24px 12px;min-height:auto}}

.aio-serp{width:100%;max-width:560px;background:#fff;color:#1f1f1f;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.02) inset;font-family:Arial,sans-serif}
.aio-serp-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(0,0,0,.08);background:#f6f8fa}
.aio-serp-bar .tl{display:flex;gap:5px}
.aio-serp-bar .tl span{width:9px;height:9px;border-radius:50%;background:#d6d6d6}
.aio-serp-bar .url{flex:1;font-family:var(--f-mono);font-size:10px;color:#5f6368;letter-spacing:.04em;text-align:center;padding:5px 12px;background:#fff;border-radius:14px;border:1px solid #e5e7eb;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aio-serp-body{padding:18px 18px 22px;display:flex;flex-direction:column;gap:14px;background:#fff}

.aio-overview{border:1px solid #d6e3ff;background:linear-gradient(180deg,#f3f7ff,#ffffff 70%);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.aio-overview-head{display:flex;align-items:center;gap:10px;font-family:Arial,sans-serif;font-size:11px;color:#5f6368;letter-spacing:.02em}
.aio-overview-head .spark{width:14px;height:14px;display:inline-block;background:conic-gradient(from 0deg,#4285f4,#9b72cb,#d96570,#f5a623,#4285f4);border-radius:50%;box-shadow:0 0 6px rgba(155,114,203,.5)}
.aio-overview-head .lbl{font-weight:500;color:#3c4043;font-size:13px}
.aio-overview-body{font-size:13.5px;line-height:1.55;color:#1f1f1f}
.aio-overview-body .cite{color:#1a73e8;font-weight:500;background:rgba(26,115,232,.08);padding:1px 6px;border-radius:4px;text-decoration:none;border-bottom:1px dashed rgba(26,115,232,.4)}
.aio-overview-sources{display:flex;flex-wrap:wrap;gap:8px;padding-top:10px;border-top:1px solid rgba(0,0,0,.06)}
.aio-source{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid #e5e7eb;border-radius:999px;font-family:Arial,sans-serif;font-size:11px;color:#5f6368;background:#fff}
.aio-source .fav{width:10px;height:10px;border-radius:50%;background:#dadce0}
.aio-source.brand{border-color:#1a73e8;color:#1f1f1f;background:rgba(26,115,232,.05)}
.aio-source.brand .fav{background:#1a73e8;box-shadow:0 0 6px rgba(26,115,232,.45)}

.aio-organic{display:flex;flex-direction:column;gap:14px;padding-top:6px}
.aio-organic .o-row{display:flex;flex-direction:column;gap:5px}
.aio-organic .o-url{font-size:11px;color:#5f6368;font-family:Arial,sans-serif}
.aio-organic .o-title{font-size:14px;color:#5e35a8;font-family:Arial,sans-serif;line-height:1.3}
.aio-organic .o-snip{height:6px;background:rgba(0,0,0,.08);border-radius:3px;width:92%}
.aio-organic .o-snip.s2{width:74%}

.aio-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.aio-stat{padding:56px 32px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:14px;min-height:240px}
.aio-stat:last-child{border-right:none}
.aio-stat .v{font-family:var(--f-sans);font-weight:400;font-size:clamp(42px,4.5vw,72px);line-height:1;letter-spacing:-0.035em;color:var(--ink)}
.aio-stat .v .it{font-family:var(--f-serif);font-style:italic;color:var(--accent-2);font-weight:400}
.aio-stat .l{font-family:var(--f-sans);font-size:15px;color:#B8B2A7;line-height:1.5;max-width:34ch}
.aio-stat .src{font-family:var(--f-mono);font-size:10px;color:var(--ink-mute);letter-spacing:.08em;margin-top:auto;text-transform:uppercase}
@media (max-width:900px){.aio-stats{grid-template-columns:1fr}.aio-stat{border-right:none;border-bottom:1px solid var(--line);padding:40px 20px;min-height:auto}.aio-stat:last-child{border-bottom:none}}

.aio-faq{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.aio-faq-item{padding:32px 0;border-bottom:1px solid var(--line);cursor:pointer}
.aio-faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;font-family:var(--f-sans);font-size:1.125rem;font-weight:400;letter-spacing:-0.02em;color:var(--ink)}
.aio-faq-item summary::-webkit-details-marker{display:none}
.aio-faq-item summary .ic{width:28px;height:28px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;flex:0 0 28px;font-size:14px;color:var(--ink-mute);transition:all .3s}
.aio-faq-item[open] summary .ic{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.aio-faq-item .body{margin-top:18px;color:#B8B2A7;font-size:1rem;line-height:1.65;max-width:72ch}

/* AIO case cards: editorial result tiles. No SERP mock (hero owns that). */
.cases-aio{gap:24px}
.cases-aio .case{padding:0;gap:0;overflow:hidden;cursor:default}
.cases-aio .case:hover{transform:none;border-color:var(--line-2)}
.cases-aio .case-top{display:flex;justify-content:space-between;align-items:center;padding:18px 28px;border-bottom:1px solid var(--line);gap:24px}
.cases-aio .case-stamp{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);display:inline-flex;align-items:center;gap:10px}
.cases-aio .case-stamp .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.cases-aio .case-body{display:grid;grid-template-columns:minmax(300px,.9fr) 1.1fr;gap:0;align-items:stretch}
.cases-aio .case:not(.lg) .case-body{grid-template-columns:1fr}

.case-result{padding:44px 36px 32px;border-right:1px solid var(--line);background:radial-gradient(120% 90% at 18% 0%, oklch(78% 0.12 72 / 0.11), transparent 62%);display:flex;flex-direction:column;gap:32px;justify-content:space-between;position:relative;overflow:hidden;min-height:340px}
.cases-aio .case:not(.lg) .case-result{border-right:none;border-bottom:1px solid var(--line);min-height:300px}
.case-result::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(237,232,222,.06) 1px, transparent 1px);background-size:16px 16px;-webkit-mask-image:radial-gradient(140% 100% at 20% 0%, #000, transparent 70%);mask-image:radial-gradient(140% 100% at 20% 0%, #000, transparent 70%);pointer-events:none;opacity:.55}
.case-figure{display:flex;flex-direction:column;gap:14px;position:relative;z-index:1}
.case-figure .l{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);display:flex;align-items:center;gap:10px}
.case-figure .l::before{content:"";width:18px;height:1px;background:var(--accent)}
.case-figure .display{font-family:var(--f-serif);font-style:normal;font-weight:400;font-size:clamp(88px,10vw,144px);line-height:.86;letter-spacing:-0.04em;color:var(--ink);display:flex;align-items:baseline;gap:14px}
.case-figure .display .unit{font-family:var(--f-mono);font-style:normal;font-size:11px;letter-spacing:.18em;color:var(--ink-dim);text-transform:uppercase;align-self:flex-end;padding-bottom:1.6em;max-width:14ch;line-height:1.5}
.case-figure .cap{font-family:var(--f-sans);font-size:13.5px;color:var(--ink-dim);line-height:1.55;max-width:32ch}
.case-figure .cap .glow{color:var(--accent-2)}
.case-meta{display:flex;flex-direction:column;border-top:1px solid var(--line);position:relative;z-index:1}
.case-meta .row{display:grid;grid-template-columns:78px 1fr;gap:18px;padding:11px 0;border-bottom:1px solid var(--line);align-items:baseline}
.case-meta .row:last-child{border-bottom:none}
.case-meta .row .k{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.case-meta .row .v{font-family:var(--f-sans);font-size:12.5px;color:var(--ink);line-height:1.45}

.cases-aio .case-text{padding:44px 40px;display:flex;flex-direction:column;gap:22px;justify-content:center}
.cases-aio .case-text h3{font-family:var(--f-sans);font-weight:400;font-size:clamp(22px,2.1vw,30px);line-height:1.18;letter-spacing:-0.025em;margin:0}
.cases-aio .case-text p{color:#B8B2A7;font-size:15px;line-height:1.65;max-width:54ch;margin:0}
.cases-aio .case-text .case-link{margin-top:6px}

@media (max-width:900px){
  .cases-aio .case-body{grid-template-columns:1fr}
  .case-result{border-right:none;border-bottom:1px solid var(--line);padding:32px 24px 28px;gap:24px;min-height:0}
  .case-figure .display{font-size:80px}
  .case-figure .display .unit{padding-bottom:1.2em}
  .cases-aio .case-text{padding:28px 24px}
  .cases-aio .case-top{padding:14px 20px;gap:12px;flex-wrap:wrap}
}

@media (prefers-reduced-motion: reduce){.aio-overview *,.aio-serp *{animation:none !important;transition:none !important}}

/* ============================================================
   AI MODEL SIBLING PAGES (.cl-*, .gm-*, .co-*). Added 2026-05-17.
   Page-local viz blocks for Claude, Gemini, Copilot sibling pages
   under /services/ai-search-optimization/. Each page gets ONE
   distinctive viz, distinct from the AIO SERP mock and from each
   other (visual hammer rule). Cases reuse .cases-aio wrapper.
   ============================================================ */

.model-viz{width:100%;display:grid;place-items:center;padding:64px 32px;background:radial-gradient(circle at 50% 50%, oklch(78% 0.12 72 / 0.06), transparent 70%);border:1px solid var(--line);border-radius:12px;min-height:560px}
@media (max-width:700px){.model-viz{padding:32px 16px;min-height:auto}}

/* ---------- CLAUDE: research chat panel ---------- */
.cl-chat{width:100%;max-width:600px;background:#161617;border:1px solid var(--line-2);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02) inset;display:flex;flex-direction:column}
.cl-chat-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.06);background:#1a1a1c}
.cl-brand{display:flex;align-items:center;gap:10px;font-family:var(--f-sans);font-size:13px;color:#EDE8DE;letter-spacing:-.01em}
.cl-brand .gem{width:18px;height:18px;border-radius:50%;background:conic-gradient(from 30deg, #d97757, #c45e3d 50%, #d97757);box-shadow:0 0 10px rgba(217,119,87,.45)}
.cl-model{font-family:var(--f-mono);font-size:10px;color:#8A857A;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border:1px solid rgba(255,255,255,.08);border-radius:999px}
.cl-body{display:flex;flex-direction:column;gap:18px;padding:22px 22px 18px}
.cl-msg{display:flex;flex-direction:column;gap:6px}
.cl-msg.user{align-items:flex-end}
.cl-msg.user .bubble{max-width:78%;background:#222224;color:#EDE8DE;border:1px solid rgba(255,255,255,.05);padding:11px 14px;border-radius:14px 14px 4px 14px;font-family:var(--f-sans);font-size:13.5px;line-height:1.5}
.cl-msg.assist .who{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:10px;color:#8A857A;letter-spacing:.1em;text-transform:uppercase}
.cl-msg.assist .who::before{content:"";width:12px;height:12px;border-radius:50%;background:conic-gradient(from 30deg, #d97757, #c45e3d 50%, #d97757)}
.cl-msg.assist .body{font-family:var(--f-sans);font-size:14px;line-height:1.62;color:#EDE8DE}
.cl-cite{display:inline-flex;align-items:center;gap:5px;padding:1px 7px;margin:0 1px;background:oklch(78% 0.12 72 / 0.14);color:var(--accent-2);border:1px solid oklch(78% 0.12 72 / 0.32);border-radius:6px;font-weight:500;font-size:.92em}
.cl-srcs{display:flex;flex-wrap:wrap;gap:8px;padding-top:14px;margin-top:6px;border-top:1px dashed rgba(255,255,255,.06)}
.cl-src{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:999px;font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;color:#8A857A}
.cl-src .fv{width:10px;height:10px;border-radius:50%;background:#3a3a3c}
.cl-src.brand{border-color:var(--accent);color:var(--accent-2);background:oklch(78% 0.12 72 / 0.08)}
.cl-src.brand .fv{background:var(--accent);box-shadow:0 0 8px var(--glow)}
.cl-foot{display:flex;align-items:center;gap:10px;padding:12px 22px 18px;border-top:1px solid rgba(255,255,255,.04);font-family:var(--f-mono);font-size:10px;color:#55524C;letter-spacing:.1em;text-transform:uppercase}
.cl-foot .pip{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--glow)}

/* ---------- GEMINI: source-graph feeding one answer ---------- */
.gm-graph{width:100%;max-width:680px;display:flex;flex-direction:column;gap:0;align-items:center;padding:8px 0}
.gm-sources{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;width:100%}
.gm-node{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px 16px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:10px;position:relative;text-align:center}
.gm-node .ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-weight:500;font-size:13px;color:#fff;letter-spacing:0}
.gm-node[data-s="search"] .ic{background:#4285f4}
.gm-node[data-s="kg"] .ic{background:#9b72cb}
.gm-node[data-s="maps"] .ic{background:#34a853}
.gm-node[data-s="reviews"] .ic{background:#f5a623;color:#1a1a1c}
.gm-node[data-s="shopping"] .ic{background:#ea4335}
.gm-node .nm{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#EDE8DE;line-height:1.25}
.gm-node .sub{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.08em;color:#8A857A;line-height:1.3}
.gm-flow{width:100%;height:64px;position:relative;margin:8px 0}
.gm-flow svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gm-flow path{stroke:oklch(78% 0.12 72 / 0.55);stroke-width:1;fill:none;stroke-dasharray:3 4;animation:gmFlow 6s linear infinite}
@keyframes gmFlow{to{stroke-dashoffset:-28}}
.gm-answer{width:min(100%, 460px);background:linear-gradient(180deg, #14141a, #0E0E10);border:1px solid var(--line-2);border-radius:14px;padding:18px 22px 20px;display:flex;flex-direction:column;gap:12px;position:relative;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.gm-answer::before{content:"";position:absolute;inset:-1px;border-radius:14px;padding:1px;background:conic-gradient(from 0deg, #4285f4, #9b72cb, #d96570, #f5a623, #4285f4);-webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.28;pointer-events:none}
.gm-answer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--f-mono);font-size:10px;color:#8A857A;letter-spacing:.1em;text-transform:uppercase}
.gm-answer-head .lbl{display:inline-flex;align-items:center;gap:8px;color:#EDE8DE}
.gm-answer-head .lbl::before{content:"";width:14px;height:14px;border-radius:50%;background:conic-gradient(from 0deg, #4285f4, #9b72cb, #d96570, #f5a623, #4285f4);box-shadow:0 0 8px rgba(155,114,203,.45)}
.gm-answer-body{font-family:var(--f-sans);font-size:13.5px;line-height:1.6;color:#EDE8DE}
.gm-cite{display:inline-flex;align-items:center;gap:5px;padding:1px 7px;background:rgba(66,133,244,.16);color:#a4c2ff;border:1px solid rgba(66,133,244,.4);border-radius:6px;font-weight:500;font-size:.92em}
.gm-answer-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.06);font-family:var(--f-mono);font-size:9.5px;color:#55524C;letter-spacing:.12em;text-transform:uppercase}
.gm-answer-meta .pulled{color:var(--accent-2)}
@media (max-width:700px){.gm-sources{grid-template-columns:repeat(3,1fr)}.gm-node:nth-child(4),.gm-node:nth-child(5){display:none}}

/* ---------- COPILOT: Edge browser + side panel ---------- */
.co-edge{width:100%;max-width:680px;background:#1a1a1c;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55);display:flex;flex-direction:column}
.co-chrome{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid rgba(255,255,255,.06);background:#202022}
.co-chrome .tl{display:flex;gap:5px}
.co-chrome .tl span{width:9px;height:9px;border-radius:50%;background:#3a3a3c}
.co-chrome .url{flex:1;font-family:var(--f-mono);font-size:10px;color:#8A857A;letter-spacing:.04em;text-align:center;padding:5px 12px;background:#1a1a1c;border-radius:8px;border:1px solid rgba(255,255,255,.04)}
.co-chrome .icon{width:18px;height:18px;border-radius:4px;background:linear-gradient(135deg,#0078d4,#50e6ff);display:grid;place-items:center;font-family:var(--f-mono);font-size:10px;color:#fff;font-weight:600}
.co-body{display:grid;grid-template-columns:1fr 280px;min-height:340px;background:#fff}
.co-page{padding:22px 20px;background:#fafafa;display:flex;flex-direction:column;gap:12px}
.co-page .doc-h{height:14px;width:62%;background:#e6e6e8;border-radius:4px}
.co-page .doc-l{height:7px;background:#e6e6e8;border-radius:3px}
.co-page .doc-l.w90{width:90%}.co-page .doc-l.w76{width:76%}.co-page .doc-l.w84{width:84%}.co-page .doc-l.w58{width:58%}
.co-page .doc-block{height:46px;background:#eaeaec;border-radius:6px;margin-top:6px}
.co-panel{background:#161617;color:#EDE8DE;padding:16px 18px 18px;display:flex;flex-direction:column;gap:14px;border-left:1px solid rgba(255,255,255,.06)}
.co-panel-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--f-mono);font-size:10px;color:#8A857A;letter-spacing:.1em;text-transform:uppercase}
.co-panel-head .br{display:inline-flex;align-items:center;gap:8px;color:#EDE8DE;text-transform:none;letter-spacing:0;font-family:var(--f-sans);font-size:13px}
.co-panel-head .br::before{content:"";width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,#0078d4,#50e6ff);box-shadow:0 0 8px rgba(80,230,255,.35)}
.co-query{font-family:var(--f-sans);font-size:12.5px;line-height:1.5;color:#B8B2A7;background:#1f1f21;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:10px 12px}
.co-answer{font-family:var(--f-sans);font-size:13px;line-height:1.6;color:#EDE8DE}
.co-cite{display:inline-flex;align-items:center;gap:5px;padding:1px 6px;background:rgba(80,230,255,.14);color:#a8e9ff;border:1px solid rgba(80,230,255,.32);border-radius:6px;font-weight:500;font-size:.92em}
.co-srcs{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px dashed rgba(255,255,255,.06)}
.co-src{display:flex;align-items:center;gap:9px;padding:6px 8px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);border-radius:8px;font-family:var(--f-mono);font-size:10px;color:#8A857A;letter-spacing:.04em}
.co-src .fv{width:10px;height:10px;border-radius:2px;background:#3a3a3c}
.co-src.brand{border-color:#50e6ff;color:#a8e9ff;background:rgba(80,230,255,.06)}
.co-src.brand .fv{background:linear-gradient(135deg,#0078d4,#50e6ff)}
@media (max-width:700px){.co-body{grid-template-columns:1fr}.co-panel{border-left:none;border-top:1px solid rgba(255,255,255,.06)}}

@media (prefers-reduced-motion: reduce){.gm-flow path{animation:none}}

/* ============================================================
   CHATGPT / GROK / PERPLEXITY VIZ (.cg-*, .gk-*, .pp-*). 2026-05-17.
   Three distinct viz mocks for sibling pages. None matches the AIO
   SERP, Claude chat, Gemini graph, or Copilot Edge viz (visual hammer).
   ============================================================ */

/* ---------- CHATGPT: Search panel ---------- */
.cg-panel{width:100%;max-width:620px;background:#161617;border:1px solid var(--line-2);border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02) inset;display:flex;flex-direction:column}
.cg-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.06);background:#1a1a1c}
.cg-brand{display:flex;align-items:center;gap:10px;font-family:var(--f-sans);font-size:13px;color:#EDE8DE}
.cg-brand .logo{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%, #1a4f3e, #0d2520 70%);box-shadow:0 0 10px rgba(16,163,127,.35);position:relative}
.cg-brand .logo::after{content:"";position:absolute;inset:4px;border-radius:50%;border:1.5px solid #10a37f;opacity:.7}
.cg-mode{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border:1px solid rgba(16,163,127,.3);border-radius:999px;color:#10a37f}
.cg-body{display:flex;flex-direction:column;gap:18px;padding:22px 22px 20px}
.cg-query{font-family:var(--f-sans);font-size:14px;color:#B8B2A7;line-height:1.5;padding:11px 14px;background:#1f1f21;border:1px solid rgba(255,255,255,.05);border-radius:12px}
.cg-answer{font-family:var(--f-sans);font-size:14px;line-height:1.62;color:#EDE8DE}
.cg-cite{display:inline-flex;align-items:center;gap:5px;padding:1px 7px;margin:0 1px;background:rgba(16,163,127,.16);color:#7fdbb7;border:1px solid rgba(16,163,127,.36);border-radius:6px;font-weight:500;font-size:.92em}
.cg-srcrow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:6px}
.cg-srccard{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
.cg-srccard .fav{width:10px;height:10px;border-radius:50%;background:#3a3a3c}
.cg-srccard .tl{font-family:var(--f-mono);font-size:10px;color:#EDE8DE;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg-srccard .sn{font-family:var(--f-sans);font-size:11px;color:#8A857A;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cg-srccard.brand{border-color:rgba(16,163,127,.45);background:rgba(16,163,127,.06)}
.cg-srccard.brand .fav{background:#10a37f;box-shadow:0 0 8px rgba(16,163,127,.5)}
.cg-srccard.brand .tl{color:#7fdbb7}
.cg-follow{display:flex;flex-wrap:wrap;gap:6px;padding-top:8px;border-top:1px dashed rgba(255,255,255,.06)}
.cg-chip{display:inline-block;padding:6px 11px;border:1px solid rgba(255,255,255,.08);border-radius:999px;font-family:var(--f-sans);font-size:11px;color:#B8B2A7}
@media (max-width:600px){.cg-srcrow{grid-template-columns:1fr}}

/* ---------- GROK: X timeline answer ---------- */
.gk-x{width:100%;max-width:560px;background:#000;border:1px solid #2f3336;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55);display:flex;flex-direction:column;color:#e7e9ea;font-family:var(--f-sans)}
.gk-x-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid #2f3336}
.gk-x-brand{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:#e7e9ea}
.gk-x-brand .logo{font-family:Inter,system-ui,sans-serif;font-size:18px;font-weight:700;color:#e7e9ea;line-height:1}
.gk-x-time{font-family:var(--f-mono);font-size:10px;color:#71767b;letter-spacing:.08em;text-transform:uppercase}
.gk-x-q{padding:14px 20px 0;font-size:14.5px;color:#e7e9ea;line-height:1.45;font-weight:500}
.gk-x-ans{padding:10px 20px 16px;font-size:14px;color:#e7e9ea;line-height:1.55;border-bottom:1px solid #2f3336}
.gk-x-cite{display:inline-flex;align-items:center;padding:1px 6px;background:rgba(29,155,240,.16);color:#1d9bf0;border:1px solid rgba(29,155,240,.4);border-radius:6px;font-weight:500;font-size:.92em}
.gk-x-srcs{display:flex;flex-direction:column}
.gk-x-src{padding:14px 20px;border-bottom:1px solid #2f3336;display:flex;flex-direction:column;gap:8px}
.gk-x-src:last-child{border-bottom:none}
.gk-x-src-top{display:flex;align-items:baseline;gap:8px}
.gk-x-src-top .handle{font-weight:600;font-size:13px;color:#e7e9ea}
.gk-x-src-top .ts{font-size:11px;color:#71767b;font-family:var(--f-mono);letter-spacing:.04em}
.gk-x-src-txt{font-size:13.5px;line-height:1.45;color:#e7e9ea}
.gk-x-src-meta{display:flex;gap:18px;font-size:11px;color:#71767b;font-family:var(--f-mono);letter-spacing:.04em}
.gk-x-src.brand{background:rgba(29,155,240,.04);border-left:2px solid #1d9bf0}
.gk-x-src.brand .handle{color:#1d9bf0}

/* ---------- PERPLEXITY: answer + source rail ---------- */
.pp-panel{width:100%;max-width:720px;background:#0f1419;border:1px solid #1f2937;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55);display:flex;flex-direction:column;color:#e2e8f0}
.pp-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid #1f2937;background:#131a20}
.pp-brand{display:flex;align-items:center;gap:10px;font-family:var(--f-sans);font-size:13px;color:#e2e8f0;font-weight:500}
.pp-brand .logo{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #20b8cd, #1a8a99 70%);box-shadow:0 0 10px rgba(32,184,205,.45);position:relative}
.pp-brand .logo::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:7px;height:7px;border:1.5px solid #0f1419;border-radius:50%}
.pp-mode{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border:1px solid rgba(32,184,205,.3);border-radius:999px;color:#20b8cd}
.pp-body{display:grid;grid-template-columns:1.4fr 1fr;gap:0;min-height:280px}
.pp-q{grid-column:1/-1;padding:14px 20px;font-family:var(--f-sans);font-size:13.5px;color:#94a3b8;border-bottom:1px solid #1f2937;background:#131a20}
.pp-ans{padding:18px 22px;border-right:1px solid #1f2937;font-family:var(--f-sans);font-size:14px;line-height:1.7;color:#e2e8f0}
.pp-ans p{margin:0}
.pp-cite{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(32,184,205,.2);color:#20b8cd;border:1px solid rgba(32,184,205,.4);font-family:var(--f-mono);font-size:10px;font-weight:600;margin:0 2px;vertical-align:super;line-height:1}
.pp-rail{background:#131a20;padding:18px 16px;display:flex;flex-direction:column;gap:10px}
.pp-rail-h{font-family:var(--f-mono);font-size:10px;color:#64748b;letter-spacing:.15em;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid #1f2937;margin-bottom:4px}
.pp-rail-item{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border:1px solid #1f2937;border-radius:8px;background:rgba(255,255,255,.02)}
.pp-rail-item .n{flex:0 0 18px;height:18px;border-radius:50%;background:rgba(255,255,255,.05);color:#94a3b8;display:grid;place-items:center;font-family:var(--f-mono);font-size:10px;font-weight:600}
.pp-rail-item .meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.pp-rail-item .dm{font-family:var(--f-mono);font-size:10px;color:#e2e8f0;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-rail-item .tt{font-family:var(--f-sans);font-size:11px;color:#94a3b8;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pp-rail-item.brand{border-color:rgba(32,184,205,.4);background:rgba(32,184,205,.06)}
.pp-rail-item.brand .n{background:#20b8cd;color:#0f1419;box-shadow:0 0 8px rgba(32,184,205,.5)}
.pp-rail-item.brand .dm{color:#20b8cd}
@media (max-width:700px){.pp-body{grid-template-columns:1fr}.pp-ans{border-right:none;border-bottom:1px solid #1f2937}}