/* ==========================================================================
   /SN3 Group — design system
   "Editorial intelligence meets operational precision."
   ~70% disciplined consulting authority · ~30% expressive editorial energy.

   Ground: warm cream. Surfaces: white. Authority: near-black panels.
   Accents: deep teal (structure) · light teal (tint) · coral (sparingly).
   Display: League Spartan. Text: Montserrat.
   Graphic language: dot-matrix fades, connector rules with node dots,
   arch shapes, selective large corner radii, the /slash mark.
   ========================================================================== */

/* --- fonts --------------------------------------------------------------- */
@font-face{font-family:Display;font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/league-spartan-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:Display;font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/league-spartan-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:Display;font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/league-spartan-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:Display;font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/league-spartan-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:Text;font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/montserrat-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:Text;font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/montserrat-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:Text;font-style:italic;font-weight:500;font-display:swap;
  src:url('../fonts/montserrat-latin-500-italic.woff2') format('woff2')}
@font-face{font-family:Text;font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/montserrat-latin-600-normal.woff2') format('woff2')}

/* --- tokens -------------------------------------------------------------- */
:root{
  --ink:#171A1A;          /* authority panels, primary buttons, display type */
  --body:#3E4546;
  --muted:#6C7476;
  --paper:#F3EFE8;        /* the page ground — warm cream */
  --paper-deep:#EAE4D8;
  --card:#FFFFFF;

  --teal:#1695A5;         /* deep teal — structure, accents, large type */
  --teal-deep:#0F6B75;    /* AA-safe teal for small text and links */
  --teal-light:#41C3C8;   /* tints, marks on dark */
  --teal-pale:#DFF0F1;    /* section tint */
  --coral:#D85C4A;        /* expressive accent — used sparingly */
  --coral-deep:#A33D2E;   /* AA-safe on coral-pale */
  --coral-pale:#F7E4E0;

  --line:rgba(23,26,26,.16);
  --line-soft:rgba(23,26,26,.08);

  --wrap:76rem;
  --gutter:1.5rem;
  --r-sm:.5rem;           /* buttons, chips, small tiles */
  --r-md:1rem;            /* cards */
  --r-lg:1.75rem;         /* panels */
  --r-corner:3.5rem;      /* the single oversized corner */
  --nav-h:4.25rem;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* --- reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Text,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:.98rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--teal-deep);outline-offset:3px}

/* --- type ---------------------------------------------------------------- */
h1,h2{font-family:Display,'Arial Black',sans-serif;font-weight:700;color:var(--ink);
  margin:0;text-transform:uppercase;letter-spacing:.012em;text-wrap:balance}
h1{font-size:clamp(2.3rem,4.8vw,3.9rem);line-height:1.06;font-weight:800}
h2{font-size:clamp(1.6rem,2.9vw,2.45rem);line-height:1.06}
h3{font-family:Display,sans-serif;font-weight:600;font-size:clamp(1.15rem,1.7vw,1.35rem);
  line-height:1.16;color:var(--ink);margin:0;letter-spacing:.01em}
h4{font-family:Display,sans-serif;font-weight:600;font-size:1.02rem;line-height:1.3;
  margin:0;letter-spacing:.012em;color:var(--ink)}
p{margin:0;color:var(--body)}
p+p{margin-top:1rem}
.lead{font-size:clamp(.98rem,1.25vw,1.08rem);line-height:1.7;color:var(--body)}
strong{font-weight:600;color:var(--ink)}
/* Editorial accent inside display type — the teal line of a two-tone headline. */
.serif-em{font-style:normal;color:var(--teal)}

/* Eyebrow label: slash-prefixed, no box. */
.chip{display:inline-flex;align-items:baseline;gap:.5rem;
  font-family:Text,sans-serif;font-weight:600;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.chip::before{content:'//';font-family:Display,sans-serif;font-weight:800;
  letter-spacing:-.08em;color:var(--teal);transform:skewX(-8deg)}
.chip--teal::before{color:var(--teal)}
.chip--coral::before,.chip--pale::before{color:var(--coral)}
.chip--beige::before{color:var(--muted)}
.chip--out{color:var(--muted)}

/* --- layout -------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:52rem}
.section{padding-block:clamp(3.5rem,7vw,6rem)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.section--beige{background:var(--card)}                /* alternating surface */
.section--pale{background:var(--teal-pale)}
.section--ink{background:var(--ink);border-radius:0}
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}
.section--ink p{color:rgba(255,255,255,.74)}
.section--ink strong{color:#fff}
.section--ink .chip{color:#fff}
.section--ink .chip::before{color:var(--teal-light)}
.section--ink .serif-em{color:var(--teal-light)}
.section--ink .link{color:var(--teal-light);box-shadow:inset 0 -1px 0 0 rgba(65,195,200,.4)}
.section--ink .link:hover{box-shadow:inset 0 -1.5px 0 0 var(--teal-light)}
.section--ink .strip span{background:transparent;border-color:rgba(255,255,255,.26);
  color:rgba(255,255,255,.85)}
.section--ink .ledger__cap{color:rgba(255,255,255,.55)}
.section--pale .ledger__cap{color:var(--body)}

.sec-head{max-width:46rem;margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head h2{margin-top:.9rem}
.sec-head p{margin-top:1rem}
/* Editorial signature: thin teal rule ending in a node dot. */
.rule-dot{display:block;width:5.5rem;height:2px;background:var(--teal);margin-top:1.05rem;
  position:relative;border:0}
.rule-dot::after{content:'';position:absolute;right:-4px;top:50%;width:8px;height:8px;
  border-radius:50%;background:var(--teal);transform:translateY(-50%)}
.sec-head--center .rule-dot{margin-inline:auto}
.section--ink .rule-dot,.section--ink .rule-dot::after{background:var(--teal-light)}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:.7rem 1rem;z-index:200}
.skip:focus{left:.5rem;top:.5rem}

/* --- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:Text,sans-serif;font-weight:600;font-size:.9rem;line-height:1;
  padding:.9rem 1.55rem;text-decoration:none;border-radius:var(--r-sm);
  border:1.5px solid transparent;cursor:pointer;letter-spacing:.01em;
  transition:background .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),transform .18s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
/* Every filled CTA: brand teal with a white label (client direction).
   Hover darkens within the same hue so the white label gains contrast. */
.btn--cta,.btn--ink,.btn--light{background:var(--teal);color:#fff;
  box-shadow:0 .3rem .9rem rgba(22,149,165,.32),0 0 1.5rem rgba(22,149,165,.18)}
.btn--cta:hover,.btn--ink:hover,.btn--light:hover{background:#117E8C;color:#fff;
  box-shadow:0 .45rem 1.3rem rgba(22,149,165,.45),0 0 1.9rem rgba(22,149,165,.28)}
.btn--out{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--out:hover{background:var(--ink);color:var(--paper)}
.btn--sm{padding:.62rem 1.05rem;font-size:.84rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.btn-row--center{justify-content:center}
.link{
  display:inline-flex;align-items:center;gap:.35rem;font-weight:600;font-size:.88rem;
  color:var(--teal-deep);text-decoration:none;letter-spacing:.01em;
  box-shadow:inset 0 -1px 0 0 rgba(15,107,117,.35);
  transition:box-shadow .18s var(--ease);
}
.link:hover{box-shadow:inset 0 -1.5px 0 0 var(--teal-deep)}
.link::after{content:'\2192';transition:transform .18s var(--ease)}
.link:hover::after{transform:translateX(3px)}

/* --- graphic language ----------------------------------------------------- */
/* Dot-matrix tiles (halftone), replacing the old graph-paper blocks. */
.blocks{position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(6,1fr);
  pointer-events:none;z-index:0}
.blk{
  background-image:radial-gradient(var(--teal) 22%,transparent 23%);
  background-size:.95rem .95rem;opacity:.22;
  -webkit-mask-image:linear-gradient(135deg,#000 30%,transparent 92%);
  mask-image:linear-gradient(135deg,#000 30%,transparent 92%);
  animation:breathe 12s var(--ease) infinite;
}
.blk--y{background-image:radial-gradient(var(--teal-light) 24%,transparent 25%);opacity:.3}
.blk:nth-child(2){animation-delay:-2.2s}
.blk:nth-child(3){animation-delay:-4.4s}
.blk:nth-child(4){animation-delay:-6.6s}
.blk:nth-child(5){animation-delay:-1.1s}
.blk:nth-child(6){animation-delay:-8.8s}
.blk:nth-child(7){animation-delay:-3.3s}
@keyframes breathe{
  0%,100%{opacity:.14;background-position:0 0}
  50%{opacity:.32;background-position:.475rem .475rem}
}
.dotfield{background-image:radial-gradient(var(--teal) 26%,transparent 27%);
  background-size:1.1rem 1.1rem}
.rule{height:1px;background:var(--line);border:0;margin:0}
/* Coral double-slash — the "precision with momentum" mark. Decorative. */
.dslash{display:inline-flex;gap:.28em;width:1.5em}
.dslash i,.dslash::before,.dslash::after{content:'';display:block;width:.34em;height:1em;
  background:var(--coral);transform:skewX(-15deg);border-radius:1px}
.dslash::before{content:''}
.dslash::after{content:''}
.dslash i{display:none}

/* --- announcement bar ----------------------------------------------------- */
.annc{display:flex;align-items:center;justify-content:center;gap:.9rem;flex-wrap:wrap;
  background:var(--ink);color:rgba(255,255,255,.85);text-decoration:none;
  font-family:Text,sans-serif;font-weight:500;font-size:.74rem;letter-spacing:.02em;
  padding:.55rem 1rem;text-align:center}
.annc b{font-weight:600;color:#fff}
.annc i{font-style:normal;color:var(--teal-light)}
.annc__go{color:var(--teal-light);white-space:nowrap;font-weight:600}
.annc:hover .annc__go{text-decoration:underline}

/* --- logo ----------------------------------------------------------------- */
.logo{display:inline-flex;align-items:center;gap:.34rem;
  font-family:Display,sans-serif;font-weight:700;font-size:1.42rem;line-height:1;
  color:var(--ink);letter-spacing:-.005em;white-space:nowrap}
.logo__slash{display:block;width:.3em;height:.92em;background:var(--teal);
  transform:skewX(-15deg);border-radius:1.5px}
.logo b{font-weight:700;transform:translateY(.06em)}
.logo sup{font-size:.55em;line-height:0;vertical-align:super}
.footer .logo{color:#fff}
/* The actual brand asset, used in the nav, footer and diagram hub. */
.logo-img{display:block;height:1.6rem;width:auto}

/* --- nav ----------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(243,239,232,.9);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line-soft)}
.nav__inner{display:flex;align-items:center;gap:1.5rem;height:var(--nav-h);
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.nav__brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.nav__menu{display:flex;align-items:center;gap:.2rem;margin-left:auto;list-style:none;
  margin-block:0;padding:0}
.nav__item{position:relative}
.nav__link{display:flex;align-items:center;gap:.35rem;padding:.55rem .7rem;
  font-size:.88rem;font-weight:500;text-decoration:none;color:var(--ink);
  border-radius:var(--r-sm);background:none;border:0;cursor:pointer;white-space:nowrap}
.nav__link:hover{background:rgba(23,26,26,.05)}
.nav__link[aria-current='page']{box-shadow:inset 0 -2px 0 0 var(--teal)}
.nav__caret{width:.42rem;height:.42rem;border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .18s var(--ease)}
.nav__item[data-open] .nav__caret{transform:rotate(-135deg) translateY(1px)}
.nav__panel{
  position:absolute;top:calc(100% + .5rem);left:0;min-width:21rem;
  background:var(--card);border:1px solid var(--line-soft);padding:.55rem;
  border-radius:var(--r-md);
  box-shadow:0 22px 44px -24px rgba(23,26,26,.4);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility .16s;
}
.nav__item[data-open] .nav__panel{opacity:1;visibility:visible;transform:none}
.nav__panel a{display:block;padding:.62rem .7rem;text-decoration:none;border-radius:var(--r-sm)}
.nav__panel a:hover{background:var(--teal-pale)}
.nav__panel b{display:block;font-weight:600;font-size:.9rem;color:var(--ink)}
.nav__panel span{display:block;font-size:.8rem;color:var(--muted);margin-top:.12rem}
.nav__actions{display:flex;align-items:center;gap:.6rem;flex:none}
.nav__toggle{display:none;width:2.6rem;height:2.6rem;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer}
.nav__toggle span{display:block;width:1.05rem;height:1.5px;background:var(--ink);position:relative}
.nav__toggle span::before,.nav__toggle span::after{content:'';position:absolute;left:0;
  width:1.05rem;height:1.5px;background:var(--ink)}
.nav__toggle span::before{top:-.34rem}
.nav__toggle span::after{top:.34rem}

@media (max-width:64rem){
  .nav__toggle{display:flex}
  .nav__actions .btn{display:none}
  .nav__menu{
    position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--paper);border-bottom:1px solid var(--line);
    padding:.75rem var(--gutter) 1.4rem;max-height:calc(100dvh - var(--nav-h));
    overflow-y:auto;margin-left:0;display:none;
  }
  .nav[data-nav-open] .nav__menu{display:flex}
  .nav__link{width:100%;justify-content:space-between;padding:.85rem .2rem;font-size:1rem;
    border-bottom:1px solid var(--line-soft);border-radius:0}
  .nav__panel{position:static;opacity:1;visibility:visible;transform:none;border:0;
    box-shadow:none;min-width:0;padding:.2rem 0 .6rem .2rem;display:none;background:none}
  .nav__item[data-open] .nav__panel{display:block}
  .nav__mobile-cta{display:block;margin-top:1rem}
  .nav__mobile-cta .btn{display:inline-flex;width:100%;justify-content:center}
}
@media (min-width:64.0625rem){.nav__mobile-cta{display:none}}

/* --- hero (home) ---------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(3rem,6vw,5.25rem)}
.hero__inner{position:relative;z-index:1;max-width:48rem;margin-inline:auto;text-align:center}
.hero h1{margin-top:1.1rem}
.hero .lead{max-width:35rem;margin:1.25rem auto 0}
.hero__note{margin-top:1.1rem;font-size:.74rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;
  gap:clamp(1.5rem,3.5vw,3rem);align-items:center}
.hero--split .hero__inner{text-align:left;max-width:none;margin:0}
.hero--split .lead{margin-left:0;margin-right:0;max-width:33rem}
.hero__media{position:relative;overflow:hidden;
  border-radius:var(--r-md) var(--r-corner) var(--r-md) var(--r-md);
  background:var(--ink);aspect-ratio:3/2;display:grid;place-items:center}
.hero__media::before{content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(65,195,200,.4) 20%,transparent 21%);
  background-size:1rem 1rem;
  -webkit-mask-image:linear-gradient(120deg,#000 25%,transparent 80%);
  mask-image:linear-gradient(120deg,#000 25%,transparent 80%);
  animation:breathe 12s var(--ease) infinite}
.hero__media > img,.hero__media > video{position:relative;width:100%;height:100%;object-fit:cover}

/* Brand-motion loop: slash sweeps in, mark and tag rise, hold, fade, repeat. */
.heromark{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:1.15rem;padding:1rem;animation:markCycle 7s linear infinite}
.heromark .logo{font-size:clamp(2.7rem,5vw,4.3rem);gap:.12em;color:#fff}
.heromark .logo__slash{transform-origin:top;animation:markSlash 7s var(--ease) infinite;
  background:var(--teal-light)}
.heromark .logo b{display:inline-block;animation:markRise 7s var(--ease) infinite}
.heromark__tag{font-family:Text,sans-serif;font-weight:600;font-size:clamp(.7rem,.85vw,.74rem);
  letter-spacing:.3em;text-transform:uppercase;color:var(--teal-light);
  animation:markRiseLate 7s var(--ease) infinite}
@keyframes markCycle{0%,82%{opacity:1}93%,100%{opacity:0}}
@keyframes markSlash{0%{transform:skewX(-15deg) scaleY(0)}
  11%,100%{transform:skewX(-15deg) scaleY(1)}}
@keyframes markRise{0%,7%{opacity:0;transform:translateY(12px)}
  18%,100%{opacity:1;transform:none}}
@keyframes markRiseLate{0%,13%{opacity:0;transform:translateY(12px)}
  25%,100%{opacity:1;transform:none}}
@media (max-width:56rem){
  .hero__grid{grid-template-columns:1fr}
}

/* --- hero banner (photo-backed) ------------------------------------------- */
.hero--banner{display:flex;align-items:center;min-height:min(86svh,44rem);
  padding-block:clamp(3.5rem,7vw,6rem)}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:70% center}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(243,239,232,.96) 0%, rgba(243,239,232,.86) 30%,
    rgba(243,239,232,.38) 58%, rgba(243,239,232,0) 78%)}
.hero--banner .wrap{position:relative;z-index:1;width:100%}
.hero--banner .hero__inner{text-align:left;max-width:37rem;margin:0}
.hero--banner .lead{margin-left:0;max-width:31rem}
@media (max-width:56rem){
  .hero--banner{min-height:0;padding-block:2.5rem}
  .hero__bg img{object-position:78% center}
  .hero__scrim{background:linear-gradient(90deg,
    rgba(243,239,232,.97) 0%, rgba(243,239,232,.9) 55%, rgba(243,239,232,.55) 100%)}
}

/* --- hero collage (editorial brand canvas beside the statement) ------------ */
.hero--collage{position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:min(78svh,41rem);padding-block:clamp(3rem,6vw,5rem)}
.hero__canvas{position:absolute;top:0;right:0;bottom:0;width:min(62%,58rem);
  pointer-events:none}
.hero__canvas img{width:100%;height:100%;object-fit:cover;object-position:100% center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 42%);
  mask-image:linear-gradient(90deg,transparent,#000 42%)}
.hero--collage .wrap{position:relative;z-index:1;width:100%}
.hero--collage .hero__inner{text-align:left;max-width:38rem;margin:0}
.hero--collage .lead{margin-left:0;max-width:30rem}
@media (max-width:56rem){
  .hero--collage{min-height:0;display:block;padding-bottom:0}
  .hero__canvas{position:static;width:100%;aspect-ratio:16/8.2;margin-top:1.6rem}
  .hero__canvas img{object-position:center;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
}

/* --- hero (interior) ------------------------------------------------------ */
.phero{position:relative;overflow:hidden;border-bottom:1px solid var(--line-soft);
  padding-block:clamp(2.75rem,5.5vw,4.5rem)}
.phero .blocks{left:auto;right:0;width:min(46%,34rem)}
.phero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;position:relative;z-index:1}
.phero h1{margin-top:1rem;font-size:clamp(2rem,4vw,3.1rem);line-height:1.1}
.phero .lead{margin-top:1.15rem;max-width:34rem}
/* Page hero carrying supplied banner artwork: the image fills the right side
   and fades into the paper, replacing the abstract aside and block motif. */
.phero:has(.phero__canvas) .blocks{display:none}
.phero:has(.phero__canvas) .wrap{position:relative;z-index:1}
.phero__canvas{position:absolute;top:0;right:0;bottom:0;width:min(48%,43rem);
  pointer-events:none}
.phero__canvas img{width:100%;height:100%;object-fit:cover;object-position:100% center;
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%);
  mask-image:linear-gradient(90deg,transparent,#000 12%)}
/* Background variant: the artwork washes across the entire hero behind the
   copy, faded well down and calmest on the text side so the words carry. */
.phero__canvas--bg{left:0;width:auto}
.phero__canvas--bg img{object-fit:cover;object-position:center 35%;opacity:.42;
  filter:grayscale(1) sepia(1) hue-rotate(-28deg) saturate(1.9) brightness(1.05);
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.55),#000 72%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.55),#000 72%)}
/* Contain variant: the complete composition floats in the hero, its element
   sized to the artwork and faded out on every edge so no seam shows. */
.phero__canvas--contain{display:flex;align-items:center}
.phero__canvas--contain img{height:auto;object-fit:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 90%,transparent),
    linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 11%,#000 90%,transparent),
    linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-composite:intersect}
@media (max-width:56rem){
  .phero__canvas{position:static;width:100%;aspect-ratio:1.05;margin-top:1.5rem}
  .phero__canvas img{object-position:100% center;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
  .phero__canvas--contain{aspect-ratio:auto}
  .phero__canvas--contain img{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 90%,transparent),
      linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent,#000 11%,#000 90%,transparent),
      linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
    mask-composite:intersect}
  .phero__canvas--bg{position:absolute;inset:0;width:auto;aspect-ratio:auto;margin:0}
  .phero__canvas--bg img{object-position:center;opacity:.38;
    -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.55),#000 70%);
    mask-image:linear-gradient(180deg,rgba(0,0,0,.55),#000 70%)}
}
/* Teal-glass treatment: full-strength artwork under a brand-teal overlay,
   hero copy flipped light so it pops. The section itself is teal so the
   light copy stays readable even before (or without) the artwork. */
.phero--dark{background:var(--teal-deep)}
.phero__canvas--teal img{opacity:1;filter:none;
  -webkit-mask-image:none;mask-image:none}
.phero__canvas--teal::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(15,107,117,.94) 8%,rgba(15,107,117,.72) 45%,rgba(22,149,165,.5));
  mix-blend-mode:multiply}
.phero--dark h1,.phero--dark .chip{color:#fff}
.phero--dark .serif-em{color:var(--teal-light)}
.phero--dark .lead{color:rgba(255,255,255,.88)}
.phero--dark .rule-dot,.phero--dark .rule-dot::after{background:var(--teal-light)}
.phero--dark .chip::before{color:var(--teal-light)}
.phero--dark .strip span{background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.32);color:#fff}
.phero__aside{position:relative;min-height:14rem}
/* Arch composition: teal arch, ink block, coral chip, dot fade. */
.phero__swatch{position:absolute;inset:0}
.phero__swatch i{position:absolute;display:block}
.phero__swatch i:nth-child(1){inset:8% 18% 0 26%;background:var(--teal);
  border-radius:100vw 100vw 0 0}
.phero__swatch i:nth-child(2){inset:auto 4% 0 8%;height:34%;background:var(--ink);
  border-radius:var(--r-md) var(--r-md) 0 var(--r-md)}
.phero__swatch i:nth-child(3){right:6%;top:10%;width:3.2rem;height:1.1rem;background:var(--coral);
  transform:skewX(-15deg);border-radius:2px}
.phero__swatch::after{content:'';position:absolute;left:0;top:6%;width:34%;height:44%;
  background-image:radial-gradient(rgba(23,26,26,.35) 22%,transparent 23%);
  background-size:.62rem .62rem;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);
  mask-image:linear-gradient(180deg,#000,transparent)}
@media (max-width:56rem){
  .phero__grid{grid-template-columns:1fr}
  .phero__aside{min-height:9rem}
}

/* --- split (statement + visual) ------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.75rem,4vw,3.25rem);
  align-items:center}
.split--flip .split__media{order:-1}
.split h2{margin-top:.95rem}
.split p{margin-top:1rem}
.split__media{position:relative}
/* Teal arch rising behind the photograph. */
.split__media::before{content:'';position:absolute;left:-1.4rem;bottom:-1.4rem;
  width:56%;height:78%;z-index:0;background:var(--teal);
  border-radius:100vw 100vw 0 0}
/* Editorial cutout figure: the artwork carries its own teal shapes, so the
   arch is dropped and the cream field multiplies into a paper panel. The
   arch is for photographs only — when the media slot holds tiles or a
   mosaic it would paint over their text, so it is dropped there too. */
.split__media:has(.cut)::before,
.split__media:has(.tiles)::before,
.split__media:has(.mosaic)::before{display:none}
.cut{position:relative;z-index:1;background:var(--paper);overflow:hidden;
  border-radius:var(--r-md) var(--r-lg) var(--r-md) var(--r-md)}
.cut img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
/* Decision map: the ten advisory questions arranged around the /SN3 hub.
   Live rebuild of the client's infographic — question rows cascade in from
   their outer edge, node dots snap onto the connector stems, the hub ring
   turns slowly, and the clarity badge lands last. Entrances are animations
   (not transitions) so the hover lift — done with `translate` — never
   fights the entrance `transform`. */
.dmap__board{display:grid;grid-template-columns:1fr;row-gap:.85rem}
.dmap__list{display:contents}
.dmap__q{position:relative;display:flex;align-items:center;gap:.9rem;
  background:var(--card);border:1px solid var(--line-soft);
  border-radius:var(--r-sm) var(--r-md) var(--r-sm) var(--r-sm);
  padding:.7rem 1rem;min-height:4.4rem;
  transition:translate .35s var(--ease),box-shadow .35s var(--ease)}
.dmap__q:hover{translate:0 -3px;box-shadow:0 14px 26px -20px rgba(23,26,26,.5)}
.dmap__q p{margin:0;font-size:.92rem;line-height:1.42;font-weight:500}
.dmap__q b{color:var(--teal-deep);font-weight:600}
.dmap__num{flex:0 0 auto;display:grid;place-items:center;width:2.35rem;height:2.35rem;
  background:var(--teal-deep);color:#fff;border-radius:.55rem .95rem .55rem .55rem;
  font-family:Display,sans-serif;font-weight:700;font-size:.95rem;
  transition:background .35s var(--ease)}
.dmap__q:hover .dmap__num{background:var(--ink)}
.dmap__icon{flex:0 0 auto;display:grid;place-items:center;width:2.7rem;height:2.7rem;
  color:var(--ink);border:1.5px dashed rgba(15,107,117,.45);border-radius:50%}
.dmap__icon svg{width:1.4rem;height:1.4rem}
.dmap__hub{position:relative;display:grid;place-items:center;place-self:center;
  width:6.5rem;height:6.5rem;margin-bottom:.5rem;order:-1;
  background:var(--teal);border-radius:50%;
  box-shadow:0 0 0 1.3rem rgba(22,149,165,.07)}
.dmap__hub::before{content:'';position:absolute;inset:-.85rem;border-radius:50%;
  border:1.5px dashed rgba(15,107,117,.4);animation:dmap-orbit 46s linear infinite}
@keyframes dmap-orbit{to{rotate:1turn}}
.dmap__logo{display:block;width:57%;height:auto}
.dmap__badge{display:flex;justify-content:center;align-items:baseline;gap:.65rem;
  width:fit-content;margin:1.8rem auto 0;padding:.85rem 1.5rem;
  background:var(--card);border:1px solid var(--line-soft);
  border-radius:var(--r-sm) var(--r-md) var(--r-sm) var(--r-sm);
  font-family:Display,sans-serif;font-weight:700;font-size:1.02rem;
  letter-spacing:.05em;text-transform:uppercase;text-align:center}
.dmap__badge b{color:var(--teal-deep);font-weight:700}
.dmap__slash{color:var(--coral);font-weight:800;display:inline-block;transform:skewX(-10deg)}
@media (min-width:56.0625rem){
  .dmap__board{grid-template-columns:1fr auto 1fr;column-gap:2.6rem;align-items:center}
  .dmap__q:nth-child(odd){grid-column:1}
  .dmap__q:nth-child(even){grid-column:3;flex-direction:row-reverse;text-align:right}
  .dmap__q:nth-child(1),.dmap__q:nth-child(2){grid-row:1}
  .dmap__q:nth-child(3),.dmap__q:nth-child(4){grid-row:2}
  .dmap__q:nth-child(5),.dmap__q:nth-child(6){grid-row:3}
  .dmap__q:nth-child(7),.dmap__q:nth-child(8){grid-row:4}
  .dmap__q:nth-child(9),.dmap__q:nth-child(10){grid-row:5}
  .dmap__hub{grid-column:2;grid-row:1/6;width:8.6rem;height:8.6rem;margin:0;order:0}
  .dmap__hub::before{inset:-1.1rem}
  /* connector stems + node dots reaching into the column gap toward the hub */
  .dmap__q::before,.dmap__q::after{content:'';position:absolute;top:50%}
  .dmap__q::before{width:2.6rem;height:1.5px;margin-top:-.75px;background:rgba(22,149,165,.38)}
  .dmap__q::after{width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--teal)}
  .dmap__q:nth-child(odd)::before{right:-2.6rem}
  .dmap__q:nth-child(odd)::after{right:-2.85rem}
  .dmap__q:nth-child(even)::before{left:-2.6rem}
  .dmap__q:nth-child(even)::after{left:-2.85rem}
}
/* entrance choreography, driven by the shared .reveal observer */
.dmap.reveal .dmap__q,.dmap.reveal .dmap__hub,.dmap.reveal .dmap__badge{opacity:0}
.dmap.reveal.is-in .dmap__q{animation:dmap-in .55s var(--ease) both;
  animation-delay:calc(.12s + var(--i)*.08s)}
.dmap.reveal.is-in .dmap__q:nth-child(even){animation-name:dmap-in-r}
.dmap.reveal.is-in .dmap__hub{animation:dmap-hub .6s var(--ease) both}
.dmap.reveal.is-in .dmap__badge{animation:dmap-up .55s var(--ease) both;animation-delay:1.18s}
.dmap.reveal.is-in .dmap__q::after{scale:0;animation:dmap-dot .3s var(--ease) forwards;
  animation-delay:calc(.4s + var(--i)*.08s)}
@keyframes dmap-in{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes dmap-in-r{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes dmap-hub{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}
@keyframes dmap-up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes dmap-dot{to{scale:1}}
@media (max-width:56rem){
  .dmap__q p{font-size:.88rem}
  .dmap.reveal.is-in .dmap__q:nth-child(even){animation-name:dmap-in}
}

/* Process path: the five-step implementation journey. site.js sets --p (0..1)
   from scroll position on [data-ppath]; the track fills, steps ignite in
   order, and the arrow chips pop as the fill passes them. Steps start dimmed
   and lift to full strength when lit. */
.ppath{--p:0}
.ppath__row{display:grid;grid-template-columns:repeat(5,1fr);gap:1.4rem;position:relative;
  margin:0;padding:0;list-style:none}
.ppath__row::before,.ppath__row::after{content:'';position:absolute;z-index:0;
  left:1.8rem;right:1.8rem;top:calc(1.8rem - 1px);height:2px}
.ppath__row::before{background:var(--line)}
.ppath__row::after{background:var(--teal);transform-origin:0 50%;transform:scaleX(var(--p))}
.ppath__step{position:relative;z-index:1;opacity:.45;transition:opacity .45s var(--ease)}
.ppath__step.is-lit{opacity:1}
.ppath__node{position:relative;display:block;width:3.6rem;height:3.6rem;margin-bottom:1rem}
.ppath__icon{display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:50%;
  background:var(--card);border:1.5px dashed rgba(15,107,117,.45);color:var(--ink);
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease)}
.ppath__icon svg{width:1.6rem;height:1.6rem}
.ppath__no{position:absolute;top:-.45rem;left:-.45rem;z-index:2;display:grid;place-items:center;
  width:1.5rem;height:1.5rem;border-radius:50%;background:var(--ink);color:#fff;
  font-family:Display,sans-serif;font-weight:700;font-size:.8rem;
  transition:background .4s var(--ease),transform .4s var(--ease)}
.ppath__step.is-lit .ppath__icon{background:var(--teal);border-style:solid;border-color:var(--teal);color:#fff}
.ppath__step.is-lit .ppath__no{background:var(--teal-deep);transform:scale(1.1)}
.ppath__step h3{margin:0 0 .5rem;font-family:Display,sans-serif;font-weight:700;
  font-size:1.05rem;line-height:1.16;letter-spacing:.03em;text-transform:uppercase;
  color:var(--teal-deep)}
.ppath__step p{margin:0;font-size:.88rem;line-height:1.5;color:var(--body)}
.ppath__next{position:absolute;z-index:1;top:1.8rem;right:-1.45rem;
  width:1.5rem;height:1.5rem;display:grid;place-items:center;border-radius:50%;
  background:var(--card);border:1px solid var(--line);color:var(--teal-deep);
  opacity:0;transform:translateY(-50%) scale(.4);
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.ppath__next svg{width:.8rem;height:.8rem}
.ppath__step.is-lit .ppath__next{opacity:1;transform:translateY(-50%) scale(1)}
.ppath__badge{display:flex;justify-content:center;align-items:baseline;gap:.65rem;
  width:fit-content;margin:2.2rem auto 0;padding:.85rem 1.5rem;
  background:var(--card);border:1px solid var(--line-soft);
  border-radius:var(--r-sm) var(--r-md) var(--r-sm) var(--r-sm);
  font-family:Display,sans-serif;font-weight:700;font-size:1.02rem;
  letter-spacing:.05em;text-transform:uppercase;text-align:center}
.ppath__badge b{color:var(--teal-deep);font-weight:700}
.ppath__badge .ppath__slash{color:var(--teal-deep);font-weight:800;display:inline-block;
  transform:skewX(-10deg)}
@media (max-width:56rem){
  .ppath__row{grid-template-columns:1fr;gap:1.9rem}
  .ppath__row::before,.ppath__row::after{display:none}
  /* per-step rail segments: each lights with its step */
  .ppath__step:not(:last-child)::before{content:'';position:absolute;z-index:0;
    left:calc(1.8rem - 1px);top:3.7rem;bottom:-1.9rem;width:2px;background:var(--line);
    transition:background .45s var(--ease)}
  .ppath__step.is-lit:not(:last-child)::before{background:var(--teal)}
  .ppath__step{display:grid;grid-template-columns:3.6rem 1fr;column-gap:1.1rem}
  .ppath__node{grid-row:1/3;margin:0}
  .ppath__step h3{align-self:center;margin:0}
  .ppath__step p{grid-column:2;margin-top:.45rem}
  .ppath__next{display:none}
}
.shot{position:relative;z-index:1;aspect-ratio:4/3;overflow:hidden;background:var(--paper-deep);
  border-radius:var(--r-md) var(--r-lg) var(--r-md) var(--r-md)}
.shot img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(1.06)}
.shot--color img{filter:none}
.shot__tint{display:none}
.shot__bars{display:none}
@media (max-width:56rem){
  .split{grid-template-columns:1fr}
  .split--flip .split__media{order:0}
}

/* --- cards ----------------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);display:flex;flex-direction:column;overflow:hidden;
  text-decoration:none;border-radius:var(--r-md);border:1px solid var(--line-soft)}
.card__art{aspect-ratio:16/9;position:relative;background:var(--ink)}
.card__art i{position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.4) 18%,transparent 19%);
  background-size:1rem 1rem;
  -webkit-mask-image:linear-gradient(120deg,#000 30%,transparent 85%);
  mask-image:linear-gradient(120deg,#000 30%,transparent 85%)}
.card__art--teal{background:var(--teal)}
.card__art--teal i{background-image:radial-gradient(rgba(255,255,255,.5) 18%,transparent 19%)}
.card__art--yellow{background:var(--teal-light)}
.card__art--yellow i{background-image:radial-gradient(rgba(23,26,26,.25) 18%,transparent 19%)}
.card__num{position:absolute;left:1.1rem;bottom:.75rem;font-family:Text,sans-serif;
  font-weight:600;font-size:.7rem;letter-spacing:.14em;color:#fff;z-index:1}
.card__art--yellow .card__num{color:var(--ink)}
.card__body{padding:1.2rem 1.25rem 1.5rem;background:var(--card);flex:1}
.card__body h3{font-size:1.22rem}
.card__body p{font-size:.9rem;margin-top:.5rem}
.card__body .link{margin-top:.9rem}
.card__kick{font-weight:600;color:var(--ink)}
.card__body .card__kick{font-size:.88rem;margin-top:.75rem;padding-left:1.1rem;position:relative}
.card__body .card__kick::before{content:'//';position:absolute;left:0;top:0;
  font-family:Display,sans-serif;font-weight:800;color:var(--coral);letter-spacing:-.08em}
.card--y .card__body,.card--t .card__body,.card--b .card__body{background:var(--card)}
@media (max-width:64rem){.cards--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:56rem){
  .cards,.cards--2,.cards--4{grid-template-columns:1fr}
}

/* --- hairline tile grid ---------------------------------------------------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden}
.tiles--2{grid-template-columns:repeat(2,1fr)}
.tiles--4{grid-template-columns:repeat(4,1fr)}
.tiles--2 > .tile:last-child:nth-child(odd){grid-column:1/-1}
.tile{background:var(--card);padding:1.5rem 1.35rem;min-height:8.5rem}
.tile__k{font-family:Text,sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-deep);display:block;margin-bottom:.75rem}
.tile h3{font-size:1.02rem;line-height:1.3;margin-bottom:.45rem}
.tile p{font-size:.88rem}
.tile .link{margin-top:.6rem}
.tile__ic{display:grid;place-items:center;width:2.4rem;height:2.4rem;margin-bottom:.8rem;
  border:1.5px solid var(--teal);border-radius:.75rem;color:var(--teal-deep)}
.tile__ic svg{width:1.25rem;height:1.25rem}
.section--beige .tile{background:var(--paper)}
.section--ink .tiles{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.16)}
.section--ink .tile{background:var(--ink)}
.section--ink .tile__k{color:var(--teal-light)}
.section--ink .tile__ic{border-color:var(--teal-light);color:var(--teal-light)}
.section--pale .tile{background:var(--card)}
@media (max-width:64rem){.tiles--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:48rem){
  .tiles,.tiles--2,.tiles--4{grid-template-columns:1fr}
}

/* Stand-out teal panel: the VIP custom AI Employee pitch under the roles.
   Brand teal ground, so the copy runs at WCAG large-text scale (bold ≥19px
   holds AA at 3:1 on this teal). */
.vipbox{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;
  background:var(--teal);color:#fff;margin-top:1.4rem;padding:1.9rem 2rem;
  border-radius:var(--r-md) var(--r-lg) var(--r-md) var(--r-md)}
.vipbox>div{flex:1 1 30rem}
.vipbox h3{margin:0 0 .55rem;color:#fff;font-size:1.5rem}
.vipbox p{margin:0;color:#fff;max-width:46rem;font-size:1.2rem;font-weight:600;line-height:1.5}
.vipbox strong{color:#fff}

/* Big-number stat bar: the integrations line under the ROI tiles. */
.statbar{display:flex;align-items:center;gap:1.6rem;margin-top:1.4rem;
  background:var(--card);border:1px solid var(--line-soft);padding:1.5rem 1.8rem;
  border-radius:var(--r-sm) var(--r-lg) var(--r-sm) var(--r-sm)}
.statbar b{font-family:Display,sans-serif;font-weight:800;line-height:1;
  font-size:clamp(2.2rem,4vw,3.1rem);color:var(--teal-deep);white-space:nowrap}
.statbar p{margin:0;max-width:46rem}
@media (max-width:48rem){.statbar{flex-direction:column;align-items:flex-start;gap:.8rem}}

/* Booking page: the GHL calendar exactly as the client's standalone embed
   frames it — bare on the page ground, no panel — with a hidden fallback
   the page script reveals only if the widget is blocked. */
.bookframe{position:relative;margin-top:2rem;min-height:46.75rem;overflow:hidden}
.bookframe iframe{width:100%;height:48.75rem;border:none;overflow:hidden;
  display:block;background:transparent;margin-top:-2rem}
.bookframe__fallback{display:none;position:absolute;inset:0;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:1.1rem}
.bookframe__fallback h2{margin:0;font-size:1.15rem;max-width:28rem}

/* Webinar confirmation (unlisted page): the event-details card beside the
   hero statement. White panel with the oversized corner; label/value rows
   divided by hairlines, in the same ledger language as the rest of the site. */
.evcard{background:var(--card);border:1px solid var(--line-soft);
  border-radius:var(--r-md) var(--r-lg) var(--r-md) var(--r-md);
  padding:1.8rem 1.7rem 1.5rem}
.evcard__title{font-family:Display,sans-serif;font-weight:700;
  font-size:clamp(1.2rem,1.8vw,1.4rem);line-height:1.16;letter-spacing:.012em;
  text-transform:uppercase;color:var(--ink);margin:0;text-wrap:balance}
.evcard__dl{margin:1.15rem 0 0}
.evcard__row{display:grid;grid-template-columns:4.6rem 1fr;gap:1.1rem;
  align-items:baseline;padding:.95rem 0;border-top:1px solid var(--line-soft)}
.evcard__row dt{font-family:Text,sans-serif;font-weight:600;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal-deep)}
.evcard__row dd{margin:0}
.evcard__row b{font-family:Display,sans-serif;font-weight:600;font-size:1.08rem;
  letter-spacing:.01em;color:var(--ink)}
.evcard__row dd>span{display:block;font-size:.84rem;color:var(--muted);margin-top:.2rem}
.evcard__row .tzrow{margin-top:.3rem}

/* Contact modal: CTA buttons open the GHL form in place of navigating.
   The panel scrolls internally; the backdrop and Escape both close it. */
.modal{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:1rem}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(23,26,26,.6)}
/* Panel matches the paper ground the GHL embeds render on, so form and
   panel read as one surface. */
.modal__panel{position:relative;width:min(47rem,100%);max-height:min(92vh,60rem);
  overflow-y:auto;background:var(--paper);padding:2rem clamp(1.25rem,3vw,2.25rem) 1.5rem;
  border-radius:var(--r-md) var(--r-lg) var(--r-md) var(--r-md);
  box-shadow:0 30px 80px -30px rgba(23,26,26,.55)}
.modal__close{position:absolute;top:.9rem;right:.9rem;width:2.4rem;height:2.4rem;
  display:grid;place-items:center;background:var(--card);border:1px solid var(--line-soft);
  border-radius:50%;cursor:pointer;font-size:1rem;line-height:1;color:var(--ink)}
.modal__close:hover{background:var(--paper-deep)}
.modal__title{margin:0 2.6rem .35rem 0;font-size:1.5rem}
.modal__lead{margin:0 0 1.1rem;color:var(--body)}
/* GHL's embed script rewrites the iframe's inline styles, so the floor
   lives here in CSS where it can't be clobbered. */
.modal__panel iframe{display:block;width:100%;min-height:34rem;border:none}
.modal .form__note{margin-top:.9rem}

/* Contact: the GHL form centered on the page, heading and note included.
   The embedded form's content is a fixed ~648px and it stacks to one column
   below that (measured by rendering the live widget at 600-800px frames), so
   the frame gets 680px: columns hold, with no dead margin inside the embed. */
.contact-center{max-width:42.5rem;margin-inline:auto;text-align:center}
.contact-center .ghl-form{text-align:left}

/* Program fine print: compact, muted, honest. */
.finelist{margin:1.2rem 0 0;padding-left:1.1rem;max-width:52rem}
.finelist li{margin-bottom:.55rem;font-size:.88rem;line-height:1.55;color:var(--muted)}

/* --- delivery model (framework section) ------------------------------------ */
.dm{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem}
.dm__card{position:relative;background:var(--paper);border:1px solid var(--line-soft);
  border-radius:var(--r-lg);padding:1.8rem 1.7rem 1.9rem}
.dm__card:not(:last-child)::after{content:'';position:absolute;top:46%;right:-2.4rem;
  width:2.4rem;height:2.5px;background:var(--teal)}
.dm__card:not(:last-child)::before{content:'';position:absolute;top:46%;right:-.6rem;
  width:.95rem;height:.95rem;border-radius:50%;background:var(--teal);
  border:3px solid var(--paper);box-shadow:0 0 0 2px var(--teal);
  transform:translate(50%,-50%);z-index:1}
.dm__num{font-family:Display,sans-serif;font-weight:800;font-size:1.7rem;line-height:1;
  color:var(--teal)}
.dm__card h3{font-weight:700;font-size:1.4rem;text-transform:uppercase;letter-spacing:.02em;
  margin-top:.4rem}
.dm__rule{width:2rem;height:2.5px;background:var(--teal);border:0;margin:.6rem 0 0}
.dm__body{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;
  margin-top:1.05rem}
.dm__list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.9rem;
  color:var(--body)}
.dm__list li{display:grid;grid-template-columns:.6rem 1fr;gap:.55rem;align-items:baseline}
.dm__list li::before{content:'';width:.42rem;height:.42rem;border-radius:50%;
  background:var(--teal);transform:translateY(-.08rem)}
.dm__ic{width:4.4rem;height:4.4rem;border:1.5px solid var(--ink);border-radius:50%;
  display:grid;place-items:center;color:var(--ink)}
.dm__ic svg{width:2.1rem;height:2.1rem}
.dm__card .link{margin-top:1.1rem}
.dm__rail{position:relative;height:3px;background:var(--teal);border-radius:2px;
  margin-top:clamp(2.2rem,4vw,3rem)}
.dm__rail::before{content:'';position:absolute;left:0;top:50%;width:.85rem;height:.85rem;
  border-radius:50%;border:2.5px solid var(--teal);background:var(--paper);
  transform:translate(-50%,-50%)}
.dm__rail::after{content:'';position:absolute;right:-2px;top:50%;
  transform:translateY(-50%);width:11px;height:14px;background:var(--teal);
  clip-path:polygon(0 0,100% 50%,0 100%)}
.dm__nodes{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr)}
.dm__nodes i{justify-self:center;align-self:center;width:.95rem;height:.95rem;
  border-radius:50%;background:var(--teal);border:3px solid var(--paper);
  box-shadow:0 0 0 2px var(--teal)}
.dm__labels{display:grid;grid-template-columns:repeat(3,1fr);margin-top:1rem;
  text-align:center;font-family:Text,sans-serif;font-weight:600;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.section--beige .dm__card{background:var(--paper)}
@media (max-width:56rem){
  .dm{grid-template-columns:1fr;gap:1.1rem}
  .dm__card:not(:last-child)::after,.dm__card:not(:last-child)::before{display:none}
  .dm__labels{font-size:.66rem;letter-spacing:.1em}
}

/* --- ledger (plus/minus tally) --------------------------------------------- */
.ledger__cap{font-family:Text,sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.65rem}
.ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ledger li{display:grid;grid-template-columns:1.7rem 1fr;gap:.9rem;align-items:center;
  padding:.8rem 0;border-bottom:1px solid var(--line);color:var(--body);font-size:.95rem}
.ledger i{font-family:Display,sans-serif;font-style:normal;font-weight:700;text-align:center;
  background:var(--paper-deep);color:var(--ink);padding:.2rem 0;border-radius:.45rem}
.ledger li.is-neg{color:var(--ink);font-weight:600}
.ledger li.is-neg i{background:var(--coral-pale);color:var(--coral-deep)}

/* --- paired questions ------------------------------------------------------ */
.asks{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.ask{background:var(--card);padding:1.7rem 1.6rem 1.9rem;border-radius:var(--r-md);
  border:1px solid var(--line-soft)}
.ask--hot{background:var(--ink);border-color:var(--ink);
  border-radius:var(--r-md) var(--r-lg) var(--r-md) var(--r-md)}
.ask__cap{font-family:Text,sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.ask--hot .ask__cap{color:var(--teal-light)}
.ask__q{font-family:Display,sans-serif;font-weight:600;font-size:clamp(1.15rem,1.7vw,1.4rem);
  line-height:1.34;color:var(--ink);margin-top:.7rem}
.ask--hot .ask__q{color:#fff}
@media (max-width:48rem){.asks{grid-template-columns:1fr}}

/* --- stat mosaic ------------------------------------------------------------ */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);
  border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line-soft)}
.mosaic .cell{padding:1.5rem 1.25rem;min-height:9rem;display:flex;
  flex-direction:column;justify-content:space-between;background:var(--card)}
.mosaic b{font-family:Display,sans-serif;font-weight:800;font-size:clamp(1.8rem,2.8vw,2.4rem);
  line-height:1;display:block;font-variant-numeric:tabular-nums;color:var(--ink)}
.mosaic span{font-size:.84rem;color:var(--body);margin-top:.7rem}
.cell--1{background:var(--teal-pale)}
.cell--2{background:var(--card)}
.cell--3{background:var(--teal-pale)}
.cell--4{background:var(--card)}
@media (max-width:56rem){.mosaic{grid-template-columns:repeat(2,1fr)}}

/* --- numbered steps --------------------------------------------------------- */
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:4.5rem 1fr 8rem;gap:1.25rem;
  align-items:start;padding:1.6rem 0;border-bottom:1px solid var(--line)}
.steps__n{font-family:Display,sans-serif;font-weight:800;font-size:1.35rem;line-height:1;
  color:var(--teal);padding-top:.1rem}
.steps h3{font-size:1.18rem}
.steps p{margin-top:.45rem;font-size:.92rem;max-width:46rem}
.steps__meta{font-family:Text,sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);text-align:right;padding-top:.45rem}
@media (max-width:56rem){
  .steps li{grid-template-columns:1fr;gap:.5rem}
  .steps__meta{text-align:left;padding-top:0}
}

/* --- checklist --------------------------------------------------------------- */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.checks li{display:grid;grid-template-columns:1.15rem 1fr;gap:.75rem;
  align-items:start;font-size:.94rem;color:var(--body)}
.checks li::before{content:'';width:1.15rem;height:1.15rem;background:var(--teal-deep);
  margin-top:.2rem;border-radius:.3rem;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.6l3.6 3.6L14 3.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8.6l3.6 3.6L14 3.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E") center/contain no-repeat}
.checks--2{grid-template-columns:repeat(2,1fr);gap:.75rem 2rem}
@media (max-width:48rem){.checks--2{grid-template-columns:1fr}}

/* --- pricing ----------------------------------------------------------------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.tiers--2{grid-template-columns:repeat(2,1fr)}
.tier{background:var(--card);padding:1.9rem 1.6rem 2rem;display:flex;flex-direction:column;
  border-radius:var(--r-md);border:1px solid var(--line-soft)}
.tier--featured{border:2px solid var(--teal);
  border-radius:var(--r-md) var(--r-lg) var(--r-md) var(--r-md)}
.tier__price{font-family:Display,sans-serif;font-weight:800;font-size:2rem;line-height:1;
  margin:.9rem 0 .2rem;font-variant-numeric:tabular-nums}
.tier__price small{font-family:Text,sans-serif;font-size:.82rem;font-weight:500;color:var(--muted)}
.tier .checks{margin-top:1.2rem;margin-bottom:1.6rem}
.tier .btn{margin-top:auto;align-self:flex-start}
@media (max-width:56rem){.tiers,.tiers--2{grid-template-columns:1fr}}

/* --- quotes ------------------------------------------------------------------- */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.quote{background:var(--card);padding:1.8rem 1.6rem;display:flex;flex-direction:column;gap:1rem;
  border-radius:var(--r-md);border:1px solid var(--line-soft)}
.quote blockquote{margin:0;font-family:Text,sans-serif;font-style:italic;font-weight:500;
  font-size:1.02rem;line-height:1.55;color:var(--ink)}
.quote figcaption{font-family:Text,sans-serif;font-weight:600;font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:auto}
.quote__mark{width:1.5rem;height:1.5rem;border-radius:.45rem;background:var(--teal)}
.quote:nth-child(2) .quote__mark{background:var(--teal-light)}
.quote:nth-child(3) .quote__mark{background:var(--ink)}
.quote:nth-child(4) .quote__mark{background:var(--coral)}
@media (max-width:56rem){.quotes{grid-template-columns:1fr}}

/* --- people -------------------------------------------------------------------- */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
/* Founder portrait: square crop of the supplied collage art, cream multiplied
   into the page. */
.person__photo{aspect-ratio:1;overflow:hidden;background:var(--paper);
  border-radius:var(--r-md) var(--r-lg) var(--r-md) var(--r-md)}
.person__photo img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.person__art{aspect-ratio:1;position:relative;background:var(--paper-deep);overflow:hidden;
  border-radius:var(--r-md) var(--r-lg) var(--r-md) var(--r-md)}
.person__art i{position:absolute;inset:auto 0 0 0;height:62%;background:var(--teal);
  border-radius:100vw 100vw 0 0;margin-inline:14%}
.person__art b{position:absolute;inset:auto auto 0 0;font-family:Display,sans-serif;
  font-weight:800;font-size:3.4rem;line-height:1;padding:0 0 .5rem .9rem;color:var(--ink);z-index:1}
.person:nth-child(2) .person__art i{background:var(--teal-light)}
.person:nth-child(3) .person__art i{background:var(--ink)}
.person h3{margin-top:1rem;font-size:1.2rem}
.person__role{font-family:Text,sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-deep);margin-top:.35rem}
.person p{font-size:.9rem;margin-top:.7rem}
@media (max-width:56rem){.people{grid-template-columns:1fr}}

/* --- accordion ------------------------------------------------------------------ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.15rem 0;cursor:pointer;list-style:none;
  font-family:Display,sans-serif;font-weight:600;font-size:1.05rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:none;width:.72rem;height:.72rem;
  border-right:1.6px solid var(--teal-deep);border-bottom:1.6px solid var(--teal-deep);
  transform:rotate(45deg) translateY(-3px);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(2px)}
.faq p{padding-bottom:1.25rem;max-width:52rem;font-size:.94rem}
.faq__group{font-family:Text,sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-deep);margin:2.2rem 0 .4rem}
.faq__group:first-child{margin-top:0}

/* --- strip ----------------------------------------------------------------------- */
.strip{display:flex;flex-wrap:wrap;gap:.5rem}
.strip span{font-family:Text,sans-serif;font-weight:500;font-size:.78rem;letter-spacing:.02em;
  padding:.48rem .85rem;background:var(--card);border:1px solid var(--line);
  border-radius:100vw;color:var(--body)}

/* --- CTA band --------------------------------------------------------------------- */
.cta{position:relative;overflow:hidden;background:var(--ink);
  padding-block:clamp(3.25rem,6vw,5rem);text-align:center}
.cta__inner{position:relative;z-index:1;max-width:40rem;margin-inline:auto}
.cta .chip{color:#fff}
.cta .chip::before{color:var(--teal-light)}
.cta h2{margin-top:.95rem;color:#fff}
.cta p{margin:1.05rem auto 0;max-width:32rem;color:rgba(255,255,255,.74)}
.cta .btn-row{justify-content:center}
.cta__bars{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(65,195,200,.35) 18%,transparent 19%);
  background-size:1.05rem 1.05rem;
  -webkit-mask-image:linear-gradient(0deg,#000,transparent 72%);
  mask-image:linear-gradient(0deg,#000,transparent 72%)}
.cta__bars i{display:none}

/* --- form -------------------------------------------------------------------------- */
.form{display:grid;gap:1rem}
.field{display:grid;gap:.4rem}
.field label{font-family:Text,sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.field input,.field textarea,.field select{
  font:inherit;font-size:.94rem;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:.8rem .9rem;width:100%}
.field textarea{min-height:7.5rem;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--teal-deep);
  outline-offset:-1px;border-color:transparent}
.form__note{font-size:.84rem;color:var(--muted)}
.form__ok{display:none;background:var(--teal-pale);padding:.9rem 1rem;font-size:.9rem;
  border-radius:var(--r-sm)}
.form__ok[data-shown]{display:block}

/* --- footer -------------------------------------------------------------------------- */
.footer{background:var(--ink);color:#fff;padding-block:clamp(3rem,5vw,4.25rem)}
.footer a{color:rgba(255,255,255,.72);text-decoration:none}
.footer a:hover{color:#fff}
.footer__top{display:grid;grid-template-columns:1.5fr repeat(4,1fr);
  gap:clamp(1.5rem,3vw,2.5rem)}
.footer__brand p{color:rgba(255,255,255,.62);font-size:.88rem;margin-top:1rem;max-width:22rem}
.footer__hd{margin:0;font-family:Text,sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-light);margin-bottom:.9rem}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.88rem}
.footer__bottom{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;justify-content:space-between;
  align-items:center;margin-top:clamp(2.25rem,4vw,3rem);padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.16);font-size:.82rem;color:rgba(255,255,255,.55)}
.footer__bottom nav{display:flex;flex-wrap:wrap;gap:1.25rem}
@media (max-width:64rem){.footer__top{grid-template-columns:repeat(2,1fr)}}
@media (max-width:40rem){.footer__top{grid-template-columns:1fr}}

/* --- figures (brand diagrams) ----------------------------------------------------------- */
.fig{margin:0;border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden;
  background:var(--card)}
.fig img{width:100%;height:auto}
.fig--wide{border-radius:var(--r-md) var(--r-lg) var(--r-md) var(--r-md)}

/* --- legal ---------------------------------------------------------------------------- */
.legal h2{font-size:1.2rem;letter-spacing:.03em}
.legal--doc p{margin-top:.85rem;color:var(--body)}
.legal--doc h3{margin:1.5rem 0 0;font-size:1rem;letter-spacing:.02em}
.legal--doc ul,.legal--doc ol{margin:.7rem 0 0;padding-left:1.35rem}
.legal--doc li{margin-top:.45rem;color:var(--body)}
.legal--doc table{width:100%;border-collapse:collapse;margin-top:.9rem}
.legal--doc th,.legal--doc td{border:1px solid var(--line-soft);padding:.6rem .75rem;
  text-align:left;vertical-align:top;color:var(--body);font-size:.92rem}
.legal--doc th{color:var(--ink);font-weight:600}
.legal--doc td:first-child{white-space:nowrap;font-weight:600;color:var(--ink)}

/* --- utilities ------------------------------------------------------------------------ */
.stack{display:grid;gap:1rem}
.mt-1{margin-top:.9rem}
.mt-2{margin-top:1.6rem}
.mt-3{margin-top:2.4rem}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==========================================================================
   The AI Employee webinar landing (ai-employee-webinar.html — unlisted).
   Landing-only components, all drawn from the tokens above.
   ========================================================================== */

/* Hero note rides beside the CTA instead of under the lead. */
.btn-row .hero__note{margin:0;align-self:center}

/* Facts-tile values: heading-styled readouts that stay out of the document
   outline — the hero's h1 is followed by section h2s, not these. */
.tile__val{font-family:Display,sans-serif;font-weight:600;font-size:1.02rem;
  line-height:1.3;letter-spacing:.01em;color:var(--ink);margin:0 0 .45rem}

/* Industry band: the deployed-across strip, centered on ink. */
.strip--center{justify-content:center}
.section--ink .center .ledger__cap{color:var(--teal-light)}

/* --- chaos -> clarity journey ---------------------------------------------
   Base layout is three static poster cards so the story reads at any width
   with no JavaScript; webinar.js upgrades wide screens to a pinned,
   scroll-scrubbed film by adding .jny--film once it has built the stage. */
.jny{position:relative;background:var(--ink);color:#fff;--jp:0}
.jny__stage{display:none}
.jny__chapter{position:relative;isolation:isolate;display:flex;align-items:center;
  min-height:62vh;background-image:var(--poster);background-size:cover;
  background-position:var(--pos,50% 50%);background-repeat:no-repeat;
  border-bottom:1px solid rgba(255,255,255,.08)}
.jny__chapter::before{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.38) 38%,rgba(0,0,0,.85) 100%)}
.jny__pin{position:relative;z-index:1;width:100%}
.jny__copy{max-width:var(--wrap);margin-inline:auto;
  padding:clamp(3.5rem,7vw,5rem) var(--gutter)}
.jny__copy .chip{color:#fff}
.jny__copy .chip::before{color:var(--teal-light)}
.jny__copy h2{margin-top:.9rem;color:#fff;font-size:clamp(1.75rem,4vw,3rem);
  text-shadow:0 2px 40px rgba(0,0,0,.6)}
.jny__copy p{margin-top:1.05rem;max-width:32rem;font-size:clamp(.98rem,1.25vw,1.12rem);
  line-height:1.65;color:rgba(255,255,255,.88);text-shadow:0 2px 24px rgba(0,0,0,.7)}
@media (min-width:56.0625rem){
  .jny--film .jny__stage{display:block;position:sticky;top:0;height:100vh;height:100dvh;
    overflow:hidden}
  .jny__media{position:absolute;inset:0}
  .jny__layer{position:absolute;inset:0;margin:0;opacity:0;will-change:opacity}
  .jny__layer img,.jny__layer video{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:var(--pos,50% 50%)}
  .jny__layer video{opacity:0;transition:opacity .45s var(--ease)}
  .jny__layer[data-painted] video{opacity:1}
  .jny__scrim{position:absolute;inset:0;pointer-events:none;background:
    linear-gradient(to right,rgba(0,0,0,.86) 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,.12) 72%,transparent 100%),
    linear-gradient(to bottom,rgba(0,0,0,.55) 0%,transparent 26%,transparent 62%,rgba(0,0,0,.8) 100%)}
  .jny[data-align='right'] .jny__scrim{background:
    linear-gradient(to left,rgba(0,0,0,.86) 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,.12) 72%,transparent 100%),
    linear-gradient(to bottom,rgba(0,0,0,.55) 0%,transparent 26%,transparent 62%,rgba(0,0,0,.8) 100%)}
  .jny__progress{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:6;
    background:rgba(255,255,255,.09)}
  .jny__progress span{display:block;height:100%;width:calc(var(--jp,0)*100%);
    background:var(--teal-light)}
  .jny__route{position:absolute;z-index:6;left:50%;transform:translateX(-50%);bottom:1.6rem;
    display:flex;gap:.55rem}
  .jny__route button{font-family:Text,sans-serif;font-weight:600;font-size:.66rem;
    letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.78);
    background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.16);border-radius:100vw;
    padding:.55rem 1rem;cursor:pointer;
    transition:color .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease)}
  .jny__route button:hover{color:#fff;border-color:var(--teal-light)}
  .jny__route button[aria-current='step']{color:#fff;background:var(--teal-deep);
    border-color:var(--teal-deep)}
  /* The story rides above the stage but must not eat its clicks: pointer
     events off for the whole overlay (it inherits down), back on for the
     copy, so the route buttons under the transparent bands stay clickable. */
  .jny--film .jny__story{position:relative;z-index:5;margin-top:-100vh;margin-top:-100dvh;
    pointer-events:none}
  /* Each chapter's height is its scroll budget (set by webinar.js as --band);
     the copy pins inside it while the stage behind scrubs the clip. */
  .jny--film .jny__chapter{background:none;border-bottom:0;min-height:var(--band,150vh)}
  .jny--film .jny__chapter::before{display:none}
  .jny--film .jny__pin{position:sticky;top:0;height:100vh;height:100dvh;display:flex;
    align-items:center}
  .jny--film .jny__copy{position:relative;max-width:33rem;margin:0;padding:0 var(--gutter);
    margin-left:max(var(--gutter),calc(50vw - var(--wrap)/2 + var(--gutter)));
    pointer-events:auto}
  .jny--film .jny__copy::before{content:'';position:absolute;inset:-14% -24% -18% -24%;
    z-index:-1;pointer-events:none;
    background:radial-gradient(70% 60% at 50% 50%,rgba(0,0,0,.82) 0%,rgba(0,0,0,.6) 45%,transparent 78%)}
  .jny--film .jny__chapter[data-align='right'] .jny__copy{margin-left:auto;
    margin-right:max(var(--gutter),calc(50vw - var(--wrap)/2 + var(--gutter)));text-align:right}
}

/* --- bonus cards ----------------------------------------------------------
   Real artwork on the paper ground inside the card art slot, with the unlock
   condition pinned over it and the contents as a checklist. */
.bonus .card__art{background:var(--paper)}
.bonus .card__art img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:.7rem}
.bonus__tag{position:absolute;top:.85rem;left:.85rem;z-index:1;display:inline-flex;
  align-items:center;gap:.5rem;font-family:Text,sans-serif;font-weight:600;font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--ink);
  padding:.45rem .8rem;border-radius:var(--r-sm)}
.bonus__tag b{font-family:Display,sans-serif;font-weight:800;font-size:.8rem;
  color:var(--teal-light)}
.bonus__worth{font-family:Display,sans-serif;font-weight:800;font-size:.85rem;
  letter-spacing:.03em;color:var(--teal-deep);margin-top:.3rem}
.bonus .card__body p+p{margin-top:.6rem}
.bonus .card__body .checks{margin-top:1rem}
.bonus .card__body .checks li{font-size:.88rem}
.bonus__lock{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;
  font-size:.82rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:.55rem .85rem}

/* Host credential lists under the founder cards. */
.person__list{list-style:none;margin:.7rem 0 0;padding:0;display:grid;gap:.45rem}
.person__list li{position:relative;padding-left:1.05rem;font-size:.88rem;line-height:1.5;
  color:var(--body)}
.person__list li::before{content:'';position:absolute;left:0;top:.55em;width:.4rem;
  height:.4rem;border-radius:50%;background:var(--teal)}

/* Testimonial headline: the pull-quote above the full quote. */
.quote h3{font-size:1.05rem;line-height:1.4}

/* Session time across the US timezones. The home zones (AZ/PT) lead the row
   and carry the accent; the rest read as quiet reference. webinar.js
   recomputes the times from SN_SESSIONS whenever the schedule rolls. */
.tzrow{display:flex;flex-wrap:wrap;gap:.25rem .85rem;margin:.55rem 0 0;padding:0;
  list-style:none;font-size:.78rem;line-height:1.5;color:var(--muted);
  font-variant-numeric:tabular-nums}
.tzrow b{font-family:Text,sans-serif;font-weight:600;color:var(--teal-deep)}
.tzrow .is-home{color:var(--ink);font-weight:600}
.tzrow--modal{margin:-.7rem 0 1.1rem}

/* Register band: checklist + session lines inside the closing CTA. */
.cta .checks{width:fit-content;margin:1.6rem auto 0;text-align:left}
.cta .checks li{color:rgba(255,255,255,.78)}
.cta .checks li::before{background:var(--teal-light)}
.cta__fine{margin-top:1.5rem;font-size:.82rem;color:rgba(255,255,255,.55)}
.cta .tzrow{justify-content:center;margin-top:.4rem;color:rgba(255,255,255,.55)}
.cta .tzrow b{color:var(--teal-light)}
.cta .tzrow .is-home{color:#fff}
.cta .tzrow + .cta__fine{margin-top:.8rem}

/* Sticky mobile dock: the register CTA follows the visitor on small screens. */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;align-items:center;
  justify-content:space-between;gap:.9rem;padding:.75rem var(--gutter);
  background:var(--ink);color:#fff;border-top:1px solid rgba(255,255,255,.16)}
.dock__txt{min-width:0}
.dock__txt b{display:block;font-family:Display,sans-serif;font-weight:700;font-size:.85rem;
  letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock__txt small{display:block;font-size:.7rem;color:rgba(255,255,255,.55);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock .btn{flex:none}
@media (max-width:56rem){
  .dock{display:flex}
  body:has(.dock){padding-bottom:4.4rem}
}

/* --- motion ---------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d='1']{transition-delay:.08s}
.reveal[data-d='2']{transition-delay:.16s}
.reveal[data-d='3']{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .blk{animation:none;opacity:.2}
  .heromark,.heromark .logo b,.heromark__tag{animation:none!important;opacity:1;transform:none}
  .heromark .logo__slash{animation:none!important;transform:skewX(-15deg)}
}

@media print{
  .nav,.cta,.footer,.annc,.dock{display:none}
  body{color:#000;background:#fff}
}

/* --- self-serve vs SN3 comparison (AI Employees) -------------------------- */
.tblwrap{overflow-x:auto;margin-top:1.6rem}
.compare{width:100%;border-collapse:collapse;min-width:34rem}
.compare th,.compare td{padding:.8rem 1rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line-soft);font-size:.95rem;color:var(--body)}
.compare thead th{font-size:.78rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);border-bottom:2px solid var(--ink)}
.compare th:last-child,.compare td:last-child{background:rgba(22,149,165,.08)}
.compare td:last-child{color:var(--ink);font-weight:500}
.bestfor{display:block;margin-top:.55rem;font-size:.85rem;color:var(--body)}

/* --- reactive gradient ground ---------------------------------------------
   Mirrors the atmosphere layer on portal.sn3group.ai: cream linear base with
   teal-light, coral, and teal radial washes that drift on a slow loop. The
   three washes are separate fields so site.js can lean them a few pixels
   toward the pointer, scroll position, or device tilt (--bx/--by). Drift uses
   the individual translate/scale properties; the lean uses transform, so the
   two never fight. Sits behind the page via a negative z-index — body keeps
   its flat paper as the no-CSS/print fallback. */
.bgfx{position:fixed;inset:-8%;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(120% 90% at 12% 0%,rgba(65,195,200,.14) 0%,transparent 55%),
    radial-gradient(90% 70% at 92% 12%,rgba(216,92,74,.08) 0%,transparent 60%),
    radial-gradient(120% 100% at 50% 110%,rgba(22,149,165,.07) 0%,transparent 60%),
    linear-gradient(178deg,#F7F4EE 0%,#EEE8DC 100%);
  scale:1.04;animation:bgfx-drift 44s ease-in-out infinite alternate}
.bgfx i{position:absolute;display:block;border-radius:50%;filter:blur(64px);
  will-change:transform;transform:translate3d(calc(var(--bx,0)*var(--k,1)*1px),calc(var(--by,0)*var(--k,1)*1px),0)}
.bgfx__a{--k:1;width:70vmax;height:52vmax;left:-18vmax;top:-22vmax;
  background:radial-gradient(closest-side,rgba(65,195,200,.34),transparent);
  animation:bgfx-a 38s ease-in-out infinite alternate}
.bgfx__b{--k:.6;width:56vmax;height:44vmax;right:-20vmax;top:-16vmax;
  background:radial-gradient(closest-side,rgba(216,92,74,.17),transparent);
  animation:bgfx-b 52s ease-in-out infinite alternate}
.bgfx__c{--k:-.45;width:90vmax;height:54vmax;left:50%;bottom:-32vmax;margin-left:-45vmax;
  background:radial-gradient(closest-side,rgba(22,149,165,.18),transparent);
  animation:bgfx-c 60s ease-in-out infinite alternate}
@keyframes bgfx-drift{to{scale:1.09;translate:-1.5% -1%}}
@keyframes bgfx-a{to{translate:6vmax 5vmax}}
@keyframes bgfx-b{to{translate:-7vmax 6vmax}}
@keyframes bgfx-c{to{translate:5vmax -4vmax}}
@media (max-width:48rem){.bgfx i{filter:blur(44px)}}
@media (prefers-reduced-motion:reduce){.bgfx,.bgfx i{animation:none}}
/* Alternating surfaces go translucent so the ground reads through them. */
.section--beige{background:rgba(255,255,255,.55)}
.section--pale{background:rgba(22,149,165,.07)}