/* Night Shift: one story from closing time to opening time. A split-flap clock keeps the time; section colour is the sky. */
:root {
  --night-0: #0d0b27;
  --night-1: #15123a;
  --dusk-1: #1d1752;
  --dusk-2: #2a2170;
  --dusk-3: #3b2f86;
  --paper: #f5f3fc;
  --dawn: #fbe8db;
  --ink: #11132b;
  --ink-2: #3d4258;
  --ink-3: #5a6078;
  --lit: #f2f1ff;
  --lit-2: #c6c0f2;
  --lit-3: #a59fdc;
  --tile: #1a1740;
  --tile-2: #13112f;
  --a-call: #b4a3ff;
  --a-bridge: #fcc46b;
  --a-camp: #c52a79;
  --a-dash: #0a7894;
  --hdr-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
/* Phone also has the sticky module chips (52px) under the header. */
html { background: var(--night-0); scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 52px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--night-0); color: var(--ink); font: 400 16px/1.5 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
[hidden] { display: none !important; }
p, h1, h2, ol, ul, dl, dd { margin: 0; }
a { color: var(--primary); }
:focus-visible { outline: 3px solid #a99bff; outline-offset: 3px; border-radius: 6px; }
.on-light :focus-visible { outline-color: var(--primary); }
/* Headings use Archivo's wide cut, like workshop signage; body text stays at normal width. */
.disp { font-family: var(--font-display); font-stretch: 112%; letter-spacing: -0.02em; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: #fff; color: var(--ink); font-weight: 600; }
.skip:focus { top: 12px; }

.mod-calliope { --ic-color: var(--calliope); --ic-tint: var(--calliope-tint); }
.mod-campaigns { --ic-color: var(--campaigns); --ic-tint: var(--campaigns-tint); }
.mod-dash { --ic-color: var(--dash); --ic-tint: var(--dash-tint); }
.mod-bridge { --ic-color: var(--bridge); --ic-tint: var(--bridge-tint); }
.mod-portal { --ic-color: var(--portal); --ic-tint: var(--portal-tint); }

/* Split-flap clock. Size is set by font-size on the .flip; everything inside is in em. */
.flip { display: inline-flex; align-items: stretch; gap: 0.06em; perspective: 4em; font: 700 1em/1 var(--font-display); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.flip b {
  position: relative; display: grid; place-items: center; width: 0.74em; height: 1.1em; border-radius: 0.09em;
  color: #fff; font-weight: 700; background: linear-gradient(var(--tile) 0 50%, var(--tile-2) 50% 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0.05em 0.12em rgba(4, 2, 20, 0.45);
  transform-origin: 50% 50%;
}
.flip b::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: max(1px, 0.012em); background: rgba(0, 0, 0, 0.6); }
.flip i { display: grid; place-items: center; width: 0.28em; font-style: normal; color: currentColor; opacity: 0.9; }
.flip em { align-self: flex-end; margin-left: 0.22em; padding-bottom: 0.1em; font-style: normal; font-size: 0.3em; font-weight: 600; }
.flip b.flipping { animation: flap 0.32s ease-in-out; }
@keyframes flap { 50% { transform: rotateX(90deg); } }

/* Header */
/* Header and module bar take the tone of the section under them (js/main.js sets data-tone): dark glass over night, light glass over day. */
.hdr, .modnav {
  --tb: rgba(13, 11, 39, 0.74); --tl: rgba(255, 255, 255, 0.09); --tf: #fff; --tf-2: var(--lit-2); --tc: #fff; --tcf: var(--dusk-1);
  background-color: var(--tb); color: var(--tf); border-bottom: 1px solid var(--tl);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.3s ease;
}
.hdr[data-tone="light"], .modnav[data-tone="light"] { --tb: rgba(245, 243, 252, 0.82); --tl: rgba(17, 19, 43, 0.09); --tf: var(--ink); --tf-2: var(--ink-2); --tc: var(--dusk-1); --tcf: #fff; }
.hdr { position: sticky; top: 0; z-index: 20; }
/* Phone: scrolling down through the modules tucks the logo row away and leaves the chips. */
.is-condensed .hdr { transform: translateY(-100%); }
.hdr-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--hdr-h); }
.logo { position: relative; display: flex; align-items: center; min-height: 44px; }
.logo img { display: block; width: auto; height: 26px; transition: opacity 0.35s ease; }
.logo-n { position: absolute; left: 0; opacity: 0; }
[data-tone="light"] .logo-w { opacity: 0; }
[data-tone="light"] .logo-n { opacity: 1; }
.nav, .hdr-actions { display: none; }
.menu-btn { width: 44px; height: 44px; margin-right: -10px; display: grid; place-items: center; padding: 0; cursor: pointer; color: inherit; background: transparent; border: 0; border-radius: 12px; }
.menu-btn:hover { background: var(--tl); }
.menu-btn svg { width: 20px; height: 14px; }

.menu-sheet { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; background: var(--night-0); color: #fff; padding: env(safe-area-inset-top) 20px env(safe-area-inset-bottom); }
.menu-sheet__bar { display: flex; align-items: center; justify-content: space-between; height: var(--hdr-h); }
.menu-sheet__nav { display: flex; flex-direction: column; padding-top: 16px; }
.menu-sheet__nav a { display: flex; align-items: baseline; gap: 14px; min-height: 60px; padding-top: 16px; font: 600 24px/1.2 var(--font-display); letter-spacing: -0.02em; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.menu-sheet__nav a small { margin-left: auto; font: 500 13px/1 var(--font-body); color: var(--lit-3); letter-spacing: 0; }
.menu-sheet__foot { margin-top: auto; padding: 20px 0; }
.menu-sheet__foot .btn-night { width: 100%; }

.btn-night { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border-radius: 12px; background: #fff; color: var(--dusk-1); font: 600 15.5px/1 var(--font-body); text-decoration: none; box-shadow: 0 14px 30px -14px rgba(4, 2, 20, 0.9); }
.btn-night:hover { background: #e9e6ff; color: var(--dusk-1); }
.btn-night--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.hdr .btn-night { background: var(--tc); color: var(--tcf); box-shadow: none; transition: background 0.35s ease, color 0.35s ease; }

/* Hero: headline and buttons, then the story. The whole hero takes the story's sky: dusk, night, day, dawn, dusk. */
.hero {
  --sky: var(--dusk-2); --hf: #fff; --hf-2: var(--lit-2); --hf-3: #e4e0ff; --hl: rgba(255, 255, 255, 0.16); --hb: #fff; --hbf: var(--dusk-1);
  position: relative; isolation: isolate; color: var(--hf); padding: 22px 0 104px; background-color: var(--sky); overflow: hidden;
  transition: background-color 0.8s ease, color 0.8s ease;
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 70% at 70% 45%, rgba(255, 255, 255, 0.07), transparent 70%); }
/* Phone shows the hero's bottom edge, so it fades into the first chapter's colour whatever the sky is. */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; z-index: -1; background: linear-gradient(180deg, transparent, var(--dusk-1)); }
.hero:has([data-beat="2"]), .hero:has([data-beat="3"]) { --sky: #100e2c; }
.hero:has([data-beat="4"]) { --sky: #efeafc; --hf: var(--ink); --hf-2: #5b3fe0; --hf-3: var(--ink-2); --hl: rgba(17, 19, 43, 0.14); --hb: var(--dusk-1); --hbf: #fff; }
.hero:has([data-beat="5"]) { --sky: #fde9da; --hf: var(--ink); --hf-2: #8a4b2c; --hf-3: #5a3b2c; --hl: rgba(17, 19, 43, 0.14); --hb: var(--dusk-1); --hbf: #fff; }
.hero:has([data-beat="end"]) { --sky: var(--dusk-1); }
.hero-grid { display: flex; flex-direction: column; }
.hero-copy { display: contents; }
.hero h1 { order: 1; font-size: clamp(28px, 8vw, 32px); line-height: 1.05; font-weight: 700; text-wrap: balance; }
.hero h1 span { color: var(--hf-2); transition: color 0.8s ease; }
/* Phone: headline, short lede, one row of buttons and the whole story fit the first screen. */
.trailer { order: 5; margin: 18px 0 0; }
.lede { order: 2; margin-top: 14px; font-size: 16.5px; line-height: 1.55; color: var(--hf-3); max-width: 32em; transition: color 0.8s ease; }
.ctas { order: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.ctas a { padding: 0 16px; }
.lede-more, .works { display: none; }
.works { order: 4; margin-top: 20px; font-size: 13.5px; line-height: 1.5; color: var(--hf-2); transition: color 0.8s ease; }
.hero .btn-night { background: var(--hb); color: var(--hbf); transition: background 0.8s ease, color 0.8s ease; }
.btn-line { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 20px; border-radius: 12px; border: 1.5px solid currentColor; color: var(--hf); font: 600 15.5px/1 var(--font-body); text-decoration: none; transition: color 0.8s ease; }
.btn-line:hover { color: var(--hf); background: var(--hl); }
.hero :focus-visible { outline-color: var(--hf-2); }

.trailer { color: var(--hf); }
.tr-top { display: flex; align-items: flex-end; gap: 10px; }
.flip--md { font-size: 30px; }
.flip--md i { color: var(--hf); }
.flip--md em { color: var(--hf-2); }
.tr-day { font: 600 15px/1 var(--font-display); color: var(--hf-2); padding-bottom: 5px; }
.tr-art { position: relative; margin: 4px -20px 0; aspect-ratio: 2 / 1; }
.tr-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tr-cap { min-height: 2.7em; margin-top: 4px; font: 600 17px/1.35 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
.tr-ctrl { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.tr-toggle { width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--hl); color: var(--hf); }
.tr-toggle svg { width: 16px; height: 16px; fill: currentColor; }
.tr-toggle .i-again { width: 20px; height: 20px; fill: none; }
.tr-toggle .i-play, .tr-toggle .i-again, .is-paused .tr-toggle .i-pause, .is-ended .tr-toggle .i-pause { display: none; }
.is-paused .tr-toggle .i-play, .is-ended .tr-toggle .i-again { display: block; }
.tr-segs { flex: 1; min-width: 0; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tr-segs button { display: flex; flex-direction: column-reverse; gap: 6px; width: 100%; min-height: 44px; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; color: var(--hf-3); font: 600 12px/1 var(--font-display); text-align: left; }
.tr-segs button[aria-current] { color: var(--hf); }
.tr-segs i { display: block; height: 4px; border-radius: 4px; background: var(--hl); overflow: hidden; }
.tr-segs b { display: block; height: 100%; width: 0; border-radius: 4px; background: currentColor; }
.tr-segs .is-done b { width: 100%; }
.tr-segs .is-now b { animation: seg var(--beat-ms, 3s) linear both; }
@keyframes seg { from { width: 0; } to { width: 100%; } }
.trailer.is-paused * { animation-play-state: paused !important; }

/* SVG scenes. Every element's resting style is its final frame, so reduced motion and paused jumps show the outcome. */
.svg-big { font: 700 60px/1 var(--font-display); letter-spacing: -0.02em; }
.svg-md { font: 700 30px/1 var(--font-display); }
.svg-sm { font: 600 22px/1 var(--font-display); }
.s { opacity: 0; transition: opacity 0.18s ease; }
.s * { transform-box: fill-box; transform-origin: center; }
[data-beat="1"] .s1, [data-beat="2"] .s2, [data-beat="3"] .s3, [data-beat="4"] .s4, [data-beat="5"] .s5, [data-beat="end"] .s6 { opacity: 1; transition: opacity 0.3s ease 0.18s; }

.svg-xs { font: 600 19px/1 var(--font-display); }
.s1 .open-arc { stroke: #6e63c4; }
.s1 .st-open { opacity: 0; }
.s1 .hand { transform-box: view-box; transform-origin: 320px 174px; transform: rotate(262.5deg); }
[data-beat="1"] .s1 .hand { animation: sweep 1.5s cubic-bezier(0.5, 0, 0.2, 1) 0.2s both; }
[data-beat="1"] .s1 .open-arc { animation: arc-lit 0.5s ease 1.7s both; }
[data-beat="1"] .s1 .st-open { animation: arc-lit-text 0.3s ease 1.7s both; }
[data-beat="1"] .s1 .st-closed { animation: appear 0.3s ease 1.9s both; }
@keyframes sweep { from { transform: rotate(205deg); } }
@keyframes arc-lit { from { stroke: #d4caff; } }
@keyframes arc-lit-text { from { opacity: 1; } to { opacity: 0; } }

.s2 .arc { opacity: 0; }
.s2 .orb-glow { opacity: 0.18; }
[data-beat="2"] .s2 .phone { animation: shake 0.1s linear 0s 10 alternate; }
[data-beat="2"] .s2 .arc { animation: arc 0.7s ease-out 0s 2; }
[data-beat="2"] .s2 .arc2 { animation-delay: 0.15s; }
[data-beat="2"] .s2 .link { animation: appear 0.3s ease 1.1s both, dash 0.8s linear 1.1s infinite; }
[data-beat="2"] .s2 .orb-glow { animation: glow 1.2s ease-in-out 1.1s infinite alternate; }
[data-beat="2"] .s2 .talk rect { animation: talk 0.45s ease-in-out 1.2s infinite alternate; }
[data-beat="2"] .s2 .talk rect:nth-child(2n) { animation-delay: 1.4s; }
[data-beat="2"] .s2 .bub-l { animation: pop 0.35s ease 1.5s both; }
[data-beat="2"] .s2 .bub-r { animation: pop 0.35s ease 2.3s both; }
[data-beat="2"] .s2 .booked { animation: pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) 3.1s both; }
@keyframes shake { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes arc { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
@keyframes appear { from { opacity: 0; } }
@keyframes dash { to { stroke-dashoffset: -36; } }
@keyframes glow { to { opacity: 0.32; transform: scale(1.08); } }
@keyframes talk { to { transform: scaleY(0.4); } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.85); } }

.s3 .target { fill: #f5b94a; }
.s3 .card { opacity: 0; transform: translate(370px, 3px) scale(0.24); }
[data-beat="3"] .s3 .card { animation: fly 1.1s cubic-bezier(0.6, 0, 0.2, 1) 0.3s both; }
[data-beat="3"] .s3 .target { animation: fill-slot 0.3s ease 1.35s both; }
[data-beat="3"] .s3 .tick { animation: appear 0.3s ease 1.6s both; }
@keyframes fly { 0% { opacity: 1; transform: none; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(370px, 3px) scale(0.24); } }
@keyframes fill-slot { from { fill: #e9e5f7; } }

.s4 .typing { opacity: 0; }
.s4 .bell { transform-origin: 50% 0; }
[data-beat="4"] .s4 .bell { animation: bell 0.18s ease-in-out 0.1s 6 alternate; }
[data-beat="4"] .s4 .wire { animation: appear 0.3s ease 0.6s both, dash 0.8s linear 0.6s 3; }
[data-beat="4"] .s4 .typing { animation: blip 0.9s ease 0.8s both; }
[data-beat="4"] .s4 .sms1 { animation: pop 0.35s ease 1.7s both; }
[data-beat="4"] .s4 .sms2 { animation: pop 0.35s ease 2.5s both; }
[data-beat="4"] .s4 .ok { animation: pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) 3s both; }
@keyframes bell { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@keyframes blip { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; } }

[data-beat="5"] .s5 .scr { animation: tv-on 0.8s ease 0.4s both; }

[data-beat="5"] .s5 .hl { animation: hl 0.6s ease 2s 2 alternate; }
[data-beat="5"] .s5 .steam { animation: steam 1.6s ease-in-out infinite; }
[data-beat="5"] .s5 .st2 { animation-delay: 0.5s; }
@keyframes tv-on { 0% { opacity: 0; transform: scaleY(0.03); } 40% { opacity: 1; transform: scaleY(1); filter: brightness(2); } 100% { filter: none; } }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes hl { to { opacity: 0.4; } }
@keyframes steam { 0% { opacity: 0; transform: translateY(6px); } 50% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-10px); } }

[data-beat="end"] .s6 .node { animation: pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
[data-beat="end"] .s6 .n2 { animation-delay: 0.2s; }
[data-beat="end"] .s6 .n3 { animation-delay: 0.4s; }
[data-beat="end"] .s6 .n4 { animation-delay: 0.6s; }

/* Phone module chips, pinned under the header and sharing its tone. Desktop uses the header nav instead. */
.modnav { position: fixed; top: var(--hdr-h); left: 0; right: 0; z-index: 15; transform: translateY(-100%); visibility: hidden; }
.modnav { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, transform 0.3s ease, visibility 0s linear 0.3s; }
.modnav.is-on { transform: none; visibility: visible; transition-delay: 0s; }
.is-condensed .modnav.is-on { transform: translateY(calc(-1 * var(--hdr-h))); }
.modnav-in {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 9px 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 28px), transparent);
}
.modnav-in::-webkit-scrollbar { display: none; }
.modnav a { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--tl); color: var(--tf-2); font: 600 13px/1 var(--font-body); text-decoration: none; transition: background 0.25s ease, color 0.25s ease, border-color 0.35s ease; }
.modnav a i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.modnav a[aria-current] { background: var(--tc); border-color: var(--tc); color: var(--tcf); }

/* Module sections: what each module is and does. Each keeps a chip back to its moment in the story. */
.md { --mf: var(--lit); --mf-2: var(--lit-2); --ml: rgba(255, 255, 255, 0.14); --ml-2: rgba(255, 255, 255, 0.32); color: var(--mf); padding: 56px 0 64px; }
.md-head { max-width: 780px; }
.cb { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 5px 14px 5px 5px; border-radius: 999px; border: 1px solid var(--ml); color: var(--mf-2); font-size: 13px; text-decoration: none; }
.cb:hover { color: var(--mf); border-color: var(--ml-2); }
.cb span { white-space: nowrap; padding: 6px 10px; border-radius: 999px; background: var(--ma); color: #fff; font: 700 12.5px/1 var(--font-display); }
.mod { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--ma-text); }
.mod i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--ma); }
.mod i svg { width: 15px; height: 15px; }
.md h2 { font-size: 31px; line-height: 1.06; font-weight: 700; text-wrap: balance; }
.md-lede { margin-top: 14px; font-size: 16.5px; line-height: 1.6; color: var(--mf-2); max-width: 36em; }
.md-vis { margin-top: 32px; min-width: 0; }
.md-vis--two { display: grid; gap: 16px; align-items: start; }
.feats { list-style: none; padding: 0; margin-top: 40px; display: grid; gap: 22px; }
.feats li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; }
.feats svg { grid-row: 1 / 3; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--ma-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feats b { font-size: 16px; font-weight: 600; }
.feats span { font-size: 14.5px; line-height: 1.5; color: var(--mf-2); }
.ask { margin-top: 34px; }
.md-more { margin-top: 18px; max-width: 46em; }
.md-more summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; color: var(--ma-text); }
.md-more summary::-webkit-details-marker { display: none; }
.md-more summary::before { content: "+"; font-size: 18px; line-height: 1; }
.md-more[open] summary::before { content: "\2212"; }
.qa { display: grid; gap: 16px; margin: 8px 0 0; padding-left: 18px; border-left: 2px solid var(--ml); }
.qa dt { font-weight: 600; }
.qa dd { margin: 2px 0 0; font-size: 15px; line-height: 1.55; color: var(--mf-2); }
.btn-ask { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 12px; border: 1.5px solid var(--ml-2); color: var(--mf); font-weight: 600; font-size: 15px; text-decoration: none; }
.btn-ask:hover { color: var(--mf); background: var(--ml); }

.md--call { --ma: var(--calliope-text); --ma-text: var(--a-call); background: linear-gradient(180deg, var(--dusk-1) 0, var(--night-1) 420px); }
.md--bridge { --ma: #b35309; --ma-text: var(--a-bridge); background: linear-gradient(180deg, var(--night-1) 0, var(--night-0) 100%); }
.md--camp, .md--dash { --mf: var(--ink); --mf-2: var(--ink-2); --ml: rgba(17, 19, 43, 0.12); --ml-2: rgba(17, 19, 43, 0.28); }
.md--camp { --ma: var(--a-camp); --ma-text: var(--a-camp); background: var(--paper); padding-top: 40px; }
.md--dash { --ma: var(--a-dash); --ma-text: var(--a-dash); background: linear-gradient(180deg, var(--paper) 0, var(--dawn) 45%, #fff3e9 100%); }
.md--portal { --ma: #5b4ce8; --ma-text: #b8b0ff; background: var(--dusk-1); padding-top: 32px; }
.md--camp :focus-visible, .md--dash :focus-visible, .portal :focus-visible { outline-color: var(--primary); }

/* Calliope: Flow Studio and the sample call */
.flowmap { margin: 0; padding: 18px; border-radius: 24px; background: #0a0920; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.flowmap figcaption { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--lit-3); }
.flowmap figcaption b { font-size: 15px; font-weight: 600; color: #fff; }
.flowmap figcaption em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: #86efac; }
.fm { list-style: none; padding: 0; margin-top: 16px; }
.fm > li { position: relative; }
.fm > li + li { margin-top: 22px; }
.fm > li + li::before { content: ""; position: absolute; left: 24px; top: -22px; width: 2px; height: 22px; background: var(--calliope); }
.fm-n { padding: 11px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1.5px solid rgba(255, 255, 255, 0.12); font-size: 15px; font-weight: 600; color: #fff; }
.fm-n small { display: block; font-size: 11.5px; font-weight: 500; color: var(--lit-3); }
.fm-n span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--lit-2); }
.fm-done { border-color: rgba(74, 222, 128, 0.6); }
.fm-now { border-color: var(--calliope); box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.25); }
.fm-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fm-add { margin-top: 14px; padding: 10px; border: 1.5px dashed rgba(255, 255, 255, 0.2); border-radius: 14px; text-align: center; font-size: 13.5px; color: var(--lit-3); }

/* Campaign Builder: one running campaign */

.rules { display: flex; flex-wrap: wrap; gap: 6px; }
.rules span { padding: 6px 10px; border-radius: 10px; background: #fdf2f8; border: 1px solid #fbcfe8; font-size: 13px; color: var(--ink-2); }

.ready { margin-top: 26px; font-size: 14.5px; color: var(--ink-2); }
.ready span { font-weight: 600; color: var(--ink); }

/* LMG Portal: what's inside, and who sees what */
.inside { list-style: none; padding: 0; display: grid; gap: 10px; }
.inside a { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--lit); text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease; }
.inside a:hover { background: rgba(255, 255, 255, 0.09); border-color: var(--c); color: var(--lit); }
.inside i { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--c); }
.inside i svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.inside b { font: 700 17px/1.2 var(--font-display); letter-spacing: -0.01em; }
.inside span { font-size: 14px; color: var(--lit-2); }
.inside-more { padding: 12px; border: 1.5px dashed rgba(255, 255, 255, 0.2); border-radius: 16px; text-align: center; font-size: 13.5px; color: var(--lit-3); }

@media (max-width: 899px) { .roles :is(th, td):nth-child(3) { display: none; } }
.more { margin-top: 12px; padding: 10px; border: 1.5px dashed #d9d4f0; border-radius: 12px; text-align: center; font-size: 13.5px; color: var(--ink-3); }

.proof { background: var(--surface); border-block: 1px solid #e9e6f5; padding: 56px 0 64px; color: var(--ink); }
.proof h2 { font-size: 31px; line-height: 1.06; font-weight: 700; text-wrap: balance; }
.proof-lede { margin-top: 12px; color: var(--ink-2); line-height: 1.6; max-width: 34em; }
.proof-grid { display: grid; gap: 32px; }
.names { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 24px; }
.names img { width: auto; filter: grayscale(1) contrast(1.15); opacity: 0.75; }
.names img[alt="Megabus"] { height: 26px; }
.names img[alt^="ASA"] { height: 34px; }
.rules--exit span { background: var(--ok-tint); border-color: #bbf7d0; }
.trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; color: var(--ink); font-size: 16px; line-height: 1.5; }
.trust li { padding: 16px 0; border-top: 1px solid #e3dff2; }
.trust li:last-child { border-bottom: 1px solid #e3dff2; }

/* How it works: a real sequence, so the steps are numbered. */
.how { background: var(--bg); color: var(--ink); padding: 56px 0 64px; }
.how h2 { font-size: 31px; line-height: 1.06; font-weight: 700; text-wrap: balance; }
.how-steps { list-style: none; padding: 0; margin-top: 28px; display: grid; gap: 22px; counter-reset: step; }
.how-steps li { counter-increment: step; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
.how-steps li::before { content: counter(step); grid-row: 1 / 3; font: 700 34px/1 var(--font-display); font-stretch: 112%; color: var(--dusk-2); }
.how-steps b { font-size: 18px; font-weight: 700; }
.how-steps span { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.how-price { margin-top: 28px; font-size: 16px; line-height: 1.55; color: var(--ink-2); max-width: 46em; }
.btn-how { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border-radius: 12px; background: var(--dusk-1); color: #fff; font: 600 15.5px/1 var(--font-body); text-decoration: none; }
.btn-how:hover { background: var(--dusk-2); color: #fff; }
.how :focus-visible { outline-color: var(--primary); }
.faq-more { font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* FAQ: common questions. Module questions sit in each module. All answers are in the FAQPage JSON-LD in the head. */
.faq { background: var(--surface); border-top: 1px solid #e9e6f5; color: var(--ink); padding: 56px 0 96px; }
.faq h2 { font-size: 31px; line-height: 1.06; font-weight: 700; }
.faq-lede { margin-top: 12px; color: var(--ink-2); line-height: 1.6; }
.faq-groups { display: grid; gap: 24px; margin-top: 24px; }
.faq-group h3 { margin: 0 0 6px; font: 700 13px/1.2 var(--font-body); color: var(--ink-3); }
.faq details { border-bottom: 1px solid #e3dff2; }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 14px 0; cursor: pointer; list-style: none; font-size: 16.5px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-4); color: var(--primary); font-size: 18px; transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 40px 18px 0; color: var(--ink-2); line-height: 1.6; max-width: 46em; }
.faq :focus-visible { outline-color: var(--primary); }

/* Back to closing time: the form is where tonight starts. */
.eq-note-field summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--primary); }
.eq-note-field summary::-webkit-details-marker { display: none; }
.eq-note-field summary::before { content: "+"; font-size: 18px; line-height: 1; }
.eq-note-field[open] summary::before { content: "\2212"; }
.eq-note-field[open] .eq-field { margin-top: 4px; }

/* Phone: step 2 fits one screen. Modules become a two-column grid and the spacing tightens. */
@media (max-width: 899px) {
  .end .eq-form, .end .eq-pane { gap: 12px; }
  .end .eq-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .end .eq-mods legend { margin-bottom: 6px; }
  .end .eq-mod { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; min-height: 48px; padding: 8px 10px; }
  .end .eq-mod .ic { --ic-size: 28px; border-radius: 8px; }
  .end .eq-mod .ic svg { width: 15px; height: 15px; }
  .end .eq-mod__n { font-size: 13.5px; line-height: 1.2; }
  .end .eq-tick { display: none; }
  .end .eq-check { min-height: 40px; }
}
#enquire.end { padding: 120px 0 0; color: #fff; background: linear-gradient(180deg, var(--surface) 0, #a79ef0 120px, var(--dusk-3) 300px, var(--dusk-1) 75%, var(--night-0) 100%); }
.end-grid { display: grid; gap: 30px; padding-top: 72px; }
.end .flip { color: #fff; }
.ch-time { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px 14px; }
.flip--lg { font-size: 52px; }
.ch-day { font: 600 15px/1.2 var(--font-display); letter-spacing: -0.01em; padding-bottom: 4px; }
.end .flip em, .end .ch-day { color: var(--lit-2); }
.end .ch-time { margin-bottom: 16px; }
/* The module chip bar is hidden by the form, so cancel its share of scroll-padding (52px) and sit 16px under the header. */
.end h2, .end .eq-card { scroll-margin-top: -36px; }
/* The form block lands with its content (not its top padding) 16px under the header, whatever is below it on the page. */
.end .end-grid { scroll-margin-top: -108px; }
.end h2 { font-size: 34px; line-height: 1.05; font-weight: 700; text-wrap: balance; }
.end-copy > p:last-child { margin-top: 14px; color: #e4e0ff; line-height: 1.6; max-width: 30em; }
.end .eq-card { background: #fff; color: var(--ink); border-radius: 24px; padding: 22px 18px; border: 0; box-shadow: 0 40px 80px -40px rgba(4, 2, 20, 0.8); }
.end .eq-card :focus-visible { outline-color: var(--primary); }
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 88px; padding-top: 20px; padding-bottom: 28px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 13px; color: var(--lit-2); }
.foot nav { display: flex; gap: 18px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--lit-2); }

.sticky-cta { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 20; min-height: 46px; padding: 0 18px; border-radius: 999px; font-size: 14px; white-space: nowrap; background: var(--dusk-1); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 12px 28px -8px rgba(13, 11, 39, 0.7); }
.sticky-cta:hover { background: var(--dusk-2); color: #fff; }

@media (min-width: 900px) {
  :root { --hdr-h: 68px; }
  html { scroll-padding-top: var(--hdr-h); }
  .end h2, .end .eq-card { scroll-margin-top: 16px; }
  .end .end-grid { scroll-margin-top: -104px; }
  .wrap { padding: 0 48px; }
  .hdr-in { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; }
  .nav { display: flex; justify-content: center; gap: 28px; font-size: 14.5px; }
  .nav a { padding: 6px 0; border-bottom: 2px solid transparent; color: var(--tf-2); text-decoration: none; transition: color 0.35s ease; }
  .nav a:hover { color: var(--tf); }
  .nav a[aria-current] { color: var(--tf); border-bottom-color: var(--tf); }
  .modnav { display: none; }
  .hdr-actions { display: flex; align-items: center; gap: 18px; font-size: 14.5px; }
  .menu-btn { display: none; }

  .hero { padding: 0; min-height: calc(100svh - var(--hdr-h)); display: grid; align-items: center; }
  .hero::after { height: 120px; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: 56px; align-items: center; padding-top: 40px; padding-bottom: 56px; }
  .hero-copy { display: block; }
  .hero h1 { font-size: 48px; }
  .lede { font-size: 19px; margin-top: 22px; }
  .ctas { margin-top: 34px; gap: 12px 20px; }
  .ctas a { padding: 0 22px; }
  .lede-more { display: inline; }
  .works { display: block; font-size: 14.5px; }
  .trailer { margin: 0; }
  .flip--md { font-size: 52px; }
  .tr-day { font-size: 19px; padding-bottom: 8px; }
  .tr-art { margin: 16px 0 0; aspect-ratio: 16 / 9; }
  .tr-cap { font-size: 26px; min-height: 2.8em; margin-top: 10px; }
  .tr-segs button { font-size: 13.5px; }

  .md { padding: 104px 0; }
  .md-head .cb { margin-bottom: 28px; }
  .md h2 { font-size: 50px; }
  .md-lede { font-size: 19px; margin-top: 20px; }
  .md-vis { margin-top: 44px; }
  .md-vis--two { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; }
  .flowmap, .subs, .bridge, .camp, .portal { padding: 26px; }

  .feats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 44px; }
  .ask { margin-top: 36px; }
  .md--camp { padding-top: 60px; }

  .proof { padding: 112px 0 112px; }
  .how { padding: 112px 0 112px; }
  .how h2 { font-size: 46px; }
  .how-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 44px; }
  .how-steps li { grid-template-columns: 1fr; row-gap: 6px; align-content: start; }
  .how-steps li::before { grid-row: auto; margin-bottom: 14px; font-size: 48px; }
  .how-steps li { padding-top: 20px; border-top: 2px solid var(--ink); }
  .faq { padding: 112px 0 136px; }
  .faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 88px; align-items: start; }
  .faq-head { position: sticky; top: calc(var(--hdr-h) + 40px); }
  .faq h2 { font-size: 46px; }
  .faq-groups { margin-top: 0; gap: 40px; }
  .faq summary { font-size: 17.5px; }
  .proof h2 { font-size: 46px; }
  .flip--lg { font-size: 92px; }
  .ch-day { font-size: 18px; padding-bottom: 8px; }
  .proof-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 88px; align-items: start; }
  .trust li { padding: 20px 0; }

  #enquire.end { padding-top: 200px; }
  .end-grid { grid-template-columns: minmax(0, 1fr) 460px; align-items: center; column-gap: 88px; padding-top: 120px; }
  .end h2 { font-size: 62px; }
  .end-copy > p:last-child { font-size: 18px; margin-top: 20px; }
  .end .eq-card { padding: 30px; }
  .foot { margin-top: 140px; }
  .sticky-cta, .menu-sheet { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Team: what each role gets back. */
.sec-head { max-width: 46rem; }
.sec-head h2 { font-size: 31px; line-height: 1.06; font-weight: 700; text-wrap: balance; }
.sec-lede { margin-top: 12px; color: var(--ink-2); line-height: 1.6; }

.team { background: var(--bg); color: var(--ink); padding: 56px 0 64px; }
.team-list { margin: 28px 0 0; }
.team-list div { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid #ddd8ef; }
.team-list div:last-child { border-bottom: 1px solid #ddd8ef; }
.team-list dt { font: 700 18px/1.3 var(--font-display); font-stretch: 112%; letter-spacing: -0.01em; }
.team-list dd { margin: 0; color: var(--ink-2); line-height: 1.6; max-width: 40em; }

@media (min-width: 900px) {
  .team { padding: 112px 0; }
  .sec-head h2 { font-size: 46px; }
  .sec-lede { font-size: 17px; }
  .team-list { margin-top: 44px; }
  .team-list div { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 88px; padding: 26px 0; }
  .team-list dt { font-size: 21px; }
  .team-list dd { font-size: 17px; }
  .how-foot { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 44px; }
  .how-foot .how-price { margin-top: 0; flex: 1; max-width: none; }
  .how-foot .ask { margin-top: 0; flex: none; }
}