/* ==========================================================================
   House of Hope & Glory: site stylesheet
   Tokens and components per DESIGN.md. Light theme, locked. One accent per
   viewport. Loaded after scrollcraft.css, which supplies the reveal and
   parallax device defaults only.
   ========================================================================== */

:root {
  /* brand ------------------------------------------------------------- */
  --navy:        #0B344D;
  --coral:       #F15F5F;
  --green:       #74A880;
  --gold:        #FBAB18;
  --white:       #FFFFFF;
  --off-white:   #F8FAF9;
  --navy-tint:   #EEF4F7;
  --coral-tint:  #FDE7E7;
  --green-tint:  #EAF3EC;
  --gold-tint:   #FFF4DC;
  --action:      #C43F4C;   /* the only colour a money action wears */
  --border:      #DDE5E8;
  --border-strong: #7C94A2;   /* form controls, 3.19:1 on white */
  --ink-soft:    #46606F;

  /* engine token overrides --------------------------------------------- */
  --sc-canvas: var(--white);
  --sc-surface: var(--off-white);
  --sc-ink: var(--navy);
  --sc-ink-soft: var(--ink-soft);
  --sc-accent: var(--action);
  --sc-accent-ink: var(--white);
  --sc-hairline: var(--border);
  --sc-shadow-color: 203 75% 17%;

  /* type ---------------------------------------------------------------- */
  --display: "Outfit", "Figtree", system-ui, -apple-system, sans-serif;
  --text: "Figtree", system-ui, -apple-system, sans-serif;

  --t-xs:   0.78rem;
  --t-sm:   0.9rem;
  --t-base: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --t-lg:   clamp(1.13rem, 1.03rem + 0.44vw, 1.38rem);
  --t-xl:   clamp(1.35rem, 1.15rem + 0.9vw, 1.9rem);
  --t-2xl:  clamp(1.7rem, 1.35rem + 1.6vw, 2.6rem);
  --t-3xl:  clamp(2.1rem, 1.6rem + 2.3vw, 3.5rem);
  --t-4xl:  clamp(2.4rem, 1.7rem + 3.2vw, 4.4rem);

  /* space and shape ----------------------------------------------------- */
  --maxw: 80rem;
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --section: clamp(3.5rem, 7.5vw, 8rem);
  --bar-h: 4.5rem;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --fast: 160ms;
  --base: 240ms;
}

html { scroll-padding-top: calc(var(--bar-h) + 1.5rem); }
body {
  background: var(--white);
  color: var(--navy);
  font-family: var(--text);
  font-size: var(--t-base);
  line-height: 1.62;
  letter-spacing: 0;
}
p { margin: 0; max-width: 60ch; text-wrap: pretty; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; margin: 0; text-wrap: balance; }
strong { font-weight: 600; }
img { display: block; max-width: 100%; }

/* motion audit fix: one reveal duration, 420ms, everywhere */
[data-sc-in], [data-sc-stagger] > * { transition-duration: 420ms; }
@media (prefers-reduced-motion: reduce) { [data-sc-in], [data-sc-stagger] > * { transition-duration: 220ms; } }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.measure { max-width: 60ch; }
/* 54ch rather than 44: at 44 a sentence of this length kept dropping two words
   onto a line of their own. text-wrap: pretty comes from the p rule and only
   rescues single-word orphans, so the measure has to do the rest. */
.lede { font-size: var(--t-lg); line-height: 1.5; max-width: 54ch; color: var(--navy); text-wrap: pretty; }
.body-soft { color: var(--ink-soft); }
.kicker {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin: 0;
}
.h1 { font-size: var(--t-4xl); line-height: 1.04; letter-spacing: -0.022em; }
.h2 { font-size: var(--t-3xl); line-height: 1.08; letter-spacing: -0.018em; }
.h3 { font-size: var(--t-xl); line-height: 1.2; letter-spacing: -0.01em; }
.statement { font-family: var(--display); font-size: var(--t-2xl); font-weight: 500; line-height: 1.24; letter-spacing: -0.012em; max-width: 26ch; }
.pending { color: var(--action); font-weight: 600; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* grounds. Two tints never touch. */
.g-white { background: var(--white); }
.g-off   { background: var(--off-white); }
.g-green { background: var(--green-tint); }
.g-gold  { background: var(--gold-tint); }
.g-coral { background: var(--coral-tint); }
.g-navyt { background: var(--navy-tint); }

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--display); font-weight: 600; font-size: var(--t-sm);
  letter-spacing: 0.01em; line-height: 1; white-space: nowrap;
  padding: 0.95em 1.45em; border-radius: var(--r-sm); border: 1.5px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn svg { width: 0.95em; height: 0.95em; transition: transform var(--fast) var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn--primary:hover { background: var(--action); border-color: var(--action); }
.btn--action { background: var(--action); color: var(--white); border-color: var(--action); }
.btn--action:hover { background: var(--navy); border-color: var(--navy); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy-tint); text-decoration: underline; text-underline-offset: 0.2em; }
.btn--white { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn--white:hover { background: transparent; color: var(--white); border-color: var(--white); }
.btn--light { background: rgba(255,255,255,0.14); color: var(--white); border-color: rgba(255,255,255,0.85); }
.btn--light:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.link {
  display: inline-flex; align-items: center; gap: 0.5em; font-weight: 600; color: var(--navy);
  text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 0.28em;
  transition: text-decoration-color var(--fast) var(--ease);
}
.link:hover { text-decoration-color: var(--action); }
.link svg { width: 0.9em; height: 0.9em; transition: transform var(--fast) var(--ease); }
.link:hover svg { transform: translateX(3px); }

::selection { background: var(--action); color: var(--white); }
:root { caret-color: var(--action); accent-color: var(--action); }
:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; border-radius: var(--r-sm); }

/* -------------------------------------------------------------- header -- */
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--navy); color: var(--white); padding: 0.6rem 1rem; border-radius: var(--r-sm); }
.skip:focus { top: 1rem; }

.bar { position: fixed; inset: 0 0 auto 0; z-index: 90; height: var(--bar-h); background: var(--white); border-bottom: 1px solid var(--border); }
.bar__in { height: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--navy); }
.brand img { width: 2.5rem; height: auto; }
.brand span { font-family: var(--display); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.15em; line-height: 1.2; text-transform: uppercase; }
.brand span b { display: block; font-weight: 600; }
.brand span i { display: block; font-style: normal; font-weight: 400; font-size: 0.7rem; letter-spacing: 0.22em; }

.nav { display: flex; justify-content: center; align-items: center; gap: clamp(0.6rem, 1.5vw, 1.35rem); margin: 0; padding: 0; list-style: none; }
.nav a { font-family: var(--display); font-weight: 500; font-size: 0.92rem; color: var(--navy); text-decoration: none; padding: 0.4rem 0; position: relative; white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--coral); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--fast) var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
/* the three pillars are one group in the nav: the journey is the navigation */
.nav .journey { display: flex; gap: clamp(0.6rem, 1.5vw, 1.35rem); padding-inline: clamp(0.6rem, 1.5vw, 1.35rem); border-inline: 1px solid var(--border); }
.bar__actions { display: flex; gap: 0.6rem; align-items: center; }
.bar__actions .btn { padding: 0.8em 1.1em; }
.burger { display: none; width: 2.75rem; height: 2.75rem; border: 1.5px solid var(--border); border-radius: var(--r-sm); background: var(--white); place-items: center; }
.burger span { display: block; width: 1.1rem; height: 2px; background: var(--navy); box-shadow: 0 -5px 0 var(--navy), 0 5px 0 var(--navy); }
.drawer { display: none; }
@media (max-width: 560px) { .brand span { display: none; } .brand img { width: 2.7rem; } }

@media (max-width: 1160px) {
  .nav { display: none; }
  .burger { display: grid; }
  .bar__actions .btn--ghost { display: none; }
  .drawer {
    display: block; position: fixed; inset: var(--bar-h) 0 auto 0; z-index: 89;
    max-height: calc(100dvh - var(--bar-h)); overflow-y: auto;
    background: var(--white); border-bottom: 1px solid var(--border);
    padding: var(--section) var(--gutter) 2.5rem;
    padding-block-start: 1.5rem;
    opacity: 0; transform: translateY(-10px); pointer-events: none;
    /* audit fix: exit is faster than enter, it does not mirror it */
    transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
  }
  .nav-open .drawer { opacity: 1; transform: none; pointer-events: auto; transition-duration: var(--base); }
  .drawer ul { list-style: none; margin: 0; padding: 0; }
  .drawer a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border); font-family: var(--display); font-size: var(--t-lg); font-weight: 500; color: var(--navy); text-decoration: none; }
  .drawer a em { font-style: normal; font-size: var(--t-xs); color: var(--ink-soft); letter-spacing: 0.08em; text-transform: uppercase; }
  .drawer .btn { margin-top: 1.5rem; width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------- hero -- */
.hero { position: relative; margin-top: var(--bar-h); min-height: min(46rem, calc(100dvh - var(--bar-h))); overflow: clip; background: var(--navy); display: grid; align-items: end; }
.hero__plate { position: absolute; inset: -8% 0; z-index: 0; }
.hero__plate :is(img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The film sits over the still and fades in once it is actually running, so a
   slow connection never shows a black rectangle. */
.hero__plate video { opacity: 0; transition: opacity 320ms var(--ease); }
.hero__plate video.is-playing { opacity: 1; }
.hero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(11,52,77,0.87) 0%, rgba(11,52,77,0.8) 44%, rgba(11,52,77,0.48) 62%, rgba(11,52,77,0.12) 79%, rgba(11,52,77,0) 90%),
    linear-gradient(to top, rgba(11,52,77,0.6) 0%, rgba(11,52,77,0.32) 42%, rgba(11,52,77,0.08) 70%, transparent 88%); }
.hero__copy { position: relative; z-index: 3; padding-block: clamp(3rem, 9vh, 6rem) clamp(5.5rem, 16vh, 9rem); color: var(--white); }
.hero__copy h1 { font-size: clamp(1.85rem, 1.1rem + 2.5vw, 3.35rem); line-height: 1.16; letter-spacing: -0.02em; max-width: 21ch; color: var(--white); font-weight: 400; }
.hero__copy h1 strong { font-weight: 600; }
.hero__copy .btn-row { margin-top: clamp(1.75rem, 4vh, 2.5rem); }
.hero__ctl { position: absolute; right: var(--gutter); bottom: 1.25rem; z-index: 4; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.7); background: rgba(11,52,77,0.45); color: var(--white); display: grid; place-items: center; cursor: pointer; }
.hero__ctl svg { width: 0.85rem; height: 0.85rem; }
.hero__ctl[aria-pressed="true"] .i-play, .hero__ctl:not([aria-pressed="true"]) .i-pause { display: none; }
@media (max-width: 860px) {
  .hero { min-height: calc(100dvh - var(--bar-h)); }
  .hero__scrim { background: linear-gradient(to top, rgba(11,52,77,0.92) 0%, rgba(11,52,77,0.86) 34%, rgba(11,52,77,0.6) 60%, rgba(11,52,77,0.22) 78%, transparent 94%); }
  .hero__ctl { bottom: 0.9rem; }
}

/* page hero for inner pages: shorter plate, copy on the ground below */
.phero { position: relative; margin-top: var(--bar-h); overflow: clip; background: var(--navy); }
.phero__plate { position: relative; height: clamp(15rem, 42vh, 26rem); }
.phero__plate img { width: 100%; height: 100%; object-fit: cover; }
.phero__copy { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; }
.phero__copy .kicker { margin-bottom: 1rem; }
.phero__copy h1 { max-width: 18ch; }

/* A page header that sits on the photograph rather than under it. The picture
   is composed with a white fall on the left, so the copy keeps its navy and the
   wash below only guarantees that fall at narrower widths. */
.phero--over { display: grid; align-items: center; min-height: min(34rem, 74vh); background: var(--white); }
.phero--over .phero__plate { position: absolute; inset: 0; height: auto; }
.phero--over .phero__plate img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.phero__wash { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.94) 29%, rgba(255,255,255,0.72) 42%, rgba(255,255,255,0.2) 57%, rgba(255,255,255,0) 72%); }
/* The lede holds a shorter measure here than elsewhere so its lines finish
   inside the white fall instead of running on over the bowl, where navy on
   photograph measured 2.31:1. */
.phero--over .lede { max-width: 38ch; }
.phero--over .phero__copy { position: relative; z-index: 2; padding-block: clamp(3rem, 8vw, 5rem); }
/* A photograph whose subject sits on the left: the fall and the words move to
   the other side so neither covers the other. */
.phero--right .phero__plate img { object-position: 50% 50%; }
.phero--right .phero__wash { background: linear-gradient(to left, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.94) 29%, rgba(255,255,255,0.78) 44%, rgba(255,255,255,0.28) 58%, rgba(255,255,255,0) 72%); }
.phero--right .phero__copy { display: grid; justify-items: end; text-align: right; }
@media (max-width: 860px) {
  .phero--right .phero__copy { justify-items: start; text-align: left; }
  /* the kicker sits highest on the phone, where the wash is thinnest */
  .phero--right .kicker { color: var(--navy); }
  .phero--right .phero__wash { background: linear-gradient(to top, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.93) 40%, rgba(255,255,255,0.45) 66%, rgba(255,255,255,0) 88%); }
}
@media (max-width: 860px) {
  .phero--over { min-height: min(32rem, 76vh); align-items: end; }
  .phero__wash { background: linear-gradient(to top, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.93) 40%, rgba(255,255,255,0.45) 66%, rgba(255,255,255,0) 88%); }
}
.phero__copy .lede { margin-top: 1.5rem; }

/* The pillar pages carry the mark beside the question, drawn only as far as
   that stage of the journey: the house for Belong, the sun added for Believe,
   the heart added for Become. Static on purpose. The drawing itself is the
   homepage's moment and repeating it here would spend it twice. */
.phero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.phero__mark svg { width: min(100%, 19rem); height: auto; margin-inline: auto; display: block; overflow: visible; }
.phero__mark path { fill: none; stroke: var(--navy); stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; }
.phero__mark .p-sun, .phero__mark .p-ray { stroke: var(--gold); }
.phero__mark .p-ray { stroke-width: 22; }
.phero__mark .p-heart { stroke: var(--coral); }
@media (max-width: 860px) {
  .phero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .phero__mark { order: -1; }
  .phero__mark svg { width: min(58%, 11rem); margin-inline: 0; }
}

/* ------------------------------------------------------- afternoon band --
   Sticky photograph, prose set in short lines beside it. */
.after { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(1.75rem, 4.5vw, 4rem); align-items: start; }
.after__fig { margin: 0; position: sticky; top: calc(var(--bar-h) + 2rem); border-radius: var(--r-md); overflow: clip; aspect-ratio: 4 / 5; background: var(--navy-tint); }
/* No overscale here: the photograph is already cut to the frame's ratio, and
   any cover-crop takes the ends off the sign, which is the subject. */
.after__fig img { width: 100%; height: 100%; object-fit: cover; }
.after__fig figcaption { position: absolute; left: 0.9rem; bottom: 0.9rem; font-size: var(--t-xs); color: var(--white); background: rgba(11,52,77,0.72); padding: 0.35rem 0.6rem; border-radius: 4px; }
/* Set as verse: one sentence to a line, the way the brand book writes it.
   A sentence too long for the column wraps with a hanging indent, so the
   turned line reads as a continuation rather than as a new sentence. */
.after__prose { font-family: var(--display); font-weight: 400; font-size: clamp(0.95rem, 0.1rem + 1.42vw, 1.35rem); line-height: 1.5; letter-spacing: -0.008em; max-width: none; }
.after__prose p { max-width: none; }
.after__prose p + p { margin-top: 1.6em; }
.after__prose span { display: block; padding-left: 1.1em; text-indent: -1.1em; }
.after__prose span + span { margin-top: 0.28em; }
.after__prose b { font-weight: 600; }
@media (max-width: 900px) {
  .after { grid-template-columns: 1fr; gap: 2rem; }
  .after__fig { position: static; aspect-ratio: 3 / 2; }
  /* one column means a wider measure, so the verse comes back up in size and
     still keeps a sentence to a line down to about 500px */
  .after__prose { font-size: clamp(1rem, 0.4rem + 1.9vw, 1.3rem); }
  /* On a phone the longest sentence has to wrap. A hanging indent would set
     the carried words in from the line above, so the lines read as a ragged
     left edge: flush is the only alignment that holds here. */
  .after__prose span { padding-left: 0; text-indent: 0; }
  .after__prose span + span { margin-top: 0.5em; }
}
/* the narrowest phones: a touch smaller keeps all but the longest sentence
   on one line */
@media (max-width: 400px) {
  .after__prose { font-size: 0.94rem; }
}

/* ------------------------------------------------------------ manifesto -- */
.manifesto__lead { font-family: var(--display); font-size: var(--t-2xl); font-weight: 500; line-height: 1.22; letter-spacing: -0.014em; max-width: 24ch; }
.manifesto__cols { margin-top: clamp(2rem, 5vw, 3.5rem); columns: 2; column-gap: clamp(2rem, 5vw, 4.5rem); max-width: 62rem; }
.manifesto__cols p { max-width: none; break-inside: avoid; color: var(--ink-soft); }
.manifesto__cols p + p { margin-top: 1.1em; }
.manifesto__close { margin-top: clamp(2rem, 5vw, 3.5rem); padding-top: 2rem; border-top: 1px solid var(--border); font-family: var(--display); font-size: var(--t-xl); line-height: 1.3; max-width: 30ch; }
@media (max-width: 820px) { .manifesto__cols { columns: 1; } }

/* ----------------------------------------------------------- scene rail --
   Five scenes travelling sideways while the page scrolls normally. No pin,
   no scroll-jacking. Stacks on phones. */
.scenes { overflow: clip; }
.scenes__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; }
.rail { display: flex; gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(2rem, 5vw, 3.5rem); padding-inline: var(--gutter); will-change: transform; }
.scene { flex: 0 0 clamp(17rem, 30vw, 26rem); }
.scene figure { margin: 0; border-radius: var(--r-md); overflow: clip; aspect-ratio: 4 / 3; background: var(--navy-tint); }
.scene img { width: 100%; height: 100%; object-fit: cover; }
/* Photographs only. The scenes carry the story, so nothing is captioned: the
   descriptions live in each image's alt text for anyone who cannot see them. */
.scenes__close { margin-top: clamp(2.5rem, 6vw, 4rem); text-align: center; }
.scenes__close .statement { margin-inline: auto; max-width: 30ch; }
@media (max-width: 860px) {
  .rail { display: grid; grid-template-columns: 1fr; transform: none !important; padding-inline: 0; }
  .scene { flex: none; }
  .scenes .wrap--rail { padding-inline: var(--gutter); }
}
@media (prefers-reduced-motion: reduce) { .rail { transform: none !important; } }

/* ------------------------------------------------------- the House peak -- */
.peak__head { max-width: 44rem; }
.peak__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 7vw, 7rem); margin-top: clamp(2.5rem, 6vw, 4.5rem); align-items: start; }

.house { position: sticky; top: calc(var(--bar-h) + 2rem); }
.house svg { width: min(100%, 24rem); height: auto; margin-inline: auto; display: block; overflow: visible; }
.house path { fill: none; stroke: var(--navy); stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.house .p-sun, .house .p-ray { stroke: var(--gold); }
.house .p-ray { stroke-width: 22; }
.house .p-heart { stroke: var(--coral); transform-origin: 275px 385px; }
.house.is-complete .p-heart { animation: beat 900ms var(--ease) 1; }
@keyframes beat { 0% { transform: scale(1); } 35% { transform: scale(1.09); } 100% { transform: scale(1); } }

/* the journey rail: House > Hope > Glory. Real sequence, so it is numbered
   by nothing but its own words. */
.journey-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 2rem; }
.journey-rail div { border-top: 2px solid var(--border); padding-top: 0.7rem; transition: border-color var(--base) var(--ease), color var(--base) var(--ease); }
.journey-rail b { display: block; font-family: var(--display); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); transition: color var(--base) var(--ease); }
.journey-rail em { font-style: normal; font-size: var(--t-xs); color: var(--ink-soft); opacity: 0.8; }
/* the third caption is the longest: give it the slack it needs on the
   narrower desktop widths rather than letting it wrap alone */
@media (min-width: 861px) and (max-width: 1100px) {
  .journey-rail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); }
}
.journey-rail div.is-on { border-top-color: var(--navy); }
.journey-rail div.is-on b { color: var(--navy); }

.pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(3rem, 8vw, 6rem); }
/* The question is the heading, with the brand word carried inside it. Emphasis
   is weight and case of the same face, never a second family. */
.pillar__word { font-family: var(--display); font-size: var(--t-2xl); font-weight: 400; letter-spacing: -0.014em; line-height: 1.1; max-width: 18ch; }
.pillar__word b { font-weight: 600; text-transform: uppercase; letter-spacing: 0.015em; }
.pillar__body { margin-top: 1.5rem; color: var(--navy); max-width: 46ch; }
.pillar__list { list-style: none; margin: 1.75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pillar__list li { font-family: var(--display); font-size: var(--t-sm); font-weight: 500; padding: 0.45em 0.85em; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--white); }
.pillar__list li[data-planned]::after { content: "Planned"; margin-left: 0.6em; font-size: 0.72em; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.pillar__note { margin-top: 1.5rem; font-size: var(--t-sm); color: var(--ink-soft); max-width: 40ch; }
.pillar__go { margin-top: 1.75rem; }

/* The claim gets a full-bleed photographic band of its own. It is the sentence
   the whole section exists to earn, so it stops sharing a ground with the
   pillars above it. */
.banner { position: relative; overflow: clip; min-height: min(30rem, 68vh); display: grid; align-items: end; background: var(--navy); }
.banner__plate { position: absolute; inset: 0; }
.banner__plate img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* Two layers: a corner wash that puts the density exactly under the claim, and
   a gentle left-to-right fall so the band still reads as one picture. Keeping
   the heavy part local is what lets the children's faces stay bright. */
.banner__scrim { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(135% 125% at 0% 100%, rgba(11,52,77,0.95) 0%, rgba(11,52,77,0.82) 32%, rgba(11,52,77,0.25) 58%, rgba(11,52,77,0) 76%),
    linear-gradient(to right, rgba(11,52,77,0.72) 0%, rgba(11,52,77,0.42) 34%, rgba(11,52,77,0.1) 62%, rgba(11,52,77,0) 82%); }
.banner__inner { position: relative; z-index: 2; padding-block: clamp(3rem, 8vw, 5rem) clamp(2rem, 5vw, 3.25rem); }
.banner__claim { font-family: var(--display); font-weight: 500; font-size: var(--t-3xl); line-height: 1.08; letter-spacing: -0.02em; color: var(--white); max-width: 20ch; }
@media (max-width: 860px) {
  .banner { min-height: min(26rem, 64vh); }
  .banner__scrim { background: linear-gradient(to top, rgba(11,52,77,0.93) 0%, rgba(11,52,77,0.78) 48%, rgba(11,52,77,0.3) 100%); }
  .banner__claim br { display: none; }
}

.grow__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.85rem 2.5rem; max-width: 62rem; }
.grow__list li { font-size: var(--t-base); color: var(--navy); padding-left: 1.1rem; position: relative; }
.grow__list li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--green); }
.grow__tail { margin-top: 2rem; color: var(--ink-soft); }

@media (max-width: 900px) {
  .peak__grid { grid-template-columns: 1fr; gap: 0; }
  .house { top: var(--bar-h); z-index: 5; background: var(--green-tint);
           margin-inline: calc(var(--gutter) * -1); padding: 0.75rem var(--gutter) 0.9rem; margin-bottom: 2rem;
           display: grid; grid-template-columns: 5.5rem 1fr; align-items: center; gap: 1rem;
           border-bottom: 1px solid color-mix(in oklab, var(--green) 45%, transparent); }
  .house svg { width: 100%; margin: 0; grid-row: span 2; }
  .journey-rail { margin: 0; gap: 0.4rem; }
  .journey-rail div { padding-top: 0.45rem; }
  .journey-rail em { display: none; }
}

/* ------------------------------------------------------------- the chain -- */
.chain { list-style: none; margin: clamp(2.5rem, 6vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: clip; }
.chain li { background: var(--gold-tint); padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.chain b { display: block; font-family: var(--display); font-size: var(--t-lg); font-weight: 600; }
.chain span { display: block; margin-top: 0.35rem; font-size: var(--t-sm); color: var(--ink-soft); }
@media (max-width: 820px) { .chain { grid-template-columns: 1fr 1fr; } }

/* The homepage chain is a sequence, so it gets arrows: each step follows from
   the one before it. Drawn in CSS, sitting on the divider between cells. */
.chain--process li { position: relative; }
.chain--process li:not(:last-child)::after {
  content: ""; position: absolute; z-index: 1;
  right: 0; top: 50%;
  width: 0.6rem; height: 0.6rem;
  border-top: 2px solid var(--navy);
  border-right: 2px solid var(--navy);
  transform: translate(50%, -50%) rotate(45deg);
}
@media (max-width: 820px) {
  /* one column, so the process reads downwards and the arrows turn with it */
  .chain--process { grid-template-columns: 1fr; }
  .chain--process li:not(:last-child)::after {
    right: auto; top: auto; left: 50%; bottom: 0;
    transform: translate(-50%, 50%) rotate(135deg);
  }
}

.figures { list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem); }
.figure { grid-column: span 6; border-top: 2px solid var(--navy); padding-top: 1.1rem; }
.figure--soft { border-top-color: var(--border); }
.figure b { display: block; font-family: var(--display); font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.figure--soft b { font-size: var(--t-lg); letter-spacing: 0; color: var(--ink-soft); padding-top: 0.4rem; }
.figure b i { font-style: normal; font-size: max(0.8rem, 0.4em); font-weight: 500; letter-spacing: 0; }
.figure span { display: block; margin-top: 0.6rem; max-width: 38ch; }
.figures__note { margin-top: 2rem; font-size: var(--t-xs); color: var(--ink-soft); max-width: 72ch; }
@media (max-width: 860px) { .figure { grid-column: span 6; } }
@media (max-width: 520px) { .figure { grid-column: span 12; } }

/* ---------------------------------------------------------------- trust -- */
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(2.5rem, 6vw, 4rem); }
.trust__item svg { width: 2.5rem; height: 2.5rem; stroke: var(--navy); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trust__item h3 { margin-top: 1.25rem; font-size: var(--t-lg); }
.trust__item p { margin-top: 0.6rem; font-size: var(--t-sm); color: var(--ink-soft); }
@media (max-width: 760px) { .trust { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------------------------------------------------------------- close -- */
.close { position: relative; overflow: clip; background: var(--navy-tint); min-height: min(42rem, 85dvh); display: grid; align-items: center; }
.close__plate { position: absolute; inset: 0; }
.close__plate img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; }
.close__scrim { position: absolute; inset: 0; background: linear-gradient(to right, rgba(248,250,249,0.985) 0%, rgba(248,250,249,0.96) 38%, rgba(248,250,249,0.64) 62%, rgba(248,250,249,0.14) 80%, rgba(248,250,249,0) 92%); }
.close__inner { position: relative; z-index: 2; padding-block: clamp(3.5rem, 9vw, 6rem); }
.close__inner p { color: var(--navy); }
.close__lines { margin-top: 1.5rem; font-size: var(--t-lg); line-height: 1.5; max-width: 34ch; }
.close__lines b { font-weight: 400; }
.close .btn-row { margin-top: 2rem; }
.close__sig { margin-top: 2.5rem; font-family: var(--display); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 860px) { .close__scrim { background: linear-gradient(to top, rgba(248,250,249,0.97) 0%, rgba(248,250,249,0.92) 52%, rgba(248,250,249,0.3) 100%); } }

/* ---------------------------------------------------- inner page pieces -- */
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.two--narrow { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; }
.two figure { margin: 0; border-radius: var(--r-md); overflow: clip; aspect-ratio: 3 / 2; background: var(--navy-tint); }
.two figure img { width: 100%; height: 100%; object-fit: cover; }
/* A portrait photograph set beside a block of prose: the picture takes its
   height from the text next to it rather than from a fixed ratio. */
.two--pair { align-items: stretch; }
.two--pair figure { aspect-ratio: auto; min-height: 22rem; }
.two--pair figure img { display: block; }
@media (max-width: 860px) { .two--pair figure { aspect-ratio: 4 / 5; min-height: 0; } }
@media (max-width: 860px) { .two, .two--narrow { grid-template-columns: 1fr; gap: 2rem; } }

.defs { display: grid; gap: 0; margin-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--border); }
.defs > div { display: grid; grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr); gap: clamp(1rem, 4vw, 3rem); padding-block: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--border); }
.defs h3 { font-size: var(--t-2xl); font-weight: 600; letter-spacing: 0.01em; }
.defs p { color: var(--ink-soft); }
@media (max-width: 760px) { .defs > div { grid-template-columns: 1fr; gap: 0.5rem; } }

.principles { list-style: none; margin: clamp(2rem, 5vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem clamp(2rem, 5vw, 4rem); }
.principles li { padding-left: 1.4rem; position: relative; font-family: var(--display); font-size: var(--t-lg); line-height: 1.35; }
/* a roll call: one contribution per line, so the list reads as a list even
   though it is a single paragraph */
.roll p { border-left: 2px solid var(--border); padding-left: clamp(0.9rem, 2vw, 1.25rem); }
.roll span { display: block; }
.roll span + span { margin-top: 0.35rem; }
/* a principle made of two sentences reads as two lines, not one wrap */
.principles li span { display: block; }
.principles li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--green); }
@media (max-width: 760px) { .principles { grid-template-columns: 1fr; } }

.words { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(2rem, 5vw, 3rem); }
.words h3 { font-size: var(--t-sm); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); }
.words ul { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.words li { font-family: var(--display); font-size: var(--t-sm); padding: 0.4em 0.8em; border-radius: var(--r-sm); background: var(--white); border: 1px solid var(--border); }
.words--avoid li { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--border); }
@media (max-width: 760px) { .words { grid-template-columns: 1fr; gap: 2rem; } }

/* programme blocks on a pillar page: alternating, never three equal cards */
.prog { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.75rem, 5vw, 4rem); align-items: center; }
.prog + .prog { margin-top: clamp(3rem, 7vw, 5rem); }
.prog:nth-child(even) figure { order: 2; }
.prog figure { margin: 0; border-radius: var(--r-md); overflow: clip; aspect-ratio: 3 / 2; background: var(--navy-tint); }
.prog figure img { width: 100%; height: 100%; object-fit: cover; }
.prog h3 { font-size: var(--t-xl); }
.prog .tag { display: inline-block; margin-bottom: 0.9rem; font-family: var(--display); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.prog p { margin-top: 0.9rem; color: var(--ink-soft); }
@media (max-width: 860px) { .prog { grid-template-columns: 1fr; } .prog:nth-child(even) figure { order: 0; } }

/* next-step pager, a real sequence */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--border); }
.pager__label { font-size: var(--t-sm); color: var(--ink-soft); }
.pager__next { font-family: var(--display); font-size: var(--t-xl); font-weight: 500; }

.give { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(1.5rem, 3vw, 2rem); margin-top: clamp(2rem, 5vw, 3rem); align-items: start; }
.give__card { border: 1px solid var(--border); border-radius: var(--r-md); padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--white); }
.give__card--lead { background: var(--coral-tint); border-color: transparent; }
.give__card h3 { font-size: var(--t-xl); }
.give__card p { margin-top: 0.75rem; color: var(--ink-soft); }
.give__card--lead p { color: var(--navy); font-size: var(--t-lg); }
.give__card .btn { margin-top: 1.5rem; }
.give__tag { display: inline-block; margin-bottom: 0.8rem; font-family: var(--display); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--action); }
.give__stack { display: grid; gap: clamp(1.5rem, 3vw, 2rem); }
@media (max-width: 860px) { .give { grid-template-columns: 1fr; } }

.eft { margin-top: clamp(2rem, 5vw, 3rem); border: 1px solid var(--border); border-radius: var(--r-md); padding: clamp(1.5rem, 3vw, 2rem); }
.eft dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.5rem; margin: 1.25rem 0 0; font-size: var(--t-sm); }
.eft dt { color: var(--ink-soft); }
.eft dd { margin: 0; font-weight: 500; }

/* Request a Section 18A certificate. A disclosure, so the form does not sit
   open under the bank details for the many visitors who do not need it. */
.req { margin-top: 1.5rem; }
.req > summary {
  display: inline-flex; align-items: center; gap: 0.55em; list-style: none; cursor: pointer;
  font-family: var(--display); font-weight: 600; font-size: var(--t-sm); line-height: 1;
  padding: 0.95em 1.45em; border-radius: var(--r-sm);
  background: var(--navy); color: var(--white); border: 1.5px solid var(--navy);
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.req > summary::-webkit-details-marker { display: none; }
.req > summary::marker { content: ""; }
.req > summary:hover { background: var(--action); border-color: var(--action); }
.req > summary::after {
  content: ""; width: 0.45rem; height: 0.45rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--base) var(--ease);
}
.req[open] > summary::after { transform: translateY(1px) rotate(225deg); }

.form { display: grid; gap: 1rem; margin-top: 1.75rem; max-width: 36rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { display: block; font-size: var(--t-sm); font-weight: 500; margin-bottom: 0.35rem; }
.field label i { font-style: normal; font-weight: 400; color: var(--ink-soft); }
.field input {
  width: 100%; padding: 0.7em 0.8em; font: inherit; color: var(--navy);
  background: var(--white); border: 1.5px solid var(--border-strong); border-radius: var(--r-sm);
}
.field input::placeholder { color: var(--ink-soft); }
.field input:focus-visible { border-color: var(--navy); outline: 2px solid var(--action); outline-offset: 2px; }
.form__note { font-size: var(--t-sm); color: var(--ink-soft); }
.field textarea, .field select {
  width: 100%; padding: 0.7em 0.8em; font: inherit; color: var(--navy);
  background: var(--white); border: 1.5px solid var(--border-strong); border-radius: var(--r-sm);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field textarea:focus-visible, .field select:focus-visible { border-color: var(--navy); outline: 2px solid var(--action); outline-offset: 2px; }
.field--wide { grid-column: 1 / -1; }

/* the honeypot. Off screen rather than display:none, so a bot that checks
   computed style still fills it in */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--t-sm); line-height: 1.5; }
.consent input { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; flex: none; accent-color: var(--action); }
.consent a { color: var(--navy); text-underline-offset: 0.2em; }

.form__status { font-size: var(--t-sm); color: var(--ink-soft); min-height: 1.5em; }
.form__status.is-bad { color: var(--action); font-weight: 500; }
.form__done { border: 1.5px solid var(--green); background: var(--green-tint); border-radius: var(--r-md); padding: clamp(1.25rem, 2.5vw, 1.75rem); max-width: 36rem; margin-top: 1.5rem; }
.form__done p + p { margin-top: 0.6rem; }
.form__done p:last-child { font-size: var(--t-sm); color: var(--ink-soft); }
.form__done:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }
.btn[disabled] { opacity: 0.6; cursor: progress; }

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

/* --------------------------------------------------------------- footer -- */
.foot { background: var(--navy-tint); border-top: 1px solid var(--border); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 3rem); }
.foot img { width: 8.5rem; height: auto; }
.foot h3 { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); margin-bottom: 1rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.foot a { color: var(--navy); text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: 0.22em; }
/* The contact column is a sibling of the link columns, so it matches them:
   same size, same navy. It was a step smaller and muted grey, which read as a
   different typeface sitting next to navy mailto and tel links. The tagline
   under the logo stays small and soft, because that is a caption, not a column. */
.foot p { color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.6; }
.foot address { color: var(--navy); font-style: normal; line-height: 1.7; }
.foot__bottom { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: var(--t-xs); color: var(--ink-soft); }
.foot__bottom ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
@media (max-width: 860px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .house .p-heart { animation: none !important; }
}