@charset "UTF-8";
/* ==========================================================================
   Cycle Claims Direct — design system
   Built by CREATE, 2026. Replaces a 225 KB Foundation-based theme stylesheet.
   Brand palette carried over from the original site: navy #000239, gold #977749.
   ========================================================================== */

/* ---------------------------------------------------------------- font
   Outfit variable, self-hosted. One 32 KB file covers weights 300-800 and
   removes the render-blocking request to fonts.googleapis.com. */
@font-face {
  font-family: 'Outfit';
  /* Relative on purpose: resolves from /assets/css/ so the stylesheet works
     at the domain root and inside a staging subdirectory alike. */
  src: url('../fonts/outfit-latin.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Barlow Condensed 800. Used by exactly one thing: the "Site by CREATE" wordmark
   in the footer. Self-hosted to match Outfit — this site makes no font request
   off-domain, so a Google Fonts link for one word was not an option. Without it
   the wordmark silently falls back to Outfit and the credit is wrong. */
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/barlow-condensed-800-latin.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens */
:root {
  --navy:        #000239;
  --navy-deep:   #00011d;
  --navy-soft:   #0b0d47;
  --gold:        #977749;   /* brand gold — decoration only: rules, borders, icons */
  --gold-ink:    #866a41;   /* accessible gold — ALL gold text on light panels, and
                               the gold button background under white text. Brand
                               gold #977749 is only 4.16:1 on white (fails AA).
                               This clears 4.5:1 on white (5.06), on --paper-warm
                               (4.68) and on --paper-cool (4.59), and white text on
                               it is 5.06:1. Visually indistinguishable. */
  --gold-bright: #b8935a;   /* gold on navy — 6.89:1, for dark panels */
  --gold-dark:   #4c3c25;   /* deep gold — links in body copy, 10.6:1 */
  --ink:         #0a0a0a;
  --ink-soft:    #3d4152;
  --line:        #dfe1ea;
  --paper:       #ffffff;
  --paper-warm:  #f7f6f3;
  --paper-cool:  #f2f4f8;
  --paper-sand:  #faf5ec;   /* third panel tone, used by the homepage news strip
                               so it is not a third repeat of warm or cool */
  --muted:       #5f6376;   /* small print. Passes AA on white and on both
                               tinted section backgrounds. */
  --ok:          #157539;

  --wrap:   1220px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* Type scale. Headings are fluid so they never need a mid-word break. */
  --fs-hero: clamp(2.2rem, 5.4vw, 4.15rem);
  --fs-h1:   clamp(1.9rem, 4vw, 3.1rem);
  --fs-h2:   clamp(1.6rem, 2.9vw, 2.3rem);
  --fs-h3:   clamp(1.25rem, 2.1vw, 1.65rem);
  --fs-body: clamp(1.0625rem, 1.15vw, 1.1875rem);
  --fs-lede: clamp(1.125rem, 1.4vw, 1.3125rem);
  --fs-sm:   0.9375rem;

  --r:    14px;
  --r-lg: 22px;
  --shadow:    0 2px 4px rgba(0, 2, 57, .04), 0 12px 28px -8px rgba(0, 2, 57, .10);
  --shadow-lg: 0 4px 8px rgba(0, 2, 57, .05), 0 28px 60px -16px rgba(0, 2, 57, .20);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
body {
  margin: 0;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, picture, svg, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--navy);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.022em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.012em; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--navy); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: .9rem 1.4rem; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- layout
   Dom's core rule: headings and body copy run the FULL width of the container.
   No max-width caps that wrap a title early. Copy is only narrowed when it sits
   in a column beside an image, which the grid handles by column width instead. */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
section { position: relative; }
.sect      { padding-block: clamp(3.25rem, 5.5vw, 5.25rem); }
.sect--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.sect--navy  { background: var(--navy); color: #c6c9de; }
:where(.sect--navy) h2, :where(.sect--navy) h3, :where(.sect--navy) h1 { color: #fff; }
.sect--warm  { background: var(--paper-warm); }
.sect--cool  { background: var(--paper-cool); }
.sect--sand  { background: var(--paper-sand); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0 0 1rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-ink);
}
.eyebrow::before {
  content: ''; width: 2rem; height: 2px; background: var(--gold-ink); flex: none;
}
.sect--navy .eyebrow,
.hero .eyebrow,
.pagehead .eyebrow,
.band .eyebrow { color: var(--gold-bright); }
.sect--navy .eyebrow::before,
.hero .eyebrow::before,
.pagehead .eyebrow::before,
.band .eyebrow::before { background: var(--gold-bright); }

.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--ink-soft); font-weight: 300; }
/* On every dark panel the lede must lighten. Listing only .sect--navy left the
   page headers and CTA bands rendering dark ink on navy, which failed contrast. */
:where(.sect--navy, .hero, .pagehead, .band) .lede { color: #c3c7dc; }

/* Gold rule used as a section divider */
.rule { height: 2px; width: 3.25rem; background: var(--gold); border: 0; margin: 1.75rem 0; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.0625rem 1.9rem;
  /* background and font are stated explicitly because .btn is used on <button> as
     well as <a>. A <button> otherwise inherits the UA's buttonface background and
     system font, which rendered the hero callback button white-on-white. */
  background: transparent; font-family: inherit;
  border: 2px solid transparent; border-radius: 999px;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer;
  transition: transform .22s var(--ease), background-color .22s var(--ease),
              color .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.btn .icon { width: 1.15em; height: 1.15em; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--gold  { background: var(--gold-ink); color: #fff; box-shadow: 0 10px 24px -10px rgba(151,119,73,.7); }
/* Hover DARKENS. Lightening to --gold-bright dropped white text to 3.2:1. */
.btn--gold:hover { background: #7b6039; }
.btn--navy  { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-soft); }
.btn--ghost { border-color: currentColor; color: var(--navy); }
.btn--ghost:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
/* Ghost buttons take their border from currentColor, so on any dark panel they
   must switch to white or they render navy-on-navy and vanish. */
.sect--navy .btn--ghost,
.hero .btn--ghost,
.pagehead .btn--ghost,
.band .btn--ghost { color: #fff; }
.sect--navy .btn--ghost:hover,
.hero .btn--ghost:hover,
.pagehead .btn--ghost:hover,
.band .btn--ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }
/* Solid white pill with the same gold as the button beside it. Used on the hero,
   where an outline-only ghost button read as washed out against the photograph. */
.btn--white { background: #fff; border-color: #fff; color: var(--gold-ink); }
.btn--white:hover { background: #fff; border-color: #fff; color: #7b6039; }

.btn--lg { padding: 1.15rem 2.3rem; font-size: 1.125rem; }
.btn--block { width: 100%; }

/* ---------------------------------------------------------------- header */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header__bar {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 74px;
}
.header__logo { flex: none; display: block; }
.header__logo img { width: 168px; height: auto; }
.header__nav { margin-left: auto; margin-right: auto; }
.header__list {
  display: flex; align-items: center; gap: .35rem;
  list-style: none; margin: 0; padding: 0;
}
.header__list a {
  display: block; padding: .6rem .8rem; border-radius: 999px;
  white-space: nowrap;
  font-size: .9688rem; font-weight: 500; color: #d3d6e6; text-decoration: none;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.header__list a:hover { color: #fff; background: rgba(255,255,255,.08); }
.header__list a[aria-current] { color: var(--gold-bright); }
/* The in-nav CTA is for the mobile drawer only. On desktop the header__cta
   button already covers it, and rendering both gave two identical buttons. */
.header__nav-cta { display: none; }
/* The single header CTA. Reads as a phone block, not a button competing with one. */
.header__tel {
  flex: none;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem .95rem .5rem .8rem;
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.header__tel:hover { background: rgba(255,255,255,.07); border-color: var(--gold-bright); }
.header__tel .icon { width: 1.15rem; height: 1.15rem; color: var(--gold-bright); flex: none; }
.header__tel-txt { display: flex; flex-direction: column; line-height: 1.15; }
.header__tel-txt small {
  font-size: .6875rem; letter-spacing: .07em; text-transform: uppercase; color: #9aa0c0;
}
.header__tel-txt strong { font-size: 1.0625rem; font-weight: 600; color: #fff; }

.burger {
  display: none; margin-left: auto;
  width: 46px; height: 46px; padding: 0;
  background: rgba(255,255,255,.08); border: 0; border-radius: 12px;
  color: #fff; cursor: pointer;
}
.burger span {
  display: block; width: 20px; height: 2px; margin: 4px auto;
  background: currentColor; border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Seven nav items plus a phone number and a button need real room. Below this
   the desktop bar crowds, so the drawer takes over earlier than a typical
   tablet breakpoint would. */
@media (max-width: 940px) {
  .burger { display: block; }
  .header__nav-cta { display: block; }
  .header__nav { margin: 0; }
  .header__nav {
    position: fixed; inset: 74px 0 auto 0; margin: 0;
    max-height: calc(100dvh - 74px); overflow-y: auto;
    background: var(--navy-deep);
    border-bottom: 1px solid rgba(255,255,255,.1);
    display: none;
  }
  .header__nav.is-open { display: block; }
  .header__list { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gutter) 1.5rem; }
  .header__list a { padding: 1rem .25rem; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,.07); border-radius: 0; }
  .header__list li:last-child a { border-bottom: 0; }
  .header__list .header__nav-cta { margin-top: 1rem; }
}
@media (max-width: 620px) {
  .header__logo img { width: 138px; }
  .header__tel { margin-left: auto; padding: 0; width: 44px; height: 44px;
    justify-content: center; background: rgba(255,255,255,.08); border-radius: 12px; }
  .header__tel-txt { display: none; }
  .header__tel .icon { width: 1.3rem; height: 1.3rem; }
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
/* The <picture> wrapper has to be stretched too. height:100% on the <img> resolves
   against <picture>, not .hero__media, and an auto-height parent makes it fall back
   to the image's natural height — which left the photograph filling only the top of
   a tall mobile hero with flat navy beneath it. */
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  /* Light enough that the photograph reads, dark enough that the headline stays
     well clear of the AA threshold on the left where the copy sits. */
  /* Light enough that the photograph reads, dark enough that the copy clears AA.
     Verified at 13:1 on the lede by sampling the composited background with the
     glyphs hidden, so do not darken this further "for contrast". */
  background:
    linear-gradient(100deg, rgba(0,2,57,.90) 0%, rgba(0,2,57,.72) 38%, rgba(0,2,57,.30) 72%, rgba(0,2,57,.14) 100%),
    linear-gradient(to top, rgba(0,1,29,.62), transparent 58%);
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 7.5rem);
}
.hero h1 {
  font-size: var(--fs-hero);
  color: #fff;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.022em;
  margin-bottom: 1.25rem;
  text-wrap: pretty;
}
.hero h1 em { font-style: normal; color: var(--gold-bright); }
.hero__lede { font-size: var(--fs-lede); color: #cfd2e4; font-weight: 300; margin-bottom: 2rem; max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: 2.25rem; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; list-style: none; margin: 0; padding: 0; }
.hero__trust li { display: flex; align-items: center; gap: .55rem; font-size: .9688rem; font-weight: 500; color: #e4e6f1; }
.hero__trust .icon { width: 1.25rem; height: 1.25rem; color: var(--gold-bright); flex: none; }

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__lede { max-width: none; }
}

/* Page hero: same treatment as the homepage, but the right-hand column holds a
   supporting photograph instead of a form. Used on the motorcycle page so the
   big image works as the header rather than sitting orphaned further down. */
.hero--page .hero__inner--page {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  padding-block: clamp(2.75rem, 6vw, 5.5rem);
  align-items: center;
}
.hero--page .crumbs { margin-bottom: 1.25rem; }
.hero__aside { margin: 0; }
.hero__aside img { border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.hero__aside figcaption {
  margin-top: .85rem;
  font-size: .875rem; line-height: 1.5; color: #e4e6f0;
  /* Sits directly over the photograph, so it gets a backing plate rather than
     relying on the gradient reaching this far across. */
  background: rgba(0, 1, 29, .74);
  padding: .6rem .8rem; border-radius: 10px;
  backdrop-filter: blur(3px);
}
@media (max-width: 980px) {
  .hero--page .hero__inner--page { grid-template-columns: 1fr; }
  .hero__aside { display: none; }   /* the backdrop already carries the imagery */
}

/* ---------------------------------------------------------------- form card */
.formcard {
  background: #fff;
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-lg);
  color: var(--ink-soft);
}
/* The card is always white, wherever it sits. Panel-level heading colours are
   wrapped in :where() (specificity 0,0,1) precisely so these component rules win
   — otherwise `.band h2` tied on specificity, came later in the file, and the form
   title rendered white-on-white, completely invisible. */
.formcard h2, .formcard h3 {
  font-size: 1.4rem;
  margin-bottom: .35rem;
  color: var(--navy);
}
.formcard .lede { color: var(--ink-soft); }
.formcard__note { font-size: var(--fs-sm); margin-bottom: 1.35rem; }
.field { margin-bottom: 1rem; }
.field label {
  display: block; margin-bottom: .4rem;
  font-size: .875rem; font-weight: 600; color: var(--navy);
}
.field .req { color: var(--gold-ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: .9rem 1rem;
  background: var(--paper-cool);
  border: 1.5px solid var(--line); border-radius: 11px;
  font-size: 1rem;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.field textarea { min-height: 118px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  background: #fff; border-color: var(--gold); outline: none;
  box-shadow: 0 0 0 4px rgba(151,119,73,.14);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #cc4b37; }
.field__err { display: none; margin-top: .35rem; font-size: .8125rem; color: #cc4b37; font-weight: 500; }
.field input[aria-invalid="true"] ~ .field__err,
.field textarea[aria-invalid="true"] ~ .field__err { display: block; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .field--row { grid-template-columns: 1fr; } }
.form__small { margin-top: 1rem; font-size: .8125rem; line-height: 1.5; color: var(--muted); }
.form__small a { color: var(--gold-dark); }
/* Honeypot — visually gone but not display:none, which some bots detect */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form__status { margin-bottom: 1rem; padding: .9rem 1.1rem; border-radius: 11px; font-size: .9375rem; font-weight: 500; }
.form__status--ok  { background: #e8f5ec; color: var(--ok); border: 1px solid #b9e0c6; }
.form__status--err { background: #fdecea; color: #a6382a; border: 1px solid #f3c2bb; }

/* ---------------------------------------------------------------- grids */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* Split section: copy beside media. This is the one place copy is narrowed,
   and it is narrowed by the column, not by a max-width on the text. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--media-first > :first-child { order: 2; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split--media-first > :first-child { order: 0; }
}
.split__media img { border-radius: var(--r-lg); box-shadow: var(--shadow); }

/* ---------------------------------------------------------------- cards */
.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card h3 { margin-bottom: .45rem; }
.card p { font-size: .9688rem; margin-bottom: 0; }
a.card, .card--link { text-decoration: none; }
a.card:hover, .card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(151,119,73,.4);
}
.card__icon {
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: .9rem;
  background: rgba(151,119,73,.11); border-radius: 13px;
  color: var(--gold);
}
.card__icon .icon { width: 22px; height: 22px; }
.card__more {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1.1rem; font-size: .9375rem; font-weight: 600; color: var(--gold-dark);
}
.card__more .icon { width: 1.05em; height: 1.05em; transition: transform .25s var(--ease); }
a.card:hover .card__more .icon { transform: translateX(4px); }
.sect--navy .card {
  background: rgba(255,255,255,.045);
  border-color: rgba(255,255,255,.11);
  color: #b9bdd4;
}
.sect--navy .card__icon { background: rgba(184,147,90,.16); color: var(--gold-bright); }
.sect--navy a.card:hover { background: rgba(255,255,255,.07); border-color: rgba(184,147,90,.5); }

/* ---------------------------------------------------------------- steps */
.steps { counter-reset: step; }
.step { position: relative; padding-top: 2.75rem; }
.step__n {
  position: absolute; top: 0; left: 0;
  font-size: 2.6rem; font-weight: 700; line-height: 1;
  color: rgba(151,119,73,.28);
  letter-spacing: -.04em;
}
.sect--navy .step__n { color: rgba(184,147,90,.42); }
.step::before {
  content: ''; position: absolute; top: 1.35rem; left: 3.4rem; right: -1rem;
  height: 2px; background: linear-gradient(90deg, rgba(151,119,73,.35), rgba(151,119,73,0));
}
.step:last-child::before { display: none; }
@media (max-width: 640px) { .step::before { display: none; } }
.step h3 { margin-bottom: .4rem; }
.step p { font-size: .9688rem; }

/* ---------------------------------------------------------------- CTA band */
.band {
  position: relative;
  background: var(--navy-deep);
  color: #c6c9de;
  overflow: hidden;
}
.band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 140% at 12% 0%, rgba(151,119,73,.30), transparent 58%);
}
.band__inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
}
:where(.band) h2 { color: #fff; }
.band h2 { margin-bottom: .75rem; }
.band__contacts { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
.contact-pill {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .95rem 1.35rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  font-weight: 600; color: #fff; text-decoration: none;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.contact-pill:hover { background: rgba(255,255,255,.13); border-color: var(--gold-bright); }
.contact-pill .icon { width: 1.2rem; height: 1.2rem; color: var(--gold-bright); flex: none; }
@media (max-width: 900px) { .band__inner { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- FAQ */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  width: 100%; padding: 1.35rem 0;
  background: none; border: 0; text-align: left; cursor: pointer;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem); font-weight: 600; color: var(--navy);
  line-height: 1.35;
}
.faq__q:hover { color: var(--gold-dark); }
.faq__ico {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; margin-top: -2px;
  border: 1.5px solid var(--line); border-radius: 50%;
  color: var(--gold-ink);
  transition: transform .3s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
}
.faq__ico .icon { width: 16px; height: 16px; }
.faq__q[aria-expanded="true"] .faq__ico {
  transform: rotate(45deg); background: var(--gold-ink); border-color: var(--gold-ink); color: #fff;
}
.faq__a { display: none; padding: 0 0 1.6rem; }
.faq__a.is-open { display: block; }
.faq__a p { font-size: 1.0313rem; }
.faq__a ul { margin: 0 0 1.1em; padding-left: 1.25rem; }
.faq__a li { margin-bottom: .5em; }
/* No-JS fallback: every answer is visible */
.no-js .faq__a { display: block; }
.no-js .faq__ico { display: none; }

/* ---------------------------------------------------------------- checklist */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.checks li { display: flex; align-items: flex-start; gap: .8rem; }
/* Where a checklist row is really a contact detail, its link is a standalone
   target rather than an inline sentence link, so it needs the 24px minimum. */
.checks a { display: inline-block; padding-block: .2rem; min-height: 24px; }
.checks .icon {
  flex: none; width: 1.4rem; height: 1.4rem; margin-top: .15rem;
  padding: .2rem; border-radius: 50%;
  background: rgba(151,119,73,.13); color: var(--gold);
  box-sizing: content-box;
}
.sect--navy .checks .icon, .band .checks .icon { background: rgba(184,147,90,.2); color: var(--gold-bright); }

/* ---------------------------------------------------------------- partners */
.partners {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
.partners__item {
  display: grid; place-items: center;
  width: clamp(92px, 13vw, 140px);
}
.partners__item img {
  width: 100%; height: auto;
  opacity: .85;
  transition: opacity .3s var(--ease), filter .3s var(--ease);
}
.partners__item:hover img { opacity: 1; }

/* Dark band. Four of the five marks are white or sit on dark backgrounds, and on
   a light panel the white A&S Man Club logo disappeared completely. */
.partners-band { background: var(--navy-deep); }
.partners-band__label {
  margin: 0 0 1.75rem;
  text-align: center;
  font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #8f95b4;
}
/* screen blend drops the baked-in dark JPEG backgrounds into the navy so the
   logos read as marks rather than as pasted squares. */
.partners-band .partners__item img { mix-blend-mode: screen; }
/* HUUB is a dark logo on transparency, so it needs flipping to read on navy. */
.partners-band .partners__item--invert img {
  filter: invert(1) brightness(1.35);
  mix-blend-mode: normal;
}

/* ---------------------------------------------------------------- quotes */
.quote {
  display: flex; flex-direction: column;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
}
.quote .icon--quote { width: 34px; height: 34px; color: var(--gold); opacity: .5; margin-bottom: 1rem; }
.quote blockquote { margin: 0 0 1.25rem; font-size: 1.0313rem; line-height: 1.6; }
.quote figcaption { margin-top: auto; font-weight: 600; color: var(--navy); }
.quote__stars { display: flex; gap: .15rem; margin-bottom: .9rem; color: var(--gold); }
.quote__stars .icon { width: 1.05rem; height: 1.05rem; fill: currentColor; stroke: none; }

/* ---------------------------------------------------------------- prose (legal + news) */
.prose { font-size: 1.0625rem; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 2.5rem; }
.prose h3 { margin-top: 2rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.4rem; }
.prose li { margin-bottom: .55em; }
.prose a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote {
  margin: 1.75rem 0; padding: .35rem 0 .35rem 1.5rem;
  border-left: 3px solid var(--gold);
  font-size: 1.15rem; color: var(--navy);
}
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: .9688rem; }
.prose th, .prose td { padding: .7rem .9rem; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--paper-cool); color: var(--navy); font-weight: 600; }
.prose img { border-radius: var(--r); margin: 1.75rem 0; }
.prose__wide { overflow-x: auto; }

/* ---------------------------------------------------------------- page head */
.pagehead {
  position: relative;
  padding-block: clamp(2.75rem, 6vw, 5rem);
  background: var(--navy);
  color: #b9bdd4;
  overflow: hidden;
}
.pagehead::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(105% 130% at 88% 0%, rgba(151,119,73,.26), transparent 62%);
}
.pagehead__inner { position: relative; }
.pagehead h1 { color: #fff; margin-bottom: .75rem; }
.pagehead .lede { max-width: 68ch; }

.crumbs { margin-bottom: 1.5rem; font-size: .875rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.crumbs li { display: flex; align-items: center; gap: .5rem; color: #8f95b4; }
.crumbs li + li::before { content: '/'; color: rgba(255,255,255,.28); }
.crumbs a { color: #b9bdd4; text-decoration: none; display: inline-block; padding-block: .2rem; min-height: 24px; }
.crumbs a:hover { color: var(--gold-bright); }
.crumbs [aria-current] { color: var(--gold-bright); }

/* ---------------------------------------------------------------- news */
.newscard { overflow: hidden; padding: 0; }
.newscard__media { aspect-ratio: 16 / 9; background: var(--paper-cool); overflow: hidden; }
.newscard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
a.newscard:hover .newscard__media img { transform: scale(1.04); }
.newscard__body { padding: 1.4rem 1.5rem 1.6rem; }
.newscard h3 { font-size: 1.1875rem; margin-bottom: .5rem; }
.newscard time { display: block; margin-bottom: .6rem; font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); }
.newscard p { font-size: .9688rem; }
.article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  margin-bottom: 1.5rem; font-size: .875rem; color: #8f95b4;
}
.article__meta .dot { color: rgba(255,255,255,.3); }
.empty {
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--paper-cool); border: 1px dashed var(--line); border-radius: var(--r);
  text-align: center;
}

/* ---------------------------------------------------------------- article
   News posts run full width. An enquiry form pinned alongside squeezed the copy
   into a narrow column and pushed the images down, which was the opposite of
   what a story page needs. Measure is controlled on the text itself instead. */
.article__hero { margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); }
.article__hero img { border-radius: var(--r-lg); }
.prose--article { font-size: 1.125rem; }
/* A comfortable reading measure without narrowing the images above it. */
.prose--article > p,
.prose--article > ul,
.prose--article > ol,
.prose--article > blockquote { max-width: 68ch; }
.prose--article > h2 { font-size: clamp(1.5rem, 2.5vw, 1.95rem); margin-top: 2.75rem; }
.prose--article > h3 { margin-top: 2.25rem; }
.prose--article img { width: 100%; border-radius: var(--r); }

.article__cta {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper-cool);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-ink);
  border-radius: var(--r);
}
.article__cta h2 { font-size: 1.4rem; margin-bottom: .5rem; }
.article__cta p { max-width: 68ch; }
.article__cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

/* ---------------------------------------------------------------- footer */
.footer { background: var(--navy-deep); color: #8f95b4; font-size: .9688rem; }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer img.footer__logo { width: 176px; margin-bottom: 1.25rem; }
.footer h2 {
  font-size: .8125rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; margin-bottom: 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.footer a { color: #8f95b4; text-decoration: none; }
/* Tap targets. These sit in lists, so WCAG 2.5.8's inline-in-a-sentence
   exemption does not apply and they need to clear 24px. Row gap is reduced to
   compensate so the footer keeps the same visual rhythm. */
.footer ul a { display: inline-block; padding-block: .28rem; min-height: 24px; }
.footer__contact a { display: inline-block; padding-block: .2rem; min-height: 24px; }
.footer a:hover { color: var(--gold-bright); }
.footer__contact li { display: flex; align-items: flex-start; gap: .65rem; }
.footer__contact .icon { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .18rem; color: var(--gold); }
.footer__social { display: flex; gap: .6rem; margin-top: 1.25rem; }
.footer__social a {
  display: grid; place-items: center; width: 42px; height: 42px;
  background: rgba(255,255,255,.06); border-radius: 12px; color: #c6c9de;
}
.footer__social a:hover { background: var(--gold); color: #fff; }
.footer__social .icon { width: 1.25rem; height: 1.25rem; }
.footer__legal {
  padding-block: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: .8438rem; line-height: 1.7;
}
.footer__legal p { margin-bottom: .7rem; }
.footer__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: .8438rem;
}
.footer__base ul { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.footer__base ul a { display: inline-block; padding-block: .25rem; min-height: 24px; }

/* Internal-only warning so a missing regulatory detail cannot ship unnoticed */
.todo {
  margin: 1rem 0; padding: .85rem 1.1rem;
  background: #3a2a00; border: 1px dashed #ffae00; border-radius: 10px;
  color: #ffd066; font-size: .8438rem; font-weight: 600;
}

/* ---------------------------------------------------------------- cookies
   A slim bar pinned to the bottom rather than a card over the hero. It has to be
   noticeable enough to be a genuine choice, without burying the page a visitor
   just arrived on. */
.cookie {
  position: fixed; z-index: 150;
  left: 0; right: 0; bottom: 0;
  background: rgba(0, 1, 29, .97);
  backdrop-filter: saturate(140%) blur(8px);
  border-top: 2px solid var(--gold-ink);
  color: #c6c9de;
  box-shadow: 0 -8px 30px -12px rgba(0,0,0,.5);
  /* dvh-safe: never taller than the visible viewport on iOS, and scrollable if
     the text wraps hard on a very small screen. */
  max-height: 70dvh; overflow-y: auto;
}
.cookie[hidden] { display: none; }
.cookie__inner {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto;
  padding: .9rem var(--gutter);
  display: flex; align-items: center; gap: 1.25rem 2rem;
}
.cookie h2 {
  font-size: .9375rem; color: #fff; margin: 0 0 .15rem;
  letter-spacing: -.005em;
}
.cookie p {
  font-size: .875rem; line-height: 1.5; margin: 0; color: #b9bdd4;
}
.cookie p a { color: var(--gold-bright); }
.cookie__text { flex: 1 1 auto; min-width: 0; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: .6rem; flex: 0 0 auto; }
.cookie__actions .btn { padding: .65rem 1.2rem; font-size: .9063rem; }
.cookie__actions .btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.cookie__actions .btn--ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }
/* Buttons must not shrink away on a narrow screen. */
@media (max-width: 720px) {
  .cookie__inner { flex-direction: column; align-items: stretch; gap: .7rem; padding-block: .85rem; }
  .cookie__actions .btn { flex: 1 1 auto; justify-content: center; padding: .6rem 1rem; }
  /* Stacked, this bar was eating a third of a phone screen. Tighter type and a
     trimmed sentence keep it a bar rather than a takeover. */
  .cookie h2 { font-size: .875rem; }
  .cookie p { font-size: .8125rem; line-height: 1.45; }
  .cookie .cookie__long { display: none; }
}

/* ---------------------------------------------------------------- reveal */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.no-js .reveal, .reveal.is-off { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- print */
@media print {
  .header, .footer__social, .cookie, .band, .formcard { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .sect { padding-block: 1rem; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}

/* ==========================================================================
   Slim-build additions (2026-07-30)
   The site was cut from 22 pages to 5 plus legals. These components carry the
   depth that used to be spread across separate pages.
   ========================================================================== */

/* ---------------------------------------------------------------- jump strip
   Replaces eight nav entries and eight page loads with one slidable strip.

   The scroller is FULL-BLEED, not inside .wrap. Sitting it inside the container
   meant the container's padding clipped the last chip, so the strip read as "half
   cut off" with no sign it could be scrolled. Now: edge fades that appear only
   when there is more in that direction, scroll snapping so it moves a chip at a
   time, and arrow buttons that JS reveals only when it actually overflows. */
.jump {
  position: sticky; top: 74px; z-index: 60;
  display: flex; align-items: center;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.jump__scroller {
  display: flex; gap: .35rem;
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: .6rem var(--gutter);
  scroll-padding-inline: var(--gutter);
  /* Centred when the chips fit. `safe` matters: a plain `center` in a scroll
     container pushes the first chip out of reach once the content overflows. */
  justify-content: center;
  justify-content: safe center;
}
.jump__scroller::-webkit-scrollbar { display: none; }
.jump a {
  flex: none;
  scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .9rem; border-radius: 999px;
  border: 1px solid transparent;
  font-size: .875rem; font-weight: 500; color: var(--ink-soft); text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.jump a:hover { background: var(--paper-cool); color: var(--navy); border-color: var(--line); }
.jump a.is-active { background: var(--navy); color: #fff; }
.jump a.is-active .icon { color: var(--gold-bright); }
.jump .icon { width: 1rem; height: 1rem; color: var(--gold-ink); flex: none; }

/* Edge fades. Toggled by JS so they only show where there is more to see. */
.jump::before, .jump::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 3rem;
  pointer-events: none; z-index: 2; opacity: 0;
  transition: opacity .25s var(--ease);
}
.jump::before { left: 0;  background: linear-gradient(90deg, #fff 20%, rgba(255,255,255,0)); }
.jump::after  { right: 0; background: linear-gradient(270deg, #fff 20%, rgba(255,255,255,0)); }
.jump.can-prev::before { opacity: 1; }
.jump.can-next::after  { opacity: 1; }

/* Arrow buttons. Hidden until JS confirms the strip overflows, and hidden on
   touch widths where swiping is the natural gesture. */
.jump__arrow {
  flex: none; z-index: 3;
  display: grid; place-items: center;
  width: 34px; height: 34px; margin-inline: .35rem;
  background: #fff; border: 1px solid var(--line); border-radius: 50%;
  color: var(--navy); cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
}
.jump__arrow svg { width: 17px; height: 17px; }
.jump__arrow:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.jump__arrow[hidden] { display: none; }
.jump__arrow:disabled { opacity: .3; cursor: default; }
.jump__arrow:disabled:hover { background: #fff; border-color: var(--line); color: var(--navy); }
@media (max-width: 700px) {
  .jump__arrow { display: none !important; }
  .jump__scroller { padding-block: .5rem; }
}

/* ---------------------------------------------------------------- claim block */
.claim { padding-block: clamp(2rem, 4vw, 3.25rem); border-top: 1px solid var(--line); }
.claim:first-child { border-top: 0; padding-top: 0; }
/* Offset for the two stacked sticky bars when jumping to an anchor */
.claim { scroll-margin-top: 145px; }
.claim__head { display: flex; gap: 1.15rem; align-items: flex-start; margin-bottom: 1.25rem; }
.claim__n {
  flex: none;
  font-size: 1.0625rem; font-weight: 700; line-height: 1.6;
  color: var(--gold-ink); letter-spacing: .02em;
}
.claim__head h2 { margin-bottom: .4rem; }
.claim__lede { font-size: 1.0625rem; color: var(--navy); font-weight: 500; margin: 0; }
.claim__fig { margin: 1.75rem 0 0; }
.claim__fig img { border-radius: var(--r); }
.claim__fig figcaption {
  margin-top: .7rem; font-size: .875rem; color: var(--muted);
}

/* ---------------------------------------------------------------- sticky aside */
.split--sticky { align-items: start; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
@media (max-width: 900px) { .split--sticky { grid-template-columns: 1fr; } }
.sticky-col { position: sticky; top: 150px; display: grid; gap: 1.25rem; }
@media (max-width: 900px) { .sticky-col { position: static; top: auto; } }
.aside-note {
  padding: 1.4rem 1.5rem;
  background: var(--paper-cool); border: 1px solid var(--line); border-radius: var(--r);
}
.aside-note h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.aside-note p { font-size: .9375rem; }
.contact-pill--light {
  background: #fff; border-color: var(--line); color: var(--navy);
}
.contact-pill--light:hover { background: #fff; border-color: var(--gold-ink); }
.contact-pill--light .icon { color: var(--gold-ink); }

/* ---------------------------------------------------------------- simple band
   A CTA band with buttons instead of an embedded form, for pages that already
   carry a form higher up. Stops every page ending in the same heavy block. */
.band__inner--simple { grid-template-columns: minmax(0, 1.5fr) minmax(0, auto); align-items: center; }
.band__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
@media (max-width: 900px) { .band__inner--simple { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- media strip */
.media-band { position: relative; overflow: hidden; background: var(--navy); }
.media-band img { width: 100%; height: 100%; object-fit: cover; }
.media-band__frame { aspect-ratio: 21 / 8; }
@media (max-width: 700px) { .media-band__frame { aspect-ratio: 3 / 2; } }

/* Overlay variant: the photograph becomes a backdrop for real content rather
   than a decorative slab sitting on its own between two sections. */
.media-band--overlay .media-band__frame {
  position: absolute; inset: 0; aspect-ratio: auto;
}
.media-band--overlay .media-band__frame::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(0,2,57,.93) 0%, rgba(0,2,57,.78) 42%, rgba(0,2,57,.34) 74%, rgba(0,2,57,.16) 100%),
    linear-gradient(to top, rgba(0,1,29,.55), transparent 60%);
}
.media-band--overlay {
  display: grid; align-items: center;
  min-height: clamp(360px, 44vw, 520px);
}
.media-band__content {
  position: relative; z-index: 2;
  padding-block: clamp(2.5rem, 5vw, 4rem);
  max-width: 100%;
}
.media-band__content h2 { color: #fff; }
.media-band__content .eyebrow { color: var(--gold-bright); }
.media-band__content .eyebrow::before { background: var(--gold-bright); }
.media-band__content .lede { color: #c3c7dc; max-width: 62ch; }
.media-band--overlay .btn--ghost { color: #fff; }
.media-band--overlay .btn--ghost:hover { background: #fff; color: var(--navy); border-color: #fff; }

/* ---------------------------------------------------------------- overlay copy
   Below the point where hero layouts collapse to one column, the copy spans the
   full width and runs into the lighter side of the photograph. The desktop
   gradient stops are tuned for a copy column occupying the left ~45%, so at
   tablet widths they stop covering the text.

   Measured, not guessed: at 768px the overlay-band lede was 3.87:1 and the
   motorcycle breadcrumbs 3.56:1 against the composited background (sampled with
   the glyphs hidden). Desktop was already 5.8:1 and above, so this deliberately
   only touches the collapsed layouts. */
@media (max-width: 980px) {
  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(0,2,57,.90) 0%, rgba(0,2,57,.86) 55%, rgba(0,2,57,.80) 100%);
  }
  .media-band--overlay .media-band__frame::after {
    background:
      linear-gradient(180deg, rgba(0,2,57,.86) 0%, rgba(0,2,57,.90) 100%);
  }
}

/* ==========================================================================
   Show band — full-width photograph with a contained copy panel
   --------------------------------------------------------------------------
   Replaces the earlier overlay band. Three things it fixes:
   1. The photograph is never cropped. It runs full width at its own aspect
      ratio, so "the image fits within the size".
   2. The copy is inside a real boxed panel with its own background, rather than
      floating on the picture and relying on a big gradient to stay legible.
   3. Because the panel carries its own background, the navy wash can be pulled
      right back to the left edge, so most of the picture keeps its brightness.
   ========================================================================== */
.showband { position: relative; background: var(--navy); overflow: hidden; }
.showband__media { position: relative; }
.showband__media img { width: 100%; height: auto; display: block; }

/* The wash now only feathers the left edge, leaving the middle and right of the
   photograph at full brightness. */
.showband__media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(95deg,
    rgba(0,2,57,.72) 0%,
    rgba(0,2,57,.42) 14%,
    rgba(0,2,57,.12) 30%,
    rgba(0,2,57,0)   46%);
}

.showband__wrap {
  position: absolute; inset: 0;
  display: grid; align-items: center; justify-items: end;
}
.showband__panel {
  width: min(430px, 100%);
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  background: rgba(0, 1, 29, .82);
  backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  color: #d5d8e6;
}
.showband__panel h2 { color: #fff; font-size: clamp(1.4rem, 1.9vw, 1.8rem); margin-bottom: .6rem; }
.showband__panel .eyebrow { color: var(--gold-bright); }
.showband__panel .eyebrow::before { background: var(--gold-bright); }
.showband__panel p { font-size: 1rem; line-height: 1.6; }
.showband__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.showband__actions .btn { padding: .8rem 1.3rem; font-size: .9688rem; }
/* Outlined button that lives on the panel, so it is never white-on-white if the
   layout changes underneath it. */
.btn--panel { border-color: rgba(255,255,255,.55); color: #fff; }
.btn--panel:hover { background: #fff; border-color: #fff; color: var(--navy); }

/* Below this the picture is too short to hold a panel legibly, so the panel
   drops underneath it and spans the width. The wash is removed entirely there,
   which shows the photograph at its brightest. */
@media (max-width: 900px) {
  .showband__media::after { background: none; }
  .showband__wrap { position: static; inset: auto; justify-items: stretch; }
  .showband__panel {
    width: 100%;
    border-radius: 0; border: 0;
    background: var(--navy-deep);
    backdrop-filter: none;
    padding-block: clamp(1.75rem, 5vw, 2.5rem);
  }
  .showband__wrap { padding-inline: 0; }
  .showband__panel { padding-inline: var(--gutter); }
}


/* ------------------------------------------------- "Site by CREATE" credit
   CREATE's signature, identical in markup, size and spacing on every site we
   build. The ONLY permitted variation is colour: white here, because CREATE
   green (#79B949) fights the navy-and-gold palette. Mark and wordmark always
   share one colour.

   This block is deliberately LAST in the stylesheet. `.footer a:hover` above
   sets the site's gold, and at equal specificity source order decides — put
   these rules earlier and the CREATE credit turns gold on hover.

   align-items:baseline, never center: the bottom of the mark's viewBox is the
   bottom of the C circle (cy 404.7 + r 228.35 = 633.05 = full viewBox height),
   and a replaced element's flex baseline is its bottom margin edge, so baseline
   lands the C level with the CREATE cap feet. Centring floats the mark high.

   Tap target comes from symmetric padding (9px + 23px + 9px = 41px), not from
   min-height — a min-height pins the content to the top of the box and throws
   the three-part lockup off its shared baseline. */
.ftr-credit {
  display: inline-flex; align-items: baseline; gap: 10px;
  color: #8f95b4;                      /* matches the copyright line beside it */
  margin: 0;
}
.footer__base .ftr-credit a {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding-block: 9px;
  color: #fff;
  transition: opacity .25s ease;
}
.footer__base .ftr-credit a:hover { color: #fff; opacity: .72; }
.ftr-credit .create-mark {
  height: 23px; width: auto; flex: none;
  color: #fff;                         /* paths are fill="currentColor" */
}
.ftr-credit b {
  font-family: 'Barlow Condensed', 'Outfit', sans-serif;
  font-weight: 800; font-size: 1.28rem; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff;
}