/* ==========================================================================
   Talbot-Lago Mondial — Home
   Figma: Jamie_Working-file / node 2150-605
   Design canvas: 1440px wide. All local assets live in /assets.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts (self-hosted, /assets/fonts)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/oxanium-normal-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: 'Oxanium';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/oxanium-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/oxanium-normal-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: 'Oxanium';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/oxanium-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/oxanium-normal-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: 'Oxanium';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/oxanium-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/oxanium-normal-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: 'Oxanium';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/oxanium-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/sarabun-normal-300-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: 'Sarabun';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/sarabun-normal-300-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/sarabun-normal-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: 'Sarabun';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/sarabun-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/sarabun-normal-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: 'Sarabun';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/sarabun-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/sarabun-normal-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: 'Sarabun';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/sarabun-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sarabun';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/sarabun-italic-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: 'Sarabun';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/sarabun-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/roboto-normal-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: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/roboto-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/roboto-italic-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: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/roboto-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/roboto-normal-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: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/roboto-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/playfair-display-italic-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: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/playfair-display-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  --orange: #ff4d23;
  --black: #000;
  --white: #fff;
  --grey-body: #9a9a9a;
  --grey-lede: #7a7a7a;
  --grey-rule: #333;
  --grey-hairline: #c0c0c0;
  --grey-divider: rgba(122, 122, 122, 0.36);

  --font-display: 'Oxanium', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Sarabun', 'Segoe UI', system-ui, sans-serif;
  --font-ui: 'Roboto', system-ui, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* One scrim over every hero photo — was four tints between 0.55 and 0.65. */
  --hero-scrim: rgba(0, 0, 0, 0.6);

  /* Section rhythm — 164px at 1440, compressing on smaller viewports. */
  --gap-section: clamp(72px, 11.39vw, 164px);
  --content-width: 1260px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 94px; /* clears the sticky header on #anchor jumps */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.47;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

.container {
  width: min(100% - 48px, var(--content-width));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Shared typography
   -------------------------------------------------------------------------- */
/* Matches .racing-label — the same eyebrow slot on the other pages. Was
   21.193px/25.432px, the only section label above 20px. */
.section-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.39vw, 20px);
  line-height: 1.2;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--black);
}

/* 45px is the site-wide section-heading size (racing-, ghosts-, spec-panel-,
   contact-intro-, icons-legacy-, revival-statement-); this was the lone 48. */
.section-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.125vw, 45px);
  line-height: 1.06;
  text-transform: uppercase;
  color: var(--orange);
}

.section-heading--center {
  text-align: center;
  line-height: 1.093; /* 52.477 / 48 */
}

.lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(17px, 1.39vw, 20px);
  line-height: 1.366; /* 27.32 / 20 */
  color: var(--grey-lede);
}

.prose p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.47; /* 24.99 / 17 */
  color: var(--grey-body);
}

/* Orange marker bar down the left edge, same device as the rail labels. */
.prose blockquote {
  padding-left: 16px;
  border-left: 3px solid var(--orange);
  font-family: var(--font-body);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.47;
  color: var(--black);
}

/* Buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 16px 24px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.67vw, 24px);
  line-height: 1.2;
  color: var(--white);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    transform 0.2s ease;
}

.btn--solid { background: var(--orange); }
.btn--solid:hover,
.btn--solid:focus-visible { background: #e63f18; }

/* Figma draws the stroke inside the frame, so the border eats into the padding. */
.btn--outline {
  padding: 13px 21px;
  background: transparent;
  border: 3px solid var(--orange);
}
.btn--outline:hover,
.btn--outline:focus-visible { background: var(--orange); }

.btn:active { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--white);
  transition: transform 0.3s ease;
}

/* Set by script.js on downward scroll; an upward scroll brings it back. */
.site-header.is-hidden { transform: translateY(-100%); }

/* Same rail as .container and the footer: Figma's 1364.917px put the logo 52px
   left of every heading below it. */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 48px, var(--content-width));
  height: 94px;
  margin-inline: auto;
}

/* 44px minimum tap target — the anchor is otherwise only as tall as its image. */
.logo {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.logo img {
  width: 263.854px;
  height: 46.99px;
  object-fit: contain;
}

.top-nav > ul {
  display: flex;
  align-items: center;
}

/* The two menu items own their submenu's positioning context. */
.nav-item { position: relative; }

.nav-link {
  display: flex;
  align-items: center;
  height: 94px;
  padding-inline: 32px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 22.95px;
  letter-spacing: 0.75px;
  text-transform: uppercase;
  color: var(--black);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link:focus-visible { color: var(--orange); }

/* The current page, same orange the submenu links and the dropdown toggles
   already use — Home and Get Involved carried aria-current with nothing
   styling it. */
.nav-link[aria-current='page'] { color: var(--orange); }

/* Submenus ----------------------------------------------------------------
   Real <button> disclosures rather than hover-only CSS: the menus have to be
   reachable by keyboard and on touch, where there is no hover. */
.nav-link--toggle {
  gap: 0.5em;
  cursor: pointer;
}

.nav-link--toggle::after {
  content: '';
  width: 0.42em;
  height: 0.42em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 0.2s ease;
}

.nav-link--toggle[aria-expanded='true']::after {
  transform: translateY(0.1em) rotate(-135deg);
}

.nav-link--toggle.is-current { color: var(--orange); }

.nav-menu {
  position: absolute;
  top: 94px;
  left: 0;
  z-index: 30;
  display: none;
  min-width: max-content;
  padding: 8px 0;
  background: var(--white);
  border-top: 2px solid var(--orange);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.nav-menu.is-open { display: block; }

/* Hover-to-open only on real pointers. On touch a tap leaves :hover applied,
   which used to out-specify .is-open and hide the menu the tap just opened. */
@media (hover: hover) and (pointer: fine) {
  .nav-item--menu:hover .nav-menu { display: block; }
}

.nav-menu a {
  display: block;
  padding: 12px 24px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--black);
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-menu a:hover,
.nav-menu a:focus-visible {
  background: #f5f5f5;
  color: var(--orange);
}

.nav-menu a[aria-current='page'] { color: var(--orange); }

/* Both menus drop from their own item's left edge. That only fits for Our DNA
   because its longest entry is the short "Icons of Elegance and Speed" — the
   full "The Cars: …" ran 345px against the 288px available at 1024px, which is
   why this menu used to hang from the right and cover Our Revival. */

/* Hamburger --------------------------------------------------------------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
}

.nav-toggle__bar {
  display: block;
  width: 26px;
  height: 2px;
  margin-inline: auto;
  background: var(--black);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Hero slideshow — live text over full-bleed plates. The gradient restores the
   darkness the Figma mock-up had baked into its artwork, which is what keeps
   the copy readable over bright bodywork.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  /* The box carries the original plate's 1453:814 ratio; the floor only kicks
     in on phones, where the copy needs the room. */
  aspect-ratio: 1453 / 814;
  min-height: 460px;
  overflow: hidden;
  background: #0b0b0d;
  color: var(--white);
}

/* Each slide brings its own plate through --slide-img, so the shared gradient
   is declared once rather than inline on every slide. */
.hero__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Bottom padding leaves the controls a clear band to sit in. */
  padding: 48px 0 132px;
  background-image: linear-gradient(var(--hero-scrim), var(--hero-scrim)),
    var(--slide-img);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s;
}

.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* 910px reproduces the mock's line breaks in the lede. */
.hero__content { width: min(100% - 48px, 910px); }

/* This slide's headline needs more room to hold two lines; its lede stays on
   the 910px measure so the copy width matches the other slides. */
.hero__slide--wide .hero__content { width: min(100% - 48px, 1150px); }

.hero__slide--wide .hero__lede,
.hero__slide--wide .hero__join {
  max-width: 910px;
  margin-inline: auto;
}

/* Controls ---------------------------------------------------------------- */
.hero__controls {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 48px, var(--content-width));
}

.hero__arrows {
  display: flex;
  gap: 20px;
}

/* Bare glyphs — the padding keeps a comfortable tap target without drawing
   a box around it. */
.hero__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin: -10px;
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1;
  color: var(--white);
  transition: color 0.2s ease, transform 0.2s ease;
}

.hero__arrow:hover,
.hero__arrow:focus-visible { color: var(--orange); }

.hero__arrow[data-hero='prev']:hover { transform: translateX(-3px); }
.hero__arrow[data-hero='next']:hover { transform: translateX(3px); }

.hero__count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.55);
}

.hero__count-current {
  font-size: 28px;
  color: var(--orange);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5.167vw, 74.4px);
  line-height: 1;
  text-transform: uppercase;
}

.hero__title-accent { color: var(--orange); }

.hero__lede,
.hero__join {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.32vw, 19px);
  line-height: 1.579; /* 30 / 19 */
}

.hero__lede { margin-top: 18px; }
.hero__join { margin-top: 18px; }

/* --------------------------------------------------------------------------
   The Legacy
   -------------------------------------------------------------------------- */
.legacy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 65.65px;
  margin-top: clamp(72px, 8.75vw, 126px);
}

.legacy__portrait {
  flex: 0 0 449px;
  width: 449px;
  height: 606px;
}

.legacy__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.legacy__content {
  flex: 0 1 745.351px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 10px label-to-heading, the site-wide value. Was 22.341px. */
.legacy__headings .section-heading { padding-top: 10px; }

.legacy__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.prose {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Milestone figures under the legacy split — same outlined glyph + barred
   label as the Continuum rail, laid out across three columns instead of down. */
.legacy-stats .rail-glyph { font-size: clamp(62px, 6.25vw, 90px); }
.legacy-stats .rail-label { padding-left: 10px; }

.legacy-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: clamp(48px, 5vw, 72px);
}

@media (max-width: 640px) {
  .legacy-stats { grid-template-columns: 1fr; gap: 32px; }
}

/* --------------------------------------------------------------------------
   Art-Deco Elegance
   -------------------------------------------------------------------------- */
.artdeco {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: var(--gap-section);
}

.artdeco__intro {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: center;
}

/* Figma centres this copy inside 1225px boxes pinned to the container's left
   edge, not inside the full 1260px — it reads ~17px left of true centre. */
.artdeco__intro .section-heading { width: min(100%, 1225px); }
.artdeco__intro .lede { width: min(100%, 1224.422px); }

.artdeco__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 57.42px;
}

.artdeco__image {
  flex: 0 0 539px;
  width: 539px;
  height: 253px;
}

.artdeco__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-list {
  flex: 0 1 663.582px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Figma: 31.704px of top spacing with the 4.373px rule drawn inside it. */
.feature {
  padding-top: 27.331px;
  border-top: 4.373px solid var(--grey-rule);
}

.feature__row {
  display: flex;
  align-items: center;
}

/* Collapsed the panel is genuinely 0px tall, so the closed section keeps the
   exact height the Figma frame specifies. */
.feature__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.feature__panel-inner { overflow: hidden; }

.feature__panel.is-open { grid-template-rows: 1fr; }

.feature__panel p {
  padding: 20px 94px 4px 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.11vw, 16px);
  line-height: 1.55;
  color: var(--grey-lede);
}

.feature__title {
  flex: 0 0 212.349px;
  padding-right: 21.865px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 1.67vw, 24px);
  line-height: 1.093; /* 26.238 / 24 */
  letter-spacing: 0.328px;
  text-transform: uppercase;
  color: var(--black);
}

.feature__text {
  flex: 1 1 auto;
  padding-right: 43.729px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.39vw, 20px);
  line-height: 1.366;
  color: var(--grey-lede);
}

.feature__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 69.967px;
  width: 69.967px;
  height: 69.967px;
  background: var(--orange);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26.238px;
  line-height: 19.678px;
  letter-spacing: 0.8199px;
  color: var(--white);
  transition: background-color 0.2s ease;
}

.feature__toggle::before { content: '+'; }
.feature__toggle[aria-expanded='true']::before { content: '\2212'; }

.feature__toggle:hover { background: #e63f18; }

/* --------------------------------------------------------------------------
   Notable Achievements
   -------------------------------------------------------------------------- */
.achievements {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: var(--gap-section);
}

.achievements__title {
  font-size: clamp(30px, 3.125vw, 45px);
  line-height: 1;
}

.achievements__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 390px));
  justify-content: space-between;
  gap: 45px;
}

.achievement {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.achievement img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* Figma crop for the 1950 French GP frame (image sits 15% from the left). */
.achievement__img--offset { object-position: 15% 50%; }

.achievement figcaption {
  display: flex;
  flex-direction: column;
  gap: 17px;
  text-align: center;
}

.achievement figcaption h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--black);
}

.achievement figcaption p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 24.99px;
  color: var(--grey-body);
}

/* --------------------------------------------------------------------------
   CTA card
   -------------------------------------------------------------------------- */
.cta {
  margin-top: var(--gap-section);
  background: var(--black);
}

.cta__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: min(100% - 80px, 1062px);
  margin-inline: auto;
  padding-block: 75px;
}

.cta__text {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.cta__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.125vw, 45px);
  line-height: 1.2;
  color: var(--white);
}

/* One blank line of separation, matching the empty paragraph in the Figma frame. */
/* Same measure as the hero ledes: Sarabun 400 at 19px / 1.579, white. */
.cta__body {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.32vw, 19px);
  line-height: 1.579;
  color: var(--white);
}

.cta__buttons {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: clamp(72px, 11.53vw, 166px);
  border-top: 0.667px solid var(--grey-hairline);
}

.site-footer__top {
  width: min(100% - 48px, var(--content-width));
  margin-inline: auto;
  padding-top: 89.594px;
  padding-bottom: 67.198px;
}

.footer-grid {
  display: flex;
  align-items: stretch;
  gap: 40px;
}

/* Brand ------------------------------------------------------------------- */
/* Top-aligned, not centred: centring re-positioned the badge every time a
   Navigate dropdown opened and changed the row's height. */
.footer-brand {
  flex: 0 0 448px;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-top: 11.198px;
}

.footer-brand__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.footer-brand__badge {
  width: 79.594px;
  height: 79.594px;
  object-fit: contain;
}

.footer-brand__wordmark {
  width: 199px;
  height: 17.615px;
  object-fit: contain;
}

.footer-brand__tagline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 366px; /* Figma's 358px frame; the French line overflows it on one line */
  text-align: center;
  color: var(--grey-lede);
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1;
}

.footer-brand__tagline em {
  font-style: italic;
  font-size: 12px;
}

.footer-brand__tagline span { font-size: 12px; }

/* Link columns ------------------------------------------------------------ */
.footer-col {
  /* 448 brand + 2 × 40 gap leaves 366 per column on the 1260 content rail.
     Grows and shrinks so the row tracks the rail at any width. */
  flex: 1 1 336px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-left: 34.261px;
  padding-right: 33.594px;
  padding-top: 11.198px;
  border-left: 0.667px solid var(--grey-divider);
}

.footer-col__heading {
  padding-top: 7.33px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  line-height: 19.89px;
  letter-spacing: 0.65px;
  text-transform: uppercase;
  color: var(--grey-lede);
}

.footer-list a,
.footer-drop > summary {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15.3px;
  line-height: 15.3px;
  text-transform: uppercase;
  color: var(--grey-lede);
  transition: color 0.2s ease;
}

.footer-list li a { padding: 15px; }

.footer-list:not(.footer-list--social) { padding-bottom: 25.5px; }

.footer-list--social li a {
  padding: 0;
  line-height: 45px;
}

/* Collapsible sub-menus. <details> carries the open/closed state, so no JS and
   the keyboard behaviour comes for free. */
.footer-drop > summary {
  padding: 15px;
  list-style: none; /* Firefox's default triangle */
  cursor: pointer;
}

.footer-drop > summary::-webkit-details-marker { display: none; }

.footer-drop > summary::after {
  content: '';
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.6em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 0.2s ease;
}

.footer-drop[open] > summary::after { transform: translateY(0.1em) rotate(-135deg); }

.footer-drop > summary:hover,
.footer-drop > summary:focus-visible { color: var(--orange); }

.footer-drop__list { padding-left: 15px; }

.footer-drop__list a {
  font-size: 13.6px;
  line-height: 1.35;
}

.footer-drop__list li a { padding: 12px 15px; }

.footer-list a:hover,
.footer-list a:focus-visible { color: var(--orange); }

/* Bottom bar -------------------------------------------------------------- */
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  padding: 24px 20px;
  border-top: 0.667px solid var(--grey-lede);
}

.site-footer__bottom p {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 12px;
  line-height: 24.99px;
  color: var(--grey-lede);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Tighten the nav in the band between the fixed-width layout and the hamburger. */
@media (max-width: 1119px) {
  .nav-link { padding-inline: 18px; }
}

/* Below the design width the two-column blocks lose their fixed tracks. */
@media (max-width: 1180px) {
  .legacy { gap: 48px; }
  .legacy__portrait {
    flex: 0 1 449px;
    height: auto;
    aspect-ratio: 449 / 606;
  }
  .artdeco__row { gap: 40px; }
  .artdeco__image {
    flex: 0 1 539px;
    height: auto;
    aspect-ratio: 539 / 253;
  }
  .footer-col { flex: 1 1 0; }
}

/* Tablet: mobile nav + stacked feature rows. */
@media (max-width: 1024px) {
  .nav-toggle { display: flex; }

  .top-nav {
    position: absolute;
    inset: 94px 0 auto;
    background: var(--white);
    border-bottom: 1px solid var(--grey-hairline);
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
  }
  .top-nav > ul { overflow: hidden; }
  .top-nav.is-open { grid-template-rows: 1fr; }

  .top-nav > ul {
    flex-direction: column;
    align-items: stretch;
    width: min(100% - 48px, var(--content-width));
    margin-inline: auto;
  }

  .nav-link {
    height: auto;
    padding: 18px 0;
    font-size: 16px;
  }

  /* Submenus expand in flow here — a floating panel has nothing to float
     against once the bar has collapsed into the drawer. */
  .nav-link--toggle {
    width: 100%;
    justify-content: space-between;
  }

  .nav-menu,
  .nav-item--menu ~ .nav-item--menu .nav-menu {
    position: static;
    padding: 0 0 8px 16px;
    border-top: 0;
    box-shadow: none;
    min-width: 0;
  }

  /* Hover must not open these on touch; only the button state may. */
  .nav-item--menu:hover .nav-menu:not(.is-open) { display: none; }
  .nav-menu.is-open { display: block; }

  .nav-menu a {
    padding: 12px 0;
    white-space: normal;
  }

  .nav-menu a:hover,
  .nav-menu a:focus-visible { background: transparent; }

  .legacy {
    flex-direction: column;
    align-items: flex-start;
  }
  .legacy__portrait {
    width: 100%;
    max-width: 449px;
    height: auto;
    aspect-ratio: 449 / 606;
    align-self: center;
    flex: 0 0 auto;   /* same axis trap as .artdeco__image */
  }
  .legacy__content { flex: 1 1 auto; }

  .artdeco__row {
    flex-direction: column;
    align-items: stretch;
  }
  /* flex: 0 1 539px was set for the row layout; once the row stacks, that basis
     applies to HEIGHT and beats aspect-ratio, squaring the plate off. */
  .artdeco__image {
    flex: 0 0 auto;
    width: 100%;
    max-width: 539px;
    height: auto;
    aspect-ratio: 539 / 253;
    align-self: center;
  }
  .feature-list { flex: 1 1 auto; }

  .footer-grid { flex-wrap: wrap; }
  .footer-brand {
    flex: 1 1 100%;
    padding-bottom: 24px;
  }
  .footer-col:first-of-type { border-left: 0; padding-left: 0; }
}

/* Small tablet / large phone. */
@media (max-width: 860px) {
  .achievements__grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    justify-content: center;
    gap: 40px 32px;
  }

  .feature { padding-top: 24px; }
  .feature__row {
    flex-wrap: wrap;
    gap: 12px 0;
  }
  .feature__panel p { padding-right: 0; }
  .feature__title {
    flex: 1 1 auto;
    padding-right: 16px;
  }
  .feature__text {
    flex: 1 1 100%;
    order: 3;
    padding-right: 0;
  }
  .feature__toggle {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
  }

  .cta__inner { width: min(100% - 48px, 1062px); padding-block: 56px; }

  /* Optical offset only makes sense at the design's hero height. */
  .hero { padding: 48px 0; }
}

/* Phone. */
@media (max-width: 640px) {
  .container { width: calc(100% - 32px); }

  .nav-bar { width: calc(100% - 32px); }
  .logo img { width: 200px; height: auto; }
  .top-nav { inset-block-start: 94px; }


  .achievements__grid { grid-template-columns: minmax(0, 1fr); }

  .cta__inner { width: calc(100% - 32px); padding-block: 48px; }
  .cta__buttons { gap: 16px; }
  .btn { padding: 14px 20px; }

  .footer-grid { flex-direction: column; gap: 24px; }
  .footer-col {
    flex: 1 1 auto;
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
    border-top: 0.667px solid var(--grey-divider);
    padding-top: 24px;
  }
  .footer-list li a { padding: 15px 0; }

  .site-footer__top {
    width: calc(100% - 32px);
    padding-top: 56px;
    padding-bottom: 40px;
  }
}

/* --------------------------------------------------------------------------
   Reveal on scroll
   script.js adds .js-reveal to <html> and .is-revealed to each [data-reveal]
   as it enters view. Without JS, or with reduced motion asked for, .js-reveal
   is never set and everything renders in its final state.
   -------------------------------------------------------------------------- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Timeline rows animate their two halves, not the row: the rail dot is the
   row's own ::after at left 50%, so moving the row would slide the dot off the
   rail. The dot stays put and marks the spot the content slides into. */
.js-reveal .timeline__row[data-reveal] {
  opacity: 1;
  transform: none;
}

.js-reveal .timeline__row[data-reveal] > .timeline__media,
.js-reveal .timeline__row[data-reveal] > .timeline__entry {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-reveal .timeline__row--flip[data-reveal] > .timeline__media,
.js-reveal .timeline__row--flip[data-reveal] > .timeline__entry {
  transform: translateX(28px);
}

.js-reveal .timeline__row[data-reveal].is-revealed > .timeline__media,
.js-reveal .timeline__row[data-reveal].is-revealed > .timeline__entry {
  opacity: 1;
  transform: none;
}

/* The copy half trails its plate by a beat. */
.js-reveal .timeline__row[data-reveal] > .timeline__entry { transition-delay: 0.12s; }

/* Cards in a grid cascade instead of arriving as one block. The marvels sit two
   per column, so they only ever reach nth-child(2). */
.js-reveal .achievement[data-reveal]:nth-child(2),
.js-reveal .pilot[data-reveal]:nth-child(2),
.js-reveal .marvel[data-reveal]:nth-child(2) { transition-delay: 0.09s; }

.js-reveal .achievement[data-reveal]:nth-child(3),
.js-reveal .pilot[data-reveal]:nth-child(3) { transition-delay: 0.18s; }

.js-reveal .pilot[data-reveal]:nth-child(4) { transition-delay: 0.27s; }
.js-reveal .pilot[data-reveal]:nth-child(5) { transition-delay: 0.36s; }

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

/* ==========================================================================
   Our Vision page
   Figma: Jamie_Working-file / node 2203-968
   ========================================================================== */

/* Hero --------------------------------------------------------------------
   Figma stretches the plate non-uniformly inside its 1458x811 frame; we cover
   instead so the photograph keeps its own proportions. */
.vision-hero {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  min-height: clamp(460px, 56.32vw, 811px);
  padding: clamp(120px, 18.4vw, 265px) 0 clamp(80px, 20.5vw, 292px);
  background-image: linear-gradient(var(--hero-scrim), var(--hero-scrim)),
    url('assets/images/revival/vision-hero.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #0b0b0d;
  text-align: center;
  color: var(--white);
}

.vision-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: min(100% - 48px, 923px);
}

.vision-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 5.56vw, 80px);
  line-height: 1;
  text-transform: uppercase;
}

.vision-hero__title-accent { color: var(--orange); }

.vision-hero__lede {
  width: min(100%, 785px);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.32vw, 19px);
  line-height: 1.579; /* 30 / 19 */
}

/* Page body ---------------------------------------------------------------- */
.vision-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
  margin-top: clamp(72px, 8.61vw, 124px);
}

.vision-intro {
  display: flex;
  flex-direction: column;
  gap: 40px;
  text-align: center;
}

/* .cta carries the home page's own top margin; here the flex gap already
   supplies it, so the card would otherwise sit 328px down instead of 164px. */
.vision-body .cta { margin-top: 0; }

.vision-intro p {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(17px, 1.39vw, 20px);
  line-height: 1.5; /* 30 / 20 */
  letter-spacing: 0.3px;
  color: var(--grey-lede);
}

/* Orange rule + label ------------------------------------------------------
   No side padding, so the rule lines up with the cards and columns beneath it
   rather than sitting 10px short at each end. */
.label-rule { padding: 10px 0; }

.label-rule__text {
  padding: 3.33px 0 20.4px;
  border-top: 3px solid var(--orange);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--orange);
}

/* Design Philosophy -------------------------------------------------------- */
.vision-philosophy {
  display: flex;
  flex-direction: column;
  gap: 96px;
}

/* The label still sits flush on the first split, and "Visceral Roots." still
   sits 20px under the second — both pull back against the stack gap above. */
.vision-philosophy .label-rule { margin-bottom: -96px; }
.vision-philosophy .display-pair--flipped { margin-top: -76px; }

/* One gutter for both rows; Figma's 58/70 split read as an inconsistency
   rather than an intent. */
.vision-split {
  display: flex;
  align-items: center;
  gap: 64px;
}

/* Basis 0, not auto: on auto the basis is the paragraph's max-content width,
   so flex-shrink was split by basis and crushed the 500px plate to ~180px. */
.vision-split__text {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

/* Even halves: basis 0 on both sides means copy and plate each take exactly
   half the row, whatever the container width. Both plates cover-crop into the
   same 5:3 box, so the two rows stay identical to each other. */
.vision-split__image {
  flex: 1 1 0;
  aspect-ratio: 5 / 3;
}

.vision-split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.display-pair {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-size: clamp(32px, 3.125vw, 45px);
  line-height: 1.0667; /* 48.001 / 45 */
}

.display-pair__lead {
  font-family: var(--font-display);
  color: var(--black);
}

.display-pair__accent {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--orange);
}

/* "Visceral / Roots." inverts the colour pairing. */
.display-pair--flipped .display-pair__lead { color: var(--orange); }
.display-pair--flipped .display-pair__accent { color: var(--black); }

.vision-prose {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.vision-prose--tight { gap: 5px; }

.vision-prose p {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.47; /* 24.99 / 17 */
  color: var(--grey-lede);
}


/* Quote -------------------------------------------------------------------- */
.vision-quote {
  width: min(100%, 726px);
  margin-inline: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.22vw, 32px);
  line-height: 1.5;
  text-align: center;
  color: var(--orange);
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .vision-split,
  .vision-split--reverse {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
  .vision-split--reverse { flex-direction: column-reverse; }
  .vision-split__image { flex: 1 1 auto; }
}

@media (max-width: 860px) {
  .vision-hero { padding: clamp(96px, 14vw, 200px) 0 clamp(72px, 12vw, 180px); }
}

@media (max-width: 640px) {
  .vision-hero__content { width: calc(100% - 32px); }
  .vision-intro { gap: 28px; }
}

/* ==========================================================================
   Our Heritage — The Genesis of Talbot-Lago
   Figma: Jamie_Working-file / node 2219-284
   ========================================================================== */

/* Hero --------------------------------------------------------------------
   A flat 61% #202020 wash rather than the gradient the other two heroes use:
   the plate is a bright period photograph and the design keeps it even. */
.heritage-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  min-height: clamp(420px, 54.1vw, 780px);
  padding-block: 48px;
  background-image: linear-gradient(var(--hero-scrim), var(--hero-scrim)),
    url('assets/images/dna/genesis-hero.png');
  background-repeat: no-repeat;
  background-size: cover;
  /* The square source is cropped high in Figma, keeping the faces in frame. */
  background-position: center 10%;
  background-color: #0b0b0d;
  text-align: center;
  color: var(--white);
}

.heritage-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 29px;
  width: min(100% - 48px, 1161px);
}

.heritage-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5.56vw, 80px);
  line-height: 1;
  text-transform: uppercase;
}

.heritage-hero__title-accent { color: var(--orange); }

.heritage-hero__lede {
  width: min(100%, 785px);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.32vw, 19px);
  line-height: 1.579; /* 30 / 19 */
}

/* Page body ---------------------------------------------------------------- */
.heritage-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
  margin-top: var(--gap-section);
}

/* .cta carries the home page's own top margin; the flex gap already supplies it. */
.heritage-body .cta { margin-top: 0; }

.heritage-intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(17px, 1.39vw, 20px);
  line-height: 1.25; /* 24.99 / 20 */
  color: var(--grey-lede);
}

/* The three highlighted virtues — emphasis carried by colour, not italics. */
.heritage-intro em {
  font-style: normal;
  color: var(--orange);
}

/* Oxanium for the closing statement, against the Roboto paragraph above it. */
.heritage-intro__close {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.5; /* 30 / 20 */
  letter-spacing: 0.3px;
  color: var(--black);
}

/* Timeline ----------------------------------------------------------------
   Figma draws every row as an absolutely-positioned pair straddling a 1px
   rail. The same geometry falls out of a two-column grid centred on that
   rail: both halves are 386px, the rail sits in the 140px gutter, and the dot
   rides the row's centre line — which is also the plate's centre, because the
   plate is always the taller of the two halves. */
.heritage-timeline {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 1141px);
  margin-inline: auto;
}

.timeline {
  position: relative;
  width: 100%;
}

/* Rows carry their 50px spacing as margin so this rail stays unbroken. */
.timeline::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: var(--grey-lede);
}

.timeline__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 386px));
  column-gap: 140px;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
}

.timeline__row:last-child { margin-bottom: 0; }

.timeline__row::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 17px;
  margin: -8.5px 0 0 -8.5px;
  border-radius: 50%;
  background: var(--orange);
}

/* grid-row is explicit on both: on the mirrored rows the entry asks for
   column 1 after the media has taken column 2, and sparse auto-placement
   would drop it into a second row instead of back alongside. */
.timeline__media {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  width: min(300px, 100%);
}

.timeline__entry {
  grid-column: 2;
  grid-row: 1;
  text-align: left;
}

/* Alternate milestones mirror: copy left of the rail, plate right of it. */
.timeline__row--flip .timeline__media {
  grid-column: 2;
  justify-self: start;
}

.timeline__row--flip .timeline__entry {
  grid-column: 1;
  text-align: right;
}

.timeline__year {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(28px, 2.36vw, 34px);
  line-height: 0.735; /* 24.99 / 34 — Figma sets the line box tighter than the glyphs */
  color: var(--orange);
}

.timeline__event {
  /* Figma splits this as 17px + 3.854px across two nested margin frames. */
  margin: 20.854px 0 17px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.39vw, 20px);
  line-height: 1.2; /* 24 / 20 */
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--grey-lede);
}

.timeline__credit {
  margin-top: 40px;
  padding-block: 11.396px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--grey-lede);
}

.timeline__cta { margin-top: 24px; }

/* Responsive --------------------------------------------------------------
   The paired layout needs 912px of track. Below the tablet breakpoint the
   rail moves to the left margin and each milestone stacks: copy, then plate. */
@media (max-width: 1024px) {
  .timeline::before { left: 8px; margin-left: 0; }

  .timeline__row {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    justify-items: start;
    row-gap: 20px;
    margin-bottom: 44px;
    padding-left: 44px;
  }

  /* Level with the year's line box rather than the row's centre. */
  .timeline__row::after {
    top: 12px;
    left: 8px;
    margin-top: 0;
  }

  .timeline__media,
  .timeline__row--flip .timeline__media {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }

  .timeline__entry,
  .timeline__row--flip .timeline__entry {
    grid-column: 1;
    grid-row: 1;
    text-align: left;
  }
}

@media (max-width: 640px) {
  .timeline__row { padding-left: 32px; }
  .timeline__credit { margin-top: 32px; }
}

/* ==========================================================================
   Our Heritage — The Icons of Talbot-Lago
   Figma: Jamie_Working-file / node 2223-672
   ========================================================================== */

.icons-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  min-height: clamp(420px, 54.1vw, 780px);
  padding-block: 48px;
  background-image: linear-gradient(var(--hero-scrim), var(--hero-scrim)),
    url('assets/images/dna/icons-hero.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 45%;
  background-color: #0b0b0d;
  text-align: center;
  color: var(--white);
}

.icons-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: min(100% - 48px, 1070px);
}

.icons-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5.56vw, 80px);
  line-height: 1;
  text-transform: uppercase;
}

.icons-hero__title-accent { color: var(--orange); }

.icons-hero__lede {
  width: min(100%, 886px);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.32vw, 19px);
  line-height: 1.579; /* 30 / 19 */
}

/* Page body ---------------------------------------------------------------- */
.icons-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
  margin-top: var(--gap-section);
}

/* .cta carries the home page's own top margin; the flex gap already supplies it. */
.icons-body .cta { margin-top: 0; }

/* Model selector ----------------------------------------------------------
   Figma shows one selected state (the Teardrop): orange, and stepped 25px in
   from the rail of the other four. That indent is the selection affordance,
   so it animates rather than snapping. */
.icon-models {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 68px;
}

/* Watermark car behind the selector. On a pseudo-element so the opacity never
   touches the tabs or the panel images sitting over it. */
.icon-models::before {
  content: '';
  position: absolute;
  inset: -40px -24px;
  z-index: -1;
  background: url('assets/images/dna/icons-car-watermark.png') center / auto 120% no-repeat;
  opacity: 0.07;
  pointer-events: none;
}

.icon-models__list {
  flex: 0 1 579px;
  display: flex;
  flex-direction: column;
}

.icon-model {
  display: flex;
  align-items: baseline;
  gap: 10px;
  height: 85px;
  padding: 30.33px 0 0;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  transition: padding-left 0.25s ease;
}

.icon-model__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 2.78vw, 40px);
  line-height: 1.0667; /* 42.668 / 40 */
  color: #333;
  transition: color 0.25s ease;
}

.icon-model__years {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  color: #666;
}

.icon-model[aria-selected='true'] { padding-left: 25px; }
.icon-model[aria-selected='true'] .icon-model__name { color: var(--orange); }
.icon-model:hover .icon-model__name { color: var(--orange); }

.icon-models__panels { flex: 0 1 613px; }

.icon-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.icon-panel[hidden] { display: none; }

/* Figma reserves a 365x187 box and letterboxes the car inside it, so the
   plate keeps its height whatever the artwork's own proportions are. */
.icon-panel__media {
  width: min(365px, 100%);
  aspect-ratio: 365 / 187;
}

.icon-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.icon-panel__copy {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(14px, 1.06vw, 15.3px);
  line-height: 1.6; /* 24.48 / 15.3 */
  color: #666;
}

/* A Legacy of Speed and Innovation ---------------------------------------- */
.icons-legacy {
  display: flex;
  align-items: flex-end;
}

/* 672px of track in Figma, but its 6px right padding overlaps the 594px
   column — so the pair sums to the 1260 container exactly. */
.icons-legacy__media {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 350px;
  padding: 6px 6px 0 0;
}

.icons-legacy__media img {
  width: min(520.5px, 100%);
  height: auto;
}

.icons-legacy__text {
  flex: 0 1 594px;
  display: flex;
  flex-direction: column;
  gap: 31px;
}

.icons-legacy__body {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.icons-legacy__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.125vw, 45px);
  line-height: 1.0667; /* 48.001 / 45 */
  text-transform: uppercase;
  color: var(--orange);
}

.icons-legacy__body p {
  width: min(100%, 571px);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.47; /* 24.99 / 17 */
  color: var(--grey-lede);
}

.icons-legacy__text .btn { align-self: flex-start; }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .icon-models,
  .icons-legacy {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
  }

  .icon-models__list,
  .icon-models__panels,
  .icons-legacy__media,
  .icons-legacy__text { flex: 1 1 auto; }

  /* The names have to wrap once they no longer own half the canvas. */
  .icon-model {
    height: auto;
    padding: 18px 0;
    white-space: normal;
  }

  .icon-model[aria-selected='true'] { padding-left: 16px; }

  .icons-legacy__media {
    min-height: 0;
    padding: 0;
  }
}

@media (max-width: 640px) {
  .icon-model {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

/* ==========================================================================
   Our Heritage — Racing Heritage
   Figma: Jamie_Working-file / node 2227-197
   ========================================================================== */

.racing-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  min-height: clamp(420px, 54.1vw, 780px);
  padding-block: 48px;
  background-image: linear-gradient(var(--hero-scrim), var(--hero-scrim)),
    url('assets/images/dna/racing-hero.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 42%;
  background-color: #0b0b0d;
  text-align: center;
  color: var(--white);
}

.racing-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: min(100% - 48px, 1181px);
}

.racing-hero__headings {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.racing-hero__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.78vw, 40px);
  line-height: 1;
  letter-spacing: 2px;
  color: var(--orange);
}

.racing-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5.56vw, 80px);
  line-height: 1;
  text-transform: uppercase;
}

.racing-hero__title-accent { color: var(--orange); }

.racing-hero__lede {
  width: min(100%, 785px);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.32vw, 19px);
  line-height: 1.579; /* 30 / 19 */
}

/* Page body ---------------------------------------------------------------- */
.racing-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
  margin-top: var(--gap-section);
}

/* .cta carries the home page's own top margin; the flex gap already supplies it. */
.racing-body .cta { margin-top: 0; }

/* Shared section furniture ------------------------------------------------- */
.racing-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.39vw, 20px);
  line-height: 1.2; /* 24 / 20 */
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--black);
}

.racing-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.125vw, 45px);
  line-height: 1.0667; /* 48.001 / 45 */
  text-transform: uppercase;
  color: var(--orange);
}

.racing-heading--center { text-align: center; }

.racing-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.racing-intro__headings {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Figma wraps this pair's label onto two lines inside a 436px box, but lets
   the heading break out of it on one line. */
.racing-intro__headings--narrow { width: min(100%, 436px); }
.racing-intro__headings--narrow .racing-heading { white-space: nowrap; }

.racing-intro__copy {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.47; /* 24.99 / 17 */
  color: var(--grey-body);
}

.racing-intro__copy--wide { width: min(100%, 1129px); }

/* Grand Prix Racing -------------------------------------------------------- */
.racing-gp {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.racing-t26c {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.racing-t26c__lead {
  flex: 0 1 448px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.racing-t26c__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.125vw, 45px);
  line-height: 1.0667;
  text-transform: uppercase;
  color: var(--black);
}

/* Measure capped so the lead copy sets in four lines under the title. */
.racing-t26c__lead p { max-width: 46ch; }

.racing-t26c__lead p,
.spec__copy {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.47;
  color: var(--grey-body);
}

.racing-specs {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}

/* The basis belongs on the row's own children. Putting it on .spec sized the
   blocks along the stack's vertical main axis instead of across. */
.racing-specs > * { flex: 0 1 310.5px; }

.racing-specs__stack {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

/* Figma indents only the spec headings, not their copy — the indent carries the
   orange marker bar, same device as the rail labels elsewhere. */
.spec__title {
  padding-left: 15px;
  border-left: 3px solid var(--orange);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.39vw, 20px);
  line-height: 1.2;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--black);
}

/* Same title-to-copy rhythm as the T26C lead column (16px). */
.spec__copy { padding-top: 16px; }

/* Fangio band -------------------------------------------------------------
   Same construction as the vision page's Design Philosophy splits: two rows
   that alternate side, each an even half/half with one 64px gutter carried by
   the flex gap rather than padding inside the copy. */
.racing-fangio {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.racing-band {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.racing-band__row {
  display: flex;
  align-items: center;
  gap: 64px;
}

/* Even halves: basis 0 on both sides, so copy and plate each take exactly half
   the row whatever the width. Both plates cover-crop the same box, so the two
   rows stay identical to each other. */
.racing-band__media {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 5 / 3;
}

.racing-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.racing-band__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
}

.racing-band__text p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.47;
  color: var(--grey-body);
}

/* Pilots & Champions ------------------------------------------------------- */
.racing-pilots {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Three tracks; the trailing two cards fall into the first two columns, which
   is exactly how the Figma frame leaves them. */
.pilots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 375px));
  justify-content: space-between;
  row-gap: 124px;
}

.pilot {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.pilot__portrait {
  width: min(292px, 100%);
  aspect-ratio: 1;
  object-fit: cover;
}

.pilot__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pilot__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(21px, 1.77vw, 25.5px);
  line-height: 1.2; /* 30.6 / 25.5 */
  text-transform: uppercase;
  color: var(--orange);
}

/* The blank paragraph Figma uses between these is one 24.99px line. */
.pilot__text p {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.47;
  color: var(--grey-lede);
}

.pilot__text p + p { margin-top: 0.99px; }

/* Engineering Marvels ------------------------------------------------------ */
.racing-marvels {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.marvels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.marvels__col {
  flex: 0 1 280px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.marvels__col--end { text-align: right; }

/* 500px plate + Figma's 44px gutters. The basis has to carry the padding too,
   since box-sizing is border-box everywhere here. */
.marvels__media {
  flex: 0 1 588px;
  padding-inline: 44px;
}

.marvels__media img {
  width: 100%;
  height: auto;
}

/* Figma gives the icon a 56.656px band with the glyph pinned to its top. */
.marvel__icon {
  height: auto;
  margin-bottom: 24.656px;
}

.marvels__col--end .marvel__icon { margin-left: auto; }

.marvel__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.39vw, 20px);
  line-height: 1.2;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--orange);
}

.marvel__copy {
  padding-top: 10px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.47;
  color: var(--grey-body);
}

/* The Legacy in Motorsport ------------------------------------------------- */
.racing-legacy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.racing-legacy__media {
  flex: 0 1 620px;
  aspect-ratio: 620 / 575;
}

.racing-legacy__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
}

.racing-legacy__text {
  flex: 0 1 560px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.racing-legacy__title { line-height: 1; /* 45 / 45 */ }

.racing-legacy__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
}

.racing-legacy__body p {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.47;
  color: var(--grey-lede);
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1180px) {
  .racing-specs { gap: 48px; }
  .marvels { gap: 16px; }
  .marvels__media { padding-inline: 16px; }
}

@media (max-width: 1024px) {
  .racing-t26c,
  .racing-legacy {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .racing-t26c__lead,
  .racing-legacy__media,
  .racing-legacy__text { flex: 1 1 auto; }

  .racing-band__row,
  .racing-band__row--flip {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  /* Keep the plate above its copy on both rows once they stack. */
  .racing-band__row--flip .racing-band__media { order: -1; }

  .racing-band__media { flex: 1 1 auto; }

  .pilots {
    grid-template-columns: repeat(2, minmax(0, 375px));
    justify-content: start;
    gap: 64px 48px;
  }

  /* Grid, not wrapped flex: only grid-column can genuinely give the plate its
     own row. A flex item's max-width clamps its hypothetical size, so a 100%
     basis still fits beside a column and never breaks the line. */
  .marvels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
  }

  .marvels__media {
    order: -1;
    grid-column: 1 / -1;
    justify-self: center;
    width: min(500px, 100%);
    padding-inline: 0;
  }

  .marvels__col { gap: 40px; }

  .marvels__col--end { text-align: left; }
  .marvels__col--end .marvel__icon { margin-left: 0; }
}

@media (max-width: 640px) {
  .racing-specs {
    flex-direction: column;
    gap: 42px;
  }

  /* The 310.5px basis is a column WIDTH in the row layout; once stacked it
     becomes a height and pads 85-130px of dead space under Agility. */
  .racing-specs > * { flex: 0 0 auto; }

  .pilots {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
  }

  .marvels {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

/* ==========================================================================
   The Revival — T800P
   Figma: Jamie_Working-file / node 2233-510
   ========================================================================== */

/* Hero --------------------------------------------------------------------
   Sits on a black section rather than running to the viewport edge: the plate
   is 1445px inside an 864px band, so the black shows through at wide sizes. */
.revival-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  min-height: clamp(480px, 59.9vw, 864px);
  padding-block: 64px;
  background-image: linear-gradient(var(--hero-scrim), var(--hero-scrim)),
    url('assets/images/revival/t800p-hero.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: var(--black);
  text-align: center;
  color: var(--white);
}

.revival-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  width: min(100% - 48px, 958px);
}

.revival-hero__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.78vw, 40px);
  line-height: 1;
  letter-spacing: 2px;
  color: var(--orange);
}

.revival-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 5.56vw, 80px);
  line-height: 1;
  text-transform: uppercase;
}

.revival-hero__title-accent { color: var(--orange); }

.revival-hero__lede {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.32vw, 19px);
  line-height: 1.579; /* 30 / 19 */
}

/* 32px below the copy block, against the 19px that separates the lines. */
/* Page body ---------------------------------------------------------------- */
.revival-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
  margin-top: var(--gap-section);
}

.revival-body .cta { margin-top: 0; }

/* Control statement -------------------------------------------------------- */
.revival-statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: min(100%, 1212px);
  margin-inline: auto;
}

.revival-statement__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.revival-statement__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.125vw, 45px);
  line-height: 1.0667; /* 48.001 / 45 */
  text-transform: uppercase;
  text-align: center;
  color: var(--orange);
}

.revival-statement__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(100%, 1140px);
  padding-top: 10px;
  text-align: center;
}

.revival-statement__copy p {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.47; /* 24.99 / 17 */
  color: #9c9c9c;
}

/* "usable horsepower" — emphasis carried by colour and italics. */
.revival-statement__copy em {
  font-style: italic;
  color: var(--orange);
}

.revival-statement__maxim {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.08vw, 30px);
  line-height: 1.2; /* 36 / 30 */
  text-transform: uppercase;
  text-align: center;
  color: var(--black);
}

.revival-statement__maxim-accent { color: var(--orange); }

/* Specifications panel ----------------------------------------------------- */
.spec-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: min(100%, 700px);
  margin-inline: auto;
  padding: 70px 24px;
  background: var(--black);
  border: 2px solid var(--orange);
}

.spec-panel__headings {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Figma sets both of these black on a black panel, which hides them. They
   share one caption treatment so the card is bracketed top and bottom. */
.spec-panel__label,
.spec-panel__note {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  line-height: 24.99px;
  letter-spacing: 3.8px;
  text-transform: uppercase;
  text-align: center;
  color: var(--orange);
}

.spec-panel__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.125vw, 45px);
  line-height: 1.0667;
  text-transform: uppercase;
  color: var(--white);
}

.spec-list {
  width: min(100%, 534.458px);
  border-top: 0.667px solid rgba(255, 255, 255, 0.06);
}

.spec-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 12px 32px 12.667px;
  border-bottom: 0.667px solid rgba(255, 255, 255, 0.06);
  transition: background-color 0.2s ease;
}

/* Same marker as the Continuum spec table, lightened for the dark card. */
.spec-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--orange);
  transform: scaleY(0);
  transition: transform 0.2s ease;
}

.spec-row:hover { background: rgba(255, 255, 255, 0.06); }
.spec-row:hover::before { transform: scaleY(1); }

.spec-row__no {
  flex: 0 0 52px;
  padding-right: 28px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 24.99px;
  letter-spacing: 2.4px;
  color: var(--orange);
}

.spec-row__text {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 24.99px;
  letter-spacing: 0.6px;
  color: var(--white);
}

/* Reads as the card's own heading rather than a footnote, so it carries more
   size and weight and much less tracking than the note below. */
.spec-panel__label {
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 1.4px;
}

.spec-panel__note {
  padding-top: 10px;
  color: var(--white);
}

/* Callout diagram ---------------------------------------------------------- */
.callouts {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
  padding-block: 40px;
}

.callouts__col {
  flex: 0 1 300px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.callouts__col--end { text-align: right; }

.callouts__media {
  flex: 0 1 580px;
  aspect-ratio: 580 / 386.667;
}

.callouts__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.callout__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 24.99px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--orange);
}

/* The 28px rule under each label, drawn on the label's outer edge. */
.callout__label::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  margin-top: 10px;
  background: var(--orange);
}

.callouts__col--end .callout__label::after { margin-left: auto; }

.callout__title {
  padding-top: 25px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.39vw, 20px);
  line-height: 1.2; /* 24 / 20 */
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--black);
}

.callout__copy {
  padding-block: 10px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12px;
  line-height: 1.5; /* 18 / 12 */
  color: #9c9c9c;
}

/* Leader lines ------------------------------------------------------------
   Figma stacks these as absolute layers over the three columns, at
   coordinates that only hold at the 1260px design width. They carry no
   meaning once the columns stack, so the layer is dropped rather than
   rescaled. */
.leaders {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.leaders__i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  max-width: none;
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1180px) {
  .leaders { display: none; }

  .callouts {
    flex-wrap: wrap;
    justify-content: center;
    gap: 48px;
  }

  .callouts__media {
    order: -1;
    flex: 0 0 100%;
    aspect-ratio: auto;
  }

  .callouts__media img { height: auto; }

  .callouts__col { flex: 1 1 300px; }
  .callouts__col--end { text-align: left; }
  .callouts__col--end .callout__label::after { margin-left: 0; }
}

@media (max-width: 860px) {
  .spec-panel { padding: 48px 20px; }
  .spec-row { padding-inline: 12px; }
}

@media (max-width: 640px) {
  .callouts { gap: 40px; }
  .callouts__col { flex: 1 1 100%; }
  .revival-hero__lede { gap: 8px; }
}

/* ==========================================================================
   The Revival — The Ghosts of Le Mans
   Figma: Jamie_Working-file / node 2233-677
   ========================================================================== */

.ghosts-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  min-height: clamp(460px, 62.4vw, 900px);
  padding-block: 64px;
  background-image: linear-gradient(var(--hero-scrim), var(--hero-scrim)),
    url('assets/images/revival/continuum-hero.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left center;
  background-color: #0b0b0d;
  text-align: center;
  color: var(--white);
}

.ghosts-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: min(100% - 48px, 786px);
}

.ghosts-hero__headings {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 23px;
}

.ghosts-hero__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.78vw, 40px);
  line-height: 1;
  letter-spacing: 2px;
  color: var(--orange);
}

/* Two stacked lines with a 3px gap, not a wrapped single line. */
.ghosts-hero__title {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 5.56vw, 80px);
  line-height: 1;
}

.ghosts-hero__title-accent { color: var(--orange); }

.ghosts-hero__lede {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.32vw, 19px);
  line-height: 1.579; /* 30 / 19 */
}

/* Page body ---------------------------------------------------------------- */
.ghosts-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
  margin-top: var(--gap-section);
}

.ghosts-body .cta { margin-top: 0; }

/* Shared ------------------------------------------------------------------- */
.ghosts-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  line-height: 19.89px;
  letter-spacing: 0.65px;
  text-transform: uppercase;
  color: var(--black);
}

.ghosts-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.125vw, 45px);
  line-height: 1.0667; /* 48.001 / 45 */
  text-transform: uppercase;
  color: var(--orange);
}

.ghosts-prose {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ghosts-prose p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.47; /* 24.99 / 17 */
  color: var(--grey-body);
}

/* Figma marks these phrases Sarabun Bold Italic in near-black, not orange. */
.ghosts-prose em {
  font-weight: 700;
  font-style: italic;
  color: var(--black);
}

/* Numbered section title --------------------------------------------------
   Wraps the split so the title spans both columns instead of becoming a
   third flex item beside them. */
.ghosts-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The columns' original 40px top inset was Figma's spacing for a section with
   no title above it; the rule now does that job. */
.ghosts-section .ghosts-split__lead,
.ghosts-section .ghosts-specs { padding-top: 0; }

/* The rule hangs off the title itself, so it always spans the full section
   width regardless of how long the label is. */
.ghosts-section-title {
  padding-bottom: 16px;
  border-bottom: 3px solid var(--orange);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.39vw, 20px);
  line-height: 1.2;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-align: center;
  color: var(--orange);
}

/* Carbon monocoque split --------------------------------------------------- */
.ghosts-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.ghosts-split__lead {
  flex: 0 1 520px;
  display: flex;
  flex-direction: column;
  gap: 15.594px;
  padding-top: 40px;
}

.ghosts-split__lead .ghosts-label { margin-bottom: -5.594px; }

/* Column pull-quote -------------------------------------------------------
   Borrows the orange left rule from this page's rail markers so it reads as
   part of the same family, at a weight that sits inside a text column rather
   than competing with the full-width quote further down. */
.ghosts-pullquote {
  margin-top: 14px;
  padding-left: 20px;
  border-left: 2.667px solid var(--orange);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 1.53vw, 22px);
  line-height: 1.36;
  color: var(--orange);
}

/* Spec table --------------------------------------------------------------
   Figma's row rules are rgba(0,0,0,0) — the rhythm comes from the 60.323px
   row height alone, so there is deliberately nothing to draw. */
.ghosts-specs {
  flex: 0 1 520px;
  padding-top: 40px;
}

.ghosts-specs__row {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  min-height: 60.323px;
  padding-top: 16px;
  /* Bleeds left into the column gutter so the hover wash reads as a band,
     without shifting the text off the design's alignment. */
  padding-left: 16px;
  margin-left: -16px;
  transition: background-color 0.2s ease;
}

/* Orange marker grows from the row's centre line — a pseudo-element, so
   nothing reflows on hover. */
.ghosts-specs__row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--orange);
  transform: scaleY(0);
  transition: transform 0.2s ease;
}

.ghosts-specs__row:hover { background: rgba(255, 77, 35, 0.05); }
.ghosts-specs__row:hover::before { transform: scaleY(1); }
.ghosts-specs__row:hover dd { color: var(--orange); }

.ghosts-specs__row dt {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 24.99px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--orange);
}

.ghosts-specs__row dd {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 24.99px;
  text-align: right;
  color: var(--black);
  transition: color 0.2s ease;
}

/* Combustion --------------------------------------------------------------
   Top-aligned, not centred, so the two column rules line up with each other. */
.ghosts-combustion {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 40px;
}

/* A rule capping its own column, with the label sitting under it. */
.ghosts-column-title {
  padding-top: 12px;
  border-top: 3px solid var(--orange);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  line-height: 19.89px;
  letter-spacing: 0.65px;
  text-transform: uppercase;
  color: var(--orange);
}

.ghosts-combustion__aside {
  flex: 0 1 342px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* The markers space themselves across whatever height the copy column sets,
   so the rhythm stays even instead of relying on a fixed 128px that only
   suited the labels before they gained glyphs. 48px is the floor. */
.ghosts-rail {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}

.ghosts-rail li,
.legacy-stats li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

/* The orange bar belongs to the small label, not to the glyph above it. */
.rail-label {
  padding-left: 2.667px;
  border-left: 2.667px solid var(--orange);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.6px;
  line-height: 1;
  letter-spacing: 0.68px;
  text-transform: uppercase;
  color: var(--grey-body);
}

/* Outlined display glyph. Filled grey is the fallback — with an unsupported
   stroke, transparent text would simply vanish. */
.rail-glyph {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 3.47vw, 50px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: #8d8d8d;
}

@supports (-webkit-text-stroke: 1px #000) {
  .rail-glyph {
    color: transparent;
    -webkit-text-stroke: 1px #8d8d8d;
  }
}

.rail-glyph sub {
  font-size: 0.55em;
  vertical-align: baseline;
  bottom: 0;
}

.ghosts-combustion__text {
  flex: 0 1 799px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ghosts-combustion__headings {
  display: flex;
  flex-direction: column;
  gap: 21.531px;
}

.ghosts-combustion__text .ghosts-heading { width: min(100%, 718px); }
.ghosts-prose--tight p { width: min(100%, 718px); }

/* Pull quote --------------------------------------------------------------- */
.ghosts-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: min(100%, 770px);
  margin-inline: auto;
  text-align: center;
}

.ghosts-quote blockquote p {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.125vw, 45px);
  line-height: 1.2; /* 54 / 45 */
  color: var(--orange);
}

.ghosts-quote figcaption {
  padding-top: 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 12px;
  line-height: 24.99px;
  letter-spacing: 2.38px;
  text-transform: uppercase;
  color: var(--orange);
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .ghosts-split,
  .ghosts-combustion {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .ghosts-split__lead,
  .ghosts-specs,
  .ghosts-combustion__aside,
  .ghosts-combustion__text { flex: 1 1 auto; }

  .ghosts-specs { padding-top: 0; }

  /* The vertical ladder only reads against the tall text column beside it. */
  .ghosts-rail {
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 24px 40px;
  }
}

@media (max-width: 640px) {
  .ghosts-specs__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 0;
    padding-top: 20px;
  }

  .ghosts-specs__row dd { text-align: left; }

  .ghosts-rail { flex-direction: column; gap: 16px; }
}

/* ==========================================================================
   Contact
   Figma: Jamie_Working-file / node 2280-583
   ========================================================================== */

/* This hero clears the header by 7px rather than sitting flush like the rest. */
.contact-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 7px;
  min-height: clamp(360px, 53.2vw, 767px);
  padding: 48px 24px;
  background-image: linear-gradient(var(--hero-scrim), var(--hero-scrim)),
    url('assets/images/contact/hero.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #0b0b0d;
  text-align: center;
  color: var(--white);
}

.contact-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5.56vw, 80px);
  line-height: 1;
  text-transform: uppercase;
}

.contact-hero__title-accent { color: var(--orange); }

/* Page body ---------------------------------------------------------------- */
.contact-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 21px;
  margin-block: var(--gap-section);
}

.contact-intro {
  flex: 0 1 539px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-intro__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.125vw, 45px);
  line-height: 1.0667; /* 48.001 / 45 */
  text-transform: uppercase;
  color: var(--orange);
}

.contact-intro p,
.contact-intro__list {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.47; /* 24.99 / 17 */
  color: var(--grey-lede);
}

/* Orange asterisk markers; the list is ul/list-style:none site-wide, so the
   glyph is drawn as a marker box rather than a list-style-type. */
.contact-intro__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-intro__list li {
  display: flex;
  gap: 10px;
}

.contact-intro__list li::before {
  content: '\2731'; /* heavy asterisk */
  flex: none;
  font-size: 0.8em;
  line-height: inherit;
  color: var(--orange);
}

.contact-intro__close { color: var(--black); }

/* Form --------------------------------------------------------------------- */
.contact-form {
  flex: 0 1 700px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}

/* Figma's uniform 8px rhythm left every label equidistant from its own control
   and from the field above it. Tight to its input, loose between groups. */
.contact-form__fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.field__input + .field__label { margin-top: 18px; }

.field__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  line-height: 19.89px;
  letter-spacing: 0.65px;
  text-transform: uppercase;
  color: var(--black);
}

.field__input {
  width: 100%;
  height: 44px;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 2px solid var(--grey-rule);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--black);
  transition: border-color 0.2s ease;
}

.field__input:focus-visible {
  outline: 0;
  border-bottom-color: var(--orange);
}

.field__input--area {
  height: 88px;
  padding-top: 6px;
  resize: vertical;
}

/* Native select, restyled: keeps keyboard and mobile behaviour that a div
   cannot. Figma's exported chevron is placed on the trailing edge — the
   frame puts it at left:0, which reads as an export artefact since it would
   sit under the value text. */
.field__input--select {
  appearance: none;
  padding-right: 24px;
  /* Inline SVG data URI: no request, scales cleanly, and recolours by editing
     the stroke here rather than re-exporting a PNG. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 11 6' fill='none'%3E%3Cpath d='M1 1l4.5 4L10 1' stroke='%23000' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 11px 6px;
  cursor: pointer;
}

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .contact-body {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
  }

  .contact-intro,
  .contact-form { flex: 1 1 auto; }

  .contact-form .btn { align-self: flex-start; }
}

@media (max-width: 640px) {
  .contact-form { gap: 32px; }
  .field__input { font-size: 16px; } /* keep iOS from zooming on focus */
}

/* ==========================================================================
   404 — Page Not Found
   Same full-bleed hero construction as the other pages, on the shared scrim
   token and type scale. Only the code numeral and the link cards are new.
   ========================================================================== */

.error-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  min-height: clamp(420px, 54.1vw, 780px);
  padding: 48px 24px;
  background-image: linear-gradient(var(--hero-scrim), var(--hero-scrim)),
    url('assets/images/revival/continuum-hero.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #0b0b0d;
  text-align: center;
  color: var(--white);
}

.error-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(100%, 785px);
}

/* Outlined numeral, the same device as the Continuum rail glyphs. */
.error-hero__code {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(80px, 11.11vw, 160px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
}

@supports (-webkit-text-stroke: 1px #fff) {
  .error-hero__code {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.65);
  }
}

.error-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5.56vw, 80px);
  line-height: 1;
  text-transform: uppercase;
}

.error-hero__title-accent { color: var(--orange); }

.error-hero__lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.32vw, 19px);
  line-height: 1.579;
}

.error-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

/* Where to next ------------------------------------------------------------ */
.error-links {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-block: var(--gap-section);
}

.error-links__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.error-links__grid a {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 24px;
  border-top: 3px solid var(--orange);
  background: #f5f5f5;
  transition: background-color 0.2s ease;
}

.error-links__grid a:hover,
.error-links__grid a:focus-visible { background: #ebebeb; }

.error-link__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  line-height: 19.89px;
  letter-spacing: 0.65px;
  text-transform: uppercase;
  color: var(--orange);
}

.error-link__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.39vw, 20px);
  line-height: 1.2;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--black);
}

@media (max-width: 860px) {
  .error-links__grid { grid-template-columns: minmax(0, 1fr); }
}