/* Fuel 1 Team Racing — design system (2026 redesign)
   American racing pride · offshore speed · real people · a professional fuel network.
   Bright sections carry the page; navy bands and photography carry the drama; red marks actions. */

:root {
  /* Palette sampled from the Fuel 1 Racing logo (navy #001848, red), team jerseys and the #55 deck (royal #1830B0),
     and the logo outline / jersey trim (steel blue #7890C0). */
  --navy: #0A1C46;
  --navy-deep: #06122E;
  --navy-2: #12295C;
  --navy-3: #1B3A78;
  --royal: #1E3FAE;
  --royal-2: #2F55CC;
  --sky: #9FB2DA;
  --red: #C8202F;
  --red-dark: #A3172A;
  --white: #FFFFFF;
  --light: #EEF2F8;
  --light-2: #E1E7F1;
  --steel: #4B5A78;
  --steel-2: #8D9AB5;
  --line: #D3DBE8;
  --ink: #0C1733;
  --ink-2: #3A4766;
  --ok: #1E7A46;
  --warn: #A35A00;

  --f-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --f-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --gutter: 16px;
  --max: 1240px;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(10, 28, 70, .06), 0 8px 24px rgba(10, 28, 70, .08);
  --shadow-lg: 0 24px 60px rgba(10, 28, 70, .24);
  --header-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; --header-h: 76px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--white); color: var(--ink);
  font: 400 1rem/1.6 var(--f-body); font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--royal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible, .site-footer :focus-visible, .hero :focus-visible { outline-color: #fff; }
::selection { background: var(--red); color: #fff; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--red); color: #fff; padding: 10px 16px; font-weight: 700; border-radius: var(--radius); }
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.02; letter-spacing: .005em; margin: 0 0 .5em; color: inherit; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5.4rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; }
h2 { font-size: clamp(1.9rem, 1.35rem + 2.1vw, 3rem); text-transform: uppercase; }
h3 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.75rem); }
h4 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em; }
p { margin: 0 0 1em; text-wrap: pretty; }
.lede { font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.on-dark .lede { color: #DCE4F2; }
.muted { color: var(--steel); }
.small { font-size: .875rem; }
.tiny { font-size: .78rem; }
.kicker {
  display: inline-flex; align-items: center; gap: .55em; margin: 0 0 1rem;
  font: 700 .8rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--red);
}
.kicker::before { content: ""; width: 26px; height: 10px; flex: none; background:
  linear-gradient(var(--red) 0 0) 0 0/100% 2px no-repeat,
  linear-gradient(var(--red) 0 0) 0 4px/100% 2px no-repeat,
  linear-gradient(var(--red) 0 0) 0 8px/100% 2px no-repeat; }
.on-dark .kicker { color: #fff; }
.on-dark .kicker::before { background:
  linear-gradient(var(--red) 0 0) 0 0/100% 2px no-repeat,
  linear-gradient(#fff 0 0) 0 4px/100% 2px no-repeat,
  linear-gradient(var(--red) 0 0) 0 8px/100% 2px no-repeat; }
.num { font-family: var(--f-display); font-weight: 800; font-style: italic; letter-spacing: -.01em; }
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin: .3em 0; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: calc(860px + var(--gutter) * 2); }
.section { padding: clamp(34px, 2.2vw + 18px, 62px) 0; position: relative; }
.section-tight { padding: clamp(24px, 1.4vw + 14px, 40px) 0; }
.bg-light { background: var(--light); }
.bg-navy { background: var(--navy); color: #fff; }
.bg-royal { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, var(--royal) 130%); color: #fff; }
.bg-mist { background: var(--light-2); }
.bg-royal a:not(.btn) { color: #fff; }
.bg-navy a:not(.btn) { color: #fff; }
.bg-white { background: #fff; }
.on-dark { color: #fff; }
.section-head { display: grid; gap: 8px 32px; margin-bottom: clamp(16px, 1.6vw, 26px); }
@media (min-width: 900px) { .section-head.split { grid-template-columns: 1.1fr 1fr; align-items: end; } .section-head.split p { margin: 0; } }
.section-head h2 { margin: 0; }
.grid { display: grid; gap: clamp(14px, 1.5vw, 22px); }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.stack > * + * { margin-top: 1rem; }
.split { display: grid; gap: clamp(18px, 2.6vw, 40px); align-items: center; }
@media (min-width: 900px) { .split-6040 { grid-template-columns: 1.25fr 1fr; } .split-4060 { grid-template-columns: 1fr 1.25fr; } .split-5050 { grid-template-columns: 1fr 1fr; } }

/* ---------- flag motifs ---------- */
.flag-rule { height: 10px; display: grid; grid-template-columns: minmax(120px, 18%) 1fr; }
.flag-rule::before { content: ""; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Cpath fill='%23fff' d='M7 1.6l.9 1.9 2 .2-1.5 1.4.4 2-1.8-1-1.8 1 .4-2L3.1 3.7l2-.2z'/%3E%3C/svg%3E") 0 0/14px 10px repeat-x; }
.flag-rule::after { content: ""; background: repeating-linear-gradient(180deg, var(--red) 0 2px, #fff 2px 4px); }
.stars-bg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath fill='%23ffffff' fill-opacity='.07' d='M14 6l2.1 4.5 4.9.5-3.7 3.3 1 4.8L14 16.6 9.7 19.1l1-4.8L7 11l4.9-.5zM42 34l2.1 4.5 4.9.5-3.7 3.3 1 4.8-4.3-2.5-4.3 2.5 1-4.8L35 39l4.9-.5z'/%3E%3C/svg%3E"); }
.stripe-edge { position: relative; }
.stripe-edge::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--red) 0 33.3%, #fff 33.3% 66.6%, var(--navy-3) 66.6%); }
.star { width: 1em; height: 1em; display: inline-block; vertical-align: -.12em; fill: currentColor; }

/* ---------- buttons ---------- */
.btn {
  --b: var(--red); --c: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: 12px 22px;
  background: var(--b); color: var(--c); border: 2px solid var(--b); border-radius: var(--radius);
  font: 700 .95rem/1.1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { --b: var(--red-dark); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn-navy { --b: var(--navy); }
.btn-navy:hover { --b: var(--navy-3); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-ghost:hover { background: var(--navy); color: #fff; }
.on-dark .btn-ghost, .btn-ghost.light { color: #fff; border-color: rgba(255,255,255,.7); }
.on-dark .btn-ghost:hover, .btn-ghost.light:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn-white { --b: #fff; --c: var(--navy); }
.btn-white:hover { --b: var(--light-2); color: var(--navy); }
.btn-sm { min-height: 40px; padding: 8px 14px; font-size: .82rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn .i { width: 1.1em; height: 1.1em; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link-arrow { font-weight: 700; text-decoration: none; display: inline-flex; gap: .4em; align-items: center; color: var(--navy); }
.link-arrow::after { content: "→"; transition: transform .2s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }
.on-dark .link-arrow { color: #fff; }
.ext-note { font-size: .78rem; color: var(--steel); }
.on-dark .ext-note { color: #B7C3D3; }
a[data-handoff]::after, .handoff::after { content: "↗"; font-weight: 400; margin-left: .15em; }
.btn[data-handoff]::after { margin-left: 0; }
.i { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- header ---------- */
.util-bar { background: var(--navy-deep); color: var(--sky); font-size: .78rem; }
.util-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; }
.util-bar a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; }
.util-bar .i { width: 15px; height: 15px; }
.util-bar .util-left span { display: inline-flex; align-items: center; gap: 6px; }
.util-bar a:hover { color: #fff; text-decoration: underline; }
.util-bar .util-left { display: none; gap: 18px; }
.util-bar .util-right { display: flex; gap: 18px; margin-left: auto; align-items: center; }
@media (min-width: 900px) { .util-bar .util-left { display: flex; } }
.util-bar .sep { opacity: .4; }

.site-header { position: sticky; top: 0; z-index: 60; background: var(--navy); color: #fff; box-shadow: 0 6px 18px rgba(6, 18, 46, .18); }
.site-header .wrap { display: flex; align-items: center; gap: 16px; height: var(--header-h); }
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand-logo { width: auto; height: calc(var(--header-h) - 26px); max-width: 56vw; aspect-ratio: 800 / 183; object-fit: contain; }
.site-header .flag-rule { height: 4px; }

.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); border-radius: var(--radius); cursor: pointer; }
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { display: block; width: 22px; height: 2px; background: #fff; position: relative; transition: transform .2s var(--ease), background .2s; }
.nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle .bars::before { top: -7px; } .nav-toggle .bars::after { top: 7px; }
.nav-open .nav-toggle .bars { background: transparent; }
.nav-open .nav-toggle .bars::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle .bars::after { transform: translateY(-7px) rotate(-45deg); }

.site-nav { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.nav-cta { display: none; }
@media (max-width: 1099.98px) {
  .site-nav.is-open {
    display: block; position: fixed; inset: var(--nav-top, var(--header-h)) 0 0 0; z-index: 59; overflow-y: auto; overscroll-behavior: contain;
    background: var(--navy); color: #fff; padding: 20px var(--gutter) 48px;
  }
  .site-nav .nav-search { margin-bottom: 18px; }
  .site-nav > ul > li { border-bottom: 1px solid rgba(255,255,255,.12); }
  .site-nav .top-link, .site-nav summary { display: flex; justify-content: space-between; align-items: center; min-height: 56px; color: #fff; text-decoration: none; font: 700 1.5rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; cursor: pointer; list-style: none; }
  .site-nav summary::-webkit-details-marker { display: none; }
  .site-nav summary::after { content: "+"; font-size: 1.6rem; font-weight: 400; }
  .site-nav details[open] summary::after { content: "–"; }
  .site-nav .sub { padding: 0 0 14px 2px; }
  .site-nav .sub a { display: block; padding: 10px 0; color: #D6DEE9; text-decoration: none; }
  .site-nav .sub a:hover { color: #fff; }
  .site-nav .sub .sub-desc { display: none; }
  .site-nav .mobile-extra { margin-top: 22px; display: grid; gap: 12px; }
}
@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; align-self: stretch; }
  .site-nav > ul { display: flex; height: 100%; align-items: stretch; gap: 2px; }
  .site-nav > ul > li { position: relative; display: flex; }
  .site-nav .top-link, .site-nav summary {
    display: flex; align-items: center; gap: 6px; padding: 0 9px; height: 100%; cursor: pointer; list-style: none;
    font: 700 .82rem/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-decoration: none; white-space: nowrap;
    border-bottom: 3px solid transparent; transition: border-color .2s, color .2s;
  }
  .site-nav summary::-webkit-details-marker { display: none; }
  .site-nav summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 4px; }
  .site-nav .top-link:hover, .site-nav summary:hover, .site-nav details[open] summary, .site-nav [aria-current="page"], .site-nav .is-section > summary { border-bottom-color: var(--red); color: #fff; }
  .site-nav .top-link:hover, .site-nav summary:hover { background: rgba(255,255,255,.06); }
  .site-nav details { display: flex; }
  .site-nav .sub {
    position: absolute; top: 100%; left: -8px; min-width: 300px; background: #fff; box-shadow: var(--shadow-lg); padding: 10px; border-top: 4px solid var(--red);
  }
  .site-nav .sub a { display: block; padding: 10px 14px; border-radius: var(--radius); text-decoration: none; color: var(--navy); font-weight: 700; }
  .site-nav .sub a:hover { background: var(--light); color: var(--red); }
  .site-nav .sub .sub-desc { display: block; font-weight: 400; font-size: .82rem; color: var(--steel); margin-top: 2px; }
  .site-nav .nav-search, .site-nav .mobile-extra { display: none; }
  .nav-cta { display: inline-flex; }
}

.search-form { display: flex; gap: 0; width: 100%; }
.search-form input { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 2px solid var(--line); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); background: #fff; color: var(--ink); }
.search-form button { height: 48px; padding: 0 16px; border: 0; background: var(--red); color: #fff; border-radius: 0 var(--radius) var(--radius) 0; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.search-form input:focus { outline: none; border-color: var(--navy-3); }

/* ---------- hero ---------- */
.hero { position: relative; color: #fff; background: var(--navy); overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,28,70,.15) 0%, rgba(10,28,70,.05) 35%, rgba(10,28,70,.78) 78%, rgba(10,28,70,.96) 100%); }
@media (min-width: 900px) { .hero::before { background:
  linear-gradient(90deg, rgba(10,28,70,.86) 0%, rgba(10,28,70,.6) 34%, rgba(10,28,70,.08) 62%, rgba(10,28,70,0) 80%),
  linear-gradient(0deg, rgba(10,28,70,.55) 0%, rgba(10,28,70,0) 30%); } }
.hero-inner { min-height: min(92svh, 860px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: 42svh; padding-bottom: 28px; }
@media (min-width: 900px) { .hero-inner { justify-content: center; padding-top: 56px; padding-bottom: 116px; min-height: min(80vh, 780px); } }
.hero h1 { margin-bottom: .32em; font-size: clamp(2.6rem, 1.3rem + 4.4vw, 5.2rem); text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.hero h1 .line { display: block; }
@media (min-width: 600px) { .hero h1 .line { white-space: nowrap; } }
.hero h1 .accent { color: #fff; font-style: italic; }
.hero h1 .accent .red { color: #FF4B57; -webkit-text-stroke: 0; }
.hero .lede { color: #E7EDF5; max-width: 46ch; }
.hero-badge { align-self: flex-start; display: inline-flex; gap: 10px; align-items: center; margin-bottom: 18px; padding: 7px 12px 7px 8px; background: rgba(10,28,70,.65); border: 1px solid rgba(255,255,255,.22); border-radius: 16px; font: 700 .74rem/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(6px); }
.hero-badge .dot { width: 20px; height: 14px; background: linear-gradient(90deg, var(--navy-3) 40%, transparent 40%), repeating-linear-gradient(180deg, var(--red) 0 2px, #fff 2px 4px); border-radius: 2px; }
.hero-credit { position: absolute; right: var(--gutter); top: 14px; font-size: .72rem; color: rgba(255,255,255,.75); z-index: 1; }
@media (max-width: 899.98px) { .hero-credit { display: none; } }

.paths { position: relative; z-index: 3; }
@media (min-width: 900px) { .paths { margin-top: -96px; } }
.paths-grid { display: grid; gap: 0; background: #fff; box-shadow: var(--shadow-lg); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 900px) { .paths-grid { grid-template-columns: repeat(3, 1fr); } }
.path {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 4px 16px; align-items: center; padding: 22px 22px; text-decoration: none; color: var(--navy);
  border-bottom: 1px solid var(--line); transition: background .2s var(--ease);
}
@media (min-width: 900px) { .path { border-bottom: 0; border-right: 1px solid var(--line); padding: 28px 28px; } .path:last-child { border-right: 0; } }
.path:hover { background: var(--light); color: var(--navy); }
.path .path-n { grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; background: var(--navy); color: #fff; font: 800 italic 1.35rem/1 var(--f-display); border-radius: var(--radius); }
.path:nth-child(2) .path-n { background: var(--red); }
.path strong { font: 700 1.45rem/1.05 var(--f-display); text-transform: uppercase; }
.path span.d { grid-column: 2; font-size: .9rem; color: var(--steel); }
.path .arrow { grid-row: 1 / span 2; grid-column: 3; font-size: 1.4rem; color: var(--red); transition: transform .2s var(--ease); }
.path:hover .arrow { transform: translateX(4px); }

/* page hero (inner pages) */
.page-hero { position: relative; color: #fff; background: var(--navy); overflow: hidden; isolation: isolate; }
.page-hero .ph-media { position: absolute; inset: 0; z-index: -2; }
.page-hero .ph-media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,28,70,.9) 0%, rgba(10,28,70,.66) 42%, rgba(10,28,70,.12) 100%); }
.page-hero.plain { background: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 60%, var(--royal) 140%); }
.page-hero.plain::before { background: none; }
.page-hero .wrap { padding-top: clamp(30px, 3.6vw, 62px); padding-bottom: clamp(28px, 3.2vw, 52px); }
.page-hero h1 { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.2rem); max-width: 18ch; }
.page-hero .lede { color: #DCE4EE; }
.crumbs { font-size: .82rem; margin-bottom: 18px; color: #B9C6D6; }
.crumbs a { color: #fff; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { margin: 0 8px; opacity: .6; }

/* ---------- cards & blocks ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
a.card { text-decoration: none; color: inherit; }
a.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); color: inherit; }
.card .card-media { aspect-ratio: 4 / 3; background: var(--light-2); overflow: hidden; }
.card .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
a.card:hover .card-media img { transform: scale(1.03); }
.card .card-body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card .card-body h3 { margin: 0; }
.card .card-body p { margin: 0; color: var(--ink-2); }
.card .card-foot { margin-top: auto; padding-top: 10px; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 2px; background: var(--light); color: var(--navy); font: 700 .7rem/1.2 var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
.tag.red { background: var(--red); color: #fff; }
.tag.navy { background: var(--navy); color: #fff; }
.tag.ok { background: #E3F2E9; color: var(--ok); }
.tag.warn { background: #FFF1DE; color: var(--warn); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* feature list (services etc.) — editorial rows instead of identical cards */
.rows { border-top: 2px solid var(--navy); }
.row { display: grid; gap: 10px 32px; padding: 26px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .row { grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.3fr) 190px; align-items: start; } .row .row-cta { justify-self: end; } }
.row .row-n { font: 800 italic 2.2rem/1 var(--f-display); color: var(--red); }
.row h3 { margin: 0; }
.row p { margin: 0; color: var(--ink-2); }
.row .row-cta { align-self: center; }
.on-dark .rows { border-top-color: #fff; }
.on-dark .row { border-bottom-color: rgba(255,255,255,.16); }
.on-dark .row p { color: #CBD5E3; }

/* stat strip */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--navy); padding: 20px; }
.stat b { display: block; font: 800 italic clamp(2rem, 1.4rem + 2vw, 3rem)/1 var(--f-display); color: #fff; }
.stat span { font-size: .82rem; color: #B9C6D6; }
.stat b[data-loading] { color: #4D6383; }

/* race number plate */
.plate { position: relative; display: inline-grid; place-items: center; min-width: 2.2em; padding: .05em .3em .02em; background: #fff; color: var(--navy); border: 4px solid var(--navy);
  font: 800 italic clamp(3rem, 2rem + 4vw, 5.4rem)/1 var(--f-display); letter-spacing: -.03em; box-shadow: 6px 6px 0 var(--red); transform: skewX(-6deg); }
.plate.sm { font-size: 2rem; border-width: 3px; box-shadow: 4px 4px 0 var(--red); }

/* boat feature */
.boat { display: grid; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 960px) { .boat { grid-template-columns: 1.2fr 1fr; } .boat.flip .boat-media { order: 2; } }
.boat-media { position: relative; min-height: 300px; background: var(--navy); }
.boat-media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.boat-media .plate { position: absolute; left: 20px; bottom: 20px; }
.boat-body { padding: clamp(20px, 2.4vw, 32px); }
.spec { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 18px 0 22px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spec dt { font: 700 .72rem/1.5 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.spec dd { margin: 0; font-weight: 600; }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--navy); }
.timeline li { position: relative; padding: 0 0 18px 22px; }
.timeline li::before { content: ""; position: absolute; left: -9px; top: 4px; width: 15px; height: 15px; background: #fff; border: 3px solid var(--red); border-radius: 50%; }
.timeline .yr { font: 800 italic 1.25rem/1 var(--f-display); color: var(--navy); display: block; margin-bottom: 4px; }
.timeline .src { display: block; font-size: .78rem; color: var(--steel); margin-top: 4px; }

/* people */
.person { display: grid; grid-template-rows: auto 1fr; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.person-media { position: relative; aspect-ratio: 4 / 3; background: var(--navy); overflow: hidden; }
.person-media img { width: 100%; height: 100%; object-fit: cover; }
.person-media .plates { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 10px; }
.person-body { padding: 22px; }
.person-role { font: 700 .76rem/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }
.quote { margin: 18px 0 0; padding: 16px 18px; background: var(--light); border-left: 4px solid var(--red); font-size: .98rem; }
.quote cite { display: block; margin-top: 6px; font-size: .78rem; font-style: normal; color: var(--steel); }
.career { margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--steel-2); border-radius: var(--radius); font-size: .92rem; }
.career h4 { font-size: .78rem; margin: 0 0 8px; color: var(--steel); }
.career ul { margin: 0; padding-left: 1.1em; }

/* events */
.ev-list { display: grid; gap: 14px; }
.ev { display: grid; grid-template-columns: 84px 1fr; gap: 0 18px; align-items: stretch; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; overflow: hidden; transition: box-shadow .2s var(--ease), border-color .2s; }
a.ev:hover { box-shadow: var(--shadow); border-color: var(--steel-2); color: inherit; }
@media (min-width: 760px) { .ev { grid-template-columns: 110px 1fr 220px; } }
.ev-date { background: var(--navy); color: #fff; display: grid; place-content: center; text-align: center; padding: 14px 6px; }
.ev-date .m { font: 700 .78rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #FF8A96; }
.ev-date .d { font: 800 italic 2.4rem/1 var(--f-display); }
.ev-date .y { font: 600 .78rem/1 var(--f-body); color: #B9C6D6; margin-top: 4px; }
.ev-body { padding: 16px 16px 16px 0; }
.ev-body h3 { margin: 6px 0 4px; font-size: 1.4rem; }
.ev-body p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.ev-media { display: none; }
@media (min-width: 760px) { .ev-media { display: block; position: relative; } .ev-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } }
.ev.is-past .ev-date { background: var(--steel); }
.ev-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; color: var(--steel); }
.ev-feature { display: grid; background: var(--navy); color: #fff; border-radius: var(--radius); overflow: hidden; }
@media (min-width: 900px) { .ev-feature { grid-template-columns: 1.1fr 1fr; } }
.ev-feature .evf-media { position: relative; min-height: 280px; }
.ev-feature .evf-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev-feature .evf-body { padding: clamp(20px, 2.4vw, 32px); }
.countdown { display: flex; gap: 10px; margin: 18px 0; }
.countdown div { min-width: 64px; padding: 10px 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); text-align: center; border-radius: var(--radius); }
.countdown b { display: block; font: 800 italic 1.9rem/1 var(--f-display); }
.countdown span { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #B9C6D6; }
.schedule { display: grid; gap: 14px; }
@media (min-width: 760px) { .schedule { grid-template-columns: repeat(3, 1fr); } }
.schedule .day { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--navy); padding: 16px 18px; border-radius: var(--radius); }
.schedule .day h3 { font-size: 1.25rem; }
.schedule ul { margin: 0; padding-left: 1.1em; }
.facts { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.facts > div { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { font: 700 .72rem/1.4 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.facts dd { margin: 2px 0 0; font-weight: 600; }
.map-box { height: 320px; border-radius: var(--radius); overflow: hidden; background: var(--light-2); border: 1px solid var(--line); }

/* gallery */
.mosaic { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; grid-auto-flow: dense; }
@media (min-width: 760px) { .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 10px; } }
.mosaic .m-item { position: relative; overflow: hidden; border-radius: 2px; background: var(--light-2); padding: 0; border: 0; cursor: zoom-in; }
.mosaic .m-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.mosaic .m-item:hover img { transform: scale(1.04); }
.mosaic .m-item.w2 { grid-column: span 2; }
.mosaic .m-item.h2 { grid-row: span 2; }
.mosaic figcaption, .mosaic .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; color: #fff; font-size: .8rem; text-align: left; background: linear-gradient(transparent, rgba(10,28,70,.85)); opacity: 0; transition: opacity .25s; }
.mosaic .m-item:hover .cap, .mosaic .m-item:focus-visible .cap { opacity: 1; }
@media (hover: none) { .mosaic .cap { opacity: 1; } }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip { min-height: 40px; padding: 8px 14px; border: 2px solid var(--line); background: #fff; border-radius: 999px; font-weight: 700; font-size: .85rem; cursor: pointer; color: var(--navy); }
.chip:hover { border-color: var(--navy); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip .cnt { opacity: .7; font-weight: 600; margin-left: 4px; }

/* lightbox */
.lightbox { border: 0; padding: 0; background: rgba(5,15,31,.96); max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; color: #fff; }
.lightbox::backdrop { background: rgba(5,15,31,.9); }
.lightbox figure { margin: 0; height: 100%; display: grid; grid-template-rows: 1fr auto; padding: 56px 12px 16px; }
.lightbox img { max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; }
.lightbox figcaption { text-align: center; padding: 12px; font-size: .9rem; color: #D6DEE9; }
.lb-btn { position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 1.6rem; cursor: pointer; display: grid; place-items: center; }
.lb-btn:hover { background: rgba(255,255,255,.25); }
.lb-close { top: 10px; right: 10px; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); }

/* video */
.video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--navy); border-radius: var(--radius); overflow: hidden; }
.video-frame video, .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-facade { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer; background: var(--navy); color: #fff; }
.video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.video-facade .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; border-radius: 50%; background: var(--red); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.video-facade .play::after { content: ""; border-left: 22px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent; margin-left: 6px; }
.video-facade .vf-label { position: absolute; left: 16px; bottom: 14px; right: 16px; text-align: left; font-weight: 700; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.reel-tile { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden; background: linear-gradient(160deg, var(--navy-3), var(--navy)); color: #fff; display: grid; place-items: center; text-align: center; padding: 18px; border: 0; cursor: pointer; width: 100%; }
.reel-tile .play { position: static; transform: none; margin: 0 auto 12px; }
.reel-tile iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reels { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .reels { grid-template-columns: repeat(5, 1fr); } }

/* product tiles */
.products { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .products { grid-template-columns: repeat(4, 1fr); } }
.pcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; overflow: hidden; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.pcard:hover { box-shadow: var(--shadow); transform: translateY(-2px); color: inherit; }
.pcard .p-img { aspect-ratio: 1; background: #fff; display: grid; place-items: center; padding: 12px; border-bottom: 1px solid var(--light-2); }
.pcard .p-img img { width: 100%; height: 100%; object-fit: contain; }
.pcard .p-img .noimg { color: var(--steel-2); font-size: .8rem; }
.pcard .p-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pcard .p-name { font-weight: 600; font-size: .92rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .p-price { margin-top: auto; font: 800 1.25rem/1 var(--f-display); color: var(--navy); }
.pcard .p-price s { color: var(--steel); font-weight: 600; font-size: .95rem; margin-right: 4px; }
.pcard .p-price.req { font: 700 .85rem/1.2 var(--f-body); color: var(--steel); }
.pcard .p-meta { font-size: .75rem; color: var(--steel); }
/* 2026-10-05: the photo always fits its square — a tall flyer image can no longer stretch the card */
.pcard .p-img { position: relative; overflow: hidden; }
.pcard .p-img img { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain; }
/* hand-picked product rows on the Fuel Services pages */
.picks-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .picks-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.picks-grid > li { min-width: 0; }
.pick { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; color: var(--ink); text-decoration: none; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.pick:hover { box-shadow: var(--shadow); transform: translateY(-2px); color: var(--ink); }
.pick-img { position: relative; display: block; aspect-ratio: 1; background: #fff; border-bottom: 1px solid var(--light-2); }
.pick-img img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; }
.pick-name { padding: 12px 14px 0; font: 700 1.12rem/1.15 var(--f-display); text-transform: uppercase; letter-spacing: .02em; color: var(--navy); }
.pick-note { padding: 4px 14px 0; font-size: .84rem; color: var(--steel); }
.pick-price { margin-top: auto; padding: 10px 14px 14px; font-size: .85rem; color: var(--steel); }
.pick-price .pick-p { font: 800 1.2rem/1 var(--f-display); color: var(--navy); }
.pick-price .pick-p s { font: 600 .9rem/1 var(--f-body); color: var(--steel); margin-right: 4px; }
.pick-price .pick-p.req { font: 700 .85rem/1.2 var(--f-body); color: var(--steel); }
.picks-more { margin: 18px 0 0; }
/* storm page: forecast & alerts (2026-10-05) */
.wx { display: grid; gap: 16px; }
.wx-head h3 { margin: 0 0 2px; }
.wx-head p { margin: 0; }
.wx-out { display: grid; gap: 14px; min-height: 180px; }
.wx-place { margin: 0; font: 700 1.15rem/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .03em; color: var(--navy); }
.wx-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wx-day { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: 10px; background: var(--light); text-align: center; }
.wx-day p { margin: 0; }
.wx-when b { display: block; font: 700 1rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--navy); }
.wx-when span { font-size: .78rem; color: var(--steel); }
.wx-ico { width: 44px; height: 44px; fill: none; stroke: var(--royal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wx-ico.wx-sun, .wx-ico.wx-partly { stroke: #D98A00; }
.wx-ico.wx-storm { stroke: var(--red); }
.wx-temp b { font: 800 1.7rem/1 var(--f-display); color: var(--ink); }
.wx-temp span { margin-left: 6px; font-weight: 600; color: var(--steel); }
.wx-cond { min-height: 2.6em; font-size: .8rem; line-height: 1.3; color: var(--ink-2); }
.wx-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: .78rem; font-weight: 600; color: var(--steel); }
.wx-meta span { display: inline-flex; align-items: center; gap: 3px; }
.wx-meta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wx-alert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 10px; background: var(--red); color: #fff; }
.wx-alert svg { flex: none; width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wx-alert strong { display: block; line-height: 1.3; }
.wx-alert details { margin-top: 6px; font-size: .86rem; }
.wx-alert summary { cursor: pointer; font-weight: 700; text-decoration: underline; }
.wx-alert details p { margin: 6px 0 0; color: #FFE6E9; }
.wx-clear { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 8px; background: #E8F4EC; color: var(--ok); font-size: .9rem; font-weight: 600; }
.wx-clear svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wx-loading, .wx-msg { margin: 0; color: var(--steel); font-size: .92rem; }
@media (max-width: 379.98px) { .wx-days { gap: 6px; } .wx-day { padding: 12px 4px 10px; } .wx-temp b { font-size: 1.4rem; } }
.skeleton { background: linear-gradient(90deg, var(--light) 25%, var(--light-2) 37%, var(--light) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius); }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.pcard.skeleton { min-height: 280px; border: 0; }

/* catalog layout */
.catalog { display: grid; gap: 24px; }
@media (min-width: 1000px) { .catalog { grid-template-columns: 280px 1fr; align-items: start; } }
.cat-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
@media (min-width: 1000px) { .cat-panel { position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow: auto; } }
.cat-panel h2 { font-size: 1.1rem; padding: 14px 16px; margin: 0; border-bottom: 1px solid var(--line); }
.cat-tree { list-style: none; margin: 0; padding: 6px; }
.cat-tree ul { list-style: none; margin: 0 0 4px 10px; padding: 0 0 0 8px; border-left: 2px solid var(--light-2); }
.cat-tree a, .cat-tree button.cat-x { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 10px; border-radius: var(--radius); text-decoration: none; color: var(--navy); font-size: .88rem; background: none; border: 0; text-align: left; cursor: pointer; }
.cat-tree a:hover { background: var(--light); }
.cat-tree a[aria-current="true"] { background: var(--navy); color: #fff; }
.cat-tree .c { color: var(--steel); font-size: .78rem; }
.cat-tree a[aria-current="true"] .c { color: #CBD5E3; }
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.toolbar .search-form { max-width: 520px; flex: 1 1 320px; }
.toolbar select { height: 48px; padding: 0 12px; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; }
.toggle { display: inline-flex; gap: 8px; align-items: center; font-size: .9rem; font-weight: 600; min-height: 44px; cursor: pointer; }
.toggle input { width: 20px; height: 20px; accent-color: var(--red); }
.pager { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 28px; }
.notice { padding: 16px 18px; border-radius: var(--radius); background: var(--light); border-left: 4px solid var(--navy-3); font-size: .95rem; }
.notice.err { background: #FDECEE; border-left-color: var(--red); }
.notice.warn { background: #FFF6E8; border-left-color: var(--warn); }
.notice.ok { background: #E8F5EE; border-left-color: var(--ok); }
.notice p:last-child { margin-bottom: 0; }

/* product detail */
.pd { display: grid; gap: 32px; }
@media (min-width: 960px) { .pd { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.pd-gallery .main { aspect-ratio: 1; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); display: grid; place-items: center; padding: 20px; }
.pd-gallery .main img { width: 100%; height: 100%; object-fit: contain; }
.pd-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pd-thumbs button { width: 72px; height: 72px; padding: 4px; border: 2px solid var(--line); background: #fff; border-radius: var(--radius); cursor: pointer; }
.pd-thumbs button[aria-pressed="true"] { border-color: var(--red); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pd-price { font: 800 2.4rem/1 var(--f-display); color: var(--navy); margin: 12px 0; }
.pd-buy { background: var(--light); border-radius: var(--radius); padding: 20px; margin: 18px 0; }
.pd-buy label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: 6px; }
.pd-buy select { width: 100%; height: 48px; padding: 0 12px; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: 14px; }
.pd-desc { margin-top: 36px; }

/* locator */
.locator { display: grid; grid-template-columns: minmax(0, 1fr); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
@media (min-width: 1000px) { .locator { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); height: min(78vh, 760px); min-height: 560px; } }
.loc-side { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid var(--line); }
.loc-controls { padding: 16px; border-bottom: 1px solid var(--line); display: grid; gap: 12px; }
.loc-controls .row2 { display: flex; gap: 8px; flex-wrap: wrap; }
.loc-status { padding: 10px 16px; font-size: .85rem; color: var(--steel); border-bottom: 1px solid var(--line); background: var(--light); }
.loc-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; max-height: 60vh; }
@media (min-width: 1000px) { .loc-list { max-height: none; } }
.loc-item { border-bottom: 1px solid var(--line); }
.loc-item button { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: start; width: 100%; padding: 14px 16px; background: none; border: 0; text-align: left; cursor: pointer; }
.loc-item button:hover, .loc-item.is-active button { background: #F4F7FB; }
.loc-item.is-active button { box-shadow: inset 4px 0 0 var(--red); }
.loc-item img, .loc-item .ph { width: 44px; height: 44px; object-fit: contain; border-radius: var(--radius); background: var(--light); }
.loc-item .ph { display: grid; place-items: center; font: 800 italic 1.1rem/1 var(--f-display); color: var(--navy); }
.loc-item strong { display: block; font-size: .98rem; color: var(--navy); }
.loc-item .addr { font-size: .82rem; color: var(--steel); }
.loc-item .dist { font: 700 .85rem/1 var(--f-body); color: var(--navy); white-space: nowrap; }
.loc-map { position: relative; min-height: 420px; min-width: 0; background: var(--light-2); overflow: hidden; border-radius: 0 var(--radius) var(--radius) 0; }
.loc-map .leaflet-container, #map { position: absolute; inset: 0; }
.loc-detail { padding: 18px 16px; overflow-y: auto; flex: 1; }
.loc-detail h3 { margin: 6px 0; }
/* section 8 (2026-10-05): the results list and a station's details scroll with the page — never inside a box —
   and on desktop the map stays in view beside them. The map is its own layer, so header menus always open above it. */
.locator .loc-list, .locator .loc-detail { max-height: none; overflow: visible; }
@media (min-width: 1000px) {
  .locator { height: auto; min-height: 0; align-items: start; }
  .locator .loc-map { position: sticky; top: calc(var(--header-h) + 16px); height: min(calc(100vh - var(--header-h) - 32px), 760px); min-height: 520px; }
}
.loc-map, [data-event-map], .leaflet-container { isolation: isolate; z-index: 0; }
.site-header { z-index: 1000; }
.loc-more { padding: 14px 16px; border-bottom: 0; }
.loc-more .btn { width: 100%; justify-content: center; }
/* nothing spills out of its box (selectors are deliberately specific: they must beat older rules further down) */
article.boat > * { min-width: 0; }
article.boat > .boat-media { width: 100%; } /* aspect-ratio + min-height was forcing the photo wider than a phone */
body .src-link { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
/* anchor jumps land a little below the sticky header / sub-nav, never touching them */
html:root:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 76px); }
.locator, .ff-paths { scroll-margin-top: calc(var(--header-h) + 16px); }
.loc-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 2px solid var(--line); }
.loc-tabs button { flex: none; min-height: 52px; padding: 0 18px; border: 0; background: none; font-weight: 700; font-size: .9rem; color: var(--steel); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; letter-spacing: .02em; }
.loc-tabs button[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--red); }
.mode-switch { display: flex; gap: 0; border: 2px solid var(--navy); border-radius: var(--radius); overflow: hidden; }
.mode-switch button { flex: 1; min-height: 44px; border: 0; background: #fff; font-weight: 700; color: var(--navy); cursor: pointer; }
.mode-switch button[aria-pressed="true"] { background: var(--navy); color: #fff; }
@media (min-width: 1000px) { .mode-switch { display: none; } }
@media (max-width: 999.98px) {
  .locator[data-view="list"] .loc-map { display: none; }
  .locator[data-view="map"] .loc-list, .locator[data-view="map"] .loc-status { display: none; }
  .locator[data-view="map"] .loc-map { min-height: 62vh; }
}
.pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--red); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.pin.soon { background: var(--steel); }
.pin.dealer { background: var(--navy-3); }
.pin.marina { background: #0E7490; }
.pin.is-active { background: var(--navy); transform: rotate(-45deg) scale(1.25); }
.pin-you { width: 18px; height: 18px; border-radius: 50%; background: #2563EB; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(37,99,235,.25); }
.leaflet-container { font: inherit; }
.leaflet-popup-content { margin: 12px 14px; font-size: .88rem; }

/* forms */
.form { display: grid; gap: 16px; }
.form .two { display: grid; gap: 16px; }
@media (min-width: 640px) { .form .two { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 6px; color: var(--navy); }
.field .req { color: var(--red); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 2px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy-3); box-shadow: 0 0 0 3px rgba(22,54,95,.18); }
.field .hint { font-size: .8rem; color: var(--steel); margin: 6px 0 0; }
.field .error { color: var(--red); font-size: .85rem; font-weight: 600; margin: 6px 0 0; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--red); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { display: none; }
.form-status.is-visible { display: block; }
.contact-cards { display: grid; gap: 16px; }
@media (min-width: 760px) { .contact-cards { grid-template-columns: 1fr 1fr; } }
.ccard { padding: 24px; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }
.ccard.navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.ccard.navy a { color: #fff; }
.ccard dl { margin: 12px 0 0; display: grid; gap: 10px; }
.ccard dt { font: 700 .72rem/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.ccard.navy dt { color: #9FB0C6; }
.ccard dd { margin: 2px 0 0; font-weight: 600; }

/* modal */
.modal { border: 0; padding: 0; border-radius: var(--radius); width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); box-shadow: var(--shadow-lg); }
.modal::backdrop { background: rgba(10,28,70,.7); }
.modal .modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; background: var(--navy); color: #fff; }
.modal .modal-head h2 { font-size: 1.5rem; margin: 0; }
.modal .modal-body { padding: 20px; overflow: auto; }
.modal .x { width: 44px; height: 44px; border: 0; background: rgba(255,255,255,.12); color: #fff; border-radius: 50%; font-size: 1.4rem; cursor: pointer; }
.handoff-box { display: grid; gap: 12px; }
.handoff-box .dest { padding: 12px 14px; background: var(--light); border-radius: var(--radius); font-size: .9rem; word-break: break-word; }

/* misc blocks */
.media-frame { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--navy); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame figcaption { position: absolute; left: 0; bottom: 0; padding: 8px 12px; background: rgba(10,28,70,.82); color: #fff; font-size: .78rem; }
.media-tall { aspect-ratio: 4 / 5; }
.media-wide { aspect-ratio: 16 / 10; }
.media-cinema { aspect-ratio: 21 / 9; }
@media (max-width: 759.98px) { .media-cinema { aspect-ratio: 4 / 3; } }
.overlap-tag { position: absolute; top: 16px; left: 16px; }
.logo-row { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; }
.logo-row img { height: 44px; width: auto; }
.list-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.list-check li { position: relative; padding-left: 28px; }
.list-check li::before { content: ""; position: absolute; left: 0; top: .35em; width: 16px; height: 16px; background: var(--red); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.on-dark .list-check li::before { background: #fff; }
.callout { display: grid; gap: 20px; padding: clamp(24px, 3vw, 44px); border-radius: var(--radius); background: var(--navy); color: #fff; position: relative; overflow: hidden; }
@media (min-width: 900px) { .callout { grid-template-columns: 1fr auto; align-items: center; } }
.callout h2, .callout h3 { margin: 0 0 .3em; }
.callout p { margin: 0; color: #D6DEE9; }
.jump { display: flex; gap: 8px; flex-wrap: wrap; }
.jump a { padding: 8px 14px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: #fff; text-decoration: none; font-weight: 700; font-size: .85rem; }
.jump a:hover { background: #fff; color: var(--navy); }
.big-num { font: 800 italic clamp(4rem, 3rem + 6vw, 9rem)/.8 var(--f-display); color: var(--light-2); }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font: 700 .74rem/1.3 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.scroll-x { overflow-x: auto; }

/* ---------- footer ---------- */
.site-footer { background: var(--navy); color: #C9D4E2; font-size: .92rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.footer-top { padding: clamp(34px, 3.6vw, 56px) 0 24px; display: grid; gap: 26px; }
@media (min-width: 900px) { .footer-top { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.footer-brand img { width: 220px; height: auto; margin-bottom: 16px; }
.site-footer h2 { font: 700 .78rem/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: #fff; margin: 0 0 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-contacts { display: grid; gap: 20px; padding: 28px 0; border-top: 1px solid rgba(255,255,255,.12); }
@media (min-width: 760px) { .footer-contacts { grid-template-columns: 1fr 1fr; } }
.footer-contacts h3 { font: 700 1.2rem/1.1 var(--f-display); text-transform: uppercase; color: #fff; margin: 0 0 8px; }
.footer-contacts p { margin: 0; line-height: 1.7; }
.footer-bottom { padding: 18px 0 28px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .8rem; color: #9FB0C6; }
.social { display: flex; gap: 10px; }
.social a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
.social a:hover { background: #fff; color: var(--navy); }
.social svg { width: 20px; height: 20px; fill: currentColor; }
.app-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.app-badge { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; color: #fff; text-decoration: none; line-height: 1.1; }
.app-badge small { display: block; font-size: .66rem; opacity: .8; }
.app-badge strong { font-size: 1rem; }
.app-badge svg { width: 22px; height: 22px; fill: currentColor; }
.light .app-badge, .app-badges.light .app-badge { border-color: var(--navy); color: var(--navy); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
  .hero-media img { animation: drift 18s ease-out both; }
  @keyframes drift { from { transform: scale(1.06); } to { transform: scale(1); } }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

@media print { .util-bar, .site-header, .site-footer, .btn { display: none !important; } }

/* --- fixes after first visual review --- */
.card-body .tag, .card-body > .tags { align-self: flex-start; }
.callout .btn-ghost { color: #fff; border-color: rgba(255,255,255,.7); }
.callout .btn-ghost:hover { background: #fff; color: var(--navy); }
.mosaic.fixed { grid-auto-flow: row; }
@media (max-width: 1279.98px) { .site-nav .top-link, .site-nav summary { padding: 0 7px; font-size: .78rem; letter-spacing: .04em; } .nav-cta { padding: 8px 10px; } }
/* phones: the photo gets its own band so the boat isn't hidden behind the headline */
@media (max-width: 899.98px) {
  .hero-media { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3; z-index: 0; }
  .hero::before { display: none; }
  .hero-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(transparent, var(--navy)); }
  .hero-inner { min-height: 0; padding-top: 6px; padding-bottom: 28px; }
  .hero-badge { margin-top: -18px; position: relative; }
}

@media (max-width: 599.98px) { .hide-sm { display: none; } }
.split > *, .grid > *, .catalog > * { min-width: 0; }
@media (min-width: 1100px) { .site-nav > ul > li:last-child .sub, .site-nav > ul > li:nth-last-child(2) .sub { left: auto; right: -8px; } }

/* inline icons inside text */
.i { display: inline-block; vertical-align: -.2em; }
.ev-meta span, .ext-note, .util-bar span { display: inline-flex; align-items: center; gap: 5px; }
.btn .i, .search-form .i { vertical-align: middle; }

[hidden] { display: none !important; }
.map-legend { position: absolute; left: 10px; bottom: 26px; z-index: 500; display: flex; flex-wrap: wrap; gap: 6px 12px; max-width: calc(100% - 20px); padding: 8px 10px; background: rgba(255,255,255,.94); border-radius: var(--radius); box-shadow: var(--shadow); font-size: .75rem; font-weight: 600; color: var(--navy); }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.map-legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.f1-cluster { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: #fff; font: 800 .9rem/1 var(--f-body); border: 3px solid #fff; box-shadow: 0 0 0 3px rgba(201,35,53,.85), 0 4px 10px rgba(0,0,0,.3); }

/* filter chips wrap onto new lines instead of running off the edge */
.loc-controls .filters { flex-wrap: wrap; }
/* a11y fixes from axe audit */
.ev.is-past .ev-date { background: #46566B; }
.ev.is-past .ev-date .m, .ev.is-past .ev-date .y { color: #fff; }
.crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.ccard.navy .kicker { color: #fff; }

@media (max-width: 999.98px) { .cat-panel { max-height: 300px; overflow-y: auto; } }

/* ---------- 2026-10 refinement: racing program ---------- */
.h-xl { font-size: clamp(1.7rem, 1.35rem + 1.4vw, 2.4rem); text-transform: uppercase; }
.h-lg { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); text-transform: uppercase; margin: 0 0 .3em; }
.subnav { position: sticky; top: var(--header-h); z-index: 40; background: #fff; border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav a { flex: none; padding: 14px 12px; font: 700 .8rem/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); text-decoration: none; border-bottom: 3px solid transparent; }
.subnav a:hover { border-bottom-color: var(--red); }
@media (min-width: 760px) { .person-h { grid-template-rows: none; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .person-h .person-media { aspect-ratio: auto; min-height: 100%; } }
.person-h .person-body p { font-size: .96rem; }
.driver { display: grid; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.driver-media { position: relative; background: var(--navy-deep); aspect-ratio: 3 / 2; overflow: hidden; }
.driver-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.driver-body { padding: 22px 24px 24px; }
.facts-list { margin: 14px 0 16px; padding-left: 1.1em; }
.facts-list li { margin: .45em 0; }
.src-link { font-size: .78rem; color: var(--steel); white-space: nowrap; }
.tc-teaser { position: relative; display: block; border-radius: var(--radius); overflow: hidden; min-height: 240px; color: #fff; text-decoration: none; }
.tc-teaser img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tc-teaser:hover img { transform: scale(1.03); }
.tc-teaser span { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 18px; background: linear-gradient(transparent, rgba(6,18,46,.9)); font-size: .95rem; }
.tc-teaser strong { display: block; font: 700 1.6rem/1.05 var(--f-display); text-transform: uppercase; }
.tc-teaser:hover { color: #fff; }
.timeline-lg li { padding-bottom: 22px; }
.timeline-lg strong { font: 700 1.2rem/1.2 var(--f-display); text-transform: uppercase; color: var(--navy); margin-right: 6px; }
.timeline-lg p { margin: 6px 0 4px; }
.timeline .hist-reported::before { border-color: var(--warn); }
.bg-royal.stars-bg, .page-hero.plain.stars-bg { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath fill='%23ffffff' fill-opacity='.07' d='M14 6l2.1 4.5 4.9.5-3.7 3.3 1 4.8L14 16.6 9.7 19.1l1-4.8L7 11l4.9-.5zM42 34l2.1 4.5 4.9.5-3.7 3.3 1 4.8-4.3-2.5-4.3 2.5 1-4.8L35 39l4.9-.5z'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, var(--royal) 130%); }
.callout.stacked { grid-template-columns: 1fr !important; }
.ev-body .tags .tag { font-size: .64rem; padding: 3px 7px; }

/* ---------- services ---------- */
.svc-list { display: grid; gap: 20px; }
.svc { display: grid; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
@media (min-width: 960px) { .svc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .svc.flip .svc-media { order: 2; } }
.svc-media { position: relative; min-height: 240px; background: var(--navy); }
.svc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-body { padding: clamp(20px, 2.6vw, 36px); }
.svc-body .spec { margin: 14px 0 18px; }
.svc-listings { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.svc-listings summary { cursor: pointer; font-weight: 700; color: var(--royal); min-height: 40px; display: flex; align-items: center; }
.svc-listings .products { margin-top: 10px; }
@media (min-width: 1100px) { .svc-listings .products { grid-template-columns: repeat(4, 1fr); } }
.svc-groups { display: grid; gap: 16px; }
@media (min-width: 700px) { .svc-groups { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .svc-groups { grid-template-columns: repeat(3, 1fr); } }
.svc-group { padding: 20px 22px; border-radius: var(--radius); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.svc-group h3 { font-size: 1.35rem; text-transform: uppercase; margin-bottom: 12px; }
.svc-group .list-check { gap: 7px; margin-bottom: 14px; font-size: .95rem; }
.svc-group .list-check li::before { background: var(--red); }
.ptiles { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .ptiles { grid-template-columns: repeat(4, 1fr); } }
.ptile { display: block; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--royal); border-radius: var(--radius); text-decoration: none; color: var(--navy); }
.ptile:hover { border-left-color: var(--red); box-shadow: var(--shadow); color: var(--navy); }
.ptile .kicker { margin: 0 0 6px; font-size: .68rem; }
.ptile .kicker::before { display: none; }
.ptile strong { display: block; font: 700 1.15rem/1.1 var(--f-display); text-transform: uppercase; }
.svc.no-media { grid-template-columns: 1fr; }
.link-arrow.small { font-size: .88rem; }
.program-tiles { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-top: clamp(18px, 2.2vw, 28px); }
@media (min-width: 900px) { .program-tiles { grid-template-columns: repeat(4, 1fr); } }
.prog { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--navy-deep); color: #fff; text-decoration: none; }
.prog img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.prog:hover img { transform: scale(1.04); }
.prog span { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 14px 12px; background: linear-gradient(transparent, rgba(6,18,46,.92)); font-size: .82rem; color: var(--sky); }
.prog strong { display: block; font: 700 1.3rem/1.05 var(--f-display); text-transform: uppercase; color: #fff; }
.prog:hover { color: #fff; }
.ev-result { margin: 2px 0 4px; font-size: .86rem; color: var(--navy); }
.ev-result strong { color: var(--navy); }
/* results: podium/top score green, DNS grey, everything else plain — wins never look like errors */
.res-top { color: var(--ok) !important; }
.res-dns { color: var(--steel) !important; font-weight: 600; }
.res-std { color: inherit; }
.tone-dark .res-top { color: #7BE3A6 !important; }
.tone-dark .res-dns { color: #9FB0C6 !important; }
/* sources tucked into a small disclosure instead of a line under every fact */
.sources { margin-top: 10px; font-size: .78rem; color: var(--steel); }
.sources summary { cursor: pointer; display: inline-block; text-decoration: underline; text-underline-offset: 2px; }
.sources ul { margin: 6px 0 0; padding-left: 18px; }
.on-dark .sources, .tone-dark .sources { color: #9FB0C6; }
.tone-dark .boat .sources { color: var(--steel); }
.table.results td { vertical-align: top; }
.crew-intro { display: grid; gap: 20px; align-items: end; margin-bottom: clamp(22px, 2.2vw, 36px); }
@media (min-width: 760px) { .crew-intro:has(.crew-photo) { grid-template-columns: minmax(0, 1fr) 220px; } }
.crew-photo { aspect-ratio: 1 / 2; max-height: 340px; }
@media (max-width: 759.98px) { .crew-photo { max-width: 200px; } }
.crew-photo img { height: 100%; }
@media (min-width: 900px) { .sticky-col { position: sticky; top: calc(var(--header-h) + 64px); } }

/* ---------- Find Fuel: pod search + MicroStation calculator ---------- */
.pod-form { display: grid; gap: 10px; }
.pod-form select, .pod-form input { height: 40px; border: 2px solid var(--line); border-radius: 4px; padding: 0 10px; background: #fff; color: var(--ink); min-width: 0; }
.pod-form select { flex: 1 1 160px; }
.pod-form input { flex: 0 1 110px; }
.pod-form[hidden], .pod-form input[hidden] { display: none; }
.seg { display: flex; border: 2px solid var(--navy); border-radius: var(--radius); overflow: hidden; }
.seg label { flex: 1; position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 10px; font-weight: 700; font-size: .88rem; color: var(--navy); background: #fff; text-align: center; }
.seg input:checked + span { background: var(--navy); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: -3px; }
.calc { margin-top: 16px; padding: 16px; border: 2px solid var(--navy); border-radius: var(--radius); background: var(--light); }
.calc h4 { margin: 2px 0 10px; }
.calc-grades { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.calc-grades legend { font: 700 .72rem/1.4 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin-bottom: 4px; }
.calc-grades label { display: flex; gap: 8px; align-items: center; padding: 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; font-size: .9rem; }
.calc-grades em { font-style: normal; color: var(--steel); margin-left: 4px; }
.stepper { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.stepper button { width: 44px; height: 44px; border: 2px solid var(--navy); border-radius: 6px; background: #fff; color: var(--navy); font-size: 1.4rem; font-weight: 700; cursor: pointer; }
.stepper button:hover { background: var(--navy); color: #fff; }
.stepper input { width: 84px; height: 44px; text-align: center; font: 700 1.3rem var(--f-body); border: 2px solid var(--line); border-radius: 6px; color: var(--ink); }
.stepper .unit { font-weight: 700; color: var(--steel); }
.calc .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.calc .chip { min-height: 36px; padding: 6px 12px; }
.calc-sum { margin: 0 0 12px; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.calc-sum > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: .9rem; }
.calc-sum > div:last-child { border-bottom: 0; }
.calc-sum dt { color: var(--steel); }
.calc-sum dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.calc-sum .total { background: var(--navy); color: #fff; }
.calc-sum .total dt, .calc-sum .total dd { color: #fff; font-weight: 800; }
.calc-steps { margin: 12px 0 8px; padding-left: 1.2em; }
.calc-steps li { margin: .3em 0; }
.price-line { font-size: 1.05rem; margin: 4px 0; }
.prose-sm p { margin: .5em 0; }

/* ---------- Driver placeholder card (until real track photos arrive) ---------- */
.dcard { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; width: 100%; height: 100%; min-height: 220px; padding: 22px 24px; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%, #13306F 100%); }
.dcard::before { content: ""; position: absolute; top: 0; bottom: 0; right: 18%; width: 34px; transform: skewX(-18deg);
  background: linear-gradient(90deg, var(--red) 0 40%, #fff 40% 55%, var(--red) 55% 100%); opacity: .9; }
.dcard > * { position: relative; }
.dcard-k { font: 700 .72rem/1.3 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--sky); }
.dcard-num { position: absolute; top: 10px; right: 34px; padding-right: .08em; font: italic 900 clamp(4.2rem, 11vw, 7rem)/1 var(--f-display); color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.9); letter-spacing: -.02em; }
.dcard-num::before { content: "#"; font-size: .45em; vertical-align: top; -webkit-text-stroke: 1.5px rgba(255,255,255,.7); margin-right: .04em; }
.dcard-name { font: 700 clamp(1.6rem, 3.2vw, 2.2rem)/1.05 var(--f-display); text-transform: uppercase; }
.dcard-series { font-weight: 600; font-size: .95rem; }
.dcard-also { font-size: .85rem; color: var(--sky); }
.dcard-tile { position: absolute; inset: 0; min-height: 0; flex-direction: row; align-items: center; justify-content: center; gap: 18px; padding: 0 0 40px; }
.dcard-tile::before { display: none; }
@media (max-width: 600px) { .dcard::before { right: 3%; width: 20px; } .dcard-num { right: 26px; } .dcard-series { max-width: 82%; } }
.dcard-tile .dcard-num { position: static; font-size: clamp(3.2rem, 8vw, 5rem); }

/* Find Fuel tabs: 2×2 on phones so all four are visible (no sideways scroll) */
@media (max-width: 600px) {
  .loc-tabs { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; border-bottom: 0; gap: 6px; }
  .loc-tabs button { min-height: 48px; padding: 8px 10px; font-size: .86rem; line-height: 1.2; white-space: normal; text-align: center; background: var(--light); border: 2px solid transparent; border-radius: var(--radius); margin: 0; }
  .loc-tabs button[aria-selected="true"] { background: #fff; border-color: var(--navy); box-shadow: inset 0 -3px 0 var(--red); }
}

/* ===================== Design pass 4: darker, premium rhythm (approved 2026-10-04) ===================== */
/* Type: bigger, heavier section headings */
h2 { font-size: clamp(2.1rem, 1.35rem + 2.7vw, 3.5rem); font-weight: 800; letter-spacing: -.01em; line-height: .98; }
.lede { line-height: 1.5; }
/* Kicker: plain red bar instead of the small flag icon */
.kicker::before, .on-dark .kicker::before { width: 28px; height: 3px; background: var(--red); }
/* Template decoration removed: star wallpaper and the stars-and-stripes strip */
.stars-bg { background-image: none !important; }
.bg-royal.stars-bg { background-image: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, var(--royal) 130%) !important; }
.flag-rule { height: 3px; display: block; background: var(--red); }
.flag-rule::before, .flag-rule::after { display: none; }

/* Dark band */
.tone-dark { background: radial-gradient(120% 140% at 85% 0%, #10275A 0%, var(--navy-deep) 55%); color: #fff; }
.tone-dark .lede { color: #D5DEEE; }
.tone-dark .kicker { color: #fff; }
.tone-dark a:not(.btn):not(.ptile):not(.m-item) { color: #fff; }
.tone-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.75); }
.tone-dark .ev { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); color: #fff; }
.tone-dark .ev-body p, .tone-dark .ev-meta { color: #C9D4E8; }
.tone-dark .ev-date { background: var(--red); }
.tone-dark .ev-date .m, .tone-dark .ev-date .y { color: #fff; }
.tone-dark .ev.is-past .ev-date { background: #2A3A60; }
.tone-dark .ev-result { color: #DCE4F2; }
.tone-dark .ev-result, .tone-dark .ev-result strong { color: #DCE4F2; }
.tone-dark .ev-feature { background: #0E2250; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.tone-dark .tag { background: rgba(255,255,255,.12); color: #fff; }
.tone-dark .tag.red { background: var(--red); }
.tone-dark .boat, .tone-dark .card { box-shadow: 0 24px 50px rgba(0,0,0,.3); border-color: transparent; }
.tone-dark .mosaic .m-item { background: #12295C; }
/* The strip behind the "start here" cards matches the dark section below them */
.paths.paths-on-dark { position: relative; }
/* full-width dark strip behind the cards; z-index -1 keeps it under the hero, and it never intercepts clicks */
.paths.paths-on-dark::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--navy-deep); box-shadow: 0 0 0 100vmax var(--navy-deep); clip-path: inset(0 -100vmax); }
/* White cards inside a dark band keep their normal (dark-on-white) text */
.tone-dark :is(.boat, .card, .ptile) { color: var(--ink); }
.tone-dark :is(.boat, .card, .ptile) .kicker { color: var(--red); }
.tone-dark :is(.boat, .card, .ptile) .lede, .tone-dark :is(.boat, .card, .ptile) p { color: var(--ink-2); }
.tone-dark :is(.boat, .card) a:not(.btn), .tone-dark :is(.boat, .card) .link-arrow { color: var(--navy); }
.tone-dark :is(.boat, .card) .btn-ghost { color: var(--navy); border-color: var(--navy); }
.tone-dark :is(.boat, .card) .tag { background: var(--light); color: var(--navy); }
.tone-dark :is(.boat, .card) .tag.red { background: var(--red); color: #fff; }
.tone-dark .ptile, .tone-dark .ptile strong { color: var(--navy); }
.page-hero.plain.stars-bg { background-image: linear-gradient(120deg, var(--navy) 0%, var(--navy-2) 60%, var(--royal) 140%) !important; }
/* The band right under the cards starts flat so it joins the strip without a seam */
.paths-on-dark + .tone-dark { background: radial-gradient(120% 140% at 85% 100%, #10275A 0%, var(--navy-deep) 55%); }
/* A heading right under its kicker sits close to it, even inside running text */
.prose .kicker + h2, .prose .kicker + h3 { margin-top: .25em; }

/* Find Fuel is the main action: visible on phones too, next to the menu button */
@media (max-width: 1099.98px) {
  .nav-cta { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; margin-right: 8px; padding: 9px 10px; font-size: .74rem; white-space: nowrap; }
}
@media (max-width: 379.98px) { .nav-cta .cta-txt { display: none; } .nav-cta { padding: 10px; } }
@media (max-width: 1099.98px) {
  .site-header .brand { flex: 0 1 auto; min-width: 0; }
  .site-header .brand-logo { max-width: 100%; height: auto; }
  .nav-toggle { flex: none; }
}

/* Photos shown in their real shape instead of stretched frames that crop most of the picture */
@media (min-width: 760px) {
  .person-h { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .person-h .person-media { aspect-ratio: 16 / 9; min-height: 0; }
  .ev { grid-template-columns: 110px 1fr 172px; }
}
@media (min-width: 960px) {
  /* Boat card: wide photo across the top, specs and season history side by side underneath */
  .boat, .boat.flip { grid-template-columns: 1fr; }
  .boat.flip .boat-media { order: 0; }
  .boat-media { min-height: 0; aspect-ratio: 21 / 9; }
  .boat-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 48px; align-items: start; }
  .boat-body > :not(.timeline) { grid-column: 1; }
  .boat-body > .timeline { grid-column: 2; grid-row: 1 / span 6; margin-top: 4px; }
}

/* ===================== Modern pass (2026-10-04) ===================== */
/* 1. Full-screen homepage hero: one big headline, two buttons */
.btn-lg { min-height: 54px; padding: 14px 26px; font-size: 1rem; }
.btn .i, .btn svg { flex: none; }
.hero-full .hero-sub { font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem); max-width: 34ch; margin-bottom: 26px; }
.hero-full .hero-ctas { gap: 14px; }
.hero-full .hero-ctas .btn { display: inline-flex; align-items: center; gap: 10px; }
.hero-full .hero-ctas .btn svg { width: 20px; height: 20px; }
@media (min-width: 900px) {
  .hero-full .hero-inner { min-height: calc(100svh - 104px); padding-top: 40px; padding-bottom: 150px; justify-content: center; }
  .hero-full h1 { font-size: clamp(3.4rem, 1.6rem + 5.2vw, 7rem); line-height: .92; }
}
@media (max-width: 899.98px) {
  .hero-full .hero-media { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; z-index: -2; }
  .hero-full .hero-media::after { display: none; }
  .hero-full .hero-media img { object-position: 42% 50%; animation: none; transform: scale(1.3) translateY(-17%); }
  .hero-full::before { display: block; background: linear-gradient(180deg, rgba(6,18,46,.15) 0%, rgba(6,18,46,.25) 35%, rgba(6,18,46,.88) 68%, var(--navy-deep) 100%); }
  .hero-full .hero-inner { min-height: calc(100svh - 104px); justify-content: flex-end; padding-top: 32px; padding-bottom: 36px; }
  .hero-full .hero-badge { margin-top: 0; }
  .hero-full h1 { font-size: clamp(2.7rem, 1.4rem + 7vw, 4rem); line-height: .95; }
  .hero-full .hero-ctas .btn { flex: 1 1 100%; justify-content: center; }
}

/* 2. Results strip under the hero */
.stat-strip { background: var(--navy-deep); color: #fff; padding: clamp(26px, 3vw, 44px) 0 clamp(8px, 1vw, 14px); }
.stat-row { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
.stat-row li { position: relative; padding-left: 16px; border-left: 3px solid var(--red); }
.stat-row b { display: block; font: italic 900 clamp(2.4rem, 1.6rem + 3.2vw, 4.2rem)/.95 var(--f-display); letter-spacing: -.01em; }
.stat-row b small { font-size: .5em; color: #FF8C96; }
.stat-row b[data-loading] { opacity: .5; }
.stat-row span { display: block; margin-top: 6px; font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; }
.stat-row em { display: block; font-style: normal; font-size: .85rem; color: #B9C6DF; margin-top: 2px; }
.stat-strip .link-arrow { color: #fff; }
@media (min-width: 900px) { .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } }
/* the race calendar band below starts flat so it joins the strip without a seam */
.stat-strip + .tone-dark { background: radial-gradient(120% 140% at 85% 100%, #10275A 0%, var(--navy-deep) 55%); }
/* "+ N more" for long service lists */
.more-list { margin: -4px 0 12px; }
.more-list summary { cursor: pointer; font-weight: 700; font-size: .9rem; color: var(--red); list-style: none; display: inline-flex; align-items: center; min-height: 32px; }
.on-dark .more-list summary, .tone-dark .more-list summary { color: #FF8C96; }
.more-list summary::-webkit-details-marker { display: none; }
.more-list[open] summary { display: none; }

/* 4. Event photo cards (events page) */
.evc-grid { display: grid; gap: clamp(14px, 1.6vw, 22px); grid-template-columns: 1fr; }
@media (min-width: 700px) { .evc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .evc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.evc { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.evc:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.evc-media { position: relative; aspect-ratio: 16 / 10; background: var(--navy); overflow: hidden; }
.evc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.evc:hover .evc-media img { transform: scale(1.04); }
.evc-date { position: absolute; left: 14px; top: 14px; display: grid; justify-items: center; min-width: 62px; padding: 8px 8px 7px; background: var(--red); color: #fff; border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.evc-date .m { font: 700 .72rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; }
.evc-date .d { font: 900 italic 2rem/1 var(--f-display); }
.evc-date .y { font: 600 .7rem/1 var(--f-body); opacity: .9; margin-top: 2px; }
.evc.is-past .evc-date { background: var(--navy); }
.evc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.evc-body h3 { margin: 4px 0 0; font-size: 1.45rem; }
.evc-body .ev-meta { margin-top: auto; padding-top: 6px; }
@media (prefers-reduced-motion: reduce) { .evc, .evc-media img { transition: none; } .evc:hover { transform: none; } }

/* Locator panel: nothing inside may be wider than the panel; long text and buttons wrap */
.loc-detail, .loc-controls, .loc-status { min-width: 0; overflow-wrap: anywhere; }
.loc-detail .btn, .calc .btn { white-space: normal; text-align: center; line-height: 1.25; height: auto; }
.calc, .calc-sum, .stepper { max-width: 100%; }
.calc-sum > div > * { min-width: 0; }
@media (max-width: 999.98px) { .loc-map { border-radius: 0 0 var(--radius) var(--radius); } }
/* Tabs: 2 per row on phones and small tablets, one row with wrapping above that */
@media (min-width: 600px) and (max-width: 999.98px) { .loc-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .loc-tabs button { flex: auto; white-space: normal; padding: 8px 10px; line-height: 1.2; } }
/* Dialogs: header (with close button) stays visible; body scrolls on short screens */
.modal[open] { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); overflow: hidden; }
.modal .modal-head { flex: none; }
.modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.modal .modal-head h2 { overflow-wrap: anywhere; }
.rq-summary { margin: 0 0 14px; padding: 12px 14px; border-left: 4px solid var(--red); background: var(--light); border-radius: 4px; font-weight: 600; color: var(--navy); }
.rq-note { margin: 10px 0 0; }

/* Fuel options guide (How to get fuel, Find Fuel) */
.fuel-options { display: grid; gap: clamp(14px, 1.6vw, 22px); grid-template-columns: 1fr; }
@media (min-width: 700px) { .fuel-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fuel-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fopt { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 22px 20px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: var(--radius); }
.fopt-n { position: absolute; right: 18px; top: 14px; font: italic 900 2.2rem/1 var(--f-display); color: var(--steel); }
.fopt h3 { margin: 0 0 4px; font-size: 1.6rem; }
.fopt .kicker { margin: 0; }
.fopt dl { margin: 6px 0 14px; display: grid; gap: 10px; }
.fopt dt { font: 700 .7rem/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.fopt dd { margin: 2px 0 0; font-size: .95rem; color: var(--ink-2); }
.fopt .btn { margin-top: auto; align-self: flex-start; }

/* Featured event band (Key West) */
.kw-feature { position: relative; isolation: isolate; color: #fff; background: var(--navy-deep); overflow: hidden; }
.kw-media { position: absolute; inset: 0; z-index: -2; }
.kw-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.kw-feature::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6,18,46,.96) 0%, rgba(6,18,46,.88) 45%, rgba(6,18,46,.55) 100%); }
.kw-inner { display: grid; gap: 28px; padding-top: clamp(40px, 5vw, 76px); padding-bottom: clamp(40px, 5vw, 76px); align-items: center; }
@media (min-width: 900px) { .kw-inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.kw-feature h2 { font-size: clamp(2.2rem, 1.2rem + 4vw, 4.6rem); line-height: .92; margin: 6px 0 10px; }
.kw-feature h2 span { display: block; font-size: 1.35em; color: #fff; }
.kw-dates { font: 700 1.05rem/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #FFD27A; margin: 0 0 10px; }
.kw-sub { color: #D5DEEE; max-width: 46ch; margin: 0 0 20px; }
.kw-feature .link-arrow { color: #fff; }
.kw-count { justify-self: start; padding: 22px 24px; border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius); background: rgba(6,18,46,.6); backdrop-filter: blur(4px); min-width: min(100%, 300px); }
@media (min-width: 900px) { .kw-count { justify-self: end; } }
.kw-num { margin: 0 0 12px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kw-num b { font: italic 900 clamp(3.4rem, 2.4rem + 3vw, 5rem)/.9 var(--f-display); }
.kw-num span { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: #D5DEEE; }
.kw-count.is-live .kw-num b { color: #FF8C96; }
.kw-days { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kw-days li { padding: 6px 10px; border-radius: 4px; background: var(--red); font-weight: 700; font-size: .85rem; }
.kw-count .tiny { color: #B9C6DF; margin: 0; }

/* Shop (2026-10-05): category tiles, apparel link in the category panel, collapsed apparel rail */
.prog .cat-count { display: block; font-style: normal; font-size: .74rem; color: #C9D4EA; margin-top: 3px; min-height: 1em; }
.cat-apparel { margin: 0; padding: 6px 6px 0; }
.cat-apparel a { display: block; padding: 7px 10px; border-radius: var(--radius); background: var(--light); color: var(--navy); font-weight: 700; font-size: .88rem; text-decoration: none; }
.cat-apparel a:hover { background: var(--light-2); }
.rail-more { margin-top: 16px; }
.products > [hidden] { display: none; }
.prog .d { display: block; font-style: normal; }
@media (max-width: 599.98px) { .shop-tiles .prog .d { display: none; } }

/* Find Fuel (2026-10-05): the question + three paths, compact so the search stays above the fold on phones */
.ff-hero { padding-top: 26px; padding-bottom: 22px; }
.ff-hero h1 { max-width: none; margin-bottom: 8px; font-size: clamp(2rem, 1.5rem + 2.4vw, 3.4rem); }
.ff-hero .lede { margin: 0 0 16px; }
.ff-paths { display: grid; gap: 8px; margin-top: 12px; }
@media (min-width: 760px) { .ff-paths { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
.ff-path { position: relative; display: flex; gap: 12px; align-items: center; padding: 10px 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); }
.ff-path:hover, .ff-path:focus-within { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
.ff-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--red); }
.ff-ic svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; }
.ff-main { display: block; font: 700 1.2rem/1.1 var(--f-display); text-transform: uppercase; color: #fff; text-decoration: none; }
.ff-main::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.ff-main:focus-visible { outline: none; } .ff-main:focus-visible::after { outline: 3px solid #fff; outline-offset: 2px; }
.ff-d { display: inline; font-size: .84rem; color: #C9D4EA; }
.ff-alt { position: relative; z-index: 1; display: inline; margin-left: 8px; font-size: .8rem; color: #fff; text-underline-offset: 2px; }
@media (min-width: 760px) { .ff-path { align-items: flex-start; padding: 14px 16px; } .ff-d { display: block; margin: 4px 0 6px; } .ff-alt { margin-left: 0; } }
@media (max-width: 599.98px) { .hide-sm { display: none; } }
.fopt .kicker { padding-right: 56px; }
.loc-tabs, #how-it-works, #apparel, #catalog { scroll-margin-top: calc(var(--header-h) + 12px); }
.ff-alt { display: inline-block; min-height: 24px; padding: 4px 0; }
.cat-panel h3 { font-size: 1.1rem; padding: 14px 16px; margin: 0; border-bottom: 1px solid var(--line); }

/* ===================== Polish pass (2026-10-05): racing, footer, shop, fuel options, tap targets ===================== */
html:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 64px); }
.boat :focus-visible, .person :focus-visible, .driver :focus-visible { outline-color: var(--red); }
.btn:focus-visible { outline-offset: 3px; }
.btn-ghost:active, .link-arrow:active { opacity: .8; }
@media (max-width: 759.98px) { .lede { max-width: 46ch; } }

/* tap targets: 44px minimum for links, summaries and source links */
.link-arrow, .src-link { display: inline-flex; align-items: center; min-height: 44px; }
.src-link { font-size: .85rem; }
.sources summary, .more > summary, .fopt-more > summary, .svc-listings summary, .more-list summary { min-height: 44px; display: inline-flex; align-items: center; }
.sources summary { padding: 0; font-size: .85rem; }
.sources ul { font-size: .85rem; }
.sources li { margin: .35em 0; }
.ff-alt { padding: 10px 6px; margin: -10px 0 -10px 2px; }

/* disclosures ("more") used on racing */
.more { margin-top: 6px; }
.more > summary { gap: .5em; cursor: pointer; list-style: none; font-weight: 700; font-size: .92rem; color: var(--royal); }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; font-size: 1rem; line-height: 1; }
.more[open] > summary::before { content: "–"; }
.more > summary:hover { color: var(--red); }
.more-h { margin: 10px 0 4px; font: 700 .72rem/1.4 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.career-list { margin: 0 0 10px; padding-left: 1.1em; font-size: .92rem; }
.more .quote { margin-top: 12px; }
.more-dark > summary, .more-dark.sources summary { color: #fff; }

/* racing: cards share one media ratio and one body padding */
.person-media, .driver-media { aspect-ratio: 16 / 10; }
@media (min-width: 760px) { .person-h .person-media { aspect-ratio: 16 / 10; } }
.person-body, .driver-body { padding: 20px 22px 18px; }
.person-body h3 { margin-bottom: .3em; }
.person-text { border-top: 4px solid var(--navy); }
.person-text .person-body { padding-top: 22px; }
.plates-inline { display: flex; gap: 14px; margin: 0 0 16px 4px; }
.plates-inline .plate.sm { font-size: 1.7rem; }
.boat-body { padding: clamp(18px, 2.4vw, 32px); }
@media (min-width: 960px) {
  .boat-body > .boat-hist { grid-column: 2; grid-row: 1 / span 6; margin-top: 4px; }
}
.tone-dark .boat, .tone-dark .boat .kicker { color: var(--ink); }
.tone-dark .boat .kicker { color: var(--red); }
.timeline .yr { font-size: 1.15rem; }
.timeline li { padding-bottom: 14px; }
.timeline-lg .src { font-size: .85rem; }
.more-lg { margin: 4px 0 8px; }
.subnav a { display: flex; align-items: center; min-height: 46px; padding-top: 0; padding-bottom: 0; }
@media (max-width: 759.98px) {
  .subnav .wrap { padding-right: 36px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .person-body, .driver-body { padding: 18px 18px 14px; }
}
.sup-list { list-style: none; margin: 0 0 4px; padding: 0; display: grid; border-top: 2px solid #fff; }
.sup-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 14px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.sup-list strong { font: 700 1.3rem/1.15 var(--f-display); text-transform: uppercase; }
.sup-list span { font-size: .88rem; color: #CBD5E3; }
@media (min-width: 760px) { .sup-list { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.on-dark-src li { margin: .6em 0; }
.on-dark-src em { color: #B7C3D3; font-style: normal; }

/* find fuel: six options as compact rows */
.fuel-options { gap: 10px; align-items: start; }
@media (min-width: 700px) { .fuel-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fuel-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fopt { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 12px 14px 4px; border-top: 1px solid var(--line); border-left: 4px solid var(--red); }
.fopt-n { position: static; font-size: 1.7rem; line-height: 1; color: var(--steel); }
.fopt-head h3 { margin: 0; font-size: 1.35rem; }
.fopt-best { margin: 2px 0 0; font-size: .9rem; line-height: 1.35; color: var(--ink-2); }
.fopt-best span { font: 700 .68rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); margin-right: 4px; }
.fopt .btn { margin-top: 0; align-self: center; white-space: nowrap; }
.fopt-more { grid-column: 1 / -1; }
.fopt-more > summary { cursor: pointer; list-style: none; gap: .5em; font-weight: 700; font-size: .88rem; color: var(--royal); }
.fopt-more > summary::-webkit-details-marker { display: none; }
.fopt-more > summary::after { content: "+"; font-size: 1.1rem; }
.fopt-more[open] > summary::after { content: "–"; }
.fopt-more dl { margin: 0 0 12px; display: grid; gap: 8px; }
.fopt-more dd { margin: 2px 0 0; font-size: .92rem; color: var(--ink-2); }
/* section 5 (2026-10-05): row and card actions are text links, not a stack of buttons */
.fopt .fopt-cta { align-self: center; white-space: nowrap; font-size: .9rem; }
@media (max-width: 559.98px) { .fopt .fopt-cta { grid-column: 2; justify-self: start; margin: 4px 0 6px; } }
.card-body .link-arrow { margin-top: auto; align-self: flex-start; }
.ev-links { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.ev-links .link-arrow { font-size: .92rem; }
.fopt:hover { border-top-color: var(--steel-2); }
@media (max-width: 420px) { .fopt { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px 10px; padding-left: 12px; } .fopt .btn { padding: 8px 10px; font-size: .78rem; } }

/* shop: category panel is a "Browse categories" disclosure on phones; titles clamp to 2 lines */
.cat-details > summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 16px; cursor: pointer; list-style: none; font: 700 1.15rem/1 var(--f-display); text-transform: uppercase; color: var(--navy); }
.cat-details > summary::-webkit-details-marker { display: none; }
.cat-details > summary::after { content: "+"; font: 400 1.6rem/1 var(--f-body); }
.cat-details[open] > summary::after { content: "–"; }
.cat-details[open] > summary { border-bottom: 1px solid var(--line); }
@media (min-width: 1000px) { .cat-details > summary { pointer-events: none; } .cat-details > summary::after { content: none; } }
@media (max-width: 999.98px) {
  .cat-panel { max-height: none; overflow: visible; }
  .cat-tree a, .cat-tree button.cat-x, .cat-apparel a { min-height: 44px; align-items: center; display: flex; }
  .cat-tree .c { display: none; }
  .cat-tree { padding: 6px 6px 10px; }
}
.pcard .p-name { -webkit-line-clamp: 2; min-height: 2.7em; }
.pcard .p-meta { color: var(--steel); }

/* footer: accordions on phones (open + always-on at 900px+), 44px links, side-by-side app badges */
.foot-acc > summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; cursor: pointer; list-style: none; font: 700 .8rem/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.foot-acc > summary::-webkit-details-marker { display: none; }
.foot-acc > summary::after { content: "+"; font: 400 1.5rem/1 var(--f-body); letter-spacing: 0; }
.foot-acc[open] > summary::after { content: "–"; }
.foot-navs { border-top: 1px solid rgba(255,255,255,.12); }
.foot-navs nav { border-bottom: 1px solid rgba(255,255,255,.12); }
.site-footer .foot-acc ul { gap: 0; padding-bottom: 8px; }
.site-footer .foot-acc li a { display: flex; align-items: center; min-height: 44px; }
.footer-brand img { width: 170px; margin-bottom: 12px; }
.footer-top { gap: 20px; padding-bottom: 12px; }
.footer-contacts { gap: 14px; padding: 18px 0; }
.footer-contacts h3 { font-size: 1.1rem; margin-bottom: 2px; }
.fc-line { margin: 0; line-height: 1.4; }
.fc-line a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.fc-addr { margin: 0; font-size: .85rem; color: #AAB8CC; }
.footer-apps { padding-top: 6px !important; }
.footer-apps p { font-size: .85rem; line-height: 1.5; color: #AAB8CC; }
.app-badges { flex-wrap: nowrap; }
.app-badge { flex: 1 1 0; min-width: 0; justify-content: center; padding: 8px 10px; gap: 8px; }
.app-badge strong { font-size: .95rem; white-space: nowrap; }
.footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 560px) { .app-badge { flex: 0 0 auto; padding: 8px 14px; } }
@media (min-width: 900px) {
  .foot-navs { display: contents; }
  .foot-navs nav { border: 0; }
  .foot-acc > summary { pointer-events: none; min-height: 0; margin: 0 0 10px; }
  .foot-acc > summary::after { content: none; }
  .site-footer .foot-acc li a { min-height: 34px; }
  .footer-top { gap: 26px; padding-bottom: 24px; }
  .footer-brand img { width: 220px; margin-bottom: 16px; }
  .footer-contacts { gap: 20px; padding: 28px 0; }
  .fc-line a { min-height: 0; }
  .footer-apps { padding-top: 0 !important; }
}
.fc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
@media (min-width: 760px) { .hide-lg { display: none; } }
@media (max-width: 759.98px) {
  [aria-labelledby="pg-h"] .mosaic.fixed .m-item:nth-child(n+4) { display: none; }
  .boat-media { min-height: 0; aspect-ratio: 16 / 9; }
  .person-media, .driver-media { aspect-ratio: 16 / 9; }
  .spec { margin: 12px 0 14px; padding: 12px 0; gap: 6px 14px; }
}
@media (max-width: 759.98px) { .tc-teaser { min-height: 190px; } .section-head { margin-bottom: 14px; } .section-head .lede { margin-bottom: 0; } }
@media (max-width: 759.98px) { .svc-media { min-height: 0; aspect-ratio: 16 / 8; } .svc-list { gap: 14px; } .svc-body .lede { font-size: 1rem; } }

/* ---------- 2026-10-05 fixes (main session) ---------- */
/* Find Fuel option rows: on narrow phones the button drops under the text so titles keep their width */
@media (max-width: 559.98px) {
  .fopt { grid-template-columns: 30px minmax(0, 1fr); }
  .fopt .btn { grid-column: 2; justify-self: start; margin: 6px 0 4px; }
}
/* Request dialog: text written for another item is offered, never merged */
.rq-draft { margin: 8px 0 0; padding: 8px 10px; background: var(--light); border-radius: 4px; color: var(--ink-2); }
.link-btn { display: inline-block; padding: 6px 2px; background: none; border: 0; font: inherit; font-weight: 700; color: var(--royal); text-decoration: underline; cursor: pointer; }
.link-btn:focus-visible { outline: 3px solid var(--royal); outline-offset: 2px; }

/* ---------- Header (2026-10-05 redesign): one row — logo · menu · Shop + Find Fuel ---------- */
/* Above everything on every page (maps, videos, sticky bars, cards). */
.site-header { z-index: 1000; background: var(--navy); box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(6, 18, 46, .28); }
.site-header .flag-rule { height: 3px; }
.site-header .hdr { display: flex; align-items: center; gap: 12px; height: var(--header-h); }
.site-header .brand { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.site-header .brand-logo { height: 40px; width: auto; max-width: 100%; }
.hdr-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.hdr-shop { display: none; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border: 1.5px solid rgba(255,255,255,.42); border-radius: var(--radius); color: #fff; text-decoration: none; font: 700 .8rem/1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; transition: border-color .2s, background-color .2s; }
.hdr-shop .i { width: 16px; height: 16px; }
.hdr-shop:hover, .hdr-shop[aria-current="page"] { border-color: #fff; background: rgba(255,255,255,.08); }
.site-header .nav-cta { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; margin: 0; font-size: .82rem; white-space: nowrap; }
.site-header .nav-cta .i { width: 18px; height: 18px; }
.site-header .nav-toggle { width: 44px; height: 44px; flex: none; }
@media (min-width: 600px) { .hdr-shop { display: inline-flex; } }
@media (max-width: 379.98px) { .site-header .brand-logo { height: 32px; } .site-header .nav-cta { padding: 0 12px; } }

/* phones & tablets: full-height menu under the header */
@media (max-width: 1099.98px) {
  .site-nav.is-open { background: var(--navy-deep); padding: 8px var(--gutter) 28px; }
  .site-nav .nav-list > li { border-bottom: 1px solid rgba(255,255,255,.1); }
  .site-nav .top-link, .site-nav summary { min-height: 60px; font: 700 1.55rem/1 var(--f-display); letter-spacing: .03em; text-transform: uppercase; color: #fff; }
  .site-nav .sub { padding: 0 0 16px 4px; }
  .site-nav .sub a { padding: 11px 0; font-size: 1.02rem; color: #D6DEE9; }
  .site-nav .mobile-extra { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .site-nav .mobile-extra .btn { justify-content: center; }
}

/* desktop: logo left, menu centred, buttons right */
@media (min-width: 1100px) {
  .site-header .hdr { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; }
  .site-header .brand-logo { height: 46px; }
  .site-nav { justify-self: center; align-self: stretch; }
  .site-nav .nav-list { display: flex; height: 100%; align-items: stretch; gap: 2px; }
  .site-nav .nav-list > li { position: relative; display: flex; }
  .site-nav .top-link, .site-nav summary { position: relative; padding: 0 14px; border: 0; background: none; font: 700 1.06rem/1 var(--f-display); letter-spacing: .07em; color: #E4EAF6; transition: color .2s; }
  /* red underline grows under the hovered, open or current item */
  .site-nav .top-link::before, .site-nav summary::before { content: ""; position: absolute; left: 14px; right: 14px; top: calc(50% + 14px); height: 2px; background: var(--red); transform: scaleX(0); transition: transform .2s var(--ease); }
  .site-nav .top-link:hover, .site-nav summary:hover, .site-nav details[open] > summary, .site-nav [aria-current="page"], .site-nav .is-section > summary { color: #fff; background: none; border: 0; }
  .site-nav .top-link:hover::before, .site-nav summary:hover::before, .site-nav details[open] > summary::before, .site-nav [aria-current="page"]::before, .site-nav .is-section > summary::before { transform: scaleX(1); }
  .site-nav summary::after { width: 6px; height: 6px; margin-left: 6px; opacity: .7; }
  .site-nav .sub {
    top: calc(100% - 8px); left: 50%; right: auto; transform: translateX(-50%); min-width: 320px; padding: 10px; border: 0; border-radius: 10px;
    box-shadow: 0 2px 6px rgba(6,18,46,.12), 0 28px 60px rgba(6,18,46,.32); z-index: 1100;
  }
  .site-nav .sub::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--red); }
  .site-nav .sub a { padding: 11px 14px; border-radius: 8px; font-size: .95rem; }
  .site-nav .nav-list > li:last-child .sub { left: auto; right: -6px; transform: none; }
  .site-nav .mobile-extra { display: none; }
  .hdr-actions { gap: 12px; }
}

/* ---------- Key West feature (2026-10-05): live countdown beside a clear photo of our boat ---------- */
.kw-feature { background: radial-gradient(120% 140% at 100% 0%, #13306B 0%, var(--navy-deep) 62%); }
.kw-feature::before { display: none; }
.kw-grid { display: grid; gap: 26px; padding-top: clamp(36px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 76px); align-items: center; }
@media (min-width: 900px) { .kw-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 52px; } }
.kw-photo { margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--navy-2); box-shadow: 0 30px 60px rgba(0, 0, 0, .35); }
.kw-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899.98px) { .kw-photo { order: -1; aspect-ratio: 16 / 10; } }
.kw-feature .kicker { margin-bottom: 4px; }
.kw-feature .kw-dates { margin-bottom: 0; }
.kw-clock { margin: 22px 0 16px; }
.kw-clock-label { margin: 0 0 10px; font: 700 .8rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: #C9D4EA; }
.kw-boxes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 540px; }
.kw-boxes li { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 16px 4px 13px; border-radius: 10px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18); }
.kw-boxes li:first-child { background: var(--red); border-color: var(--red); }
.kw-boxes b { font: 800 clamp(2.3rem, 1.5rem + 3vw, 3.9rem)/1 var(--f-display); font-variant-numeric: tabular-nums; color: #fff; }
.kw-boxes span { margin-top: 8px; font: 700 .68rem/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #B7C6E4; }
.kw-boxes li:first-child span { color: #FFE1E4; }
.kw-state { margin: 0; display: inline-flex; flex-direction: column; gap: 8px; padding: 18px 24px; border-radius: 10px; background: var(--red); }
.kw-state b { font: italic 800 clamp(2.3rem, 1.6rem + 2.4vw, 3.4rem)/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em; }
.kw-state span { font-weight: 600; color: #FFE3E6; }
.is-done .kw-state { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); }
.is-done .kw-state span { color: #D5DEEE; }
.kw-feature .kw-days { display: block; margin: 0 0 22px; font-size: .95rem; font-weight: 700; color: #fff; }
.kw-feature .kw-days span { font-weight: 500; color: #AFC0E0; }
.kw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }

/* ---------- Video & reels (2026-10-05): equal cards, real thumbnails, one play button style ---------- */
.vgrid { list-style: none; margin: 0; padding: 0 0 8px; display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; }
@media (min-width: 700px) { .vgrid { grid-auto-columns: 30%; gap: 18px; } }
@media (min-width: 1100px) { .vgrid { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; } }
.vcard { min-width: 0; scroll-snap-align: start; }
.vthumb { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--navy-2); color: #fff; text-decoration: none; cursor: pointer; isolation: isolate; }
.vthumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.vthumb::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(6, 18, 46, .78)); pointer-events: none; }
.vthumb:hover img, .vthumb:focus-visible img { transform: scale(1.04); }
.vthumb:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.vplay { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 10px 28px rgba(0, 0, 0, .35); transition: transform .2s var(--ease); }
.vplay svg { width: 26px; height: 26px; margin-left: 4px; fill: var(--red); }
.vthumb:hover .vplay { transform: scale(1.08); }
.vdur, .vsrc { position: absolute; z-index: 1; bottom: 10px; padding: 4px 8px; border-radius: 4px; background: rgba(6, 18, 46, .82); font: 700 .74rem/1.2 var(--f-body); letter-spacing: .02em; }
.vdur { right: 10px; font-variant-numeric: tabular-nums; }
.vsrc { left: 10px; right: 10px; text-align: center; }
.vtitle { margin: 12px 0 4px; font: 700 1.3rem/1.05 var(--f-display); text-transform: uppercase; letter-spacing: .02em; color: #fff; }
.vcap { margin: 0; font-size: .88rem; line-height: 1.45; color: #B9C6DF; }
.vmore { margin: 24px 0 0; }
dialog.video-modal { padding: 0; border: 0; background: transparent; overflow: visible; max-width: none; max-height: none; }
dialog.video-modal::backdrop { background: rgba(4, 10, 26, .88); }
.vm-frame { background: #000; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.vm-frame.is-wide { width: min(92vw, 1000px); aspect-ratio: 16 / 9; }
.vm-frame.is-tall { height: min(84vh, 760px); aspect-ratio: 9 / 16; max-width: 92vw; }
.vm-frame video, .vm-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.vm-close { position: fixed; top: 14px; right: 14px; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #fff; color: var(--navy); font-size: 1.9rem; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }

/* ---------- Client round 2026-10-07 (live site + additions): socials, video cards, racers, Key West entry ---------- */
/* Social icons: a compact row in the header from 1366 px, the first width where the full menu leaves room for it without
   shrinking the logo (the header content is capped at 1240 px); the phone/tablet menu opens with the footer's round icons */
.hdr-social { display: none; }
@media (min-width: 1366px) {
  .hdr-social { display: flex; align-items: center; }
  .hdr-social a { display: grid; place-items: center; width: 24px; height: 32px; border-radius: 6px; color: #C9D4EA; transition: color .2s, background-color .2s; }
  .hdr-social a:hover, .hdr-social a:focus-visible { color: #fff; background: rgba(255,255,255,.08); }
  .hdr-social svg { width: 16px; height: 16px; fill: currentColor; }
}
.nav-social { display: none; }
@media (max-width: 1099.98px) {
  .site-nav .nav-social { display: block; padding: 14px 0 18px; border-bottom: 1px solid rgba(255,255,255,.1); }
  .nav-social-h { margin: 0 0 10px; font: 700 .76rem/1.3 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--sky); }
  .nav-social .social a { color: #fff; }
  .nav-social .social a:hover { color: var(--navy); }
}
.social { flex-wrap: wrap; }
.site-footer .social, .nav-social .social, .contact-cards .social { gap: 8px; }
/* where one row doesn't fit, balanced rows (4 + 3 in the footer, 3 + 3 in the Contact card and the menu) instead of a lone icon */
@media (max-width: 389.98px), (min-width: 900px) { .site-footer .social { max-width: 208px; } }
@media (max-width: 399.98px) { .contact-cards .social { max-width: 148px; } }
@media (max-width: 339.98px) { .nav-social .social { max-width: 148px; } }

/* Follow Fuel 1 Team (Home): the supported-teams list with the footer's round icons */
.follow-list li { padding: 0; }
.follow-list a { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 0; color: #fff; text-decoration: none; }
.follow-list .fl-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; color: #fff; transition: background-color .2s, color .2s; }
.follow-list .fl-icon svg { width: 20px; height: 20px; fill: currentColor; }
.follow-list .fl-handle { margin-left: auto; }
.follow-list a:hover .fl-icon, .follow-list a:focus-visible .fl-icon { background: #fff; color: var(--navy); }

/* Landscape videos (YouTube, FOX 7, Facebook posts): the Gallery video card at 16:9, three across on desktop */
.vgrid.is-wide { grid-auto-columns: 82%; }
@media (min-width: 700px) { .vgrid.is-wide { grid-auto-columns: 46%; } }
@media (min-width: 1100px) { .vgrid.is-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vgrid.is-wide .vthumb { aspect-ratio: 16 / 9; }
@media (min-width: 1100px) { .vgrid.is-wide.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Sponsored racers (client, 2026-10-15): name + Instagram account in the "Fuel 1 on other boats" list style, on a light section;
   each row opens the racer's Instagram */
.racer-list { border-top-color: var(--navy); }
.racer-list li { padding: 0; border-bottom-color: var(--line); }
.racer-list a { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px; width: 100%; padding: 14px 0; color: var(--navy); text-decoration: none; }
.racer-list strong { transition: color .2s; }
.racer-list .rl-ig { display: inline-flex; align-items: center; gap: 7px; font-size: .92rem; color: var(--steel); transition: color .2s; }
.racer-list .rl-ig svg { flex: none; width: 16px; height: 16px; fill: currentColor; }
.racer-list a:hover strong, .racer-list a:focus-visible strong, .racer-list a:hover .rl-ig, .racer-list a:focus-visible .rl-ig { color: var(--red); }
@media (min-width: 640px) { .people-grid > .person:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* Header dropdowns: every panel centred under its own menu item. An older rule right-aligned the last two panels, and with
   the centring transform that pushed Fuel Products' panel about 230 px left of its item (the live site had the same flaw) */
@media (min-width: 1100px) {
  .site-nav .nav-list > li:nth-last-child(2) .sub, .site-nav .nav-list > li:last-child .sub { left: 50%; right: auto; transform: translateX(-50%); }
}

/* In-page menus (Racing, Fuel Services): every link fits on laptop screens (at 1100 px they hid "Great Loop" and "Storm
   readiness"); on tablets the row scrolls sideways like on phones, with the same fade at the right edge as a cue */
@media (min-width: 1100px) and (max-width: 1365.98px) {
  .subnav .wrap { gap: 0; }
  .subnav a { padding-left: 7px; padding-right: 7px; font-size: .76rem; letter-spacing: .03em; }
}
@media (min-width: 760px) and (max-width: 1099.98px) {
  .subnav .wrap { padding-right: 36px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
}
/* A service row with two links (Home, 06): the second sits under the first in the link column instead of wrapping to the
   number column, where it stuck out past the left edge of the page */
@media (min-width: 900px) { .row .row-cta + .row-cta { grid-column: 4; } }

/* Key West: both Fuel 1 boats entered */
.kw-entered { margin: 10px 0 0; font-weight: 700; color: #fff; }

/* A row of exactly three photos stays three across from 640 px (the site's 3-column grid is 2 columns below 1000 px) */
@media (min-width: 640px) { .grid-3.row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }