/* ==========================================================================
   FRONTLINE FAMILY COVERAGE — Design System
   --------------------------------------------------------------------------
   Every colour below is taken from the existing Frontline Family Coverage
   brand (navy #0D2B5E, blue #1A3A6B / #2B5BA8, red #B03A2E / #CC2200,
   off-white #F4F6F9, ink #1B1B1B), plus fire engine red #CE2029 on the
   buttons and wordmark. Nothing here invents a new palette — the additions
   are darker and lighter steps of the same hues so the brand can carry
   full-bleed cinematic sections without losing contrast.
   ========================================================================== */

:root {
  /* ---- Core brand ---- */
  --fl-navy: #0d2b5e;
  --fl-blue: #1a3a6b;
  --fl-blue-mid: #2b5ba8;
  --fl-blue-light: #e8f0fa;
  --fl-red: #b03a2e;
  --fl-red-hot: #cc2200;
  --fl-red-soft: #e88880;
  --fl-off: #f4f6f9;
  --fl-white: #fff;
  --fl-ink: #1b1b1b;
  --fl-muted: #5a6677;
  --fl-border: #d6def0;

  /* Fire engine red — every filled button and the wordmark. Kept as its own
     token so the CTA red can move without disturbing the accent red used on
     rules, bullets, eyebrows and chapter numbers. */
  --fl-red-fire: #ce2029;
  --fl-red-fire-dark: #a81620; /* pressed / hover state */

  /* ---- Cinematic extensions of the same hues ---- */
  --fl-black: #050b14; /* darkest navy-black, for full-bleed media sections */
  --fl-navy-deep: #071a38; /* between black and brand navy */
  --fl-blue-bright: #4a86dd; /* accessible blue accent on dark backgrounds */
  --fl-line-dark: rgba(255, 255, 255, 0.14);
  --fl-line-light: rgba(13, 43, 94, 0.14);
  --fl-ink-soft: rgba(255, 255, 255, 0.72);

  /* ---- Type ---- */
  --fl-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Display scale — viewport aware, never smaller than readable. */
  --fs-mega: clamp(2.85rem, 9.2vw, 8.5rem);
  --fs-display: clamp(2.35rem, 6.4vw, 5.75rem);
  --fs-h2: clamp(1.9rem, 4.4vw, 3.75rem);
  --fs-h3: clamp(1.35rem, 2.4vw, 2.1rem);
  --fs-lead: clamp(1.02rem, 1.35vw, 1.3rem);
  --fs-body: clamp(0.98rem, 1.05vw, 1.08rem);
  --fs-eyebrow: 0.72rem;

  /* ---- Rhythm ---- */
  --pad-x: clamp(1.25rem, 5vw, 5.5rem);
  --section-y: clamp(4.5rem, 11vh, 9.5rem);
  --maxw: 1440px;
  --maxw-text: 68ch;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --r: 4px;
  --r-lg: 10px;
}

/* ==========================================================================
   RESET
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--fl-font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--fl-ink);
  background: var(--fl-black);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--fl-blue-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 999;
  padding: 0.85rem 1.35rem;
  background: var(--fl-red-fire);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.skip-link:focus {
  top: 1rem;
}

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */
.shell {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight {
  padding-block: clamp(3rem, 7vh, 5.5rem);
}

/* Surfaces — the site alternates between these deliberately. */
.s-black {
  background: var(--fl-black);
  color: #fff;
}
.s-navy {
  background: var(--fl-navy-deep);
  color: #fff;
}
.s-brand {
  background: var(--fl-navy);
  color: #fff;
}
.s-light {
  background: var(--fl-white);
  color: var(--fl-ink);
}
.s-off {
  background: var(--fl-off);
  color: var(--fl-ink);
}

/* The `:not(:where(#soro-blog *))` exclusion keeps this rule off the SORO blog
   embed in the Learning Center section. At two classes plus an element it
   outranks most of the selectors the embed ships, so without the exclusion it
   would repaint every article title, category and pagination link white and
   flatten SORO's own dark theme.

   The exclusion is wrapped in `:where()` because `:not()` otherwise takes the
   specificity of its argument — a bare `:not(#soro-blog *)` would add an id's
   worth of weight and let this rule start beating later, more specific link
   rules elsewhere on the site (`.s-black .linked-list a:hover` on /our-story/
   and /404/, for one, which would lose its hover colour). `:where()` always
   counts as zero, so this selector keeps exactly the specificity it had before
   the embed existed and every other link on the site resolves as it does in
   production. */
.s-black a:not(.btn):not(:where(#soro-blog *)),
.s-navy a:not(.btn):not(:where(#soro-blog *)),
.s-brand a:not(.btn):not(:where(#soro-blog *)) {
  color: #fff;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--fs-eyebrow);
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fl-red-soft);
  margin-bottom: 1.4rem;
}

.s-light .eyebrow,
.s-off .eyebrow {
  color: var(--fl-red);
}

.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: currentColor;
  flex: none;
}

.display,
.mega,
h1,
h2,
h3 {
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 0.98;
  text-wrap: balance;
}

.mega {
  font-size: var(--fs-mega);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

.display {
  font-size: var(--fs-display);
  text-transform: uppercase;
}

.h2 {
  font-size: var(--fs-h2);
  text-transform: uppercase;
}

.h3 {
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  max-width: 52ch;
  color: var(--fl-ink-soft);
  font-weight: 400;
}

.s-light .lead,
.s-off .lead {
  color: var(--fl-muted);
}

.prose {
  max-width: var(--maxw-text);
}

.prose p + p {
  margin-top: 1.1rem;
}

.prose h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  margin-top: clamp(2.75rem, 5vw, 4rem);
  margin-bottom: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--fl-border);
}

.prose h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.prose h3 {
  font-size: 1.05rem;
  font-weight: 800;
  margin-top: 1.75rem;
  margin-bottom: 0.6rem;
}

.prose ul {
  list-style: none;
  margin-top: 1.1rem;
  display: grid;
  gap: 0.7rem;
}

.prose li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--fl-muted);
}

.prose li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--fl-red);
}

.prose a {
  color: var(--fl-blue-mid);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a:hover {
  color: var(--fl-red);
}

.accent-red {
  color: var(--fl-red-soft);
}
.s-light .accent-red,
.s-off .accent-red {
  color: var(--fl-red);
}
/* Fire engine red for a single word inside a headline. Display-sized text
   only — it clears the 3:1 large-text threshold, not the 4.5:1 body one. */
.accent-fire {
  color: var(--fl-red-fire);
}
.accent-blue {
  color: var(--fl-blue-bright);
}
.s-light .accent-blue,
.s-off .accent-blue {
  color: var(--fl-blue-mid);
}

.rule {
  width: 72px;
  height: 3px;
  background: var(--fl-red);
  margin-block: 1.6rem;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 56px;
  padding: 1rem 1.85rem;
  font-size: 0.83rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-radius: var(--r);
  border: 2px solid transparent;
  transition: background 0.28s var(--ease), color 0.28s var(--ease), border-color 0.28s var(--ease),
    transform 0.28s var(--ease);
  text-align: center;
}

.btn svg {
  flex: none;
  width: 15px;
  height: 15px;
  transition: transform 0.28s var(--ease);
}

.btn:hover svg {
  transform: translateX(5px);
}

.btn--primary {
  background: var(--fl-red-fire);
  color: #fff;
  border-color: var(--fl-red-fire);
}

.btn--primary:hover {
  background: var(--fl-red-fire-dark);
  border-color: var(--fl-red-fire-dark);
}

.btn--ghost {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}

.btn--ghost:hover {
  background: #fff;
  color: var(--fl-navy);
  border-color: #fff;
}

.s-light .btn--ghost,
.s-off .btn--ghost {
  border-color: rgba(13, 43, 94, 0.35);
  color: var(--fl-navy);
}

.s-light .btn--ghost:hover,
.s-off .btn--ghost:hover {
  background: var(--fl-navy);
  color: #fff;
  border-color: var(--fl-navy);
}

.btn--navy {
  background: var(--fl-navy);
  color: #fff;
  border-color: var(--fl-navy);
}

.btn--navy:hover {
  background: var(--fl-blue-mid);
  border-color: var(--fl-blue-mid);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.2rem;
}

/* Text link with an underline that draws on hover. */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--fl-red);
  transition: gap 0.25s var(--ease), border-color 0.25s var(--ease);
}

.tlink:hover {
  gap: 0.95rem;
  border-color: var(--fl-red-hot);
}

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */
.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem var(--pad-x);
  background: transparent;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), padding 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}

.hdr.is-solid,
body.nav-open .hdr {
  background: rgba(5, 11, 20, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--fl-line-dark);
}

/* Interior pages open on a dark band rather than a video, so the header is
   solid from the first pixel. */
body.solid-nav .hdr {
  background: rgba(5, 11, 20, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--fl-line-dark);
}

.hdr__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
}

.hdr__brand img {
  height: 46px;
  width: auto;
}

.hdr__wordmark {
  display: block;
  line-height: 1;
}

.hdr__wordmark b {
  display: block;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}

.hdr__wordmark span {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fl-red-fire);
  margin-top: 0.25rem;
}

.hdr__nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.7vw, 1.9rem);
}

.hdr__link {
  position: relative;
  font-size: 0.735rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  padding-block: 0.4rem;
  transition: color 0.25s var(--ease);
  white-space: nowrap;
}

.hdr__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--fl-red);
  transition: width 0.3s var(--ease);
}

.hdr__link:hover,
.hdr__link[aria-current='page'] {
  color: #fff;
}

.hdr__link:hover::after,
.hdr__link[aria-current='page']::after {
  width: 100%;
}

.hdr__cta {
  min-height: 44px;
  padding: 0.7rem 1.25rem;
  font-size: 0.72rem;
}

.hdr__burger {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  flex: none;
}

.hdr__burger span {
  display: block;
  width: 26px;
  height: 2px;
  background: #fff;
  transition: transform 0.32s var(--ease), opacity 0.2s var(--ease);
}

body.nav-open .hdr__burger span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
body.nav-open .hdr__burger span:nth-child(2) {
  opacity: 0;
}
body.nav-open .hdr__burger span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 1080px) {
  .hdr__nav {
    display: none;
  }
  .hdr__burger {
    display: flex;
  }
  .hdr__brand img {
    height: 40px;
  }
}

/* ---- Mobile drawer: near-full-screen, large targets ---- */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--fl-black);
  padding: 6.5rem var(--pad-x) 2.5rem;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.5s var(--ease), visibility 0.5s;
}

body.nav-open .mnav {
  transform: translateY(0);
  visibility: visible;
}

.mnav::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 70% at 50% 0%, rgba(43, 91, 168, 0.28), transparent 60%),
    radial-gradient(90% 60% at 90% 100%, rgba(176, 58, 46, 0.24), transparent 65%);
  pointer-events: none;
}

.mnav__list {
  position: relative;
  list-style: none;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--fl-line-dark);
}

.mnav__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--fl-line-dark);
  font-size: clamp(1.45rem, 6.2vw, 2.1rem);
  font-weight: 900;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(14px);
}

body.nav-open .mnav__list a {
  animation: mnavIn 0.5s var(--ease) forwards;
}

.mnav__list a span {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--fl-red-soft);
}

@keyframes mnavIn {
  to {
    opacity: 1;
    transform: none;
  }
}

.mnav__foot {
  position: relative;
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.mnav__phone {
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
}

.mnav__phone small {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.3rem;
}

/* ==========================================================================
   MEDIA — video slots and images
   ========================================================================== */
.media {
  position: relative;
  overflow: hidden;
  background: var(--fl-navy-deep);
  isolation: isolate;
}

.media img,
.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, center);
  display: block;
}

.media__poster {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.media__video {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
}

.media.is-playing .media__video {
  opacity: 1;
}

/* YouTube-hosted slots. The embed sits in the same layer as a native video and
   is scaled to cover the slot, so the crop, radius and responsive behaviour of
   the container it inherits are unchanged. */
.media__embed {
  container-type: size;
}

.media__embed iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 177.7778cqh; /* 16:9 grown to cover a taller slot */
  min-height: 56.25cqw; /* 16:9 grown to cover a wider slot */
  transform: translate(-50%, -50%);
  border: 0;
  display: block;
}

/* Background films are decorative — no pointer target, as before. */
.media__embed--ambient iframe {
  pointer-events: none;
}

/* A narrative film shown at its own 16:9 ratio rather than cropped to cover a
   taller slot. The player stays interactive, so no pointer-events override. */
.media--embed-fit .media__embed {
  position: absolute;
  inset: 0;
}

.media--embed-fit .media__embed iframe {
  min-width: 0;
  min-height: 0;
}

.media__scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 11, 20, 0.72) 0%, rgba(5, 11, 20, 0.32) 42%, rgba(5, 11, 20, 0.88) 100%);
}

.media__scrim--soft {
  background: linear-gradient(180deg, rgba(5, 11, 20, 0.5) 0%, rgba(5, 11, 20, 0.2) 50%, rgba(5, 11, 20, 0.72) 100%);
}

.media__scrim--side {
  background: linear-gradient(90deg, rgba(5, 11, 20, 0.9) 0%, rgba(5, 11, 20, 0.45) 55%, rgba(5, 11, 20, 0.2) 100%);
}

/* Placeholder badge — visible until a real Frontline asset is wired in. */
.media__tag {
  position: absolute;
  z-index: 5;
  left: 1rem;
  top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 100px;
  background: rgba(5, 11, 20, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  pointer-events: none;
}

.media__tag i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fl-red-soft);
  flex: none;
}

/* Pause / play control */
.media__ctl {
  position: absolute;
  z-index: 6;
  right: 1.15rem;
  bottom: 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 40px;
  padding: 0.55rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 100px;
  background: rgba(5, 11, 20, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.media__ctl:hover {
  background: rgba(5, 11, 20, 0.85);
  border-color: #fff;
}

.media__ctl svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}

/* Play affordance for chaptered story videos */
.media__play {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
}

.media__play span {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.6rem;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 100px;
  background: rgba(5, 11, 20, 0.35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.media__play:hover span {
  background: var(--fl-red-fire);
  border-color: var(--fl-red);
  transform: scale(1.03);
}

/* No footage wired up yet — the affordance stays, but reads as pending. */
.media__play:disabled {
  cursor: default;
}

.media__play:disabled span {
  opacity: 0.55;
  border-style: dashed;
}

.media__play:disabled:hover span {
  background: rgba(5, 11, 20, 0.35);
  border-color: rgba(255, 255, 255, 0.6);
  transform: none;
}

.media.is-playing .media__play {
  opacity: 0;
  pointer-events: none;
}

/* Media that fills a positioned parent (hero, page hero, statement band). */
.hero__media > .media,
.phero__media > .media,
.band__media > .media {
  position: absolute;
  inset: 0;
}

/* Aspect helpers */
.ar-16x9 {
  aspect-ratio: 16 / 9;
}
.ar-4x5 {
  aspect-ratio: 4 / 5;
}
.ar-3x4 {
  aspect-ratio: 3 / 4;
}
.ar-1x1 {
  aspect-ratio: 1 / 1;
}
.ar-9x16 {
  aspect-ratio: 9 / 16;
}
.ar-21x9 {
  aspect-ratio: 21 / 9;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 9rem var(--pad-x) clamp(4.5rem, 9vh, 7rem);
}

.hero__title {
  max-width: 17ch;
}

.hero__sub {
  margin-top: 1.65rem;
  max-width: 46ch;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.8);
}

.hero__reassure {
  margin-top: 1.5rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.hero__scroll {
  position: absolute;
  z-index: 5;
  left: var(--pad-x);
  bottom: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.hero__scroll i {
  display: block;
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), transparent);
  animation: scrollPulse 2.4s var(--ease) infinite;
}

@keyframes scrollPulse {
  0%,
  100% {
    transform: scaleY(0.4);
    transform-origin: top;
    opacity: 0.35;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .hero__scroll {
    display: none;
  }
}

/* Interior page hero — shorter, same language. */
.phero {
  position: relative;
  min-height: clamp(60vh, 74svh, 780px);
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
}

.phero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.phero__inner {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 8.5rem var(--pad-x) clamp(3rem, 7vh, 5rem);
}

.phero__title {
  max-width: 18ch;
}

/* ==========================================================================
   STORY CHAPTERS — alternating full-bleed media + type
   ========================================================================== */
.chapter {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.75rem, 4vw, 4.5rem);
  align-items: center;
}

.chapter__media {
  grid-column: 1 / span 7;
}

.chapter__body {
  grid-column: 8 / span 5;
}

.chapter--flip .chapter__media {
  grid-column: 6 / span 7;
  grid-row: 1;
}

.chapter--flip .chapter__body {
  grid-column: 1 / span 5;
  grid-row: 1;
}

.chapter__num {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.3em;
  color: var(--fl-red-soft);
  margin-bottom: 1rem;
}

.s-light .chapter__num,
.s-off .chapter__num {
  color: var(--fl-red);
}

.chapter__body p {
  margin-top: 1.3rem;
  max-width: 44ch;
}

@media (max-width: 900px) {
  .chapter__media,
  .chapter__body,
  .chapter--flip .chapter__media,
  .chapter--flip .chapter__body {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .chapter--flip .chapter__media {
    order: -1;
  }
}

/* Full-bleed statement band */
.band {
  position: relative;
  min-height: clamp(65vh, 82svh, 900px);
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}

.band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.band__inner {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  padding-block: clamp(4rem, 10vh, 7rem);
}

/* ==========================================================================
   WHO WE SERVE — photography-led tiles
   ========================================================================== */
.serve {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 2px;
  background: var(--fl-line-dark);
}

.serve__item {
  position: relative;
  min-height: clamp(300px, 42vh, 460px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--fl-navy-deep);
  color: #fff;
}

.serve__item .media {
  position: absolute;
  inset: 0;
}

.serve__item .media img {
  transition: transform 1.1s var(--ease);
}

.serve__item:hover .media img,
.serve__item:focus-within .media img {
  transform: scale(1.06);
}

.serve__body {
  position: relative;
  z-index: 5;
  padding: 1.6rem 1.5rem;
  width: 100%;
}

.serve__body h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  text-transform: uppercase;
}

.serve__body p {
  margin-top: 0.5rem;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.68);
}

.serve__item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 6;
  width: 0;
  height: 3px;
  background: var(--fl-red);
  transition: width 0.5s var(--ease);
}

.serve__item:hover::after,
.serve__item:focus-within::after {
  width: 100%;
}

/* Single supplied composite graphic standing in for the tile row — full bleed,
   natural aspect ratio, never stretched. */
.serve-graphic img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   STEPS — oversized numerals
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: clamp(1.75rem, 3vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}

.step__num {
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px var(--fl-blue-mid);
  margin-bottom: 1.1rem;
}

.s-black .step__num,
.s-navy .step__num,
.s-brand .step__num {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.35);
}

.step h3 {
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}

.step p {
  font-size: 0.95rem;
  max-width: 34ch;
}

.s-light .step p,
.s-off .step p {
  color: var(--fl-muted);
}

.s-black .step p,
.s-navy .step p,
.s-brand .step p {
  color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.quote-lg {
  font-size: clamp(1.5rem, 3.4vw, 2.9rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

.tcard {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  border: 1px solid var(--fl-line-dark);
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--fl-red);
}

.s-light .tcard,
.s-off .tcard {
  border-color: var(--fl-border);
  border-left-color: var(--fl-red);
  background: #fff;
}

.tcard blockquote {
  font-size: clamp(1.02rem, 1.5vw, 1.22rem);
  line-height: 1.55;
  font-weight: 600;
}

.tcard figcaption {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: auto;
}

.tcard__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--fl-navy);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  flex: none;
}

.tcard__who b {
  display: block;
  font-size: 0.95rem;
}

.tcard__who span {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fl-red-soft);
  margin-top: 0.15rem;
}

.s-light .tcard__who span,
.s-off .tcard__who span {
  color: var(--fl-red);
}

.stars {
  color: var(--fl-red-soft);
  letter-spacing: 0.24em;
  font-size: 0.8rem;
}

.s-light .stars,
.s-off .stars {
  color: var(--fl-red);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.25rem, 2vw, 2rem);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}

/* ==========================================================================
   PARTNERS — monochrome marquee, no boxes
   ========================================================================== */
.marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
  width: max-content;
  animation: marquee 96s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

.marquee img {
  height: clamp(48px, 5.5vw, 74px);
  width: auto;
  filter: grayscale(1) brightness(1.9) contrast(0.85);
  opacity: 0.72;
  transition: opacity 0.35s var(--ease), filter 0.35s var(--ease);
}

.marquee img:hover {
  opacity: 1;
  filter: none;
}

.s-light .marquee img,
.s-off .marquee img {
  filter: grayscale(1) contrast(1.05);
  opacity: 0.62;
}

/* The partner marks are supplied as white artwork, so on a light section they
   disappeared. They now ride on a dark navy wall — the section around it stays
   off-white, which keeps the rhythm break between the dark chapters. */
.logo-wall {
  background: linear-gradient(180deg, var(--fl-navy-deep), var(--fl-black));
  border-radius: var(--r);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  overflow: hidden;
}

.s-light .logo-wall .marquee img,
.s-off .logo-wall .marquee img,
.logo-wall .marquee img {
  filter: none;
  opacity: 0.88;
}

.s-light .logo-wall .marquee img:hover,
.s-off .logo-wall .marquee img:hover,
.logo-wall .marquee img:hover {
  opacity: 1;
}

.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  justify-items: center;
}

.partner-grid img {
  height: clamp(56px, 6vw, 86px);
  width: auto;
  filter: grayscale(1) brightness(1.85) contrast(0.85);
  opacity: 0.75;
  transition: opacity 0.35s var(--ease), filter 0.35s var(--ease);
}

.partner-grid img:hover {
  opacity: 1;
  filter: none;
}

.s-light .partner-grid img,
.s-off .partner-grid img {
  filter: grayscale(1) contrast(1.05);
  opacity: 0.65;
}

/* ==========================================================================
   ACCORDION (FAQ)
   ========================================================================== */
.acc {
  border-top: 1px solid var(--fl-line-light);
}

.s-black .acc,
.s-navy .acc,
.s-brand .acc {
  border-top-color: var(--fl-line-dark);
}

.acc__item {
  border-bottom: 1px solid var(--fl-line-light);
}

.s-black .acc__item,
.s-navy .acc__item,
.s-brand .acc__item {
  border-bottom-color: var(--fl-line-dark);
}

.acc__btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.4rem 0;
  text-align: left;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.35;
  transition: color 0.25s var(--ease);
}

.acc__btn:hover {
  color: var(--fl-red);
}

.s-black .acc__btn:hover,
.s-navy .acc__btn:hover {
  color: var(--fl-red-soft);
}

.acc__icon {
  flex: none;
  width: 22px;
  height: 22px;
  position: relative;
  margin-top: 0.25rem;
}

.acc__icon::before,
.acc__icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 2px;
  background: var(--fl-red);
  transition: transform 0.35s var(--ease);
}

.acc__icon::after {
  transform: rotate(90deg);
}

.acc__btn[aria-expanded='true'] .acc__icon::after {
  transform: rotate(0deg);
}

.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}

.acc__panel[data-open='true'] {
  grid-template-rows: 1fr;
}

.acc__panel > div {
  overflow: hidden;
}

.acc__panel p {
  padding-bottom: 1.5rem;
  max-width: 72ch;
  font-size: 0.98rem;
}

.s-light .acc__panel p,
.s-off .acc__panel p {
  color: var(--fl-muted);
}

.s-black .acc__panel p,
.s-navy .acc__panel p {
  color: rgba(255, 255, 255, 0.72);
}

/* ==========================================================================
   FORMS
   ========================================================================== */
.form {
  display: grid;
  gap: 1.15rem;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.15rem;
}

@media (max-width: 620px) {
  .form__row {
    grid-template-columns: 1fr;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.field label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.s-light .field label,
.s-off .field label {
  color: var(--fl-muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--fl-line-dark);
  border-radius: var(--r);
  color: #fff;
  font-size: 1rem;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.75rem;
}

.field select option {
  background: var(--fl-navy-deep);
  color: #fff;
}

.s-light .field input,
.s-light .field select,
.s-light .field textarea,
.s-off .field input,
.s-off .field select,
.s-off .field textarea {
  background: #fff;
  border-color: var(--fl-border);
  color: var(--fl-ink);
}

.s-light .field select option,
.s-off .field select option {
  background: #fff;
  color: var(--fl-ink);
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.s-light .field input::placeholder,
.s-off .field input::placeholder,
.s-light .field textarea::placeholder,
.s-off .field textarea::placeholder {
  /* Tokenised, and dark enough to clear AA against the light ground —
     placeholders still read lighter than the value text. */
  color: var(--fl-muted);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--fl-blue-bright);
  background: rgba(255, 255, 255, 0.09);
}

.s-light .field input:focus,
.s-off .field input:focus,
.s-light .field select:focus,
.s-off .field select:focus,
.s-light .field textarea:focus,
.s-off .field textarea:focus {
  background: #fff;
  border-color: var(--fl-blue-mid);
}

.field textarea {
  min-height: 118px;
  resize: vertical;
}

.field[data-invalid='true'] input,
.field[data-invalid='true'] select,
.field[data-invalid='true'] textarea {
  border-color: var(--fl-red-hot);
}

.field__error {
  display: none;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--fl-red-soft);
  text-transform: none;
  letter-spacing: 0;
}

.s-light .field__error,
.s-off .field__error {
  color: var(--fl-red-hot);
}

.field[data-invalid='true'] .field__error,
.form__consent[data-invalid='true'] .field__error {
  display: block;
}

/* The consent tickbox is required too — when it is the thing holding up the
   submission it has to show it, the same way a text field does. */
.form__consent[data-invalid='true'] input {
  outline: 2px solid var(--fl-red-hot);
  outline-offset: 3px;
}

.form__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

.s-light .form__consent,
.s-off .form__consent {
  color: var(--fl-muted);
}

.form__consent input {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin-top: 0.15rem;
  flex: none;
  accent-color: var(--fl-red);
}

.form__consent a {
  text-decoration: underline;
}

.form__status {
  display: none;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r);
  font-size: 0.9rem;
  font-weight: 700;
  border: 1px solid var(--fl-red-hot);
  background: rgba(204, 34, 0, 0.12);
  color: var(--fl-red-soft);
}

.s-light .form__status,
.s-off .form__status {
  color: var(--fl-red-hot);
}

.form__status[data-show='true'] {
  display: block;
}

.hp {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* ==========================================================================
   MODAL — partnership popup
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  background: rgba(5, 11, 20, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.modal[data-open='true'] {
  display: flex;
  animation: fadeIn 0.35s var(--ease);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
}

.modal__panel {
  position: relative;
  width: min(1080px, 100%);
  max-height: 94svh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--fl-navy-deep);
  border: 1px solid var(--fl-line-dark);
  border-radius: var(--r-lg);
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.modal__media {
  position: relative;
  background: var(--fl-black);
  min-height: 100%;
}

.modal__media .media {
  height: 100%;
  min-height: 420px;
}

.modal__body {
  padding: clamp(1.75rem, 3vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
}

.modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 10;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--fl-line-dark);
  background: rgba(5, 11, 20, 0.7);
  color: #fff;
  font-size: 1.1rem;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}

.modal__close:hover {
  background: var(--fl-red-fire);
  transform: rotate(90deg);
}

.modal__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 0.35rem;
}

.partner-grid--sm {
  margin-top: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--fl-line-dark);
  gap: clamp(1rem, 3vw, 2rem);
}

.partner-grid--sm img {
  max-height: 32px;
}

@media (max-width: 860px) {
  .modal__panel {
    grid-template-columns: 1fr;
  }
  .modal__media .media {
    min-height: 0;
    aspect-ratio: 9 / 16;
    max-height: 45svh;
  }
}

/* ==========================================================================
   TICK LIST
   ========================================================================== */
.ticks {
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.ticks li {
  position: relative;
  padding-left: 2rem;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.s-light .ticks li,
.s-off .ticks li {
  color: var(--fl-muted);
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--fl-red);
  border-bottom: 2px solid var(--fl-red);
  transform: rotate(-45deg);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr {
  background: var(--fl-black);
  color: #fff;
  border-top: 1px solid var(--fl-line-dark);
  padding-block: clamp(3.5rem, 8vh, 6rem) 2rem;
}

.ftr__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
}

@media (max-width: 900px) {
  .ftr__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .ftr__grid {
    grid-template-columns: 1fr;
  }
}

.ftr__brand img {
  height: 74px;
  width: auto;
  margin-bottom: 1.1rem;
}

.ftr__mission {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 36ch;
}

.ftr__title {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fl-red-soft);
  margin-bottom: 1.1rem;
}

.ftr__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.ftr__list a {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.68);
  transition: color 0.2s var(--ease);
}

.ftr__list a:hover {
  color: #fff;
}

.ftr__social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.ftr__social a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--fl-line-dark);
  border-radius: 50%;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.ftr__social a:hover {
  background: var(--fl-red-fire);
  border-color: var(--fl-red);
}

.ftr__social svg {
  width: 16px;
  height: 16px;
  fill: #fff;
}

.ftr__legal {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--fl-line-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
}

.ftr__disclosure {
  margin-top: 1.25rem;
  font-size: 0.74rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.38);
  max-width: 100ch;
}

/* ==========================================================================
   MOTION — restrained reveals
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}

[data-reveal='fade'] {
  transform: none;
}

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

[data-reveal-delay='1'] {
  transition-delay: 0.09s;
}
[data-reveal-delay='2'] {
  transition-delay: 0.18s;
}
[data-reveal-delay='3'] {
  transition-delay: 0.27s;
}
[data-reveal-delay='4'] {
  transition-delay: 0.36s;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .marquee__track {
    animation: none;
    transform: none;
  }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.stack-sm > * + * {
  margin-top: 0.75rem;
}
.stack > * + * {
  margin-top: 1.5rem;
}
.stack-lg > * + * {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.center {
  text-align: center;
}
.center .lead,
.center .quote-lg {
  margin-inline: auto;
}
.center .btn-row {
  justify-content: center;
}
.center .eyebrow::before {
  display: none;
}
.mw-sm {
  max-width: 46ch;
}
.mw-md {
  max-width: 62ch;
}
.hd-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
  margin-bottom: clamp(2.25rem, 4vw, 3.75rem);
}

.note {
  font-size: 0.78rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.45);
  max-width: 82ch;
}

.s-light .note,
.s-off .note {
  color: var(--fl-muted);
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.pill {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--fl-line-dark);
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.s-light .pill,
.s-off .pill {
  border-color: var(--fl-border);
  color: var(--fl-navy);
}

.linked-list {
  list-style: none;
  border-top: 1px solid var(--fl-line-light);
}

.s-black .linked-list,
.s-navy .linked-list {
  border-top-color: var(--fl-line-dark);
}

.linked-list li {
  border-bottom: 1px solid var(--fl-line-light);
}

.s-black .linked-list li,
.s-navy .linked-list li {
  border-bottom-color: var(--fl-line-dark);
}

.linked-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  transition: padding-left 0.35s var(--ease), color 0.25s var(--ease);
}

.linked-list a:hover {
  padding-left: 0.75rem;
  color: var(--fl-red);
}

.s-black .linked-list a:hover,
.s-navy .linked-list a:hover {
  color: var(--fl-red-soft);
}

.linked-list small {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--fl-muted);
  text-transform: none;
}

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.5rem, 1vw, 1rem);
}

.gallery > * {
  grid-column: span 4;
}

.gallery > *:nth-child(1) {
  grid-column: span 6;
}
.gallery > *:nth-child(2) {
  grid-column: span 6;
}
.gallery > *:nth-child(6) {
  grid-column: span 8;
}
.gallery > *:nth-child(7) {
  grid-column: span 4;
}

@media (max-width: 760px) {
  .gallery > *,
  .gallery > *:nth-child(n) {
    grid-column: span 6;
  }
}

/* ==========================================================================
   FRONTLINE QUICKQUOTE
   --------------------------------------------------------------------------
   Scoped to the /quickquote/ funnel and the QuickQuote entry points. Uses the
   existing brand tokens only — no new colours, no new fonts.
   ========================================================================== */
.qq {
  padding-top: calc(var(--section-y) * 0.75);
}

.qq__wrap {
  max-width: 760px;
  margin-inline: auto;
}

.qq__panel {
  display: none;
}

.qq__panel[data-active='true'] {
  display: block;
  animation: qq-in 0.4s var(--ease) both;
}

@keyframes qq-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qq__panel[data-active='true'] {
    animation: none;
  }
}

/* ---- Progress ---------------------------------------------------------- */
.qq__progress {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 0.9rem 0 1.1rem;
  margin-bottom: 1.6rem;
  background: linear-gradient(to bottom, var(--fl-black) 62%, rgba(5, 11, 20, 0));
}

.qq__progress-label {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.7rem;
  align-items: baseline;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 0.6rem;
}

.qq__progress-label b {
  color: #fff;
}

.qq__progress-label span {
  letter-spacing: 0.08em;
  color: var(--fl-blue-bright);
}

.qq__bar {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  overflow: hidden;
}

.qq__bar i {
  display: block;
  height: 100%;
  width: 25%;
  border-radius: 999px;
  background: var(--fl-red-fire);
  transition: width 0.45s var(--ease);
}

/* ---- Copy ------------------------------------------------------------- */
.qq__title {
  margin-top: 0.9rem;
}

.qq__h2,
.qq__h3 {
  margin-top: 0.7rem;
}

.qq__lead {
  margin-top: 1.4rem;
}

.qq__sub {
  margin-top: 0.9rem;
  color: var(--fl-ink-soft);
  max-width: 56ch;
}

.qq__ticks {
  margin-top: 1.6rem;
}

.qq__note {
  margin-top: 1.4rem;
}

.qq__form {
  margin-top: 1.9rem;
}

.qq__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: 2rem;
}

.qq__cta {
  min-height: 58px;
  padding-inline: 2.1rem;
}

.qq__back {
  min-height: 48px;
  padding-inline: 1.4rem;
}

/* ---- Who needs coverage — large tap targets --------------------------- */
.qq__options {
  display: grid;
  gap: 0.85rem;
  margin-top: 2rem;
}

.qq__option {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
  min-height: 76px;
  padding: 1.1rem 3.2rem 1.1rem 1.3rem;
  text-align: left;
  border: 1px solid var(--fl-line-dark);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.05);
  position: relative;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}

.qq__option::after {
  content: '';
  position: absolute;
  right: 1.2rem;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

.qq__option:hover {
  border-color: var(--fl-blue-bright);
  background: rgba(255, 255, 255, 0.09);
}

.qq__option[aria-checked='true'] {
  border-color: var(--fl-red-fire);
  background: rgba(206, 32, 41, 0.14);
}

.qq__option[aria-checked='true']::after {
  border-color: var(--fl-red-fire);
  background: var(--fl-red-fire);
  box-shadow: inset 0 0 0 4px var(--fl-black);
}

.qq__option-title {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: #fff;
}

.qq__option-sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.62);
}

/* ---- Ages ------------------------------------------------------------- */
.qq__adults {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.15rem;
}

.qq__group-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 0.9rem;
}

.qq__children {
  padding-top: 1.6rem;
  margin-top: 0.4rem;
  border-top: 1px solid var(--fl-line-dark);
}

.qq__child-row {
  display: flex;
  align-items: flex-end;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}

.qq__child-row .field {
  flex: 1;
}

.qq__remove {
  flex: none;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--fl-line-dark);
  border-radius: var(--r);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.qq__remove:hover {
  color: #fff;
  border-color: var(--fl-red-fire);
}

.qq__add {
  min-height: 52px;
  padding-inline: 1.3rem;
}

.qq__field-zip {
  max-width: 220px;
}

/* ---- Result ----------------------------------------------------------- */
.qq__result {
  margin-top: 1.8rem;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  border: 1px solid var(--fl-line-dark);
  border-left: 4px solid var(--fl-red-fire);
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, rgba(13, 43, 94, 0.55), rgba(5, 11, 20, 0.35));
}

.qq__result--calm {
  border-left-color: var(--fl-blue-bright);
}

.qq__range-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 0.5rem;
}

.qq__range {
  font-size: clamp(2.1rem, 6.2vw, 3.6rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
}

.qq__range-note {
  margin-top: 1rem;
  color: var(--fl-ink-soft);
  font-size: var(--fs-lead);
  line-height: 1.6;
}

.qq__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.1rem;
  margin-top: 1.8rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--fl-line-dark);
}

.qq__summary dt {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.3rem;
}

.qq__summary dd {
  font-weight: 700;
  color: #fff;
  font-size: 0.98rem;
}

.qq__reference {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.04em;
}

.qq__reference b {
  color: #fff;
}

/* ---- Coverage options available near the visitor's ZIP -----------------
   Sits directly under the range card and stays deliberately quieter than it:
   smaller type, softer colour, no fill. The price is the focus. */
.qq__options-avail {
  margin-top: 0.9rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--fl-line-dark);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.02);
}

.qq__avail-count {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}

.qq__avail-note {
  margin-top: 0.5rem;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--fl-ink-soft);
}

.qq__avail-zip {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.58);
}

.qq__avail-zip b {
  color: rgba(255, 255, 255, 0.86);
}

/* ---- Second conversion ------------------------------------------------ */
.qq__second {
  margin-top: 2.6rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--fl-line-dark);
}

.qq__confirm-note {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 640px) {
  .qq__actions {
    gap: 0.9rem 1.2rem;
  }

  .qq__actions .btn,
  .qq__form .btn[type='submit'] {
    width: 100%;
    justify-content: center;
  }

  .qq__field-zip {
    max-width: none;
  }
}

/* ==========================================================================
   LEAD AREA  (/leads/ — internal, not linked from the public site)
   ========================================================================== */
.la__gate {
  max-width: 420px;
}

.la__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin: 1.8rem 0;
}

.la__filter {
  min-height: 44px;
  padding: 0 1.1rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--fl-line-dark);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.la__filter[aria-pressed='true'] {
  color: #fff;
  border-color: var(--fl-red-fire);
  background: rgba(206, 32, 41, 0.16);
}

.la__list {
  display: grid;
  gap: 1rem;
  list-style: none;
}

.la__card {
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--fl-line-dark);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
}

.la__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.la__name {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #fff;
}

.la__status {
  padding: 0.35rem 0.85rem;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.la__status[data-stage='started'] {
  color: var(--fl-ink-soft);
}

.la__status[data-stage='delivered'] {
  color: var(--fl-blue-bright);
}

.la__status[data-stage='requested'] {
  color: #fff;
  background: var(--fl-red-fire);
  border-color: var(--fl-red-fire);
}

.la__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.9rem 1.2rem;
}

.la__grid dt {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.2rem;
}

.la__grid dd {
  font-size: 0.94rem;
  font-weight: 600;
  color: #fff;
  overflow-wrap: anywhere;
}

.la__grid dd a {
  text-decoration: underline;
}

.la__counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-top: 1.4rem;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.la__counts b {
  color: #fff;
}

/* Inline form success panel — used by the Partnerships contact form so a
   submission is confirmed in place rather than redirecting the visitor. */
.form-thanks {
  padding: clamp(1.6rem, 4vw, 2.4rem);
  border: 1px solid var(--fl-line-dark);
  border-left: 4px solid var(--fl-red-fire);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
}

.form-thanks:focus {
  outline: none;
}

.form-thanks .lead {
  margin-top: 1rem;
}

.form-thanks .note {
  margin-top: 1.4rem;
}

.s-light .form-thanks,
.s-off .form-thanks {
  border-color: var(--fl-line);
  background: #fff;
}

/* ==========================================================================
   PARTNERSHIPS — inquiry section only
   ========================================================================== */
/* "ORGANIZATION." is a single unbreakable word, and at the top of the display
   scale it is wider than its half-of-.grid-2 column, so the headline ran over
   the form fields on the right. Pull the whole text column left into the shell
   gutter rather than resizing the type or the form. The min() caps the pull at
   whatever gutter actually exists — the outer padding plus any space left over
   once .shell hits --maxw — so the column can never slide off-screen on
   narrower desktops. `left` (not `transform`) because [data-reveal].is-in
   resets transform when the reveal animation finishes. */
@media (min-width: 1200px) {
  #partnership-form .grid-2 > :first-child {
    position: relative;
    left: calc(-1 * min(8rem, var(--pad-x) + max(0px, (100vw - var(--maxw)) / 2) - 1rem));
  }
}

/* ==========================================================================
   SORO BLOG EMBED — Learning Center section on /resources/
   --------------------------------------------------------------------------
   The embed sits inside that section's own `.shell`, so it already inherits the
   page's content width and its left/right margins — nothing here re-declares
   either. The embed also ships its own stylesheet with the script, so the rest
   of this block is defensive: give it unlimited height and stop the site's
   global reset from reaching inside it. Every restoration below is scoped with
   :not([class]) so it only ever touches elements SORO has left unstyled —
   anything the embed styles itself keeps winning.

   Deliberately absent: any fixed height, any overflow clipping, and any
   decorative overlay. All three would crop or block the blog.
   ========================================================================== */

/* Just enough air between the "Learning center" label above and the "Four ways
   to work through it" heading below. */
.soro-embed {
  width: 100%;
  margin-block: clamp(0.5rem, 2vw, 1.25rem) clamp(3rem, 6vw, 5rem);
  color: #fff;
}

#soro-blog {
  width: 100%;
  max-width: 100%;
  /* A floor, not a ceiling: it reserves space before the script paints and
     then grows with however many articles arrive. */
  min-height: 320px;
  height: auto;
  color-scheme: dark;
  /* The embed calls scrollIntoView() on this container when an article opens.
     Clear the fixed site header so the article title is not hidden under it. */
  scroll-margin-top: 6rem;
}

/* Two adjustments to how SORO's own stylesheet sits in this page, so the blog
   reads as part of the Resource Center rather than a panel dropped onto it:

   1. SORO caps its wrapper at `max-width: 800px` and centres it. The brief asks
      for full width inside the Learning Center container, aligned to the page's
      left and right margins — which `.shell` already supplies — so the cap is
      released here.
   2. SORO paints that wrapper `#0a0a0a`, a slightly different black from the
      section's own `--fl-black`, which would read as a faint rectangle behind
      the cards. Letting the section's background through removes the seam. The
      cards keep their own `#141414` surfaces and borders, so the embed's dark
      theme is otherwise untouched. */
#soro-blog .soro-blog {
  max-width: none;
  background: transparent;
}

/* Nothing inside the embed may push the page sideways. Only `max-width` is set
   here — never `height`. SORO gives its card thumbnails an explicit
   `height: 100px` via `.soro-blog-card-image`, and a `height: auto` at this
   specificity would beat that and collapse every card. */
#soro-blog img,
#soro-blog video,
#soro-blog canvas {
  max-width: 100%;
}

/* Unclassed media — anything inside article body copy — has no height of its
   own to preserve, so it can scale freely. */
#soro-blog :is(img, video, canvas, iframe):not([class]) {
  height: auto;
}

#soro-blog iframe:not([class]) {
  max-width: 100%;
  width: 100%;
  border: 0;
}

/* `img, video, svg { display: block }` would stack inline icons onto their own
   line. */
#soro-blog svg:not([class]) {
  display: inline-block;
  vertical-align: middle;
}

/* The global reset zeroes every margin and padding; restore flow spacing for
   elements the embed has not styled. */
#soro-blog :is(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure):not([class]) {
  margin-block: 0.75em;
}

#soro-blog :is(ul, ol):not([class]) {
  padding-left: 1.35rem;
}

/* `button { background: none; border: 0 }` would make unstyled pagination and
   filter controls invisible. */
#soro-blog button:not([class]) {
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--fl-line-dark);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-weight: 700;
}

#soro-blog button:not([class]):hover {
  background: rgba(255, 255, 255, 0.12);
}

/* `a { text-decoration: none }` is fine for the embed's own card links, which
   carry classes — but an unclassed link inside article copy needs to read as
   a link. */
#soro-blog a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 3px;
}