/* ============================================================
   DESIGN TOKENS — TTF brand
   Matches reference/design-language.md
   ============================================================ */
:root {
  /* Brand palette */
  --color-teal: #7DD3C2;        /* Primary button bg, accent stripes */
  --color-teal-hover: #65C1AE;
  --color-deep-teal: #194C66;   /* Button text, button border, dark accents */
  --color-navy: #004F6E;        /* Body text, footer bg, dark bands */
  --color-coral: #F69175;       /* Eyebrows, quote glyphs, key stat icons */
  --color-coral-hover: #E47A60;
  --color-magenta: #CC3366;     /* Hyperlinks */

  /* Neutrals */
  --color-cream: #F5F0EC;       /* Primary off-white section bg */
  --color-white: #FFFFFF;       /* Alternating section bg, card bg */
  --color-body: #333333;        /* Default body text */
  --color-muted: #69727D;       /* Secondary text */
  --color-dark-slate: #3F444B;
  --color-border: #E5E7EB;
  --color-trustpilot: #00B67A;

  /* Single brand font */
  --font-sans: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fluid type scale — clamp() adapts mobile→desktop, no media queries needed */
  --fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  --fs-sm: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-xl: clamp(1.25rem, 1.15rem + 0.55vw, 1.5rem);     /* h3 — desktop -15% */
  --fs-quote: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);  /* pull-quote — its own editorial scale */
  --fs-2xl: clamp(1.5rem, 1.3rem + 1.2vw, 2.125rem);     /* CTA-bar title — desktop -15% */
  --fs-3xl: clamp(1.375rem, 1.15rem + 1.4vw, 2.1875rem); /* h2 — rebuilt as a proper step below h1 (was incorrectly larger) */
  --fs-4xl: clamp(1.625rem, 1.45rem + 1.6vw, 2.6875rem); /* h1 — mobile unchanged, desktop -15% */

  --space-section: clamp(3rem, 7vw, 6rem);
  --space-stack: clamp(1rem, 2vw, 1.5rem);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(0, 79, 110, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 79, 110, 0.08);
  --shadow-lg: 0 16px 40px rgba(0, 79, 110, 0.14);
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth;
overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-navy);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  overflow-x: hidden;
}
img, picture, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { color: var(--color-navy); line-height: 1.05; margin: 0 0 var(--space-stack); font-weight: 600; }
h1 { font-size: var(--fs-4xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-3xl); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-xl); }
p { margin: 0 0 var(--space-stack); }
a { color: var(--color-magenta); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-deep-teal); }

/* ============================================================
   TEXT WRAPPING + VIEWPORT-CONTROLLED LINE BREAKS
   Three tools, layered:
     1. text-wrap: balance     — auto-balance lines (headings, quotes)
     2. <br class="br-*">      — viewport-targeted explicit breaks
     3. &nbsp;                 — glue words that must stay together
   ============================================================ */

/* 1. Auto-balance for short text. Browser distributes words across
   lines so the ragged edge is minimised. No manual breaks needed
   most of the time. Applied to all short-text elements where line
   distribution matters — headings, quotes, trust signals, ledes,
   intro copy. Bounded to ~6 lines by the browser; longer paragraphs
   should use `text-wrap: pretty` instead. */
h1, h2, h3, h4,
blockquote,
.eyebrow,
.hero__lede,
.hero__subhead,
.hero__trustpilot-label,
.hero__award-label,
.intro__body {
  text-wrap: balance;
}

/* 2. <br class="..."> utilities — toggle break visibility per breakpoint.
   Drop one of these into any headline for editorial line control
   without writing per-component media queries. Stack multiples in
   one heading for line-by-line control.

   Naming = the minimum viewport at which the break ACTIVATES:
     .br-mobile-only — only at <700px (hidden tablet/desktop+)
     .br-tablet      — appears at 700px+
     .br-desktop     — appears at 900px+
     .br-wide        — appears at 1200px+ */
.br-mobile-only { display: inline; }
.br-tablet,
.br-desktop,
.br-wide { display: none; }

@media (min-width: 700px) {
  .br-mobile-only { display: none; }
  .br-tablet { display: inline; }
}
@media (min-width: 900px) {
  .br-desktop { display: inline; }
}
@media (min-width: 1200px) {
  .br-wide { display: inline; }
}

/* 3. Hyphenation hint — browser hyphenates long words when space
   gets tight. Body copy only; headings should use .br-* or balance. */
.hyphenate { hyphens: auto; -webkit-hyphens: auto; }

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}
.section { padding: var(--space-section) 0; }

/* Section background rhythm: cream ↔ white alternation */
.bg-cream { background: var(--color-cream); }
.bg-white { background: var(--color-white); }
.bg-navy { background: var(--color-navy); color: var(--color-white); }
.bg-navy h1, .bg-navy h2, .bg-navy h3 { color: var(--color-white); }

/* ============================================================
   EYEBROW LABEL — signature TTF treatment
   Outfit 500, uppercase, 2.3px tracking, coral
   ============================================================ */
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.144em; /* 2.3px at 16px */
  text-transform: uppercase;
  color: var(--color-coral);
  margin-bottom: 1rem;
  line-height: 1;
}

/* ============================================================
   BUTTON
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s, border-color 0.2s;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}
.btn--primary {
  background: var(--color-teal);
  color: var(--color-deep-teal);
  border-color: var(--color-deep-teal);
  box-shadow: var(--shadow-md);
}
.btn--primary:hover, .btn--primary:focus {
  background: var(--color-teal-hover);
  color: var(--color-deep-teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}
.btn--lg { padding: 1.25rem 2.5rem; font-size: var(--fs-lg); }

@media (max-width: 700px) {
  .btn--lg { padding: 1.25rem 1.25rem; font-size: var(--fs-base); }
}

/* ============================================================
   SITE HEADER (logo only — non-clickable)
   ============================================================ */
.site-header {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: clamp(0.875rem, 1.5vw, 1.25rem) 0;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.875rem, 2vw, 1.5rem);
}
.site-header__logo-img {
  height: clamp(48px, 6.5vw, 64px);
  width: auto;
  display: block;
}
/* Secondary logo — currently ~72% of the primary size (compound: 0.8 × 0.9).
   Adjusts brand hierarchy: primary = TTF as the franchise opportunity,
   secondary = NJT as the supporting consumer-facing brand. */
.site-header__logo-img--secondary {
  height: clamp(34px, 4.7vw, 46px);
}


/* ============================================================
   HERO
   Flat cream background, two-column collapses fluidly
   ============================================================ */
.hero {
  background: var(--color-cream);
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
/* Mobile-first: hero copy centred. Desktop reverts to left-aligned
   so it reads naturally alongside the video column (see media query below). */
.hero__copy { text-align: center; }
.hero__title { margin-bottom: 1rem; }

/* Subhead — bigger and bolder than the lede so the hierarchy reads
   H1 → subhead (amplifier) → lede (explanation) as three distinct levels. */
.hero__subhead {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 0 1rem;
  max-width: 42ch;
  margin-inline: auto;
  line-height: 1.3;
}

/* Mini-benefits row — credentials strip below CTA.
   Standalone logo placeholders, no text labels. Swap each SVG for the
   real Trustpilot / IFA brand asset when supplied. */
.hero__mini-benefits {
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-top: 1.5rem;
  justify-content: center;
  align-items: center;
}
/* Icon container — holds an inline SVG logo or (later) an <img> swap-in */
.hero__mini-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 6vw, 56px);
  height: clamp(44px, 6vw, 56px);
  flex-shrink: 0;
}
.hero__mini-benefit-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Trust badges — real horizontal logo PNG/WEBP files sitting directly
   under the hero CTA. Sized by height; width auto-scales to preserve
   each badge's native aspect ratio. */
.hero__trust-badges {
  display: flex;
  align-items: center;
 gap: clamp(0.5rem, 2.5vw, 1rem);
  margin-top: clamp(1rem, 2vw, 1.5rem);
  flex-wrap: wrap;
  justify-content: center;
}
/* Mobile gets a chunkier baseline; desktop tightens back down via the
   media query below. The hero column stacks on mobile so badges have
   room to be larger; on desktop they sit in a narrower column and
   want to feel more discreet. */
.hero__trust-badge {
  height: 36px;
  width: auto;
  display: block;
}
/* Recolour a white-on-transparent badge to solid black.
   brightness(0) collapses every non-transparent pixel to #000 while
   keeping the alpha channel intact. ABTA also renders ~25% smaller
   than the other badges (its wordmark is denser, so visual weight
   matches the lighter logos at a smaller pixel size). */
.hero__trust-badge--invert {
  filter: brightness(0);
  height: 27px;
}
@media (min-width: 700px) {
  /* Desktop sizes bumped 15% from the previous values; gap tightens so
     the slightly larger badges still sit as one visual group. */
  .hero__trust-badges { gap: clamp(1rem, 2vw, 1.5rem); }
  .hero__trust-badge { height: clamp(32px, 3.8vw, 36px); }
  .hero__trust-badge--invert { height: clamp(24px, 2.9vw, 28px); }
}

/* Above-the-fold Trustpilot proof — now sits INLINE inside .hero__cta-row,
   immediately right of the primary CTA button (mobile: wraps below).
   Compact inline layout, distinct from the stacked block in the reviews section. */
.hero__trustpilot {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-navy);
}
.hero__trustpilot-stars {
  color: var(--color-trustpilot);
  font-size: var(--fs-base);
  letter-spacing: 0.12em;
  line-height: 1;
}
.hero__trustpilot-label {
  margin: 0;
  letter-spacing: 0.01em;
}
.hero__trustpilot-brand {
  color: var(--color-trustpilot);
  font-weight: 700;
  letter-spacing: 0;
}

/* Award strip — now sits BELOW the CTA row as ambient credibility.
   Coral accent (vs Trustpilot green) — visually distinct trust mechanism. */
.hero__award {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  margin: 1.25rem 0 0;
  font-size: var(--fs-sm);
  color: var(--color-navy);
  line-height: 1.4;
}
.hero__award-label { margin: 0; }
.hero__award-emphasis {
  font-weight: 700;
  color: var(--color-navy);
}
/* .hero__award-image — placeholder rule for when the GFA badge is supplied.
   Will set max-height, vertical alignment, and decorative treatment then. */
.hero__lede {
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-navy);
  margin-bottom: 1.75rem;
  margin-inline: auto;        /* centres the max-width paragraph block */
  max-width: 42ch;
}
.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;    /* centres the button + meta on the main axis */
}
.hero__cta-meta {
  font-size: var(--fs-sm);
  color: var(--color-muted);
}

/* Desktop: two-column grid kicks in AND copy goes left-aligned */
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.05fr 1fr; }
  .hero__copy { text-align: left; }
  .hero__lede { margin-inline: 0; }
  .hero__subhead { margin-inline: 0; }
  .hero__cta-row { justify-content: flex-start; }
  .hero__mini-benefits { justify-content: flex-start; }
  .hero__trust-badges { justify-content: flex-start; }
}

/* ============================================================
   VIDEO PLACEHOLDER (lazy-load)
   ============================================================ */
.video-placeholder {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  background: var(--color-deep-teal);
  box-shadow: var(--shadow-lg);
  border: 0;
  padding: 0;
  width: 100%;
}
.video-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.video-placeholder:hover img,
.video-placeholder:focus img { transform: scale(1.03); }
.video-placeholder__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(60px, 10vw, 96px);
  height: clamp(60px, 10vw, 96px);
  border-radius: 50%;
  background: var(--color-teal);
  border: 3px solid var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 79, 110, 0.4);
  transition: transform 0.2s, background 0.2s;
}
.video-placeholder:hover .video-placeholder__play,
.video-placeholder:focus .video-placeholder__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--color-teal-hover);
}
.video-placeholder__play::after {
  content: "";
  display: block;
  width: 0; height: 0;
  margin-left: 5px;
  border-left: clamp(16px, 2.5vw, 22px) solid var(--color-deep-teal);
  border-top: clamp(10px, 1.6vw, 14px) solid transparent;
  border-bottom: clamp(10px, 1.6vw, 14px) solid transparent;
}
.video-placeholder__label {
  position: absolute;
  bottom: 1rem; left: 1rem;
  color: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: rgba(0, 79, 110, 0.78);
  padding: 0.4rem 0.8rem;
  border-radius: var(--radius-sm);
}

/* ============================================================
   TRUST BADGES STRIP
   Coral eyebrow + horizontal logos
   ============================================================ */
.trust-badges {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--color-white);
}
.trust-badges__inner { text-align: center; }
.trust-badges__strips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  margin: 1.5rem auto 0;
  max-width: 1040px;
}
.trust-badges__strip {
  flex: 1 1 280px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Desktop: force the two strips into a single row.
   flex: 1 1 0% + min-width: 0 lets them shrink to share available width
   instead of wrapping. */
@media (min-width: 768px) {
  .trust-badges__strips {
    flex-wrap: nowrap;
  }
  .trust-badges__strip {
    flex: 1 1 0%;
    min-width: 0;
  }
}

/* ============================================================
   INTRO / SUBHEAD
   ============================================================ */
.intro {
  background: var(--color-cream);
  text-align: center;
}
.intro__inner {
  max-width: 820px;
  margin: 0 auto;
}
.intro h2 { margin-bottom: 1.25rem; }
.intro__body {
  font-size: var(--fs-lg);
  color: var(--color-navy);
}

/* Why-choose-us feature grid — 3 column on desktop, stacks on mobile.
   Sits below the intro__inner copy block. */
.intro__features {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
  max-width: 1000px;
}
@media (min-width: 768px) {
  .intro__features { grid-template-columns: repeat(3, 1fr); }
}
.intro__feature {
  background: var(--color-white);
  padding: clamp(1.75rem, 3vw, 2.25rem) clamp(1.5rem, 2.5vw, 2rem);
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.intro__feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 6.5vw, 68px);
  height: clamp(52px, 6.5vw, 68px);
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 2px solid var(--color-coral);
  color: var(--color-coral);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  line-height: 1;
}
/* When a real icon (img / svg) is inside the container AND the container
   is inside a card, the icon's own background and shadow are redundant.
   Just size the icon and let it sit naturally inside the card. */
.intro__feature-icon:has(img),
.intro__feature-icon:has(svg) {
  border: none;
  background: transparent;
  box-shadow: none;
  width: clamp(60px, 7vw, 80px);
  height: clamp(60px, 7vw, 80px);
}
.intro__feature-icon img,
.intro__feature-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.intro__feature-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.intro__feature-body {
  font-size: var(--fs-sm);
  color: var(--color-navy);
  margin: 0;
  line-height: 1.5;
  max-width: 24ch;
  margin-inline: auto;
}

/* ============================================================
   TESTIMONIAL QUOTE
   White card on cream, large coral pull-quote glyph
   ============================================================ */
.testimonial { background: var(--color-white); }
.testimonial__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  max-width: 920px;
  margin: 0 auto;
}
@media (min-width: 700px) {
  .testimonial__inner { grid-template-columns: auto 1fr; gap: 3rem; }
}
.testimonial__photo {
  width: clamp(140px, 25vw, 200px);
  height: clamp(140px, 25vw, 200px);
  border-radius: 10%;
  object-fit: cover;
  justify-self: center;
  box-shadow: var(--shadow-md);
}
/* Mobile-first: testimonial body centred. Reverts to left-aligned at 700px+
   where the photo and body sit side by side. */
.testimonial__body {
  position: relative;
  text-align: center;
}
.testimonial__quote {
  position: relative;
  margin: 0 0 1.75rem;
  padding-top: clamp(2.25rem, 5vw, 3.5rem);
  font-size: var(--fs-quote);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-navy);
  letter-spacing: -0.01em;
  font-style: normal;
  text-wrap: balance;
}
/* Serif quotation glyph — editorial contrast against the Outfit body.
   Mobile: centred above the quote. Desktop: hangs to the upper-left. */
.testimonial__quote::before {
  content: "\201C";
  position: absolute;
  top: clamp(-0.6rem, -1.4vw, -1rem);
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4.5rem, 10vw, 7rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-coral);
  pointer-events: none;
  user-select: none;
}
.testimonial__attribution {
  display: flex;
  flex-direction: column;
  align-items: center;        /* mobile: centre name + role on cross axis */
  gap: 0.2rem;
  padding-top: 1.25rem;
  position: relative;
}
/* Coral accent rule. Mobile: centred. Desktop: anchored to the left. */
.testimonial__attribution::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-coral);
}
.testimonial__name {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.2;
}
.testimonial__role {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
/* Desktop: revert centring once photo + body sit side by side */
@media (min-width: 700px) {
  .testimonial__body { text-align: left; }
  .testimonial__quote::before { left: -0.06em; transform: none; }
  .testimonial__attribution { align-items: flex-start; }
  .testimonial__attribution::before { left: 0; transform: none; }
}

/* ============================================================
   CTA BAR — dark navy band
   ============================================================ */
.cta-bar {
  background: var(--color-navy);
  text-align: center;
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.cta-bar .eyebrow { color: var(--color-coral); }
.cta-bar__title {
  color: var(--color-white);
  font-size: var(--fs-2xl);
  margin-bottom: 1.75rem;
}

/* ============================================================
   REVIEWS GRID — white cards on cream, coral quote glyph
   ============================================================ */
.reviews { background: var(--color-cream); }
.reviews__header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.reviews__title { margin-bottom: 0.5rem; }

/* Slot for the Trustpilot widget embed — orphaned for now, kept as dormant
   code in case we restore a widget approach. The page currently uses curated
   .review-card markup + a small .reviews__footer verification link. */
.reviews__embed {
  display: block;
  width: 100%;
  margin: 1.5rem auto 0;
  max-width: 1200px;
}

/* Reviews verification footer — small unobtrusive link beneath the curated
   cards. The page CONTENT is the real reviews; this is just verification
   for visitors who want to check Trustpilot directly. Deliberately quiet
   so it doesn't compete with the form CTA. */
.reviews__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: clamp(1.75rem, 3vw, 2.5rem) auto 0;
  font-size: var(--fs-sm);
  color: var(--color-navy);
  text-align: center;
}
.reviews__footer-stars {
  color: var(--color-trustpilot);
  letter-spacing: 0.12em;
  line-height: 1;
}
.reviews__footer-brand {
  color: var(--color-trustpilot);
  font-weight: 700;
}
/* No link inside .reviews__footer — the trust signal is static text by design.
   See docs/credentials.md decision note for the conversion-page rationale. */

/* ============================================================
   WISTIA WEB COMPONENT PLAYER
   Used for all 4 videos on the page (hero + 3 testimonial cards).
   Sized via aspect-ratio; styled via wrapper containers
   (.hero__video, .video-card__player) so border-radius and shadow
   apply correctly even though the player renders an iframe.
   ============================================================ */
wistia-player {
  display: block;
  width: 100%;
}
/* Blur-up placeholder shown BEFORE player.js defines the custom element.
   Once Wistia takes over, :not(:defined) no longer matches and the
   real player renders. The /swatch URL is Wistia's tiny blurred
   preview — perfect for this brief pre-load moment. */
wistia-player:not(:defined) {
  filter: blur(6px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-deep-teal);
}
wistia-player[media-id='hpg19v89dl']:not(:defined) { background-image: url('https://fast.wistia.com/embed/medias/hpg19v89dl/swatch'); }
wistia-player[media-id='3amx1h9lmf']:not(:defined) { background-image: url('https://fast.wistia.com/embed/medias/3amx1h9lmf/swatch'); }
wistia-player[media-id='iiktjrq6kc']:not(:defined) { background-image: url('https://fast.wistia.com/embed/medias/iiktjrq6kc/swatch'); }
wistia-player[media-id='jwwctgysrx']:not(:defined) { background-image: url('https://fast.wistia.com/embed/medias/jwwctgysrx/swatch'); }

/* Hero video wrapper — large radius, prominent shadow */
.hero__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* When media_type = image, the wrapper holds an <img> instead of a
   wistia-player. The image fills the wrapper's 16:9 box, cropped to
   fit. Eager-loaded since it's above the fold. */
.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Card video wrapper — no chrome of its own; the parent .video-card
   provides the white background, rounded corners, and shadow. The
   video sits flush with the card's top/left/right edges. */
.video-card__player {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Mobile: full-bleed edge-to-edge for videos and the info-pack form.
   Width must be explicitly calc'd (100% + 2 * container padding) because
   negative margins on a width:100% element only shift it — they don't
   widen it. With explicit width, the box grows AND shifts, reaching
   both viewport edges. Border-radius and shadow drop because edge-to-edge
   with curves reads as unintentional. Internal padding stays where
   present so content still breathes.
   Also: hero section padding-bottom drops to 0 so the full-bleed hero
   video sits flush against the next section. */
@media (max-width: 700px) {
  /* .video-card removed from this list so it stays inside the container
     and gets natural left/right margin from container padding. */
  .hero__video,
  .form-card {
    margin-left: calc(-1 * clamp(1rem, 4vw, 2rem));
    margin-right: calc(-1 * clamp(1rem, 4vw, 2rem));
    width: calc(100% + 2 * clamp(1rem, 4vw, 2rem));
    max-width: none;
    border-radius: 0;
    box-shadow: none;
  }
  .hero {
    padding-bottom: 0;
  }
  /* Form section + form card flush at the bottom: card edge meets section
     edge, no internal bottom padding so the submit button sits hard-flush
     to whatever section follows. */
  .form-section {
    padding-bottom: 0;
  }
  .form-card {
    padding-bottom: 0;
  }
}

/* ============================================================
   VIDEO TESTIMONIAL CARD (legacy lazy-load styles below kept dormant
   for the .video-placeholder pattern, in case a future variant uses
   it instead of the Wistia web component.)
   ============================================================ */
.video-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
/* No mobile override needed — the cards now keep their base rounded corners
   and subtle shadow on mobile too, matching the icon box treatment. */
.video-placeholder--card {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.video-placeholder--card .video-placeholder__play {
  width: clamp(48px, 6vw, 64px);
  height: clamp(48px, 6vw, 64px);
}
.video-placeholder--card .video-placeholder__play::after {
  border-left-width: clamp(12px, 1.6vw, 16px);
  border-top-width: clamp(8px, 1.1vw, 11px);
  border-bottom-width: clamp(8px, 1.1vw, 11px);
}
.video-card__body {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  text-align: center;
}
.video-card__quote {
  position: relative;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-navy);
  margin: 0 0 1rem;
  font-style: normal;
  text-wrap: balance;
}
/* Same serif coral glyph idiom as the .review-card__quote pattern, scaled down */
.video-card__quote::before {
  content: "\201C";
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 0.8;
  color: var(--color-coral);
  margin-bottom: 0.25rem;
}
.video-card__name {
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--color-navy);
  margin: 0;
  line-height: 1.2;
}
.video-card__role {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-top: 0.25rem;
}

/* Review summary card — defensive fallback shown when the Trustpilot widget
   doesn't render (Safari ITP, AdGuard, uBlock, content blocker CSS filters).
   Lives as a SIBLING of .trustpilot-widget (not nested) so CSS-based
   blockers that hide .trustpilot-widget can't reach it. Class name is
   deliberately generic so filter lists don't pattern-match it. */
.review-summary-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  text-align: center;
  background: var(--color-white);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-navy);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
  max-width: 520px;
  margin: 1rem auto 0;
}
.review-summary-card:hover,
.review-summary-card:focus {
  color: var(--color-navy);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
/* JS adds this class once the Trustpilot iframe renders successfully */
.review-summary-card.is-hidden { display: none; }
.review-summary-card__stars {
  color: var(--color-trustpilot);
  font-size: var(--fs-2xl);
  letter-spacing: 0.12em;
  line-height: 1;
}
.review-summary-card__label {
  font-size: var(--fs-base);
  margin: 0;
}
.review-summary-card__label strong {
  color: var(--color-trustpilot);
  font-weight: 700;
}
.review-summary-card__cta {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-coral);
  margin-top: 0.25rem;
}
/* Section-level Trustpilot proof — sits beneath the H2 in .reviews__header */
.trust-proof {
  margin-top: 1rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.trust-proof__stars {
  color: var(--color-trustpilot);
  font-size: var(--fs-xl);
  letter-spacing: 0.15em;
  line-height: 1;
}
.trust-proof__label {
  font-size: var(--fs-sm);
  color: var(--color-navy);
  margin: 0;
  letter-spacing: 0.02em;
}
.trust-proof__brand {
  color: var(--color-trustpilot);
  font-weight: 700;
}
.reviews__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) { .reviews__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .reviews__grid { grid-template-columns: repeat(3, 1fr); } }
/* Mobile-first: review cards centred (single column, each card stands alone).
   Reverts to left-aligned at 640px+ where cards become 2-3 col grid. */
.review-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}
.review-card__stars {
  display: flex;
  gap: 0.15rem;
  color: var(--color-trustpilot);
  font-size: var(--fs-lg);
  margin-bottom: 0.75rem;
}
/* Desktop: revert to left-aligned once cards sit in a grid */
@media (min-width: 640px) {
  .review-card { align-items: flex-start; text-align: left; }
}
.review-card__quote {
  position: relative;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-navy);
  margin: 0 0 1.25rem;
  flex: 1;
}
/* Same serif glyph family as the hero testimonial, scaled down for cards.
   Intentionally no coral accent rule here — keeps the hero quote the visual lead. */
.review-card__quote::before {
  content: "\201C";
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 0.8;
  color: var(--color-coral);
  margin-bottom: 0.25rem;
}
.review-card__author {
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--color-navy);
  line-height: 1.2;
}
.review-card__role {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-top: 0.15rem;
}

/* ============================================================
   BENEFITS GRID
   ============================================================ */
.benefits { background: var(--color-white); }
.benefits__header { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
@media (min-width: 900px) { .benefits__grid { grid-template-columns: repeat(3, 1fr); } }
.benefit {
  background: var(--color-cream);
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(0.75rem, 2vw, 1.5rem);
  border-radius: var(--radius-md);
  text-align: center;
}
/* Coral-bordered square placeholder, matching the .intro__feature-icon style.
   ICN text inside is a marker for "swap for real icon SVG when supplied." */
.benefit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 6.5vw, 68px);
  height: clamp(52px, 6.5vw, 68px);
  border-radius: var(--radius-md);
  background: var(--color-white);
  border: 2px solid var(--color-coral);
  color: var(--color-coral);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
  line-height: 1;
}
/* Same pattern as .intro__feature-icon: when a real icon (img/svg) is
   present, drop the placeholder border and let the icon stand alone. */
.benefit__icon:has(img),
.benefit__icon:has(svg) {
  border: none;
  background: transparent;
  box-shadow: none;
  width: clamp(60px, 7vw, 80px);
  height: clamp(60px, 7vw, 80px);
}
.benefit__icon img,
.benefit__icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.benefit__title {
  font-size: clamp(0.875rem, 0.7rem + 0.65vw, 1.125rem);
  font-weight: 600;
  color: var(--color-navy);
  margin: 0;
  line-height: 1.3;
  text-wrap: balance;
  /* Reserve space equal to 2 lines so single-line titles share vertical
     space with 2-line titles, keeping all cards visually consistent. */
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   FORM SECTION
   ============================================================ */
.form-section { background: var(--color-cream); }
.form-section__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: end;
}
@media (min-width: 900px) {
  .form-section__grid { grid-template-columns: 1fr 1fr; }
}
.form-section__intro h2 { margin-bottom: 1rem; }

/* Image placed below the intro content (eyebrow/h2/checklist) in the
   left column of the form section. */
.form-section__image {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
.form-section__image img {
  width: 100%;
  height: auto;
  display: block;
}
.form-section__intro p {
  font-size: var(--fs-base);
  color: var(--color-navy);
}
.form-section__intro ul {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}
.form-section__intro li {
  padding-left: 1.75rem;
  position: relative;
  margin-bottom: 0.75rem;
  font-weight: 500;
  color: var(--color-navy);
  text-wrap: balance;
}
.form-section__intro li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem; height: 1.25rem;
  background: var(--color-coral);
  color: var(--color-white);
  border-radius: 50%;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Mobile: bump bullet font-size so wraps occur deliberately and
   text-wrap: balance (set on the base rule above) splits each
   bullet ~50/50 across two lines. Avoids the orphan-last-word
   look where only "works" / "consultants" / "start" / "week"
   would sit alone on line 2. Checkmark dot scales up to match. */
@media (max-width: 700px) {
  .form-section__intro li {
    font-size: var(--fs-lg);
    line-height: 1.35;
    padding-left: 2rem;
    margin-bottom: 1rem;
  }
   .form-section__intro li::before {
    width: 1.4rem;
    height: 1.4rem;
    font-size: 0.85rem;
  }
}

.form-card {
  background: var(--color-white);
  padding: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  scroll-margin-top: clamp(1rem, 3vw, 2rem);
}
/* Navy header band at the top of the form card with teal text + icon
   on the same row, both centered together. */
.form-card__header {
  background: var(--color-navy);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1rem, 2vw, 1.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1vw, 0.875rem);
}
.form-card__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(22px, 2.6vw, 30px);
  height: clamp(22px, 2.6vw, 30px);
  flex-shrink: 0;
}
.form-card__title-icon img,
.form-card__title-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* White body containing all form fields + checkbox + submit button */
.form-card__body {
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
/* Mobile override placed AFTER the base rule so it wins cascade order
   at equal specificity. The big mobile rule earlier in the file applies
   full-bleed margins/width; this targeted block ensures the properties
   the base rule sets — border-radius, box-shadow — all override correctly. */
@media (max-width: 700px) {
  .form-card {
    border-radius: 0;
    box-shadow: none;
    margin-left: calc(-1 * clamp(1rem, 4vw, 2rem));
    margin-right: calc(-1 * clamp(1rem, 4vw, 2rem));
    width: calc(100% + 2 * clamp(1rem, 4vw, 2rem));
    max-width: none;
  }
  /* No padding-bottom: 0 override — let the base body padding apply on
     mobile too so the submit button has breathing room below it. */
}
.form-card__title {
  font-size: clamp(1rem, 0.85rem + 0.65vw, 1.375rem);
  font-weight: 700;
  color: var(--color-teal);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}
/* .form-card__subtitle — kept as dormant CSS in case a subtitle is
   reintroduced. No markup currently references it. */
.form-card__subtitle {
  font-size: var(--fs-sm);
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}
.form-field { margin-bottom: 1rem; }
.form-field label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 0.4rem;
}
.form-field input,
.form-field select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--fs-base);
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-navy);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--color-deep-teal);
  box-shadow: 0 0 0 3px rgba(25, 76, 102, 0.15);
}
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1rem 0;
  font-size: var(--fs-xs);
  color: var(--color-muted);
}
.form-checkbox input { margin-top: 0.2rem; flex-shrink: 0; }

/* ============================================================
   FOOTER — dark navy
   ============================================================ */
.footer {
  background: var(--color-navy);
  color: rgba(255, 255, 255, 0.88);
  padding: clamp(2.5rem, 4vw, 3.5rem) 0;
  text-align: center;
}
.footer__logo {
  width: clamp(110px, 14vw, 150px);
  height: auto;
  margin: 0 auto 1.75rem;
  display: block;
}
.footer__badge {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.65rem 1.25rem;
  border: 2px solid var(--color-coral);
  border-radius: var(--radius-sm);
  color: var(--color-coral);
}
/* Awards grid — 2 columns on mobile, 3 on desktop. Each box renders a
   laurel garland with text inside. Garland SVG lives as an inline <symbol>
   in landing-page.html (currentColor needs same-document <use> targets to
   inherit). On the navy footer both garland and text are white. */
.footer__awards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 0;
  column-gap: clamp(0.5rem, 1.2vw, 1rem);
  max-width: 320px;
 margin-top: clamp(2rem, 4vw, 3rem);
  margin-inline: auto;
  margin-bottom: 0;
  /* DON'T add justify-items: center — it makes each award shrink to
     its text content width and breaks uniform wreath sizing. */
}
/* Mobile (2 cols): items 3+ are row 2+. Pull them up. */
.footer__awards > :nth-child(n+3) {
  margin-top: clamp(-5rem, -8vw, -3.5rem);
}
@media (min-width: 700px) {
  .footer__awards {
    grid-template-columns: repeat(3, 1fr);
    max-width: 720px;          /* ← NEW: restore desktop grid width */
  }
  .footer__awards > :nth-child(n+3) { margin-top: 0; }
  .footer__awards > :nth-child(n+4) { margin-top: clamp(-5rem, -8vw, -3.5rem); }
}
.footer__award {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
}
.footer__award svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #ffffff;
}
.footer__award span {
  position: relative;
  z-index: 1;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-transform: uppercase;
  font-size: clamp(0.55rem, 1.6vw, 0.8rem);
  padding: 0 16%;
  white-space: nowrap;
}
.footer__copy {
  margin-top: 1.5rem;
  font-size: var(--fs-xs);
  opacity: 0.7;
}

/* ============================================================
   ACCORDION — two-column expandable content
   Content column (eyebrow + H2 + description + optional CTA)
   alongside an accordion of question/answer items. Position
   togglable left/right. Background colour from the Choice field.
   Native <details>/<summary> for expand/collapse — no JS needed
   for state management; accessible and keyboard-friendly.
   ============================================================ */

/* Background variants */
.accordion { background: var(--color-cream); }
.accordion--cream { background: var(--color-cream); }
.accordion--white { background: var(--color-white); }
.accordion--navy {
  background: var(--color-navy);
  color: var(--color-white);
}
.accordion--navy .eyebrow { color: var(--color-coral); }
.accordion--navy .accordion__headline { color: var(--color-white); }
.accordion--navy .accordion__description { color: var(--color-white); opacity: 0.92; }
.accordion--coral {
  background: var(--color-coral);
  color: var(--color-white);
}
.accordion--coral .eyebrow { color: var(--color-navy); }
.accordion--coral .accordion__headline { color: var(--color-white); }
.accordion--coral .accordion__description { color: var(--color-white); opacity: 0.92; }
.accordion--teal {
  background: var(--color-teal);
  color: var(--color-deep-teal);
}

/* Two-column grid — accordion-right is the default
   (content column on left, accordion items on right). */
.accordion__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 900px) {
  .accordion__grid { grid-template-columns: 1fr 1fr; }
  /* Accordion-left variant: flip via grid order so accordion appears
     in column 1 and content in column 2 at desktop. Mobile stack
     order stays content-first regardless. */
  .accordion__grid--left .accordion__items { order: 1; }
  .accordion__grid--left .accordion__content { order: 2; }
}

/* Content column */
.accordion__content { max-width: 42ch; }
.accordion__headline {
  margin-bottom: 1rem;
  text-wrap: balance;
}
.accordion__description {
  font-size: var(--fs-base);
  margin-bottom: 1.5rem;
}
.accordion__cta { margin-top: 0.5rem; }

/* Accordion items column */
.accordion__items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Single accordion item — uses native <details>. */
.accordion__item {
  background: var(--color-white);
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Question (summary) — clickable header row */
.accordion__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.25rem) clamp(1.25rem, 2.5vw, 1.5rem);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-navy);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.accordion__question::-webkit-details-marker { display: none; }
.accordion__question:focus-visible {
  outline: 2px solid var(--color-deep-teal);
  outline-offset: -2px;
}
.accordion__question:hover {
  background: transparent;
}
.accordion__question:hover::after {
  transform: scale(1.15);
}
.accordion__item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.accordion__item {
  transition: transform 0.2s, box-shadow 0.2s;
}

/* Plus-becomes-x indicator on the right of the question.
   Pseudo-element rotates 45deg when the details is open. */
.accordion__question::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-coral);
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.accordion__item[open] > .accordion__question::after {
  transform: rotate(45deg);
}

/* Answer body — appears below the question when item is open */
.accordion__answer {
  padding: 0 clamp(1.25rem, 2.5vw, 1.5rem) clamp(1rem, 2vw, 1.25rem);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--color-navy);
}
.accordion__answer p { margin: 0 0 0.75rem; }
.accordion__answer p:last-child { margin-bottom: 0; }
.accordion__answer a {
  color: var(--color-magenta);
  text-decoration: underline;
}
.accordion__answer ul {
  margin: 0.5rem 0 0.75rem;
  padding-left: 1.25rem;
}
.accordion__answer li { margin-bottom: 0.25rem; }

/* ============================================================
   HUBSPOT FORM WIDGET — style HubSpot's rendered .hs-form
   output to match the design tokens.

   HubSpot's <span id="hs_cos_wrapper_" class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_form" style="" data-hs-cos-general-type="widget" data-hs-cos-type="form" ><h3 id="hs_cos_wrapper_form_871243883_title" class="hs_cos_wrapper form-title" data-hs-cos-general-type="widget_field" data-hs-cos-type="text"></h3>

</span> HubL tag emits .hs-form / .hs-input /
   .hs-button markup, NOT the prototype's .form-field markup.
   The earlier .form-field rules above don't reach this output.
   These rules mirror those design choices onto HubSpot's classes.

   Scoped to .form-card so they only apply inside the styled
   form container — won't leak into any other HubSpot form
   embedded elsewhere on the site.
   ============================================================ */

/* Hide HubSpot's internal empty form title — .form-card__header
   already provides the "Get An Information Pack Now" header. */
.form-card .form-title:empty { display: none; }

/* Form container */
.form-card .hs-form { font-family: var(--font-sans); color: var(--color-navy); }

/* Each field row */
.form-card .hs-form-field { margin-bottom: 1rem; }

/* Label — text span + coral required asterisk */
.form-card .hs-form-field > label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 0.4rem;
}
.form-card .hs-form-required {
  color: var(--color-coral);
  margin-left: 0.15rem;
}

/* Inputs (text / email / tel / number / textarea / select) — mirrors
   the existing .form-field input rule for visual parity. */
.form-card .hs-input:not([type="checkbox"]):not([type="radio"]),
.form-card input[type="text"].hs-input,
.form-card input[type="email"].hs-input,
.form-card input[type="tel"].hs-input,
.form-card input[type="number"].hs-input,
.form-card select.hs-input,
.form-card textarea.hs-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.4;
  color: var(--color-navy);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-card .hs-input:focus,
.form-card select.hs-input:focus,
.form-card textarea.hs-input:focus {
  outline: none;
  border-color: var(--color-deep-teal);
  box-shadow: 0 0 0 3px rgba(25, 76, 102, 0.15);
}

/* International phone — country select + tel input row.
   Useful when the production form has intl-phone enabled
   (the current placeholder uses plain .hs-fieldtype-phonenumber). */
.form-card .hs-fieldtype-intl-phone .input {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.form-card .hs-fieldtype-intl-phone select,
.form-card .hs-fieldtype-intl-phone input[type="tel"] {
  height: auto;
  min-height: 0;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.4;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-navy);
  box-sizing: border-box;
}
.form-card .hs-fieldtype-intl-phone select {
  flex: 0 0 auto;
  max-width: 45%;
}
.form-card .hs-fieldtype-intl-phone input[type="tel"] {
  flex: 1 1 auto;
  min-width: 0;
}

/* Consent / legal checkbox row — kill the default bullet and
   align checkbox + text on a clean row. */
.form-card .legal-consent-container,
.form-card .hs-fieldtype-booleancheckbox {
  margin: 1rem 0;
  font-size: var(--fs-sm);
  color: var(--color-navy);
}
.form-card .legal-consent-container ul,
.form-card .hs-fieldtype-booleancheckbox ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.form-card .legal-consent-container li,
.form-card .hs-fieldtype-booleancheckbox li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.form-card .legal-consent-container input[type="checkbox"],
.form-card .hs-form-booleancheckbox-display input[type="checkbox"],
.form-card input[type="checkbox"].hs-input {
  /* Restore native checkbox rendering (the generic .hs-input rule
     set appearance: none which kills the native checkmark). With
     appearance: auto + accent-color, modern browsers render the
     native check using our brand colour. */
  appearance: auto;
  -webkit-appearance: auto;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: none;
  background: transparent;
  accent-color: var(--color-deep-teal);
  flex-shrink: 0;
  margin-top: 0.2rem;
  cursor: pointer;
}
}
.form-card .legal-consent-container a,
.form-card .hs-fieldtype-booleancheckbox a {
  color: var(--color-magenta);
  text-decoration: underline;
}

/* Submit button — matches .btn--primary. Targets both <input type="submit">
   and <button>, because HubSpot can render either depending on settings. */
.form-card .hs-button,
.form-card input[type="submit"].hs-button,
.form-card button.hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem 2rem;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--color-deep-teal);
  background: var(--color-teal);
  border: 2px solid var(--color-deep-teal);
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.2s, background 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
  appearance: none;
  text-transform: uppercase;
}
.form-card .hs-button:hover,
.form-card .hs-button:focus {
  background: var(--color-teal-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  outline: none;
}

/* Validation error messages */
.form-card .hs-error-msgs,
.form-card .hs-error-msg {
  list-style: none;
  padding: 0;
  margin: 0.3rem 0 0;
  font-size: var(--fs-xs);
  color: var(--color-coral);
}

/* Successful submission state */
.form-card .submitted-message {
  padding: 1rem;
  background: var(--color-cream);
  border-radius: var(--radius-sm);
  color: var(--color-navy);
  font-size: var(--fs-base);
}

/* ============================================================
   FREE FRANCHISE — earn-back-your-fee hook
   Navy section with Wistia video + content (eyebrow, H2, body, CTA).
   Sits between benefits (white) and form-section (cream) — creates
   white → navy → cream punctuation. Navy treatment elevates the
   "earn your fee back" promise as the page's final value-prop
   before the form.

   Aspect-ratio on the wrapper (.free-franchise__video), NOT on
   wistia-player — per the documented Wistia fix in build-state.md.
   ============================================================ */
.free-franchise {
  background: var(--color-navy);
  color: var(--color-white);
}
.free-franchise__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .free-franchise__grid { grid-template-columns: 1fr 1fr; }
  /* Video-right variant: reverse the columns at desktop only.
     Mobile stack order stays video-first regardless of variant. */
  .free-franchise__grid--right .free-franchise__video { order: 2; }
}

/* Wistia wrapper — reserves the 16:9 box BEFORE player.js loads
   so the layout doesn't shift when the player initialises. */
.free-franchise__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* Coral eyebrow on navy — matches the .cta-bar treatment so the
   navy-section visual language stays consistent. */
.free-franchise .eyebrow { color: var(--color-coral); }

/* Explicit white text on heading + body so the navy background
   doesn't get overridden by the global h2 colour rule. */
.free-franchise__headline {
  color: var(--color-white);
  font-size: var(--fs-3xl);
  margin-bottom: 1rem;
  text-wrap: balance;
}
.free-franchise__body {
  color: var(--color-white);
  font-size: var(--fs-base);
  margin-bottom: 1.75rem;
  max-width: 52ch;
  opacity: 0.92;
}

/* CTA aligns left within its column (not full-width). */
.free-franchise__cta {
  align-self: flex-start;
}


/* ============================================================
   HEADLINE VIDEO — eyebrow + H2 + subhead + Wistia video
   Video width matches the .intro__features grid (max-width 1000px)
   so when placed adjacent to the intro section, the video aligns
   with the 3-card row's edges. Scales fluidly with the viewport.
   Background colour driven by the .headline-video--<colour>
   modifier set from the HubSpot `background_color` Choice field.

   Mobile: video goes full-bleed edge-to-edge (matches the hero
   video's mobile treatment), with no padding/margin to the
   viewport edges.
   ============================================================ */

/* Background variants — driven by the Choice field. Default to
   cream if no modifier present (defensive against editor not picking). */
.headline-video { background: var(--color-cream); }
.headline-video--cream { background: var(--color-cream); }
.headline-video--white { background: var(--color-white); }
.headline-video--navy {
  background: var(--color-navy);
  color: var(--color-white);
}
/* On navy, switch eyebrow to coral and force heading/subhead white
   so they don't get overridden by the global h2/p colour rules. */
.headline-video--navy .eyebrow { color: var(--color-coral); }
.headline-video--navy .headline-video__headline { color: var(--color-white); }
.headline-video--navy .headline-video__subhead { color: var(--color-white); opacity: 0.92; }

/* Header — centred eyebrow + H2 + subhead block above the video */
.headline-video__header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.headline-video__headline {
  margin-bottom: 1rem;
  text-wrap: balance;
}
.headline-video__subhead {
  font-size: var(--fs-lg);
  color: var(--color-navy);
  margin: 0;
}

/* Video wrapper — matches the .intro__features grid width so the
   video edges align with the 3-card row. Aspect-ratio reserves the
   16:9 box BEFORE player.js loads (per the documented Wistia rule). */
.headline-video__video {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* Mobile full-bleed: video extends to viewport edges with no padding
   or margin. Uses the same calc() pattern as .hero__video — see
   build-state.md for why width must be explicitly calc'd. */
@media (max-width: 700px) {
  .headline-video__video {
    margin-left: calc(-1 * clamp(1rem, 4vw, 2rem));
    margin-right: calc(-1 * clamp(1rem, 4vw, 2rem));
    width: calc(100% + 2 * clamp(1rem, 4vw, 2rem));
    max-width: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ============================================================
   HERO (CENTRED) — eyebrow + H1 + subhead + Wistia video + CTA
   + trust badges, all centred vertically. Variant of the standard
   .hero that stacks elements centred rather than two-column.
   Background driven by the .hero-centred--<colour> modifier set
   from the HubSpot `background_color` Choice field.

   Video matches the .intro__features grid width (max-width 1000px)
   so when adjacent to the intro it aligns with the 3-card row.
   On mobile the video goes full-bleed edge-to-edge.
   ============================================================ */

/* Background variants */
.hero-centred { background: var(--color-cream); }
.hero-centred--cream { background: var(--color-cream); }
.hero-centred--white { background: var(--color-white); }
.hero-centred--navy {
  background: var(--color-navy);
  color: var(--color-white);
}
.hero-centred--navy .eyebrow { color: var(--color-coral); }
.hero-centred--navy .hero-centred__title { color: var(--color-white); }
.hero-centred--navy .hero-centred__subhead { color: var(--color-white); opacity: 0.92; }

/* Header block — eyebrow + H1 + subhead, centred */
.hero-centred__inner {
  text-align: center;
  max-width: 820px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.hero-centred__title {
  margin-bottom: 1rem;
  text-wrap: balance;
}
.hero-centred__subhead {
  font-size: var(--fs-lg);
  color: var(--color-navy);
  margin: 0;
  max-width: 42ch;
  margin-inline: auto;
}

/* Video wrapper — matches .intro__features width.
   Aspect-ratio on the wrapper, NOT on wistia-player. */
.hero-centred__video {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

/* When media_type = image, the wrapper holds an <img> instead of a
   wistia-player. The image fills the wrapper's 16:9 box, cropped to
   fit. Eager-loaded since it's above the fold. */
.hero-centred__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* CTA row — centres the button below the video */
.hero-centred__cta-row {
  display: flex;
  justify-content: center;
  margin: clamp(1.5rem, 3vw, 2rem) auto 0;
}

/* Trust badges — same treatment as the hero module's badges
   but centred (no left-align variant at desktop). */
.hero-centred__trust-badges {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2.5vw, 1rem);
  margin-top: clamp(1rem, 2vw, 1.5rem);
  flex-wrap: wrap;
  justify-content: center;
}
.hero-centred__trust-badge {
  height: 36px;
  width: auto;
  display: block;
}
.hero-centred__trust-badge--invert {
  filter: brightness(0);
  height: 27px;
}
@media (min-width: 700px) {
  .hero-centred__trust-badges { gap: clamp(1rem, 2vw, 1.5rem); }
  .hero-centred__trust-badge { height: clamp(32px, 3.8vw, 36px); }
  .hero-centred__trust-badge--invert { height: clamp(24px, 2.9vw, 28px); }
}
/* When background is navy, badges that aren't white-on-transparent
   may need to invert to white. The badge-by-badge invert toggle
   handles each case from the editor. No global override here. */

/* Mobile full-bleed video — same pattern as .hero__video */
@media (max-width: 700px) {
  .hero-centred__video {
    margin-left: calc(-1 * clamp(1rem, 4vw, 2rem));
    margin-right: calc(-1 * clamp(1rem, 4vw, 2rem));
    width: calc(100% + 2 * clamp(1rem, 4vw, 2rem));
    max-width: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ============================================================
   ALERT BAR — thin announcement strip below the site-header
   Single line of text + optional inline link. Page-scoped so
   each page can have its own promo / urgency message or omit.
   Background driven by .alert-bar--<colour> modifier set from
   the HubSpot `background_color` Choice field.
   ============================================================ */
.alert-bar {
  padding: clamp(0.5rem, 1vw, 0.75rem) 0;
  text-align: center;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--color-border);
  /* Default to cream — overridden by modifier class below */
  background: var(--color-cream);
}
.alert-bar__message {
  margin: 0;
  line-height: 1.4;
  font-weight: 500;
  /* Stay on one line on desktop, wrap on mobile if needed */
  text-wrap: balance;
  max-width: 1080px;
  margin-inline: auto;
  padding: 0 clamp(0.5rem, 2vw, 1rem);
}
.alert-bar__link {
  font-weight: 700;
  text-decoration: underline;
  margin-inline-start: 0.4rem;
  white-space: nowrap;
}

/* Background variants */
.alert-bar--cream { background: var(--color-cream); }
.alert-bar--white { background: var(--color-white); }
.alert-bar--navy {
  background: var(--color-navy);
  color: var(--color-white);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.alert-bar--navy .alert-bar__link { color: var(--color-teal); }
.alert-bar--coral {
  background: var(--color-coral);
  color: var(--color-white);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
.alert-bar--coral .alert-bar__link { color: var(--color-navy); }
.alert-bar--teal {
  background: var(--color-teal);
  color: var(--color-deep-teal);
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
.alert-bar--teal .alert-bar__link { color: var(--color-navy); }

/* Mobile: tighten padding so the bar stays thin without
   shrinking text size below readable. */
@media (max-width: 700px) {
  .alert-bar { font-size: var(--fs-xs); }
  .alert-bar__message {
    padding: 0 clamp(0.75rem, 3vw, 1rem);
  }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.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;
}