/* ==========================================================================
   Fastnet Underwriting - home page
   --------------------------------------------------------------------------
   Modelled on stripe.com/ie: one sans-serif family throughout, very large
   tightly-tracked headlines, pill buttons, a single coloured hero band with an
   otherwise white page, bento tiles, and generous whitespace.

   Brand palette - see "Fastnet colour palette.docx" for the full guide:
     #34568b  navy         - headings, the logo, structure, the hero wash
     #1B2C49  navy ink     - body copy
     #D8813A  amber        - marks, rules, ticks, progress fills   (DECORATIVE)
     #A85C18  amber deep   - accent TEXT, links, the primary button (AA safe)
     #ffffff  white

   Navy carries the brand; amber carries the action. Neutrals are WARM tints so
   they belong with the amber - swapping them for cool greys makes the accent
   look bolted on.
   Note: #D8813A is 2.95:1 on white and cannot carry text of any size. Anything
   that IS text or carries text uses #A85C18 (4.99:1 both ways). In dark mode
   both lift to #E8A65E, because the deep tone drops to ~2.4:1 on navy.
   ========================================================================== */

:root {
  --navy:        #34568b;
  --navy-deep:   #274465;
  --navy-ink:    #1B2C49;
  /* Amber is the accent: it goes on what a visitor acts on or should notice,
     and nowhere else. --bright-deep is the AA-safe tone (4.99:1 on white, and
     the same with white text on it) and is the one to use for anything that
     IS text or carries text; --bright is for marks, rules and fills only
     (2.95:1 - decorative). See "Fastnet colour palette.docx". */
  --bright:      #D8813A;
  --bright-deep: #A85C18;

  --bg:          #FFFFFF;
  --surface:     #FFFFFF;
  /* Warm neutrals, not cool ones - amber dropped onto blue-grey reads as an
     accident rather than a decision. */
  --surface-2:   #FBF7F2;
  --surface-3:   #F4EADD;
  --ink:         #1B2C49;
  --ink-soft:    #3F5473;
  --muted:       #62748F;
  --line:        #EADFD2;
  --line-firm:   #D8C5AC;

  --on-navy:      #FFFFFF;
  --on-navy-mut:  #C6D8EC;
  /* The accent needs its OWN value on navy grounds. Amber is only 2.5:1 on the
     navy tile and amber deep is 1.48:1 - both unreadable. This clears 4.7:1 on
     the tile navy and 6.4:1 on the deeper hero navy. (The old blue accent was
     2.41:1 here, so this was already failing before the palette changed.) */
  --bright-on-navy: #F3C793;
  /* Green is reserved for "included / yes" ticks. It is NOT a brand accent and
     must not be used for anything else, or a tick stops meaning anything.
     5.42:1 on white. */
  --tick: #17794C;
  --on-navy-line: rgba(255,255,255,.22);

  --shadow-sm: 0 1px 2px rgba(27,44,73,.05), 0 2px 8px -4px rgba(27,44,73,.10);
  --shadow:    0 2px 6px rgba(27,44,73,.06), 0 18px 40px -24px rgba(27,44,73,.40);

  --f: "Plus Jakarta Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --wrap: 1180px;
  --gut: 24px;
  --pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0D1830;
    --surface:   #142240;
    --surface-2: #142240;
    --surface-3: #1B2E52;
    --ink:       #EAF0F8;
    --ink-soft:  #C6D3E4;
    --muted:     #93A6C4;
    --line:      #24375E;
    --line-firm: #3A5280;
    --bright:      #E8A65E;
    /* The light-mode deep amber is unreadable on the dark ground
       (about 2.4:1), so the accent text colour lifts with it. */
    --bright-deep: #E8A65E;
    --tick:        #4ECB94;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow:    0 2px 6px rgba(0,0,0,.5), 0 18px 40px -24px rgba(0,0,0,.95);
  }
}

:root[data-theme="dark"] {
  --bg:        #0D1830;
  --surface:   #142240;
  --surface-2: #142240;
  --surface-3: #1B2E52;
  --ink:       #EAF0F8;
  --ink-soft:  #C6D3E4;
  --muted:     #93A6C4;
  --line:      #24375E;
  --line-firm: #3A5280;
  --bright:      #E8A65E;
  --bright-deep: #E8A65E;
  --tick:        #4ECB94;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow:    0 2px 6px rgba(0,0,0,.5), 0 18px 40px -24px rgba(0,0,0,.95);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--bright-deep); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--bright); outline-offset: 3px; border-radius: 4px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #FFF; padding: 12px 20px; font-weight: 700;
}
.skip:focus { left: 0; }

/* -- Type: one family, size and weight do the work ----------------------- */
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.03em; text-wrap: balance; }
h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.08; }
h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.018em; font-weight: 700; }
p  { margin: 0 0 1.15em; }

.lede { font-size: clamp(18px, 1.8vw, 21px); line-height: 1.55; color: var(--muted); }
.section-lede { max-width: 58ch; margin-top: 18px; }

.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: var(--bright-deep); margin: 0 0 14px;
}
.on-navy .eyebrow { color: var(--bright-on-navy); }

/* -- Buttons: pills, Stripe-style ---------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f); font-size: 15px; font-weight: 700;
  padding: 13px 24px;
  border: 1px solid transparent; border-radius: var(--pill);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
/* The primary action carries the accent; navy stays for structure. */
.btn-primary { background: var(--bright-deep); color: #FFF; }
.btn-primary:hover { background: #8A4A0E; color: #FFF; transform: translateY(-1px); }
.btn-onnavy { background: #FFF; color: var(--navy); }
.btn-onnavy:hover { background: var(--on-navy-mut); color: var(--navy-deep); transform: translateY(-1px); }
.btn-ghost { border-color: rgba(255,255,255,.45); color: #FFF; }
.btn-ghost:hover { border-color: #FFF; background: rgba(255,255,255,.10); color: #FFF; }
.btn-soft { background: var(--surface-3); color: var(--navy); }
.btn-soft:hover { background: var(--line-firm); color: var(--navy-deep); }
.btn .arw { transition: transform .15s ease; }
.btn:hover .arw { transform: translateX(3px); }

/* Text link with arrow - Stripe uses these constantly */
.tlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 15px; text-decoration: none; color: var(--bright-deep);
}
.tlink:hover { color: var(--navy); }
.tlink .arw { transition: transform .15s ease; }
.tlink:hover .arw { transform: translateX(3px); }
.on-navy .tlink { color: var(--bright-on-navy); }
.on-navy .tlink:hover { color: #FFF; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn .arw, .tlink .arw { transition: none; }
  .btn:hover { transform: none; }
}

/* -- Header: white, sticky ----------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
:root[data-theme="dark"] .site-head,
:root:not([data-theme="light"]) .site-head { background: var(--bg); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .site-head { background: rgba(255,255,255,.88); }
}

.head-inner { display: flex; align-items: center; gap: 30px; height: 72px; position: relative; }
.brand { display: flex; align-items: center; margin-right: auto; text-decoration: none; }
/* logo-navy.png is transparent with a navy wordmark, so it needs a light
   ground. That is why the header is white rather than navy. */
.brand img { display: block; height: 34px; width: auto; }
:root[data-theme="dark"] .brand img,
:root:not([data-theme="light"]) .brand img { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .brand img { filter: none; }
}

.nav { display: flex; align-items: center; gap: 28px; }
.nav a {
  color: var(--ink-soft); text-decoration: none; font-size: 15px; font-weight: 600;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--bright-deep); }

.head-actions { display: flex; align-items: center; gap: 16px; }
.head-cta { padding: 10px 20px; font-size: 14.5px; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-firm);
  color: var(--ink); border-radius: var(--pill); padding: 8px 16px; cursor: pointer;
  font-family: var(--f); font-size: 14px; font-weight: 700;
}

@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 72px; left: calc(var(--gut) * -1); right: calc(var(--gut) * -1);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); padding: 8px 0 14px;
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 13px var(--gut); border-bottom: 1px solid var(--line); }
  .head-actions .tlink { display: none; }
}

/* -- Hero: the one coloured band on the page ----------------------------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--navy-deep); color: #FFF;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("img/hero.jpg") center / cover no-repeat;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg,
              rgba(24,44,80,.96) 0%,
              rgba(34,60,102,.88) 45%,
              rgba(52,86,139,.46) 100%);
}
/* 10% off the hero's vertical padding - it was carrying more headroom above
   the headline than the headline needed. */
/* Horizontal padding must repeat var(--gut): this is the same element as
   .wrap, and a shorthand with 0 on the sides silently cancels the page gutter.
   Invisible on desktop (max-width + auto margins centre it) but on a phone the
   block is viewport-wide and the headline sat hard against the edge. */
.hero-inner { padding: clamp(76px, 10.8vw, 137px) var(--gut) clamp(68px, 9vw, 115px); max-width: 800px; }
.hero h1 { color: #FFF; margin-bottom: 22px; max-width: 17ch; }
.hero .lede { color: #D6E4F3; max-width: 56ch; margin-bottom: 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* -- Partner strip ------------------------------------------------------- */
.strip { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.strip-inner { padding: 40px var(--gut); }   /* sides: see .hero-inner */
.strip-label {
  text-align: center; font-size: 13px; font-weight: 700; color: var(--muted);
  margin: 0 0 22px; letter-spacing: .01em;
}
.strip-logos {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 14px 40px;
}
.strip-logos span {
  font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--ink-soft);
  opacity: .78;
}

/* -- Sections ------------------------------------------------------------ */
/* Was clamp(72px, 10vw, 132px): two stacked sections put up to 264px of
   empty band between them (Geoff 2026-10-14, "too much whitespace"). */
.section { padding: clamp(48px, 6vw, 80px) 0; }
.section-tint { background: var(--surface-2); }
.section-head { max-width: 62ch; margin-bottom: clamp(28px, 3vw, 40px); }   /* was 52px */
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .section-lede { margin-left: auto; margin-right: auto; }

/* -- Captioned images ---------------------------------------------------- */
.fig-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px; margin-top: 44px;
}
.fig { margin: 0; }
/* A shared 3:2 crop so the images in a row end level and their captions sit on
   one line. 3:2 falls between the two source ratios, so each loses only a few
   per cent of its edges rather than one being cropped hard to match. */
.fig img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: cover; object-position: center;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface-2);
}
.fig figcaption {
  margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted);
}

/* -- Bento grid ---------------------------------------------------------- */
.bento {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px;
}
.tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 32px 30px 34px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.tile:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .tile { transition: none; } .tile:hover { transform: none; } }
.tile.wide { grid-column: span 4; }
.tile.half { grid-column: span 3; }
.tile.third { grid-column: span 2; }
.tile p { color: var(--muted); margin: 0; font-size: 15.5px; }
.tile .tlink { margin-top: auto; padding-top: 14px; }
.tile-ico {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--surface-3); display: grid; place-items: center; margin-bottom: 6px;
  /* The tile SVGs stroke with currentColor, so the icon follows the accent
     token. They used to carry a frozen #3b9cd1 and stayed blue when the
     palette changed. */
  color: var(--bright-deep);
}
.tile.feature {
  grid-column: span 6; background: var(--navy); border-color: var(--navy);
  color: #FFF;
}
.tile.feature h3, .tile.feature h2 { color: #FFF; }
.tile.feature p { color: var(--on-navy-mut); font-size: 17px; max-width: 60ch; }
.tile.feature .tile-ico { background: rgba(255,255,255,.14); }

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile.wide, .tile.half, .tile.third, .tile.feature { grid-column: span 2; }
}

/* -- Credential row ------------------------------------------------------ */
.creds { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 34px; }
.cred-k { font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.03em; color: var(--navy); line-height: 1.05; }
.on-navy .cred-k { color: #FFF; }
.cred-t { font-weight: 700; margin: 10px 0 4px; font-size: 15.5px; }
.cred-d { color: var(--muted); font-size: 14.5px; margin: 0; }
.on-navy .cred-t { color: #FFF; }
.on-navy .cred-d { color: var(--on-navy-mut); }

/* -- Steps --------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 32px; counter-reset: s; }
.step { position: relative; padding-top: 24px; border-top: 2px solid var(--bright); }
.step-n { font-size: 13px; font-weight: 800; color: var(--bright-deep); margin: 0 0 8px; }
.step h3 { margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 15.5px; margin: 0; }

/* -- CTA band ------------------------------------------------------------ */
.band { background: var(--navy); color: #FFF; }
.band-inner {
  padding: clamp(64px, 8vw, 104px) var(--gut);   /* sides: see .hero-inner */
  display: grid; grid-template-columns: minmax(0,1.4fr) auto; gap: 40px; align-items: center;
}
@media (max-width: 820px) { .band-inner { grid-template-columns: 1fr; } }
.band h2 { color: #FFF; margin-bottom: 14px; }
.band p { color: var(--on-navy-mut); margin: 0; max-width: 52ch; }
.band-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* -- Signup -------------------------------------------------------------- */
.signup { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; max-width: 520px; }
.signup input[type="email"] {
  flex: 1 1 240px; min-width: 0; font-family: var(--f); font-size: 15px;
  padding: 13px 18px; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-firm); border-radius: var(--pill);
}
.signup input::placeholder { color: var(--muted); }
.form-note { font-size: 13px; color: var(--muted); margin: 12px 0 0; }

/* -- Footer -------------------------------------------------------------- */
.site-foot { background: var(--navy); color: var(--on-navy-mut); font-size: 14.5px; }
.foot-top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px;
  padding: clamp(56px, 7vw, 84px) 0 48px;
}
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-top { grid-template-columns: 1fr; gap: 32px; } }
.foot-logo { height: 42px; width: auto; display: block; margin-bottom: 20px; }
.site-foot h4 {
  font-size: 13px; letter-spacing: .01em; color: #FFF; margin: 0 0 16px; font-weight: 700;
}
.site-foot a { color: var(--on-navy-mut); text-decoration: none; }
.site-foot a:hover { color: #FFF; text-decoration: underline; }
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.foot-addr { font-style: normal; line-height: 1.75; }
.foot-bottom {
  border-top: 1px solid var(--on-navy-line); padding: 26px 0 44px;
  display: flex; flex-wrap: wrap; gap: 14px 32px; justify-content: space-between; font-size: 13px;
}
.foot-legal { margin: 0; max-width: 78ch; line-height: 1.65; }
.reg { color: #FFF; }

/* -- Get a quote: the most prominent thing on the page ------------------- */
/* Lifted so it straddles the hero edge, the way Stripe raises a panel over a
   coloured band. Fastnet is broker-only, so this routes to a broker rather
   than collecting quote details. */
.quote-band { background: var(--bg); }
.quote-band .wrap { position: relative; }
.quote-card {
  margin-top: clamp(-72px, -6vw, -40px);
  position: relative; z-index: 2;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 4px 10px rgba(27,44,73,.06), 0 30px 70px -32px rgba(27,44,73,.55);
  padding: clamp(32px, 4.4vw, 56px);
  display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px, .85fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .quote-card { grid-template-columns: 1fr; } }

.quote-copy h2 { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 4px; }
.quote-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; }
.quote-points li {
  position: relative; padding-left: 30px; color: var(--ink-soft); font-size: 15.5px;
}
.quote-points li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--tick);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.6 4.6L19 7.2'/></svg>") center / 74% no-repeat,
          linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.6 4.6L19 7.2'/></svg>") center / 74% no-repeat,
          linear-gradient(#000 0 0);
          mask-composite: exclude;
}

.quote-form {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px 26px;
}
.quote-form h3 { margin-bottom: 18px; }
.quote-form .field { margin-bottom: 16px; }
.quote-form label {
  display: block; font-size: 13.5px; font-weight: 700;
  color: var(--ink-soft); margin-bottom: 7px;
}
.quote-form input[type="text"], .quote-form select {
  width: 100%; font-family: var(--f); font-size: 16px;
  padding: 13px 16px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-firm);
  border-radius: 10px;
}
.quote-form select { appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%2362748F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m6 9.5 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
  padding-right: 42px;
}
.quote-form input::placeholder { color: var(--muted); }
.quote-submit { width: 100%; justify-content: center; margin-top: 4px; }
.quote-form .form-note { margin-top: 14px; }

/* The feature tile's lead line reads as a headline, not a card title. */
.tile-lead { font-size: clamp(23px, 2.5vw, 31px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
.tile.feature .tlink { color: var(--bright); }
.tile.feature .tlink:hover { color: #FFF; }

/* -- Partner carousel ---------------------------------------------------- */
/* Continuous marquee: two identical rows scroll as one track, so the loop has
   no visible seam. Pauses on hover and for prefers-reduced-motion. */
.strip { background: var(--surface-2); border-block: 1px solid var(--line); padding: 52px 0 56px; }
.strip-inner { padding: 0 var(--gut); }   /* keep the page gutter - the section carries the vertical padding */
.strip-label {
  text-align: center; font-size: 15px; font-weight: 600; color: var(--muted);
  margin: 0 0 34px; letter-spacing: 0; line-height: 1.5; max-width: 52ch;
  margin-inline: auto; padding-inline: var(--gut);
}

.marquee {
  position: relative; overflow: hidden;
  /* Fade the ends so logos enter and leave rather than being cut off. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: slide 34s linear infinite; }
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

.marquee-row {
  display: flex; align-items: center; gap: 72px;
  list-style: none; margin: 0; padding: 0 36px;
}
.plogo { flex: none; display: grid; place-items: center; height: 46px; }
.plogo img {
  max-height: 42px; max-width: 168px; width: auto; display: block;
  opacity: 1; filter: none;   /* partner logos in full colour (Geoff 2026-09-23) */
  transition: opacity .2s ease, filter .2s ease;
}
/* Nothing to reveal on hover now that the logos are already in colour. */
/* Wordmark fallback, shown only when the logo file is missing. */
.plogo span { display: none; font-size: 19px; font-weight: 800; letter-spacing: -.025em;
              color: var(--ink-soft); opacity: .75; white-space: nowrap; }
.plogo.no-img img { display: none; }
.plogo.no-img span { display: block; }
@media (prefers-reduced-motion: reduce) { .plogo img { transition: none; } }

/* ==========================================================================
   Quote page
   Field names throughout match the Fastnet payload schema (ProposerForename,
   Driver1_DriverLicType, Claim1_ClaimType …) so the form maps 1:1 onto the
   rating engine without a translation layer.
   ========================================================================== */

.q-intro { padding: clamp(48px, 6vw, 84px) 0 clamp(28px, 3vw, 40px); }
.q-intro h1 { font-size: clamp(30px, 3.8vw, 48px); margin-bottom: 16px; }
.q-intro .lede { max-width: 58ch; }

/* -- Tabs + progress -----------------------------------------------------
   One sticky header carrying the section tabs and the completion bar. The old
   read-only stepper CSS lived here too; the tabs replaced it, so it is gone.
   ------------------------------------------------------------------------ */
.q-progress-wrap {
  position: sticky; top: 72px; z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  padding: 16px 0 0; border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(15, 27, 45, .03), 0 8px 22px -18px rgba(15, 27, 45, .35);
}

.q-tabs {
  display: flex; gap: 8px; margin: 0 0 14px; padding: 2px 2px 4px;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
.q-tabs::-webkit-scrollbar { display: none; }

.q-tab {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  scroll-snap-align: start;
  padding: 10px 18px 10px 11px; border-radius: var(--pill);
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--f); font-size: 14.5px; font-weight: 600;
  letter-spacing: -.005em; color: var(--muted);
  cursor: pointer; white-space: nowrap; position: relative;
  transition: border-color .18s ease, color .18s ease, background .18s ease,
              box-shadow .18s ease, transform .18s ease;
}
.q-tab:hover {
  border-color: var(--line-firm); color: var(--ink);
  background: var(--surface-2);
  box-shadow: 0 2px 10px -6px rgba(15, 27, 45, .3);
}
.q-tab:active { transform: translateY(1px); }
/* Keyboard focus only - a mouse click should not leave a ring behind. */
.q-tab:focus-visible { outline: 2px solid var(--bright); outline-offset: 2px; }

/* Current: filled, so the tab in view is unmistakable next to four others. */
.q-tab.is-current {
  background: var(--navy); border-color: var(--navy); color: #FFF;
  box-shadow: 0 6px 18px -10px rgba(52, 86, 139, .85);
}
.q-tab.is-current .q-dot {
  background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); color: #FFF;
}

/* Done: quiet confirmation, and it must not shout over the current tab. */
.q-tab.is-done { border-color: color-mix(in srgb, var(--bright) 42%, var(--line)); color: var(--ink); }
.q-tab.is-done .q-dot {
  background: var(--bright); border-color: var(--bright); color: #FFF; font-size: 0;
}
.q-tab.is-done .q-dot::after { content: "✓"; font-size: 13px; font-weight: 700; }
.q-tab.is-done.is-current { border-color: var(--navy); }
.q-tab.is-done.is-current .q-dot { background: var(--bright); border-color: var(--bright); }

/* Error: only set after a submit attempt, so it never nags mid-typing. */
.q-tab.has-error { border-color: #C0392B; color: #C0392B; background: var(--surface); }
.q-tab.has-error .q-dot {
  background: #C0392B; border-color: #C0392B; color: #FFF; font-size: 12.5px;
}
.q-tab.has-error .q-dot::after { content: none; }
.q-tab.has-error.is-current { background: #C0392B; border-color: #C0392B; color: #FFF; }
.q-tab.has-error.is-current .q-dot {
  background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .4);
}

.q-dot {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 12.5px; font-weight: 700;
  background: var(--surface-3); color: var(--muted);
  border: 1px solid var(--line-firm);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

/* -- Completion bar ------------------------------------------------------ */
.q-bar-row { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; }
.q-bar {
  flex: 1; height: 6px; border-radius: var(--pill); overflow: hidden;
  background: var(--surface-3); box-shadow: inset 0 0 0 1px rgba(15, 27, 45, .04);
}
.q-bar-fill {
  height: 100%; width: 0; border-radius: var(--pill);
  background: linear-gradient(90deg, var(--navy), var(--bright));
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
}
.q-bar-pct {
  font-size: 12.5px; font-weight: 700; color: var(--muted);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  /* Names drop away before the row starts scrolling awkwardly; the numbered
     dots plus the section heading below still say where you are. */
  .q-name { display: none; }
  .q-tab { padding: 10px 12px; }
  .q-progress-wrap { top: 60px; padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .q-bar-fill, .q-tab, .q-dot { transition: none; }
}

/* A field switched off by an earlier answer: visibly inert, still in the grid
   so the layout does not jump when the licence type changes. */
.q-field.is-off { opacity: .55; }
.q-field.is-off input,
.q-field.is-off select {
  background: var(--surface-3); color: var(--muted);
  cursor: not-allowed; border-color: var(--line);
}
.q-field.is-off label { color: var(--muted); }

.q-field input.is-bad { border-color: #C0392B; }

/* -- Submit -------------------------------------------------------------- */
.q-submit-bar { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.q-submit-big { font-size: 16px; padding: 16px 34px; }
.q-submit-note { font-size: 13.5px; color: var(--muted); margin: 0; }
.q-submit-note.err { color: #C0392B; font-weight: 600; }

/* -- Form ---------------------------------------------------------------- */
.q-body { padding: clamp(44px, 6vw, 76px) 0 clamp(64px, 8vw, 108px); }
.q-form { max-width: 780px; }
.q-step { border: 0; margin: 0; padding: 0; }
.q-legend { display: block; margin-bottom: 34px; padding: 0; }
.q-legend-n { font-size: 12.5px; font-weight: 700; color: var(--bright-deep);
  display: block; margin-bottom: 10px; letter-spacing: .06em; text-transform: uppercase; }
.q-legend h2 { font-size: clamp(25px, 3vw, 34px); margin-bottom: 10px; outline: none;
  letter-spacing: -.02em; }
.q-legend p { color: var(--muted); margin: 0; max-width: 56ch; }

.q-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 22px; }
@media (max-width: 640px) { .q-grid { grid-template-columns: 1fr; } }
.q-span-2 { grid-column: 1 / -1; }
.q-narrow { max-width: 140px; }

.q-field label, .q-label {
  display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px;
}
.q-field input[type="text"], .q-field input[type="email"], .q-field input[type="tel"],
.q-field input[type="number"], .q-field input[type="date"], .q-field select {
  width: 100%; font-family: var(--f); font-size: 16px; color: var(--ink);
  padding: 13px 15px; background: var(--surface);
  border: 1px solid var(--line-firm); border-radius: 10px;
}
.q-field input:focus, .q-field select:focus { border-color: var(--bright); }
.q-field select {
  appearance: none; padding-right: 42px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%2362748F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m6 9.5 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.q-field.has-error input, .q-field.has-error select { border-color: #C0392B; background: #FDF3F2; }
.q-hint { font-size: 13px; color: var(--muted); margin: 7px 0 0; }

.q-prefix { position: relative; }
.q-prefix span { position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-weight: 600; pointer-events: none; }
.q-prefix input { padding-left: 32px !important; }

.q-reg { display: flex; gap: 10px; }
.q-reg input { flex: 1; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.q-reg .btn { flex: none; }

/* Radio chips */
.q-radios { display: flex; flex-wrap: wrap; gap: 10px; }
.q-chip { position: relative; }
.q-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.q-chip span {
  display: block; padding: 12px 22px; border-radius: var(--pill);
  border: 1px solid var(--line-firm); background: var(--surface);
  font-size: 15px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.q-chip input:checked + span { border-color: var(--navy); background: var(--navy); color: #FFF; }
.q-chip input:focus-visible + span { outline: 2px solid var(--bright); outline-offset: 2px; }
.q-chip:hover span { border-color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .q-chip span { transition: none; } }

.q-sub { background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px; }
.q-note { background: var(--surface-2); border-left: 3px solid var(--bright);
  border-radius: 8px; padding: 16px 18px; font-size: 15px; color: var(--ink-soft); }
.q-note strong { color: var(--ink); display: block; margin-bottom: 3px; }

.q-declaration { background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px 22px; }
.q-declaration.has-error { border-color: #C0392B; }
.q-check { display: flex; gap: 13px; align-items: flex-start;
  font-size: 15px; font-weight: 400 !important; color: var(--ink-soft); cursor: pointer; }
.q-check input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--navy); }

/* -- Nav ----------------------------------------------------------------- */
.q-nav { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line); }
.q-nav-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.q-saved { font-size: 13px; color: var(--muted); margin: 0; }
.q-footnote { margin-top: 20px; }

/* -- Done ---------------------------------------------------------------- */
/* Less top padding once the intro above it is gone - the old value was
   sized to sit under a hero that is no longer there. */
.q-done { max-width: 620px; padding: clamp(16px, 3vw, 32px) 0 clamp(40px, 6vw, 72px); }
.q-done-mark { width: 60px; height: 60px; border-radius: 50%; background: var(--bright);
  color: #FFF; display: grid; place-items: center; font-size: 30px; margin-bottom: 24px; }
.q-done h2 { margin-bottom: 14px; outline: none; }
.q-done .lede { margin-bottom: 28px; }

/* The hidden attribute must beat component display rules — .btn sets
   inline-flex, which was showing Back and Submit on every step. */
[hidden] { display: none !important; }

/* Headings sit below the sticky header (72px) plus the progress rail. */
.q-legend, .q-legend h2, .q-done h2 { scroll-margin-top: 190px; }
@media (max-width: 700px) { .q-legend, .q-legend h2, .q-done h2 { scroll-margin-top: 150px; } }

/* Reg lookup feedback states */
.q-hint.is-ok   { color: var(--bright-deep); font-weight: 600; }
.q-hint.is-warn { color: #9A6510; font-weight: 600; }
.q-hint.is-busy { color: var(--muted); }
.q-ref { font-size: 15px; color: var(--muted); margin: 0 0 22px; }
.q-ref strong { color: var(--ink); font-family: var(--f-mono); }

/* ── Info box (class of use) ──────────────────────────────────────────────
   The trigger is a real button, not an icon span: it has to be reachable by
   keyboard and tappable on a phone, where hover does not exist. */
.q-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brand, #34568b);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}
.q-info:hover,
.q-info:focus-visible { background: var(--bright); outline: none; }
.q-info:focus-visible { box-shadow: 0 0 0 3px rgba(59, 156, 209, .35); }

.q-infobox {
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line, #dbe3ee);
  border-left: 3px solid var(--bright);
  border-radius: 10px;
  background: var(--surface-2, #f6f8fb);
  font-size: 13px;
  line-height: 1.55;
}
.q-infobox dl { margin: 0; }
.q-infobox dt {
  font-weight: 650;
  color: var(--text, #1f2937);
}
.q-infobox dt + dd { margin: 2px 0 10px; }
.q-infobox dd:last-child { margin-bottom: 0; }
.q-infobox dd { margin-left: 0; color: var(--muted, #6b7280); }

.q-infobox .q-infonote {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--line, #dbe3ee);
  color: var(--text, #1f2937);
  font-weight: 550;
}

/* ── Other drivers ────────────────────────────────────────────────────────
   Each driver is a bordered card so it is obvious where one ends and the next
   begins - a flat run of 13 fields per driver is unreadable at five drivers. */
.q-driver {
  margin-bottom: 18px;
  padding: 16px 18px 6px;
  border: 1px solid var(--line, #dbe3ee);
  border-radius: 14px;
  background: var(--surface-2, #f9fbfd);
}
.q-driver-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.q-driver-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  color: var(--text, #1f2937);
}
.q-driver-del {
  border: 1px solid var(--line, #dbe3ee);
  background: #fff;
  color: var(--muted, #6b7280);
  border-radius: 8px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.q-driver-del:hover { border-color: #e19aa2; color: #b3261e; background: #fff6f6; }
.q-driver-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.q-driver-actions .q-hint { margin: 0; }
.q-driver-actions .btn:disabled { opacity: .5; cursor: not-allowed; }

/* The returned premium. Large because it is the one number the whole journey
   exists to produce. */
.q-price {
  margin: 4px 0 18px;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--brand, #34568b);
  line-height: 1.1;
}

/* ── The two cover options on the results panel ──────────────────────────── */
/* Two cards side by side on desktop, stacked on phones. The comprehensive one
   is marked as the pick so the eye has somewhere to land - the cheaper option
   should not win by default just because it is cheaper. */
/* Two cards need more room than the 620px prose column. */
.q-done.has-offers { max-width: 940px; }

.q-offers {
  display: grid; gap: 18px; margin: 6px 0 30px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  align-items: stretch; text-align: left;   /* equal-height cards */
}

.q-offer {
  position: relative;
  display: flex; flex-direction: column;
  padding: 26px 24px 24px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface);
}

/* The recommended card: firmer edge and a little lift, no colour shouting. */
.q-offer.is-pick {
  border-color: var(--line-firm);
  box-shadow: 0 14px 34px -22px rgba(15, 27, 45, .55);
}

.q-offer-tag {
  align-self: flex-start;
  margin-bottom: 12px; padding: 4px 11px;
  border-radius: var(--pill);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--muted);
}
.q-offer.is-pick .q-offer-tag {
  background: var(--bright); border-color: var(--bright); color: #fff;
}

.q-offer h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.01em; }

.q-offer-price {
  margin: 0 0 14px;
  font-size: 38px; font-weight: 700; letter-spacing: -.02em;
  color: var(--brand, #34568b); line-height: 1.1;
}

.q-offer-blurb { margin: 0 0 14px; font-size: 14.5px; color: var(--muted); }

.q-offer-list { margin: 0 0 18px; padding: 0; list-style: none; font-size: 14px; }
.q-offer-list li { position: relative; padding: 0 0 0 24px; margin-bottom: 7px; }
/* Ticks and crosses are drawn, not typed, so they stay aligned and are not
   read out as words by a screen reader. */
/* Included: a green tick. Green is the "yes, you have this" colour across the
   site - see --tick in the palette guide. */
.q-offer-list li::before {
  content: ""; position: absolute; left: 4px; top: .42em;
  width: 9px; height: 5px;
  border-left: 2px solid var(--tick); border-bottom: 2px solid var(--tick);
  transform: rotate(-45deg);
}

/* Optional extra: neither included nor excluded, so neither a green tick nor a
   cross. A muted tick reads as "available, not part of this price". */
.q-offer-list li.is-opt { color: var(--muted); }
.q-offer-list li.is-opt::before {
  border-left-color: var(--line-firm);
  border-bottom-color: var(--line-firm);
}
.q-offer-list li.is-no { color: var(--muted); }
.q-offer-list li.is-no::before {
  width: 10px; height: 10px; top: .3em; left: 3px;
  border: 0; transform: none;
  background:
    linear-gradient(to bottom right, transparent 44%, currentColor 44%, currentColor 56%, transparent 56%),
    linear-gradient(to bottom left,  transparent 44%, currentColor 44%, currentColor 56%, transparent 56%);
  opacity: .65;
}

.q-offer-ref { margin: auto 0 14px; font-size: 13px; color: var(--muted); }
.q-offer .btn { width: 100%; justify-content: center; }

.q-home { margin-top: 4px; }

/* ── Broker list ─────────────────────────────────────────────────────────── */
.broker-prov {
  margin: 34px 0 12px; font-size: 19px; letter-spacing: -.01em;
}
.broker-prov:first-of-type { margin-top: 8px; }
/* The table scrolls inside its own box rather than forcing the page sideways
   on a phone. */
.broker-wrap {
  overflow-x: auto;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
}
/* Each province is a separate table, and an auto-layout table sizes its
   columns to its own content - so City/Phone/Website started at a different
   x in every province. A fixed layout with set widths lines all four up.
   min-width keeps the columns readable on a phone; .broker-wrap scrolls. */
.broker-table { width: 100%; min-width: 960px; table-layout: fixed; border-collapse: collapse; font-size: 14.5px; }
.broker-table th:nth-child(1) { width: 30%; }
.broker-table th:nth-child(2) { width: 22%; }
.broker-table th:nth-child(3) { width: 17%; }
.broker-table th:nth-child(4) { width: 31%; }
.broker-table th, .broker-table td {
  text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.broker-table thead th {
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
  background: var(--surface-2);
}
.broker-table tbody tr:last-child td { border-bottom: 0; }
.broker-table tbody tr:hover td { background: var(--surface-2); }
.broker-table td:first-child { font-weight: 600; color: var(--ink); }

/* Content pages reuse the quote form's intro band for their header. The intro
   and the first section both carry generous vertical padding, which stacked up
   into a dead band between the lede and the first heading - so the section that
   directly follows an intro loses its top padding. */
.q-intro .eyebrow { margin-bottom: 10px; }
/* /teslaquote: the Tesla mark above the heading. The source PNG is square
   (emblem over wordmark), so one dimension is enough. */
.q-intro .tesla-mark { display: block; width: 120px; height: 120px; margin-bottom: 20px; }
.q-intro .lede + .lede { margin-top: 14px; }
.q-intro + .section { padding-top: 0; }
.q-intro + .section.section-tint { padding-top: clamp(28px, 4vw, 48px); }

/* Partner logos are links now - keep them looking like logos, not link text. */
.plogo a { display: grid; place-items: center; text-decoration: none; }
.plogo a:focus-visible { outline: 2px solid var(--bright); outline-offset: 4px; border-radius: 6px; }

/* "Underwritten by [AIG]" beneath the hero actions. Deliberately understated -
   it is a proof point, not a banner. */
.hero-trust {
  display: flex; align-items: center; gap: 12px;
  margin: 26px 0 0; color: var(--on-navy-mut);
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.hero-trust img {
  height: 26px; width: auto; display: block;
  background: #fff; padding: 4px 7px; border-radius: 5px;
}

/* -- Cookie consent banner (assets/consent.js) ---------------------------- */
/* Accept and Reject share one style on purpose: the DPC treats a louder
   "Accept" as nudging. Prefixed fnc- so the declarations page's own
   stylesheet cannot reach it. */
.fnc-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
  background: var(--surface); color: var(--ink);
  border-top: 1px solid var(--line); box-shadow: 0 -8px 28px rgba(27,44,73,.12);
  font-family: var(--f, inherit);
}
.fnc-banner[hidden] { display: none; }
.fnc-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 18px var(--gut);
  display: flex; align-items: center; gap: 20px;
}
.fnc-text { margin: 0; font-size: 14.5px; line-height: 1.55; flex: 1 1 auto; }
.fnc-text a { color: var(--navy); }
.fnc-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.fnc-btn {
  font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  min-width: 108px; padding: 11px 20px; border-radius: 999px;
  background: var(--navy); color: #FFF; border: 1px solid var(--navy);
}
.fnc-btn:hover { background: var(--navy-deep); }
.fnc-btn:focus-visible { outline: 2px solid var(--bright); outline-offset: 2px; }
@media (max-width: 640px) {
  .fnc-inner { flex-direction: column; align-items: stretch; gap: 14px; padding-block: 16px; }
  .fnc-actions .fnc-btn { flex: 1 1 0; }
}
/* Footer "Cookie settings" - a button styled as a link. */
.foot-cookie {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* AIG trade-mark attribution: its own line under the regulatory sentence. */
.aig-attrib { display: block; margin-top: 4px; }
/* The "Underwritten by [AIG]" line on a white background (quote pages). The
   hero version is styled for navy. */
.hero-trust.on-light { color: var(--muted); margin: 22px 0 0; }
.hero-trust.on-light img { border: 1px solid var(--line); }

/* Figures row under the bento (2025 / AIG / CBI). It sat flush against the
   cards, and each big figure's paragraph margin opened a gap before its
   title. Separate it from the cards; keep figure and title together. */
.creds { margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(32px, 4vw, 44px); border-top: 1px solid var(--line); }
.cred-k { margin: 0; }
.cred-t { margin-top: 8px; }

/* Quote pages (/quote, /teslaquote): less air above the intro and between the
   progress bar and the first step - the form should start near the top
   (Geoff 2026-10-14). Content pages keep the roomier intro. */
.quote-page .q-intro { padding: clamp(24px, 3vw, 40px) 0 clamp(20px, 2vw, 28px); }
.quote-page .q-intro .hero-trust.on-light { margin-top: 16px; }
.quote-page .q-body { padding-top: clamp(24px, 3vw, 36px); }

/* The last paragraph in a section kept its bottom margin, adding dead space
   on top of the section padding. */
.section .wrap > :last-child,
.section .q-field > :last-child { margin-bottom: 0; }

/* Where two .section blocks meet (e.g. Contact -> "Making a claim"), each
   side carried the full section padding, doubling the gap. Halve it at the
   join only; a section's outer edges keep the full padding. */
.section:has(+ .section) { padding-bottom: clamp(32px, 3.5vw, 44px); }
.section + .section { padding-top: clamp(32px, 3.5vw, 44px); }

/* Quote form example text (221-D-1234, Opel, Corsa, 12000 ...) read as real
   answers in the browser's default placeholder colour. Pale and regular
   weight so it is clearly a hint. Built from --muted so dark mode follows. */
.quote-page ::placeholder { color: var(--muted); opacity: .55; font-weight: 400; }

/* TPF&T card while the product is not yet available ("Coming soon"). */
.q-offer.is-soon { opacity: .55; filter: grayscale(1); }
.q-offer.is-soon .q-offer-price { font-size: 20px; color: var(--muted); }
.q-offer.is-soon .btn[disabled] { cursor: not-allowed; }

/* Quote form: an unanswered dropdown ("Please select", "—") and an empty date
   box (dd/mm/yyyy) showed in full ink and read as filled in. Give them the
   same pale tone as the text placeholders until something is chosen. The open
   list keeps normal ink so the options stay readable. */
.quote-page select:has(option:checked[value=""]),
.quote-page select:disabled,
.quote-page input[type="date"].is-empty {
  color: color-mix(in srgb, var(--muted) 55%, transparent);
}
.quote-page select option { color: var(--ink); }
.quote-page select option[value=""] { color: var(--muted); }

/* Results: "Please email me these details" / "Amend my answers". */
.q-done-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 10px; }
.q-done-actions[hidden] { display: none; }
.q-email-note { margin: 0 0 22px; min-height: 1em; font-size: 14.5px; color: var(--muted); }
.q-email-note.err { color: #B42318; }
@media (max-width: 640px) { .q-done-actions .btn { flex: 1 1 100%; justify-content: center; } }

/* Results actions: navy outline + icon so "Email me" and "Amend" read as the
   next things to do, without competing with the amber "Proceed" button.
   "Back to home" drops to a text link (Geoff 2026-10-14). */
.btn-outline { background: var(--surface); color: var(--navy); border: 1.5px solid var(--navy); gap: 9px; }
.btn-outline:hover { background: var(--navy); color: #FFF; transform: translateY(-1px); }
.btn-outline:disabled { opacity: .6; cursor: default; transform: none; background: var(--surface); color: var(--navy); }
.btn .btn-ico { flex: 0 0 auto; }
.q-done .q-home { display: inline-flex; margin-top: 4px; }