/* ============================================================
   zeirowork — day-to-night marketing system
   Extends the Zeiro editorial language (Aspekta + Roboto Mono,
   mono micro-labels, numbered sections) with a scroll-driven
   sky, glass surfaces, and the two-oval glass mark.
   Loaded AFTER zeiro.css.
   ============================================================ */

:root {
  /* glass surfaces */
  --glass-light:      rgba(247, 244, 237, 0.66);
  --glass-light-2:    rgba(247, 244, 237, 0.82);
  --glass-light-line: rgba(20, 24, 31, 0.10);
  --glass-dark:       rgba(13, 17, 26, 0.52);
  --glass-dark-2:     rgba(9, 12, 20, 0.74);
  --glass-dark-line:  rgba(216, 226, 245, 0.14);

  /* cool ink for night */
  --night:    #070A12;
  --night-2:  #0C111C;

  /* day text on glass */
  --on-glass:        #16191F;
  --on-glass-muted:  #585A57;
  --on-glass-faint:  #8A8B82;

  --blur: saturate(1.3) blur(16px);
}

/* the new pages run dark-first chrome over the sky */
html.zw, html.zw body { background: var(--night); }
body.zw-body { color: var(--on-ink); }
html { scroll-padding-top: 84px; }
section[id], [id].promoband { scroll-margin-top: 84px; }

/* ============================================================
   SKY  — fixed backdrop, gradient + sun/moon driven by scroll JS
   ============================================================ */
/* ============================================================
   BACKDROP  +  animated gradient headers (design-theme colours)
   ============================================================ */
.sky, .sky--dawn, .sky--midday, .sky--dusk, .sky--night {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% -8%, #18203a 0%, #0c1120 48%, #070a12 100%);
}
/* retired day/night ornaments */
.sky__sun, .sky__stars, .sky__haze, .sky--moon, .zclock, .hourstamp { display: none !important; }
.zw-shell { position: relative; z-index: 1; }

/* animated aurora gradient — applied to every page header */
.zhero, .psub { position: relative; overflow: hidden; isolation: isolate; background: var(--bone); }
.zhero > *, .psub > *:not(.aurora) { position: relative; z-index: 2; }
.zhero > .aurora { z-index: 0; }
.zhero > .zhero__bg { z-index: 1; }
.zhero > .zhero__veil { z-index: 1; }
.aurora {
  position: absolute; inset: -28%; z-index: 0; pointer-events: none; will-change: transform;
  background:
    radial-gradient(46% 56% at 18% 24%, rgba(142,157,188,.62), transparent 70%),   /* periwinkle */
    radial-gradient(50% 58% at 84% 20%, rgba(200,207,221,.82), transparent 72%),    /* iceblue */
    radial-gradient(54% 62% at 76% 88%, rgba(187,169,146,.52), transparent 70%),    /* putty */
    radial-gradient(64% 74% at 22% 86%, rgba(226,228,234,.88), transparent 72%),    /* platinum */
    radial-gradient(26% 30% at 92% 82%, rgba(184,91,64,.16), transparent 62%);      /* ember, rare */
  animation: aurora 24s ease-in-out infinite alternate;
}
.aurora::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: multiply; opacity: .45;
  background:
    radial-gradient(42% 50% at 64% 16%, rgba(142,157,188,.4), transparent 66%),
    radial-gradient(46% 54% at 30% 92%, rgba(187,169,146,.38), transparent 68%);
  animation: auroraspin 40s linear infinite;
}
@keyframes aurora {
  0%   { transform: translate3d(-3%,-2%,0) scale(1.05) rotate(0deg); }
  50%  { transform: translate3d(3%,2%,0)  scale(1.16) rotate(7deg); }
  100% { transform: translate3d(-2%,4%,0) scale(1.08) rotate(-6deg); }
}
@keyframes auroraspin { to { transform: rotate(360deg); } }

/* hero ambient video backdrop — very faint over the bone aurora */
.zhero__bg { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: transparent; }
.zhero__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.1s ease; }
.zhero__vid.is-on { opacity: var(--hero-vid-opacity, .1); }
.zhero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(244,241,233,.5) 0%, rgba(244,241,233,0) 22%),
    radial-gradient(60% 50% at 50% 92%, rgba(142,157,188,.12), transparent 74%); }
@media (prefers-reduced-motion: reduce) { .zhero__vid { transition: none; } }
@media (prefers-reduced-motion: reduce) { .zhero::before, .zhero::after, .psub::before, .psub::after { animation: none; } }

/* ============================================================
   NAV  (logo mark + wordmark, reveal on scroll on Home)
   ============================================================ */
.znav {
  position: fixed; inset: 0 0 auto 0; height: 64px; z-index: 100;
  display: flex; align-items: center;
  transition: background .35s var(--ease), border-color .35s, backdrop-filter .35s;
  border-bottom: 1px solid transparent;
}
.znav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; }
.znav__brand { display: flex; align-items: center; gap: 10px; }
.znav__brand img { width: 30px; height: auto; filter: drop-shadow(0 1px 4px rgba(0,0,0,.25)); }
.znav__brand .wm { font-size: 19px; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); }
.znav__links { display: flex; align-items: center; gap: 26px; margin: 0; }
.znav__links a { font-size: 14px; font-weight: 500; color: var(--slate); transition: color .2s; position: relative; white-space: nowrap; }
.znav__links a:hover { color: var(--ink); }
.znav__right { display: flex; align-items: center; gap: 16px; }
.znav__ar { font-family: var(--mono); font-size: 12px; color: rgba(58,68,92,.55); cursor: not-allowed; }
.znav__cta {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--signal-ink); background: var(--signal); padding: 9px 15px; border-radius: 3px;
  white-space: nowrap; transition: transform .2s, background .2s;
}
.znav__cta:hover { background: var(--signal-deep); transform: translateY(-1px); }
.znav[data-scrolled="true"] { background: color-mix(in srgb, var(--night) 72%, transparent); backdrop-filter: blur(16px); border-color: var(--glass-dark-line); }
/* scrolled = over dark content → flip nav text light */
.znav[data-scrolled="true"] .znav__links a { color: rgba(245,243,236,.74); }
.znav[data-scrolled="true"] .znav__links a:hover { color: #fff; }
.znav[data-scrolled="true"] .znav__brand .wm { color: var(--on-ink); }
.znav[data-scrolled="true"] .znav__ar { color: rgba(245,243,236,.4); }
.znav[data-scrolled="true"] .znav__burger { color: #fff; border-color: var(--glass-dark-line); background: rgba(255,255,255,.04); }

/* brand hidden until scroll on the homepage */
.znav--home .znav__brand { opacity: 0; transform: translateY(-4px); transition: opacity .4s, transform .4s; pointer-events: none; }
.znav--home[data-scrolled="true"] .znav__brand { opacity: 1; transform: none; pointer-events: auto; }

@media (max-width: 980px){ .znav__links, .znav__ar { display: none; } }

/* nav dropdown menus (Platform / Solutions) */
.znav__item { position: relative; }
.znav__menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 320px; padding: 10px; border-radius: 14px; opacity: 0; visibility: hidden; transition: all .22s var(--ease);
  background: color-mix(in srgb, var(--night) 86%, transparent); backdrop-filter: blur(18px);
  border: 1px solid var(--glass-dark-line); box-shadow: 0 30px 70px -24px rgba(0,0,0,.7); }
.znav__item:hover .znav__menu, .znav__item:focus-within .znav__menu { opacity: 1; visibility: visible; transform: translateX(-50%); }
.znav__menu.wide { min-width: 560px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.znav__mi { display: block; padding: 11px 13px; border-radius: 9px; transition: background .16s; }
.znav__mi:hover { background: rgba(255,255,255,.05); }
.znav__mi .mt { display: block; font-size: 14.5px; font-weight: 500; color: #fff; }
.znav__mi .md { display: block; font-size: 12.5px; color: var(--on-ink-muted); margin-top: 2px; }
.znav__mcol { padding: 8px; }
.znav__mlabel { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-ink-faint); padding: 6px 13px; }

/* mobile menu button + drawer */
.znav__burger { display: none; width: 38px; height: 38px; border: 1px solid rgba(14,18,27,.14); border-radius: 8px;
  background: rgba(14,18,27,.05); color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }
.zdrawer { position: fixed; inset: 64px 0 0 0; z-index: 99; background: color-mix(in srgb, var(--night) 96%, transparent);
  backdrop-filter: blur(20px); padding: 24px var(--gutter); display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.zdrawer a { font-size: 1.3rem; font-weight: 500; color: #fff; padding: 14px 0; border-bottom: 1px solid var(--glass-dark-line); }
.zdrawer[hidden] { display: none; }
.zdrawer .zdrawer__sub a { font-size: 1rem; color: var(--on-ink-muted); padding: 10px 0; border: 0; }
@media (max-width: 980px){ .znav__burger { display: inline-flex; } }
@media (min-width: 981px){ .zdrawer { display: none; } }

/* ============================================================
   SCROLL CLOCK CHIP
   ============================================================ */
.zclock {
  position: fixed; right: clamp(14px, 3vw, 34px); top: 50%; transform: translateY(-50%);
  z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 13px 12px; border-radius: 100px; pointer-events: none;
  background: rgba(10,14,22,.34); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(10px);
}
.zclock__icon { font-size: 16px; line-height: 1; }
.zclock__t { font-family: var(--mono); font-size: 14px; font-weight: 500; color: #fff; letter-spacing: .02em; }
.zclock__l { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; color: rgba(255,255,255,.6); }
@media (max-width: 720px){ .zclock { display: none; } }

/* ============================================================
   GLASS SECTIONS & PANELS
   ============================================================ */
.gsec { position: relative; padding-block: clamp(64px, 10vw, 132px); }
.gsec--tight { padding-block: clamp(44px, 6vw, 80px); }
/* atmospheric (sky shows through) */
.gsec--air { padding-block: clamp(80px, 14vw, 200px); }

.glass {
  border-radius: 16px; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-light-line);
}
.glass--light { background: var(--glass-light); border-color: var(--glass-light-line); color: var(--on-glass); }
.glass--dark  { background: var(--glass-dark);  border-color: var(--glass-dark-line);  color: var(--on-ink); }

/* a section-wide glass slab */
.slab-light { background: var(--glass-light-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-block: 1px solid var(--glass-light-line); color: var(--on-glass); }
.slab-dark  { background: var(--glass-dark-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-block: 1px solid var(--glass-dark-line); color: var(--on-ink); }
.slab-light .lead { color: var(--on-glass-muted); }
.slab-light .kicker--muted, .slab-light .eyebrow { color: var(--on-glass-muted); }
.slab-dark .lead { color: var(--on-ink-muted); }

/* section header block */
.shead { max-width: 62ch; }
.shead .eyebrow, .shead .kicker { margin-bottom: 18px; }
.ghead { font-size: clamp(2rem, 4.6vw, 3.7rem); letter-spacing: -0.035em; line-height: 1.0; }
.ghead em, .accent { font-style: normal; color: var(--signal-deep); font-family: var(--cursive, var(--display)); }
.slab-dark .ghead em, .slab-dark .accent, .on-ink .ghead em { color: var(--signal); }
.cursive { font-family: var(--cursive, var(--display)); font-style: normal; }

/* ============================================================
   HERO  (full-viewport glass wordmark scene)
   ============================================================ */
.zhero { position: relative; min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 96px 20px 60px; }
.zhero__mark { width: min(60vw, 540px); height: auto; filter: drop-shadow(0 20px 60px rgba(70,84,120,.28));
  animation: float 9s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(0deg) scaleX(-1); } 50% { transform: translateY(-14px) rotate(-1.2deg) scaleX(-1); } }
/* ring mark mirrored: lower on the left, higher on the right */
img[src$="zeiro-rings-glass.png"] { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce){ .zhero__mark { animation: none; } }
.zhero__wm { font-size: clamp(2.2rem, 8vw, 6.6rem); font-weight: 500; letter-spacing: -0.045em; line-height: .9;
  color: var(--ink); margin-top: -1vh; }
.zhero__tag { margin-top: 26px; font-family: var(--mono); font-size: clamp(11px, 1.4vw, 14px);
  letter-spacing: .28em; text-transform: uppercase; color: var(--slate); }
.zhero__hint { margin-top: 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--slate); opacity: .8; display: inline-flex; gap: 8px; align-items: center; }
.zhero__hint .ar { animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ============================================================
   OPENING + DEMO STAGE
   ============================================================ */
.opener { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 940px){ .opener { grid-template-columns: 1fr; } }
.demo { border-radius: 14px; overflow: hidden; border: 1px solid var(--glass-dark-line);
  background: #0A0D15; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
.demo__tabs { display: flex; gap: 2px; padding: 8px; border-bottom: 1px solid var(--glass-dark-line); background: rgba(255,255,255,.02); }
.demo__tab { flex: 1; font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  padding: 10px; border-radius: 7px; color: var(--on-ink-muted); cursor: pointer; border: 0; background: transparent; transition: all .2s; }
.demo__tab[aria-selected="true"] { background: rgba(255,255,255,.06); color: #fff; }
.demo__tab .pip { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 7px; opacity: .5; }
.demo__tab[aria-selected="true"] .pip { background: var(--signal); opacity: 1; }
.demo__stage { position: relative; aspect-ratio: 16/10; }
.demo__panel { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); display: flex; }
.demo__panel.on { opacity: 1; }
.demo__ph { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(120% 80% at 50% 0%, rgba(200,242,90,.06), transparent 60%); }
.demo__ph .pn { font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--signal); }
.demo__ph .pt { font-size: 1.4rem; letter-spacing: -.02em; color: #fff; }
.demo__ph .ps { font-family: var(--mono); font-size: 11px; color: var(--on-ink-faint); letter-spacing: .04em; }

/* ============================================================
   CARD GRIDS  (deployment, use-cases, voice points, etc.)
   ============================================================ */
.cards { display: grid; gap: 16px; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 920px){ .cards--3, .cards--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .cards--2, .cards--3, .cards--4 { grid-template-columns: 1fr; } }
.gcard { border-radius: 13px; padding: clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--glass-light-line); background: rgba(255,255,255,.5); backdrop-filter: var(--blur);
  transition: transform .25s var(--ease), border-color .25s; }
.gcard:hover { transform: translateY(-4px); }
.gcard__n { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--signal-deep); }
.gcard h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: -.02em; }
.gcard p { font-size: 14.5px; line-height: 1.55; color: var(--on-glass-muted); }
/* dark variant */
.slab-dark .gcard, .cards--dark .gcard { border-color: var(--glass-dark-line); background: rgba(255,255,255,.035); }
.slab-dark .gcard p, .cards--dark .gcard p { color: var(--on-ink-muted); }
.slab-dark .gcard h3, .cards--dark .gcard h3 { color: #fff; }
.slab-dark .gcard__n, .cards--dark .gcard__n { color: var(--signal); }
/* Dark cards on a LIGHT slab need a solid dark fill: the translucent
   background above only reads as dark when a dark slab shows through.
   Without this, white card text renders on a near-white card. */
.slab-light.cards--dark .gcard { background: var(--night-2); }

/* controls row (dot separated mono) */
.dotrow { display: flex; flex-wrap: wrap; gap: 8px 0; align-items: center; font-family: var(--mono);
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.dotrow span { padding: 0 16px; border-left: 1px solid currentColor; opacity: .8; line-height: 1; }
.dotrow span:first-child { border-left: 0; padding-left: 0; }

/* ============================================================
   MANDATE / FACT BAND  (big dated facts over open sky)
   ============================================================ */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); }
@media (max-width: 820px){ .facts { grid-template-columns: 1fr; gap: 28px; } }
.fact .fn { font-size: clamp(2.4rem, 4.6vw, 3.8rem); letter-spacing: -.035em; line-height: 1; color: #fff; }
.fact .fn b { color: var(--signal); font-weight: 500; }
.fact .fl { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-top: 14px; }
.fact p { margin-top: 12px; color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.55; max-width: 34ch; }

/* ============================================================
   SUPERSIZE STATEMENT
   ============================================================ */
.supersize { text-align: center; }
.supersize h2 { font-size: clamp(2.6rem, 11vw, 9rem); letter-spacing: -.05em; line-height: .92; color: #fff;
  text-shadow: 0 6px 50px rgba(0,0,0,.3); }

/* full-bleed promo band (plays the promo full-width, uncropped) */
.promoband { position: relative; overflow: hidden; background: #070a12; }
.promoband__bg { display: block; width: 100%; height: auto; }
.promoband__scrim { display: none; }

/* two-clip sequential band (16:9, crossfades A → B → A) */
.promoband--seq { aspect-ratio: 16 / 9; }
.promolabel { position: absolute; top: clamp(16px, 3vw, 34px); left: clamp(16px, 3vw, 40px); z-index: 3;
  font-family: var(--mono); font-size: clamp(11px, 1.3vw, 14px); letter-spacing: .22em; text-transform: uppercase;
  color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.6); display: inline-flex; align-items: center; gap: 10px; }
.promolabel::before { content: ""; width: clamp(22px, 3vw, 40px); height: 1px; background: var(--signal); }
.promoband--seq .seqvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1s ease; }
.promoband--seq .seqvid.is-on { opacity: 1; }

/* ============================================================
   BENTO  (workforce)
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bento .b { border-radius: 13px; padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column;
  border: 1px solid var(--glass-light-line); background: rgba(255,255,255,.5); backdrop-filter: var(--blur);
  transition: transform .25s var(--ease); overflow: hidden; position: relative; }
.bento .b:hover { transform: translateY(-4px); }
.bento .b h3 { font-size: 1.2rem; letter-spacing: -.02em; }
.bento .b p { font-size: 14px; line-height: 1.5; color: var(--on-glass-muted); margin-top: 8px; }
.bento .b .bn { font-family: var(--mono); font-size: 11px; color: var(--signal-deep); letter-spacing: .06em; margin-bottom: auto; }
.b--span2 { grid-column: span 2; }
.b--anim { min-height: 300px; }
.b--anim .glassviz { position: absolute; inset: 10px 0 auto 0; height: clamp(130px, 17vw, 168px); z-index: 0; opacity: .9; }
.bento .b--anim { background: #0B0F19; border-color: var(--glass-dark-line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.bento .b--anim h3, .bento .b--anim .bn { position: relative; z-index: 1; color: #fff; }
.bento .b--anim p { position: relative; z-index: 1; color: rgba(255,255,255,.78); }
@media (max-width: 920px){ .bento { grid-template-columns: 1fr 1fr; } .b--span2 { grid-column: span 2; } }
@media (max-width: 600px){ .bento { grid-template-columns: 1fr; } .b--span2 { grid-column: span 1; } }

/* ============================================================
   HOW WORK MOVES  (sticky 3 phases)
   ============================================================ */
.howmoves { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 880px){ .howmoves { grid-template-columns: 1fr; } }
.howmoves__sticky { position: sticky; top: 96px; }
.phase { padding: clamp(26px, 3.4vw, 40px) 0; border-top: 1px solid var(--glass-light-line); display: grid;
  grid-template-columns: 56px 1fr; gap: 20px; opacity: .4; transition: opacity .4s; }
.phase.active { opacity: 1; }
.phase:first-child { border-top: 0; }
.phase .pnum { font-family: var(--mono); font-size: 13px; color: var(--signal-deep); }
.phase h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -.025em; }
.phase p { margin-top: 12px; color: var(--on-glass-muted); }

/* ============================================================
   VOICE / CONTROL / REGION  (dark, with media slot)
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.split.rev .split__media { order: -1; }
.split--mediabig { grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 80px); }
.split--mediabig .mediaslot { aspect-ratio: 4 / 3; box-shadow: 0 50px 110px -45px rgba(0,0,0,.7); }
@media (max-width: 880px){ .split--mediabig { grid-template-columns: 1fr; } }
@media (max-width: 880px){ .split { grid-template-columns: 1fr; } .split.rev .split__media { order: 0; } }
.mediaslot { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--glass-dark-line);
  background: #0A0D15; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
.mediaslot__ph { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(120,150,220,.12), transparent 62%); inset: 0; position: absolute;
  justify-content: center; }
.mediaslot__ph .pn { font-family: var(--mono); font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.mediaslot__ph .pt { font-size: 1.05rem; color: rgba(255,255,255,.85); max-width: 28ch; }
.mediaslot img { width: 100%; height: 100%; object-fit: cover; }
.mediaslot video { width: 100%; height: 100%; object-fit: contain; cursor: pointer; }
.livebadge { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #fff;
  background: rgba(8,11,18,.5); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); padding: 6px 11px; border-radius: 100px; }
.vsound { position: absolute; bottom: 12px; right: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #fff; cursor: pointer;
  background: rgba(8,11,18,.55); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px); padding: 7px 12px; border-radius: 100px; transition: background .2s; }
.vsound:hover { background: rgba(8,11,18,.8); }
.vsound svg { width: 13px; height: 13px; }

.vpoints { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 0; }
.vpoints li { padding: 18px 0; border-top: 1px solid var(--glass-dark-line); display: grid; grid-template-columns: 16px 1fr; gap: 14px; }
.vpoints li:first-child { border-top: 0; }
.vpoints li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); margin-top: 8px; }
.vpoints b { display: block; font-weight: 500; font-size: 16px; color: #fff; }
.vpoints span.d { color: var(--on-ink-muted); font-size: 14.5px; }

/* tabbed control surface */
.ctabs { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.ctab { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; padding: 10px 16px;
  border-radius: 7px; border: 1px solid var(--glass-dark-line); background: transparent; color: var(--on-ink-muted); cursor: pointer; transition: all .2s; }
.ctab[aria-selected="true"] { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
.cpane { display: none; }
.cpane.on { display: block; }

/* ============================================================
   MODELS MARQUEE  +  INTEGRATIONS CHIPS
   ============================================================ */
.mmarquee { overflow: hidden; padding: 18px 0; border-block: 1px solid var(--glass-dark-line); }
.mmarquee__track { display: inline-flex; white-space: nowrap; gap: 0; animation: scroll-x 32s linear infinite; }
.mmarquee__track span { font-size: clamp(1.4rem, 3vw, 2.4rem); letter-spacing: -.02em; padding: 0 32px; color: rgba(255,255,255,.5); }
.mmarquee__track span b { color: #fff; font-weight: 500; }
.mmarquee__track span::after { content: "·"; margin-left: 64px; color: var(--signal); }
@media (prefers-reduced-motion: reduce){ .mmarquee__track { animation: none; } }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; padding: 10px 16px; border-radius: 100px;
  border: 1px solid var(--glass-dark-line); color: var(--on-ink-muted); transition: all .2s; }
.chip:hover { border-color: var(--signal); color: var(--signal); }

/* ============================================================
   FORM  (working session)
   ============================================================ */
.wsession { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(30px, 5vw, 72px); align-items: start; }
@media (max-width: 900px){ .wsession { grid-template-columns: 1fr; } }
.wform { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink-faint); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 15px; color: #fff; background: rgba(255,255,255,.04);
  border: 1px solid var(--glass-dark-line); border-radius: 8px; padding: 12px 14px; width: 100%; transition: border-color .2s; }
.field textarea { min-height: 90px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(245,243,236,.35); }
.field select { appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; }
.field select option { background: #0C111C; color: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--signal); }
.consent { font-size: 12px; color: var(--on-ink-faint); margin-top: 4px; line-height: 1.6; }
.consent a { color: var(--on-ink-muted); text-decoration: underline; }
.proof { font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--on-ink-muted); letter-spacing: .01em;
  border-left: 2px solid var(--signal); padding-left: 16px; }

/* ============================================================
   NIGHT SCENE  +  FOOTER (cool ink)
   ============================================================ */
.nightscene { text-align: center; padding-block: clamp(90px, 16vw, 220px); }
.nightscene img { width: min(40vw, 300px); margin: 0 auto; filter: drop-shadow(0 14px 50px rgba(0,0,0,.5)); animation: float 9s ease-in-out infinite; }
.nightscene .nline { margin-top: 30px; font-family: var(--mono); font-size: clamp(11px, 1.5vw, 14px);
  letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.7); }

.zfoot { background: var(--night); color: var(--on-ink); position: relative; z-index: 1;
  border-top: 1px solid var(--glass-dark-line); padding-block: clamp(56px, 8vw, 90px) 32px; }
.zfoot__top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 760px){ .zfoot__top { grid-template-columns: 1fr; gap: 28px; } }
.zfoot__brand { display: flex; align-items: center; gap: 12px; }
.zfoot__brand img { width: 36px; }
.zfoot__brand .bt { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.zfoot__brand .bt em { font-style: normal; color: var(--on-ink-muted); font-family: var(--cursive, var(--display)); }
.zfoot__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.zfoot__links a { font-size: 14px; color: var(--on-ink-muted); transition: color .2s; }
.zfoot__links a:hover { color: var(--signal); }
.zfoot__bottom { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 48px;
  padding-top: 22px; border-top: 1px solid var(--glass-dark-line); font-family: var(--mono); font-size: 11px;
  letter-spacing: .06em; color: var(--on-ink-faint); text-transform: uppercase; }
/* --- Request a working session: TEMPORARILY HIDDEN (2026-06-11) ---
   The lead form has no backend yet, so all "Request a working session"
   UI is hidden site-wide: the nav CTA, hero/section buttons, footer and
   mobile-drawer links, and the form section itself. Nothing is deleted.
   To restore, delete this single block. */
.znav__cta,
a[href="/#request-a-working-session"],
#request-a-working-session { display: none !important; }
@media (max-width: 600px){ .zfoot__bottom { flex-direction: column; align-items: flex-start; } }

/* cursive accent face toggle (Tweaks may switch this on) */
html.cursive-on { --cursive: 'Caveat', 'Segoe Script', cursive; }

/* generic page hero hour-stamp (subpages) */
.hourstamp { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--signal);
  display: inline-flex; align-items: center; gap: 8px; }
.hourstamp::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 25%, transparent); }

/* product screenshot — full-width showcase stage */
.opener-head { max-width: none; }
.shotstage { position: relative; margin-top: clamp(40px, 6vw, 72px); padding: clamp(14px, 2.6vw, 34px);
  border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 150% at 50% -10%, #1c2335, #0b0e16 72%);
  border: 1px solid var(--glass-dark-line); box-shadow: 0 50px 120px -50px rgba(8,11,20,.7); }
.shotstage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 50% -10%, rgba(142,157,188,.3), transparent 60%); }
.shot { position: relative; z-index: 1; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1); background: #fff; box-shadow: 0 30px 70px -28px rgba(0,0,0,.6); }
.shot img { display: block; width: 100%; height: auto; }

/* voice composition beneath the opening talking-head video */
.ovoice { margin-top: clamp(34px, 5vw, 64px); display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(36px, 6vw, 88px); align-items: start; }
.ovoice__lead { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.32; letter-spacing: -.02em;
  font-weight: 500; color: var(--ink); max-width: 22ch; text-wrap: balance; }
.ovoice__lead em { font-style: normal; color: var(--signal-deep); }
.ovoice__grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.ovoice__pt { border-top: 1px solid rgba(20,24,40,.16); padding: 17px 0; }
.ovoice__pt:last-child { padding-bottom: 0; }
.ovoice__pt h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.ovoice__pt p { margin-top: 8px; font-size: .98rem; line-height: 1.5; color: var(--slate); max-width: 44ch; }
@media (max-width: 860px){ .ovoice { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 34px); }
  .ovoice__lead { max-width: 32ch; } }

/* region 3-up points (dark) */
.rgrid { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px); }
.rgrid__pt { border-top: 1px solid rgba(255,255,255,.16); padding-top: 18px; }
.rgrid__pt h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.rgrid__pt p { margin-top: 10px; font-size: 1rem; line-height: 1.55; color: rgba(255,255,255,.72); }
@media (max-width: 820px){ .rgrid { grid-template-columns: 1fr; gap: 0; }
  .rgrid__pt { padding: 18px 0; } }

/* explainer video frame */
.vframe { position: relative; max-width: 1000px; margin: 40px auto 0; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--glass-dark-line); background: #05070d; box-shadow: 0 40px 100px -40px rgba(0,0,0,.7); aspect-ratio: 16 / 9; }
.vframe video { width: 100%; height: 100%; object-fit: contain; display: block; background: #05070d; }
.vplay { position: absolute; inset: 0; margin: auto; width: 86px; height: 86px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--signal); color: var(--signal-ink);
  box-shadow: 0 12px 44px rgba(0,0,0,.45); transition: transform .2s, opacity .35s; }
.vplay svg { width: 30px; height: 30px; margin-left: 4px; }
.vplay:hover { transform: scale(1.07); }
.vframe.playing .vplay { opacity: 0; pointer-events: none; }
.vmax { position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px; border-radius: 9px;
  display: grid; place-items: center; cursor: pointer; color: #fff;
  background: rgba(8,11,18,.55); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(8px);
  transition: background .2s; }
.vmax:hover { background: rgba(8,11,18,.82); }
.vmax svg { width: 17px; height: 17px; }

/* timeline (solution pages) */
.timeline { display: flex; flex-direction: column; }
.tbeat { display: grid; grid-template-columns: 110px 1fr; gap: clamp(16px,3vw,40px); padding: 22px 0;
  border-top: 1px solid var(--glass-dark-line); }
.tbeat:first-child { border-top: 0; }
.tbeat .tt { font-family: var(--mono); font-size: 15px; color: var(--signal); letter-spacing: .02em; }
.tbeat .te { font-size: 1.15rem; letter-spacing: -.01em; color: #fff; }
.tbeat .td { margin-top: 8px; color: var(--on-ink-muted); font-size: 14.5px; line-height: 1.55; max-width: 60ch; }
@media (max-width: 640px){ .tbeat { grid-template-columns: 1fr; gap: 6px; } }

/* ============================================================
   SUBPAGE FIXED SKIES  (no scroll animation)
   ============================================================ */
.sky--dawn   { background: linear-gradient(180deg, #16203c 0%, #4b3f63 42%, #b67a6e 78%, #e0a072 100%); }
.sky--midday { background: linear-gradient(180deg, #2f5f9e 0%, #5a93cf 40%, #a6caec 74%, #dfe7ee 100%); }
.sky--dusk   { background: linear-gradient(180deg, #1a2347 0%, #5a2f5a 44%, #b5567a 74%, #e0814c 100%); }
.sky--night  { background: linear-gradient(180deg, #04060d 0%, #080c16 46%, #0e1426 78%, #131c30 100%); }
.sky--night .sky__stars, .sky--dusk .sky__stars { opacity: 1; }
.sky--night .sky__stars { opacity: .9; }
.sky--midday .sky__stars, .sky--dawn .sky__stars { opacity: 0; }
.sky--moon { position: absolute; top: 16%; right: 16%; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #fdfdff, #d7e0f2 66%, #aab6d4); box-shadow: 0 0 60px 14px rgba(190,205,240,.25); }

.psub { position: relative; padding-top: calc(64px + clamp(54px, 9vw, 120px)); padding-bottom: clamp(40px, 6vw, 80px); }
.psub__eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--slate); }
.psub h1 { font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -.04em; line-height: .98; color: var(--ink); margin-top: 20px; max-width: 18ch; }
.psub h1 em { font-style: normal; color: var(--signal-deep); font-family: var(--cursive, var(--display)); }
.psub__body { margin-top: 24px; max-width: 56ch; color: var(--slate); font-size: clamp(1.05rem,1.5vw,1.25rem); line-height: 1.5; }
.psub .btn { margin-top: 30px; }

/* CTA band */
.zcta { text-align: center; }
.zcta h2 { font-size: clamp(2.2rem, 5vw, 4rem); letter-spacing: -.04em; color: #fff; }
.zcta h2 em { font-style: normal; color: var(--signal); font-family: var(--cursive, var(--display)); }
.zcta p { margin: 18px auto 0; max-width: 52ch; color: rgba(255,255,255,.8); }

/* legal / doc pages */
.legal { max-width: 64ch; }
.legal h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); letter-spacing: -.03em; color: #fff; }
.legal p { margin-top: 20px; color: rgba(255,255,255,.82); font-size: 1.1rem; line-height: 1.6; }
.legal a.inline { color: var(--signal); }
.roster { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px,4vw,56px); }
@media (max-width: 720px){ .roster { grid-template-columns: 1fr; } }
.rrole { display: grid; grid-template-columns: 1fr auto; gap: 12px 18px; align-items: baseline; padding: 16px 0;
  border-top: 1px solid var(--glass-dark-line); }
.rrole .rname { font-size: 1.05rem; font-weight: 500; color: #fff; }
.rrole .rdesc { font-family: var(--mono); font-size: 12px; color: var(--on-ink-muted); letter-spacing: .02em; text-align: right; max-width: 30ch; }
@media (max-width: 520px){ .rrole { grid-template-columns: 1fr; } .rrole .rdesc { text-align: left; } }

/* ============================================================
   MOBILE TUNING
   ============================================================ */
@media (max-width: 760px){
  /* tighter vertical rhythm so sections don't feel cavernous on a phone */
  .gsec { padding-block: clamp(52px, 13vw, 84px); }
  .gsec--tight { padding-block: clamp(40px, 9vw, 60px); }
  /* the long mono CTA is carried by the drawer at this width */
  .znav__cta { display: none; }
  /* hero: calmer tracking so the tagline never overflows */
  .zhero { padding: 84px 18px 54px; min-height: 90svh; }
  .zhero__tag { letter-spacing: .16em; line-height: 1.6; }
  .zhero__hint { letter-spacing: .14em; }
  /* unpin the sticky column — it has nothing to pin against once stacked */
  .howmoves__sticky { position: static; }
  /* showcase frames: less inner padding so screenshots read larger */
  .shotstage { padding: 12px; border-radius: 16px; }
  /* section heads + leads breathe */
  .shead { max-width: none; }
}
@media (max-width: 600px){
  .wform { grid-template-columns: 1fr; }
  /* 16px inputs stop iOS Safari from zooming on focus */
  .field input, .field select, .field textarea { font-size: 16px; }
}
@media (max-width: 480px){
  .zhero__mark { width: 74vw; }
  .ghead { font-size: clamp(1.85rem, 8.5vw, 2.4rem); }
  .ovoice__lead { font-size: clamp(1.3rem, 6vw, 1.7rem); }
  .promolabel { letter-spacing: .16em; }
}