:root {
  --paper: #F8F4EE;
  --ink: #161616;
  --muted: #6F6A62;
  --line: #D9CBB8;
  --sand: #EADCC8;
  --taupe: #D9CBB8;
  --signal: #f58220;
  --navy: #1E2A6E;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); color: var(--ink); }
html[data-mode="dark"] {
  --paper: #12110F;
  --ink: #F8F4EE;
  --muted: #A8A298;
  --line: #3A332C;
  --sand: #2C2824;
  --taupe: #3A332C;
  --navy: #C9D2F5;
}
html { transition: background 280ms ease, color 280ms ease; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Schibsted Grotesk", "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; }
a { color: inherit; }
button, input, select, textarea { font-family: inherit; color: inherit; }
img { display: block; max-width: 100%; }
html[data-mode="light"] .for-dark, html[data-mode="dark"] .for-light { display: none; }
.wrap { width: min(1100px, calc(100% - 40px)); margin: 0 auto; }
.site-head { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.head-row { display: flex; align-items: center; gap: 18px; padding: 14px 0; flex-wrap: wrap; }
.site-head img { height: 26px; width: auto; }
.nav { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.nav a { text-decoration: none; }
.nav a[aria-current="page"] { color: var(--signal); font-weight: 600; }
.head-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.btn, .ghost {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 14px; font-size: 13px; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; background: transparent;
  position: relative; overflow: hidden;
}
.btn {
  background: linear-gradient(#d86e12, #d86e12) left center / 0 100% no-repeat, var(--signal);
  color: #141414; border-color: var(--signal); transition: background-size 220ms ease;
}
.btn:hover { background-size: 100% 100%, auto; }
a.btn, button.btn { color: #141414; }
.ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.hero { position: relative; overflow: hidden; padding: 64px 0 36px; }
.corner { position: absolute; top: 0; right: 0; width: 140px; height: 140px; pointer-events: none; }
.corner i { position: absolute; inset: 0; }
.corner i:nth-child(1) { background: var(--sand); clip-path: polygon(38% 0, 100% 0, 100% 100%); }
.corner i:nth-child(2) { background: var(--taupe); clip-path: polygon(68% 0, 100% 0, 100% 58%); }
.corner i:nth-child(3) { background: #f58220; clip-path: polygon(100% 0, 100% 26%, 74% 0); }
.hero-copy { position: relative; z-index: 1; padding-right: 88px; }
.kicker { margin: 0 0 10px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); font-weight: 600; }
h1 { margin: 0 0 16px; font-size: clamp(36px, 5vw, 58px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 500; max-width: 16ch; }
.lede { margin: 0 0 22px; max-width: 46ch; font-size: 18px; color: var(--muted); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.block { padding: 48px 0; border-top: 1px solid var(--line); }
h2 { margin: 0 0 8px; font-size: clamp(28px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.03em; font-weight: 500; max-width: 22ch; }
.note { margin: 0 0 22px; max-width: 62ch; color: var(--muted); }
.doors, .three, .models { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.doors article, .three article, .model, .agenda article { border-top: 1px solid var(--ink); padding-top: 12px; }
.doors em { font-style: normal; font-weight: 600; font-size: 12px; letter-spacing: 0.08em; color: var(--signal); }
.doors h3, .three h3, .model h3, .agenda h3 { margin: 6px 0; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.doors p, .three p, .model p, .agenda p { margin: 0; color: var(--muted); font-size: 15px; }
.starts { display: grid; grid-template-columns: 160px 1fr; gap: 10px 18px; }
.starts strong { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal); }
.sectors { margin: 0; font-size: 18px; letter-spacing: -0.02em; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.for, .not { padding: 18px; background: var(--sand); color: #161616; }
html[data-mode="dark"] .for { color: #F8F4EE; }
.not { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.for h3, .not h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.for li, .not li { margin: 0 0 6px; }
.practice { margin: 0 0 22px; }
.practice h3 { margin: 0 0 8px; font-size: 22px; font-weight: 500; }
.practice ul { margin: 0; padding: 0; list-style: none; }
.practice li { padding: 10px 0; border-top: 1px solid var(--line); }
.practice strong { display: block; }
.models { grid-template-columns: 1fr 1fr; }
.model .meta { display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); font-weight: 600; }
.clock { display: grid; grid-template-columns: 140px 1fr; gap: 12px 18px; }
.person { display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: start; }
.mark-tile { width: 88px; height: 88px; background: #fff; display: grid; place-items: center; }
.mark-tile img { height: 64px; }
.form, .diag { display: grid; gap: 10px; }
.form label, .diag label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.form input, .form select, .form textarea, .diag select {
  border: 1px solid var(--line); background: transparent; padding: 10px; font-size: 15px; font-weight: 400;
}
.form textarea { min-height: 110px; resize: vertical; }
.hp { position: absolute; left: -9999px; }
.company { font-size: 15px; }
.company p { margin: 0 0 8px; }
.legal h1 { max-width: 18ch; }
.legal p { max-width: 68ch; }
.sent { margin: 0 0 8px; padding: 10px 12px; background: var(--sand); color: #161616; }
html[data-mode="dark"] .sent { color: #F8F4EE; }
.sent.warn { background: transparent; border: 1px solid var(--signal); color: var(--ink); }
.foot { border-top: 1px solid var(--line); padding: 28px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; }
.foot img { height: 22px; margin-bottom: 10px; }
.foot p, .foot a { font-size: 14px; color: var(--muted); }
.foot a { display: block; text-decoration: none; margin: 0 0 4px; }
.foot strong { color: var(--ink); font-weight: 600; }
.diag fieldset { border: 0; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.diag legend { font-weight: 600; padding: 0; }
.scale { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; font-weight: 400; }
.scale input { flex: 1; accent-color: #f58220; }
.quad { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); margin: 8px 0 18px; }
.quad div { padding: 14px; min-height: 92px; }
.quad div:nth-child(odd) { border-right: 1px solid var(--line); }
.quad div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.quad strong { display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.quad .on { background: var(--sand); color: #161616; }
html[data-mode="dark"] .quad .on { color: #F8F4EE; }
.enquiries { width: 100%; border-collapse: collapse; font-size: 14px; }
.enquiries th, .enquiries td { border-top: 1px solid var(--line); text-align: left; vertical-align: top; padding: 8px; }

.poster { background: #F7F6F3; color: #161616; border: 1px solid var(--line); padding: 26px 22px 8px; }
html[data-mode="dark"] .poster { background: #12110F; color: #F8F4EE; border-color: #2A2622; }
.poster-lead { display: grid; grid-template-columns: 76px 1fr auto; column-gap: 18px; align-items: center; }
.poster-chevron { grid-row: 1 / span 4; width: 70px; height: 82px; background: #f58220; clip-path: polygon(0 0, 58% 0, 100% 50%, 58% 100%, 0 100%, 42% 50%); }
.poster-lead h2 { grid-column: 2; margin: 0; max-width: none; font-size: clamp(26px, 3vw, 34px); }
.poster-rule { grid-column: 2; display: block; width: 72px; height: 4px; background: #f58220; margin: 8px 0; }
.poster-lead p { grid-column: 2; margin: 0 0 8px; }
.poster-lead img { grid-column: 3; grid-row: 1; height: 28px; width: auto; justify-self: end; }
.poster-tools { grid-column: 3; grid-row: 3; justify-self: end; }
.spine { position: relative; min-height: 560px; }
.spine-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#spine-draw { stroke: #1E2A6E; }
html[data-mode="dark"] #spine-draw { stroke: #C9D2F5; }
#spine-stops { position: relative; z-index: 1; }
.station { position: relative; z-index: 1; display: grid; grid-template-columns: 96px 1fr; align-items: center; min-height: 76px; width: 100%; background: transparent; border: 0; padding: 0; color: inherit; font-family: inherit; text-align: left; cursor: pointer; }
.station:focus { outline: none; }
.station:focus-visible .bead { outline: 2px solid #161616; outline-offset: 3px; }
.station:nth-child(even) .bead { margin-left: 26px; }
.bead { width: 56px; height: 56px; border-radius: 50%; border: 3px solid #f58220; background: #fff; color: #161616; display: grid; place-items: center; font-size: 22px; font-weight: 650; }
.station[aria-selected="true"] .bead { color: #f58220; }
.station-copy { display: flex; gap: 8px; align-items: flex-start; }
.station-copy i { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid #f58220; margin-top: 7px; flex: none; }
.station-copy strong { display: block; font-size: 15px; font-weight: 650; }
.station-copy em { display: block; font-style: normal; font-size: 14px; font-weight: 400; color: #3a3a3a; }
html[data-mode="dark"] .station-copy em { color: #C8C2B8; }
.poster.playing .station { opacity: 0.28; }
.poster.playing .station.lit { opacity: 1; }
.phase { margin-top: 8px; padding-top: 16px; border-top: 1px solid #E4DDD4; }
.phase-time, .phase-label { margin: 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #f58220; font-weight: 600; }
.phase h3 { margin: 6px 0; font-size: 28px; font-weight: 500; }
.phase-out { margin-top: 12px; padding: 12px 14px; background: #EADCC8; color: #161616; }
html[data-mode="dark"] .phase-out { background: #2C2824; color: #F8F4EE; }

@media (min-width: 901px) {
  .spine { min-height: 0; }
  #spine-stops { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 270px; }
  .station { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 270px; height: 100%; gap: 8px; text-align: center; grid-template-columns: none; }
  .station:nth-child(even) { justify-content: flex-end; }
  .station:nth-child(even) .bead { margin-left: 0; }
  .station-copy { flex-direction: column; align-items: center; }
  .station-copy i { border: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid #f58220; margin: 0; }
  .station-copy strong, .station-copy em { font-size: 12px; }
}

.arrive-board .corner i { transform-origin: 100% 0; animation: wedge 480ms cubic-bezier(.2,.7,.2,1) both; }
.arrive-board .corner i:nth-child(2) { animation-delay: 110ms; }
.arrive-board .corner i:nth-child(1) { animation-delay: 200ms; }
.arrive-board .hero-copy > * { animation: fade 560ms ease both; }
.arrive-board .hero-copy .kicker { animation-delay: 320ms; }
.arrive-board .hero-copy h1 { animation-delay: 420ms; }
.arrive-board .hero-copy .lede { animation-delay: 520ms; }
.arrive-board .hero-copy .actions { animation-delay: 600ms; }
.arrive-rule .hero-copy h1 { position: relative; }
.arrive-rule .hero-copy h1::after {
  content: ""; display: block; width: 64px; height: 3px; background: #f58220; margin-top: 12px;
  transform-origin: left center; animation: draw 520ms cubic-bezier(.2,.7,.2,1) both; animation-delay: 200ms;
}
@keyframes wedge { from { opacity: 0; transform: scale(0.12); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
}

@media (max-width: 800px) {
  .doors, .three, .models, .split, .foot-grid { grid-template-columns: 1fr; }
  .clock, .starts, .person { grid-template-columns: 1fr; }
  .head-actions { margin-left: 0; }
  h1 { max-width: none; }
  .poster-lead { grid-template-columns: 56px 1fr; }
  .poster-lead img, .poster-tools { grid-column: 2; justify-self: start; }
  .poster-chevron { width: 48px; height: 56px; }
}