/* =========================================================
   RMB v3 — THE STORY: scrollytelling stage + scenes
   (layers on top of style.css base system)
   ========================================================= */

/* ---------- Story hero ---------- */
.shero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 140px var(--pad) 100px; overflow: hidden; }
.shero-inner { position: relative; z-index: 2; max-width: 980px; }
.shero-kicker { font-size: clamp(11px, 1.3vw, 13px); letter-spacing: .34em; color: var(--neon); margin-bottom: 30px; }
.shero-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(56px, 11vw, 150px); line-height: .94; }
.st-line { display: block; overflow: hidden; padding-bottom: .05em; margin-bottom: -.05em; }
.shero-sub { margin-top: 28px; color: var(--ink-dim); font-size: clamp(16px, 1.9vw, 19px); }
.shero-cue { position: absolute; bottom: -14vh; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--ink-faint); }
.shero-cue .mono { font-size: 11px; letter-spacing: .34em; }
.cue-arrow { font-size: 22px; animation: cueBounce 1.6s ease-in-out infinite; }
@keyframes cueBounce { 50% { transform: translateY(10px); } }

/* ---------- Pinned story ---------- */
.story { position: relative; }
.story-pin { position: relative; height: 100svh; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(26,46,90,.32), transparent 70%),
    linear-gradient(180deg, #05070C 0%, #070A12 55%, #05070C 100%);
}

/* progress dots */
.story-steps { position: absolute; right: clamp(16px, 3vw, 40px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; z-index: 6; }
.ss-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(232,237,244,.14); transition: background .3s, box-shadow .3s, transform .3s; }
.ss-dot.active { background: var(--neon); box-shadow: 0 0 12px var(--neon); transform: scale(1.3); }

/* captions */
.captions { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.cap {
  position: absolute; left: 50%; top: clamp(86px, 12vh, 130px); transform: translateX(-50%);
  text-align: center; width: min(900px, calc(100% - 40px));
  opacity: 0; visibility: hidden;
}
.cap h2 { font-family: var(--display); font-weight: 600; text-transform: uppercase; font-size: clamp(30px, 5.6vw, 62px); line-height: 1.02; letter-spacing: .015em; text-shadow: 0 4px 40px rgba(3,4,7,.8); }
.cap h2 em { font-family: var(--serif); font-style: italic; font-weight: 500; text-transform: none; font-size: 1.06em; color: var(--ink); text-shadow: 0 4px 40px rgba(3,4,7,.8); }
.cap-tag { font-size: clamp(10.5px, 1.2vw, 12.5px); letter-spacing: .34em; color: var(--neon); margin-bottom: 16px; }
.cap-cta { pointer-events: auto; margin-top: 26px; }
#cap6 h2 .grad-text { text-shadow: none; }

/* stage */
.stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#fxCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
#stageSvg { width: min(900px, 96vw); height: auto; max-height: 86svh; overflow: visible; }

/* SVG text styles */
.zzz { font-family: var(--display); font-weight: 700; font-size: 44px; fill: #8891A0; opacity: 0; }
.zzz.z2 { font-size: 56px; } .zzz.z3 { font-size: 70px; }
.swatch-aa { font-family: var(--display); font-weight: 600; font-size: 30px; fill: var(--ink); }
.sw-italic { font-family: var(--serif); font-style: italic; }
.sw-mono { font-family: var(--mono); font-size: 26px; }
.url-text { font-family: var(--mono); font-size: 13.5px; fill: #8FA6D4; text-anchor: middle; letter-spacing: 2px; }
.ui-btn-text { font-family: var(--mono); font-size: 12.5px; fill: #fff; text-anchor: middle; letter-spacing: 2px; }
.bub-txt { font-family: var(--mono); font-size: 16px; fill: #04070B; text-anchor: middle; font-weight: 700; }
.count-txt { font-family: var(--mono); font-size: 15px; fill: #AFC3E8; text-anchor: middle; letter-spacing: 2px; font-weight: 500; }

/* ---------- Services ---------- */
.services { padding: clamp(110px, 15vw, 180px) 0; position: relative; }
.services::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 45% at 50% 40%, rgba(124,92,255,.08), transparent 70%); pointer-events: none; }
.services-title { text-align: center; font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: clamp(38px, 6.2vw, 78px); line-height: 1; margin-bottom: clamp(44px, 6vw, 70px); }
.services-title span { color: var(--ink-dim); }
.svc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.svc {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 16px;
  background: linear-gradient(165deg, rgba(14,17,22,.9), rgba(3,4,7,.95));
  padding: 28px 24px; position: relative; overflow: hidden;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.svc:hover { transform: translateY(-6px); box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--accent) 55%, transparent); }
.svc::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--accent); box-shadow: 0 0 16px var(--accent); }
.svc-emoji { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: 26px; margin-bottom: 18px; }
.svc h3 { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 30px; line-height: 1; }
.svc-name { font-size: 10.5px; letter-spacing: .26em; color: var(--accent); margin: 8px 0 12px; }
.svc p:last-child { color: var(--ink-dim); font-size: 14.5px; line-height: 1.6; }

@media (max-width: 960px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .story-steps { right: 10px; gap: 10px; }
  .cap { top: clamp(70px, 9vh, 110px); }
}
@media (max-width: 620px) {
  .svc-grid { grid-template-columns: 1fr; }
  #stageSvg { width: 130vw; max-height: 72svh; }
  .cap h2 { font-size: clamp(30px, 9vw, 44px); }
  .shero-cue { bottom: -10vh; }
}

@media (prefers-reduced-motion: reduce) {
  .cue-arrow { animation: none; }
}

/* v3.1 professional stage text */
.badge-txt { font-family: var(--mono); font-size: 13.5px; fill: #9FB4D8; text-anchor: middle; letter-spacing: 3px; font-weight: 500; }
.chip-txt { font-family: var(--mono); font-size: 15px; fill: #AFC3E8; text-anchor: middle; letter-spacing: 2px; font-weight: 500; }
.chip-cyan { fill: #8FD8EA; }


/* ========================================================
   v3.3 — helix canvas + light sections
   ======================================================== */
main { position: relative; z-index: 1; }
.shero { background: radial-gradient(ellipse 65% 50% at 50% 38%, rgba(26,46,90,.35), transparent 72%), #05070C; }
.story { background: #05070C; }

/* Light half of the site */
.services, .stats, .cta { position: relative; z-index: 1; }
.services { background: #F5F7FB; }
.services::before { background: radial-gradient(ellipse 55% 45% at 50% 40%, rgba(77,124,255,.07), transparent 70%); }
.services .section-eyebrow { color: #3B63D8; }
.services-title { color: #0B0E13; }
.services-title span { color: #5A6578; }
.svc { background: #FFFFFF; border-color: #E2E8F2; box-shadow: 0 10px 30px -18px rgba(11,22,46,.18); }
.svc:hover { box-shadow: 0 28px 60px -24px rgba(45,86,180,.3); }
.svc h3 { color: #0B0E13; }
.svc p:last-child { color: #5A6578; }
.svc-emoji { background: rgba(77,124,255,.1); color: #3B63D8; }
.svc::before { background: var(--accent); box-shadow: none; }
.svc .svc-name { color: #3B63D8; }

.stats { background: #FFFFFF; }
.stats::before { background: radial-gradient(ellipse 50% 45% at 50% 55%, rgba(77,124,255,.06), transparent 70%); }
.stats-title { color: #0B0E13; }
.stats-title span { color: #5A6578; }
.stats .stat b { color: #0B0E13; text-shadow: none; }
.stats .stat span:last-child { color: #7A8598; }
.stats .stats-row { border-top-color: #E2E8F2; }

.cta { background: #EEF2F8; }
.cta::before { opacity: .1; }
.cta .section-eyebrow { color: #3B63D8; }
.cta-title { color: #0B0E13; }
.cta-copy { color: #5A6578; }
.cta-details a { color: #0B0E13; border-bottom-color: #C9D4E6; }
.cta-details a:hover { border-bottom-color: #3B63D8; }
.cta-details span { color: #7A8598; }
.cta-form { background: #FFFFFF; border-color: #E2E8F2; box-shadow: 0 24px 60px -28px rgba(11,22,46,.22); }
.cta-form .form-field label { color: #7A8598; }
.cta-form .form-field input, .cta-form .form-field select, .cta-form .form-field textarea {
  background: #F7F9FC; border-color: #DCE3EF; color: #0B0E13;
}
.cta-form .form-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230B0E13' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; }
.cta-form .form-field select option { background: #FFFFFF; color: #0B0E13; }
.cta-form .form-field input::placeholder, .cta-form .form-field textarea::placeholder { color: #9AA6B8; }
.cta-form .form-field input:focus, .cta-form .form-field select:focus, .cta-form .form-field textarea:focus {
  border-color: #3B63D8; box-shadow: 0 0 0 3px rgba(77,124,255,.15);
}
.cta-form .btn-primary { background: #0B0E13; color: #FFFFFF; }
.cta-form .form-note { color: #9AA6B8; }


/* v3.5 — editorial side captions */
.cap-side {
  left: auto; right: auto; transform: translateY(-50%);
  top: 50%; text-align: left; width: min(440px, 38vw);
}
.cap-left { left: clamp(28px, 7vw, 130px); }
.cap-right { right: clamp(28px, 7vw, 130px); }
.cap-side h2 { font-size: clamp(28px, 3.6vw, 52px); line-height: 1.06; }
.cap-desc { color: var(--ink-dim); font-size: 15px; line-height: 1.65; margin-top: 16px; max-width: 400px; }
.cap-rule { display: block; width: 58px; height: 2px; background: var(--neon-grad); margin-top: 22px; border-radius: 2px; }
.cap-side .cap-tag { margin-bottom: 14px; }

@media (max-width: 960px) {
  .cap-side { left: 50%; right: auto; transform: translate(-50%, 0); top: clamp(70px, 9vh, 110px); text-align: center; width: min(560px, calc(100% - 48px)); }
  .cap-desc { margin-inline: auto; font-size: 13.5px; }
  .cap-rule { margin-inline: auto; }
}


/* ========================================================
   v4 — APPLE x PORSCHE THEME
   Sentence case, clean sans headings, white pill CTAs,
   quieter chrome, generous air.
   ======================================================== */
.shero-title, .cap h2, .services-title, .stats-title, .cta-title, .svc h3 {
  font-family: var(--body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.025em;
}
.shero-title { font-size: clamp(44px, 7.4vw, 104px); line-height: 1.02; }
.cap h2 { font-size: clamp(26px, 3.1vw, 46px); line-height: 1.12; }
.cap-side { width: min(460px, 40vw); }
.captions .cap:not(.cap-side) h2 { font-size: clamp(30px, 4.6vw, 58px); }
.services-title { font-size: clamp(32px, 4.6vw, 60px); line-height: 1.08; }
.stats-title { font-size: clamp(30px, 4.4vw, 56px); line-height: 1.08; }
.cta-title { font-size: clamp(34px, 5vw, 64px); line-height: 1.05; }
.svc h3 { font-size: 22px; letter-spacing: -0.015em; }
.cap h2 em, .shero-title em, .cta-title em, .stats-title .st-dot { text-transform: none; }
.shero-sub, .cap-desc, .cta-copy { font-weight: 300; }

/* buttons: white pill / quiet ghost */
.btn {
  font-family: var(--body); font-weight: 500; letter-spacing: .01em;
  text-transform: none; font-size: 15.5px; padding: 15px 30px; border-radius: 99px;
}
.btn-primary { background: #FFFFFF; color: #0B0E13; box-shadow: 0 8px 28px -12px rgba(0,0,0,.6); }
.btn-primary::before { display: none; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -12px rgba(77,124,255,.45); }
.btn-ghost { border-color: rgba(232,237,244,.28); font-weight: 400; }
.btn-ghost:hover { box-shadow: none; border-color: rgba(232,237,244,.6); transform: translateY(-1px); }
.cta-form .btn-primary { background: #0B0E13; color: #fff; }

/* nav: quieter, airier */
.nav { padding-block: 20px; }
.nav.scrolled { padding-block: 13px; }
.nav-links a { font-family: var(--body); font-size: 13.5px; letter-spacing: .06em; text-transform: none; font-weight: 400; }
.nav-links a::after { box-shadow: none; height: 1.5px; }
.nav-cta {
  font-family: var(--body); font-weight: 500; font-size: 14px; letter-spacing: .01em; text-transform: none;
  background: #FFFFFF; color: #0B0E13; border: none; padding: 11px 22px; border-radius: 99px;
}
.nav-cta i { display: none; }
.nav-cta:hover { background: #FFFFFF; box-shadow: 0 10px 26px -10px rgba(77,124,255,.5); }

/* hero kicker: quiet caption, no pill */
.shero-kicker { border: none; background: none; padding: 0; letter-spacing: .3em; }

/* mobile menu type */
.mobile-menu a { font-family: var(--body); font-weight: 600; text-transform: none; letter-spacing: -0.01em; font-size: clamp(26px, 7vw, 38px); }
.mobile-menu .mm-cta { font-family: var(--body); text-transform: none; letter-spacing: .01em; }

/* stats numerals stay display-condensed for contrast */
.stats .stat b { font-family: var(--display); font-weight: 700; }

/* scene tags: smaller, quieter */
.cap-tag, .section-eyebrow { font-size: 11px; letter-spacing: .3em; }

/* light sections: more air */
.services { padding-block: clamp(120px, 16vw, 200px); }
.cta { padding-block: clamp(120px, 15vw, 190px); }
.svc { border-radius: 20px; padding: 32px 28px; }
.svc-emoji { border-radius: 99px; font-size: 15px; letter-spacing: .08em; width: 46px; height: 46px; }

/* ========================================================
   v4.2 — LIGHT STORY STAGE + visual explanations
   ======================================================== */
.story-pin {
  background:
    radial-gradient(ellipse 70% 55% at 50% 40%, rgba(77,124,255,.06), transparent 70%),
    linear-gradient(180deg, #FAFBFD 0%, #F2F5FA 100%) !important;
}
.story-pin .cap h2 { color: #0B0E13; text-shadow: none; }
.story-pin .cap h2 em { color: #0B0E13; text-shadow: none; }
.story-pin .cap-desc { color: #5A6578; }
.story-pin .cap-tag { color: #3B63D8; }
.story-pin .ss-dot { background: rgba(11,14,19,.14); }
.story-pin .ss-dot.active { background: #3B63D8; box-shadow: 0 0 10px rgba(59,99,216,.5); }

/* vis positioning mirrors the caption system */
.vis { position: absolute; opacity: 0; visibility: hidden; z-index: 4; }
.vis-center { left: 50%; top: 56%; transform: translate(-50%, -50%); }
.vis-left { left: clamp(28px, 7vw, 130px); top: 50%; transform: translateY(-50%); }
.vis-right { right: clamp(28px, 7vw, 130px); top: 50%; transform: translateY(-50%); }

/* shared light panel */
.pcard {
  width: min(460px, 42vw);
  background: #FFFFFF; border: 1px solid #E4EAF3; border-radius: 22px;
  box-shadow: 0 30px 70px -30px rgba(23, 42, 84, .25);
  padding: 26px 28px;
}
.pcard-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid #EDF1F7; margin-bottom: 20px; }
.ph-title { font-size: 11px; letter-spacing: .22em; color: #8A96A8; }
.b-check { width: 26px; height: 26px; border-radius: 50%; background: #E9F8EF; color: #1F9D55; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }

/* 1 · lineup */
.lineup { display: flex; gap: 18px; }
.lu-card { width: clamp(64px, 7vw, 96px); aspect-ratio: 1; border-radius: 22px; background: #E7EBF2; position: relative; }
#luYou { background: #DDE3EE; }
#luYou i { position: absolute; inset: 0; margin: auto; width: 12px; height: 12px; border-radius: 50%; background: #B9C2D4; }

/* 2 · brand board */
.b-swatches { display: flex; gap: 10px; margin-bottom: 20px; }
.b-swatches i { flex: 1; height: 34px; border-radius: 9px; background: var(--c); transform-origin: left center; }
.b-type { display: flex; align-items: baseline; gap: 22px; margin-bottom: 22px; color: #0B0E13; }
.bt-1 { font-family: var(--body); font-weight: 700; font-size: 44px; letter-spacing: -0.02em; }
.bt-2 { font-family: var(--serif); font-style: italic; font-size: 38px; }
.bt-3 { font-size: 24px; color: #5A6578; }
.b-rows { display: flex; flex-direction: column; gap: 14px; }
.b-row { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 14px; }
.b-row label { font-size: 10px; letter-spacing: .18em; color: #8A96A8; }
.b-bar { height: 8px; border-radius: 99px; background: #EDF1F7; overflow: hidden; }
.b-bar i { display: block; height: 100%; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, #4D7CFF, #38B6D9); transform-origin: left center; }

/* 3 · website build */
.pcard.win { padding: 0; overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid #EDF1F7; }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #E0E6EF; }
.win-bar span { margin-left: 10px; font-size: 11px; letter-spacing: .14em; color: #8A96A8; }
.win-body { padding: 20px 22px 8px; }
.sk { background: #EDF1F7; border-radius: 8px; }
.sk-nav { height: 12px; width: 55%; margin-bottom: 14px; }
.sk-hero { height: 64px; margin-bottom: 14px; background: linear-gradient(135deg, #E8EEFF, #EDF6FB); }
.sk-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.sk-cols .sk { height: 44px; }
.sk-btn { height: 34px; width: 128px; border-radius: 99px; background: #0B0E13; margin-bottom: 6px; }
.score { display: flex; align-items: center; gap: 14px; padding: 16px 22px 20px; border-top: 1px solid #EDF1F7; position: relative; }
.score svg { width: 58px; height: 58px; transform: rotate(-90deg); }
.score-bg { fill: none; stroke: #EDF1F7; stroke-width: 7; }
.score-fg { fill: none; stroke: #1F9D55; stroke-width: 7; stroke-linecap: round; }
.score b { font-family: var(--body); font-weight: 700; font-size: 26px; color: #0B0E13; }
.score .mono { font-size: 10px; letter-spacing: .2em; color: #8A96A8; }

/* 4 · media lineup */
.media-row { display: flex; align-items: flex-end; gap: 18px; }
.dev { background: #FFFFFF; border: 1px solid #E4EAF3; border-radius: 18px; box-shadow: 0 24px 56px -28px rgba(23,42,84,.24); position: relative; display: flex; align-items: center; justify-content: center; }
.dev i { position: absolute; bottom: 12px; left: 0; right: 0; text-align: center; font-size: 9.5px; letter-spacing: .2em; color: #8A96A8; }
.dev-tall { width: clamp(90px, 9vw, 124px); aspect-ratio: 9/16; }
.dev-wide { width: clamp(150px, 15vw, 210px); aspect-ratio: 16/10; }
.dev-sq { width: clamp(100px, 10vw, 136px); aspect-ratio: 1; }
.play { width: 38px; height: 38px; border-radius: 50%; background: #0B0E13; position: relative; }
.play::after { content: ""; position: absolute; left: 55%; top: 50%; transform: translate(-50%, -50%); border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.wave-l { display: flex; gap: 5px; align-items: center; height: 34px; margin-top: 22px; justify-content: center; }
.wave-l i { width: 5px; height: 30%; border-radius: 99px; background: #4D7CFF; opacity: .75; transform-origin: center; }

/* 5 · campaigns */
.camp { display: grid; grid-template-columns: 76px 1fr 46px; align-items: center; gap: 14px; margin-bottom: 15px; }
.camp label { font-size: 10px; letter-spacing: .16em; color: #8A96A8; }
.camp b { font-family: var(--body); font-weight: 700; font-size: 15px; color: #0B0E13; text-align: right; }
.camp-bar { height: 9px; border-radius: 99px; background: #EDF1F7; overflow: hidden; }
.camp-bar i { display: block; height: 100%; width: var(--w); border-radius: 99px; background: linear-gradient(90deg, #4D7CFF, #38B6D9); transform-origin: left center; }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; letter-spacing: .2em; color: #1F9D55; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: #1F9D55; animation: blink 1.6s ease infinite; }
.dash-foot { display: flex; justify-content: space-between; border-top: 1px solid #EDF1F7; padding-top: 15px; margin-top: 6px; font-size: 10.5px; letter-spacing: .16em; color: #8A96A8; }
#reachNum { color: #3B63D8; font-weight: 700; }

/* 6 · finale */
.vis-finale { width: min(640px, calc(100% - 48px)); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 26px; }
.kpi { background: #FFFFFF; border: 1px solid #E4EAF3; border-radius: 18px; padding: 20px 18px; text-align: center; box-shadow: 0 20px 48px -26px rgba(23,42,84,.2); }
.kpi b { font-family: var(--body); font-weight: 700; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.02em; color: #0B0E13; display: block; }
.kpi span { font-size: 12.5px; color: #8A96A8; }
.growth { width: 100%; height: 72px; }
#gLine { fill: none; stroke: url(#__none), #3B63D8; stroke: #3B63D8; stroke-width: 3.5; stroke-linecap: round; }

/* mobile: visuals below centered captions, scaled */
@media (max-width: 960px) {
  .vis-left, .vis-right { left: 50%; right: auto; transform: translate(-50%, 0); top: auto; bottom: clamp(36px, 8vh, 80px); }
  .pcard { width: min(420px, calc(100vw - 48px)); padding: 20px; }
  .vis-center { top: 60%; }
  .media-row { gap: 10px; }
  .kpis { gap: 10px; }
  .kpi { padding: 14px 10px; }
}

/* ========================================================
   v4.3 — centralized stage frame, mobile pass, booking CTA
   ======================================================== */
/* pull caption + visual into a centered ~1200px frame */
.cap-left { left: auto; right: calc(50% + 32px); }
.cap-right { right: auto; left: calc(50% + 32px); }
.vis-left { left: auto; right: calc(50% + 32px); }
.vis-right { right: auto; left: calc(50% + 32px); }
.cap-side { width: min(430px, calc(50vw - 96px)); }
.pcard { width: min(460px, calc(50vw - 96px)); }

/* booking CTA row */
.cta-actions { display: flex; align-items: center; gap: 18px; margin-top: 30px; flex-wrap: wrap; }
.btn-book { background: #0B0E13; color: #FFFFFF; box-shadow: 0 14px 34px -14px rgba(11,14,19,.45); }
.btn-book:hover { transform: translateY(-1px); box-shadow: 0 18px 40px -14px rgba(59,99,216,.5); }
.cta-or { font-size: 10px; letter-spacing: .22em; color: #9AA6B8; }
.cta .cta-details { margin-top: 28px; }

/* mobile stage optimisation */
@media (max-width: 960px) {
  .vis-left, .vis-right { left: 50%; right: auto; transform: translate(-50%, 0); top: auto; bottom: clamp(24px, 5vh, 56px); }
  .cap-left, .cap-right { left: 50%; right: auto; transform: translate(-50%, 0); }
  .cap-side { top: clamp(60px, 8vh, 96px); width: min(560px, calc(100% - 44px)); }
  .pcard { width: min(440px, calc(100vw - 44px)); }
}
@media (max-width: 620px) {
  .lineup { gap: 12px; }
  .lu-card { width: clamp(48px, 13vw, 64px); border-radius: 14px; }
  .pcard { padding: 18px; border-radius: 18px; }
  .pcard-head { padding-bottom: 12px; margin-bottom: 14px; }
  .b-type { gap: 16px; margin-bottom: 16px; }
  .bt-1 { font-size: 34px; } .bt-2 { font-size: 30px; } .bt-3 { font-size: 20px; }
  .b-swatches { margin-bottom: 14px; }
  .b-swatches i { height: 26px; }
  .media-row { gap: 10px; }
  .dev-tall { width: clamp(72px, 20vw, 90px); }
  .dev-wide { width: clamp(120px, 34vw, 150px); }
  .dev-sq { width: clamp(80px, 23vw, 100px); }
  .play { width: 30px; height: 30px; }
  .play::after { border-left-width: 9px; border-top-width: 5px; border-bottom-width: 5px; }
  .wave-l { margin-top: 14px; height: 26px; }
  .kpis { gap: 8px; margin-bottom: 18px; }
  .kpi { padding: 14px 8px; border-radius: 14px; }
  .kpi b { font-size: 19px; }
  .kpi span { font-size: 10.5px; }
  .growth { height: 52px; }
  .camp { grid-template-columns: 62px 1fr 40px; gap: 10px; margin-bottom: 12px; }
  .camp b { font-size: 13px; }
  .cta-actions { gap: 12px; }
  .cta-actions .btn-book { width: 100%; justify-content: center; }
}


/* v4.5 — media row sized to its lane */
.media-row { max-width: calc(50vw - 96px); }
.dev-tall { width: clamp(76px, 8vw, 112px); }
.dev-wide { width: clamp(128px, 13.5vw, 190px); }
.dev-sq { width: clamp(86px, 9vw, 124px); }
@media (max-width: 960px) {
  .cap-left, .cap-right { left: 50%; right: auto; transform: translate(-50%, 0); }
  .vis-left, .vis-right { left: 50%; right: auto; transform: translate(-50%, 0); }
  .cap-side { width: min(560px, calc(100% - 44px)); }
  .pcard { width: min(440px, calc(100vw - 44px)); }
  .media-row { max-width: none; }
}