/* ==========================================================================
   iBOS WEBSITE — page layout on top of the v3 deck system.
   tokens.css (brand) → theme.css (shared components) → components.css (the
   v3 section visuals, in 1920×1080 "stage" pixels) → web.css (this file:
   scrolling page, header, responsive restacking, mobile).

   Breakpoints
     ≥ 1024px  desktop: every section fits one screen below the header;
               diagram sections render the v3 stage, scaled to the column
               width AND the remaining screen height (js/site.js)
     < 1024px  "compact": diagrams restack into cards, single-column layouts,
               sections scroll naturally
     <  768px  mobile: larger type, horizontal strips, full-screen sheets
   ========================================================================== */

:root {
  --gutter: clamp(16px, 4vw, 96px);
  --wrap: 1240px;       /* max content width: the Wix site container */
  --hdr-h: 60px;
}

/* ---------- base: a scrolling document instead of a fixed stage ---------- */
html { scroll-padding-top: var(--hdr-h); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { height: auto; min-height: 100%; }
body { overflow: visible; overflow-x: clip; font-size: 16px; }
@supports not (overflow: clip) { body { overflow-x: hidden; } }
body.is-loading * { transition: none !important; }
main { position: relative; z-index: 2; display: block; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; } /* keep hidden UI hidden even if the Tailwind CDN (its reset) fails */
.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip-link { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--c-text); color: var(--c-bg-1); font-weight: 700; transform: translateY(-160%); opacity: 0; transition: transform .2s, opacity .2s; }
.skip-link:focus { transform: none; opacity: 1; }

/* ---------- ambient background (from the deck) ---------- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% -10%, rgba(255, 255, 255, .045) 0%, transparent 70%),
    linear-gradient(180deg, var(--c-bg-2) 0%, var(--c-bg-1) 55%, #09090D 100%); }
.bg .grid { position: absolute; inset: -2px;
  background-image: linear-gradient(rgba(255, 255, 255, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .028) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%); }
.bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg .vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.bg .noise { position: absolute; inset: 0; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cursor-glow { position: fixed; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0;
  background: radial-gradient(circle, rgba(255, 244, 232, .055) 0%, rgba(255, 214, 190, .025) 35%, transparent 66%); transition: opacity .6s; will-change: transform; }
.cursor-glow.on { opacity: 1; }
@media (hover: none) { .cursor-glow { display: none; } }

/* ---------- buttons (website scale: 44px high, 15–16px text) ---------- */
.btn { text-decoration: none; white-space: nowrap; height: 44px; padding: 0 20px; border-radius: 12px; font-size: 15.5px; }
.btn .bi { width: 16px; height: 16px; }
/* discreet outline button (header "Back to WWE Travel CY") */
.btn.outline { background: transparent; border-color: var(--c-hairline-2); color: var(--c-text-2); font-weight: 500; }
.btn.outline:hover { background: rgba(255, 255, 255, .05); border-color: var(--c-hairline-3); color: var(--c-text); }
.btn.coral { border-color: transparent; color: var(--c-decision-ink); font-weight: 700;
  background: linear-gradient(180deg, #FF8B5C 0%, var(--c-coral) 100%);
  box-shadow: 0 12px 32px -14px rgba(var(--c-coral-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .28); }
.btn.coral:hover { border-color: transparent; background: linear-gradient(180deg, #FF9C73 0%, #FF8551 100%); box-shadow: 0 16px 40px -14px rgba(var(--c-coral-rgb), 1), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn.ghost { background: rgba(255, 255, 255, .04); }

/* ============================ HEADER ============================ */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; border-bottom: 1px solid transparent;
  transition: background .35s, border-color .35s, backdrop-filter .35s, -webkit-backdrop-filter .35s; }
.site-header.scrolled, .site-header.nav-open { background: rgba(10, 11, 15, .74); border-bottom-color: var(--c-hairline);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.hdr-in { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; height: var(--hdr-h); display: flex; align-items: center; gap: 20px; }
.hdr-logo { display: flex; align-items: center; gap: 14px; flex: none; }
.hdr-logo img { display: block; width: auto; height: 19px; }
.hdr-ed { padding-left: 14px; border-left: 1px solid var(--c-hairline-2); font: 500 11px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--c-text-dim); white-space: nowrap; }
.hdr-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.hdr-nav a { position: relative; padding: 9px 11px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--c-text-2); white-space: nowrap; transition: color .2s, background .2s; }
.hdr-nav a:hover { color: var(--c-text); background: rgba(255, 255, 255, .05); }
.hdr-nav a.on { color: var(--c-text); }
.hdr-nav a.on::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--c-violet-soft); } /* active = violet (interaction) */
.hdr-nav .hdr-back-m { display: none; }
.hdr-back { height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; margin-left: 8px; }
.hdr-burger { display: none; width: 44px; height: 44px; margin-left: 4px; border-radius: 12px; border: 1px solid var(--c-hairline-2); background: rgba(255, 255, 255, .04); position: relative; flex: none; }
.hdr-burger span { position: absolute; left: 13px; right: 13px; height: 1.6px; border-radius: 2px; background: var(--c-text); transition: transform .3s var(--ease-out), top .3s var(--ease-out); }
.hdr-burger span:first-child { top: 17px; } .hdr-burger span:last-child { top: 25px; }
.nav-open .hdr-burger span:first-child { top: 21px; transform: rotate(45deg); }
.nav-open .hdr-burger span:last-child { top: 21px; transform: rotate(-45deg); }
.hdr-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.hdr-progress i { display: block; height: 100%; background: var(--c-coral); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 10px rgba(var(--c-coral-rgb), .45); } /* scroll progress = coral */
@media (max-width: 1359px) { .hdr-ed { display: none; } }
@media (max-width: 1099px) {
  .hdr-burger { display: block; }
  .hdr-back { margin-left: auto; }
  .hdr-nav { position: absolute; left: 0; right: 0; top: 100%; margin: 0; display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 22px; background: rgba(10, 11, 15, .97); border-bottom: 1px solid var(--c-hairline);
    max-height: calc(100vh - var(--hdr-h)); max-height: calc(100dvh - var(--hdr-h)); overflow-y: auto; }
  .nav-open .hdr-nav { display: flex; }
  .hdr-nav a { padding: 15px 4px; font-size: 18px; border-radius: 0; border-bottom: 1px solid var(--c-hairline); }
  .hdr-nav a:hover { background: none; }
  .hdr-nav a.on::after { left: auto; right: 4px; top: 50%; bottom: auto; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; }
}
@media (max-width: 559px) {
  .hdr-back:not(.hdr-back-m) { display: none; }
  .hdr-burger { margin-left: auto; }
  .hdr-nav a.hdr-back-m { display: inline-flex; margin-top: 18px; height: 48px; font-size: 16px; border: 1px solid var(--c-hairline-2); border-radius: 12px; padding: 0 16px; }
  .hdr-nav a.hdr-back-m::after { display: none; }
}

/* ============================ SECTIONS ============================ */
.sec { position: relative; z-index: 2; padding: clamp(71.4px, 8.8vh, 120px) 0; overflow-x: clip; scroll-margin-top: 0; }
@supports not (overflow: clip) { .sec { overflow-x: hidden; } }
.sec-head { position: relative; max-width: 1480px; }
.sec .eyebrow { font-size: clamp(12px, 0.74vw, 13.26px); }
.sec .headline { font-size: clamp(28.16px, 2.03vw + 7.8px, 49.92px); margin-top: clamp(10.2px, 0.94vw, 15.6px); }
.sec .lead { font-size: clamp(17px, 1.01vw, 20.28px); }
.sec .note { font-size: clamp(13.5px, 0.66vw, 13.5px); }
.foot-statement { font-size: clamp(17.6px, 1.25vw, 23.4px); }
.foot-sub { font-size: clamp(15px, 0.82vw, 15.6px); }
.flowline, .s07-flow, .g-flow { font-size: clamp(15px, 0.86vw, 16.38px); }
.s07-chips span { font-size: clamp(13px, 0.66vw, 13px); }

/* stage: a crop of the v3 1920×1080 slide, scaled to the column (js/site.js) */
.stage-wrap { position: relative; padding-inline: clamp(13.6px, 1.56vw, 74.88px); margin-top: clamp(22.1px, 2.5vw, 43.68px); }
.stage { position: relative; margin-inline: auto; }
.stage > .stage-inner { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.stage.diag .dia { position: absolute; inset: 0; }
.sec-foot { margin-top: clamp(18.7px, 2.03vw, 34.32px); text-align: center; }
.sec-foot:empty { display: none; }
.sec-foot .slide-foot, .slide-foot.s13-foot { position: static; left: auto; right: auto; bottom: auto; }
.sec-foot .slide-foot .note, .sec-foot .foot-sub { margin-top: 10px; }
.sec-foot .corner-note { position: static; margin-top: 18px; font-size: clamp(11px, 0.55vw, 11px); }
.s07-flow, .g-flow { justify-content: center; }
.sec-head .demo-flag { position: absolute; right: 0; top: 6px; font-size: clamp(11px, 0.55vw, 11px); }

/* CSS loops only run while their section is on screen */
.sec:not(.in-view) *, .sec:not(.in-view) *::before, .sec:not(.in-view) *::after { animation-play-state: paused !important; }

/* ============================ 01 · HERO ============================ */
.hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--hdr-h) + clamp(20.4px, 3.2vh, 48px)) 0 clamp(59.5px, 7.2vh, 88px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); align-items: center; gap: clamp(6.8px, 1.56vw, 31.2px); }
.hero-copy { position: relative; z-index: 3; }
.hero .headline.display { font-size: clamp(38px, 2.6vw + 14px, 64px); line-height: 1; margin-top: clamp(15.3px, 1.56vw, 23.4px); }
.hero .cover-brand { margin-top: clamp(22.1px, 2.72vh, 41.6px); font-size: clamp(15px, 0.94vw, 17.16px); gap: 16px; }
.hero .cover-lead { margin-top: clamp(13.6px, 1.6vh, 20.8px); font-size: clamp(18.48px, 1.44vw, 28.08px); }
.hero .cover-mods { margin-top: 12px; font-size: clamp(15px, 0.9vw, 17.16px); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22.1px, 2.88vh, 33.6px); }
.hero-ctas .btn { height: 46px; padding: 0 22px; font-size: 16px; }
.hero .by { margin-top: clamp(18.7px, 2.4vh, 28.8px); font-size: clamp(12px, 0.62vw, 12px); }
.hero-visual { position: relative; min-width: 0; }
.hero .orbit { left: 0; top: 0; }
.scroll-cue { position: absolute; left: 50%; bottom: 24px; z-index: 3; width: 26px; height: 42px; margin-left: -13px; border-radius: 14px; border: 1.5px solid var(--c-hairline-3); }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--c-coral); animation: cue 1.9s var(--ease-out) infinite; }
@keyframes cue { 0% { transform: none; opacity: 1; } 70% { transform: translateY(13px); opacity: 0; } 100% { opacity: 0; } }
@media (max-height: 640px) and (min-width: 1024px) { .scroll-cue { display: none; } }

/* ============================ 09 · MANAGEMENT CONTROL ============================ */
.dec-grid { display: grid; grid-template-columns: minmax(0, 900fr) minmax(0, 754fr); gap: clamp(27.2px, 3.43vw, 62.4px); align-items: start; margin-top: clamp(27.2px, 2.81vw, 43.68px); }
.s09 .dec-card, .s09 .dec-side, .s09 .timeline { position: relative; left: auto; top: auto; width: auto; }
.dec-right { display: flex; flex-direction: column; gap: clamp(30.6px, 3.12vw, 46.8px); padding-top: 8px; }
.dec-side h2 { font-size: clamp(24.64px, 1.87vw, 35.88px); }
.dec-side p { font-size: clamp(16px, 0.86vw, 16.38px); }
.dec-side .dec-note { font-size: clamp(15px, 0.74vw, 15px) !important; }
.dec-steps span { font-size: clamp(14px, 0.7vw, 14px); }

/* ============================ 10 · DASHBOARD ============================ */
.s10-head { gap: 24px 40px; flex-wrap: wrap; }
.s10-meta p { font-size: clamp(15.84px, 1.01vw, 18.72px); }
.explore { position: relative; left: auto; top: auto; margin: clamp(20.4px, 2.03vw, 31.2px) 0 14px; flex-wrap: wrap; }
.rdash { position: relative; left: auto; right: auto; top: auto; bottom: auto; height: 720px; }
.rd-tabs { overflow-x: auto; overflow-y: visible; scrollbar-width: none; justify-content: safe center; } /* 'safe': overflowing tabs stay reachable */
.rd-tabs::-webkit-scrollbar { display: none; }
/* the 1240px container leaves room for the mark + 7 tabs only */
.rd-tabs { justify-content: flex-start; padding-bottom: 4px; }
.rd-badges { display: none; }
.rd-brand > div { display: none; }
.rd-ink { bottom: 0; }

/* ============================ 11 · OUTPUTS ============================ */
.outs-grid { display: grid; grid-template-columns: minmax(0, 1110fr) minmax(0, 574fr); gap: clamp(23.8px, 2.34vw, 43.68px); align-items: center; margin-top: clamp(27.2px, 2.65vw, 43.68px); }
.s11 .outs { position: static; width: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s11 .ocard { height: auto; min-height: 280px; }
.s11-lead { font-size: clamp(17px, 0.98vw, 17.94px); }
.report-visual { min-width: 0; }
.report-visual .report3d { left: 0; top: 0; }
.s11-foot { position: static; width: auto; margin-top: 30px; flex-wrap: wrap; gap: 10px 24px; }

/* ============================ 12 · IMPACT ============================ */
.s12 .impact { position: static; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 22px; margin-top: clamp(27.2px, 2.65vw, 43.68px); }
.icard { grid-template-columns: minmax(0, 1fr) 380px; }
.ic-n { font-size: clamp(35.2px, 2.26vw, 42.12px); }
.icard h3 { font-size: clamp(19.36px, 1.29vw, 24.18px); }
.icard p { font-size: clamp(15px, 0.8vw, 15px); }
.ic-viz { width: 100%; max-width: 380px; justify-self: center; }
.viz-dec { width: 380px; height: 230px; }

/* ============================ 13 · TECHNOLOGY ============================ */
.s13 .stack-label { position: static; margin-top: clamp(20.4px, 2.03vw, 31.2px); flex-wrap: wrap; gap: 8px 18px; }
.s13 .stack-label b { font-size: clamp(16.72px, 1.09vw, 20.28px); }
.s13 .marquee { position: relative; left: auto; right: auto; top: auto; margin-top: 22px; }
.sec:not(.in-view) .mq-track { animation-play-state: paused; }
.tech-flow { position: static; grid-template-columns: minmax(0, 1.45fr) 70px minmax(210px, .6fr) 70px minmax(0, 1.2fr); margin-top: clamp(34px, 3.12vw, 54.6px); }
.tf-out h3 { font-size: clamp(19.36px, 1.25vw, 23.4px); }
.tf-out li { font-size: clamp(15px, 0.78vw, 15px); }
.s13-foot { margin-top: clamp(34px, 3.12vw, 49.92px); text-align: center; }
.s13-foot .cfg { font-size: clamp(15px, 0.78vw, 15px); }
.s13-foot .foot-statement { font-size: clamp(16.72px, 1.09vw, 20.28px); }

/* ============================ 14 · CONTACT ============================ */
.s14 { padding-bottom: clamp(40.8px, 4.68vw, 70.2px); }
.fin-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 64px; align-items: end; }
.s14 .fin-copy, .s14 .fin-contact { position: static; width: auto; }
.s14 .fin-h { font-size: clamp(29.92px, 2.57vw, 49.92px); max-width: 1180px; }
.fin-contact .btn { height: 46px; font-size: 16px; padding: 0 22px; }
.fin-contact .contact { font-size: clamp(17px, 0.9vw, 17px); transition: color .2s; }
.fin-contact .contact:hover { color: var(--c-coral-soft); }
.copy-mail { margin: -4px 0 4px; padding: 6px 2px; border: 0; background: none; font: 500 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--c-text-muted); }
.copy-mail:hover { color: var(--c-text); }
.s14 .fin-mark { position: relative; left: auto; right: auto; top: auto; height: auto; aspect-ratio: 1920 / 540; margin-top: clamp(13.6px, 1.87vw, 31.2px); }
.s14 .fin-mark canvas { position: absolute; inset: 0; width: 100%; height: 100%; } /* out of flow: the canvas size never feeds back into the box */
.s14 .fin-tag { position: static; margin: 8px 0 0; font-size: clamp(15px, 0.82vw, 15.6px); }
.s14 .fin-by { text-align: center; margin-top: 18px; }

/* ============================ FOOTER / TOAST ============================ */
.site-foot { position: relative; z-index: 2; border-top: 1px solid var(--c-hairline); padding: 24px 0 30px; }
.site-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; font-size: 14px; color: var(--c-text-dim); }
.site-foot img { width: auto; height: 18px; }
.site-foot a { margin-left: auto; color: var(--c-text-2); }
.site-foot a:hover { color: var(--c-text); }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 70; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 12px; border: 1px solid var(--c-hairline-2);
  background: rgba(20, 22, 28, .96); color: var(--c-text); font-size: 15px; box-shadow: var(--sh-float, 0 20px 50px -20px rgba(0,0,0,.9));
  opacity: 0; transform: translate(-50%, 16px); transition: opacity .3s, transform .35s var(--ease-out); pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ============================ DIALOGS (from the deck) ============================ */
dialog.dlg { position: fixed; inset: 0; margin: auto; width: min(760px, 92vw); height: fit-content; max-height: 86vh; padding: 0; overflow: hidden;
  color: var(--text); border: 1px solid var(--line-2); border-radius: 24px;
  background: var(--wash-violet), linear-gradient(180deg, #1A1C23, #111217);
  box-shadow: 0 50px 120px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255,255,255,.08); }
dialog.dlg::backdrop { background: rgba(0, 0, 0, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.dlg[open] { animation: dlgIn .45s var(--ease); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.dlg-inner { padding: 34px 38px 30px; overflow: auto; max-height: 86vh; overscroll-behavior: contain; }
dialog.dlg.wide { width: min(900px, 92vw); }
.dlg h2 { font: 700 32px/1.15 var(--font-display); letter-spacing: -.02em; margin: 12px 0 8px; padding-right: 48px; }
.dlg h3 { font: 700 19px/1.3 var(--font-display); margin: 26px 0 10px; color: var(--accent); }
.dlg p { color: var(--text-2); font-size: 17px; line-height: 1.6; margin: 0 0 12px; }
.dlg .x { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255,255,255,.05); color: var(--text); font-size: 20px; }
.dlg .x:hover { background: rgba(255, 255, 255, .1); }
.dlg label { display: block; font-size: 14px; color: var(--muted); margin: 18px 0 8px; }
.dlg input, .dlg textarea { width: 100%; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .35); color: var(--text); font-size: 17px; }
.dlg textarea { min-height: 110px; resize: vertical; }
.dlg input:focus, .dlg textarea:focus { outline: none; border-color: rgba(var(--accent-rgb), .7); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14); }
.dlg .input-note { margin-top: 18px; padding: 14px 16px; border-left: 2px solid var(--accent); background: rgba(var(--accent-rgb), .06); border-radius: 0 12px 12px 0; }
.dlg .input-note b { display: block; font: 500 13px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.dlg .input-note span { font-size: 14px; color: var(--muted); }
.dlg .actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }
.dlg .fine { font-size: 13px; color: var(--dim); margin-top: 10px; }
.dlg .dlg-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.dlg .dlg-nav .pair { display: flex; gap: 8px; }
.dlg .detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.dlg .detail-tags span { font-size: 14px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); }
.dlg .detail-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); }
.dlg .detail-flow b { color: var(--accent); font-weight: 400; }
.dlg .callout { margin: 16px 0; padding: 16px 18px; border-left: 2px solid var(--accent-2); background: rgba(var(--accent-2-rgb), .07); border-radius: 0 12px 12px 0; }
.dlg .coverage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin-top: 10px; }
.dlg .coverage h4 { margin: 0 0 4px; font: 500 13px/1.3 var(--font-mono); letter-spacing: .14em; color: var(--accent); }
.dlg .coverage p { font-size: 15px; margin: 0; }
.dlg dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; font-size: 15px; }
.dlg dt { color: var(--accent); font-weight: 600; }
.dlg dd { margin: 0; color: var(--text-2); }

/* =====================================================================
   ≥ 1024px — DESKTOP: one section = one screen (below the sticky header)
   Sections fill the screen and centre their content; everything is sized
   with the viewport height so nothing needs a second screen. Diagram stages
   additionally shrink to the height that is left (js/site.js · fitHeight).
   ===================================================================== */
@media (min-width: 1024px) {
  /* everything sits in the 1240px container (the Wix site width) */
  .stage-wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; padding-inline: 0; }
  .s13 .marquee { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
  .sec:not(.hero) { min-height: calc(100vh - var(--hdr-h)); min-height: calc(100svh - var(--hdr-h)); display: flex; flex-direction: column; justify-content: center;
    padding: clamp(20.4px, 3.36vh, 48px) 0; }
  .sec .eyebrow { font-size: clamp(12px, 0.61vw, 12px); }
  .sec .headline { margin-top: clamp(6.8px, 0.88vh, 12.8px); }
  .stage-wrap { margin-top: clamp(10.2px, 1.76vh, 27.2px); }
  .sec-foot { margin-top: clamp(6.8px, 1.28vh, 20.8px); }
  .foot-statement { font-size: clamp(15.84px, 1.01vw, 20.28px); }
  .foot-sub { font-size: clamp(14px, 0.74vw, 14.04px); }
  .sec-foot .slide-foot .note, .sec-foot .foot-sub { margin-top: 4px; }
  .sec-foot .corner-note { margin-top: 6px; }
  .flowline, .s07-flow, .g-flow { font-size: clamp(14px, 0.78vw, 14.82px); gap: 8px 14px; }
  .s07-chips { margin-top: 10px; gap: 8px; }
  .s07-chips span { padding: 6px 12px; }

  /* 09 · management control: demo left, explanation + timeline right */
  .dec-grid { margin-top: clamp(13.6px, 2.24vh, 35.2px); gap: clamp(20.4px, 2.5vw, 49.92px); align-items: center; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .dec-right { gap: clamp(15.3px, 2.56vh, 35.2px); }
  .dec-side h2 { font-size: clamp(19.36px, 1.4vw, 29.64px); }
  .dec-side p { font-size: clamp(14.5px, 0.76vw, 14.82px); margin-top: clamp(6.8px, 1.2vh, 14.4px); }
  .dec-side .dec-note { font-size: clamp(13.5px, 0.69vw, 13.5px) !important; }
  .dec-steps { margin-top: clamp(8.5px, 1.44vh, 17.6px); }
  .dec-steps span { padding: 8px 13px; }
  .dc-bar { height: 40px; }
  .dc-head { padding: clamp(10.2px, 1.44vh, 16px) 24px; }
  .dc-head b { font-size: clamp(16.72px, 1.05vw, 20.28px); }
  .dc-flag { padding: clamp(11.9px, 1.92vh, 22.4px) 24px clamp(13.6px, 2.08vh, 24px); }
  .dc-flag h3 { font-size: clamp(19.36px, 1.36vw, 28.08px); margin: 10px 0 6px; }
  .dc-flag > p { font-size: clamp(15px, 0.78vw, 15px); }
  .dc-status { margin-top: clamp(8.5px, 1.28vh, 14.4px) !important; font-size: clamp(15px, 0.78vw, 15px); }
  .dc-actions { margin-top: clamp(10.2px, 1.6vh, 17.6px); }
  .dbtn { height: 44px; padding: 0 clamp(13.6px, 1.09vw, 20.28px); font-size: 15px; border-radius: 12px; }
  .tl-step { padding-top: 32px; }
  .tl-step b { font-size: clamp(14px, 0.7vw, 14px); }
  .tl-step small { font-size: clamp(12.5px, 0.58vw, 12.5px); }

  /* 10 · dashboard: the frame takes the height that is left */
  .s10-head { align-items: flex-end; }
  .s10-meta p { margin: 4px 0 8px; }
  .explore { margin: clamp(8.5px, 1.44vh, 19.2px) 0 clamp(6.8px, 0.96vh, 11.2px); }
  .ex-btn { height: 34px; font-size: 14px; padding: 0 14px; }
  .rdash { height: clamp(430px, calc(100svh - var(--hdr-h) - 250px), 720px); }
  .rd-hdr { padding: 10px 18px; }
  .rd-panel { inset: 12px 16px 14px; gap: 10px; }
  .kpis { gap: 10px; }
  .kpi { padding: 11px 14px 10px; }
  .kpi .k-val { font-size: clamp(21.12px, 1.4vw, 26.52px); margin: 5px 0 2px; }
  .kpi .k-val.txt { font-size: clamp(16.72px, 1.05vw, 20.28px); }
  .k-sub { font-size: 12.5px; }
  .rd-row { gap: 10px; }
  .rcard { padding: 11px 14px; }
  .rc-t { margin-bottom: 6px; }
  .rflag { padding: 6px 0; }
  .rflag small { font-size: 12.5px; }
  .mini { height: 28px; padding: 0 9px; font-size: 12px; }
  .funcs > div { padding: 5px 0; font-size: 15px; }
  .donut-cv { width: clamp(81.6px, 5.93vw, 117px); height: clamp(81.6px, 5.93vw, 117px); }
  .legend { gap: 4px; }
  .legend span { font-size: 14px; }
  .plan { padding: 10px 14px; margin-bottom: 8px; }
  #rd-marketing .plan { padding: 12px 16px; margin-bottom: 8px; }
  #rd-marketing .plan b { font-size: 18px; }
  .flow { padding: 8px 0; }
  #rd-workflow .flow, .rcard.soc .flow { padding: 10px 0; }
  #rd-workflow .flow b { font-size: 18px; } #rd-workflow .flow small { font-size: 14px; }
  #rd-workflow .split b { font-size: 30px; }
  .rcard.soc .flow b { font-size: 20px; }
  #rd-google .mbar, .mbar { padding: 10px 0; }
  #rd-growth .mbar.lg { padding: 16px 0; }
  .mbar.lg > span { font-size: 18px; }
  .mbar.lg b { font-size: 22px; }
  #rd-intel .flow.big { padding: 10px 0; } #rd-intel .flow.big b { font-size: 20px; }
  #rd-intel .flights { gap: 12px; } #rd-intel .fl-route { height: 48px; }
  .wcal > div { padding: 8px 4px; gap: 5px; }
  .rd-row.g3 { flex: 1; }
  .rd-row.g2 { flex: 1.3; }
  .rcard:has(.rflag), .rcard:has(.funcs) { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }

  /* 11 · outputs: wide cards (4 across) + a smaller weekly-report visual */
  .outs-grid { grid-template-columns: minmax(0, 1fr) clamp(187px, 16.38vw, 312px); gap: clamp(17px, 2.03vw, 37.44px); margin-top: clamp(11.9px, 1.92vh, 32px); }
  .s11 .outs { gap: 12px; }
  .s11 .ocard { min-height: 0; padding: clamp(10.2px, 1.44vh, 16px) 16px clamp(10.2px, 1.28vh, 12.8px); border-radius: 18px; }
  .s11 .ocard b { font-size: clamp(15.5px, 0.8vw, 15.5px); margin: 6px 0 5px; text-wrap: balance; }
  .s11 .ocard p { font-size: clamp(12.5px, 0.61vw, 12.5px); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .s11 .oc-viz { height: clamp(32.3px, 3.68vh, 46.4px); margin-top: auto; }
  .s11 .ocard p + .oc-viz { margin-top: clamp(6.8px, 1.12vh, 11.2px); }
  .s11 .oc-go { margin-top: clamp(6.8px, 0.96vh, 9.6px); }
  .s11-lead { margin-top: 8px; }
  .s11-foot { margin-top: clamp(8.5px, 1.6vh, 22.4px); }
  .report-visual .stage { margin: 0 auto; }

  /* 12 · impact: 2 × 2, text left + live visual right in every card */
  .s12 .impact { gap: clamp(8.5px, 1.28vh, 17.6px); margin-top: clamp(11.9px, 2.08vh, 32px); }
  .icard { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(11.9px, 1.25vw, 21.84px); padding: clamp(11.9px, 1.92vh, 22.4px) clamp(13.6px, 1.33vw, 24.96px); align-items: center; }
  .ic-n { font-size: clamp(26.4px, 1.79vw, 42.12px); }
  .icard h3 { font-size: clamp(15.84px, 1.09vw, 23.4px); margin: 6px 0 6px; }
  .icard p { font-size: clamp(13.5px, 0.72vw, 14.04px); line-height: 1.45; }
  .ic-viz { height: clamp(119px, 16.8vh, 184px); max-width: 380px; }
  .viz-manual { gap: clamp(5.95px, 0.96vh, 11.2px); }
  .vm-row { grid-template-columns: minmax(80px, 110px) 1fr; }
  .vm-row > span { font-size: clamp(12.5px, 0.62vw, 12.5px); }
  .vc-stack { height: auto; flex: 1; min-height: 0; overflow: hidden; }
  .vc-stack b { height: clamp(11.9px, 1.6vh, 17.6px); flex: none; }
  .viz-imp svg { height: 100%; }
  .ic-viz.viz-dec { width: 380px; height: 230px; max-width: none; }

  /* 13 · technology */
  .s13 .stack-label { margin-top: clamp(8.5px, 1.6vh, 24px); }
  .s13 .stack-label b { font-size: clamp(17px, 0.98vw, 18.72px); }
  .s13 .marquee { margin-top: clamp(6.8px, 1.12vh, 16px); gap: clamp(5.1px, 0.88vh, 12.8px); }
  .s13 .mq-row { height: clamp(51px, 5.92vh, 70.4px); }
  .s13 .mq-tile { height: clamp(44.2px, 5.28vh, 64px); min-width: clamp(144.5px, 9.36vw, 166.92px); border-radius: 16px; }
  .s13 .mq-logo svg { width: clamp(22.1px, 1.56vw, 28.08px); height: clamp(22.1px, 1.56vw, 28.08px); }
  .s13 .mq-name { font-size: clamp(14.5px, 0.74vw, 14.5px); }
  .tech-flow { margin-top: clamp(13.6px, 2.56vh, 44.8px); }
  .tf-caps .mono, .tf-out .mono { font-size: 12px; }
  .caps { margin-top: 10px; gap: 8px; }
  .caps span { height: clamp(30.6px, 3.68vh, 41.6px); font-size: clamp(13px, 0.69vw, 13px); }
  .tf-core { padding: clamp(10.2px, 1.6vh, 20.8px) 16px; gap: 10px; }
  .tf-core .ibos-mark.lg { --m: clamp(18.7px, 1.48vw, 26.52px); }
  .tf-core b { font-size: clamp(14px, 0.74vw, 14.04px); }
  .tf-out h3 { margin: 6px 0 10px; }
  .s13-foot { margin-top: clamp(11.9px, 2.24vh, 38.4px); }
  .s13-foot .foot-statement { margin-top: 6px; }

  /* 14 · contact: the dot-matrix wordmark takes the height that is left */
  .s14 .fin-h { font-size: clamp(24.64px, 1.87vw + 4.68px, 45.24px); }
  .s14 .fin-mark { width: min(var(--wrap), 100% - 2 * var(--gutter), calc((100svh - var(--hdr-h) - 330px) * 3.556)); margin-inline: auto; margin-top: clamp(6.8px, 1.6vh, 25.6px); }
  .s14 .fin-by { margin-top: 10px; }
}
/* shorter desktop screens: drop the secondary KPI lines so every dashboard card fits */
@media (min-width: 1024px) and (max-height: 960px) {
  .kpi .k-sub { display: none; }
  .funcs > div { padding: 3px 0; font-size: 14px; }
  .funcs .tag { padding: 3px 6px; }
}
/* very short desktop screens (e.g. 1024 × 768): rows keep a readable height and
   the dashboard panel scrolls inside its frame instead of squashing the charts */
@media (min-width: 1024px) and (max-height: 860px) {
  .rd-panel { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; padding-right: 4px; }
  .rd-row.g3, .rd-row.g2 { flex: none; height: 190px; }
  .rd-row.g2.tall, .rd-row.g1.tall, .rd-row.g4 { flex: 1 0 200px; height: auto; }
  .s13 .mq-row { height: 56px; padding: 2px 0; }
  .s13 .mq-tile { height: 50px; min-width: 150px; }
  .s13 .marquee { gap: 4px; }
  .caps span { height: 34px; }
}
/* small desktops: the output cards take the full width (4 across); the decorative
   report visual returns from 1280px (and below the cards on tablet / phone) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .outs-grid { grid-template-columns: 1fr; }
  .report-visual { display: none; }
}
/* the decision-card visual sizes with the card column (it is drawn at 380 × 230) */
@media (min-width: 1024px) and (max-width: 1279px) { .viz-dec { zoom: .54; } }
@media (min-width: 1280px) and (max-width: 1599px) { .viz-dec { zoom: .7; } }
@media (min-width: 1600px) { .viz-dec { zoom: .9; } }
@media (min-width: 1024px) and (max-height: 820px) { .viz-dec { zoom: .58; } }

/* =====================================================================
   1024–1599px — fine tuning of the scaled desktop layout
   ===================================================================== */
@media (min-width: 1024px) and (max-width: 1599px) {
  .tech-flow { grid-template-columns: minmax(0, 1.3fr) 48px minmax(180px, .6fr) 48px minmax(0, 1.2fr); }
}

/* =====================================================================
   < 1024px — COMPACT: diagrams restack into readable cards
   ===================================================================== */
@media (max-width: 1023px) {
  body { font-size: 17px; }
  .stage-wrap { width: auto; margin-inline: 0; padding-inline: var(--gutter); }
  .stage.diag { width: auto !important; height: auto !important; max-width: 1100px; }
  .stage.diag > .stage-inner { position: relative; width: auto !important; height: auto !important; transform: none !important; }
  .stage.diag .dia { position: relative; inset: auto; }
  .stage.diag .dia > svg, .stage.diag .cards-lane, .stage.diag .belt, .stage.diag .atmo { display: none; }
  .stage.diag .dia [style*="left"], .stage.diag .dia [style*="top"] { left: auto !important; top: auto !important; }

  /* 02 · platforms → hub */
  .s02 .dia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .s02 .ptile { position: relative; width: auto; height: auto; min-height: 78px; padding: 12px 20px 12px 12px; gap: 14px; }
  .s02 .ptile.hot { translate: none; }
  .s02 .ptile-ic { width: 66px; height: 48px; font-size: 22px; }
  .s02 .ptile-ic img { width: 26px; height: 26px; }
  .s02 .ptile-t b { font-size: 18px; }
  .s02 .ptile-t small { font-size: 14px; }
  .s02 .hub { position: relative; grid-column: 1 / -1; width: 420px; height: 420px; margin: -70px calc(50% - 210px) -70px; transform: scale(.66); }
  .s02 .hub::before { content: ''; position: absolute; left: 50%; top: -40px; width: 2px; height: 64px; margin-left: -1px; background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), .8)); }
  .s02 .s02-foot { position: relative; left: auto; top: auto; width: auto; margin-top: 18px; }
  .s02-foot .before { font-size: 15px; }
  .s02-foot .after { font-size: clamp(22px, 3.2vw, 34px); }

  /* 03 · action loop */
  .s03 .dia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .s03 .lnode { position: relative; width: auto; height: auto; }
  .s03 .lnode > b { font-size: 22px; }
  .s03 .lnode > p { font-size: 16px; }
  .s03 .lnode.decide { grid-column: 1 / -1; height: auto; padding-bottom: 38px; margin-bottom: 12px; }
  .s03 .lnode.decide > b { font-size: 28px; }
  .s03 .cyc-count { position: relative; grid-column: 1 / -1; width: auto; margin-top: 6px; }
  .s03 .next-cycle { position: relative; grid-column: 1 / -1; justify-self: center; }

  /* 04 · control room */
  .s04 .dia.room { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .s04 .room-core { position: relative; grid-column: 1 / -1; justify-self: center; width: 200px; height: 200px; margin: 44px 0 50px; }
  .s04 .room-core .ibos-mark.lg { --m: 26px; }
  .s04 .fpanel { position: relative; width: auto !important; height: auto; grid-template-rows: auto auto auto; row-gap: 10px; }
  .s04 .fpanel.decision { grid-column: 1 / -1; height: auto; }
  .s04 .fp-title { font-size: 20px; }
  .s04 .fp-viz { grid-column: 2; height: 44px; }
  .s04 .fp-desc { position: static; grid-column: 2; opacity: 1; transform: none; font-size: 15.5px; }
  .s04 .fpanel.open .fp-viz { opacity: 1; transform: none; }
  .s04 .fpanel.open, .s04 .fpanel.decision.open { translate: none; }

  /* 05 · signals */
  .s05 .dia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .s05 .sig-in { position: relative; left: auto; width: auto; height: 62px; }
  .s05 .sig-in b { font-size: 16px; }
  .s05 .sig-in .spark { width: 72px; }
  .s05 .sig-core { position: relative; grid-column: 1 / -1; width: 320px; height: 320px; margin: -44px calc(50% - 160px); transform: scale(.66); }
  .s05 .sig-out { position: relative; left: auto; width: auto; height: auto; grid-column: 1 / -1; }
  .s05 .so-in { height: auto; min-height: 150px; grid-template-columns: minmax(0, 1fr) minmax(120px, 200px); }
  .s05 .so-chart { width: 100%; }

  /* 06 · strategy */
  .s06 .dia { display: flex; flex-direction: column; gap: 14px; }
  .s06 .inputs-label { position: static; }
  .s06 .st-in { position: relative; width: auto; height: auto; min-height: 120px; padding: 18px 20px; grid-template-columns: 56px minmax(0, 1fr) 96px; }
  .s06 .st-in b { font-size: 23px; }
  .s06 .st-ic { width: 56px; height: 56px; }
  .s06 .st-viz.radar-mini { width: 86px; height: 86px; }
  .s06 .st-plus { position: relative; margin: -4px auto; }
  .s06 .st-out { position: relative; width: auto; height: auto; margin-top: 30px; padding: 26px 24px; }
  .s06 .st-out::after { content: ''; position: absolute; left: 50%; top: -34px; width: 2px; height: 26px; margin-left: -1px; background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), .9)); }
  .s06 .recs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
  .s06 .recs li { height: auto; min-height: 56px; padding: 12px 16px; font-size: 18px; }
  .s06 .evpath { position: relative; left: auto; right: auto; height: 96px; margin: 26px 70px 6px; }
  .s06 .ev-node { width: 140px; margin-left: -70px; }
  .s06 .ev-node b { font-size: 15px; line-height: 1.25; }

  /* 07 · content pipeline: horizontal strip of stations */
  .s07 .stations { position: relative; left: auto; right: auto; top: auto; height: auto; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 16px; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
  .s07 .station { flex: 0 0 clamp(236px, 30vw, 280px); min-height: 300px; scroll-snap-align: start; }

  /* 08 · Google & performance */
  .s08 .dia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .s08 .g-core { position: relative; grid-column: 1 / -1; justify-self: center; width: 180px; height: 180px; margin: 50px 0 56px; }
  .s08 .gcard { position: relative; width: auto; padding: 18px 20px; }
  .s08 .gweb { position: relative; width: auto; grid-column: 1 / -1; }
  .sec-head .demo-flag { position: static; display: inline-block; margin-top: 16px; }

  /* 09 · decision */
  .dec-grid { grid-template-columns: 1fr; }
  .dec-right { padding-top: 0; }

  /* 10 · dashboard */
  .rdash { height: auto; }
  .rd-hdr { flex-wrap: wrap; gap: 10px 14px; padding: 12px 14px 8px; }
  .rd-brand > div { display: block; }
  .rd-badges { display: flex; margin-left: auto; }
  .rd-tabs { order: 3; flex: 1 1 100%; justify-content: flex-start; padding-bottom: 6px; scroll-snap-type: x proximity; }
  .rd-tab { height: 42px; font-size: 15px; scroll-snap-align: start; }
  .rd-ink { bottom: 0; }
  .rd-panel { position: static; inset: auto; padding: 16px 14px 18px; }
  .kpis.c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-row, .rd-row.g3, .rd-row.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); flex: none; }
  .rd-row.g3 > :first-child { grid-column: 1 / -1; }
  .rd-row.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-row.g1 { grid-template-columns: 1fr; }
  .ch { flex: none; height: 240px; }
  .rflag { grid-template-columns: 30px minmax(0, 1fr); }
  .rf-btns { grid-column: 1 / -1; flex-wrap: wrap; padding-left: 42px; }
  .donut-wrap { flex-wrap: wrap; gap: 18px; }
  .wcal { overflow-x: auto; grid-template-columns: repeat(7, minmax(58px, 1fr)); }
  .mbar.lg { grid-template-columns: 170px minmax(0, 1fr) 70px; padding: 18px 0; }
  .mbar.lg > span { font-size: 18px; }
  .mbar.lg b { font-size: 22px; }

  /* 11 · outputs */
  .outs-grid { grid-template-columns: 1fr; }
  .report-visual { width: min(460px, 100%); margin-inline: auto; }
  .s11-foot { justify-content: center; text-align: center; }

  /* 13 · technology */
  .tech-flow { grid-template-columns: 1fr; justify-items: stretch; }
  .tf-arrow { width: 2px; height: 46px; margin: 10px auto; }
  .tf-arrow::after { right: auto; left: -5px; top: auto; bottom: -2px; border: 6px solid transparent; border-top: 9px solid rgba(var(--accent-rgb), .8); border-bottom: 0; }
  .tf-arrow i { left: -3px; animation-name: tfmoveV; }
  @keyframes tfmoveV { from { top: 0; opacity: 0; } 20% { opacity: 1; } to { top: calc(100% - 8px); opacity: 0; } }
  .tf-core { width: min(360px, 100%); margin-inline: auto; }
  .tf-out { text-align: left; }
}

/* =====================================================================
   < 1024px — single column
   ===================================================================== */
@media (max-width: 1023px) {
  .hero { min-height: 0; padding-top: calc(var(--hdr-h) + 40px); }
  .hero-grid { grid-template-columns: 1fr; gap: 12px; }
  .hero-visual { width: min(620px, 100%); margin: 0 auto; }
  .s12 .impact { grid-template-columns: 1fr; }
  .icard { grid-template-columns: minmax(0, 1fr) 380px; }
  .fin-grid { grid-template-columns: 1fr; align-items: start; }
  .fin-contact { align-items: flex-start !important; }
  .outs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .s10-head { flex-direction: column; align-items: flex-start; }
  .s10-meta { text-align: left; }
}

/* =====================================================================
   < 768px — mobile
   ===================================================================== */
@media (max-width: 767px) {
  :root { --hdr-h: 56px; }
  body { font-size: 17px; }
  .sec { padding: 76px 0; }
  .sec .headline br { display: none; }
  .foot-statement { font-size: 21px; }
  .hero .headline.display { font-size: clamp(36px, 10.5vw, 48px); }
  .hero .headline br { display: inline; }
  .hero-ctas .btn { flex: 1 1 auto; }
  .hero .orbit-chip { font-size: 30px; padding: 16px 26px; border-radius: 20px; gap: 12px; }
  .hero .orbit-chip::before { width: 10px; height: 10px; }
  .scroll-cue { display: none; }

  .s02 .dia, .s03 .dia, .s04 .dia.room, .s08 .dia { grid-template-columns: 1fr; }
  .s02 .hub { transform: scale(.6); margin-block: -84px; }
  .s02-foot .before i { margin: 0 6px; }
  .s04 .fpanel { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; padding: 18px; }
  .s04 .fp-ic { width: 48px; height: 48px; border-radius: 14px; }
  .s04 .fp-desc { grid-column: 1 / -1; }
  .s04 .fp-viz { grid-column: 1 / -1; }
  .s04 .viz-decide { flex-wrap: wrap; height: auto; }
  .s05 .dia { grid-template-columns: 1fr; }
  .s05 .so-in { grid-template-columns: minmax(0, 1fr) 128px; padding: 18px; }
  .s05 .so-k { font-size: 21px; }
  .s06 .st-in { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
  .s06 .st-in .st-viz { display: none; }
  .s06 .st-ic { width: 48px; height: 48px; }
  .s06 .st-in b { font-size: 20px; }
  .s06 .st-out { padding: 22px 18px; }
  .s06 .recs { grid-template-columns: 1fr; }
  .s06 .recs li { font-size: 17px; }
  .s06 .evpath { margin-inline: 44px; }
  .s06 .evpath { margin-top: 64px; }
  .s06 .ev-node { width: 128px; margin-left: -64px; }
  .s06 .ev-node b { font-size: 13.5px; }
  .s06 .ev-node:nth-of-type(odd) b { position: absolute; left: 0; right: 0; bottom: 100%; margin: 0 0 8px; }
  .s07 .station { flex-basis: 78vw; }

  .dc-head { flex-wrap: wrap; padding: 18px 20px; }
  .dc-head .tag { margin-left: 0; }
  .dc-flag { padding: 22px 20px 26px; }
  .dc-flag h3 { font-size: 26px; }
  .dc-flag > p, .dc-status { font-size: 17px; }
  .dc-actions .dbtn { flex: 1 1 auto; justify-content: center; height: 46px; padding: 0 16px; font-size: 16px; }
  .dc-bar .dc-right { display: none; }
  .timeline { grid-template-columns: 1fr; gap: 18px; }
  .timeline::before { left: 9px; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto; background: linear-gradient(180deg, rgba(var(--accent-rgb), .6) 0 55%, rgba(255, 255, 255, .108) 55%); }
  .timeline.t-done::before { background: rgba(var(--accent-rgb), .6); }
  .tl-step { padding: 0 0 0 36px; }

  .explore { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 8px; scrollbar-width: none; }
  .explore::-webkit-scrollbar { display: none; }
  .ex-btn { flex: none; height: 42px; }
  .rd-badges { display: none; }
  .kpis.c5, .kpis.c4, .kpis.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 13px 14px 12px; }
  .kpi .k-val { font-size: 28px; }
  .rd-row, .rd-row.g3, .rd-row.g2, .rd-row.g4 { grid-template-columns: 1fr; }
  .ch { height: 220px; }
  .donut-cv { width: 128px; height: 128px; }
  .mini { height: 38px; font-size: 14px; }
  .mbar { grid-template-columns: 96px minmax(0, 1fr) 46px; gap: 10px; }
  .mbar > span { font-size: 14px; }
  .mbar.lg { grid-template-columns: 1fr 60px; }
  .mbar.lg > span { grid-column: 1 / -1; }
  .split { grid-template-columns: 1fr; }
  .split b, #rd-workflow .split b { font-size: 28px; }

  /* outputs: swipeable strip */
  .outs { display: flex !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 16px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .outs::-webkit-scrollbar { display: none; }
  .s11 .ocard { flex: 0 0 78vw; min-height: 300px; scroll-snap-align: start; }
  .s11 .ocard b { font-size: 21px; }
  .s11 .ocard p { font-size: 15.5px; }
  .report-visual { width: min(360px, 100%); }

  .icard { grid-template-columns: 1fr; padding: 22px 20px; }
  .ic-viz { height: 210px; }

  .marquee .mq-row { height: 70px; }
  .mq-tile { height: 62px; min-width: 168px; margin-right: 12px; padding: 0 18px 0 14px; gap: 12px; border-radius: 16px; }
  .mq-logo, .mq-mono { width: 32px; height: 32px; }
  .mq-logo svg { width: 28px; height: 28px; }
  .mq-name, .mq-tile.word .mq-name { font-size: 15px; }
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .caps span { font-size: 14.5px; height: 48px; }
  .tf-out ul { grid-template-columns: 1fr; }

  .fin-contact .btn { width: 100%; }
  .s14 .fin-mark { aspect-ratio: 1920 / 760; }

  .site-foot a { margin-left: 0; }

  /* popups become full-screen sheets */
  dialog.dlg, dialog.dlg.wide { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; }
  dialog.dlg[open] { animation: sheetIn .4s var(--ease); }
  @keyframes sheetIn { from { transform: translateY(40px); opacity: 0; } }
  .dlg-inner { height: 100%; max-height: 100%; padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); }
  .dlg .x { position: sticky; top: 0; float: right; margin: -4px -4px 0 12px; z-index: 2; background: rgba(26, 28, 35, .95); }
  .dlg h2 { font-size: 25px; padding-right: 0; }
  .dlg p { font-size: 16px; }
  .dlg .coverage, .dlg dl { grid-template-columns: 1fr; }
  .dlg dl { gap: 2px 0; } .dlg dd { margin-bottom: 8px; }
  .dlg .actions { flex-direction: column-reverse; }
  .dlg .actions .btn { width: 100%; }
  .dlg .dlg-nav { position: sticky; bottom: -24px; background: linear-gradient(180deg, rgba(17, 18, 23, 0), #111217 30%); padding-bottom: 6px; }
}
@media (max-width: 439px) {
  .viz-dec { zoom: .82; }
  .s02 .ptile-t small { font-size: 13px; }
}

/* =====================================================================
   COLOUR RULES (website) — see ibos-deepdive-v3/BRAND-SYSTEM.md § 1b
   · Text: white (primary) and grey (secondary) only. Closing lines follow
     the headline pattern: first part white, second part grey. The one coral
     word is "Control" in the hero module list.
   · Coral = brand / action: the primary "Book a demo" button, eyebrow dots,
     the scroll progress line, card background glows, chart / data accents.
   · Violet = interaction: active tab / chip, "Explore output" links,
     completed timeline steps, focus rings.
   · Green only after something is approved, red only after a decline.
     Teal is only a data colour inside charts.
   · Status badges are neutral (grey outline, light text); only the active
     chip / tab gets colour. Approve / Decline / Defer are neutral until
     hovered or clicked.
   ===================================================================== */
/* text: white + grey */
em.hl, .headline em.hue { color: var(--c-text-muted); }
.hero .cover-mods em.hl { color: var(--c-coral-soft); }            /* the one coral word */
em.decision { color: var(--c-text); }
.foot-statement, .s10-meta p { color: var(--c-text); }
.s07-flow .decision-t { color: var(--c-text); }
.stack-label .mono { color: var(--c-text-muted); }
.s02-foot .before s { text-decoration-color: rgba(255, 255, 255, .35); }
.station.decision .stn-n { color: var(--accent); }
.station.decision b, .fpanel.decision .fp-title, .ev-node.decision.on b, .split > div.decision b { color: var(--c-text); }
.kpi.decision .k-val, .kpi.coral .k-val { color: var(--c-text); }
.kpi.coral::before { background: linear-gradient(90deg, var(--c-coral), transparent 80%); }
.dc-eyebrow { color: var(--c-text-muted); }
.dc-eyebrow svg { color: var(--c-coral-soft); }
.sig-out.opp .so-k, .sig-out.risk .so-k, .sig-out.ins .so-k { color: var(--c-text); }
.sig-out.opp .so-k svg { color: var(--accent); }
.sig-out.risk .so-k svg, .sig-out.ins .so-k svg { color: var(--c-coral-soft); }
.sig-out.risk .so-in { border-color: rgba(var(--c-coral-rgb), .35); }
.sig-out.risk .ln { stroke: var(--c-coral-soft); }
.sig-out.risk .area { fill: rgba(var(--c-coral-rgb), .12); }

/* card glows: coral / violet (teal only inside charts) */
.tone-teal { --wash: var(--wash-violet); --hue: var(--c-violet-soft); }
.ev-fill { background: linear-gradient(90deg, var(--accent), var(--c-coral-soft)); }

/* 03 · YOU DECIDE: white title, coral icon badge + "Click to decide", thin outline */
.lnode.decide { border-color: rgba(var(--decision-rgb), .28); }
.lnode.decide > b { color: var(--c-text); }
.lnode.decide .ln-n { color: var(--c-text-muted); }
.lnode.decide.lit, .lnode.decide.waiting { border-color: rgba(var(--decision-rgb), .5); box-shadow: 0 0 0 1px rgba(var(--decision-rgb), .1), 0 0 26px -10px rgba(var(--decision-rgb), .4); }
.lnode.decide.waiting { animation-name: decisionPulseSoft; }
@keyframes decisionPulseSoft { 50% { box-shadow: 0 0 0 3px rgba(var(--decision-rgb), .07), 0 0 32px -8px rgba(var(--decision-rgb), .38); } }
.fpanel.decision, .station.decision { border-color: rgba(var(--decision-rgb), .22); }
.fpanel.decision.open { border-color: rgba(var(--decision-rgb), .5); box-shadow: 0 0 0 1px rgba(var(--decision-rgb), .1), 0 0 30px -10px rgba(var(--decision-rgb), .4); }

/* 09 · management control */
.dc-status:not(.s-approve):not(.s-decline):not(.s-defer) { color: var(--c-text) !important; }
.dc-status:not(.s-approve):not(.s-decline):not(.s-defer) .st-dot { background: var(--c-coral); }
.dec-steps span { color: var(--c-text-muted); border-color: var(--line-2); background: transparent; box-shadow: none; }
.dec-steps span.on { color: #0A0B0F; background: #E6E7EC; border-color: #E6E7EC; box-shadow: none; }
.dec-steps span.done { color: var(--c-text-2); border-color: var(--line-3); }

/* Approve / Decline / Defer: neutral until hovered or clicked (demo, dashboard flags,
   Management Control card, content pipeline) */
.dbtn.ok, .dbtn.no, .dbtn.wait, .mini.ok, .mini.no, .mini.wait { color: var(--c-text-2); border-color: var(--line-3); background: rgba(255, 255, 255, .03); box-shadow: none; }
.dbtn.ok:not(.chosen):hover, .mini.ok:not(.chosen):hover { color: var(--ok); border-color: rgba(var(--ok-rgb), .55); background: rgba(var(--ok-rgb), .08); }
.dbtn.no:not(.chosen):hover, .mini.no:not(.chosen):hover { color: var(--coral); border-color: rgba(var(--coral-rgb), .5); background: rgba(var(--coral-rgb), .08); }
.dbtn.wait:not(.chosen):hover, .mini.wait:not(.chosen):hover { color: var(--c-text); border-color: var(--line-3); background: rgba(255, 255, 255, .08); }
.dbtn:not(.chosen):hover { box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .8); }
.viz-decide i, .viz-decide i:nth-child(2), .viz-decide i:nth-child(3),
.deco-approve i.ok, .deco-approve i.no, .deco-approve i.wait { color: var(--c-text-2); border-color: var(--line-3); background: none; }
.deco-approve i.ok.flash { background: var(--g-success); color: var(--c-success-ink); border-color: transparent; box-shadow: 0 0 24px rgba(var(--ok-rgb), .55); }

/* status badges neutral; only the active chip / tab is coloured (violet) */
.tag, .tag.iris, .tag.decision, .tag.coral, .demo-flag { border-color: var(--line-2); color: var(--c-text-2); background: rgba(255, 255, 255, .03); }
.live-dot { background: var(--c-text-muted); box-shadow: none; }
.ex-btn, #open-reports { color: var(--c-text-2); border-color: var(--line-2); background: rgba(255, 255, 255, .03); }
.ex-btn:hover { color: var(--c-text); border-color: var(--line-3); background: rgba(255, 255, 255, .06); }
.ex-btn.on { color: var(--c-violet-soft); border-color: rgba(var(--c-violet-rgb), .55); background: rgba(var(--c-violet-rgb), .1); }
.rd-ink { background: var(--c-violet-soft); box-shadow: 0 0 10px rgba(var(--c-violet-rgb), .6); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cursor-glow { display: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}