/* Kef Motors public site. Design tokens and scales live in :root; every spacing, radius and font size uses them. */
/* Fonts: Barlow and Barlow Condensed, self-hosted under the SIL Open Font License (see /fonts/OFL.txt). */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/barlow-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/barlow-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/barlow-500-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/barlow-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-condensed-600-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-condensed-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-condensed-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-condensed-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
    
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
    --r-s: 8px; --r-c: 16px; --r-pill: 999px;
    --t-1: 14px; --t-2: 16px; --t-3: 18px; --t-4: 22px; --t-5: 28px; --t-6: 36px; --t-7: 48px; --t-8: 64px;
    --art-h: 190px;
    --ink: #102A43; --ink-2: #1D4063; --ink-3: #334E68; --night: #0B2239;
    --paper: #F4F6F7; --card: #FFFFFF; --steel: #52667A; --mist: #E9EEF2; --line: #D9E0E6;
    --orange: #C2410C; --orange-hover: #A8380A; --orange-ink: #9A3412; --orange-soft: #FBE6DA;
    --green: #2F7D4A; --green-ink: #25633A; --green-soft: #E2F0E7;
    --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
    --body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
@media (max-width: 960px) {
:root { --art-h: 150px; }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--t-2); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--s-5); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--steel); }
.small { font-size: var(--t-1); }
.mt-12 { margin-top: var(--s-3); }
.mt-20 { margin-top: var(--s-5); }
.mt-32 { margin-top: var(--s-6); }
.ico { width: 24px; height: 24px; flex: none; }
.ico-sm { width: 18px; height: 18px; flex: none; }
.logo { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--ink); text-decoration: none; }
.logo svg { width: 34px; height: 14px; }
.logo-name { font-family: var(--display); font-weight: 700; font-size: var(--t-4); line-height: 1; white-space: nowrap; }
.logo-light { color: #fff; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-3) var(--s-5); border: 1.5px solid transparent; border-radius: var(--r-s); font-weight: 600; font-size: var(--t-2); line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s; }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-hover); }
.btn-ghost { border-color: var(--line); background: #fff; color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light { border-color: rgba(255,255,255,.55); background: transparent; color: #fff; }
.btn-light:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-sm { padding: var(--s-2) var(--s-3); border-radius: var(--r-s); font-size: var(--t-1); }
.btn-block { width: 100%; }
.link { display: inline; padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link:hover { color: var(--orange-ink); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
@media (max-width: 480px) {
.btn { white-space: normal; }
}
.site-head { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); }
.site-head .wrap { display: flex; align-items: center; gap: var(--s-5); height: 68px; position: relative; }
.nav { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.nav a { padding: var(--s-2) var(--s-3); border-radius: var(--r-s); color: var(--ink-3); font-weight: 500; text-decoration: none; }
.nav a:hover { background: var(--mist); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--mist); color: var(--ink); font-weight: 600; }
.nav a.nav-cta { display: none; justify-content: center; background: var(--orange); color: #fff; font-weight: 600; }
.menu-btn { display: none; }
@media (max-width: 960px) {
.site-head .wrap { height: 62px; }
.menu-btn { display: inline-flex; margin-left: auto; }
.head-cta { display: none; }
.nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; padding: var(--s-2) var(--s-5) var(--s-4); border-bottom: 1px solid var(--line); background: #fff; box-shadow: 0 16px 24px -18px rgba(16,42,67,.35); }
.nav.open { display: flex; }
.nav a { padding: var(--s-3); }
.nav a.nav-cta { display: flex; margin-top: var(--s-2); }
}
.hero { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: var(--s-8); align-items: center; padding-top: var(--s-8); padding-bottom: var(--art-h); }
.hero h1 { margin-bottom: var(--s-5); font-family: var(--display); font-weight: 700; font-size: clamp(var(--t-6), 5.4vw, var(--t-8)); line-height: 1.02; }
.hero .lead { max-width: 32em; margin-bottom: var(--s-6); color: #C9D6E2; font-size: var(--t-3); }
.hero-art { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; width: 100%; height: var(--art-h); }
@media (max-width: 960px) {
.hero-grid { grid-template-columns: 1fr; gap: var(--s-6); padding-top: var(--s-7); padding-bottom: var(--art-h); }
}
.track-card { padding: var(--s-5); border-radius: var(--r-c); background: #fff; color: var(--ink); box-shadow: 0 28px 56px -28px rgba(3,15,28,.6); }
.track-card h2 { font-family: var(--display); font-weight: 700; font-size: var(--t-5); line-height: 1.05; }
.track-card > p { margin-top: var(--s-1); color: var(--steel); }
.section .track-card { border: 1px solid var(--line); box-shadow: none; }
.plate { position: relative; padding: var(--s-3) var(--s-6); border: 3px solid var(--ink); border-radius: var(--r-s); background: #FCFCF8; box-shadow: inset 0 0 0 3px #FCFCF8, inset 0 0 0 4.5px var(--ink); }
.plate::before, .plate::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; transform: translateY(-50%); border-radius: 50%; background: #9FB3C8; box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); }
.plate::before { left: 10px; }
.plate::after { right: 10px; }
.plate input { display: block; width: 100%; padding: var(--s-1) 0; border: 0; background: transparent; font-family: var(--display); font-weight: 700; font-size: clamp(var(--t-3), 5.6vw, var(--t-5)); letter-spacing: .11em; text-align: center; text-transform: uppercase; }
.plate input::placeholder { color: #9AA8B6; font-weight: 600; letter-spacing: .04em; text-transform: none; }
.plate input:focus { outline: none; }
.plate:focus-within { border-color: var(--orange); box-shadow: inset 0 0 0 3px #FCFCF8, inset 0 0 0 4.5px var(--orange); }
.plate-static { padding: var(--s-2) var(--s-6); }
.plate-static span { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(var(--t-3), 4.8vw, var(--t-5)); letter-spacing: .11em; text-align: center; overflow-wrap: anywhere; }
.field { margin-top: var(--s-4); }
.label { display: block; margin-bottom: var(--s-2); font-weight: 600; font-size: var(--t-2); }
.label .opt { color: var(--steel); font-weight: 400; }
.input { display: block; width: 100%; padding: var(--s-3) var(--s-4); border: 1.5px solid var(--line); border-radius: var(--r-s); background: #fff; font-size: var(--t-2); }
.input::placeholder { color: #8A99A8; opacity: 1; }
.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16,42,67,.14); }
.code-input { font-family: var(--display); font-weight: 600; font-size: var(--t-4); letter-spacing: .08em; text-transform: uppercase; }
.hint { margin-top: var(--s-2); color: var(--steel); font-size: var(--t-1); }
.error { margin-top: var(--s-4); padding: var(--s-3) var(--s-3); border-left: 4px solid #9B1C1C; border-radius: var(--r-s); background: #FDECEC; color: #8A1A1A; font-size: var(--t-2); }
.section { padding: var(--s-9) 0; }
.section-white { background: #fff; }
.h2 { font-family: var(--display); font-weight: 700; font-size: clamp(var(--t-5), 3.4vw, var(--t-7)); line-height: 1.05; }
.h3 { font-family: var(--display); font-weight: 600; font-size: var(--t-4); line-height: 1.15; }
.intro { max-width: 40em; margin-top: var(--s-3); margin-bottom: var(--s-7); color: var(--steel); font-size: var(--t-3); }
@media (max-width: 640px) {
.section { padding: var(--s-8) 0; }
.intro { margin-bottom: var(--s-6); }
}
.facts { border-bottom: 1px solid var(--line); background: #fff; }
.facts-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); margin: 0; padding: var(--s-5) 0; }
.facts-list > div { padding: 0 var(--s-5); border-left: 1px solid var(--line); }
.facts-list > div:first-child { padding-left: 0; border-left: 0; }
.facts-list dt { color: var(--steel); font-size: var(--t-1); }
.facts-list dd { margin: var(--s-1) 0 0; font-weight: 600; line-height: 1.35; }
.facts-link { display: inline-block; margin-top: var(--s-1); color: var(--orange-ink); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 960px) {
.facts-list { grid-auto-flow: row; grid-template-columns: 1fr 1fr; row-gap: var(--s-4); }
.facts-list > div:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (max-width: 480px) {
.facts-list { grid-template-columns: 1fr; }
.facts-list > div { padding-left: 0; border-left: 0; }
}
.journey { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.journey li { position: relative; }
.journey li:not(:last-child)::after { content: ""; position: absolute; top: 21.5px; left: 46px; right: calc(var(--s-5) * -1); height: 3px; background: repeating-linear-gradient(90deg, var(--ink) 0 10px, transparent 10px 18px); }
.jstop { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: var(--s-4); border: 3px solid var(--ink); border-radius: 50%; background: var(--paper); font-family: var(--display); font-weight: 700; font-size: var(--t-4); }
.section-white .jstop { background: #fff; }
.journey li:last-child .jstop { border-color: var(--green); color: var(--green-ink); }
.journey p { margin-top: var(--s-2); color: var(--steel); }
#stages { scroll-margin-top: calc(var(--s-8) + var(--s-4)); }
@media (min-width: 761px) {
.journey { grid-template-rows: repeat(4, auto); row-gap: 0; }
.journey li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
}
@media (max-width: 760px) {
.journey { grid-template-columns: 1fr; gap: 0; }
.journey li { display: grid; grid-template-columns: 46px minmax(0,1fr); column-gap: var(--s-4); padding-bottom: var(--s-5); }
.journey li > *:not(.jstop) { grid-column: 2; }
.jstop { grid-row: 1 / span 4; margin: 0; }
.journey li:not(:last-child)::after { top: 46px; bottom: 0; left: 21.5px; right: auto; width: 3px; height: auto; background: repeating-linear-gradient(180deg, var(--ink) 0 10px, transparent 10px 18px); }
}
.split { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: var(--s-8); align-items: start; }
@media (max-width: 960px) {
.split { grid-template-columns: 1fr; gap: var(--s-6); }
}
.prose { margin-top: var(--s-4); }
.prose p { max-width: 36em; color: var(--ink-3); font-size: var(--t-3); line-height: 1.65; }
.prose p + p { margin-top: var(--s-4); }
.info-card { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-c); background: #fff; }
.section-white .info-card { border-color: transparent; background: var(--paper); }
.info-card dl { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--s-3) var(--s-4); margin: var(--s-4) 0 0; }
.info-card dt { color: var(--steel); font-size: var(--t-1); }
.info-card dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.info-card .actions { margin-top: var(--s-5); }
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { position: relative; padding: var(--s-5) var(--s-7) var(--s-5) 0; font-weight: 600; font-size: var(--t-3); list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; transform: translateY(-75%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq details p { max-width: 44em; padding-bottom: var(--s-5); color: var(--steel); }
.page-hero { padding: var(--s-8) 0 var(--s-7); background: var(--ink); color: #fff; }
.page-hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(var(--t-6), 4.6vw, var(--t-8)); line-height: 1.02; }
.page-hero p { max-width: 38em; margin-top: var(--s-3); color: #C9D6E2; font-size: var(--t-3); }
.contact-lines { display: grid; gap: var(--s-3); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.contact-lines li { display: flex; align-items: center; gap: var(--s-3); font-weight: 600; overflow-wrap: anywhere; }
.contact-lines .ico-sm { color: var(--orange); }
.track-start { display: grid; grid-template-columns: minmax(0,560px) minmax(0,330px); gap: var(--s-6); justify-content: center; align-items: start; }
.track-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: var(--s-6); align-items: start; }
@media (max-width: 960px) {
.track-start, .track-layout { grid-template-columns: 1fr; }
}
.help-card { position: sticky; top: 88px; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-c); background: #fff; }
.help-card > p { margin-top: var(--s-2); color: var(--steel); }
.safety { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--steel); font-size: var(--t-1); }
.safety b { color: var(--ink); }
@media (max-width: 960px) {
.help-card { position: static; }
}
.tag { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-c); background: #fff; }
.tag-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.tag-title { font-family: var(--display); font-weight: 700; font-size: clamp(var(--t-5), 3.2vw, var(--t-6)); line-height: 1.02; }
.tag-meta { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-3) var(--s-4); margin: var(--s-4) 0 0; }
.tag-meta dt { color: var(--steel); font-size: var(--t-1); }
.tag-meta dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 560px) {
.tag-meta { grid-template-columns: 1fr 1fr; }
}
.chip { display: inline-block; padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); font-size: var(--t-1); font-weight: 600; white-space: nowrap; }
.chip-current { background: var(--orange-soft); color: var(--orange-ink); }
.chip-done { background: var(--green-soft); color: var(--green-ink); }
.chip-new { background: #E4E9EE; color: var(--steel); }
.route-wrap { position: relative; margin: var(--s-6) 0 var(--s-2); }
.route-track, .route-fill { position: absolute; top: 9px; left: 12.5%; height: 4px; border-radius: var(--r-pill); }
.route-track { right: 12.5%; background: var(--line); }
.route-fill { width: 0; background: var(--green); transition: width .9s cubic-bezier(.2,.7,.2,1); }
.route { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; }
.route li { text-align: center; }
.stop { position: relative; display: block; width: 22px; height: 22px; margin: 0 auto var(--s-2); border: 3px solid var(--line); border-radius: 50%; background: var(--card); }
.route li.done .stop { border-color: var(--green); background: var(--green); }
.route li.done .stop::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.route li.current .stop { border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-soft); }
.stop-name { font-family: var(--display); font-weight: 600; font-size: var(--t-2); color: var(--steel); }
.route li.done .stop-name, .route li.current .stop-name { color: var(--ink); }
.updates-title { margin: var(--s-6) 0 var(--s-4); }
.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li { position: relative; padding: 0 0 var(--s-5) var(--s-6); }
.timeline li::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: -4px; width: 2px; background: var(--line); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::before { display: none; }
.dot { position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--paper); }
.section-white .dot { box-shadow: 0 0 0 3px #fff; }
.timeline li.is-current .dot { border: 3px solid var(--orange); background: var(--card); }
.tl-stage { font-family: var(--display); font-weight: 600; font-size: var(--t-4); line-height: 1.2; }
.tl-when { margin: var(--s-1) 0 var(--s-2); color: var(--steel); font-size: var(--t-1); }
.tl-note { margin: 0 0 var(--s-3); }
.photos { display: flex; gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-1); scrollbar-width: thin; }
.photo { flex: 0 0 auto; width: 136px; padding: 0; border: 0; background: none; text-align: left; cursor: zoom-in; }
.photo .img { display: block; width: 136px; height: 102px; overflow: hidden; border-radius: var(--r-s); background: var(--line); }
.photo .img svg, .photo .img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo .cap { display: block; margin-top: var(--s-1); color: var(--steel); font-size: var(--t-1); line-height: 1.3; }
.section-jobs { border-bottom: 1px solid var(--line); }
.work-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.work { position: relative; min-width: 0; aspect-ratio: 4 / 3; }
.work-feature { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.work-more { display: none; }
.work-grid.is-expanded .work-more { display: block; }
.work-tile { position: relative; display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; border: 0; border-radius: var(--r-s); background: var(--night); color: #fff; text-align: left; cursor: zoom-in; }
.work-video .work-tile { cursor: pointer; }
.work-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-tile:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.work-cap { position: absolute; right: 0; bottom: 0; left: 0; padding: var(--s-7) var(--s-3) var(--s-3); background: linear-gradient(to top, rgba(11,34,57,.92), rgba(11,34,57,0)); font-size: var(--t-1); font-weight: 500; line-height: 1.35; }
.work-feature .work-cap { padding: var(--s-8) var(--s-5) var(--s-4); font-family: var(--display); font-size: var(--t-4); font-weight: 600; line-height: 1.15; }
.work-play { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border: 2px solid rgba(255,255,255,.92); border-radius: 50%; background: rgba(11,34,57,.72); }
.work-play svg { width: 24px; height: 24px; margin-left: 3px; fill: #fff; }
.work-feature .work-play { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
.work-feature .work-play svg { width: 32px; height: 32px; }
.work-tile:hover .work-play { background: var(--orange); border-color: var(--orange); }
.work-actions:not(:empty) { margin-top: var(--s-5); }
@media (max-width: 900px) {
.work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.work-feature { grid-row: span 1; aspect-ratio: 4 / 3; }
.work-cap { padding: var(--s-6) var(--s-2) var(--s-2); }
.work-feature .work-cap { padding: var(--s-7) var(--s-3) var(--s-3); font-size: var(--t-3); }
}
.videos { display: grid; gap: var(--s-3); max-width: 480px; margin-top: var(--s-3); }
.video { margin: 0; }
.video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: var(--r-s); background: var(--night); }
.video figcaption { margin-top: var(--s-1); color: var(--steel); font-size: var(--t-1); }
.empty { color: var(--steel); }
@media (max-width: 560px) {
.photo, .photo .img { width: 112px; }
.photo .img { height: 84px; }
}
.site-foot { padding: var(--s-8) 0 var(--s-6); background: var(--night); color: #C9D6E2; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1fr; gap: var(--s-6); }
.site-foot h4 { margin-bottom: var(--s-3); color: #fff; font-family: var(--display); font-weight: 600; font-size: var(--t-3); }
.site-foot ul { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; font-size: var(--t-2); }
.site-foot a { color: #E3EBF2; text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.foot-about { margin-top: var(--s-4); max-width: 24em; font-size: var(--t-2); }
.foot-safety { margin-top: var(--s-7); padding: var(--s-4) var(--s-4); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-s); font-size: var(--t-1); }
.foot-safety b { color: #fff; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid rgba(255,255,255,.12); color: #9FB3C8; font-size: var(--t-1); }
@media (max-width: 960px) {
.foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.foot-grid { grid-template-columns: 1fr; }
}
.modal { width: min(94vw, 580px); max-height: 90vh; padding: 0; border: 0; border-radius: var(--r-c); background: #fff; color: var(--ink); }
.modal::backdrop { background: rgba(8,28,48,.62); }
.modal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line); }
.lb-img { aspect-ratio: 4 / 3; background: var(--line); }
.lb-img svg, .lb-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
.route-fill, .faq summary::after { transition: none; }
}
/* ---------- Production additions ---------- */
.skip { position: absolute; left: var(--s-2); top: calc(var(--s-9) * -1); z-index: 100; padding: var(--s-2) var(--s-3); border-radius: var(--r-s); background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; }
.skip:focus { top: var(--s-2); }
.btn[aria-busy="true"] { opacity: .75; cursor: progress; }
.track-card .error { margin-top: var(--s-4); }
.info-card dl > div { display: contents; }
.lightbox { width: min(94vw, 960px); }
.lightbox .lb-img { aspect-ratio: auto; background: #0B2239; }
.lightbox .lb-img img { width: 100%; height: auto; max-height: 75vh; object-fit: contain; }
.lightbox .lb-img video { display: block; width: 100%; max-height: 75vh; background: #0B2239; }
.lb-img [hidden] { display: none; }