/* ============================================================
   IPNLF DECARBONISATION PROTOTYPE: COMPONENT LIBRARY
   Every class below is a REUSABLE component, shared across the
   hub and all three audience pages. Page-specific files only
   ever set CONTENT (via components.js data objects), never
   introduce new one-off classes. See README for the full map of
   "shared component" vs "audience-specific content".
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  line-height: var(--lh-heading);
  color: var(--text-strong);
  margin: 0 0 var(--space-4);
}
/* Display font (condensed uppercase) reserved for the major headings only —
   hero titles and section headers. Long phrases in a condensed all-caps
   face are hard to scan, so card/list-level headings (h3/h4) use the body
   face instead, in sentence case at a bold weight. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}
h3, h4 {
  font-family: var(--font-text);
  font-weight: 700;
}
p { margin: 0 0 var(--space-4); }
a { color: var(--text-link); }
img { max-width: 100%; display: block; }
ul.c-list { margin: 0; padding: 0; list-style: none; }

/* ---- Layout primitives ---- */
.c-container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.c-container--narrow { max-width: var(--container-narrow); }
.c-container--form { max-width: var(--container-form); }
.c-section { padding: var(--space-9) 0; }
.c-section--tight { padding: var(--space-8) 0; }
.c-section--soft { background: var(--surface-soft); }
.c-section--dark { background: var(--surface-dark); color: var(--text-on-dark); }
.c-section--dark h1, .c-section--dark h2, .c-section--dark h3 { color: #fff; }
.c-section--dark p { color: var(--text-on-dark-soft); }

.c-grid { display: grid; gap: var(--space-5); }
.c-grid--2 { grid-template-columns: repeat(2, 1fr); }
.c-grid--3 { grid-template-columns: repeat(3, 1fr); }
.c-grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Text beside a figures card: give the card the wider column so its
   heading stays on one line. Single column on mobile as with --2. */
@media (min-width: 601px) {
  .c-grid--figures { grid-template-columns: 1fr 1.3fr; }
}
@media (max-width: 900px) {
  .c-grid--3, .c-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .c-grid--2, .c-grid--3, .c-grid--4 { grid-template-columns: 1fr; }
}

/* ---- Eyebrow / labels ---- */
.c-eyebrow {
  display: inline-block;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--brand-accent);
  margin-bottom: var(--space-3);
}
.c-section--dark .c-eyebrow { color: var(--ipnlf-gold); }

/* ---- Buttons ---- */
.c-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-text);
  font-weight: 700;
  font-size: 16px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.c-btn--accent { background: var(--brand-accent); color: #fff; }
.c-btn--accent:hover { background: #d17c22; color: #fff; }
.c-btn--outline-dark { border-color: rgba(255,255,255,0.5); color: #fff; }
.c-btn--outline-dark:hover { border-color: #fff; }
.c-btn--outline-light { border-color: var(--ipnlf-mist); color: var(--text-strong); }
.c-btn--outline-light:hover { border-color: var(--ipnlf-deep); }
.c-btn--lg { font-size: 17px; padding: 17px 34px; }

/* ---- Header ---- */
.c-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: flex-start;
  padding: 18px 24px; gap: 32px;
}
.c-header--static { position: static; background: var(--surface-dark); }
.c-header--minimal { justify-content: flex-start; }
.c-header__logo { flex-shrink: 0; }
.c-header__logo img { height: 36px; }
.c-header__nav { display: flex; align-items: center; gap: 28px; flex: 1; }
.c-header__link {
  color: rgba(255,255,255,0.86); font-weight: 600; font-size: 15px;
  text-decoration: none; letter-spacing: 0.01em;
}
.c-header__link:hover { color: #fff; }
.c-header__cta { padding: 11px 22px; font-size: 14px; flex-shrink: 0; }
.c-header__toggle {
  display: none; flex-shrink: 0; width: 36px; height: 36px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.c-header__toggle span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 1px; }
.c-header__mobile-menu { display: none; }
.c-breadcrumb { font-size: 14px; color: var(--text-on-dark-soft); }
.c-breadcrumb a { color: var(--text-on-dark-soft); text-decoration: underline; }
.c-breadcrumb a:hover { color: #fff; }

/* ---- Audience-switch link (quiet alternative-route link under a hero) ---- */
.c-audience-switch {
  display: inline-block; margin-top: var(--space-5);
  font-size: var(--fs-body-sm); color: var(--text-on-dark-soft);
  text-decoration: underline; text-underline-offset: 3px;
}
.c-audience-switch:hover { color: #fff; }

/* ---- Sticky mobile "start assessment" bar ---- */
.c-sticky-cta { display: none; }

/* ---- Hero ---- */
.c-hero {
  position: relative; min-height: 70vh; display: flex; align-items: center;
  background: var(--surface-dark); overflow: hidden;
}
.c-hero--tall { min-height: 86vh; }
.c-hero__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.c-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(12,70,91,0.94) 0%, rgba(12,70,91,0.80) 42%, rgba(12,70,91,0.25) 78%, rgba(12,70,91,0.05) 100%);
}
.c-hero__content { position: relative; z-index: 2; width: 100%; padding: 64px 0 80px; }
.c-hero__title {
  font-size: clamp(38px, 5.2vw, 76px); line-height: 0.95; color: #fff;
  max-width: 16ch; margin: 0 0 var(--space-5);
}
.c-hero__intro { font-size: 22px; font-weight: 600; line-height: 1.5; color: var(--text-on-dark-soft); max-width: 62ch; margin: 0 0 var(--space-6); }
.c-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---- Section header ---- */
.c-section-header { max-width: 760px; margin: 0 0 var(--space-7); }
.c-section-header--center { margin-left: auto; margin-right: auto; text-align: center; }
.c-section-header--wide-intro { max-width: none; }
.c-section-header--wide-intro .c-section-header__intro { max-width: none; }
.c-section-header h2 { font-size: var(--fs-display-md); }
.c-section-header__intro { max-width: 760px; font-size: var(--fs-body-lg); color: var(--text-muted); }
.c-section--dark .c-section-header__intro { color: var(--text-on-dark-soft); }
/* Short, punchy single-line intro — give it more weight than the standard
   section intro now that it's not a full explanatory paragraph. */
#audiences .c-section-header__intro { font-size: 22px; font-weight: 600; color: var(--text-strong); }

/* ---- Intro / text block ---- */
.c-text-block { max-width: 760px; }
.c-text-block--lead { font-size: var(--fs-body-lg); }

/* Per feedback: this title read small next to the hero it follows — give
   it more presence than the standard section-header h2. */
#why-this-matters h2 { font-size: clamp(30px, 4vw, 42px); }

/* ---- Figures card (stat panel standing in for a photo) ---- */
.c-figures-card {
  background: var(--surface-soft); border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-5);
  display: flex; flex-direction: column; justify-content: space-between;
}
.c-text-figures {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-5); align-items: start;
  grid-template-areas: "eyebrow ." "title card" "body card";
}
.c-text-figures__eyebrow { grid-area: eyebrow; }
.c-text-figures__title { grid-area: title; }
.c-text-figures__body { grid-area: body; }
.c-text-figures__card { grid-area: card; }
@media (max-width: 600px) {
  .c-text-figures { grid-template-columns: 1fr; grid-template-areas: "eyebrow" "title" "body" "card"; row-gap: var(--space-5); }
}
.c-figures-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-3); }
.c-figures-card__stat { border-top: 1.5px solid var(--border-subtle); padding-top: var(--space-3); }
/* The first row has nothing above it inside the card, so a divider there
   separates nothing and just adds height — drop it (and its padding) for
   row one only. */
.c-figures-card__stat:nth-child(1), .c-figures-card__stat:nth-child(2) { border-top: none; padding-top: 0; }
.c-figures-card__value { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--ipnlf-deep); }
.c-figures-card sub { font-size: 0.7em; }
.c-figures-card__unit { font-family: var(--font-text); font-size: 13px; font-weight: 700; color: var(--text-muted); margin-left: 2px; text-transform: none; letter-spacing: 0; }
.c-figures-card__label { font-size: 13px; color: var(--text-muted); margin-top: 4px; line-height: 1.3; }
.c-figures-card__source { font-size: 12px; color: var(--text-muted); margin-top: var(--space-4); font-style: italic; }
@media (max-width: 600px) {
  .c-figures-card__grid { grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-3); }
  .c-figures-card__value { font-size: 28px; }
}

/* ---- Cards ---- */
.c-card {
  background: var(--surface-card); border-radius: var(--radius-lg);
  padding: var(--space-6); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; height: 100%;
}
.c-card__icon { width: 40px; height: 40px; margin-bottom: var(--space-4); object-fit: contain; }
.c-card h3 { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.c-card p { color: var(--text-muted); font-size: var(--fs-body-sm); margin-bottom: 0; flex: 1; }
.c-card--on-dark { background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.18); box-shadow: none; }
.c-card--on-dark h3 { color: #fff; }
.c-card--on-dark p { color: var(--text-on-dark-soft); }

/* Audience selector cards */
.c-audience-card {
  display: flex; flex-direction: column; justify-content: space-between; text-decoration: none;
  border-radius: var(--radius-lg); padding: var(--space-7) var(--space-6);
  min-height: 200px; box-shadow: var(--shadow-sm); color: #fff;
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.c-audience-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.c-audience-card__icon { color: inherit; opacity: 0.9; margin-bottom: var(--space-4); }
.c-audience-card__icon svg { width: 34px; height: 34px; }
.c-audience-card h3 { font-size: clamp(22px, 2vw, 28px); margin: 0; color: inherit; max-width: 16ch; }
.c-audience-card__arrow {
  align-self: flex-end; font-family: var(--font-display); font-size: 26px; line-height: 1;
  color: inherit; opacity: 0.85; margin-top: var(--space-6);
}

/* "Decarbonisation approaches" cards (hub "explore deeper" grid): plain
   informational cards — one consistent accent, no colour cycling, and
   deliberately not styled as buttons (no href, no hover-lift). The index
   number is a quiet label, not a headline figure. */
.c-card--approach {
  background: rgba(39, 173, 156, 0.14); border: 2px solid var(--ipnlf-teal);
  box-shadow: none;
  padding: var(--space-5);
}
.c-card--approach h3 { color: var(--text-strong); line-height: var(--lh-snug); margin-bottom: var(--space-2); min-height: 2.7em; }
.c-card--approach p { font-size: var(--fs-body); line-height: var(--lh-snug); }
.c-badge-soon {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ipnlf-slate); background: var(--surface-soft);
  border-radius: var(--radius-pill); padding: 4px 10px; margin-bottom: var(--space-3);
}

/* Evidence / case study cards */
.c-evidence-card {
  display: flex; flex-direction: column; background: var(--surface-card);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.c-evidence-card__media { height: 160px; background: var(--surface-soft); overflow: hidden; }
.c-evidence-card__media img { width: 100%; height: 100%; object-fit: cover; }
.c-evidence-card__body { padding: var(--space-5); flex: 1; display: flex; flex-direction: column; }
.c-evidence-card__tag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ipnlf-teal); margin-bottom: var(--space-2); }
.c-evidence-card h3 { font-size: var(--fs-h4); color: var(--text-strong); margin-bottom: var(--space-2); }
.c-evidence-card p { color: var(--text-muted); font-size: var(--fs-body-sm); flex: 1; }
.c-evidence-card__link { font-weight: 700; color: var(--ipnlf-deep); font-size: var(--fs-body-sm); }

/* ---- Stat block ---- */
.c-stat { text-align: center; padding: 0 12px; }
.c-stat__value { font-family: var(--font-display); font-size: 56px; line-height: 1; color: var(--ipnlf-deep); }
.c-stat__label { font-size: var(--fs-body-sm); color: var(--text-muted); margin-top: var(--space-2); }

/* ---- Tag pills (intervention-area chips) ----
   Solid, cycling brand colours (matching the hub's audience-card palette)
   rather than a translucent outline, so these read clearly against the
   dark section background instead of blending into it. */
.c-pill-row { display: flex; flex-wrap: wrap; gap: 14px; }
.c-pill {
  display: inline-flex; align-items: center; font-weight: 600; font-size: 16px;
  color: #fff; background: var(--ipnlf-teal-deep); border: 1.5px solid transparent;
  border-radius: var(--radius-pill); padding: 15px 26px;
}
.c-pill-row .c-pill:nth-child(3n+2) { background: var(--ipnlf-ocean-deep); }
.c-pill-row .c-pill:nth-child(3n+3) { background: var(--ipnlf-slate); }
@media (max-width: 700px) {
  .c-pill-row { gap: 12px; }
  .c-pill { width: 100%; font-size: 16px; padding: 17px 22px; }
}

/* ---- Decorative icon seeds (non-clickable category markers) ---- */
.c-icon-seed-row { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-6); }
.c-icon-seed {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.22);
  color: var(--ipnlf-gold);
}
.c-icon-seed svg { width: 28px; height: 28px; }

/* ---- Intervention seeds (non-clickable icon + label tiles) ----
   The canonical, identical-on-every-page replacement for what used to be
   an audience-specific row of pill "buttons". Visual seeds only: no click
   target, no href, no button semantics. */
.c-intervention-seed-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-7) var(--space-6); }
.c-intervention-seed { display: flex; flex-direction: column; align-items: center; text-align: center; width: 176px; }
.c-intervention-seed__icon {
  display: flex; align-items: center; justify-content: center;
  width: 92px; height: 92px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255,255,255,0.08); border: 1.5px solid rgba(255,255,255,0.22);
  color: var(--ipnlf-gold);
}
.c-intervention-seed__icon svg { width: 44px; height: 44px; }
.c-intervention-seed__label {
  margin-top: var(--space-3); font-size: 15px; font-weight: 700; color: #fff;
  line-height: 1.35; min-height: 2.7em; max-width: 176px; margin-left: auto; margin-right: auto;
}
@media (max-width: 600px) {
  .c-intervention-seed-row { justify-content: center; gap: var(--space-6) var(--space-5); }
  .c-intervention-seed { width: 140px; }
  /* Forced desktop line breaks would give a 4-line label at this width. */
  .c-intervention-seed__label br { display: none; }
}

/* ---- Quote ---- */
.c-quote {
  background: var(--surface-dark); border-radius: var(--radius-lg);
  padding: var(--space-7); color: #fff;
}
.c-quote__mark { font-family: var(--font-display); font-size: 100px; line-height: 0.6; color: var(--ipnlf-gold); opacity: 0.5; height: 46px; }
.c-quote blockquote { margin: 0; font-size: 22px; line-height: 1.55; max-width: 60ch; }
.c-quote__attribution { margin-top: var(--space-5); font-size: 14px; color: var(--text-on-dark-soft); }
.c-quote__attribution strong { display: block; color: #fff; font-size: 16px; }

/* ---- Form / tool section (the reusable embed component) ---- */
.c-form-section {
  background: var(--surface-soft); border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-7);
}
.c-form-section__head { max-width: var(--container-form); margin: 0 auto var(--space-6); text-align: center; }
.c-form-section__embed-wrap {
  position: relative; max-width: var(--container-form); margin: 0 auto; background: #fff;
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden;
}
.c-form-section__embed-wrap iframe { display: block; width: 100%; border: 0; min-height: 480px; }
.c-form-section__meta {
  max-width: var(--container-form); margin: var(--space-5) auto 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4);
  font-size: var(--fs-body-sm); color: var(--text-muted);
}
.c-form-section__privacy {
  display: flex; align-items: flex-start; gap: 8px; max-width: 44ch;
}
.c-form-section__progress { color: var(--ipnlf-deep); font-weight: 700; }
.c-form-loading {
  position: absolute; inset: 0; z-index: 1; background: #fff;
  display: flex; align-items: center; justify-content: center; min-height: 480px;
  color: var(--text-muted); font-size: var(--fs-body-sm);
}

/* ---- Related content ---- */
.c-related-item {
  display: block; padding: var(--space-5) 0; border-top: 1.5px solid var(--border-subtle);
  text-decoration: none;
}
.c-related-item:first-child { border-top: none; }
.c-related-item__tag { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--ipnlf-teal); margin-bottom: 6px; }
.c-related-item h4 { font-size: var(--fs-h4); margin-bottom: 6px; color: var(--text-strong); }
.c-related-item p { color: var(--text-muted); font-size: var(--fs-body-sm); margin: 0; }

/* ---- FAQ ---- */
.c-faq-item { border-top: 1.5px solid var(--border-subtle); padding: var(--space-5) 0; }
.c-faq-item summary { font-weight: 700; font-size: var(--fs-body-lg); cursor: pointer; color: var(--text-strong); list-style: none; }
.c-faq-item summary::-webkit-details-marker { display: none; }
.c-faq-item summary::after { content: '+'; float: right; font-family: var(--font-display); font-size: 22px; }
.c-faq-item[open] summary::after { content: '\2212'; }
.c-faq-item p { margin-top: var(--space-4); color: var(--text-muted); }

/* ---- CTA band ---- */
.c-cta-band { position: relative; overflow: hidden; background: var(--surface-dark); text-align: center; }
.c-cta-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.c-cta-band__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,70,91,0.85), rgba(12,70,91,0.93)); }
.c-cta-band__inner { position: relative; max-width: 760px; margin: 0 auto; padding: var(--space-9) 24px; }
.c-cta-band h2 { font-size: clamp(34px, 4.5vw, 60px); color: #fff; }
.c-cta-band p { color: var(--text-on-dark-soft); font-size: 18px; max-width: 52ch; margin: 0 auto var(--space-6); }
.c-cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ---- Confirmation panel ---- */
.c-confirmation {
  max-width: 640px; margin: 0 auto; text-align: center;
}
/* Give the page's one true heading real presence: it was previously the
   default h2 size, much smaller than the pre-survey hero titles it follows
   in the user's journey. */
.c-confirmation h1 { font-size: clamp(32px, 5vw, 52px); }
.c-confirmation__icon {
  width: 64px; height: 64px; border-radius: 50%; background: var(--ipnlf-teal);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 30px; margin: 0 auto var(--space-6);
}
/* ---- Numbered step list (confirmation page steps + form-intro variant) ---- */
.c-step-list { text-align: left; margin-top: var(--space-7); }
/* In the form-intro variant the step list follows the section title
   directly (no paragraph in between), so the confirmation-page spacing
   above reads as a stray gap — tighten it here specifically. */
.c-form-section__head .c-step-list { margin-top: var(--space-5); }
.c-step-row { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1.5px solid var(--border-subtle); }
.c-step-row:first-child { border-top: none; }
.c-step-row__num {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-soft);
  color: var(--ipnlf-deep); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.c-step-row h2, .c-step-row h3 {
  font-family: var(--font-text); font-weight: 700; text-transform: none;
  letter-spacing: normal; font-size: var(--fs-h4); margin-bottom: 4px;
}
.c-step-row p { margin: 0; color: var(--text-muted); font-size: var(--fs-body-sm); }

/* ---- Footer ---- */
.c-footer { background: #08313F; padding: var(--space-7) 0; }
.c-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.c-footer__logo img { height: 38px; }
.c-footer__note { font-size: 14px; color: var(--text-on-dark-soft); max-width: 44ch; }
.c-footer__links { display: flex; gap: 24px; flex-wrap: wrap; }
.c-footer__links a { color: var(--text-on-dark-soft); font-size: 14px; text-decoration: none; }
.c-footer__links a:hover { color: #fff; }

/* ---- Utility ---- */
.u-mt-0 { margin-top: 0; }
.u-text-center { text-align: center; }
@media (max-width: 900px) {
  .c-form-section { padding: var(--space-6) var(--space-4); }
}

/* The header component below is currently unused: every page removed its
   header (see each page's <script>, which no longer calls C.header()).
   Rules kept in case a header is reinstated later; they have no effect
   while nothing renders a `.c-header` element. */
@media (max-width: 700px) {
  .c-header {
    position: static; background: var(--surface-dark);
    padding: 14px 16px; gap: 12px;
  }
  .c-header__logo img { height: 30px; }
  .c-header__nav { display: none; }
  .c-header__cta { margin-left: auto; padding: 9px 16px; font-size: 13px; }
  .c-header__toggle { display: flex; }
  .c-header__mobile-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface-dark); border-top: 1px solid rgba(255,255,255,0.15);
    padding: 8px 16px 14px; flex-direction: column; gap: 4px;
  }
  .c-header__mobile-menu.is-open { display: flex; }
  .c-header__mobile-menu .c-header__link { padding: 10px 0; font-size: 15px; }

  .c-hero__content { padding: 28px 0 32px; }
  .c-hero__title { font-size: clamp(30px, 8vw, 40px); max-width: 20ch; }
  .c-hero__intro { font-size: 16px; margin-bottom: var(--space-5); }
  .c-hero--tall, .c-hero { min-height: auto; }

  /* Sticky "start assessment" bar, only where the page opts in by
     rendering stickyAssessmentBar(); harmless if absent elsewhere. */
  .c-sticky-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,0.96); backdrop-filter: blur(6px);
    box-shadow: 0 -4px 16px rgba(12,70,91,0.14);
  }
  .c-sticky-cta .c-btn { display: flex; width: 100%; justify-content: center; }
  /* Leave room so the sticky bar never covers the last bit of content. */
  body:has(.c-sticky-cta) { padding-bottom: 76px; }
}

/* ---- Mobile review fixes ---- */
/* The photo credit is baked into the bottom-right of boat-aerial.jpg, so
   anchor the crop there to keep the attribution visible. */
.c-hero__bg[src*="boat-aerial"],
.c-evidence-card__media img[src*="boat-aerial"] { object-position: right bottom; }

/* Avoid a lone last word in short paragraphs (e.g. beside the figures card). */
.c-text-block p { text-wrap: pretty; }

/* Footer links: comfortable tap height. */
.c-footer__links { gap: 0 24px; }
.c-footer__links a { display: inline-block; padding: 11px 0; }

@media (max-width: 600px) {
  /* Let the figures grid shrink instead of pushing past the viewport. */
  .c-text-figures > * { min-width: 0; }
  .c-figures-card__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-hero__title, .c-section-header h2, .c-form-section__head h2 { text-wrap: balance; }
  /* Single-column cards: no reserved second title line. */
  .c-card--approach h3 { min-height: 0; }
  /* One inset around the survey, not two. */
  .c-form-section { padding: var(--space-5) 12px; }
  /* Sticky bar is ~82px tall; leave room for it plus any home indicator. */
  body:has(.c-sticky-cta) { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}
@media (max-width: 360px) {
  .c-figures-card__unit { display: block; margin-left: 0; }
}

/* Phones: the text spans the full hero width, so the desktop left-to-right
   fade leaves it over the bright side of the photo. Use an even dark overlay
   and give the outline button a faint fill so its edge stays visible. */
@media (max-width: 700px) {
  .c-hero__scrim { background: linear-gradient(180deg, rgba(12,70,91,0.90) 0%, rgba(12,70,91,0.82) 100%); }
  .c-hero .c-btn--outline-dark { background: rgba(12,70,91,0.55); border-color: rgba(255,255,255,0.85); }
}

/* ---- Zoomable image (tap to enlarge) ---- */
.c-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; font: inherit; }
.c-zoom img { display: block; }
.c-zoom__hint {
  display: flex; align-items: center; gap: 6px; width: max-content; margin: 10px 0 0 auto;
  padding: 6px 12px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700;
  color: var(--ipnlf-deep); background: #fff; border: 1.5px solid var(--border-subtle);
}
.c-zoom-overlay__tip { display: none; }
@media (max-width: 700px) {
  .c-zoom-overlay__tip {
    display: block; position: absolute; top: 18px; left: 16px; right: 72px; margin: 0;
    font-size: 14px; line-height: 1.35; color: #fff;
  }
}
.c-zoom:focus-visible { outline: 3px solid var(--ipnlf-teal); outline-offset: 3px; border-radius: var(--radius-lg); }
.c-zoom-overlay {
  position: fixed; inset: 0; z-index: 100; background: rgba(8,49,63,0.96);
  display: flex; align-items: center; justify-content: center;
}
.c-zoom-overlay__scroll { width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; display: flex; padding: 64px 16px 24px; box-sizing: border-box; }
/* Wide enough that the diagram's small labels are readable; scrolls sideways on phones. */
.c-zoom-overlay__scroll img { width: max(900px, 100%); max-width: none; height: auto; margin: auto; flex-shrink: 0; background: #fff; border-radius: var(--radius-lg); }
.c-zoom-overlay__close {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: #fff; color: var(--ipnlf-deep); font-size: 28px; line-height: 1; cursor: pointer;
}