/* =====================================================================
   Living Not Existing — concept build for CREATE
   Palette sampled directly from the charity's own logo artwork.
   ===================================================================== */

:root{
  /* Brand — measured off the supplied logo, not guessed */
  --navy:#1B5275;
  --navy-deep:#123A54;
  --navy-ink:#0C2739;
  --teal:#45B8CB;
  --teal-deep:#2A93A6;
  --teal-wash:#E8F5F8;
  --orange:#F7941D;
  --orange-deep:#D97A08;
  --orange-wash:#FDF0DE;

  /* Ground — warm off-white rather than clinical white */
  --cream:#FBF8F3;
  --cream-deep:#F4EEE4;
  --paper:#FFFFFF;

  --ink:#17313F;
  --ink-soft:#4A5F6C;
  --ink-mute:#71838E;
  --line:#E5DED3;
  --line-dark:rgba(255,255,255,.14);

  --create-green:#79B949;

  /* Type is set in two variables so a direction change is two lines, not forty.
     Cormorant Garamond + Jost: the pairing luxury hotels and fine dining use —
     a high-contrast old-style serif with real warmth, against a geometric sans.
     Bodoni and Prata were both tried; Bodoni's hairlines vanish over the
     photography and Prata reads too heavy for the subject. */
  --font-display:"Cormorant Garamond",Garamond,Georgia,serif;
  --font-body:"Jost","Inter",-apple-system,BlinkMacSystemFont,sans-serif;
  --display-weight:500;
  --display-tracking:-.004em;

  --ease:cubic-bezier(.22,.68,.32,1);
  --shadow-sm:0 2px 10px rgba(18,58,84,.06);
  --shadow-md:0 14px 40px -18px rgba(18,58,84,.34);
  --shadow-lg:0 30px 70px -30px rgba(18,58,84,.42);

  --radius:14px;
  --radius-lg:22px;

  /* Header height lives here because the mobile nav drawer is positioned
     off the bottom of the header. Hard-coding it in two places drifts. */
  --head-h:96px;
}
@media (max-width:600px){:root{--head-h:78px}}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1.045rem,1rem + .2vw,1.135rem);
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ---------------------------------------------------------------------
   Type. Newsreader carries the headlines — a literary serif reads with
   more warmth and gravity than a geometric sans for subject matter
   this personal. Inter does all the working text.
   Headings are NEVER max-width capped: they flow the full container.
   --------------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  line-height:1.1;
  letter-spacing:var(--display-tracking);
  color:var(--navy-ink);
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2.85rem,1.75rem + 5vw,5.3rem);line-height:1.0}
h2{font-size:clamp(2.15rem,1.45rem + 3.1vw,3.65rem)}
h3{font-size:clamp(1.5rem,1.25rem + 1vw,2rem);line-height:1.18}
h4{font-size:clamp(1.2rem,1.1rem + .4vw,1.42rem);line-height:1.28}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--navy-ink)}
em{font-style:italic}

.eyebrow{
  font-family:var(--font-body);
  font-size:.735rem;font-weight:600;
  letter-spacing:.165em;text-transform:uppercase;
  color:var(--teal-deep);
  display:flex;align-items:center;gap:12px;
  margin:0 0 18px;
}
.eyebrow::before{
  content:"";width:26px;height:2px;flex:none;
  background:var(--orange);border-radius:2px;
}
.eyebrow.on-dark{color:var(--teal)}
.eyebrow.centred{justify-content:center}

.lede{
  font-size:clamp(1.15rem,1.06rem + .45vw,1.4rem);
  line-height:1.58;
  color:var(--ink-soft);
}

/* ---------------------------------------------------------------------
   Layout
   --------------------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:1180px;          /* page measure — not a text cap */
  margin-inline:auto;
  padding-inline:clamp(10px,4vw,44px);   /* 10px on mobile, Dom's rule */
}
.wrap--wide{max-width:1420px}

section{position:relative}
.pad{padding-block:clamp(56px,7vw,116px)}
.pad-sm{padding-block:clamp(40px,4.5vw,72px)}
/* For a block that continues the section above it rather than starting a new one */
.pad-cont{padding-block:0 clamp(56px,7vw,116px)}
.pad-lead{padding-block:clamp(56px,7vw,116px) clamp(30px,3.2vw,48px)}

.surface-cream{background:var(--cream)}
.surface-paper{background:var(--paper)}
.surface-deep{background:var(--cream-deep)}
.surface-navy{background:var(--navy-ink);color:rgba(255,255,255,.82)}
.surface-navy h2,.surface-navy h3,.surface-navy h4{color:#fff}
.surface-navy .lede{color:rgba(255,255,255,.76)}

.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 30px;
  font-family:var(--font-body);
  font-size:.94rem;font-weight:600;letter-spacing:.005em;
  border-radius:999px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:transform .28s var(--ease),background-color .28s var(--ease),
             color .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease);
}
.btn svg{width:17px;height:17px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

.btn--primary{background:var(--orange);color:#fff;box-shadow:0 10px 26px -12px rgba(217,122,8,.85)}
.btn--primary:hover{background:var(--orange-deep)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-deep)}
.btn--ghost{border-color:rgba(27,82,117,.28);color:var(--navy)}
.btn--ghost:hover{border-color:var(--navy);background:rgba(27,82,117,.05)}
.btn--light{background:#fff;color:var(--navy-ink)}
.btn--light:hover{background:var(--cream)}
.btn--outline-light{border-color:rgba(255,255,255,.42);color:#fff}
.btn--outline-light:hover{border-color:#fff;background:rgba(255,255,255,.1)}

.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(251,248,243,.9);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.site-head.is-stuck{border-bottom-color:var(--line);box-shadow:0 6px 24px -18px rgba(12,39,57,.5)}
.head-in{display:flex;align-items:center;gap:20px;min-height:var(--head-h)}

/* The supplied logo is a STACKED lockup — mark above a three-line wordmark.
   At the ~58px a horizontal header usually wants, the wordmark is unreadable.
   Give it the height it needs rather than rebuilding their mark as type. */
.brand{display:flex;align-items:center;flex:none;text-decoration:none;padding-block:10px}
.brand img{height:74px;width:auto}
@media (max-width:600px){.brand img{height:56px}}

.nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav a{
  position:relative;
  padding:10px 14px;min-height:44px;display:inline-flex;align-items:center;
  font-size:.905rem;font-weight:500;color:var(--ink-soft);
  text-decoration:none;border-radius:8px;
  transition:color .25s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;
  background:var(--orange);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav a:hover{color:var(--navy-ink)}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--navy-ink);font-weight:600}
.nav a[aria-current="page"]::after{transform:scaleX(1)}

.head-cta{margin-left:14px}
.head-cta .btn{min-height:46px;padding:11px 22px;font-size:.88rem}

.burger{
  display:none;margin-left:auto;
  width:46px;height:46px;flex:none;
  align-items:center;justify-content:center;
  background:none;border:1.5px solid rgba(27,82,117,.22);border-radius:10px;
  cursor:pointer;color:var(--navy);
}
.burger span{display:block;width:19px;height:1.8px;background:currentColor;position:relative;border-radius:2px;transition:.3s var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:1.8px;background:currentColor;border-radius:2px;transition:.3s var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:1040px){
  .burger{display:inline-flex}
  .nav{
    position:fixed;inset:var(--head-h) 0 auto;
    margin:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-md);
    padding:10px clamp(10px,4vw,44px) 26px;
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .4s var(--ease),visibility .4s;
  }
  .nav.is-open{max-height:min(78vh,640px);overflow:auto;visibility:visible}
  .nav a{padding:15px 4px;font-size:1.05rem;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .head-cta{margin:18px 0 0}
  .head-cta .btn{width:100%}
}

/* ---------------------------------------------------------------------
   Demo pill — this is a concept build, say so plainly
   --------------------------------------------------------------------- */
.demo-bar{
  background:var(--navy-ink);color:rgba(255,255,255,.72);
  font-size:.755rem;letter-spacing:.055em;text-transform:uppercase;font-weight:500;
  text-align:center;padding:8px 10px;
}
.demo-bar b{color:#fff;font-weight:600}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero{
  position:relative;
  min-height:clamp(520px,80dvh,820px);
  display:flex;align-items:flex-end;
  background:var(--navy-ink);
  overflow:hidden;
}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:28% 46%}
/* Two layers on purpose. The vertical pass guarantees contrast under the
   headline; the horizontal pass darkens the text column only, so the right
   of the frame — where the subject usually sits — stays open and readable
   as a picture. A single bottom-up gradient left the eyebrow sitting on
   pale sky at roughly 1.9:1, which fails outright. */
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(12,39,57,.74) 0%,rgba(12,39,57,.40) 44%,rgba(12,39,57,.04) 76%,rgba(12,39,57,.18) 100%),
    linear-gradient(to top,rgba(12,39,57,.86) 0%,rgba(12,39,57,.48) 30%,rgba(12,39,57,.08) 60%,rgba(12,39,57,.30) 100%);
}
.hero__in{position:relative;z-index:2;width:100%;padding-block:clamp(44px,6vw,84px)}
.hero h1{color:#fff;margin-bottom:.36em;max-width:none;text-shadow:0 2px 26px rgba(8,26,38,.42)}
.hero .lede{color:rgba(255,255,255,.9);max-width:none;text-shadow:0 1px 16px rgba(8,26,38,.42)}
.hero .eyebrow{color:#fff;text-shadow:0 1px 12px rgba(8,26,38,.6)}
.hero .eyebrow::before{background:var(--orange)}

/* Compact hero for interior pages */
.hero--page{min-height:clamp(360px,54dvh,540px)}
.hero--page h1{font-size:clamp(2.45rem,1.6rem + 3.8vw,4.3rem)}

/* Scroll cue */
.hero__cue{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
  z-index:3;color:rgba(255,255,255,.55);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
}
.hero__cue svg{width:15px;height:15px;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(6px);opacity:1}}
@media (prefers-reduced-motion:reduce){.hero__cue svg{animation:none}}
@media (max-width:760px){.hero__cue{display:none}}

/* ---------------------------------------------------------------------
   Section headers + prose
   Text flows the FULL container width. The only capped block is a
   deliberately centred intro, which stays tidy per the house rule.
   --------------------------------------------------------------------- */
.sec-head{margin-bottom:clamp(32px,3.6vw,56px)}
.sec-head h2{margin-bottom:.34em}
.sec-head .lede{max-width:none}

.sec-head--centred{text-align:center;max-width:660px;margin-inline:auto}
.sec-head--centred .eyebrow{justify-content:center}

.prose > * + h2{margin-top:1.4em}
.prose > * + h3{margin-top:1.6em}
.prose p{max-width:none}

/* Opening paragraph of a story gets a little more presence */
.prose--story > p:first-of-type{
  font-family:var(--font-display);
  font-size:clamp(1.45rem,1.2rem + 1.1vw,2.05rem);
  line-height:1.44;
  color:var(--navy);
}

/* ---------------------------------------------------------------------
   Two-up: text beside an image (an allowed exception to full-width text)
   --------------------------------------------------------------------- */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,4.5vw,72px);
  align-items:center;
}
.split > *{min-width:0}        /* grid children must not blow the track out */
.split--media-first .split__media{order:-1}
.split__media img{
  width:100%;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  aspect-ratio:4/3;object-fit:cover;
}
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .split--media-first .split__media{order:0}
}

/* ---------------------------------------------------------------------
   Looping video in a split panel

   Runs as a constant silent loop with no visible controls (Dom's call).
   WCAG 2.2.2 asks for a way to stop motion lasting over five seconds; the
   accommodation kept here is `prefers-reduced-motion`, which holds the poster
   still and never fetches the video for anyone who has set that preference.
   It is invisible to everyone else. Do not remove it — on a site read by
   people who are ill, exhausted or grieving it is doing real work.
   --------------------------------------------------------------------- */
.split__media{position:relative}
/* Match the video panel to the height of the text beside it.
   Stretching the grid row is better than picking a ratio: a fixed
   aspect-ratio only lines up at one viewport width, and stops lining up the
   moment the copy changes. This tracks it at every width, for free.
   Desktop only — below the split breakpoint the columns stack, a percentage
   height has no parent height to resolve against, and the ratio takes over. */
@media (min-width:901px){
  .split--stretch{align-items:stretch}
  .split--stretch .split__media{display:flex}
  .split--stretch .split__media video{
    height:100%;aspect-ratio:auto;min-height:340px;
  }
}

.split__media video{
  width:100%;display:block;
  /* height:auto is load-bearing. The global `img{height:auto}` reset does not
     cover <video>, so the element's height="720" attribute applied as a
     presentational hint and WON — aspect-ratio only fills in a missing
     dimension, so with both width and height set it was silently ignored and
     the clip rendered 514x720, a portrait crop of 16:9 footage. */
  height:auto;
  aspect-ratio:3/2;object-fit:cover;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  background:var(--cream-deep);
}
/* ---------------------------------------------------------------------
   Pillars — the three-figure motif from the logo, as a colour system
   --------------------------------------------------------------------- */
.pillars{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  gap:clamp(16px,2vw,26px);
}
.pillar{
  min-width:0;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(24px,2.6vw,36px);
  position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.pillar::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--teal)}
.pillar:nth-child(1)::before{background:var(--orange)}
.pillar:nth-child(2)::before{background:var(--teal)}
.pillar:nth-child(3)::before{background:var(--navy)}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.pillar h3{margin-bottom:.42em;font-size:clamp(1.34rem,1.2rem + .5vw,1.62rem)}  /* the global h3 clamp is too big for a three-up card column */
.pillar p{color:var(--ink-soft);margin-bottom:0}
.pillar__icon{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
}
.pillar__icon svg{width:22px;height:22px;stroke-width:1.7}
.pillar:nth-child(1) .pillar__icon{background:var(--orange-wash);color:var(--orange-deep)}
.pillar:nth-child(2) .pillar__icon{background:var(--teal-wash);color:var(--teal-deep)}
.pillar:nth-child(3) .pillar__icon{background:rgba(27,82,117,.09);color:var(--navy)}

/* ---------------------------------------------------------------------
   Experience cards
   --------------------------------------------------------------------- */
.exp-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);   /* four cards: 2x2, never 3 + orphan */
  gap:clamp(16px,2vw,26px);
}
@media (max-width:760px){.exp-grid{grid-template-columns:1fr}}
.exp{
  min-width:0;position:relative;overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--navy-ink);
  display:flex;align-items:flex-end;
  min-height:clamp(300px,32vw,440px);
  text-decoration:none;color:#fff;
  isolation:isolate;
}
/* A card background can be a still or a looping clip — same box, same
   treatment, so the two sit side by side in the grid without one reading as
   a different component. */
.exp img,.exp video{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.exp::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(12,39,57,.93) 6%,rgba(12,39,57,.52) 46%,rgba(12,39,57,.12) 100%);
}
.exp:hover img,.exp:hover video{transform:scale(1.06)}
.exp__body{padding:clamp(22px,2.4vw,32px);width:100%}
.exp__body h3{color:#fff;margin-bottom:.35em;font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem)}
.exp__body p{color:rgba(255,255,255,.8);font-size:.955rem;margin-bottom:0}
.exp__tag{
  display:inline-block;margin-bottom:14px;
  font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy-ink);background:var(--orange);
  padding:5px 11px;border-radius:999px;
}

/* ---------------------------------------------------------------------
   Quote band
   --------------------------------------------------------------------- */
.quote-band{position:relative;overflow:hidden;background:var(--navy-ink)}
.quote-band__media{position:absolute;inset:0}
.quote-band__media img{width:100%;height:100%;object-fit:cover;opacity:.62}
.quote-band__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(12,39,57,.88) 10%,rgba(12,39,57,.46) 62%,rgba(12,39,57,.74) 100%);
}
.quote-band .wrap{position:relative;z-index:2}
.quote{
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  font-size:clamp(1.85rem,1.25rem + 2.9vw,3.5rem);
  line-height:1.18;color:#fff;margin:0;
  letter-spacing:-.015em;
  max-width:none;
}
.quote__mark{
  display:block;font-size:3.4rem;line-height:.5;color:var(--orange);
  margin-bottom:.28em;font-family:var(--font-display);
}
.quote-cite{
  margin-top:26px;font-size:.85rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--teal);font-weight:600;
}

/* ---------------------------------------------------------------------
   Steps — how a referral works
   --------------------------------------------------------------------- */
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:clamp(18px,2.4vw,32px);
  counter-reset:step;
}
.step{min-width:0;position:relative;padding-top:24px}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--font-display);
  font-size:2.6rem;line-height:1;color:var(--teal);
  display:block;margin-bottom:14px;
}
.step::after{
  content:"";position:absolute;top:0;left:0;right:14px;height:2px;
  background:linear-gradient(to right,var(--teal),rgba(69,184,203,.12));
}
.step h3{font-size:clamp(1.22rem,1.12rem + .35vw,1.4rem);margin-bottom:.4em}
.step p{color:var(--ink-soft);font-size:.965rem;margin-bottom:0}
.surface-navy .step::before{color:var(--orange)}
.surface-navy .step p{color:rgba(255,255,255,.74)}
.surface-navy .step::after{background:linear-gradient(to right,var(--orange),rgba(247,148,29,.12))}

/* ---------------------------------------------------------------------
   Trustees

   Four people auto-fitting into a three-up grid orphans the fourth card.
   Chris is the founder and the charity is his and Sarah's story, so he
   takes a feature row and the other three sit three-across underneath:
   1 + 3 rather than 3 + 1, and the hierarchy is true rather than cosmetic.

   Boxless on purpose. The pillar cards elsewhere are boxed; portraits
   read as photography, not as UI, when they are not sitting in a panel.
   --------------------------------------------------------------------- */
.trustee-portrait{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--cream-deep);
  box-shadow:var(--shadow-md);
}
.trustee-portrait img{
  width:100%;height:100%;object-fit:cover;object-position:center 22%;
  filter:grayscale(1) contrast(1.03);
}
/* A breath of the navy so the monochrome portraits sit inside the palette
   rather than beside it. multiply, not difference — difference inverts on a
   dark surface and this block also runs on cream. */
.trustee-portrait::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(27,82,117,.20),rgba(69,184,203,.05));
  mix-blend-mode:multiply;
}

.trustee-lead{
  display:grid;
  grid-template-columns:minmax(0,clamp(260px,28vw,360px)) minmax(0,1fr);
  gap:clamp(26px,4vw,64px);
  align-items:center;
  padding-bottom:clamp(38px,4.5vw,64px);
  margin-bottom:clamp(38px,4.5vw,64px);
  border-bottom:1px solid var(--line);
}
.trustee-lead > *{min-width:0}
.trustee-lead .trustee-portrait{aspect-ratio:3/4}
.trustee-lead h2{font-size:clamp(1.9rem,1.4rem + 2vw,2.9rem);margin-bottom:.18em}
.trustee-lead p:not(.trustee__role){font-size:clamp(1.05rem,1rem + .32vw,1.2rem);color:var(--ink-soft)}
@media (max-width:820px){
  .trustee-lead{grid-template-columns:1fr;gap:26px}
  .trustee-lead .trustee-portrait{aspect-ratio:4/3;max-width:420px}
}

.trustees{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,3vw,46px);
}
@media (max-width:880px){.trustees{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.trustees{grid-template-columns:1fr}}

.trustee{
  min-width:0;
  display:flex;flex-direction:column;
  background:none;border:0;padding:0;
}
.trustee .trustee-portrait{aspect-ratio:4/5;margin-bottom:22px}
.trustee h2{margin-bottom:.26em;font-size:clamp(1.4rem,1.25rem + .55vw,1.72rem)}
.trustee p{color:var(--ink-soft);font-size:.985rem;margin-bottom:0}

/* The role sits under a short rule that carries the logo's three colours —
   the same orange / teal / navy motif used by the pillar cards. */
.trustee__role{
  font-size:.735rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-deep);margin:0 0 18px;
  padding-top:18px;position:relative;
}
.trustee__role::before{
  content:"";position:absolute;top:0;left:0;
  width:34px;height:2px;border-radius:2px;background:var(--teal);
}
.trustee-lead .trustee__role::before{background:var(--orange)}
.trustees .trustee:nth-child(1) .trustee__role::before{background:var(--teal)}
.trustees .trustee:nth-child(2) .trustee__role::before{background:var(--navy)}
.trustees .trustee:nth-child(3) .trustee__role::before{background:var(--orange)}

/* Says plainly that the faces are placeholders. These are four real, named
   people — a generated likeness beside a real name must never read as their
   actual photograph. */
.photo-note{
  margin-top:clamp(28px,3vw,44px);
  font-size:.83rem;color:var(--ink-mute);font-style:italic;
}

/* ---------------------------------------------------------------------
   Supporters — the honest empty state

   The charity has no supporters yet. A row of placeholder logos or invented
   names would be a lie on a page whose whole purpose is credit, so the page
   says so plainly and asks. Replace this block with the logo grid the moment
   there are real names to put in it.
   --------------------------------------------------------------------- */
.supporters-empty{
  background:var(--cream);
  border:1px dashed var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(30px,4vw,56px);
  text-align:center;
  max-width:720px;margin-inline:auto;
}
.supporters-empty__mark{
  width:60px;height:60px;border-radius:50%;
  margin:0 auto 22px;display:flex;align-items:center;justify-content:center;
  background:var(--orange-wash);color:var(--orange-deep);
}
.supporters-empty__mark svg{width:28px;height:28px}
.supporters-empty h3{margin-bottom:.5em}
.supporters-empty p{color:var(--ink-soft)}
.supporters-empty .btn-row{justify-content:center}

/* ---------------------------------------------------------------------
   Stat strip
   --------------------------------------------------------------------- */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:clamp(20px,3vw,40px);
}
.stat{min-width:0}
.stat__fig{
  font-family:var(--font-display);
  font-size:clamp(2.2rem,1.6rem + 2.4vw,3.4rem);
  line-height:1;color:var(--orange);margin-bottom:10px;
  letter-spacing:-.02em;
}
.surface-navy .stat__fig{color:var(--teal)}
.stat p{font-size:.95rem;color:var(--ink-soft);margin:0}
.surface-navy .stat p{color:rgba(255,255,255,.72)}

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.form-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(22px,3vw,44px);
  box-shadow:var(--shadow-sm);
}
.field-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:20px;
}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-size:.855rem;font-weight:600;color:var(--navy-ink)}
.field label .req{color:var(--orange-deep)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:1rem;color:var(--ink);
  background:var(--cream);
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:13px 15px;min-height:50px;
  width:100%;
  transition:border-color .25s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease);
}
.field textarea{min-height:132px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--teal);background:var(--paper);
  box-shadow:0 0 0 4px rgba(69,184,203,.16);
}
.field .hint{font-size:.8rem;color:var(--ink-mute);line-height:1.5}

.consent{
  display:flex;gap:13px;align-items:flex-start;
  background:var(--teal-wash);
  border:1px solid rgba(42,147,166,.22);
  border-radius:12px;padding:16px 18px;
  grid-column:1/-1;
}
.consent input{
  width:24px;height:24px;min-height:0;flex:none;margin-top:1px;
  accent-color:var(--teal-deep);cursor:pointer;
}
.consent label{cursor:pointer}
.consent label{font-size:.875rem;font-weight:400;color:var(--ink-soft);line-height:1.55}

.form-note{
  margin-top:22px;font-size:.83rem;color:var(--ink-mute);
  display:flex;gap:10px;align-items:flex-start;
}
.form-note svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--teal-deep)}

.form-status{
  margin-top:20px;padding:15px 18px;border-radius:12px;
  font-size:.92rem;display:none;
}
.form-status.is-shown{display:block}
.form-status--ok{background:var(--teal-wash);color:var(--navy-ink);border:1px solid rgba(42,147,166,.3)}

/* ---------------------------------------------------------------------
   Callout / notice
   --------------------------------------------------------------------- */
.notice{
  border-left:4px solid var(--orange);
  background:var(--orange-wash);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:20px 24px;
}
.notice h2,.notice h3,.notice h4{margin-bottom:.4em;font-size:clamp(1.2rem,1.1rem + .4vw,1.42rem);line-height:1.28}
.notice p{margin-bottom:0;color:var(--ink-soft);font-size:.96rem}
.surface-navy .notice{background:rgba(255,255,255,.06);border-left-color:var(--teal)}
.surface-navy .notice p{color:rgba(255,255,255,.76)}

/* ---------------------------------------------------------------------
   FAQ
   --------------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:22px 44px 22px 0;position:relative;
  font-family:var(--font-display);
  font-size:clamp(1.25rem,1.12rem + .55vw,1.55rem);
  color:var(--navy-ink);line-height:1.28;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;
  width:11px;height:11px;margin-top:-7px;
  border-right:2px solid var(--teal-deep);border-bottom:2px solid var(--teal-deep);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq summary:hover{color:var(--teal-deep)}
.faq .faq__a{padding:0 0 24px;color:var(--ink-soft)}
.faq .faq__a p{max-width:none}

/* ---------------------------------------------------------------------
   CTA band
   --------------------------------------------------------------------- */
.cta-band{position:relative;overflow:hidden;background:var(--navy-ink)}
.cta-band__media{position:absolute;inset:0}
.cta-band__media img{width:100%;height:100%;object-fit:cover;opacity:.5}
.cta-band__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(12,39,57,.88),rgba(18,58,84,.6));
}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{color:#fff}
.cta-band .lede{color:rgba(255,255,255,.8);max-width:none}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-foot{background:var(--navy-ink);color:rgba(255,255,255,.68);padding-top:clamp(52px,6vw,84px)}
.foot-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:clamp(28px,3.4vw,52px);
}
.foot-top > *{min-width:0}
@media (max-width:940px){.foot-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-top{grid-template-columns:1fr}}

.foot-brand img{height:96px;width:auto;margin-bottom:20px}
.foot-brand p{font-size:.93rem;color:rgba(255,255,255,.62);margin-bottom:0}

.foot-col h2{
  font-family:var(--font-body);
  font-size:.735rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--teal);margin-bottom:16px;
}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.foot-col a{
  color:rgba(255,255,255,.68);text-decoration:none;font-size:.93rem;
  display:inline-flex;align-items:center;min-height:40px;
  transition:color .25s var(--ease);
}
.foot-col a:hover{color:var(--orange)}

/* ---------------------------------------------------------------------
   Footer review call-out + the feedback page

   The concept site goes to the client to mark up, so the route to "tell us
   what to change" has to be impossible to miss from any page — hence a full
   banner above the footer bottom bar rather than a link buried in a column.
   --------------------------------------------------------------------- */
.foot-review{
  margin-top:clamp(40px,5vw,64px);
  padding:clamp(22px,2.6vw,30px) clamp(22px,3vw,34px);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-lg);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:18px 28px;
}
.foot-review__text{min-width:0;display:flex;flex-direction:column;gap:4px}
.foot-review__text strong{
  color:#fff;font-size:1.02rem;font-weight:600;letter-spacing:.005em;
}
.foot-review__text span{color:rgba(255,255,255,.62);font-size:.93rem;line-height:1.5}
.foot-review__btn{flex:none}
@media (max-width:620px){
  .foot-review{flex-direction:column;align-items:stretch;text-align:left}
  .foot-review__btn{width:100%}
}

.hero--short{min-height:clamp(300px,42dvh,430px)}

.fb-grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,4vw,64px);align-items:start;
}
@media (max-width:940px){.fb-grid{grid-template-columns:1fr}}
.fb-intro h2{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.4rem)}
.fb-intro p{color:var(--ink-soft)}

.hint-inline{font-weight:400;color:var(--ink-mute);font-size:.86em}

.form-error{
  background:var(--orange-wash);
  border-left:4px solid var(--orange);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:14px 18px;margin-bottom:24px;
  font-size:.95rem;color:var(--ink);
}

/* Honeypot. Clipped rather than display:none — a bot that skips hidden fields
   still sees this one in the DOM and fills it in. Clipped rather than
   left:-9999px too: a negative offset widens the document and shows up as real
   horizontal overflow (the layout audit caught exactly that), which only
   body{overflow-x:hidden} was papering over. Same fix as .skip. */
.hp-field{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}

.fb-done{text-align:center;max-width:620px;margin-inline:auto}
.fb-done__tick{
  width:66px;height:66px;border-radius:50%;
  margin:0 auto 22px;display:flex;align-items:center;justify-content:center;
  background:var(--teal-wash);color:var(--teal-deep);
}
.fb-done__tick svg{width:30px;height:30px}
.fb-done .btn-row{justify-content:center}

.foot-bot{
  margin-top:clamp(40px,5vw,64px);padding-block:24px;
  border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 26px;align-items:center;
  font-size:.78rem;color:rgba(255,255,255,.38);
}
.foot-bot a{color:rgba(255,255,255,.55);text-decoration:none;display:inline-flex;align-items:center;min-height:40px}
.foot-bot a:hover{color:var(--orange)}
.foot-bot .demo-note{color:rgba(255,255,255,.38)}

/* "Site by CREATE" — official mark + wordmark, both in CREATE green.
   Scoped under .foot-bot and placed AFTER the rules above on purpose: at
   equal specificity source order decides, and `.foot-bot a:hover{color:orange}`
   would otherwise turn the CREATE credit orange on hover. */
.ftr-credit{
  display:inline-flex;align-items:baseline;gap:10px;
  color:rgba(255,255,255,.38);
}
.foot-bot .ftr-credit a{
  display:inline-flex;align-items:baseline;gap:8px;
  color:var(--create-green);
  transition:opacity .3s var(--ease);
}
.foot-bot .ftr-credit a:hover{color:var(--create-green);opacity:.72}
.ftr-credit .create-mark{
  height:23px;width:auto;flex:none;
  color:var(--create-green);
}
.ftr-credit b{
  font-family:"Barlow Condensed","Inter",sans-serif;
  font-weight:800;font-size:1.28rem;line-height:1;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--create-green);
}

/* ---------------------------------------------------------------------
   Scroll reveal
   --------------------------------------------------------------------- */
/* Content is visible by DEFAULT and only hidden once JS has proved it is
   running (site.js stamps .js on <html> as its first statement). Hiding first
   and revealing later means any JS failure — a blocked file, a parse error,
   an observer that never fires — leaves the whole page blank. */
.reveal{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* Skip link */
.skip{
  position:absolute;left:0;top:0;z-index:200;
  transform:translateY(-140%);
  background:var(--navy-ink);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;
  transition:transform .2s var(--ease);
}
.skip:focus{transform:none}