/* =========================================================
   Real Intelligence Consultancy — design tokens & styles
   Cira structure, re-skinned in RI's warm serif-led brand
   ========================================================= */

:root {
  /* Exact tokens pulled from realintelligence.netlify.app */
  --bg-base:      #faf8f5;            /* original body background */
  --accent-rust:  #c4572a;            /* original accent (rgb 196,87,42) */
  --accent-rust-d:#a8462c;
  --ink-navy:     #1a1e2e;            /* original heading ink (rgb 26,30,46) */
  --ink-soft:     #2a2f42;
  --text-muted:   #5c5a56;            /* original body text */
  --text-faint:   #9a9489;            /* original muted */
  --surface:      #fffaf6;
  --surface-2:    #ffffff;
  /* Exact original page background (base + two rust radial blushes) */
  --bg-brand:
    radial-gradient(80% 60% at 70% 20%, rgba(196,87,42,0.12), rgba(0,0,0,0)),
    radial-gradient(50% 50% at 20% 80%, rgba(196,87,42,0.05), rgba(0,0,0,0)),
    var(--bg-base);
  --surface-line: rgba(26, 30, 46, 0.10);
  --shadow-card:  0 1px 2px rgba(39,42,63,.04), 0 12px 40px rgba(39,42,63,.08);
  --shadow-float: 0 10px 30px rgba(39,42,63,.14), 0 2px 8px rgba(39,42,63,.08);

  --font-serif: "DM Serif Display", Georgia, serif;  /* real RI brand serif */
  --font-sans:  "Outfit", system-ui, sans-serif;     /* real RI brand sans */
  --font-mono:  "IBM Plex Mono", ui-monospace, monospace;

  --maxw: 1120px;
  --radius: 16px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* DM Serif Display ships a single weight (400) — force it everywhere it's used */
.hero__title, .section__head h2, .brand__title, .brand__tile, .svc-card h3,
.step h3, .step__n, .step-card h3, .work-card h3, .modal__card h3, .assistant__avatar,
.footer__clock, .t-phrase, .t-name, .faq__q, .exit-modal__card h3,
.roi__mult, .roi__val, .auto-card h4 { font-weight: 400; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink-navy);
  background: var(--bg-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: none; /* replaced by custom cursor + trail (restored on touch via JS) */
}
body.no-fancy-cursor { cursor: auto; }

/* ---------- Fixed background: cream gradient + animated orange TV noise ---------- */
.bg-layer { position: fixed; inset: 0; z-index: -2; overflow: hidden; }

.bg-gradient {
  position: absolute; inset: 0;
  background: var(--bg-brand);   /* exact original page background */
}
/* drifting orange signal-glow = ambient TV background animation */
.bg-glow {
  position: absolute; top: -15%; left: -15%; width: 55vw; height: 55vw; pointer-events: none;
  background: radial-gradient(closest-side, rgba(196,87,42,.18), rgba(196,87,42,0) 70%);
  filter: blur(30px);
  animation: glowDrift 22s ease-in-out infinite alternate;
}
@keyframes glowDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(55vw, 18vh) scale(1.25); }
  100% { transform: translate(20vw, 48vh) scale(1.1); }
}
/* The "TV" — JS canvas redraws vivid orange static every frame */
.bg-noise {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .2; mix-blend-mode: normal; pointer-events: none;
}

/* Custom cursors — 4 styles, switched per section for comparison */
.cur { position: fixed; top: 0; left: 0; pointer-events: none; border-radius: 50%; opacity: 0; will-change: transform; }
.cur-dot   { z-index: 10001; width: 7px;  height: 7px;  background: var(--accent-rust); transition: opacity .25s; }
.cur-ring  { z-index: 10000; width: 34px; height: 34px; border: 1.5px solid rgba(196,87,42,.55); transition: width .2s ease, height .2s ease, border-radius .2s ease, border-color .2s ease, background .2s ease, opacity .25s; }
.cur-glow  { z-index: 10000; width: 12px; height: 12px; background: var(--accent-rust); box-shadow: 0 0 22px 10px rgba(196,87,42,.35); transition: width .2s ease, height .2s ease, box-shadow .2s ease, opacity .25s; }
.cur-blend { z-index: 10002; width: 30px; height: 30px; background: #fff; mix-blend-mode: difference; transition: width .2s ease, height .2s ease, opacity .25s; }

/* show only the active mode's element(s) */
body[data-cursor-mode="dotring"]  .cur-dot,
body[data-cursor-mode="dotring"]  .cur-ring,
body[data-cursor-mode="trail"]    .cur-dot,
body[data-cursor-mode="trail"]    .cur-ring,
body[data-cursor-mode="glow"]     .cur-glow,
body[data-cursor-mode="magnetic"] .cur-ring,
body[data-cursor-mode="invert"]   .cur-blend { opacity: 1; }
/* invert sections: over a box, swap the lens for the magnetic ring */
body[data-cursor-mode="invert"].magnet-on .cur-blend { opacity: 0; }
body[data-cursor-mode="invert"].magnet-on .cur-ring  { opacity: 1; }
body.cursor-out .cur { opacity: 0 !important; }
.cursor-trail-canvas { position: fixed; inset: 0; z-index: 9998; pointer-events: none; }

/* hover emphasis */
.cur-ring.is-hover  { border-color: rgba(196,87,42,.9); background: rgba(196,87,42,.06); }
.cur-glow.is-hover  { width: 18px; height: 18px; box-shadow: 0 0 30px 14px rgba(196,87,42,.5); }
.cur-blend.is-hover { width: 54px; height: 54px; }

@media (prefers-reduced-motion: reduce) {
  .bg-noise { opacity: .08; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Sections: alternating bands for clear separation ---------- */
.section { position: relative; width: 100%; padding: 0; }
.section__inner { max-width: var(--maxw); margin: 0 auto; padding: 96px 24px; }
/* A "band" sits on a solid surface that hides the noise -> visible section break */
.section.band {
  background: var(--surface-2);
  border-top: 1px solid var(--surface-line);
  border-bottom: 1px solid var(--surface-line);
}
/* 3rd layer: exact original-site background (rust blush on cream), no grain */
.section.plain {
  background: var(--bg-brand);
  border-top: 1px solid var(--surface-line);
  border-bottom: 1px solid var(--surface-line);
}

.section__head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section__head h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 4vw, 44px); margin: 0 0 12px; letter-spacing: -.01em; }
/* editorial deck: the line that says whose method this is. Serif, larger than body,
   set off by a short rust rule so it reads as a standfirst and not as a paragraph. */
.section__head--deck { max-width: 700px; }
.section__deck {
  font-family: var(--font-serif); font-weight: 400;   /* DM Serif Display ships 400 only */
  font-size: clamp(17px, 1.7vw, 21px); line-height: 1.45; letter-spacing: -.005em;
  color: var(--ink-soft); max-width: 34em; margin: 18px auto 14px;
  position: relative; padding-top: 18px;
}
.section__deck::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 40px; height: 2px; border-radius: 2px; background: var(--accent-rust);
}
.section__head--deck .muted { font-size: 14.5px; }
.muted { color: var(--text-muted); }
.accent { color: var(--accent-rust); }
.nowrap { white-space: nowrap; }

/* ---------- NAV (logo left · hamburger right) ----------
   Flex + min-width:0, NOT the old `1fr auto 1fr` grid: that grid reserved a
   full centre column for the link list, which blew past the viewport between
   ~761px (where the list reappeared) and ~980px. There is no centre column now,
   so there is nothing left to overflow. */
.nav { position: relative; z-index: 90; padding: 24px 0; }
.nav__inner {
  max-width: 1280px; margin: 0 auto; padding: 0 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.nav__left { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.nav__right { position: relative; flex: 0 0 auto; }
.nav__regions {
  display: flex; align-items: center; gap: 9px; padding-left: 2px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--text-faint);
}
.nav__regions i { font-style: normal; color: var(--accent-rust); opacity: .55; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink-navy); }
.brand__tile { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; background: var(--accent-rust); color: #fff; border-radius: 10px; font-family: var(--font-serif); font-weight: 400; letter-spacing: .04em; }
.brand__name { display: flex; flex-direction: column; line-height: 1; }
.brand__title { font-family: var(--font-serif); font-weight: 400; font-size: 18px; }
.brand__sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: .22em; color: var(--text-muted); margin-top: 3px; }

/* --- hamburger --- */
.burger {
  position: relative; z-index: 2;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border-radius: 12px; cursor: pointer;
  background: linear-gradient(160deg, rgba(255,252,250,.66), rgba(255,240,232,.44));
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 6px 18px -8px rgba(39,42,63,.35);
  backdrop-filter: blur(7px) saturate(1.12);
  -webkit-backdrop-filter: blur(7px) saturate(1.12);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.burger:hover, .burger:focus-visible { border-color: rgba(196,87,42,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 10px 24px -8px rgba(196,87,42,.4); }
.burger:focus-visible { outline: 2px solid var(--accent-rust); outline-offset: 2px; }
.burger__box { position: relative; display: block; width: 20px; height: 14px; }
.burger__box i {
  position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: var(--ink-navy);
  transition: transform .32s cubic-bezier(.2,.8,.3,1), opacity .18s ease, top .32s cubic-bezier(.2,.8,.3,1);
}
.burger__box i:nth-child(1) { top: 0; }
.burger__box i:nth-child(2) { top: 6px; }
.burger__box i:nth-child(3) { top: 12px; }
/* three lines fold into an X */
.burger[aria-expanded="true"] .burger__box i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__box i:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.burger[aria-expanded="true"] .burger__box i:nth-child(3) { top: 6px; transform: rotate(-45deg); }
.burger[aria-expanded="true"] { background: var(--accent-rust); border-color: var(--accent-rust); }
.burger[aria-expanded="true"] .burger__box i { background: #fff; }

/* --- dropdown: warm glass panel, hairline, mono links --- */
.navmenu {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 1;
  display: flex; flex-direction: column;
  width: 236px; max-width: calc(100vw - 40px);
  padding: 14px 8px 10px;
  border-radius: 16px;
  background: linear-gradient(158deg, rgba(255,252,250,.9), rgba(255,238,229,.82));
  border: 1px solid rgba(255,255,255,.62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -18px 40px rgba(196,87,42,.09),
    0 30px 70px -26px rgba(26,30,46,.55),
    0 4px 14px rgba(26,30,46,.1);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  opacity: 0; visibility: hidden;
  transform: translateY(-10px) scale(.97); transform-origin: top right;
  transition: opacity .22s ease, transform .3s cubic-bezier(.2,.85,.25,1), visibility 0s linear .3s;
}
.navmenu.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .22s ease, transform .34s cubic-bezier(.2,.85,.25,1), visibility 0s;
}
.navmenu__label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .24em;
  color: var(--accent-rust); padding: 0 12px 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--surface-line);
}
.navmenu a {
  position: relative;
  padding: 10px 12px; border-radius: 10px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em;
  color: var(--ink-soft); text-decoration: none;
  transition: background .18s ease, color .18s ease, padding-left .18s ease;
}
.navmenu a:hover, .navmenu a:focus-visible {
  background: rgba(196,87,42,.1); color: var(--accent-rust); padding-left: 16px; outline: none;
}
.navmenu a:focus-visible { box-shadow: inset 0 0 0 1px rgba(196,87,42,.5); }
@media (prefers-reduced-motion: reduce) {
  .navmenu { transition: opacity .01s linear, visibility 0s linear .01s; transform: none; }
  .navmenu.is-open { transition: opacity .01s linear, visibility 0s; }
  .burger__box i { transition: none; }
  .navmenu a { transition: background .18s ease, color .18s ease; }
  .navmenu a:hover, .navmenu a:focus-visible { padding-left: 12px; }
}

/* ---------- HERO ---------- */
.hero { max-width: 1180px; margin: 0 auto; padding: 48px 32px 96px; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--text-muted); }
.eyebrow .dot, .online { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-rust); display: inline-block; }
.online { background: #3bbf7a; box-shadow: 0 0 0 3px rgba(59,191,122,.18); }
.hero__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(34px, 6.2vw, 72px); line-height: 1.04; letter-spacing: -.02em; margin: 20px 0 0; color: var(--ink-navy); }
.hero__title em { font-style: italic; color: var(--accent-rust); }
.hero__sub { margin: 22px 0 0; font-size: 18px; }
.hero__cta { margin-top: 36px; display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Visually hidden, still read by search engines and screen readers. Carries the real
   brand promise inside the h1 whose visible content is the (aria-hidden) typing channel. */
.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;
}

/* V2 hero: left lead column (eyebrow + rotating-channel h1 + demoted subline + CTAs),
   clean video on the right (unchanged). */
.hero__lead { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hero__headline { margin: 0; padding: 0; width: 100%; font-weight: 400; }   /* the rotating channel IS the h1 */
.hero__lead .hero__cta { margin-top: 10px; }
.hero__subline { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(19px, 2.6vw, 28px); line-height: 1.18; color: var(--ink-navy); }
.hero__subline em { font-style: italic; color: var(--accent-rust); }

/* Above-the-fold split: video | channels */
.hero__split {
  margin-top: 44px;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center;
  text-align: left;
}

/* --- TV set housing the video --- */
.tv-set {
  background: linear-gradient(165deg, #23263a, var(--ink-navy));
  border-radius: 20px; padding: 14px; box-shadow: var(--shadow-float);
  display: flex; flex-direction: column; gap: 12px;
}
.tv-set__screen {
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  background: #000; box-shadow: inset 0 0 0 4px #0c0e16, inset 0 0 40px rgba(0,0,0,.6);
}
.tv-set__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Hero-only override: Mike's one request is that HIS video, above the fold,
   carries none of the TV/CRT treatment used everywhere else on the site (dark
   bezel, scanlines, RI·TV/LIVE base bar, knob). This is a modifier on the shared
   .tv-set / .tv-set__screen classes rather than an edit to them, so the Success
   Cases teaser further down the page keeps its full CRT housing untouched. Result
   is a clean rounded frame with the site's hairline border and soft card shadow. */
.tv-set--clean { background: none; padding: 0; border-radius: var(--radius); box-shadow: none; }
.tv-set--clean .tv-set__screen {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--surface-line);
}

/* --- Hero self-hosted video: click-to-play facade. These constrain the poster and the
   <video> to fill the 16/9 screen; without them the 1280px poster renders at its intrinsic
   width and blows out the hero grid. --- */
.hero-facade {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: grid; place-items: center;
  padding: 0; border: 0; margin: 0; cursor: pointer; overflow: hidden;
  background: #000; border-radius: inherit;
}
.hero-facade__thumb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.hero-facade__scan { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hero-facade__play {
  position: relative; z-index: 2;
  width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(196,87,42,.92);
  box-shadow: 0 10px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .2s ease, background .2s ease;
}
.hero-facade:hover .hero-facade__play,
.hero-facade:focus-visible .hero-facade__play { transform: scale(1.06); background: var(--accent-rust); }
.hero-facade__label {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 16px;
  text-align: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  color: rgba(255,255,255,.92); text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border: 0; display: block; background: #000; border-radius: inherit;
}
.hero-video[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-facade:hover .hero-facade__play { transform: none; }
}

/* --- YouTube click-to-load facade: the thumbnail, a rust play button, and (outside
   the hero) the same CRT scanlines the rest of the site uses. No youtube.com bytes
   until click. --- */
.yt {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: grid; place-items: center; padding: 0;
  border: 0; background: #000; cursor: pointer; overflow: hidden;
}
.yt__thumb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .82;
  transition: opacity .3s ease, transform .5s cubic-bezier(.2,.8,.3,1);
}
.yt__scan {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 60% at 50% 45%, rgba(196,87,42,.16), rgba(0,0,0,.35) 78%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
}
.yt__play {
  position: relative; z-index: 2;
  display: grid; place-items: center; width: 64px; height: 64px;
  border-radius: 50%; color: #fff;
  background: var(--accent-rust);
  box-shadow: 0 10px 30px -6px rgba(196,87,42,.7), 0 0 0 8px rgba(196,87,42,.18);
  transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s ease, background .2s ease;
}
.yt__play svg { margin-left: 3px; }
.yt__label {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em;
  color: rgba(255,255,255,.85); text-shadow: 0 1px 8px rgba(0,0,0,.8);
}
.yt:hover .yt__play, .yt:focus-visible .yt__play {
  transform: scale(1.09);
  box-shadow: 0 14px 40px -6px rgba(196,87,42,.85), 0 0 0 12px rgba(196,87,42,.22);
}
.yt:hover .yt__thumb { opacity: .95; transform: scale(1.03); }
.yt:focus-visible { outline: 2px solid var(--accent-rust); outline-offset: -3px; }
@media (prefers-reduced-motion: reduce) {
  .yt__thumb, .yt__play { transition: none; }
  .yt:hover .yt__play, .yt:focus-visible .yt__play { transform: none; }
  .yt:hover .yt__thumb { transform: none; }
}
.tv-set__base { display: flex; align-items: center; gap: 14px; padding: 2px 8px 4px; }
.tv-set__brand { font-family: var(--font-serif); font-size: 16px; color: #fff; }
.tv-set__live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: rgba(255,255,255,.7); }
.tv-set__knob { margin-left: auto; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6b6f86, #2a2e42); box-shadow: 0 0 0 2px rgba(255,255,255,.08); }

/* --- Big changing capability text, integrated into the background --- */
.channels { position: relative; }
.channels__screen {
  position: relative; min-height: 360px; overflow: hidden;   /* no card chrome */
  display: flex; align-items: center;
}
.channels__static { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .1s linear; pointer-events: none; z-index: 3; mix-blend-mode: screen; }
.channels__screen.is-changing .channels__static { opacity: 1; }
/* bright scan-sweep line racing down during the switch */
.channels__screen::after {
  content: ""; position: absolute; left: -4%; right: -4%; height: 4px; top: -8px; z-index: 4; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,240,225,.95), transparent);
  box-shadow: 0 0 16px 5px rgba(255,205,160,.75);
}
.channels__screen.is-changing::after { animation: sweep .42s linear; }
@keyframes sweep { 0% { top: -8px; opacity: 1; } 100% { top: 100%; opacity: 1; } }
/* faint TV scanlines */
.channels__scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .5;
  background: repeating-linear-gradient(rgba(26,30,46,.05) 0 1px, transparent 1px 4px);
  animation: scanMove 6s linear infinite;
}
@keyframes scanMove { to { background-position: 0 8px; } }
.channels__label { position: absolute; top: 4px; left: 2px; z-index: 4; font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; color: var(--accent-rust); }

.channel {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 16px;
  opacity: 0; transform: scale(1.02); transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.channel.is-active { opacity: 1; transform: none; }
/* the new channel rolls in like a CRT settling after a channel change */
.channel.rolling { animation: rollIn .5s cubic-bezier(.2,.85,.25,1); }
@keyframes rollIn {
  0%   { transform: scaleY(.02) translateY(-14%); filter: brightness(3.2); }
  28%  { transform: scaleY(1.12) translateY(-4%);  filter: brightness(1.7); }
  58%  { transform: scaleY(.96)  translateY(3%); }
  100% { transform: scaleY(1)    translateY(0);    filter: none; }
}
/* chromatic (RGB) split on the text mid-switch */
.channel.rolling .channel__title { text-shadow: 2.5px 0 rgba(230,40,90,.5), -2.5px 0 rgba(40,180,230,.45); }
.channel__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(44px, 6.5vw, 88px); line-height: .98; letter-spacing: -.02em; margin: 0; color: var(--ink-navy); }
.channel__sub { margin: 0; color: var(--text-muted); font-size: clamp(16px, 1.6vw, 21px); }

/* typewriter for the changing phrase (AnsarTech-style, types left -> right) */
.channel__title { min-height: 1.05em; }
.channel__title.is-typing::after {
  content: ""; display: inline-block; width: .05em; height: .82em; margin-left: .04em;
  background: var(--accent-rust); vertical-align: baseline; animation: caret .8s steps(1) infinite;
}
.channel.is-active .channel__sub { animation: subFade .5s ease both; animation-delay: .15s; }
@keyframes subFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 15px; font-weight: 500; border-radius: var(--radius-pill); padding: 13px 24px; cursor: pointer; border: 1px solid transparent; transition: transform .15s, background .2s, color .2s; }
.btn--primary { background: var(--ink-navy); color: #fff; }
.btn--primary:hover { background: var(--accent-rust); transform: translateY(-1px); }
.btn--ghost { background: rgba(255,250,246,.6); color: var(--ink-navy); border-color: var(--surface-line); }
.btn--ghost:hover { border-color: var(--accent-rust); color: var(--accent-rust); }
.btn--block { width: 100%; justify-content: center; }

/* ---------- SERVICES ---------- */
.tag-row { display: inline-flex; gap: 8px; margin-bottom: 14px; }
.tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; padding: 5px 12px; border: 1px solid var(--surface-line); border-radius: var(--radius-pill); color: var(--text-muted); }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 980px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
.svc-card { background: var(--surface-2); border: 1px solid var(--surface-line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-card); }
.svc-card h3 { font-family: var(--font-serif); font-weight: 400; font-size: 22px; margin: 0 0 8px; }
.svc-card p { margin: 0; color: var(--text-muted); font-size: 15px; }

/* ---- Glass CRT service windows (task 5) ---- */
.svc-card[data-svc] {
  position: relative; overflow: hidden; padding: 22px 22px 24px;
  background: linear-gradient(160deg, rgba(255,252,250,.60), rgba(255,240,232,.40));
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -16px 32px rgba(196,87,42,.06),
    0 14px 40px rgba(39,42,63,.09);
  backdrop-filter: blur(7px) saturate(1.12);
  -webkit-backdrop-filter: blur(7px) saturate(1.12);
  transition: transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease, border-color .32s ease;
}
/* soft top light */
.svc-card[data-svc]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(150deg, rgba(255,255,255,.48) 0%, rgba(255,255,255,0) 42%);
}
/* rust wash overlay (fades in on open) */
.svc-card[data-svc]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(158deg, rgba(196,87,42,.18), rgba(196,87,42,.05) 55%, transparent);
  opacity: 0; transition: opacity .35s ease;
}
.svc-card[data-svc] > * { position: relative; z-index: 2; }
.svc-card[data-svc] h3 { margin: 12px 0 8px; }

/* thin mini-screen strip */
.svc-card__strip {
  position: relative; display: block; height: 30px; border-radius: 8px; overflow: hidden;
  background: radial-gradient(120% 140% at 50% 28%, #241b17, #0d0a09 80%);
  box-shadow: inset 0 0 0 2px #0a0708, inset 0 0 16px rgba(0,0,0,.72), 0 0 0 1px rgba(196,87,42,.22);
}
.svc-card__static { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; mix-blend-mode: screen; }
.svc-card__scan { position: absolute; left: 0; right: 0; height: 45%; top: -45%; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(255,222,194,.22), transparent); animation: svcScan 3.4s linear infinite; }
@keyframes svcScan { from { top: -45%; } to { top: 100%; } }
.svc-card__ch { position: absolute; top: 6px; left: 8px; z-index: 2; font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; color: rgba(255,214,188,.9); text-shadow: 0 0 6px rgba(196,87,42,.6); }

/* deep description, revealed on open */
.svc-card__deep { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(6px); transition: max-height .42s ease, opacity .34s ease, transform .34s ease; }
.svc-card__deep p { font-size: 13.5px; margin: 0 0 12px; }
.svc-card__deep .svc-link { margin-top: 0; }

/* open: hover (desktop), focus-within, or .is-open (tap) */
.svc-card[data-svc]:hover, .svc-card[data-svc].is-open, .svc-card[data-svc]:focus-within {
  transform: scale(1.04); z-index: 4; border-color: rgba(196,87,42,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -16px 32px rgba(196,87,42,.14), 0 24px 54px rgba(39,42,63,.18);
}
.svc-card[data-svc]:hover::after, .svc-card[data-svc].is-open::after, .svc-card[data-svc]:focus-within::after { opacity: 1; }
.svc-card[data-svc]:hover .svc-card__deep, .svc-card[data-svc].is-open .svc-card__deep, .svc-card[data-svc]:focus-within .svc-card__deep { max-height: 340px; opacity: 1; transform: none; }
.svc-card[data-svc]:hover .svc-card__short, .svc-card[data-svc].is-open .svc-card__short, .svc-card[data-svc]:focus-within .svc-card__short { opacity: 0; max-height: 0; margin: 0; }
.svc-card__short { transition: opacity .28s ease, max-height .34s ease; max-height: 80px; }
@media (prefers-reduced-motion: reduce) {
  .svc-card__scan { display: none; }
  .svc-card[data-svc]:hover, .svc-card[data-svc].is-open, .svc-card[data-svc]:focus-within { transform: none; }
}

/* ---------- CHANNEL DECK (services as one auto-cycling TV + remote) ----------
   The TV reuses the hero's .channel / .channel__title / .channel__sub language and
   the shared @keyframes sweep / rollIn / subFade. This section is NOT pinned: it is
   a normal one-screen block, so no position:sticky and no reserved multi-viewport
   height anywhere below. */
.deck { max-width: 820px; margin: 0 auto; }

/* --- the TV housing --- */
.deck-tv {
  position: relative;
  background: linear-gradient(160deg, #20232f, #101219);
  border-radius: 22px;
  padding: 14px 14px 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 30px 70px rgba(16,18,25,.34),
    0 6px 18px rgba(16,18,25,.24);
}
.deck-tv__screen {
  position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 300px;
  overflow: hidden; border-radius: 12px;
  background: radial-gradient(120% 130% at 50% 24%, #23283e 0%, #0f1220 78%);
  box-shadow: inset 0 0 0 2px #05060b, inset 0 0 60px rgba(0,0,0,.72);
}
.deck-tv__static {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  transition: opacity .1s linear; pointer-events: none; z-index: 3; mix-blend-mode: screen;
}
.deck-tv__screen.is-changing .deck-tv__static { opacity: 1; }
/* bright scan-sweep line racing down during the switch (reuses @keyframes sweep) */
.deck-tv__screen::after {
  content: ""; position: absolute; left: -4%; right: -4%; height: 4px; top: -8px; z-index: 4; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,240,225,.95), transparent);
  box-shadow: 0 0 16px 5px rgba(255,205,160,.7);
}
.deck-tv__screen.is-changing::after { animation: sweep .42s linear; }
/* faint CRT scanlines + soft screen curvature vignette */
.deck-tv__scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .5;
  background: repeating-linear-gradient(rgba(10,12,22,.35) 0 1px, transparent 1px 4px);
  animation: scanMove 6s linear infinite;
}
.deck-tv__vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(120% 120% at 50% 45%, transparent 58%, rgba(0,0,0,.5) 100%);
}
.deck-tv__label {
  position: absolute; top: 12px; left: 14px; z-index: 5;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--accent-rust);
  text-shadow: 0 0 10px rgba(196,87,42,.55);
}
.deck-tv__live {
  position: absolute; top: 12px; right: 14px; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: rgba(243,236,230,.72);
}
.deck-tv__live .online { width: 7px; height: 7px; }

/* the rotating channels fill the screen; .channel is absolute inset:0 (from hero) */
.deck-tv__channels { position: absolute; inset: 0; z-index: 1; }
.deck-tv .channel {
  align-items: center; text-align: center; justify-content: center; gap: 12px;
  padding: 34px clamp(18px, 5vw, 56px) 60px;
}
.deck-tv .channel__title {
  font-size: clamp(25px, 4.4vw, 46px); color: #fbf6ef;
  text-shadow: 0 2px 18px rgba(0,0,0,.5); overflow-wrap: break-word; max-width: 100%;
}
/* 3rd layer: the small technical service name, sitting between the pain-led title
   and the description. Mono, letter-spaced, muted warm light so buyers who know
   what they want can still spot the real service name. Pulled tight to the title. */
.deck-tv .channel__tech {
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(10px, 1.05vw, 12px); letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255,214,188,.74); margin: -4px 0 0;
}
.deck-tv .channel__sub {
  font-size: clamp(13.5px, 1.7vw, 18px); color: rgba(251,246,239,.82);
  max-width: 46ch; margin: 0 auto;
}
/* on-screen CTA, updated per channel */
.deck-tv__cta {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 6;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  color: #ffd9c4; text-decoration: none;
  padding: 7px 15px; border-radius: var(--radius-pill);
  background: rgba(196,87,42,.16); border: 1px solid rgba(196,87,42,.45);
  transition: background .2s, gap .2s, border-color .2s;
}
.deck-tv__cta:hover { background: rgba(196,87,42,.32); border-color: rgba(196,87,42,.7); gap: 11px; }
.deck-tv__cta span:last-child { display: inline-block; transition: transform .2s; }
.deck-tv__cta:hover span:last-child { transform: translateX(3px); }

/* the base bar under the screen */
.deck-tv__base { display: flex; align-items: center; gap: 14px; padding: 11px 8px 12px; }
.deck-tv__brand { font-family: var(--font-serif); font-size: 16px; color: #fff; }
.deck-tv__basemsg { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(243,236,230,.5); }
.deck-tv__knob { margin-left: auto; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6b6f86, #2a2e42); box-shadow: 0 0 0 2px rgba(255,255,255,.08); }

/* --- the remote --- */
.remote {
  max-width: 344px; margin: 30px auto 0;
  background: linear-gradient(165deg, #232739, #171a26);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px; padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 40px rgba(16,18,25,.28);
}
.remote__head { display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px; }
.remote__led { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-rust); box-shadow: 0 0 8px rgba(196,87,42,.9); animation: ledPulse 2.4s ease-in-out infinite; }
@keyframes ledPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.remote__readout { font-family: var(--font-mono); font-size: 14px; letter-spacing: .18em; color: #ffd9c4; }
.remote__status { margin-left: auto; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em; color: rgba(243,236,230,.5); }
.remote__status[data-state="paused"] { color: var(--accent-rust); }

.remote__body { display: flex; gap: 12px; align-items: stretch; }
.remote__pad { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.remote__key {
  min-width: 44px; min-height: 44px; cursor: pointer;
  font-family: var(--font-mono); font-size: 16px; color: rgba(243,236,230,.9);
  background: linear-gradient(180deg, #2c3143, #1c2030);
  border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 4px rgba(0,0,0,.35);
  transition: transform .08s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}
.remote__key:hover { background: linear-gradient(180deg, #333850, #212536); }
.remote__key:active { transform: translateY(1px) scale(.97); box-shadow: inset 0 2px 5px rgba(0,0,0,.5); }
.remote__key.is-active {
  background: var(--accent-rust); color: #fff; border-color: rgba(196,87,42,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 0 1px rgba(196,87,42,.5), 0 0 14px rgba(196,87,42,.5);
}
.remote__key:focus-visible { outline: 2px solid #ffd9c4; outline-offset: 2px; }

.remote__rocker { display: flex; flex-direction: column; gap: 6px; width: 52px; }
.remote__rock {
  flex: 1; min-height: 44px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; color: rgba(243,236,230,.7);
  background: linear-gradient(180deg, #2c3143, #1c2030);
  border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 4px rgba(0,0,0,.35);
  transition: transform .08s ease, background .18s ease, box-shadow .18s ease;
}
.remote__rock--down { flex-direction: column-reverse; }
.remote__rock:hover { background: linear-gradient(180deg, #333850, #212536); color: #ffd9c4; }
.remote__rock:active { transform: translateY(1px) scale(.97); box-shadow: inset 0 2px 5px rgba(0,0,0,.5); }
.remote__rock:focus-visible { outline: 2px solid #ffd9c4; outline-offset: 2px; }

.deck-spotlight { margin-top: 44px; }

@media (prefers-reduced-motion: reduce) {
  .deck-tv__scan { display: none; }
  .remote__led { animation: none; }
}
@media (max-width: 560px) {
  .deck-tv { padding: 10px 10px 0; border-radius: 16px; }
  /* the 3-layer channels (long title + tech name + long description) need more
     vertical room than the old 2-layer copy; the screen keeps a hard height floor
     here so the tallest entry (#4, #6) never overlaps or clips at phone widths. */
  .deck-tv__screen { min-height: 366px; }
  .deck-tv .channel { padding: 26px 16px 54px; gap: 10px; }
  .deck-tv .channel__title { font-size: clamp(22px, 6.2vw, 30px); }
  .remote { max-width: 320px; }
}

/* ---------- PROCESS ---------- */
.process__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.step { background: var(--surface); border: 1px solid var(--surface-line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-card); }
.step__n { font-family: var(--font-serif); font-size: 40px; color: var(--accent-rust); display: block; line-height: 1; margin-bottom: 14px; }
.step h3 { font-family: var(--font-serif); font-weight: 400; font-size: 20px; margin: 0 0 6px; }
.step p { margin: 0; font-size: 14px; color: var(--text-muted); }

/* ---------- CASE STUDIES ---------- */
.work__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.work-card h3 { font-family: var(--font-serif); font-weight: 400; font-size: 21px; margin: 16px 0 4px; display: flex; justify-content: space-between; gap: 12px; }
.work-card .arrow { color: var(--accent-rust); }
.work-card .meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--text-muted); margin: 0; }
.tv-thumb {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius);
  background: linear-gradient(165deg, #2f3247, var(--ink-navy));
  border: 1px solid var(--surface-line); display: grid; place-items: center;
  box-shadow: var(--shadow-card); overflow: hidden;
}
.tv-screen {
  width: 64%; height: 58%; border-radius: 10px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 4px),
    radial-gradient(120% 120% at 50% 30%, var(--accent-rust) 0%, var(--accent-rust-d) 60%, #7d3320 100%);
  box-shadow: inset 0 0 24px rgba(0,0,0,.45), 0 0 0 4px #14161f; position: relative;
}
.tv-screen::after {
  content: ""; position: absolute; inset: 0; border-radius: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .25; mix-blend-mode: overlay;
}

/* ---------- CONTACT ---------- */
.contact__form { max-width: 640px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--text-muted); }
.field input, .field textarea { font-family: var(--font-sans); font-size: 15px; padding: 12px 14px; border: 1px solid var(--surface-line); border-radius: 12px; background: var(--surface-2); color: var(--ink-navy); resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent-rust); }
.contact__form .btn { grid-column: 1 / -1; }
.form-status { grid-column: 1 / -1; text-align: center; font-size: 14px; color: var(--accent-rust); min-height: 18px; margin: 0; }

/* ---------- FOOTER ---------- */
.footer { background: var(--ink-navy); color: #f3ece6; }
.footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 56px 24px 40px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: start; }
.footer__clock { font-family: var(--font-serif); font-size: 28px; color: #fff; }
.footer__cols { display: flex; gap: 48px; }
.footer__cols div { display: flex; flex-direction: column; gap: 8px; }
.footer__cols a { text-decoration: none; color: rgba(243,236,230,.7); font-size: 14px; }
.footer__cols a:hover { color: var(--accent-rust); }
.footer__legal { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 11px; color: rgba(243,236,230,.5); letter-spacing: .04em; }

/* ---------- FLOATING ASSISTANT (add-on) ---------- */
.assistant {
  position: fixed; left: 50%; top: 50%; z-index: 95;   /* above the .nav (z-index 90) so the minimize control is never covered when the widget is expanded near the top of the page; still below the modal (100) */
  transform: translate(-50%, -50%);
  width: 540px; max-width: calc(100vw - 32px);
  /* Frosted, orange-tinted crystal glass (Emanuel-style transparency) */
  background: linear-gradient(155deg, rgba(255,252,250,.55), rgba(255,235,225,.38));
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 22px;
  /* 3D depth: floating shadow + inner top highlight + warm bottom rim */
  box-shadow:
    0 26px 60px rgba(26,30,46,.22),
    0 6px 18px rgba(26,30,46,.12),
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -18px 38px rgba(196,87,42,.12),
    inset 0 0 0 1px rgba(255,255,255,.22);
  backdrop-filter: blur(9px) saturate(1.25);
  -webkit-backdrop-filter: blur(9px) saturate(1.25);
  overflow: hidden;
  transition: width .3s ease, box-shadow .3s ease, bottom .35s cubic-bezier(.4,0,.2,1);
}
/* glassy specular sheen for the crystal look */
.assistant::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(135deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 38%);
}
.assistant > * { position: relative; z-index: 3; }
.assistant__bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: default; border-bottom: 1px solid var(--surface-line); }
.assistant__online { display: inline-flex; }
.assistant__prompt { flex: 1; font-size: 13.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assistant__toggle { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--surface-line); background: var(--surface-2); color: var(--ink-navy); cursor: pointer; transition: background .2s, color .2s; }
.assistant__toggle:hover { background: var(--accent-rust); color: #fff; border-color: var(--accent-rust); }
.assistant__toggle .ic-up { display: none; }

.assistant__panel { display: block; }
.assistant__header { display: flex; align-items: center; gap: 12px; padding: 14px; border-bottom: 1px solid var(--surface-line); }
.assistant__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--surface-line); font-family: var(--font-serif); font-size: 13px; font-weight: 400; color: var(--accent-rust); }
.assistant__id { display: flex; flex-direction: column; line-height: 1.25; }
.assistant__id strong { font-size: 14px; }
.assistant__id em { font-style: normal; font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.assistant__body { padding: 14px; max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
/* Subtle 3D lift — same recipe as .callme (top highlight + drop shadow +
   hairline border) but much quieter, so bubbles read as depth, not plastic. */
.bubble {
  align-self: flex-start; flex-shrink: 0; max-width: 85%; background: var(--surface-2); border: 1px solid var(--surface-line); padding: 10px 14px; border-radius: 12px; font-size: 14px; min-height: 1em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(39,42,63,.05), 0 4px 12px rgba(39,42,63,.07);
}
.bubble--user {
  align-self: flex-end; background: var(--ink-navy); color: #fff; border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(26,30,46,.18), 0 4px 14px rgba(26,30,46,.2);
}
/* blinking caret while "Mike" is typing */
.bubble.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; background: var(--accent-rust); margin-left: 2px; vertical-align: -2px; animation: caret .9s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Typing indicator bubble: three dots + a small italic label. Shown the
   instant a message is sent, and between chunks of a multi-message reply. */
.bubble--typing { display: flex; align-items: center; gap: 8px; font-style: italic; color: var(--text-muted); }
.bubble--typing .typing-label { font-size: 12.5px; }
.typing-dots { display: inline-flex; align-items: center; gap: 3px; }
.typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-rust); opacity: .5; font-style: normal; animation: typingBounce 1.1s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .typing-dots i { animation: none; opacity: .7; }
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; flex-shrink: 0; }
.chips[hidden] { display: none; }
.chips:not([hidden]) { animation: chipsIn .4s ease both; }
@keyframes chipsIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chip { font-family: var(--font-sans); font-size: 13px; padding: 7px 13px; border-radius: var(--radius-pill); border: 1px solid var(--surface-line); background: var(--surface-2); color: var(--ink-soft); cursor: pointer; transition: all .18s; }
.chip:hover { border-color: var(--accent-rust); color: var(--accent-rust); }
.chip.is-active { background: var(--accent-rust); color: #fff; border-color: var(--accent-rust); }
.assistant__foot { display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid var(--surface-line); }
.assistant__input { flex: 1; min-width: 0; border: 1px solid var(--surface-line); background: var(--surface-2); border-radius: var(--radius-pill); padding: 9px 14px; font-family: var(--font-sans); font-size: 14px; color: var(--ink-navy); }
.assistant__input:focus { outline: none; border-color: var(--accent-rust); }
.assistant__call { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--accent-rust); color: var(--accent-rust); background: transparent; border-radius: var(--radius-pill); padding: 8px 12px; font-family: var(--font-sans); font-size: 13px; cursor: pointer; transition: all .2s; }
.assistant__call:hover { background: var(--accent-rust); color: #fff; }
.assistant__call span { display: none; }
.assistant__send { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; border: none; background: var(--ink-navy); color: #fff; cursor: pointer; transition: background .2s; }
.assistant__send:hover { background: var(--accent-rust); }

/* Collapsed: shrink to the bar and dock to the bottom of the page (Emanuel-style) */
.assistant[data-state="collapsed"] {
  width: 460px;
  top: auto; bottom: 24px;
  transform: translateX(-50%);
}
.assistant[data-state="collapsed"] .assistant__bar { padding: 16px 18px; }
.assistant__body { max-height: 52vh; }
.assistant[data-state="collapsed"] .assistant__panel { display: none; }
.assistant[data-state="collapsed"] .assistant__bar { border-bottom: none; }
.assistant[data-state="collapsed"] .assistant__toggle .ic-down { display: none; }
.assistant[data-state="collapsed"] .assistant__toggle .ic-up { display: block; }

/* ---------- MODAL ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(39,42,63,.4); backdrop-filter: blur(4px); }
.modal[hidden] { display: none; }
.modal__card { background: var(--surface-2); border-radius: var(--radius); padding: 32px; max-width: 420px; text-align: center; position: relative; box-shadow: var(--shadow-card); }
.modal__card h3 { font-family: var(--font-serif); font-weight: 400; margin: 0 0 10px; font-size: 24px; }
.modal__card p { margin: 0 0 20px; }
.modal__close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-muted); }

/* ---------- Shared: mono micro-label ---------- */
.mono-label { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; color: var(--accent-rust); margin-bottom: 14px; }

/* ---------- TESTIMONIALS marquee ---------- */
.testimonials .section__head { margin-bottom: 40px; }
/* Position is driven entirely in JS (drag, momentum, pointer-direction speed bias),
   so there is no CSS keyframe and no hover pause. touch-action: pan-y keeps vertical
   page scrolling native while horizontal swipes are ours. */
.marquee {
  position: relative; width: 100%; overflow: hidden; padding: 6px 0 10px;
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee:focus-visible { outline: 2px solid var(--accent-rust); outline-offset: 4px; border-radius: 8px; }
.marquee__track { display: flex; flex-wrap: nowrap; width: max-content; will-change: transform; }
.marquee__group { display: flex; flex-wrap: nowrap; }
.marquee__hint {
  margin: 14px 0 0; text-align: center;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint);
}
.t-card { flex: 0 0 auto; width: 360px; margin-right: 22px; border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-card); }
.t-card--a { background: var(--surface-2); border: 1px solid var(--surface-line); display: flex; flex-direction: column; gap: 14px; }
.t-topline { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--accent-rust); margin: 0; }
.t-head { display: flex; align-items: center; gap: 12px; }
.t-photo { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(196,87,42,.25); }
.t-photo--initials { display: grid; place-items: center; background: var(--bg-base); color: var(--accent-rust); font-family: var(--font-serif); font-size: 16px; letter-spacing: .02em; }
.t-name { margin: 0; font-family: var(--font-serif); font-size: 17px; line-height: 1.1; }
.t-role { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }
.t-stars { margin: 3px 0 0; color: var(--accent-rust); font-size: 13px; letter-spacing: 2px; line-height: 1; }
.t-quote { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
/* ---------- B cards: the pull quotes, given a broadcast treatment ----------
   The site's whole language is TV channels, so the quote cards are CRT screens:
   a dark navy tube with scanlines and a rust glow, a mono ON AIR tag and channel
   number, a scanline sweep and a channel-flip pop as each one enters frame, and
   the quote itself rising out of a documentary lower-third. The .is-live class is
   added/removed by JS as the card passes through the marquee window, so the
   treatment replays on every pass instead of firing once. */
.t-card--b {
  position: relative; overflow: hidden; width: 320px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 26px 24px;
  background: radial-gradient(120% 110% at 50% 22%, #262a3e, var(--ink-navy) 62%, #12141d 100%);
  border: 1px solid rgba(196,87,42,.3);
  box-shadow:
    inset 0 0 0 3px #0d0f17,
    inset 0 0 44px rgba(0,0,0,.72),
    0 18px 44px -18px rgba(26,30,46,.6);
}
/* the tube: scanlines + a soft rust bloom behind the type */
.t-b__crt {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(62% 52% at 50% 48%, rgba(196,87,42,.26), rgba(196,87,42,0) 72%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.20) 0 1px, transparent 1px 3px);
}
/* CRT corner vignette, so it reads as glass and not a flat rectangle */
.t-card--b::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  box-shadow: inset 0 0 46px 10px rgba(0,0,0,.5);
}
/* scanline sweep racing down as the card enters frame */
.t-b__sweep {
  position: absolute; left: -6%; right: -6%; height: 26%; top: -30%; z-index: 3; opacity: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(255,226,198,.16) 45%, rgba(255,240,225,.5) 52%, rgba(255,226,198,.14) 60%, transparent);
}
.t-card--b.is-live .t-b__sweep { animation: tbSweep 1.05s cubic-bezier(.35,0,.2,1) .12s; }
@keyframes tbSweep {
  0%   { top: -30%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 104%; opacity: 0; }
}
/* mono broadcast tags */
.t-b__onair, .t-b__ch {
  position: absolute; top: 14px; z-index: 5;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em;
  color: rgba(255,214,188,.82); text-shadow: 0 0 8px rgba(196,87,42,.65);
}
.t-b__onair { left: 16px; display: inline-flex; align-items: center; gap: 6px; }
.t-b__ch { right: 16px; }
.t-b__dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent-rust);
  box-shadow: 0 0 8px 2px rgba(196,87,42,.75);
}
.t-card--b.is-live .t-b__dot { animation: tbPulse 1.9s ease-in-out infinite; }
@keyframes tbPulse { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
/* the quote, rising out of the lower-third mask */
.t-b__stage { position: relative; z-index: 5; display: block; overflow: hidden; padding: 4px 0; width: 100%; }
.t-phrase {
  margin: 0; font-family: var(--font-serif); font-style: italic;
  font-size: clamp(20px, 1.9vw, 26px); line-height: 1.22; color: #fff6ee;
  text-shadow: 0 2px 14px rgba(0,0,0,.55), 0 0 26px rgba(196,87,42,.28);
}
/* The hidden start state is gated on .tv-b, which app.js sets on <html>. If the
   script never runs, the quotes still render — they just don't animate in. */
.tv-b .t-phrase {
  transform: translateY(105%); opacity: 0;
  transition: transform .62s cubic-bezier(.2,.85,.25,1) .18s, opacity .4s ease .18s;
}
.tv-b .t-card--b.is-live .t-phrase { transform: none; opacity: 1; }
.tv-b .t-b__lower { transform: scaleX(0); }
.t-phrase::before { content: "\201C"; color: var(--accent-rust); }
.t-phrase::after  { content: "\201D"; color: var(--accent-rust); }
/* the documentary lower-third rule, drawing left to right under the quote */
.t-b__lower {
  position: absolute; left: 24px; bottom: 18px; z-index: 5;
  height: 2px; width: calc(100% - 48px); border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-rust), rgba(196,87,42,0));
  transform-origin: left center;
  transition: transform .8s cubic-bezier(.2,.85,.25,1) .22s;
}
.t-card--b.is-live .t-b__lower { transform: scaleX(1); }
/* the channel-flip pop: the whole tube snaps open like a CRT settling */
.t-card--b.is-live { animation: tbFlip .5s cubic-bezier(.2,.85,.25,1); }
@keyframes tbFlip {
  0%   { filter: brightness(2.4) contrast(1.3); }
  30%  { filter: brightness(1.4); }
  100% { filter: none; }
}
/* No motion: everything lands in its final state, nothing animates. */
@media (prefers-reduced-motion: reduce) {
  .t-card--b, .t-card--b.is-live { animation: none !important; }
  .t-b__sweep { display: none; }
  .t-card--b.is-live .t-b__dot { animation: none; }
  .t-phrase { transform: none !important; opacity: 1 !important; transition: none !important; }
  .t-b__lower { transform: scaleX(1) !important; transition: none !important; }
}

/* ---------- SERVICES links + feature/phone sim ---------- */
.svc-card { display: flex; flex-direction: column; }
.svc-card:not([data-svc]) p { flex: 1; }
.svc-card[data-svc] .svc-card__short { flex: 1; }
.svc-link { margin-top: 14px; align-self: flex-start; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--accent-rust); text-decoration: none; transition: gap .2s; display: inline-flex; gap: 6px; }
.svc-link:hover { color: var(--accent-rust-d); }
.svc-link:hover span { transform: translateX(3px); }
.svc-link span { display: inline-block; transition: transform .2s; }
/* Stacked, not side-by-side: each phone now carries a description under it, and a
   176px-wide column cannot hold a readable paragraph. Text on top, phones in a
   full-width row below. */
.svc-feature { grid-column: 1 / -1; flex-direction: column; align-items: stretch; gap: 30px; background: linear-gradient(155deg, var(--surface-2), var(--bg-base)); }
.svc-feature__text { flex: 0 0 auto; max-width: 720px; }
.svc-feature__text h3 { font-size: 26px; margin-bottom: 10px; }
.phones { display: flex; gap: 26px; justify-content: center; align-items: flex-start; width: 100%; max-width: 100%; }
.phone { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; flex: 1 1 0; min-width: 0; max-width: 300px; }
.phone__body {
  position: relative; width: 176px; max-width: 100%; aspect-ratio: 176 / 358;
  border-radius: 34px; background: #0c0e16; padding: 7px; flex: 0 0 auto;
  box-shadow: 0 24px 48px -18px rgba(26,30,46,.7), inset 0 0 0 2px #23263a, 0 0 0 1px rgba(196,87,42,.25);
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s ease;
}
.phone__notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 62px; height: 16px; border-radius: 10px; background: #000; z-index: 7; pointer-events: none; }
.phone__screen { position: relative; width: 100%; height: 100%; border-radius: 27px; overflow: hidden; background: #141110; }
.phone__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Full-bleed enlarge target. Nothing else sits on the video: the videos carry
   their own burned-in captions, and a second layer of text on top made both
   unreadable. */
.phone__open { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; padding: 0; border: none; background: transparent; cursor: zoom-in; }
.phone__open:focus-visible { outline: 2px solid var(--accent-rust); outline-offset: -4px; border-radius: 27px; }
/* the one micro-label we keep, where the handle used to be */
.phone__stamp {
  position: absolute; left: 10px; bottom: 12px; z-index: 6; pointer-events: none;
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 500; letter-spacing: .14em;
  color: rgba(255,255,255,.86); text-shadow: 0 1px 6px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.6);
}
.phone__zoom {
  position: absolute; right: 10px; top: 10px; z-index: 6; pointer-events: none;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  color: #fff; background: rgba(12,14,22,.45); border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: .7; transition: opacity .22s ease, background .22s ease;
}
.phone__body:hover .phone__zoom, .phone__open:focus-visible ~ .phone__zoom { opacity: 1; background: rgba(196,87,42,.85); }
.phone__body:hover { transform: translateY(-4px); box-shadow: 0 32px 60px -20px rgba(26,30,46,.75), inset 0 0 0 2px #23263a, 0 0 0 1px rgba(196,87,42,.45); }

.phone__mute { position: absolute; right: 10px; bottom: 10px; z-index: 8; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: none; cursor: pointer; background: rgba(196,87,42,.9); color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.4); transition: background .2s; }
.phone__mute:hover { background: var(--accent-rust); }
.phone__mute .ic-unmuted { display: none; }
.phone__mute[data-muted="false"] .ic-muted { display: none; }
.phone__mute[data-muted="false"] .ic-unmuted { display: block; }

/* description under each phone: what the system actually did */
.phone__cap { display: flex; flex-direction: column; gap: 7px; text-align: center; }
.phone__kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--accent-rust); }
.phone__desc { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: var(--text-muted); }

/* keeps the row from collapsing while a phone is lifted into the lightbox */
.phone__slot { flex: 0 0 auto; width: 176px; max-width: 100%; aspect-ratio: 176 / 358; }

@media (prefers-reduced-motion: reduce) {
  .phone__body, .phone__body:hover { transition: none; transform: none; }
}

/* ---------- Phone lightbox ---------- */
.plight { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: rgba(14,16,26,.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: plightIn .24s ease both; }
.plight[hidden] { display: none; }
.plight__stage { display: grid; place-items: center; }
/* the real .phone__body node is moved in here, so the <video> never restarts */
/* height-first so a tall phone can never be wider than the viewport:
   358/176 = 2.034, so the third term is "as tall as the widest phone that fits". */
.plight__stage .phone__body {
  height: min(78vh, 720px, calc((100vw - 56px) * 2.034));
  width: auto; max-width: none;
  aspect-ratio: 176 / 358;
  box-shadow: 0 50px 110px -30px rgba(0,0,0,.85), inset 0 0 0 2px #23263a, 0 0 0 1px rgba(196,87,42,.5);
  animation: plightPop .3s cubic-bezier(.2,.9,.25,1) both;
}
.plight__stage .phone__body:hover { transform: none; }
.plight__stage .phone__open { cursor: default; }
.plight__stage .phone__zoom { display: none; }
.plight__close {
  position: absolute; top: 18px; right: 20px; z-index: 2;
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.1); color: #fff;
  font-size: 24px; line-height: 1; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .2s ease, border-color .2s ease;
}
.plight__close:hover, .plight__close:focus-visible { background: var(--accent-rust); border-color: var(--accent-rust); outline: none; }
@keyframes plightIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes plightPop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
body.is-locked { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .plight, .plight__stage .phone__body { animation: none; }
}

/* ---------- Work cards as links ---------- */
.work-card { text-decoration: none; color: inherit; display: block; transition: transform .2s; }
.work-card:hover { transform: translateY(-3px); }
.work-card:hover .arrow { color: var(--accent-rust-d); }

/* ---------- PRE-AUDIT ---------- */
.preaudit { max-width: 760px; margin: 0 auto; background: var(--surface-2); border: 1px solid var(--surface-line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-card); }
.preaudit__form { display: block; }
.field__help { font-size: 12px; color: var(--text-faint); }

/* --- ONE form. The 3-step wizard is gone: steps made the ask feel like a survey,
       and every "Next" was a place to quit. All five questions are on screen at
       once, and the optional two are pushed into a quieter group so the eye reads
       "three things" and not "a form". --- */
.pa-one__head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--surface-line);
}
.pa-one__tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  color: var(--accent-rust); border: 1px solid var(--surface-line);
  border-radius: var(--radius-pill); padding: 4px 10px; background: var(--bg-base);
  flex: 0 0 auto;
}

.pa-one__ask .field + .field { margin-top: 20px; }

/* the optional half: same fields, quieter frame. Inset, no card fill, dashed rule. */
.pa-one__extra {
  margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--surface-line);
  opacity: .86; transition: opacity .25s ease;
}
.pa-one__extra:hover, .pa-one__extra:focus-within { opacity: 1; }
.pa-one__extra .field + .field { margin-top: 18px; }
.pa-one__extra-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.pa-one__opt {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em;
  color: var(--text-faint); border: 1px dashed var(--surface-line);
  border-radius: var(--radius-pill); padding: 3px 9px; flex: 0 0 auto;
}
.pa-one__extra-note { font-size: 12.5px; color: var(--text-faint); }
.field__opt {
  font-style: normal; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .14em; color: var(--text-faint); opacity: .8; margin-left: 4px;
}

/* invalid on submit — human message lives in .form-status, this is just the marker */
.field.is-bad input, .field.is-bad textarea { border-color: var(--accent-rust); }

/* $ prefix on the rate field */
.field__prefix { position: relative; display: block; }
.field__prefix i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-family: var(--font-mono); font-size: 14px; color: var(--text-faint); pointer-events: none;
}
.field__prefix input { width: 100%; padding-left: 30px; }

.pa-go { margin-top: 28px; min-height: 52px; }
.preaudit__result { margin-top: 8px; }
.preaudit__result-head { margin: 0 0 18px; }
.preaudit__result-head h3 { font-family: var(--font-serif); font-weight: 400; font-size: 24px; margin: 6px 0 0; }
.preaudit__loading { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 20px 4px 10px; }
/* Retro CRT loading state */
.tv-load { width: 100%; max-width: 340px; margin: 0 auto; }
.tv-load__screen { position: relative; aspect-ratio: 4 / 3; border-radius: 16px / 22px; overflow: hidden; background: radial-gradient(120% 130% at 50% 32%, #221a17, #0e0b0a 72%); box-shadow: inset 0 0 0 3px #0a0708, inset 0 0 34px rgba(0,0,0,.78), 0 18px 40px -16px rgba(26,30,46,.6), 0 0 0 1px rgba(196,87,42,.28); }
.tv-load__static { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; mix-blend-mode: screen; }
.tv-load__scan { position: absolute; left: 0; right: 0; height: 22%; top: -22%; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(255,222,194,.16), transparent); animation: tvScan 3.6s linear infinite; }
.tv-load__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 50% 45%, rgba(196,87,42,.20), transparent 70%); }
.tv-load__vignette { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 60px 12px rgba(0,0,0,.55); background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px); }
.tv-load__ch { position: absolute; top: 10px; left: 12px; z-index: 3; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: rgba(255,214,188,.85); text-shadow: 0 0 8px rgba(196,87,42,.6); }
.tv-load__phrasewrap { position: absolute; inset: auto 14px 15px; z-index: 3; min-height: 2.4em; display: flex; align-items: flex-end; }
.tv-load__phrase { font-family: var(--font-serif); font-size: clamp(16px, 2.1vw, 21px); line-height: 1.15; color: #fff6ee; text-shadow: 0 1px 10px rgba(0,0,0,.6), 0 0 18px rgba(196,87,42,.35); opacity: 1; transform: translateY(0); transition: opacity .34s ease, transform .34s ease; }
.tv-load__phrase.is-out { opacity: 0; transform: translateY(6px); }
.tv-load__base { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--text-muted); }
.tv-load__brand { font-family: var(--font-serif); letter-spacing: normal; font-size: 13px; color: var(--ink-navy); }
.tv-load__live { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-rust); }
.tv-load__knob { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d98a5f, var(--accent-rust)); box-shadow: inset 0 0 0 2px rgba(0,0,0,.15); }
@keyframes tvScan { from { top: -22%; } to { top: 100%; } }
@media (prefers-reduced-motion: reduce) { .tv-load__scan { display: none; } .tv-load__phrase { transition: none; } }
.auto-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 22px; }
.auto-card { background: var(--bg-base); border: 1px solid var(--surface-line); border-radius: 12px; padding: 18px; }
.auto-card h4 { font-family: var(--font-serif); font-size: 18px; margin: 0 0 6px; }
.auto-card p { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); }
.auto-card .hours { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--accent-rust); }
.roi { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--ink-navy), #262a3d); color: #f3ece6; border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-card); }
.roi > * { position: relative; z-index: 1; }
.roi .mono-label { color: rgba(243,236,230,.6); }
.roi__row { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(243,236,230,.14); }
.roi__label { font-size: 13px; color: rgba(243,236,230,.7); }
.roi__val { font-family: var(--font-serif); font-size: 26px; color: #fff; }
.roi__big { display: flex; align-items: baseline; justify-content: space-between; padding-top: 16px; }
.roi__mult { font-family: var(--font-serif); font-size: clamp(30px, 6vw, 44px); color: var(--accent-rust); line-height: 1; }
/* no rate given = no money claims. The rows are removed, not faked. */
.roi[data-rate="none"] .roi__row--money, .roi[data-rate="none"] .roi__big--money { display: none; }
.roi__big--hours .roi__mult { color: #fff; }
/* .roi__row/.roi__big set display:flex, which beats the UA [hidden]{display:none}.
   Without these, hiding a row whose number the backend did not send silently fails. */
.roi[hidden], .roi__row[hidden], .roi__big[hidden], .roi__foot[hidden] { display: none; }
.roi__foot { margin: 14px 0 0; font-size: 12px; color: rgba(243,236,230,.5); }

/* ---------- Pre-audit: needs_more_info state ---------- */
.preaudit__more[hidden] { display: none; }
.preaudit__more { padding: 4px 0 2px; }
.preaudit__note {
  margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--text-muted);
  padding-left: 14px; border-left: 2px solid var(--accent-rust);
}
.pa-questions { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.pa-question {
  position: relative; padding: 14px 16px 16px 42px;
  background: var(--bg-base); border: 1px solid var(--surface-line); border-radius: 12px;
  font-size: 14.5px; line-height: 1.5; color: var(--ink-soft);
  counter-increment: paq;
}
.pa-questions { counter-reset: paq; }
.pa-question::before {
  content: counter(paq);
  position: absolute; left: 14px; top: 13px;
  display: grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--accent-rust); color: #fff;
  font-family: var(--font-mono); font-size: 10px; line-height: 1;
}
/* the question itself, then the box you answer it in, right underneath it */
.pa-question__text { margin: 0 0 10px; }
.pa-answer {
  display: block; width: 100%; font-family: var(--font-sans); font-size: 15px;
  padding: 10px 12px; border: 1px solid var(--surface-line); border-radius: 10px;
  background: var(--surface-2); color: var(--ink-navy);
  resize: vertical; min-height: 62px; line-height: 1.5;
}
.pa-answer:focus { outline: none; border-color: var(--accent-rust); }
.pa-answer::placeholder { color: var(--text-faint); }
.pa-more__go[hidden] { display: none; }
.pa-more__go { min-height: 52px; }
/* the "rather edit the original form" escape hatch: still there, now clearly second */
.pa-more__alt { margin: 10px 0 0; text-align: center; }
.linklike {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0 8px; background: none; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 13.5px; color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.linklike:hover, .linklike:focus-visible { color: var(--accent-rust); }

/* second paragraph of a proposal card: how it actually works */
.auto-card__how { font-size: 12.5px !important; color: var(--text-faint) !important; }
/* Living ROI panel: breathing rust number, shimmer sweep, count-up settle */
.roi__val, .roi__mult { transform-origin: right center; }
.roi.is-live .roi__mult { animation: roiBreathe 3.6s ease-in-out infinite; }
.roi.is-live::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(255,240,230,.16) 50%, transparent 58%); transform: translateX(-130%); animation: roiShimmer 7s ease-in-out 1.4s infinite; }
.roi__val.is-settle { animation: roiSettle .6s cubic-bezier(.2,.8,.3,1); }
@keyframes roiBreathe { 0%, 100% { text-shadow: 0 0 0 rgba(196,87,42,0); } 50% { text-shadow: 0 0 16px rgba(196,87,42,.55), 0 0 30px rgba(196,87,42,.22); } }
@keyframes roiShimmer { 0% { transform: translateX(-130%); } 16%, 100% { transform: translateX(130%); } }
@keyframes roiSettle { 0% { transform: scale(1.05); } 55% { transform: scale(.99); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .roi.is-live .roi__mult, .roi.is-live::after, .roi__val.is-settle { animation: none; } }

/* The Instagram chrome overlay (.ig*) was removed in Job 5b: it sat on top of the
   videos own burned-in captions and made both unreadable. */

.preaudit__fallback { text-align: center; padding: 20px 4px 4px; }
.preaudit__fallback p { color: var(--text-muted); }
.preaudit__fallback-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.preaudit2 { max-width: 760px; margin: 28px auto 0; background: var(--surface-2); border: 1px solid var(--surface-line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-card); }
.preaudit2__head { margin: 0 0 20px; }
.preaudit2__head h3 { font-family: var(--font-serif); font-weight: 400; font-size: 24px; margin: 6px 0 8px; }
.preaudit2__head p { margin: 0; }
.preaudit2__form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.preaudit2__form .btn { grid-column: 1 / -1; }

.process__cta { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
.process__cta p { margin: 0; font-family: var(--font-serif); font-size: 20px; }

/* ---------- FAQ accordion ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--surface-line); }
.faq__q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-family: var(--font-serif); font-size: clamp(18px, 2vw, 22px); color: var(--ink-navy); padding: 22px 4px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq__q:hover { color: var(--accent-rust); }
.faq__ico { font-family: var(--font-sans); font-size: 26px; color: var(--accent-rust); transition: transform .25s; flex: 0 0 auto; }
.faq__q[aria-expanded="true"] .faq__ico { transform: rotate(45deg); }
.faq__a { overflow: hidden; max-height: 0; transition: max-height .3s ease; }
.faq__a p { margin: 0; padding: 0 4px 22px; color: var(--text-muted); font-size: 15px; max-width: 64ch; }

/* ---------- BLOG / FROM THE LAB ----------
   One real post, sold like a post: thumbnail, title, hook, date, reading time.
   The whole <a> is the target. Same zoom-and-settle language as the
   Ways stations (see .lab-card.reveal.is-zooming below + app.js armZoomCleanup). */
.lab-card {
  display: grid; grid-template-columns: 1fr; gap: 0;
  text-decoration: none; color: inherit; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--surface-line);
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}
@media (min-width: 860px) { .lab-card { grid-template-columns: 420px 1fr; } }

.lab-card__media {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--ink-navy);
  border-bottom: 1px solid var(--surface-line);
}
@media (min-width: 860px) {
  .lab-card__media { aspect-ratio: auto; height: 100%; border-bottom: 0; border-right: 1px solid var(--surface-line); }
}
.lab-card__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2,.85,.25,1);
}
/* the tube treatment: scanlines + a rust wash, so the thumbnail reads as a channel */
.lab-card__scan {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(196,87,42,.16), rgba(196,87,42,.16)),
    repeating-linear-gradient(0deg, rgba(0,0,0,.20) 0 1px, rgba(0,0,0,0) 1px 3px);
  box-shadow: inset 0 0 50px 10px rgba(0,0,0,.42);
}
.lab-card__ch {
  position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em;
  color: rgba(255,214,188,.9); text-shadow: 0 0 8px rgba(196,87,42,.6);
}
.lab-card__dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent-rust);
  box-shadow: 0 0 8px 2px rgba(196,87,42,.7);
}

.lab-card__body { display: flex; flex-direction: column; justify-content: center; padding: 28px 26px 26px; }
@media (min-width: 860px) { .lab-card__body { padding: 42px 44px; } }
.lab-card__meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  color: var(--text-faint); margin-bottom: 16px;
}
.lab-card__meta b {
  font-weight: 500; padding: 4px 9px; border-radius: var(--radius-pill);
  background: var(--accent-rust); color: #fff; letter-spacing: .18em;
}
.lab-card__meta i { font-style: normal; }
.lab-card__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(24px, 3.2vw, 34px); line-height: 1.12; letter-spacing: -.015em;
  margin: 0 0 14px; color: var(--ink-navy);
}
.lab-card__title i { font-style: italic; color: var(--accent-rust); }
.lab-card__hook { margin: 0 0 20px; font-size: 15.5px; line-height: 1.6; color: var(--text-muted); max-width: 54ch; }
.lab-card__go {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  color: var(--accent-rust); display: inline-flex; align-items: center; gap: 8px;
}
.lab-card__go i { font-style: normal; transition: transform .25s ease; }

.lab-card:hover .lab-card__go i, .lab-card:focus-visible .lab-card__go i { transform: translateX(5px); }
.lab-card:hover .lab-card__img { transform: scale(1.04); }
.lab-card:focus-visible { outline: 2px solid var(--accent-rust); outline-offset: 4px; }

/* zoom-and-settle on reveal, same curve as .way */
.lab-card.reveal { transform: translateY(16px) scale(1.05); transition: opacity .6s ease, transform .25s ease, box-shadow .25s ease; }
.lab-card.reveal.is-in { transform: none; }
.lab-card.reveal.is-zooming { transition: opacity .6s ease, transform .82s cubic-bezier(.34, 1.4, .64, 1); will-change: transform, opacity; }
.lab-card.reveal.is-in:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift, 0 24px 50px -24px rgba(26,30,46,.4)); }

/* ---------- STANDBY CARDS: the two posts that are not written yet ----------
   Deliberately NOT links and deliberately NOT the same weight as the real card.
   They are dead channels: navy tube, no thumbnail, no arrow, no hover lift. If they
   looked clickable we would be back to the old section, where three "COMING SOON"
   tiles that went nowhere buried the one post that existed.

   Layout: one column at 390px, two from 640px up. Never three, because there are
   only ever two, and auto-fill would stretch a lone card across a 1440px row.
   The CRT wash is one static gradient painted once. No animation, no image, no
   IntersectionObserver of their own: they ride the shared .reveal. */
.lab-soon {
  display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 18px;
}
@media (min-width: 640px) { .lab-soon { grid-template-columns: 1fr 1fr; } }

.lab-soon__card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 24px 24px 22px;
  min-height: 168px;
  border: 1px dashed rgba(26, 30, 46, 0.16);
  border-radius: var(--radius);
  background: var(--surface-2);
}
/* the dead-tube wash: scanlines + a low rust bloom, painted once, never touched */
.lab-soon__crt {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(196, 87, 42, .09), rgba(196, 87, 42, 0) 70%),
    repeating-linear-gradient(0deg, rgba(26, 30, 46, .05) 0 1px, rgba(26, 30, 46, 0) 1px 4px);
}
.lab-soon__card > *:not(.lab-soon__crt) { position: relative; z-index: 1; }

.lab-soon__ch {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em;
  color: var(--text-faint);
}
/* the dot does NOT pulse. ON AIR pulses; STANDBY sits still. That is the whole joke. */
.lab-soon__dot {
  width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: var(--text-faint); opacity: .55;
}
.lab-soon__title {
  margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(19px, 2.2vw, 23px); line-height: 1.25; color: var(--ink-navy);
}
.lab-soon__hook {
  margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-muted); max-width: 42ch;
}
.lab-soon__go {
  margin-top: auto; padding-top: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em;
  color: var(--accent-rust); opacity: .72;
}

/* the quieter secondary link */
.lab-more { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 20px; }
.lab-more__link {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  color: var(--ink-navy); text-decoration: none;
  border: 1px solid var(--surface-line); border-radius: var(--radius-pill);
  padding: 11px 18px; min-height: 44px; display: inline-flex; align-items: center; gap: 8px;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.lab-more__link:hover { border-color: var(--accent-rust); color: var(--accent-rust); transform: translateY(-2px); }
.lab-more__link:focus-visible { outline: 2px solid var(--accent-rust); outline-offset: 3px; }
.lab-more__note { font-size: 13px; color: var(--text-faint); }

@media (prefers-reduced-motion: reduce) {
  .lab-card.reveal, .lab-card.reveal.is-in:hover { transform: none !important; transition: none !important; }
  .lab-card__img, .lab-card__go i, .lab-more__link { transition: none !important; }
  .lab-card:hover .lab-card__img { transform: none; }
}

/* ---------- CONTACT alt ---------- */
.contact__alt { text-align: center; margin-top: 26px; }
.contact__mail { margin: 14px 0 0; font-size: 14px; color: var(--text-muted); }
.contact__mail a { color: var(--accent-rust); text-decoration: none; }
.contact__mail a:hover { text-decoration: underline; }

/* ---------- CALL-ME (assistant, inset 3D glass card floating inside the panel) ---------- */
.callme {
  position: relative;
  margin: 0 10px 10px;
  border-radius: 14px;
  overflow: hidden;
  color: #fff;
  /* translucent rust glass, layered gradient + backdrop blur = 3D window-inside-a-window depth */
  background: linear-gradient(160deg, rgba(196,87,42,.92), rgba(168,70,44,.86));
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 10px 26px -6px rgba(196,87,42,.45),
    0 2px 6px rgba(26,30,46,.18);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* glossy sheen across the top half, matching the .assistant panel's own glass language */
.callme::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.16), transparent);
}
.callme > * { position: relative; z-index: 1; }
.callme:hover, .callme:focus-within {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 14px 32px -6px rgba(196,87,42,.5),
    0 4px 10px rgba(26,30,46,.22);
}
@media (prefers-reduced-motion: reduce) {
  .callme { transition: box-shadow .18s ease; }
  .callme:hover, .callme:focus-within { transform: none; }
}
.callme__banner { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
.callme__text { flex: 0 0 auto; font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: #fff; }
.callme__reveal { flex: 0 0 auto; font-family: var(--font-sans); font-size: 12.5px; padding: 7px 16px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.10); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: #fff; cursor: pointer; transition: all .2s; }
.callme__reveal:hover { background: #fff; color: var(--accent-rust); }
.callme__form { position: relative; padding: 6px 14px 14px; }
.callme__form[hidden] { display: none; }
.callme__close { position: absolute; top: 6px; right: 10px; width: 24px; height: 24px; display: grid; place-items: center; border: none; background: rgba(255,255,255,.2); color: #fff; border-radius: 50%; font-size: 18px; line-height: 1; cursor: pointer; transition: background .2s; }
.callme__close:hover { background: rgba(255,255,255,.4); }
.callme__lead { margin: 0 28px 12px 0; font-size: 13px; color: rgba(255,255,255,.95); }
.callme__fields { display: flex; flex-direction: column; gap: 8px; }
.callme__input { width: 100%; min-width: 0; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.95); border-radius: var(--radius-pill); padding: 10px 14px; font-family: var(--font-sans); font-size: 14px; color: var(--ink-navy); }
.callme__input:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.28); }
.callme__go { flex: 0 0 auto; font-family: var(--font-sans); font-size: 13px; padding: 10px 16px; border-radius: var(--radius-pill); border: none; background: var(--ink-navy); color: #fff; cursor: pointer; transition: background .2s; }
.callme__go:hover { background: #10131f; }
.callme__go--block { width: 100%; margin-top: 8px; }
.callme__hint { margin: 8px 0 0; font-size: 11px; color: rgba(255,255,255,.8); }
.callme__hint--tight { margin-top: 0; }
.callme__status { margin: 8px 0 0; font-size: 13px; font-weight: 500; color: #fff; min-height: 16px; }
.callme__status a { color: #fff; text-decoration: underline; }
.callme__confirm[hidden] { display: none; }
.callme__confirm { padding: 4px 4px 6px; }
.callme__confirm-line { margin: 0 28px 8px 0; font-family: var(--font-serif); font-size: 19px; color: #fff; }
.callme__confirm-body { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.95); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .auto-cards { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .hero__split { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body { cursor: auto; }
  .cur, .cursor-trail-canvas { display: none; }
  .nav__inner { padding: 0 20px; }
  .nav__regions { font-size: 10px; letter-spacing: .08em; gap: 6px; }
  .navmenu { max-width: calc(100vw - 32px); }
  .services__grid, .process__grid, .work__grid, .contact__form,
  .preaudit__form, .preaudit2__form { grid-template-columns: 1fr; }
  .phones { width: 100%; flex-direction: column; align-items: center; gap: 34px; }
  .phone { flex: 0 0 auto; width: 100%; max-width: 300px; }
  .footer__inner { grid-template-columns: 1fr; }
  .section__inner { padding: 64px 20px; }
  .hero { padding: 32px 20px 64px; }
  .assistant { width: calc(100vw - 24px); }
  .assistant[data-state="collapsed"] { width: calc(100vw - 24px); }
  .callme { margin: 0 8px 8px; }
}

/* =========================================================
   ROUND-3 ADDITIONS
   ========================================================= */

/* ---------- Rotating assistant bar line (task 2) ---------- */
.assistant__prompt { position: relative; }
.assistant__line { display: inline-block; transition: opacity .4s ease, transform .4s ease; }
.assistant__line.is-out { opacity: 0; transform: translateY(-5px); }

/* ---------- Section CTA rows (task 7) ---------- */
.cta-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--surface-line);
}
.cta-row__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--text-muted); margin: 0; text-transform: uppercase; }
.cta-row__btn { padding: 11px 22px; font-size: 14px; }

/* ---------- Methodology zigzag journey (task 6) ---------- */
.journey { position: relative; max-width: 900px; margin: 0 auto; padding: 6px 0; }
.journey__spine { position: absolute; top: 8px; bottom: 8px; left: 50%; width: 2px; transform: translateX(-50%); background: rgba(196,87,42,.18); border-radius: 2px; z-index: 1; }
.journey__fill { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: linear-gradient(to bottom, var(--accent-rust), var(--accent-rust-d)); box-shadow: 0 0 12px rgba(196,87,42,.5); border-radius: 2px; will-change: height; }
.journey__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 30px; }
.journey__step { position: relative; width: 50%; box-sizing: border-box; opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.journey__step.is-in { opacity: 1; transform: none; }
.journey__step--left { margin-right: auto; padding-right: 44px; }
.journey__step--right { margin-left: auto; padding-left: 44px; }
.journey__node { position: absolute; top: 32px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent-rust); box-shadow: 0 0 0 4px rgba(196,87,42,.12); z-index: 2; transition: background .4s ease, box-shadow .4s ease; }
.journey__step--left .journey__node { right: -8px; }
.journey__step--right .journey__node { left: -8px; }
.journey__step.is-in .journey__node { background: var(--accent-rust); box-shadow: 0 0 0 5px rgba(196,87,42,.18), 0 0 14px rgba(196,87,42,.6); }
.step-card {
  position: relative; overflow: hidden; border-radius: var(--radius); padding: 22px 24px;
  background: linear-gradient(160deg, rgba(255,252,250,.66), rgba(255,240,232,.46));
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -14px 28px rgba(196,87,42,.06), 0 14px 40px rgba(39,42,63,.09);
  backdrop-filter: blur(7px) saturate(1.1); -webkit-backdrop-filter: blur(7px) saturate(1.1);
}
.step-card::before { content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none; background: linear-gradient(150deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 42%); }
.step-card > * { position: relative; z-index: 1; }
.step-card .step__n { font-family: var(--font-serif); font-size: 44px; color: var(--accent-rust); display: block; line-height: 1; margin-bottom: 8px; }
.step-card h3 { font-family: var(--font-serif); font-weight: 400; font-size: 22px; margin: 0 0 8px; }
.step-card p { margin: 0; font-size: 14px; color: var(--text-muted); }
.journey__ways { text-align: center; margin: 54px 0 20px; }
.journey__ways .mono-label { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .journey__step { opacity: 1; transform: none; } }

/* ---------- Methodology card zoom-and-settle: layered on top of the reveal above ---------- */
.journey { overflow-x: hidden; } /* scaled-up cards must never push the page sideways */

.step-card {
  transition: transform .2s ease, box-shadow .2s ease; /* resting/hover speed once the entrance settles */
}
.journey__step .step-card { opacity: .48; transform: scale(1.06); }
.journey__step.is-in .step-card { opacity: 1; transform: scale(1); }
.journey__step.is-zooming .step-card {
  /* lens-focus ease: overshoots past 1, dips slightly below it, then clicks into place */
  transition: transform .82s cubic-bezier(.34, 1.4, .64, 1), opacity .6s ease;
  will-change: transform, opacity;
}
.journey__step:nth-child(2).is-zooming .step-card { transition-delay: 90ms; }
.journey__step:nth-child(3).is-zooming .step-card { transition-delay: 180ms; }
.journey__step:nth-child(4).is-zooming .step-card { transition-delay: 270ms; }

.journey__step.is-in .step-card:hover,
.journey__step.is-in .step-card:focus-within {
  transform: scale(1.02);
  box-shadow: var(--shadow-float), inset 0 1px 0 rgba(255,255,255,.75), inset 0 -14px 28px rgba(196,87,42,.06);
}

/* the numeral settles a beat later, from a slightly larger scale, so it reads as crafted not uniform */
.step-card .step__n {
  opacity: 0;
  transform: scale(1.2);
  transition: transform .2s ease, opacity .2s ease;
}
.journey__step.is-in .step-card .step__n { opacity: 1; transform: scale(1); }
.journey__step.is-zooming .step-card .step__n {
  transition: transform .85s cubic-bezier(.34, 1.4, .64, 1) .1s, opacity .5s ease .1s;
  will-change: transform, opacity;
}
.journey__step:nth-child(2).is-zooming .step-card .step__n { transition-delay: 190ms; }
.journey__step:nth-child(3).is-zooming .step-card .step__n { transition-delay: 280ms; }
.journey__step:nth-child(4).is-zooming .step-card .step__n { transition-delay: 370ms; }

@media (prefers-reduced-motion: reduce) {
  .step-card, .step-card .step__n {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
  }
}

/* ---------- About me (task 9) ---------- */
.about { display: grid; grid-template-columns: 300px 1fr; gap: 46px; align-items: center; max-width: 940px; margin: 0 auto; }
.about__photo { margin: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.about__frame { position: relative; width: 100%; max-width: 300px; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: linear-gradient(160deg, #23263a, var(--ink-navy)); border: 1px solid rgba(196,87,42,.3); box-shadow: 0 26px 60px -22px rgba(26,30,46,.6), inset 0 0 0 6px rgba(255,255,255,.04); display: grid; place-items: center; }
.about__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.about__avatar { font-family: var(--font-serif); font-size: 92px; color: #fff; opacity: .92; }
.about__scan { position: absolute; inset: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient(rgba(255,255,255,.05) 0 1px, transparent 1px 4px); mix-blend-mode: overlay; }
.about__cap { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; color: var(--text-muted); }
.about__name { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 3.4vw, 36px); margin: 0 0 14px; }
.about__body p { margin: 0 0 14px; color: var(--text-muted); font-size: 16px; }
.about__body p:last-child { margin-bottom: 0; }

/* ---------- Exit-intent modal (task 13) ---------- */
.exit-modal__card {
  position: relative; overflow: hidden; max-width: 440px; width: calc(100% - 32px);
  padding: 34px 32px 30px; border-radius: 20px; text-align: left;
  background: linear-gradient(160deg, rgba(255,252,250,.92), rgba(255,238,230,.82));
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -18px 40px rgba(196,87,42,.1), 0 40px 90px -30px rgba(26,30,46,.6);
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
}
.exit-modal__scan { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: repeating-linear-gradient(rgba(26,30,46,.03) 0 1px, transparent 1px 4px); }
.exit-modal__card > * { position: relative; z-index: 1; }
.exit-modal__card h3 { font-family: var(--font-serif); font-weight: 400; font-size: 26px; margin: 4px 0 12px; }
.exit-modal__card p { margin: 0 0 18px; color: var(--text-muted); font-size: 15px; }
.exit-modal__input { width: 100%; border: 1px solid var(--surface-line); background: var(--surface-2); border-radius: 12px; padding: 12px 14px; font-family: var(--font-sans); font-size: 15px; color: var(--ink-navy); margin-bottom: 12px; }
.exit-modal__input:focus { outline: none; border-color: var(--accent-rust); }
.exit-modal .form-status { text-align: left; }

/* ---------- Testimonials draggable marquee (task 10) ---------- */
.marquee { cursor: grab; }
.marquee.is-dragging { cursor: grabbing; }

/* ---------- Responsive: round-3 blocks ---------- */
@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; gap: 26px; justify-items: center; text-align: center; }
  .about__body { text-align: left; }
  .about__frame { max-width: 240px; }
}
@media (max-width: 760px) {
  .journey__spine { left: 9px; transform: none; }
  .journey__step { width: 100%; padding-left: 34px !important; padding-right: 0 !important; margin: 0 !important; }
  .journey__step--left .journey__node, .journey__step--right .journey__node { left: 1px; right: auto; }
  .cta-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cta-row__btn { width: 100%; justify-content: center; }
}

.marquee.is-dragging .t-card { pointer-events: none; }

/* =========================================================
   ROUND-4 ADDITIONS
   ========================================================= */

/* ---------- Methodology: bridge line into the Ways section ---------- */
.journey__bridge {
  margin: 8px 0 0; font-family: var(--font-serif); font-size: clamp(20px, 2.4vw, 26px);
  color: var(--ink-navy); line-height: 1.25;
}

/* ---------- WAYS TO WORK WITH ME — dark stage band ---------- */
/* A third band type. #process above it and #about below it are both a white .band,
   so a navy stage sits between two matching surfaces and gives the offer its own room. */
.section--ways {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(196,87,42,.22), rgba(0,0,0,0) 70%),
    radial-gradient(60% 50% at 88% 88%, rgba(196,87,42,.12), rgba(0,0,0,0) 70%),
    linear-gradient(170deg, #23263a, var(--ink-navy) 58%, #14161f);
  border-top: 1px solid var(--surface-line);
  border-bottom: 1px solid var(--surface-line);
  color: #f3ece6;
}
.ways__scan {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(rgba(255,255,255,.035) 0 1px, transparent 1px 4px);
}
.section--ways .section__inner { position: relative; z-index: 1; }
.section--ways .section__head h2 { color: #fff; }
.section--ways .section__head .muted { color: rgba(243,236,230,.72); }
.section--ways .cta-row { border-top-color: rgba(243,236,230,.16); }
.section--ways .cta-row__label { color: rgba(243,236,230,.6); }
.section--ways .btn--ghost { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.28); }
.section--ways .btn--ghost:hover { border-color: var(--accent-rust); color: #fff; background: rgba(196,87,42,.28); }
.section--ways .btn--primary { background: var(--accent-rust); color: #fff; }
.section--ways .btn--primary:hover { background: #fff; color: var(--ink-navy); }
.cta-row__pair { display: inline-flex; gap: 12px; flex-wrap: wrap; }

/* --- the hand-off axis: one signal path the four cards sit on ---
   Replaces the per-card "how much I do" bar meter. The line runs from
   "I tell you what to do" to "I do it all", with four stations that spell the
   hand-off out in words (YOU -> YOU, TRAINED -> YOU + ME -> ME). The fill and the
   station lamps light up as each card lands, so the escalation is drawn rather
   than scored. Progress is one custom property (--ways-p), which lets the exact
   same markup run horizontal on desktop and vertical on phones. */
/* The track spans the full width of the card grid, and its stops share the grid's
   column count AND its gap — that is what makes station i land dead centre over
   card i, so the cards genuinely sit on the line instead of near it. The end caps
   drop to their own row underneath, at the two ends of the line. */
.ways__axis {
  --ways-p: 0%;
  display: block; margin: 0 0 34px;
}
.ways__axis-track { position: relative; display: block; min-width: 0; }
.ways__axis-line {
  position: absolute; left: 0; right: 0; top: 5px; height: 2px; border-radius: 2px;
  background: rgba(243,236,230,.14);
}
.ways__axis-fill {
  position: absolute; inset: 0 auto 0 0; width: var(--ways-p); border-radius: 2px;
  background: linear-gradient(90deg, var(--accent-rust-d), var(--accent-rust));
  box-shadow: 0 0 14px rgba(196,87,42,.65);
  transition: width .9s cubic-bezier(.32,.72,.28,1);
  will-change: width;
}
.ways__axis-stops {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;   /* same gap as .ways */
}
.ways__stop { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; }
.ways__stop i {
  width: 12px; height: 12px; border-radius: 50%;
  background: #23263a; border: 2px solid rgba(243,236,230,.28);
  transition: background .45s ease, border-color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.34,1.4,.64,1);
}
.ways__stop em {
  font-style: normal; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em;
  color: rgba(243,236,230,.5); text-align: center;
  transition: color .45s ease;
}
.ways__stop.is-lit i {
  background: var(--accent-rust); border-color: var(--accent-rust);
  box-shadow: 0 0 14px rgba(196,87,42,.75);
  transform: scale(1.14);
}
.ways__stop.is-lit em { color: rgba(255,247,242,.92); }

/* --- the four stations --- */
.ways {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch;
}
.way {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--radius); padding: 26px 22px 22px;
  background: linear-gradient(165deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 22px 50px -24px rgba(0,0,0,.7);
  backdrop-filter: blur(7px) saturate(1.1);
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
}
/* Each station is lit a little more than the last: the escalation, felt not stated.
   Card 4 is Co-Pilot, and .way--hero paints its own background with !important, so
   the escalation only has to run across the three conventional options (1 -> 3).
   (Before Co-Pilot moved to 04 this last step was written as :nth-child(4); left
   there it lit nothing, because the hero overrode it, and Done For You dropped back
   to the base card colour, breaking the ramp.) */
.ways .way:nth-child(1) { background: linear-gradient(165deg, rgba(255,255,255,.065), rgba(255,255,255,.02)); }
.ways .way:nth-child(2) { background: linear-gradient(165deg, rgba(255,255,255,.085), rgba(196,87,42,.05)); }
.ways .way:nth-child(3) { background: linear-gradient(165deg, rgba(255,255,255,.10), rgba(196,87,42,.10)); }
.way__n {
  font-family: var(--font-serif); font-weight: 400; font-size: 34px; line-height: 1;
  color: var(--accent-rust); display: block; margin-bottom: 12px;
}
.way__tag {
  display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em;
  color: rgba(243,236,230,.6); margin-bottom: 8px;
}
.way h3 {
  font-family: var(--font-serif); font-weight: 400; font-size: 23px; line-height: 1.15;
  margin: 0 0 16px; color: #fff;
}
.way p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: rgba(243,236,230,.74); }
.way__note { color: rgba(243,236,230,.56) !important; font-style: italic; }
.way__own {
  margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(243,236,230,.14);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--accent-rust); text-transform: uppercase;
}

/* Co-Pilot: the one Mike pushes hardest. Loudest card without breaking the grid. */
.way--hero {
  background: linear-gradient(165deg, rgba(196,87,42,.30), rgba(196,87,42,.10) 62%, rgba(255,255,255,.04)) !important;
  border-color: rgba(196,87,42,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 0 1px rgba(196,87,42,.28),
    0 30px 60px -22px rgba(196,87,42,.45),
    0 22px 50px -24px rgba(0,0,0,.7);
}
.way--hero .way__n { color: #fff; }
.way--hero .way__tag { color: rgba(255,255,255,.8); }
.way--hero p { color: rgba(255,247,242,.9); }
.way--hero .way__note { color: rgba(255,247,242,.72) !important; }
.way--hero .way__own { color: #fff; border-top-color: rgba(255,255,255,.3); }
/* the hook line — the sentence that has to land before anything else on this card */
.way__hook {
  font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.3;
  color: #fff !important; margin: 0 0 14px; padding: 0 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.way__flag {
  position: absolute; top: -11px; left: 22px; z-index: 2;
  padding: 4px 11px; border-radius: var(--radius-pill);
  background: #fff; color: var(--accent-rust);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; white-space: nowrap;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.6);
}

/* --- the ownership promise --- */
.ways__own {
  max-width: 820px; margin: 54px auto 0; text-align: center;
  padding: 34px 32px; border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.ways__own h3 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 3.2vw, 36px); margin: 0 0 14px; color: #fff; }
.ways__own p { margin: 0 0 12px; font-size: 15.5px; line-height: 1.6; color: rgba(243,236,230,.76); }
.ways__own p:last-child { margin-bottom: 0; }
.ways__own em { font-style: italic; color: var(--accent-rust); }

/* --- zoom-and-settle, same lens-focus language as the methodology cards --- */
.way.reveal { transform: translateY(16px) scale(1.06); transition: opacity .6s ease, transform .2s ease, box-shadow .2s ease; }
.way.reveal.is-in { transform: none; }
.way.reveal.is-zooming { transition: opacity .6s ease, transform .82s cubic-bezier(.34, 1.4, .64, 1); will-change: transform, opacity; }
.ways .way:nth-child(2).is-zooming { transition-delay: 90ms; }
.ways .way:nth-child(3).is-zooming { transition-delay: 180ms; }
.ways .way:nth-child(4).is-zooming { transition-delay: 270ms; }
.way.reveal.is-in:hover, .way.reveal.is-in:focus-within { transform: translateY(-4px) scale(1.02); }
/* Must stay visible: the Co-Pilot flag is pinned at top:-11px and any overflow value
   other than visible clips it (hiding one axis forces the other to `auto`, which is
   what was slicing the pill in half). The page is already protected from sideways
   scroll by `overflow-x: hidden` on body, so the old guard here was redundant. */
.ways { overflow: visible; padding-top: 11px; }

@media (prefers-reduced-motion: reduce) {
  .way.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ways__axis-fill { transition: none; }
  .ways__stop i { transition: none; transform: none !important; }
  .ways__stop em { transition: none; }
  .ways__scan { display: none; }
}

/* --- responsive ---
   The four cards stay in a single row (repeat(4,1fr) from the base rule) all the way
   down to 760px, so the four lamps keep sitting one-per-card the whole time; below
   760px the cards stack to one column and the axis rotates vertical beside them (that
   threshold matches isVertical() in app.js). There is deliberately no 2x2 band: a 2x2
   grid cannot be mapped by a single horizontal rail. */
@media (max-width: 760px) {
  .ways { grid-template-columns: 1fr; }
  .ways__own { padding: 26px 20px; }
  .cta-row__pair { width: 100%; flex-direction: column; }
  .section--ways .cta-row__pair .cta-row__btn { width: 100%; justify-content: center; }

  /* the same axis, rotated: the cards stack, so the hand-off runs down the page with them.
     display:flex has to be restated — the desktop base is a grid, and flex-direction
     on a grid container is inert. */
  .ways__axis { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 26px; }
  .ways__axis-track { width: 100%; flex: 0 0 auto; }
  .ways__axis-line { left: 5px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .ways__axis-fill { inset: 0 0 auto 0; width: 2px; height: var(--ways-p); transition: height .9s cubic-bezier(.32,.72,.28,1); }
  .ways__axis-stops { grid-template-columns: 1fr; gap: 14px; }
  .ways__stop { flex-direction: row; align-items: center; gap: 12px; }
  .ways__stop em { text-align: left; }
}

/* ---------- About: framed photo (Job 2) ---------- */
.about__img { display: block; object-position: center 12%; }
/* soft warm sheen over the portrait, so it sits in the brand instead of on top of it */
.about__sheen {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(160deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(0deg, rgba(26,30,46,.34) 0%, rgba(26,30,46,0) 42%);
}
.about__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 0 46px 10px rgba(26,30,46,.28);
}

/* =========================================================================
   CALL-ME NOTE (task 2) — the "US numbers only, international soon" line under
   the banner headline, before the reveal button.
   ========================================================================= */
.callme__note { font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.9); }

/* =========================================================================
   THE WORK GUIDE (task 1) — self-contained homepage port of the success.html
   broadcast guide. A big live monitor beside a channel listing of all 8 cases.
   Own `wg` namespace + own keyframes; nothing here touches the success files
   or any other homepage component. Behaviour: workGuide() in app.js.
   ========================================================================= */
.wg { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: clamp(24px, 3vw, 44px); align-items: start; }
@media (max-width: 900px) { .wg { grid-template-columns: minmax(0, 1fr); display: block; } }

/* preview monitor: sticky beside the listing, clearing the sticky .nav header */
.wg__preview { position: sticky; top: 96px; }
@media (max-width: 900px) {
  .wg__preview {
    position: sticky; top: 60px; z-index: 5;
    margin: 0 -8px; padding: 8px 8px 12px;
    background: var(--surface-2);        /* opaque band surface: no backdrop-filter over the noise canvas */
    border-bottom: 1px solid var(--surface-line);
  }
  .wg__guide { margin-top: 22px; }
}
.wg__set {
  border-radius: 20px; padding: 12px 12px 10px;
  background: linear-gradient(168deg, #262a3f, var(--ink-navy));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 22px 50px -20px rgba(26,30,46,.55);
}
/* MONITOR SIZING: taller than the success guide on purpose. The longest title
   ("Eighty Videos Out of a Spreadsheet, With Nobody Touching It", 61 chars) wraps
   to 3 lines and, with its two metrics + teaser + CTA, needs real vertical room.
   min-height guarantees that room even when the column is narrow; the flex-end
   body with flex-shrink:0 children keeps every block at its natural height so
   nothing can overlap (title.offsetHeight >= title.scrollHeight always). */
.wg__screen {
  position: relative; aspect-ratio: 4 / 3.4; min-height: 470px; overflow: hidden; isolation: isolate;
  border-radius: 16px / 22px;
  background: radial-gradient(115% 125% at 50% 30%, #23191a, #0b0909 68%);
  box-shadow: inset 0 0 0 3px #07060a, inset 0 0 46px rgba(0,0,0,.85);
}
/* On mobile the guide is block flow, so aspect-ratio + min-height would let the
   aspect drive the WIDTH off the forced height and overflow the column. Use an
   explicit height with no aspect-ratio instead: width stays 100% of the column. */
@media (max-width: 900px) { .wg__screen { aspect-ratio: auto; height: 400px; min-height: 0; max-height: 64vh; } }
.wg__snow { position: absolute; inset: -2%; width: 104%; height: 104%; mix-blend-mode: screen; z-index: 1; pointer-events: none; }
.wg__grille { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .5; background: repeating-linear-gradient(0deg, rgba(0,0,0,.30) 0 1px, transparent 1px 3px); }
.wg__glass { position: absolute; inset: 0; z-index: 5; pointer-events: none; box-shadow: inset 0 0 62px 16px rgba(0,0,0,.6); background: radial-gradient(58% 46% at 50% 46%, rgba(196,87,42,.15), transparent 72%), linear-gradient(155deg, rgba(255,255,255,.09), rgba(255,255,255,0) 36%); }
.wg__sweep { position: absolute; left: -6%; right: -6%; height: 3px; top: -10px; z-index: 6; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,241,228,.95), transparent); box-shadow: 0 0 18px 6px rgba(255,196,150,.6); }
.wg.is-zapping .wg__sweep { animation: wgSweep .40s cubic-bezier(.35,0,.2,1); }
@keyframes wgSweep { 0% { top: -10px; opacity: 1; } 100% { top: 100%; opacity: 1; } }

.wg__body { position: absolute; inset: 0; z-index: 4; padding: clamp(18px, 2.4vw, 28px); display: flex; flex-direction: column; justify-content: flex-end; }
.wg.is-rolling .wg__body { animation: wgRoll .5s cubic-bezier(.2,.85,.25,1); }
@keyframes wgRoll {
  0%   { transform: scaleY(.06) translateY(-10%); filter: brightness(3); opacity: .8; }
  32%  { transform: scaleY(1.09) translateY(-2%); filter: brightness(1.6); }
  64%  { transform: scaleY(.97); }
  100% { transform: none; filter: none; }
}
.wg__ch { position: absolute; top: clamp(12px, 2vw, 18px); left: clamp(18px, 2.4vw, 28px); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,206,174,.92); text-shadow: 0 0 10px rgba(196,87,42,.75); }
.wg__now { position: absolute; top: clamp(12px, 2vw, 18px); right: clamp(18px, 2.4vw, 28px); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; color: rgba(255,236,224,.5); }
/* flex-shrink:0 on all four flow children is the overlap fix; min-height reserves
   ~2 lines so a title mid-typewriter has a stable floor. */
.wg__title { flex-shrink: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.1; margin: 0 0 12px; padding-block: 5px; color: #fff7f0; text-shadow: 0 2px 16px rgba(0,0,0,.7); min-height: calc(2 * 1.1em); }
.wg__title.is-typing::after { content: ""; display: inline-block; width: .06em; height: .8em; margin-left: .05em; background: var(--accent-rust); box-shadow: 0 0 8px rgba(196,87,42,.9); animation: wgCaret .78s steps(1) infinite; }
@keyframes wgCaret { 50% { opacity: 0; } }
.wg__nums { flex-shrink: 0; display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 12px; }
.wg__nval { display: block; font-family: var(--font-serif); font-size: clamp(26px, 3.2vw, 38px); line-height: 1; color: var(--accent-rust); text-shadow: 0 0 26px rgba(196,87,42,.5); }
.wg__nlab { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,236,224,.55); margin-top: 5px; max-width: 22ch; }
.wg__teaser { flex-shrink: 0; margin: 0 0 16px; font-size: 13.5px; line-height: 1.5; color: rgba(255,236,224,.72); max-width: 42ch; }
.wg__cta {
  flex-shrink: 0; align-self: flex-start; text-decoration: none;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--accent-rust); border-radius: var(--radius-pill); padding: 10px 18px;
  display: inline-flex; align-items: center; gap: 7px; transition: background .2s, transform .2s;
}
.wg__cta:hover { background: var(--accent-rust-d); transform: translateY(-1px); }
.wg__base { display: flex; align-items: center; gap: 12px; padding: 9px 6px 0; }
.wg__brand { font-family: var(--font-serif); font-size: 14px; color: rgba(255,255,255,.9); }
.wg__live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; color: rgba(255,255,255,.55); }
.wg__dot { width: 6px; height: 6px; border-radius: 50%; background: #57d08a; box-shadow: 0 0 8px rgba(87,208,138,.9); animation: wgPulse 2.4s ease-in-out infinite; }
@keyframes wgPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.wg__knob { margin-left: auto; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6b6f86, #2a2e42); box-shadow: 0 0 0 2px rgba(255,255,255,.07); }

/* listing */
.wg__guidehead { display: flex; align-items: baseline; gap: 14px; padding: 0 0 10px; border-bottom: 1px solid var(--surface-line); margin-bottom: 4px; }
.wg__guidehead span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }
.wg__guidehead span:last-child { margin-left: auto; }
.wg__list { list-style: none; margin: 0; padding: 0; }
.wg-row { position: relative; display: block; }
.wg-row__a {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 15px 16px 15px 14px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--surface-line);
  transition: background .28s ease, padding-left .28s cubic-bezier(.2,.8,.25,1);
}
.wg-row__a::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent-rust); transform: scaleY(0); transform-origin: 50% 50%;
  transition: transform .34s cubic-bezier(.2,.8,.25,1);
}
.wg-row.is-active .wg-row__a { background: linear-gradient(90deg, rgba(196,87,42,.09), rgba(196,87,42,0) 70%); padding-left: 22px; }
.wg-row.is-active .wg-row__a::before { transform: scaleY(1); }
.wg-row__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--text-faint); width: 42px; transition: color .25s; }
.wg-row.is-active .wg-row__num { color: var(--accent-rust); }
.wg-row__mid { min-width: 0; }
.wg-row__t { display: block; font-family: var(--font-serif); font-weight: 400; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.2; margin: 0 0 4px; letter-spacing: -.01em; color: var(--ink-navy); }
.wg-row__meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.wg-row__cat { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--surface-line); border-radius: var(--radius-pill); padding: 3px 8px; }
.wg-row__m { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--accent-rust); font-weight: 500; }
.wg-row__m em { font-style: normal; color: var(--text-faint); font-weight: 400; letter-spacing: .08em; }
.wg-row__go { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--text-faint); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; transition: color .25s, transform .3s cubic-bezier(.2,.8,.25,1); }
.wg-row.is-active .wg-row__go, .wg-row__a:hover .wg-row__go { color: var(--accent-rust); transform: translateX(3px); }
@media (max-width: 560px) { .wg-row__go span { display: none; } .wg-row__num { width: 34px; } }

@media (prefers-reduced-motion: reduce) {
  .wg.is-zapping .wg__sweep, .wg.is-rolling .wg__body { animation: none; }
  .wg__title.is-typing::after { animation: none; }
  .wg__dot { animation: none; opacity: 1; }
  .wg-row__a, .wg-row__a::before, .wg-row__go { transition: none; }
}

/* =========================================================================
   ASSISTANT CLOSE-TRAP FIX (task 3). When the call-me panel opens, the fixed,
   vertically-centered assistant can grow taller than the viewport; its top (the
   bar that holds the minimize control) then clips above the screen and, because
   the panel is fixed + clipped, becomes unreachable. Cap the whole widget to the
   viewport and let it scroll internally, with the bar pinned at the top so the
   minimize control is ALWAYS on screen and clickable, call panel open or not.
   ========================================================================= */
.assistant { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-x: hidden; overflow-y: auto; }
.assistant__bar {
  position: sticky; top: 0; z-index: 6;
  background: linear-gradient(155deg, rgba(255,252,250,.94), rgba(255,240,232,.9));
}
.assistant[data-state="collapsed"] .assistant__bar { background: none; }

/* ===================== Mobile fixes: hero video size + testimonial card width ===================== */
@media (max-width: 760px) {
  /* Hero video was full-bleed (350px) and read as too big on a phone. Cap it and centre it. */
  .hero__split .tv-set--clean { max-width: 300px; margin-left: auto; margin-right: auto; width: 100%; }

  /* Testimonial cards were 360px wide on a ~390px viewport, so the marquee always chopped a card
     at the right edge and it looked cut. Make them comfortably narrower than the screen so a full
     card reads as a flowing carousel, not a broken block. */
  .t-card { width: min(300px, 80vw); margin-right: 16px; padding: 20px; }
  .t-card--b { width: min(300px, 80vw); padding: 22px 20px; }
}

/* ===================== WHY ME ===================== */
.why { text-align: center; }
.why__head { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.why__title { font-family: var(--font-serif); font-weight: 400; color: var(--ink-navy); font-size: clamp(48px, 9vw, 104px); line-height: 1; letter-spacing: -.02em; margin: 4px 0 0; }
.why__sub { font-family: var(--font-serif); font-weight: 400; color: var(--ink-navy); font-size: clamp(21px, 3.4vw, 32px); line-height: 1.2; margin: 0; max-width: 20ch; }
.why__statlead { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint); margin: 54px 0 26px; }
.why__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 20px; max-width: 1000px; margin: 0 auto; }
.why__stat { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.why__num { font-family: var(--font-serif); font-weight: 400; color: var(--accent-rust); font-size: clamp(34px, 4.6vw, 58px); line-height: 1; letter-spacing: -.01em; }
.why__num--text { font-size: clamp(28px, 3.8vw, 46px); }
.why__arrow { color: var(--ink-navy); opacity: .5; font-size: .7em; padding: 0 2px; }
.why__label { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.4; color: var(--text-muted); max-width: 24ch; }
.why__result { font-family: var(--font-serif); font-size: clamp(20px, 2.6vw, 28px); color: var(--ink-navy); margin: 40px auto 0; max-width: 30ch; }
.why__result em { font-style: italic; color: var(--accent-rust); }
.why__stay { font-family: var(--font-sans); font-size: clamp(16px, 1.7vw, 19px); color: var(--text-muted); max-width: 46ch; margin: 30px auto 0; line-height: 1.55; }

.why__process { max-width: 640px; margin: 54px auto 0; text-align: left; }
.why__processlead { font-family: var(--font-sans); font-size: 17px; color: var(--ink-soft); margin: 0 0 20px; }
.why__processlead strong { font-weight: 600; color: var(--ink-navy); }
.why__steps { list-style: none; counter-reset: whystep; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.why__steps li { counter-increment: whystep; position: relative; padding-left: 46px; font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--text-muted); }
.why__steps li::before { content: counter(whystep); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(196,87,42,.1); border: 1px solid rgba(196,87,42,.28); color: var(--accent-rust); font-family: var(--font-serif); font-size: 16px; }
.why__frontier { font-family: var(--font-sans); font-size: clamp(16px, 1.7vw, 19px); color: var(--text-muted); max-width: 52ch; margin: 34px auto 0; line-height: 1.55; }

/* Closing "Still doubting?" panel: dark, high-contrast, the emotional close */
.why__doubt { margin: 60px auto 0; max-width: 780px; padding: 48px 40px; border-radius: 24px; text-align: center;
  background: linear-gradient(165deg, #23263a, var(--ink-navy)); box-shadow: var(--shadow-float);
  position: relative; overflow: hidden; }
.why__doubt::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 60% at 50% 0%, rgba(196,87,42,.22), transparent 70%); }
.why__doubt > * { position: relative; z-index: 1; }
.why__doubt-title { font-family: var(--font-serif); font-weight: 400; color: #fff; font-size: clamp(34px, 6vw, 56px); line-height: 1.02; margin: 0; }
.why__doubt-lead { font-family: var(--font-serif); font-style: italic; color: var(--accent-rust); font-size: clamp(19px, 2.4vw, 26px); margin: 12px 0 0; }
.why__doubt-body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: rgba(255,250,246,.9); max-width: 48ch; margin: 18px auto 0; }
.why__doubt-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }
.why__doubt-ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.why__doubt-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

@media (max-width: 760px) {
  .why__stats { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
  .why__doubt { padding: 36px 22px; margin-top: 46px; }
  .why__process { margin-top: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .why__num { transition: none; }
}