/* ==========================================================================
   Call to Freedom - "First Light" design system
   Design by The Agency
   ========================================================================== */

:root{
  --mark:url("img/ctf-watermark.png");
  /* Color */
  --blue:#0064A8;          /* official brand blue, from the CTF colour palette */
  --blue-deep:#004E85;
  --night:#003047;         /* official brand navy, from the CTF colour palette */
  --night-2:#04233B;
  --dusk:#0A4571;
  --dusk-line:#145C93;
  --amber:#DB6D27;         /* official brand orange, from the CTF colour palette */
  --amber-deep:#B45518;    /* darkened brand orange: #DB6D27 only reaches 3.2:1 on white,
                              so small text and buttons on light grounds use this instead */
  --sky:#8DCAE6;           /* official brand light blue */
  --gold:#FDB714;          /* official palette */
  --gold-lt:#FEED74;       /* official palette */
  --grey-lt:#DDDDDE;       /* official palette */
  --grey:#7F8080;          /* official palette */
  --amber-lt:#EFAE7E;      /* accessible warm label tint for small text on dark blue */
  --linen:#F4F4F6;
  --linen-2:#E9E3DE;
  --ink:#22303F;
  --ink-soft:#4E5D6E;
  --white:#FFFFFF;
  --alert:#A32B22;

  /* Type */
  --display:"Mulish","Helvetica Neue",Arial,sans-serif;
  --body:"Mulish","Helvetica Neue",Arial,sans-serif;

  /* Scale */
  --wrap:1200px;
  --wrap-narrow:820px;
  --gut:clamp(20px,5vw,48px);
  --sect:clamp(64px,9vw,120px);
  --radius:4px;
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

body{
  margin:0;
  background:var(--linen);
  color:var(--ink);
  font-family:var(--body);
  font-size:18px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

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

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

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.wrap-narrow{width:100%;max-width:var(--wrap-narrow);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}

.skip{position:absolute;left:-9999px;top:0;background:var(--amber);color:var(--night);padding:12px 18px;font-weight:700;z-index:2000}
.skip:focus{left:8px;top:8px}

/* --------------------------------------------------------------- Typography */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  color:var(--blue);
  line-height:1.1;
  letter-spacing:-.01em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{
  font-size:clamp(2.15rem,5.2vw,3.9rem);
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:.005em;
  line-height:1.06;
}
h2{font-weight:800}
h2{font-size:clamp(2rem,4.2vw,3.1rem)}
h3{font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.2}
h4{font-size:1.12rem;line-height:1.3}
p{margin:0 0 1.1em;max-width:68ch}
.lede{font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.55;color:var(--ink-soft)}

.eyebrow{
  font-family:var(--body);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--amber-deep);
  margin:0 0 18px;
  display:block;
}
.on-night .eyebrow{color:var(--amber)}
.on-night,.sect-night{background:var(--night);color:#D9E8F2}
.on-night h1,.on-night h2,.on-night h3,.on-night h4,
.give h1,.give h2,.give h3,.give h4,
.pagehead h1,.pagehead h2,.pagehead h3,.pagehead h4{color:var(--white)}
.hero h1,.hero h2,.hero h3,.hero h4{color:var(--blue)}
.on-night .lede,.give .lede,.pagehead .lede{color:#B0CAE0}
.hero .lede{color:var(--ink);font-weight:400}
.on-night p,.give p,.pagehead p{color:#C2D6E6}
.give .eyebrow,.pagehead .eyebrow{color:var(--amber)}
.hero .eyebrow{color:var(--amber-deep)}

/* --------------------------------------------------------------- Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--body);font-size:1rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  padding:16px 28px;border:2px solid transparent;border-radius:var(--radius);
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-give{background:var(--amber-deep);color:#fff;border-color:var(--amber-deep)}
.btn-give:hover{background:#93440F;border-color:#93440F}
.btn-help{background:var(--white);color:var(--night);border-color:var(--white)}
.btn-help:hover{background:transparent;color:var(--white)}
.btn-ghost{background:transparent;color:var(--blue);border-color:var(--blue);}
.btn-ghost:hover{background:var(--blue);color:#fff}
.on-night .btn-ghost,.give .btn-ghost,.pagehead .btn-ghost,.hero-x .btn-ghost{color:var(--white);border-color:#3D7BA5}
.on-night .btn-ghost:hover,.give .btn-ghost:hover,.pagehead .btn-ghost:hover{background:var(--white);color:var(--night);border-color:var(--white)}
.btn-sm{padding:11px 18px;font-size:.82rem}
.btn-block{width:100%}

/* --------------------------------------------------------------- Safety bar */
.safety{
  background:var(--night-2);color:#E4EFF7;
  font-size:.92rem;position:relative;z-index:60;
  border-bottom:1px solid #223057;
}
/* matches the header so the two bars share one edge-to-edge alignment */
.safety-in{
  display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;
  flex-wrap:wrap;padding-top:8px;padding-bottom:8px;
  max-width:none;width:100%;
  padding-left:clamp(20px,3vw,52px);padding-right:clamp(20px,3vw,52px);
}
.safety-help{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.safety-help strong{color:var(--white);font-weight:700}
.safety-help a.tel{color:var(--amber);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(232,163,61,.45)}
.safety-help a.tel:hover{border-bottom-color:var(--amber)}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--amber);flex:none;box-shadow:0 0 0 0 rgba(232,163,61,.7);animation:pulse 2.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(232,163,61,0)}100%{box-shadow:0 0 0 0 rgba(232,163,61,0)}}
.exit-btn{
  background:var(--alert);color:#fff;border:0;border-radius:var(--radius);
  font-family:var(--body);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
}
.exit-btn:hover{background:#8F2C23}
.exit-note{font-size:.78rem;color:#89ADC8;letter-spacing:.02em}

/* --------------------------------------------------------------- Header */
.masthead{background:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid #E1E3E6;box-shadow:0 1px 0 rgba(0,48,71,.04)}
/* The header runs the full width of the viewport rather than sitting inside the
   1200px measure, so the logo holds the far left and the navigation the far
   right. With nine items plus a call to action, the extra room matters. */
.masthead-in{
  display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:96px;
  max-width:none;width:100%;
  padding-left:clamp(20px,3vw,52px);padding-right:clamp(20px,3vw,52px);
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand-img{height:64px;width:auto;display:block}
.foot .brand-img{height:70px}
.brand-mark{width:34px;height:34px;flex:none}
.brand-name{font-family:var(--display);font-size:1.24rem;font-weight:800;color:var(--white);text-transform:uppercase;letter-spacing:.01em;line-height:1.05}
.brand-sub{display:block;font-family:var(--body);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sky);font-weight:700;margin-top:3px}

.nav{display:flex;align-items:center;gap:4px}
.nav a{
  color:var(--ink);text-decoration:none;font-size:.98rem;font-weight:700;
  padding:10px 12px;border-radius:var(--radius);white-space:nowrap;
  transition:color .15s ease,background .15s ease;
}
.nav a:hover{color:var(--blue);background:#EAF3FA}
.nav a[aria-current="page"]{color:var(--amber-deep)}
.nav a.btn-give{color:#fff}
.nav a.btn-give:hover{color:#fff;background:#93440F}
.nav a.nav-cta{font-size:.9rem}
.nav-cta{margin-left:10px}

.menu-toggle{display:none;background:transparent;border:1.5px solid var(--blue);color:var(--blue);border-radius:var(--radius);padding:10px 14px;font-family:var(--body);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}

@media (max-width:1279px){
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    background:#fff;flex-direction:column;align-items:stretch;
    padding:14px var(--gut) 26px;gap:2px;border-bottom:3px solid var(--amber);
    box-shadow:0 18px 36px rgba(0,48,71,.14);
  }
  .nav.open{display:flex}
  .nav a{padding:14px 4px;font-size:1.05rem;border-bottom:1px solid #E7E9EC}
  .nav-cta{margin:16px 0 0}
  .menu-toggle{display:inline-flex}
  .masthead{position:relative}
}

/* --------------------------------------------------------------- Hero */
.hero{position:relative;background:var(--linen);overflow:hidden;color:var(--ink);isolation:isolate}
.hero-photo{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:20% 50%;
}
/* Scrim: opaque enough on the left to carry blue type, clearing to the right
   so the light and the subject stay visible. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,
      rgba(246,246,248,.985) 0%,
      rgba(245,244,245,.97) 30%,
      rgba(246,243,240,.88) 44%,
      rgba(247,240,231,.55) 56%,
      rgba(250,238,222,.16) 70%,
      rgba(255,240,220,0) 84%),
    linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 22%);
}
.hero-in{z-index:2}
@media (max-width:900px){
  /* A 16:9 photo cannot fill a tall narrow box without destroying the composition,
     so on small screens it becomes its own band above the headline. */
  .hero-photo{
    position:relative;inset:auto;width:100%;height:clamp(180px,42vw,240px);
    background-position:62% 46%;
  }
  .hero::before{display:none}
  .hero-in{padding-top:clamp(34px,7vw,52px)}
}
.hero-in{position:relative;padding-top:clamp(72px,11vw,132px);padding-bottom:clamp(56px,7vw,84px)}
.hero h1{max-width:none;margin-bottom:.28em;font-size:clamp(1.9rem,4.55vw,3.52rem);text-wrap:wrap}
.lb{display:none}
@media (min-width:900px){.lb{display:block}}
.hero h1 em{font-style:normal;color:var(--amber);}
.hero .lede{max-width:none;font-size:clamp(1.02rem,1.85vw,1.4rem);color:var(--ink);line-height:1.45}
.lb2{display:none}
@media (min-width:1000px){.lb2{display:block}}
.hero-verse{
  margin:26px 0 30px;padding-left:22px;border-left:3px solid var(--amber-deep);
  font-family:var(--display);font-size:clamp(1.15rem,1.9vw,1.42rem);font-weight:400;
  color:var(--amber-deep);max-width:36ch;line-height:1.55;
}
.hero-verse cite{display:block;font-style:normal;font-family:var(--body);font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-deep);margin-top:12px}

/* Routing cards */
.routes{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--dusk-line);margin-top:clamp(40px,5vw,60px);box-shadow:0 18px 50px rgba(15,42,74,.18)}
.route{
  background:var(--dusk);padding:32px 28px 30px;text-decoration:none;color:#fff;
  display:flex;flex-direction:column;gap:8px;transition:background .2s ease;position:relative;
}
.route:hover{background:#0B5288}
.route-k{font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber-lt)}
.route h3{margin:0;font-size:1.45rem;color:#fff}
.route p{margin:0;font-size:.95rem;color:#B0CAE0;line-height:1.5;max-width:none}
.route-go{margin-top:14px;font-weight:700;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;color:var(--white);display:flex;align-items:center;gap:8px}
.route-go span{transition:transform .2s ease}
.route:hover .route-go span{transform:translateX(5px)}
.route-primary{background:var(--blue-deep)}
@media (max-width:880px){.routes{grid-template-columns:1fr}}

/* --------------------------------------------------------------- Sections */
.sect{padding-top:var(--sect);padding-bottom:var(--sect)}
.sect-tight{padding-top:clamp(48px,6vw,76px);padding-bottom:clamp(48px,6vw,76px)}
.sect-linen{background:var(--linen)}
.sect-sand{background:var(--linen-2)}
.sect-white{background:#fff}
.sect-night{background:var(--night);color:#C2D6E6}

.two-col,.two-col-lead{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.two-col-lead{grid-template-columns:.82fr 1.18fr}
@media (max-width:860px){.two-col,.two-col-lead{grid-template-columns:1fr}}

/* --------------------------------------------------------------- Stat band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--dusk-line)}
.stat{background:var(--night);padding:34px 26px}
.stat-n{font-family:var(--display);font-size:clamp(2.4rem,4.6vw,3.4rem);font-weight:600;color:var(--amber);line-height:1;}
.stat-l{font-size:.98rem;color:#C2D6E6;margin:14px 0 8px;line-height:1.45;max-width:none}
.stat-src{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#7BA3C0}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.stats{grid-template-columns:1fr}}

/* --------------------------------------------------------------- The Path (signature) */
.path{position:relative;padding-top:clamp(36px,4vw,52px)}
.path-track{position:relative;margin-top:34px}
.path-line{position:absolute;left:0;right:0;top:26px;height:2px;background:#0D4165}
.path-line::after{
  content:"";position:absolute;left:0;top:0;height:100%;width:var(--lit,0%);
  background:linear-gradient(90deg,var(--amber-deep),var(--amber));
  transition:width 1.5s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 0 18px rgba(220,108,39,.55);
}

/* A light that travels the continuum, left to right, on a loop.
   Driven by background-position rather than a translated element, so nothing
   overflows the track and no clipping is required. */
.path-track::after{
  content:"";position:absolute;left:0;right:0;top:25px;height:4px;
  border-radius:2px;pointer-events:none;opacity:0;z-index:3;
  background-repeat:no-repeat;
  background-size:32% 100%;
  background-image:linear-gradient(90deg,
    rgba(220,108,39,0) 0%,
    rgba(220,108,39,.55) 32%,
    rgba(255,206,158,.95) 47%,
    #FFF4E8 52%,
    rgba(255,206,158,.95) 57%,
    rgba(220,108,39,.55) 70%,
    rgba(220,108,39,0) 100%);
}
.path-track.moving::after{animation:pathSweep 4.2s linear infinite}

@keyframes pathSweep{
  0%   {background-position:0% 0;   opacity:0}
  10%  {opacity:1}
  88%  {opacity:1}
  100% {background-position:100% 0; opacity:0}
}

/* Each stop brightens as the light reaches it. Each delay is that stop's
   position along the track multiplied by the sweep duration. */
@keyframes dotPing{
  0%,100%{box-shadow:0 0 0 5px rgba(220,108,39,.18),0 0 22px rgba(220,108,39,.6);transform:scale(1)}
  5%{box-shadow:0 0 0 9px rgba(220,108,39,.34),0 0 34px rgba(220,108,39,.95);transform:scale(1.22)}
  14%{box-shadow:0 0 0 5px rgba(220,108,39,.18),0 0 22px rgba(220,108,39,.6);transform:scale(1)}
}
.path-track.moving .path-stop.lit .path-dot{animation:dotPing 4.2s linear infinite}
.path-track.moving .path-stop:nth-child(1) .path-dot{animation-delay:0s}
.path-track.moving .path-stop:nth-child(2) .path-dot{animation-delay:.59s}
.path-track.moving .path-stop:nth-child(3) .path-dot{animation-delay:1.17s}
.path-track.moving .path-stop:nth-child(4) .path-dot{animation-delay:1.76s}
.path-track.moving .path-stop:nth-child(5) .path-dot{animation-delay:2.34s}
.path-track.moving .path-stop:nth-child(6) .path-dot{animation-delay:2.93s}
.path-track.moving .path-stop:nth-child(7) .path-dot{animation-delay:3.52s}

@media (prefers-reduced-motion:reduce){
  .path-track.moving::after{animation:none;opacity:0}
  .path-track.moving .path-stop.lit .path-dot{animation:none}
}
@media (max-width:1100px){
  .path-track::after{display:none}
  .path-track.moving .path-stop.lit .path-dot{animation:none}
}

.path-stops{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.path-stop h4{font-size:1rem}
.path-stop p{font-size:.85rem}
.path-stop{padding-top:0}
.path-dot{
  width:16px;height:16px;border-radius:50%;background:#22305A;border:2px solid #3B4C7A;
  margin:19px 0 22px;position:relative;transition:background .4s ease,border-color .4s ease,box-shadow .4s ease;
}
.path-stop.lit .path-dot{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 5px rgba(232,163,61,.18),0 0 22px rgba(232,163,61,.6)}
.path-stop h4{color:#fff;font-size:1.05rem;margin-bottom:8px}
.path-stop p{font-size:.9rem;line-height:1.5;color:#A2BFD6;margin:0;max-width:none}
.path-stage{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);display:block;margin-bottom:6px;white-space:nowrap}
@media (max-width:1100px){
  .path-stops{grid-template-columns:repeat(2,1fr);gap:28px}
  .path-line{display:none}
  .path-dot{margin-top:0}
}
@media (max-width:560px){.path-stops{grid-template-columns:1fr}}

/* --------------------------------------------------------------- Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.cards-2{grid-template-columns:repeat(2,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--white);border:1px solid var(--linen-2);border-radius:var(--radius);padding:30px 28px;display:flex;flex-direction:column}
.card h3{margin-bottom:10px}
.card p{font-size:.98rem;margin-bottom:14px}
.card p:last-of-type{margin-bottom:0}
.card-link{margin-top:auto;padding-top:18px;font-weight:700;font-size:.86rem;letter-spacing:.05em;text-transform:uppercase;color:var(--amber-deep);text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.card-link:hover{color:var(--night)}
.card-top{border-top:3px solid var(--amber-deep)}
@media (max-width:980px){.cards,.cards-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cards,.cards-2,.cards-4{grid-template-columns:1fr}}

/* --------------------------------------------------------------- Give block */
.give{background:var(--night);position:relative;overflow:hidden}
.give::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 82% 0%,rgba(232,163,61,.22),rgba(16,26,51,0) 62%)}
.give-in{position:relative}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:38px 0 28px}
.tier{
  background:#083F66;border:1.5px solid #2E3E64;border-radius:var(--radius);
  padding:24px 20px;display:flex;flex-direction:column;gap:8px;text-decoration:none;color:#fff;
  transition:border-color .2s ease,transform .2s ease,background .2s ease;
}
.tier:hover{border-color:var(--amber);transform:translateY(-3px);background:#0A4A78}
.tier-amt{font-family:var(--display);font-size:2rem;font-weight:600;color:var(--amber);line-height:1;}
.tier-cad{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sky);font-weight:700}
.tier p{font-size:.92rem;color:#B0CAE0;margin:4px 0 0;line-height:1.45;max-width:none}
.tier-featured{border-color:var(--amber);background:#0A4A78}
.tier-featured .tier-amt{color:var(--amber-lt)}
.tier-flag{position:absolute;top:-11px;left:20px;background:var(--amber);color:#1A1008;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:2px}
.tier-wrap{position:relative}
@media (max-width:900px){.tiers{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.tiers{grid-template-columns:1fr}}

.give-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.give-fine{font-size:.88rem;color:#8FB0CB;margin-top:22px}
.give-fine a{color:var(--sky)}

/* --------------------------------------------------------------- Lists */
.checklist{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:12px}
.checklist li{position:relative;padding-left:32px;font-size:1rem;line-height:1.55}
.checklist li::before{
  content:"";position:absolute;left:0;top:.55em;width:14px;height:14px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 0 4px rgba(232,163,61,.18);
}
.on-night .checklist li,.give .checklist li{color:#C2D6E6}

.signs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--linen-2);border:1px solid var(--linen-2)}
.sign{background:var(--white);padding:22px 24px}
.sign strong{display:block;font-family:var(--display);font-size:1.05rem;font-weight:800;color:var(--blue);margin-bottom:5px}
.sign span{font-size:.95rem;color:var(--ink-soft);line-height:1.5}
@media (max-width:700px){.signs{grid-template-columns:1fr}}

/* --------------------------------------------------------------- Quote */
.quote{border-left:3px solid var(--amber-deep);padding:6px 0 6px 28px;margin:0}
.quote p{font-family:var(--display);font-size:clamp(1.3rem,2.6vw,1.75rem);line-height:1.4;font-weight:500;margin-bottom:16px;}
.quote cite{font-style:normal;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--amber-deep)}
.on-night .quote cite,.give .quote cite{color:var(--amber)}

/* --------------------------------------------------------------- FAQ */
.faq{border-top:1px solid var(--linen-2)}
.faq details{border-bottom:1px solid var(--linen-2)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:var(--display);font-size:1.15rem;font-weight:700;color:var(--blue);line-height:1.35;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:20px;font-size:1.6rem;color:var(--amber-deep);font-family:var(--body);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .faq-body{padding:0 0 24px}
.faq .faq-body p:last-child{margin-bottom:0}

/* --------------------------------------------------------------- Forms */
.form{display:grid;gap:18px}
.field{display:grid;gap:7px}
.field label{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1rem;padding:14px 15px;
  border:1.5px solid #D5CFC3;border-radius:var(--radius);background:var(--white);color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--amber);outline:none;box-shadow:0 0 0 3px rgba(232,163,61,.22)}
.field textarea{min-height:150px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:600px){.form-row{grid-template-columns:1fr}}
.form-note{font-size:.86rem;color:var(--ink-soft)}

/* --------------------------------------------------------------- Contact strip */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-item strong{display:block;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:8px;font-weight:700}
.contact-item a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(22,32,47,.25)}
.contact-item a:hover{border-bottom-color:var(--ink)}
.on-night .contact-item strong{color:var(--amber)}
.on-night .contact-item a{color:#fff;border-bottom-color:rgba(255,255,255,.3)}

/* --------------------------------------------------------------- Emergency callout */
.urgent{
  background:#FDF1EE;border:1.5px solid #E8C4BC;border-left:5px solid var(--alert);
  border-radius:var(--radius);padding:26px 28px;
}
.urgent h3{margin-bottom:8px;color:#8F2C23}
.urgent p:last-child{margin-bottom:0}
.urgent a{color:#8F2C23;font-weight:700}

/* --------------------------------------------------------------- Page header */
.pagehead{background:var(--night);position:relative;overflow:hidden}
.pagehead::before{content:"";position:absolute;inset:0;background:radial-gradient(100% 90% at 12% 110%,rgba(232,163,61,.28),rgba(16,26,51,0) 60%)}
.pagehead-in{position:relative;padding-top:clamp(56px,7vw,92px);padding-bottom:clamp(48px,6vw,76px)}
.pagehead h1{max-width:18ch}
.pagehead .lede{max-width:58ch}
.crumbs{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);margin-bottom:22px;font-weight:700}
.crumbs a{color:var(--sky);text-decoration:none}
.crumbs a:hover{color:var(--amber)}

/* --------------------------------------------------------------- CTA band */
.cta-band{background:var(--blue);color:#fff}
.cta-band h2{color:#fff;margin-bottom:14px}
.cta-band p{color:#DBEBF8;max-width:60ch}
.cta-band .btn-ghost{border-color:#fff;color:#fff}
.cta-band .btn-ghost:hover{background:#fff;color:var(--blue)}
.cta-flex{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;text-align:center;
}
.cta-flex>div{width:100%}
.cta-band h2{max-width:20ch;margin-left:auto;margin-right:auto}
.cta-band p{margin-left:auto;margin-right:auto;text-align:center}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btn-onamber{background:var(--amber-deep);color:#fff;border-color:var(--amber-deep)}
.btn-onamber:hover{background:#93440F;border-color:#93440F}

/* --------------------------------------------------------------- Footer */
.foot{background:var(--night-2);color:#A2BFD6;padding-top:clamp(56px,7vw,86px);padding-bottom:34px;font-size:.95rem}
.foot a{color:#C7DEED;text-decoration:none}
.foot a:hover{color:var(--amber)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
@media (max-width:940px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot h4{color:#fff;font-family:var(--body);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:16px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.foot p{max-width:38ch;font-size:.93rem}
.foot-brand .brand-name{font-size:1.3rem}
.social{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.social a{width:42px;height:42px;border:1px solid #0D4165;border-radius:50%;
  display:grid;place-items:center;color:#C7DEED;
  transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease}
.social svg{width:19px;height:19px;fill:currentColor;display:block}
.social a:hover{color:#fff;border-color:var(--amber);background:var(--amber);transform:translateY(-2px)}
.foot-bar{margin-top:44px;padding-top:24px;border-top:1px solid #0B3A5A;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.84rem;color:#7BA3C0}
.foot-bar a{color:#7BA3C0}
.trust{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:20px;font-size:.86rem;color:#8FB0CB}
.trust span{border:1px solid #0D4165;border-radius:2px;padding:7px 12px;letter-spacing:.04em}

/* --------------------------------------------------------------- Reveal */
/* Reveal-on-scroll is an enhancement, never a requirement. Content is visible
   by default; only once JavaScript has confirmed it is running does the
   starting state get applied. If the script fails to load for any reason, every
   section still renders. */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}

/* --------------------------------------------------------------- Utilities */
.mb-0{margin-bottom:0}
.mt-32{margin-top:32px}
.mt-48{margin-top:48px}
.center{text-align:left}
.center-true{text-align:center}
.center p,.center .lede{margin-left:auto;margin-right:auto}

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

/* --------------------------------------------------------------- Mobile action bar */
.mobar{display:none}
@media (max-width:760px){
  .mobar{
    display:grid;grid-template-columns:1fr 1fr;gap:0;
    position:fixed;left:0;right:0;bottom:0;z-index:80;
    box-shadow:0 -6px 24px rgba(8,14,30,.35);
  }
  .mobar-1{grid-template-columns:1fr}
  .mobar a{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:16px 10px;text-decoration:none;font-weight:700;font-size:.94rem;
    letter-spacing:.05em;text-transform:uppercase;font-family:var(--body);
  }
  .mobar .mo-help{background:var(--night-2);color:#fff;border-top:3px solid var(--amber)}
  .mobar .mo-give{background:var(--amber-deep);color:#fff;border-top:3px solid var(--amber)}
  body{padding-bottom:0}
  .foot{padding-bottom:100px}
  .safety-in{min-height:auto}
  .exit-note{display:none}
}

/* --------------------------------------------------------------- Section photo
   A photograph faded into the lower left of a light section. The mask dissolves
   it into the section background so no edge or box is visible, and the section
   colour is untouched everywhere else. */
.has-photo{position:relative;overflow:hidden}
.has-photo>.wrap,.has-photo>.wrap-narrow{position:relative;z-index:2}
.sect-photo{
  position:absolute;left:0;bottom:0;z-index:1;pointer-events:none;
  width:min(44%,600px);height:100%;
  background-image:url("img/problem-quiet.jpg");
  background-size:cover;background-position:48% 28%;
  opacity:.58;
  filter:grayscale(.22) contrast(.95) brightness(1.02);
  -webkit-mask-image:radial-gradient(68% 54% at 16% 66%,
      #000 0%, rgba(0,0,0,.88) 22%, rgba(0,0,0,.50) 46%, rgba(0,0,0,.16) 68%, transparent 86%);
  mask-image:radial-gradient(68% 54% at 16% 66%,
      #000 0%, rgba(0,0,0,.88) 22%, rgba(0,0,0,.50) 46%, rgba(0,0,0,.16) 68%, transparent 86%);
}
@media (max-width:900px){.sect-photo{display:none}}
@media (prefers-reduced-motion:no-preference){
  .sect-photo{transition:opacity .8s ease}
}

/* --------------------------------------------------------------- Wide section photo
   Full-bleed landscape dissolved into a light section. Masked top and bottom so it
   has no edges, and held low enough that the cards and type stay fully legible. */
.sect-photo-wide{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:url("img/horizon.jpg");
  background-size:cover;background-position:center 56%;
  opacity:.50;
  filter:saturate(1.04) contrast(.94) brightness(1.04);
  -webkit-mask-image:linear-gradient(to bottom,
      transparent 0%, rgba(0,0,0,.26) 9%, rgba(0,0,0,.82) 24%, #000 42%,
      rgba(0,0,0,.80) 58%, rgba(0,0,0,.34) 74%, transparent 90%);
  mask-image:linear-gradient(to bottom,
      transparent 0%, rgba(0,0,0,.26) 9%, rgba(0,0,0,.82) 24%, #000 42%,
      rgba(0,0,0,.80) 58%, rgba(0,0,0,.34) 74%, transparent 90%);
}
@media (max-width:900px){
  .sect-photo-wide{
    inset:0 0 auto 0;height:58%;
    background-position:center 48%;opacity:.42;
    -webkit-mask-image:linear-gradient(to bottom,
        rgba(0,0,0,.55) 0%, #000 26%, rgba(0,0,0,.6) 66%, transparent 96%);
    mask-image:linear-gradient(to bottom,
        rgba(0,0,0,.55) 0%, #000 26%, rgba(0,0,0,.6) 66%, transparent 96%);
  }
}

/* Give section: heading and calls to action sit together on the left,
   supporting copy is centred in its own column. */
/* Give: the calls to action and the legal line below the tiers are centred. */
.give .give-actions{justify-content:center}
.give .give-fine.center{max-width:76ch;margin-left:auto;margin-right:auto}

/* ==========================================================================
   EDITORIAL SYSTEM
   A second layout language for interior pages. Same tokens as the home page,
   different structure: hairline rules, large numerals, asymmetric measures,
   and generous space instead of cards and grids.
   ========================================================================== */

/* --- Editorial masthead ------------------------------------------------- */
.ed-open{background:var(--linen);position:relative;overflow:hidden}
.ed-open-in{
  padding-top:clamp(52px,7vw,96px);padding-bottom:clamp(44px,5vw,64px);
  position:relative;z-index:2;
}
.ed-kicker{
  font-size:.74rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--amber-deep);display:flex;align-items:baseline;gap:14px;margin:0 0 30px;
}
.ed-kicker span{color:var(--ink-soft);letter-spacing:.12em;font-weight:700}
@media (max-width:620px){
  .ed-kicker{flex-direction:column;gap:8px;margin-bottom:22px}
}
.ed-h1{
  font-size:clamp(2.1rem,5.1vw,4rem);font-weight:800;line-height:1.04;
  letter-spacing:-.02em;color:var(--blue);margin:0;max-width:17ch;text-transform:none;
}
.ed-h1 em{font-style:normal;color:var(--amber-deep)}
.ed-standfirst{
  font-size:clamp(1.02rem,1.85vw,1.4rem);line-height:1.45;color:var(--ink);
  max-width:54ch;margin:26px 0 0;
}

/* Hairline rule with a label riding on it */
.ed-rule{
  display:flex;align-items:center;gap:20px;margin:0;
  border-top:1px solid rgba(34,48,63,.16);padding-top:14px;
}
.ed-rule-label{
  font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;
}
.ed-call .ed-rule-label{color:var(--sky)}
.ed-call .ed-rule{border-top-color:rgba(255,255,255,.22)}
.on-night .ed-rule,.sect-night .ed-rule{border-top-color:rgba(255,255,255,.18)}
.on-night .ed-rule-label{color:var(--sky)}

/* --- The call panel: the phone number as the largest thing on the page --- */
.ed-call{
  background:var(--night);color:#fff;position:relative;overflow:hidden;
}
.ed-call::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(84% 120% at 88% 10%,rgba(220,108,39,.26),rgba(0,48,71,0) 62%);
}
.ed-call-in{position:relative;z-index:2;padding-top:clamp(44px,5vw,68px);padding-bottom:clamp(44px,5vw,68px)}
.ed-call-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center}
.ed-number{
  display:inline-block;font-weight:800;letter-spacing:-.02em;line-height:1;
  font-size:clamp(2.3rem,5.2vw,4rem);color:#fff;text-decoration:none;
  border-bottom:3px solid var(--amber);padding-bottom:6px;
  transition:color .2s ease,border-color .2s ease;
}
.ed-number:hover{color:var(--amber);border-color:#fff}
.ed-call-meta{font-size:1.125rem;line-height:1.65;color:#BFD3E6;margin:18px 0 0;max-width:42ch}
.ed-call-aside{border-left:1px solid rgba(255,255,255,.2);padding-left:clamp(20px,3vw,36px)}
.ed-call-aside p{color:#C8DAEA;font-size:1.125rem;line-height:1.65;margin:0 0 14px}
.ed-call-aside p:last-child{margin-bottom:0}
.ed-call-aside strong{color:#fff}
.ed-call-aside a{color:var(--amber);font-weight:700}
@media (max-width:840px){
  .ed-call-grid{grid-template-columns:1fr;gap:30px}
  .ed-call-aside{border-left:0;border-top:1px solid rgba(255,255,255,.2);padding-left:0;padding-top:24px}
}

/* --- Numbered editorial index ------------------------------------------- */
.ed-index{margin:0;padding:0;list-style:none;counter-reset:edi}
.ed-item{
  counter-increment:edi;
  display:grid;grid-template-columns:64px minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(14px,2vw,28px);align-items:start;
  padding:26px 0;border-top:1px solid rgba(34,48,63,.14);
}
.ed-item:last-child{border-bottom:1px solid rgba(34,48,63,.14)}
.ed-item::before{
  content:counter(edi,decimal-leading-zero);
  font-size:1.6rem;font-weight:800;line-height:1;color:var(--amber-deep);
  letter-spacing:-.02em;opacity:.9;
}
.ed-item h3{margin:0;font-size:1.18rem;font-weight:800;line-height:1.25;color:var(--blue);overflow-wrap:anywhere}
.ed-item p{margin:0;font-size:1.125rem;line-height:1.65;color:var(--ink-soft);max-width:64ch}
.on-night .ed-item{border-top-color:rgba(255,255,255,.16)}
.on-night .ed-item:last-child{border-bottom-color:rgba(255,255,255,.16)}
.on-night .ed-item::before{color:var(--amber)}
.on-night .ed-item h3{color:#fff}
.on-night .ed-item p{color:#BACFE2}
@media (max-width:880px){
  .ed-item{grid-template-columns:54px minmax(0,1fr);row-gap:10px}
  .ed-item p{grid-column:2}
  .ed-item::before{font-size:1.3rem}
}

/* --- Two-column editorial body ------------------------------------------ */
.ed-body{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(28px,5vw,72px);align-items:start}
.ed-body h2{font-size:clamp(1.6rem,2.9vw,2.35rem);font-weight:800;line-height:1.12;margin:0;max-width:16ch}
.ed-body .ed-col p{font-size:1.125rem;line-height:1.65}
@media (max-width:860px){.ed-body{grid-template-columns:1fr}}

/* --- Marginal note ------------------------------------------------------ */
.ed-note{
  border-left:3px solid var(--amber-deep);padding:4px 0 4px 20px;
  font-size:.98rem;line-height:1.55;color:var(--ink-soft);max-width:44ch;
}
.ed-note strong{color:var(--ink);display:block;margin-bottom:5px}
.on-night .ed-note,.sect-night .ed-note{color:#BACFE2}
.on-night .ed-note strong,.sect-night .ed-note strong{color:#fff}

/* --- Editorial pull statement ------------------------------------------- */
.ed-statement{
  font-size:clamp(1.5rem,3.35vw,2.62rem);font-weight:800;line-height:1.16;
  letter-spacing:-.018em;color:var(--blue);max-width:none;margin:0;
}
.on-night .ed-statement{color:#fff}
.ed-statement em{font-style:normal;color:var(--amber)}

/* --- Directory (tip lines) ---------------------------------------------- */
.ed-dir{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,64px)}
.ed-dir div{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.14);
}
.ed-dir dt,.ed-dir .k{font-size:1rem;color:#D5E4F0}
.ed-dir dd,.ed-dir .v{margin:0;font-weight:700;color:#fff;white-space:nowrap}
.ed-dir .v a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(220,108,39,.6)}
.ed-dir .v a:hover{color:var(--amber);border-bottom-color:var(--amber)}
@media (max-width:700px){.ed-dir{grid-template-columns:1fr}}
.ed-statement-sub{
  font-size:clamp(1.05rem,1.62vw,1.28rem);line-height:1.55;color:var(--ink-soft);
  max-width:none;margin:26px 0 0;
}
.lb3{display:none}
.lbh{display:none}
/* Headings sized to fit a half-width column at two lines. */
.two-col--fit h2{font-size:clamp(1.45rem,2.5vw,2rem)}
@media (min-width:861px){.lbh{display:block}}
@media (min-width:1000px){.lb3{display:block}}

/* --------------------------------------------------------------- Right-edge section photo
   A photograph anchored to the right of a dark section, masked so it dissolves
   into the section colour toward the left, with a navy scrim over it so the
   copy sitting on top stays fully legible. */
.has-photo-r{position:relative;overflow:hidden}
.has-photo-r>.wrap,.has-photo-r>.wrap-narrow{position:relative;z-index:3}
.sect-photo-right{position:absolute;inset:0;z-index:1;pointer-events:none}
.sect-photo-right::before{
  content:"";position:absolute;top:0;bottom:0;right:0;width:min(62%,860px);
  background-image:url("img/refer-call.jpg");
  background-size:cover;background-position:50% 8%;
  opacity:.62;
  /* elliptical mask anchored right of centre: dissolves on every edge,
     so there is no seam where the photograph meets the section colour */
  -webkit-mask-image:radial-gradient(112% 106% at 96% 44%,
      #000 0%, rgba(0,0,0,.94) 34%, rgba(0,0,0,.62) 56%, rgba(0,0,0,.24) 76%, transparent 92%);
  mask-image:radial-gradient(112% 106% at 96% 44%,
      #000 0%, rgba(0,0,0,.94) 34%, rgba(0,0,0,.62) 56%, rgba(0,0,0,.24) 76%, transparent 92%);
}
/* scrim in the section's own navy, holding contrast for the text above it */
.sect-photo-right::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right, var(--night) 0%, rgba(0,48,71,.97) 26%, rgba(0,48,71,.86) 48%, rgba(0,48,71,.62) 72%, rgba(0,48,71,.44) 100%),
    linear-gradient(to bottom, rgba(0,48,71,.45) 0%, rgba(0,48,71,0) 26%, rgba(0,48,71,0) 74%, rgba(0,48,71,.45) 100%);
}
@media (max-width:900px){
  .sect-photo-right::before{width:100%;background-position:62% 28%;opacity:.34;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.5) 58%,transparent 92%);
    mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.5) 58%,transparent 92%);}
  .sect-photo-right::after{
    background:linear-gradient(to bottom, rgba(0,48,71,.82) 0%, rgba(0,48,71,.90) 55%, var(--night) 100%);}
}

/* --------------------------------------------------------------- Wide editorial header + grid
   Header runs the full measure with a note riding at the right. The items below
   sit in a numbered grid, separated by hairlines rather than boxed in cards. */
.ed-head{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);
  gap:clamp(24px,4vw,64px);align-items:end;margin-bottom:clamp(34px,4vw,52px);
}
.ed-head h2{
  font-size:clamp(1.7rem,3.35vw,2.62rem);font-weight:800;line-height:1.12;
  letter-spacing:-.018em;margin:0;max-width:none;
}
.ed-head .ed-note{margin:0;max-width:none}
@media (max-width:860px){
  .ed-head{grid-template-columns:1fr;align-items:start;gap:22px}
}

.ed-grid{
  list-style:none;margin:0;padding:0;counter-reset:edg;
  display:grid;gap:0 clamp(22px,3.2vw,52px);
}
.ed-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ed-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ed-cell{
  counter-increment:edg;
  border-top:1px solid rgba(34,48,63,.16);
  padding:22px 0 34px;
}
.ed-cell::before{
  content:counter(edg,decimal-leading-zero);
  display:block;font-size:1.45rem;font-weight:800;line-height:1;
  color:var(--amber-deep);letter-spacing:-.02em;margin-bottom:14px;
}
.ed-cell h3{margin:0 0 9px;font-size:1.16rem;font-weight:800;line-height:1.25;color:var(--blue)}
.ed-cell p{margin:0;font-size:1.125rem;line-height:1.6;color:var(--ink-soft)}
.on-night .ed-cell{border-top-color:rgba(255,255,255,.18)}
.on-night .ed-cell::before{color:var(--amber)}
.on-night .ed-cell h3{color:#fff}
.on-night .ed-cell p{color:#BACFE2}
@media (max-width:1000px){
  .ed-grid-3,.ed-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .ed-grid-3,.ed-grid-4{grid-template-columns:1fr}
  .ed-cell{padding:18px 0 26px}
}

/* --------------------------------------------------------------- Editorial masthead, dark variant
   Photographic hero. The scrim is heaviest behind the type on the left and
   clears to the right so the subject and the light under the door read.
   The foot of the section resolves to the section colour below it. */
.ed-open--dark{background:var(--night);color:#fff}
.ed-open--dark .ed-open-in{padding-top:clamp(64px,8vw,118px);padding-bottom:clamp(58px,7vw,104px)}
.ed-open--dark .ed-h1{color:#fff}
.ed-open--dark .ed-h1 em{color:var(--amber)}
.ed-open--dark .ed-standfirst{color:#CBDCEA}
.ed-open--dark .ed-kicker{color:var(--amber)}
.ed-open--dark .ed-kicker span{color:var(--sky)}

.ed-open-photo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ed-open-photo::before{
  content:"";position:absolute;inset:0;
  background-image:url("img/gethelp-hero.jpg");
  background-image:image-set(url("img/gethelp-hero-sm.jpg") 1x, url("img/gethelp-hero.jpg") 2x);
  background-size:cover;background-position:57% 48%;
  filter:brightness(1.16) contrast(1.05);
}
.ed-open-photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right,
      rgba(0,48,71,.93) 0%, rgba(0,48,71,.86) 24%, rgba(0,48,71,.60) 44%,
      rgba(0,48,71,.40) 62%, rgba(0,48,71,.34) 82%, rgba(0,48,71,.40) 100%),
    linear-gradient(to bottom,
      rgba(0,48,71,.58) 0%, rgba(0,48,71,.08) 24%, rgba(0,48,71,.16) 58%, rgba(0,48,71,.78) 88%, var(--night) 100%);
}
@media (max-width:900px){
  .ed-open-photo::before{background-position:70% 42%}
  .ed-open-photo::after{
    background:linear-gradient(to bottom,
      rgba(0,48,71,.86) 0%, rgba(0,48,71,.78) 40%, rgba(0,48,71,.88) 74%, var(--night) 100%);}
}

/* ==========================================================================
   FIELD GUIDE SYSTEM
   A third layout language, for reference pages. Same tokens again; the
   structure here is a catalogue: a sticky category rail, entries separated by
   rules, small caps tags, and multi-column running text.
   ========================================================================== */

/* --- Split masthead: headline left, a single figure right ---------------- */
.fg-open{background:var(--linen);border-bottom:1px solid rgba(34,48,63,.12)}
.fg-open-in{
  padding-top:clamp(50px,6.5vw,90px);padding-bottom:clamp(44px,5vw,68px);
  display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  gap:clamp(30px,5vw,72px);align-items:end;
}
.fg-open h1{
  font-size:clamp(2rem,4.5vw,3.5rem);font-weight:800;line-height:1.06;
  letter-spacing:-.02em;color:var(--blue);margin:0;max-width:18ch;text-transform:none;
}
.fg-open h1 em{font-style:normal;color:var(--amber-deep)}
.fg-figure{border-top:2px solid var(--amber-deep);padding-top:18px}
.fg-figure b{
  display:block;font-size:clamp(2.4rem,4.6vw,3.5rem);font-weight:800;line-height:1;
  letter-spacing:-.03em;color:var(--amber-deep);
}
.fg-figure span{display:block;margin-top:12px;font-size:1.02rem;line-height:1.5;color:var(--ink-soft);max-width:30ch}
@media (max-width:860px){
  .fg-open-in{grid-template-columns:1fr;align-items:start;gap:30px}
  .fg-open h1{max-width:none}
}

/* --- Running text in columns -------------------------------------------- */
.fg-lede{columns:2;column-gap:clamp(28px,4.5vw,64px);margin:0}
.fg-lede p{margin:0 0 1.05em;font-size:1.125rem;line-height:1.65;break-inside:avoid}
.on-night .fg-lede p{color:#C2D6E6}
.fg-lede p:last-child{margin-bottom:0}
@media (max-width:800px){.fg-lede{columns:1}}

/* --- Catalogue: sticky rail + entries ------------------------------------ */
.fg-cat{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,1.62fr);gap:clamp(28px,5vw,76px);align-items:start}
.fg-rail{position:sticky;top:132px}
.fg-rail ol{list-style:none;margin:0;padding:0;counter-reset:fgr}
.fg-rail li{counter-increment:fgr;border-top:1px solid rgba(34,48,63,.16)}
.fg-rail a{
  display:flex;gap:12px;align-items:baseline;padding:15px 0;text-decoration:none;
  font-size:1.02rem;font-weight:700;color:var(--ink-soft);transition:color .18s ease;
}
.fg-rail a::before{
  content:counter(fgr,decimal-leading-zero);
  font-size:.74rem;font-weight:800;letter-spacing:.1em;color:var(--amber-deep);opacity:.75;
}
.fg-rail a:hover{color:var(--blue)}
.fg-rail li.on a{color:var(--blue)}
.fg-rail li.on a::before{opacity:1}
.fg-rail-label{
  font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber-deep);margin:0 0 14px;
}
@media (max-width:900px){
  .fg-cat{grid-template-columns:1fr;gap:26px}
  .fg-rail{position:static}
  .fg-rail ol{display:flex;flex-wrap:wrap;gap:0 22px}
  .fg-rail li{border-top:0;border-bottom:1px solid rgba(34,48,63,.16)}
}

.fg-group{margin:0 0 clamp(40px,5vw,64px)}
.fg-group:last-child{margin-bottom:0}
.fg-group > h2{
  font-size:clamp(1.35rem,2.1vw,1.72rem);font-weight:800;line-height:1.2;margin:0 0 6px;
}
.fg-group-note{margin:0 0 20px;font-size:1.02rem;color:var(--ink-soft);max-width:62ch}
.fg-list{list-style:none;margin:0;padding:0}
.fg-entry{
  border-top:1px solid rgba(34,48,63,.14);padding:20px 0;
  display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);gap:clamp(14px,2.4vw,34px);
}
.fg-entry:last-child{border-bottom:1px solid rgba(34,48,63,.14)}
.fg-entry b{font-size:1.125rem;font-weight:800;line-height:1.3;color:var(--blue)}
.fg-entry span{font-size:1.125rem;line-height:1.6;color:var(--ink-soft)}
@media (max-width:680px){
  .fg-entry{grid-template-columns:1fr;gap:7px}
}
.on-night .fg-entry{border-top-color:rgba(255,255,255,.16)}
.on-night .fg-entry:last-child{border-bottom-color:rgba(255,255,255,.16)}
.on-night .fg-entry b{color:#fff}
.on-night .fg-entry span{color:#BACFE2}
.on-night .fg-group-note{color:#BACFE2}

/* --- Formal notice -------------------------------------------------------
   Full-bleed band in brand orange. The single most important instruction on
   the page, so it gets the loudest colour in the palette and nothing else on
   this page is filled with it. */
.fg-notice{background:#A44E14;color:#fff;position:relative}
.fg-notice::before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--amber);
}
.fg-notice-in{
  padding-top:clamp(46px,5.5vw,80px);padding-bottom:clamp(46px,5.5vw,80px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(26px,4.5vw,66px);align-items:start;
}
.fg-notice-tag{
  font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:#FFD9BE;margin:0 0 16px;
}
.fg-notice h2{
  color:#fff;margin:0;font-size:clamp(1.6rem,3.1vw,2.5rem);font-weight:800;
  line-height:1.12;letter-spacing:-.018em;max-width:16ch;
}
.fg-notice p{margin:0 0 16px;font-size:1.125rem;line-height:1.62;color:#FBE8DB;max-width:60ch}
.fg-notice p:last-child{margin-bottom:0}
.fg-notice strong{color:#fff}
.fg-notice a{color:#fff;font-weight:800;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.55)}
.fg-notice a:hover{border-bottom-color:#fff}
@media (max-width:860px){
  .fg-notice-in{grid-template-columns:1fr;gap:22px}
  .fg-notice h2{max-width:none}
}

/* --------------------------------------------------------------- Corner watermark
   The CTF mark set very faint in the lower right of a light section. Sits
   behind the type and never competes with it. */
.has-mark{position:relative;overflow:hidden}
.has-mark>.wrap,.has-mark>.wrap-narrow{position:relative;z-index:2}
.sect-mark{
  position:absolute;z-index:1;pointer-events:none;
  right:clamp(16px,3vw,44px);bottom:clamp(14px,2.4vw,34px);
  width:clamp(190px,22vw,330px);aspect-ratio:1;
  background:var(--mark) center/contain no-repeat;
  opacity:.08;
}
@media (max-width:820px){
  .sect-mark{width:160px;right:14px;bottom:14px;opacity:.06}
}

/* Single centred column of running text, for a page introduction. */
.fg-single{max-width:78ch;margin:0;text-align:left}
.fg-single--wide{max-width:90ch}
.fg-single p{margin:0 0 1.1em;max-width:none;font-size:1.125rem;line-height:1.7;color:var(--ink)}
.fg-single p:last-child{margin-bottom:0}
@media (max-width:640px){
  .fg-single{text-align:left}
}

/* ==========================================================================
   SPINE SYSTEM
   A fourth layout language, for the Continuum of Care. A vertical path runs
   down the page and fills as the reader descends it, with the service areas
   set as stations either side. The mark in their logo is a road; this is it.
   ========================================================================== */

/* --- Centred masthead ---------------------------------------------------- */
.sp-open{background:var(--linen);text-align:left;position:relative;overflow:hidden}
.sp-open-in{padding-top:clamp(52px,7vw,100px);padding-bottom:clamp(46px,6vw,84px);position:relative;z-index:2}
.sp-open .eyebrow{justify-content:center}
.sp-open h1{
  font-size:clamp(1.95rem,4.3vw,3.35rem);font-weight:800;line-height:1.1;
  letter-spacing:-.02em;color:var(--blue);margin:0 auto;max-width:22ch;text-transform:none;
}
.sp-open h1 em{font-style:normal;color:var(--amber-deep)}
.sp-open .lede{margin:26px auto 0;max-width:66ch;font-size:clamp(1.05rem,1.62vw,1.28rem);line-height:1.6}

/* --- The spine ----------------------------------------------------------- */
.sp-wrap{position:relative;padding:clamp(20px,3vw,40px) 0}
.sp-line{
  position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;
  background:rgba(255,255,255,.16);
}
.sp-line i{
  position:absolute;left:0;top:0;width:100%;height:var(--fill,0%);
  background:linear-gradient(180deg,var(--amber-deep),var(--amber));
  box-shadow:0 0 20px rgba(220,108,39,.55);
  transition:height .25s linear;
}
.sp-stations{position:relative;margin:0;padding:0;list-style:none;counter-reset:spn}
.sp-station{
  counter-increment:spn;position:relative;
  display:grid;grid-template-columns:1fr 88px 1fr;align-items:center;
  padding:clamp(22px,3vw,38px) 0;
}
.sp-node{
  grid-column:2;justify-self:center;
  width:18px;height:18px;border-radius:50%;
  background:#0A4571;border:2px solid #2C5484;
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease,transform .35s ease;
}
.sp-station.lit .sp-node{
  background:var(--amber);border-color:var(--amber);transform:scale(1.14);
  box-shadow:0 0 0 6px rgba(220,108,39,.16),0 0 26px rgba(220,108,39,.6);
}
.sp-body{max-width:40ch}
.sp-station:nth-child(odd) .sp-body{grid-column:1;text-align:right;justify-self:end}
.sp-station:nth-child(even) .sp-body{grid-column:3;text-align:left;justify-self:start}
.sp-num{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sky);margin-bottom:9px;
}
.sp-body h3{margin:0 0 8px;font-size:clamp(1.2rem,1.85vw,1.5rem);font-weight:800;line-height:1.2;color:#fff}
.sp-body p{margin:0;font-size:1.125rem;line-height:1.6;color:#BACFE2}
@media (max-width:860px){
  .sp-line{left:9px;margin-left:0}
  .sp-station{grid-template-columns:36px 1fr;padding:18px 0}
  .sp-node{grid-column:1;justify-self:start}
  .sp-station:nth-child(odd) .sp-body,
  .sp-station:nth-child(even) .sp-body{grid-column:2;text-align:left;justify-self:start;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .sp-line i{transition:none}
  .sp-station .sp-node{background:var(--amber);border-color:var(--amber)}
}

/* --- Programme plates ---------------------------------------------------- */
.sp-plates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.sp-plate{
  padding:clamp(26px,3vw,38px) clamp(22px,2.4vw,34px);
  border-top:1px solid rgba(34,48,63,.16);border-right:1px solid rgba(34,48,63,.16);
}
.sp-plate:nth-child(3n){border-right:0}
.sp-plate:nth-last-child(-n+3){border-bottom:1px solid rgba(34,48,63,.16)}
.sp-plate h3{margin:0 0 10px;font-size:1.22rem;font-weight:800;line-height:1.25;color:var(--blue)}
.sp-plate p{margin:0;font-size:1.125rem;line-height:1.6;color:var(--ink-soft)}
.sp-plate a{
  display:inline-block;margin-top:14px;font-size:.86rem;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--amber-deep);text-decoration:none;
}
.sp-plate a:hover{color:var(--blue)}
@media (max-width:960px){
  .sp-plates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-plate:nth-child(3n){border-right:1px solid rgba(34,48,63,.16)}
  .sp-plate:nth-child(2n){border-right:0}
  .sp-plate:nth-last-child(-n+3){border-bottom:0}
  .sp-plate:nth-last-child(-n+2){border-bottom:1px solid rgba(34,48,63,.16)}
}
@media (max-width:620px){
  .sp-plates{grid-template-columns:1fr}
  .sp-plate{border-right:0!important;border-bottom:0}
  .sp-plate:last-child{border-bottom:1px solid rgba(34,48,63,.16)}
}

/* The mark is decorative; on a short centred masthead it must stay well clear of the type. */
.sp-open .sect-mark{width:clamp(150px,17vw,250px);opacity:.05;right:clamp(10px,2vw,28px);bottom:clamp(10px,1.6vw,22px)}

/* --------------------------------------------------------------- Soft full-bleed photo
   A photograph behind a light section. Washed back far enough that dark type
   sitting over it keeps full contrast, and faded top and bottom so it resolves
   into the sections either side. */
.has-photo-soft{position:relative;overflow:hidden}
.has-photo-soft>.wrap,.has-photo-soft>.wrap-narrow{position:relative;z-index:3}
.sect-photo-soft{position:absolute;inset:0;z-index:1;pointer-events:none}
.sect-photo-soft::before{
  content:"";position:absolute;inset:0;
  background-image:url("img/casework.jpg");
  background-image:image-set(url("img/casework-sm.jpg") 1x, url("img/casework.jpg") 2x);
  background-size:cover;background-position:62% 44%;
}
.sect-photo-soft{--scrim:255,255,255}
.sect-photo-soft::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to bottom,
      rgb(var(--scrim)) 0%, rgba(var(--scrim),.90) 16%, rgba(var(--scrim),.86) 50%,
      rgba(var(--scrim),.92) 84%, rgb(var(--scrim)) 100%),
    linear-gradient(to right,
      rgba(var(--scrim),.55) 0%, rgba(var(--scrim),.10) 22%,
      rgba(var(--scrim),.10) 78%, rgba(var(--scrim),.55) 100%);
}
/* Masthead variant: the photo needs a heavier wash because the headline is
   large, blue, and centred straight over it. */
.sp-open .sect-photo-soft{--scrim:244,244,246}
.sp-open .sect-photo-soft::before{background-position:72% 62%;filter:contrast(1.04) saturate(1.06)}
.sp-open .sect-photo-soft::after{
  background:
    linear-gradient(to bottom,
      rgba(244,244,246,.84) 0%, rgba(244,244,246,.87) 46%,
      rgba(244,244,246,.93) 80%, rgb(244,244,246) 100%),
    linear-gradient(to right,
      rgba(244,244,246,.56) 0%, rgba(244,244,246,.22) 26%,
      rgba(244,244,246,.22) 74%, rgba(244,244,246,.56) 100%);
}
@media (max-width:820px){
  .sect-photo-soft::before{background-position:66% 40%}
  .sect-photo-soft::after{
    background:linear-gradient(to bottom,
      rgb(var(--scrim)) 0%, rgba(var(--scrim),.93) 18%, rgba(var(--scrim),.90) 60%, rgb(var(--scrim)) 100%);}
}

/* ==========================================================================
   RECORD SYSTEM
   A fifth layout language, for About. Reads as a statement of record:
   the mission set as the largest thing on the page, values as full-width
   rows, and the organisation's facts laid out as a formal register.
   ========================================================================== */

/* --- Mission as masthead ------------------------------------------------- */
.ab-open{background:var(--linen);position:relative;overflow:hidden}
.ab-open-in{
  padding-top:clamp(56px,7vw,110px);padding-bottom:clamp(56px,7vw,110px);
  position:relative;z-index:2;
}
.ab-mission{
  font-size:clamp(1.55rem,3.05vw,2.5rem);font-weight:800;line-height:1.22;
  letter-spacing:-.018em;color:var(--blue);margin:0;max-width:none;
  text-transform:none;  /* the sitewide h1 is uppercase; a mission statement is not */
}
.ab-mission em{font-style:normal;color:var(--amber-deep)}
.ab-attrib{
  margin:30px 0 0;display:flex;align-items:center;gap:16px;
  font-size:.74rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
}
.ab-attrib::before{content:"";width:56px;height:2px;background:var(--amber-deep);flex:none}

/* --- Two ruled panels ---------------------------------------------------- */
.ab-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:clamp(44px,5.5vw,78px)}
.ab-panel{padding:clamp(26px,3vw,38px) 0 0;border-top:2px solid rgba(34,48,63,.18)}
.ab-panel:first-child{padding-right:clamp(24px,4vw,64px);border-right:1px solid rgba(34,48,63,.14)}
.ab-panel:last-child{padding-left:clamp(24px,4vw,64px)}
.ab-panel h2{font-size:clamp(1.2rem,1.9vw,1.5rem);font-weight:800;margin:0 0 12px;color:var(--blue)}
.ab-panel p{margin:0;font-size:1.125rem;line-height:1.65}
@media (max-width:760px){
  .ab-pair{grid-template-columns:1fr}
  .ab-panel:first-child{padding-right:0;border-right:0}
  .ab-panel:last-child{padding-left:0}
}

/* --- Values as full-width rows ------------------------------------------- */
.ab-values{list-style:none;margin:0;padding:0}
.ab-value{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(20px,4vw,60px);align-items:baseline;
  padding:clamp(24px,3vw,38px) 0;border-top:1px solid rgba(255,255,255,.18);
}
.ab-value:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.ab-value h3{
  margin:0;font-size:clamp(1.7rem,3.6vw,2.9rem);font-weight:800;line-height:1;
  letter-spacing:-.025em;color:#fff;
}
.ab-value p{margin:0;font-size:1.125rem;line-height:1.62;color:#BACFE2}
@media (max-width:760px){
  .ab-value{grid-template-columns:1fr;gap:10px}
}

/* --- Register ------------------------------------------------------------ */
.ab-record{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(30px,5vw,72px)}
.ab-row{
  display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid rgba(34,48,63,.14);
}
.ab-row dt,.ab-row .k{font-size:1.02rem;color:var(--ink-soft);margin:0}
.ab-row dd,.ab-row .v{margin:0;font-weight:800;color:var(--blue);text-align:right}
@media (max-width:700px){.ab-record{grid-template-columns:1fr}}

/* --- People: leadership and board --------------------------------------- */
.ab-people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.ab-person{
  padding:clamp(20px,2.4vw,30px) clamp(16px,1.8vw,26px) clamp(24px,2.8vw,34px) 0;
  border-top:1px solid rgba(34,48,63,.16);
}
.ab-person .ph{
  display:block;width:100%;aspect-ratio:1;margin-bottom:16px;border-radius:2px;
  background:linear-gradient(150deg,#E7EDF3,#DCE6EF);
  position:relative;overflow:hidden;
}
.ab-person .ph img{width:100%;height:100%;object-fit:cover;display:block}
.ab-person .ph::after{
  content:"";position:absolute;left:50%;top:50%;width:34%;height:34%;
  transform:translate(-50%,-50%);opacity:.28;
  background:var(--mark) center/contain no-repeat;
}
.ab-person .ph.has-img::after{display:none}
.ab-person b{display:block;font-size:1.1rem;font-weight:800;line-height:1.25;color:var(--blue)}
.ab-person span{display:block;margin-top:5px;font-size:1rem;line-height:1.45;color:var(--ink-soft)}
@media (max-width:900px){.ab-people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ab-people{grid-template-columns:1fr}.ab-person .ph{max-width:260px}}

.ab-roster{
  columns:3;column-gap:clamp(24px,4vw,56px);margin:0;padding:0;list-style:none;
}
.ab-roster li{
  break-inside:avoid;padding:11px 0;border-bottom:1px solid rgba(34,48,63,.14);
  font-size:1.05rem;
}
.ab-roster li b{font-weight:800;color:var(--blue);display:block}
.ab-roster li span{color:var(--ink-soft);font-size:.98rem}
@media (max-width:860px){.ab-roster{columns:2}}
@media (max-width:520px){.ab-roster{columns:1}}

/* ==========================================================================
   PROSPECTUS SYSTEM
   A sixth layout language, for Corporate Partners. Proof first: the page opens
   on the wall of businesses already committed, then makes the case.
   ========================================================================== */

.pw-open{background:var(--linen)}
.pw-open-in{
  padding-top:clamp(50px,6.5vw,92px);padding-bottom:clamp(34px,4vw,54px);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(26px,4.5vw,64px);align-items:end;
}
.pw-open h1{
  font-size:clamp(1.95rem,4.1vw,3.2rem);font-weight:800;line-height:1.08;
  letter-spacing:-.02em;color:var(--blue);margin:0;max-width:17ch;text-transform:none;
}
.pw-open h1 em{font-style:normal;color:var(--amber-deep)}
.pw-open .lede{margin:0;font-size:clamp(1.02rem,1.55vw,1.22rem);line-height:1.6}
@media (max-width:860px){.pw-open-in{grid-template-columns:1fr;align-items:start;gap:24px}}

/* --- The wall ------------------------------------------------------------ */
.pw-wall{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px;background:rgba(34,48,63,.13);
  border:1px solid rgba(34,48,63,.13);
}
.pw-logo{
  background:#fff;display:grid;place-items:center;
  padding:clamp(14px,1.8vw,26px);min-height:clamp(96px,9vw,132px);
}
.pw-logo img{
  max-width:100%;max-height:clamp(52px,5vw,72px);width:auto;height:auto;
  object-fit:contain;display:block;
  filter:grayscale(1);opacity:.62;
  transition:filter .25s ease,opacity .25s ease;
}
.pw-logo:hover img,.pw-logo a:focus-visible img{filter:grayscale(0);opacity:1}
.pw-logo a{display:grid;place-items:center;width:100%;height:100%}
@media (max-width:1100px){.pw-wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:700px){.pw-wall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:420px){.pw-wall{grid-template-columns:repeat(2,minmax(0,1fr))}}

.pw-wall-note{
  margin:18px 0 0;font-size:.92rem;color:var(--ink-soft);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}

/* --- Ways to partner ----------------------------------------------------- */
.pw-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;counter-reset:pww}
.pw-way{
  counter-increment:pww;padding:clamp(24px,2.8vw,36px) clamp(20px,2.2vw,32px) clamp(28px,3vw,40px) 0;
  border-top:1px solid rgba(255,255,255,.18);
}
.pw-way::before{
  content:counter(pww,decimal-leading-zero);
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.2em;
  color:var(--amber);margin-bottom:14px;
}
.pw-way h3{margin:0 0 9px;font-size:1.2rem;font-weight:800;line-height:1.25;color:#fff}
.pw-way p{margin:0;font-size:1.125rem;line-height:1.6;color:#BACFE2}
@media (max-width:900px){.pw-ways{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pw-ways{grid-template-columns:1fr}}

/* --- Person disclosure --------------------------------------------------- */
.ab-person details{margin-top:12px;border-top:1px solid rgba(34,48,63,.14)}
.ab-person summary{
  cursor:pointer;list-style:none;padding:11px 22px 11px 0;position:relative;
  font-size:.84rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--amber-deep);
}
.ab-person summary::-webkit-details-marker{display:none}
.ab-person summary::after{
  content:"+";position:absolute;right:2px;top:7px;
  font-size:1.25rem;line-height:1;color:var(--amber-deep);font-weight:400;
}
.ab-person details[open] summary::after{content:"\2013"}
.ab-person summary:hover{color:var(--blue)}
.ab-person .bio{padding:0 0 14px}
.ab-person .bio p{
  margin:0;font-size:1.02rem;line-height:1.6;color:var(--ink-soft);
  border-left:2px solid rgba(220,108,39,.4);padding-left:14px;
}

/* Draft marker: shows which file each staff card is currently using so the
   mapping can be checked. Removed by setting DRAFT_PHOTO_TAGS = False. */
.ab-person .ph-tag{
  display:inline-block;width:auto;margin:-6px 0 8px;padding:3px 8px;border-radius:2px;
  background:var(--amber-deep);color:#fff;
  font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
}

/* ==========================================================================
   LEDGER SYSTEM
   A seventh layout language, for Donate. The giving amounts are the largest
   thing on the page, set as display type. Everything else supports the choice.
   ========================================================================== */

.dn-open{background:var(--night);color:#fff;position:relative;overflow:hidden}
.dn-open::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(86% 120% at 88% 4%,rgba(220,108,39,.26),rgba(0,48,71,0) 60%);
}
.dn-open-in{
  position:relative;z-index:2;
  padding-top:clamp(52px,6.5vw,96px);padding-bottom:clamp(46px,5.5vw,80px);
  display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
  gap:clamp(26px,4.5vw,66px);align-items:end;
}
.dn-open h1{
  font-size:clamp(1.95rem,4.2vw,3.3rem);font-weight:800;line-height:1.08;
  letter-spacing:-.02em;color:#fff;margin:0;max-width:17ch;text-transform:none;
}
.dn-open h1 em{font-style:normal;color:var(--amber)}
.dn-open .eyebrow{color:var(--amber)}
.dn-open .lede{margin:0;color:#BFD3E6;font-size:clamp(1.02rem,1.55vw,1.22rem);line-height:1.62}
@media (max-width:860px){.dn-open-in{grid-template-columns:1fr;align-items:start;gap:24px}}

/* --- The ladder ---------------------------------------------------------- */
.dn-ladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(34,48,63,.15)}
.dn-step{
  background:#fff;padding:clamp(22px,2.6vw,34px) clamp(18px,2vw,28px) clamp(26px,3vw,38px);
  display:flex;flex-direction:column;text-decoration:none;position:relative;
  transition:background .2s ease;
}
.dn-step:hover{background:#FBF6F1}
.dn-cad{
  font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:14px;
}
.dn-amt{
  font-size:clamp(2.4rem,4.6vw,3.6rem);font-weight:800;line-height:.95;
  letter-spacing:-.035em;color:var(--blue);margin-bottom:14px;
}
/* A word in place of an amount needs to fit the tile, so it sizes down and is
   allowed to break rather than running past the edge. */
.dn-amt--word{
  font-size:clamp(1.5rem,2.5vw,2.05rem);line-height:1.05;
  letter-spacing:-.02em;overflow-wrap:anywhere;
}
.dn-step p{margin:0;font-size:1.02rem;line-height:1.55;color:var(--ink-soft)}
.dn-step .go{
  margin-top:auto;padding-top:20px;font-size:.8rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--amber-deep);
}
.dn-step--lead{background:var(--night)}
.dn-step--lead:hover{background:#083F66}
.dn-step--lead .dn-cad{color:var(--sky)}
.dn-step--lead .dn-amt{color:var(--amber)}
.dn-step--lead p{color:#C2D6E6}
.dn-step--lead .go{color:#fff}
.dn-flag{
  position:absolute;top:0;left:0;right:0;height:4px;background:var(--amber);
}
@media (max-width:900px){.dn-ladder{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.dn-ladder{grid-template-columns:1fr}}

/* --- Other routes -------------------------------------------------------- */
.dn-routes{list-style:none;margin:0;padding:0}
.dn-route{
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(14px,2.4vw,36px);align-items:baseline;
  padding:22px 0;border-top:1px solid rgba(34,48,63,.14);
}
.dn-route:last-child{border-bottom:1px solid rgba(34,48,63,.14)}
.dn-route b{font-size:clamp(1.1rem,1.7vw,1.35rem);font-weight:800;line-height:1.25;color:var(--blue)}
.dn-route span{font-size:1.125rem;line-height:1.6;color:var(--ink-soft)}
.dn-route a{color:var(--amber-deep);font-weight:700}
@media (max-width:680px){.dn-route{grid-template-columns:1fr;gap:7px}}

/* --- Assurance strip ----------------------------------------------------- */
.dn-assure{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.dn-assure div{border-top:2px solid var(--amber-deep);padding-top:16px}
.dn-assure b{display:block;font-size:1.08rem;font-weight:800;color:var(--blue);margin-bottom:7px}
.dn-assure span{font-size:1.02rem;line-height:1.55;color:var(--ink-soft)}
@media (max-width:760px){.dn-assure{grid-template-columns:1fr;gap:22px}}

/* ==========================================================================
   INVITATION SYSTEM
   An eighth layout language, for Support Us. Actions are ordered by what they
   ask of a person, with the commitment stated before the action.
   ========================================================================== */

.iv-open{background:var(--linen)}
.iv-open-in{padding-top:clamp(52px,7vw,98px);padding-bottom:clamp(44px,5.5vw,78px)}
.iv-open h1{
  font-size:clamp(2rem,4.4vw,3.45rem);font-weight:800;line-height:1.08;
  letter-spacing:-.02em;color:var(--blue);margin:0;max-width:26ch;text-transform:none;
}
.iv-open h1 em{font-style:normal;color:var(--amber-deep)}
.iv-open .lede{margin:26px 0 0;max-width:62ch}

/* --- Invitations --------------------------------------------------------- */
.iv-list{list-style:none;margin:0;padding:0}
.iv-item{
  display:grid;grid-template-columns:minmax(0,.26fr) minmax(0,.74fr) minmax(0,1fr);
  gap:clamp(16px,2.6vw,40px);align-items:start;
  padding:clamp(22px,2.6vw,32px) 0;border-top:1px solid rgba(34,48,63,.15);
}
.iv-item:last-child{border-bottom:1px solid rgba(34,48,63,.15)}
.iv-cost{
  font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--amber-deep);padding-top:.5em;
}
.iv-item h3{
  margin:0;font-size:clamp(1.25rem,2.1vw,1.7rem);font-weight:800;line-height:1.18;
  letter-spacing:-.012em;color:var(--blue);
}
.iv-body p{margin:0 0 14px;font-size:1.125rem;line-height:1.62;color:var(--ink-soft)}
.iv-body p:last-child{margin-bottom:0}
.iv-go{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.84rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--amber-deep);text-decoration:none;
}
.iv-go:hover{color:var(--blue)}
.on-night .iv-item{border-top-color:rgba(255,255,255,.18)}
.on-night .iv-item:last-child{border-bottom-color:rgba(255,255,255,.18)}
.on-night .iv-cost{color:var(--amber)}
.on-night .iv-item h3{color:#fff}
.on-night .iv-body p{color:#BACFE2}
.on-night .iv-go{color:#fff}
@media (max-width:900px){
  .iv-item{grid-template-columns:minmax(0,.34fr) minmax(0,1fr);row-gap:12px}
  .iv-body{grid-column:2}
}
@media (max-width:620px){
  .iv-item{grid-template-columns:1fr;gap:8px}
  .iv-body{grid-column:1}
  .iv-cost{padding-top:0}
}

/* --- The seven points ---------------------------------------------------- */
.iv-points{
  list-style:none;margin:0;padding:0;counter-reset:ivp;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,5vw,64px);
}
.iv-points li{
  counter-increment:ivp;position:relative;
  padding:16px 0 16px 46px;border-bottom:1px solid rgba(255,255,255,.16);
  font-size:1.125rem;line-height:1.55;color:#C2D6E6;
}
.iv-points li::before{
  content:counter(ivp,decimal-leading-zero);position:absolute;left:0;top:19px;
  font-size:.72rem;font-weight:800;letter-spacing:.1em;color:var(--amber);
}
.iv-points li strong{color:#fff;font-weight:800}
@media (max-width:760px){.iv-points{grid-template-columns:1fr}}

/* ==========================================================================
   SYLLABUS SYSTEM
   A ninth layout language, for Training. The reader picks their own sector and
   the page answers with what trafficking looks like where they already work.
   ========================================================================== */

.sy-open{background:var(--linen)}
.sy-open-in{
  padding-top:clamp(50px,6.5vw,94px);padding-bottom:clamp(40px,5vw,70px);
  display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);
  gap:clamp(26px,4.5vw,64px);align-items:end;
}
.sy-open h1{
  font-size:clamp(1.95rem,4.2vw,3.3rem);font-weight:800;line-height:1.08;
  letter-spacing:-.02em;color:var(--blue);margin:0;max-width:18ch;text-transform:none;
}
.sy-open h1 em{font-style:normal;color:var(--amber-deep)}
.sy-open .lede{margin:0}
@media (max-width:860px){.sy-open-in{grid-template-columns:1fr;align-items:start;gap:24px}}

/* --- Sector switcher ----------------------------------------------------- */
.sy-tabs{
  display:flex;flex-wrap:wrap;gap:0;margin:0 0 clamp(26px,3vw,40px);
  border-bottom:1px solid rgba(255,255,255,.2);
}
.sy-tab{
  appearance:none;background:transparent;border:0;border-bottom:3px solid transparent;
  font-family:var(--body);font-size:.96rem;font-weight:700;color:#A9C2D8;
  padding:13px 18px;cursor:pointer;white-space:nowrap;
  transition:color .18s ease,border-color .18s ease;
}
.sy-tab:hover{color:#fff}
.sy-tab[aria-selected="true"]{color:#fff;border-bottom-color:var(--amber)}
.sy-tab:focus-visible{outline:3px solid var(--amber);outline-offset:-3px}

.sy-panel[hidden]{display:none}
.sy-panel{
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(24px,4vw,60px);align-items:start;
}
.sy-panel h3{
  margin:0 0 12px;font-size:clamp(1.35rem,2.3vw,1.9rem);font-weight:800;
  line-height:1.16;color:#fff;
}
.sy-panel > div > p{margin:0;font-size:1.125rem;line-height:1.62;color:#BACFE2}
.sy-sees{list-style:none;margin:0;padding:0}
.sy-sees li{
  padding:13px 0 13px 30px;border-top:1px solid rgba(255,255,255,.16);
  font-size:1.125rem;line-height:1.55;color:#C2D6E6;position:relative;
}
.sy-sees li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.sy-sees li::before{
  content:"";position:absolute;left:0;top:1.35em;width:12px;height:2px;background:var(--amber);
}
@media (max-width:820px){
  .sy-panel{grid-template-columns:1fr;gap:20px}
  .sy-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
}

/* --- Formats ------------------------------------------------------------- */
.sy-formats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.sy-format{
  padding:clamp(22px,2.5vw,32px) clamp(18px,2vw,28px) clamp(26px,3vw,36px) 0;
  border-top:2px solid var(--amber-deep);margin-right:clamp(16px,2vw,28px);
}
.sy-format:last-child{margin-right:0}
.sy-format h3{margin:0 0 9px;font-size:1.16rem;font-weight:800;line-height:1.25;color:var(--blue)}
.sy-format p{margin:0;font-size:1.06rem;line-height:1.58;color:var(--ink-soft)}
@media (max-width:900px){.sy-formats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sy-formats{grid-template-columns:1fr}.sy-format{margin-right:0}}

/* ==========================================================================
   SWITCHBOARD SYSTEM
   A tenth layout language, for Contact. Three numbers with three different
   purposes, routed before anything else on the page.
   ========================================================================== */

.ct-open{background:var(--linen)}
.ct-open-in{padding-top:clamp(50px,6.5vw,92px);padding-bottom:clamp(36px,4.5vw,62px)}
.ct-open h1{
  font-size:clamp(1.95rem,4.2vw,3.3rem);font-weight:800;line-height:1.08;
  letter-spacing:-.02em;color:var(--blue);margin:0;max-width:22ch;text-transform:none;
}
.ct-open h1 em{font-style:normal;color:var(--amber-deep)}
.ct-open .lede{margin:24px 0 0;max-width:60ch}

/* --- The three lines ----------------------------------------------------- */
.ct-lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.ct-line{
  padding:clamp(24px,3vw,38px) clamp(20px,2.4vw,34px) clamp(28px,3.4vw,44px) 0;
  border-top:3px solid rgba(34,48,63,.16);margin-right:clamp(18px,2.4vw,36px);
  display:grid;grid-template-rows:auto auto auto 1fr;align-content:start;
}
.ct-line:last-child{margin-right:0}
.ct-line--urgent{border-top-color:var(--amber-deep)}
.ct-for{
  font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 14px;
  /* reserve two lines so the three numbers share a baseline even if a
     label wraps at a narrower width */
  min-height:2.6em;
}
@media (max-width:860px){.ct-for{min-height:0}}
.ct-line--urgent .ct-for{color:var(--amber-deep)}
.ct-num{
  display:inline-block;font-size:clamp(1.6rem,2.9vw,2.3rem);font-weight:800;
  letter-spacing:-.025em;line-height:1;color:var(--blue);text-decoration:none;
  border-bottom:2px solid rgba(0,99,168,.28);padding-bottom:5px;
}
.ct-num:hover{color:var(--amber-deep);border-bottom-color:var(--amber-deep)}
.ct-line p{margin:16px 0 0;font-size:1.06rem;line-height:1.58;color:var(--ink-soft)}
.ct-line .hrs{display:block;margin-top:10px;font-size:.98rem;color:var(--ink-soft)}
@media (max-width:860px){
  .ct-lines{grid-template-columns:1fr}
  .ct-line{margin-right:0}
}

/* --- Safety strip -------------------------------------------------------- */
.ct-notice{background:var(--night);color:#fff}
.ct-notice-in{
  padding-top:clamp(34px,4vw,56px);padding-bottom:clamp(34px,4vw,56px);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(22px,4vw,56px);align-items:start;
}
.ct-notice h2{margin:0;font-size:clamp(1.3rem,2.3vw,1.85rem);font-weight:800;line-height:1.18;color:#fff}
.ct-notice p{margin:0 0 12px;font-size:1.125rem;line-height:1.6;color:#C2D6E6}
.ct-notice p:last-child{margin-bottom:0}
.ct-notice strong{color:#fff}
.ct-notice a{color:var(--amber);font-weight:800}
@media (max-width:760px){.ct-notice-in{grid-template-columns:1fr;gap:18px}}

/* --- Office register ----------------------------------------------------- */
.ct-reg{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(30px,5vw,72px)}
.ct-reg .row{
  display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid rgba(34,48,63,.14);
}
.ct-reg .k{font-size:1.02rem;color:var(--ink-soft)}
.ct-reg .v{font-weight:800;color:var(--blue);text-align:right}
.ct-reg .v a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(0,99,168,.3)}
.ct-reg .v a:hover{color:var(--amber-deep);border-bottom-color:var(--amber-deep)}
@media (max-width:700px){.ct-reg{grid-template-columns:1fr}}

/* ==========================================================================
   DOCUMENT SYSTEM  (Privacy)
   A utility page, deliberately plain. One measured column, numbered sections,
   nothing competing with the safety guidance at the top.
   ========================================================================== */
.dc-open{background:var(--linen)}
.dc-open-in{padding-top:clamp(46px,5.5vw,80px);padding-bottom:clamp(34px,4vw,58px)}
.dc-open h1{
  font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:800;line-height:1.1;
  letter-spacing:-.018em;color:var(--blue);margin:0;max-width:22ch;text-transform:none;
}
.dc-open .lede{margin:22px 0 0;max-width:58ch}
.dc-body{max-width:74ch}
.dc-sec{padding:clamp(28px,3.4vw,44px) 0;border-top:1px solid rgba(34,48,63,.15);counter-increment:dcs}
.dc-sec:first-child{border-top:0;padding-top:0}
.dc-sec h2{
  font-size:clamp(1.25rem,2vw,1.6rem);font-weight:800;line-height:1.2;color:var(--blue);
  margin:0 0 14px;display:flex;gap:14px;align-items:baseline;
}
.dc-sec h2::before{
  content:counter(dcs,decimal-leading-zero);
  font-size:.7rem;font-weight:800;letter-spacing:.14em;color:var(--amber-deep);flex:none;
}
.dc-sec p{margin:0 0 1em;font-size:1.125rem;line-height:1.68}
.dc-sec p:last-child{margin-bottom:0}
.dc-body{counter-reset:dcs}
.dc-first{
  border-left:4px solid var(--amber-deep);padding:clamp(20px,2.4vw,28px) clamp(20px,2.4vw,30px);
  background:#FBF5EF;border-radius:var(--radius);margin-bottom:clamp(28px,3.4vw,44px);
}
.dc-first h2{margin-top:0}
.dc-first h2::before{content:none}

/* ==========================================================================
   DOSSIER SYSTEM  (Evidence and Research)
   Every figure carries its source in print, directly beneath it.
   ========================================================================== */
.ev-open{background:var(--night);color:#fff;position:relative;overflow:hidden}
.ev-open::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(84% 120% at 90% 0%,rgba(220,108,39,.22),rgba(0,48,71,0) 62%);
}
.ev-open-in{
  position:relative;z-index:2;
  padding-top:clamp(50px,6.5vw,94px);padding-bottom:clamp(44px,5.5vw,78px);
  display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);
  gap:clamp(26px,4.5vw,64px);align-items:end;
}
.ev-open h1{
  font-size:clamp(1.9rem,4vw,3.15rem);font-weight:800;line-height:1.08;
  letter-spacing:-.02em;color:#fff;margin:0;max-width:19ch;text-transform:none;
}
.ev-open h1 em{font-style:normal;color:var(--amber)}
.ev-open .lede{margin:0;color:#BFD3E6}
.ev-open .eyebrow{color:var(--amber)}
@media (max-width:860px){.ev-open-in{grid-template-columns:1fr;align-items:start;gap:24px}}

.ev-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.ev-fig{
  padding:clamp(24px,2.8vw,34px) clamp(20px,2.2vw,32px) clamp(26px,3vw,38px) 0;
  border-top:2px solid rgba(34,48,63,.16);margin-right:clamp(18px,2.4vw,34px);
}
.ev-fig:last-child{margin-right:0}
.ev-fig b{
  display:block;font-size:clamp(2rem,3.6vw,2.9rem);font-weight:800;line-height:1;
  letter-spacing:-.03em;color:var(--amber-deep);margin-bottom:14px;
}
.ev-fig p{margin:0 0 14px;font-size:1.06rem;line-height:1.55;color:var(--ink)}
.ev-src{
  display:block;font-size:.76rem;line-height:1.45;color:var(--ink-soft);
  padding-top:12px;border-top:1px solid rgba(34,48,63,.14);
}
.ev-src b{display:inline;font-size:.76rem;font-weight:800;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;margin:0}
@media (max-width:900px){.ev-figs{grid-template-columns:1fr}.ev-fig{margin-right:0}}

.ev-cite{
  border-left:3px solid var(--amber-deep);padding:4px 0 4px 22px;margin:0;
  font-size:1.02rem;line-height:1.6;color:var(--ink-soft);
}
.ev-cite strong{display:block;color:var(--ink);font-weight:800;margin-bottom:6px}
.on-night .ev-cite{color:#BACFE2}
.on-night .ev-cite strong{color:#fff}

/* ==========================================================================
   IMAGE BAND
   A full-bleed photograph used between sections. Soft top and bottom edges so
   it resolves into whatever sits either side, and an optional caption.
   ========================================================================== */
.img-band{
  position:relative;overflow:hidden;margin:0;
  height:clamp(230px,30vw,430px);
}
.img-band img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.img-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(0,48,71,.30) 0%, rgba(0,48,71,.04) 20%,
    rgba(0,48,71,.04) 55%, rgba(0,48,71,.30) 100%);
}
/* Captions carry their own scrim. A caption is only worth having if it can be
   read over the brightest part of any photograph placed behind it. */
.img-band figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(52px,7vw,96px) var(--gut) clamp(18px,2.4vw,30px);
  color:#fff;font-size:clamp(1.02rem,1.55vw,1.28rem);font-weight:700;line-height:1.35;
  background:linear-gradient(to top,
    rgba(0,48,71,.92) 0%, rgba(0,48,71,.78) 42%, rgba(0,48,71,.34) 74%, rgba(0,48,71,0) 100%);
}
.img-band figcaption span{
  display:block;max-width:1200px;margin:0 auto;
}
.img-band--tall{height:clamp(280px,38vw,560px)}
.img-band--short{height:clamp(190px,22vw,320px)}
@media (max-width:620px){
  .img-band{height:clamp(200px,52vw,280px)}
}

/* ==========================================================================
   RESIDENCE SYSTEM  (Marissa's House)
   The building told through what it holds: units, rooms, people, and one
   deliberate absence — the address.
   ========================================================================== */
.mh-open{background:var(--night);color:#fff;position:relative;overflow:hidden}
.mh-open::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 120% at 86% 6%,rgba(220,108,39,.24),rgba(0,48,71,0) 62%);
}
.mh-open-in{position:relative;z-index:2;padding-top:clamp(50px,6.5vw,94px);padding-bottom:clamp(44px,5.5vw,78px)}
.mh-open .eyebrow{color:var(--amber)}
.mh-open h1{
  font-size:clamp(1.95rem,4.2vw,3.3rem);font-weight:800;line-height:1.08;
  letter-spacing:-.02em;color:#fff;margin:0;max-width:22ch;text-transform:none;
}
.mh-open h1 em{font-style:normal;color:var(--amber)}
.mh-open .lede{margin:26px 0 0;max-width:64ch;color:#BFD3E6}

.mh-units{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.mh-unit{
  padding:clamp(22px,2.6vw,32px) clamp(18px,2vw,28px) clamp(24px,2.8vw,36px) 0;
  border-top:2px solid rgba(34,48,63,.16);margin-right:clamp(16px,2.2vw,32px);
}
.mh-unit:last-child{margin-right:0}
.mh-unit b{
  display:block;font-size:clamp(2rem,3.4vw,2.8rem);font-weight:800;line-height:1;
  letter-spacing:-.03em;color:var(--blue);margin-bottom:10px;
}
.mh-unit span{display:block;font-size:1.04rem;line-height:1.5;color:var(--ink-soft)}
@media (max-width:860px){.mh-units{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.mh-units{grid-template-columns:1fr}.mh-unit{margin-right:0}}

/* The withheld address, stated as a design element rather than a footnote */
.mh-secret{
  border:1px solid rgba(220,108,39,.4);border-left:5px solid var(--amber-deep);
  border-radius:var(--radius);background:#FBF5EF;
  padding:clamp(24px,3vw,38px);max-width:78ch;margin:0 auto;
}
.mh-secret h2{margin:0 0 12px;font-size:clamp(1.3rem,2.2vw,1.75rem);color:var(--blue)}
.mh-secret p{margin:0 0 12px;font-size:1.125rem;line-height:1.62}
.mh-secret p:last-child{margin-bottom:0}

/* ==========================================================================
   BOOK SYSTEM  (A Parent's Guide)
   ========================================================================== */
.bk-open{background:var(--linen)}
.bk-open-in{
  padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(44px,5.5vw,76px);
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(28px,5vw,72px);align-items:center;
}
.bk-cover{
  position:relative;display:block;max-width:360px;margin:0;
  border-radius:3px;overflow:hidden;
  box-shadow:0 26px 60px rgba(0,48,71,.28), 0 2px 8px rgba(0,48,71,.14);
}
.bk-cover img{display:block;width:100%;height:auto}
/* a soft spine so the cover reads as a physical book rather than a flat crop */
.bk-cover::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:16px;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,.05) 55%,rgba(0,0,0,0));
}
.bk-credits{
  margin:16px 0 0;font-size:.8rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);max-width:360px;
}
.bk-open h1{
  font-size:clamp(1.85rem,3.9vw,3.05rem);font-weight:800;line-height:1.1;
  letter-spacing:-.02em;color:var(--blue);margin:0;max-width:20ch;text-transform:none;
}
.bk-open h1 em{font-style:normal;color:var(--amber-deep)}
.bk-open .lede{margin:24px 0 0}
@media (max-width:820px){
  .bk-open-in{grid-template-columns:1fr;gap:32px}
  .bk-cover{max-width:250px}
}

/* Candid transparency seal in the footer. */
.seal{
  display:inline-block;margin-top:18px;width:104px;line-height:0;
  border-radius:3px;overflow:hidden;
  opacity:.94;transition:opacity .2s ease,transform .2s ease;
}
.seal img{width:100%;height:auto;display:block}
.seal:hover{opacity:1;transform:translateY(-2px)}
.seal:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* Charity Navigator rating, as a text pill until the official badge is supplied. */
.ratepill{
  display:inline-flex;flex-direction:column;gap:3px;margin-top:16px;
  padding:10px 14px;border:1px solid rgba(166,207,236,.4);border-radius:var(--radius);
  text-decoration:none;color:#DCE4F0;font-size:.82rem;line-height:1.3;max-width:200px;
  transition:border-color .2s ease,background .2s ease;
}
.ratepill b{color:var(--amber);font-size:.9rem;letter-spacing:.08em}
.ratepill span{color:var(--sky);font-weight:700}
.ratepill:hover{border-color:var(--amber);background:rgba(220,108,39,.10)}

/* ==========================================================================
   MARQUEE SYSTEM  (Events)
   An event is a date, a place, and a decision. The date is the largest thing
   on the page and the register button never leaves the screen.
   ========================================================================== */
.ev-hero{position:relative;overflow:hidden;background:var(--night);color:#fff}
.ev-hero-img{position:absolute;inset:0;z-index:0}
.ev-hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.ev-hero-img::after{
  content:"";position:absolute;inset:0;
  /* Same reasoning as the resource mastheads: the orange in the headline needs
     3:1, and it does not get there over a light scrim. */
  background:linear-gradient(105deg,
               rgba(0,48,71,.955) 0%, rgba(0,48,71,.925) 50%,
               rgba(0,48,71,.80) 70%, rgba(0,48,71,.46) 100%),
             linear-gradient(to bottom,rgba(0,48,71,.4),rgba(0,48,71,0) 34%,rgba(0,48,71,.6));
}
.ev-hero-in{position:relative;z-index:2;padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(44px,5.5vw,80px)}
.ev-status{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 20px;
  padding:7px 14px;border-radius:100px;background:rgba(220,108,39,.18);
  border:1px solid rgba(220,108,39,.5);
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
}
.ev-status i{width:8px;height:8px;border-radius:50%;background:var(--amber);flex:none}
.ev-hero h1{
  font-size:clamp(1.95rem,4.3vw,3.4rem);font-weight:800;line-height:1.06;
  letter-spacing:-.022em;color:#fff;margin:0;max-width:30ch;text-transform:none;
}
.ev-hero h1 em{font-style:normal;color:var(--amber)}
.ev-hero .lede{margin:24px 0 0;max-width:56ch;color:#C8DAEA}

/* the facts strip */
/* Columns size to their own content rather than splitting the width evenly, so
   every value can sit on a single line. */
.ev-facts{
  display:grid;grid-template-columns:repeat(4,max-content);
  justify-content:space-between;gap:0 clamp(18px,3vw,54px);
  margin-top:clamp(30px,4vw,48px);
}
.ev-fact{padding:20px 0 4px;border-top:2px solid rgba(255,255,255,.28)}
.ev-fact dt{
  font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sky);margin:0 0 8px;
}
.ev-fact dd{margin:0;font-size:clamp(.96rem,1.3vw,1.12rem);font-weight:800;line-height:1.3;color:#fff;white-space:nowrap}
@media (max-width:1100px){
  .ev-facts{grid-template-columns:repeat(2,max-content);justify-content:start;gap:0 clamp(24px,5vw,64px)}
}
@media (max-width:560px){
  .ev-facts{grid-template-columns:max-content}
  .ev-fact dd{white-space:normal}
}

/* sticky register bar */
.ev-bar{
  position:sticky;top:0;z-index:40;background:var(--amber-deep);color:#fff;
  box-shadow:0 2px 16px rgba(0,48,71,.22);
}
.ev-bar-in{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:12px 0;
}
.ev-bar p{margin:0;font-size:1rem;font-weight:700;color:#fff}
.ev-bar p span{color:#FFDCC2;font-weight:600}
.ev-bar .btn{background:#fff;color:var(--amber-deep);border-color:#fff;padding:11px 22px}
.ev-bar .btn:hover{background:var(--night);color:#fff;border-color:var(--night)}
@media (max-width:620px){
  .ev-bar-in{justify-content:center;text-align:center}
  .ev-bar p{width:100%}
}

/* event cards on the hub */
.ev-list{display:grid;gap:0}
.ev-card{
  display:grid;grid-template-columns:clamp(190px,21vw,272px) minmax(0,1fr) auto;
  gap:clamp(18px,2.6vw,40px);align-items:center;
  padding:clamp(22px,2.8vw,34px) 0;border-top:1px solid rgba(34,48,63,.15);
}
/* event thumbnail */
.ev-thumb{
  position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(150deg,#E7EDF3,#DCE6EF);
}
.ev-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ev-thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,48,71,.28),rgba(0,48,71,0) 52%);
}
.ev-thumb--empty::before{
  content:"";position:absolute;left:50%;top:50%;width:38%;height:38%;
  transform:translate(-50%,-50%);opacity:.3;
  background:var(--mark) center/contain no-repeat;
}
/* the call to action never wraps */
.ev-card .go .btn{white-space:nowrap}
.ev-card:last-child{border-bottom:1px solid rgba(34,48,63,.15)}
.ev-when{display:flex;flex-direction:column;gap:3px}
.ev-when b{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;line-height:1;letter-spacing:-.025em;color:var(--amber-deep)}
.ev-when span{font-size:.94rem;color:var(--ink-soft)}
.ev-card h3{margin:0 0 7px;font-size:clamp(1.2rem,1.9vw,1.5rem);font-weight:800;line-height:1.2;color:var(--blue)}
.ev-card p{margin:0;font-size:1.06rem;line-height:1.55;color:var(--ink-soft)}
.ev-card .go{text-align:right}
@media (max-width:900px){
  .ev-card{grid-template-columns:clamp(150px,26vw,220px) minmax(0,1fr);row-gap:16px}
  .ev-card .go{grid-column:2;text-align:left}
}
@media (max-width:560px){
  .ev-card{grid-template-columns:1fr;gap:12px}
  .ev-card .go{grid-column:1}
  .ev-thumb{max-width:320px}
}
.ev-past .ev-when b{color:var(--ink-soft)}
.ev-past h3{color:var(--ink-soft)}

/* --- Event next step -----------------------------------------------------
   Three equal choices at the end of every event page. Buttons are pinned to
   the bottom of each column, so they align no matter how long the copy is
   rather than depending on somebody matching word counts. */
.ev-next{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.ev-step{
  display:flex;flex-direction:column;
  padding:clamp(24px,2.8vw,34px) clamp(20px,2.2vw,32px) clamp(26px,3vw,36px) 0;
  border-top:2px solid var(--amber-deep);margin-right:clamp(18px,2.4vw,34px);
}
.ev-step:last-child{margin-right:0}
.ev-num{
  font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber-deep);margin:0 0 12px;
}
.ev-step h3{margin:0 0 10px;font-size:clamp(1.15rem,1.8vw,1.42rem);font-weight:800;line-height:1.22;color:var(--blue)}
.ev-step p{margin:0 0 22px;font-size:1.06rem;line-height:1.58;color:var(--ink-soft)}
.ev-step .btn{margin-top:auto;align-self:start;white-space:nowrap}
.on-night .ev-step{border-top-color:var(--amber)}
.on-night .ev-num{color:var(--amber)}
.on-night .ev-step h3{color:#fff}
.on-night .ev-step p{color:#BACFE2}
@media (max-width:900px){
  .ev-next{grid-template-columns:1fr}
  .ev-step{margin-right:0;padding-right:0}
}

/* A short statement meant to sit on a single line: full measure, and type
   sized down just far enough to hold it. */
.fg-single--line{max-width:none}
.fg-single--line p{
  max-width:none;
  font-size:clamp(.98rem,1.2vw,1.06rem);
  line-height:1.6;
}

/* ==========================================================================
   RESOURCE SYSTEM
   A sixteenth layout language, for the long-form content pages: prevention,
   technology-facilitated abuse, and the support services family. Built for
   reading and for search, with a sticky contents rail on wide screens.
   ========================================================================== */
.rs-open{background:var(--linen)}
.rs-open-in{padding-top:clamp(46px,5.5vw,84px);padding-bottom:clamp(38px,4.5vw,64px)}
.rs-open h1{
  font-size:clamp(1.85rem,3.9vw,3rem);font-weight:800;line-height:1.1;
  letter-spacing:-.02em;color:var(--blue);margin:0;max-width:26ch;text-transform:none;
}
.rs-open h1 em{font-style:normal;color:var(--amber-deep)}
.rs-open .lede{margin:24px 0 0;max-width:68ch}
.rs-crumb{
  font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 18px;
}
.rs-crumb a{color:var(--amber-deep);text-decoration:none}
.rs-crumb a:hover{color:var(--blue)}

.rs-wrap{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.rs-rail{position:sticky;top:120px}
.rs-rail p{
  font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 14px;
}
.rs-rail a{
  display:block;padding:9px 0 9px 15px;border-left:2px solid rgba(34,48,63,.16);
  font-size:.98rem;line-height:1.35;color:var(--ink-soft);text-decoration:none;
  transition:color .15s ease,border-color .15s ease;
}
.rs-rail a:hover{color:var(--blue)}
.rs-rail a.on{color:var(--blue);font-weight:800;border-left-color:var(--amber-deep)}
@media (max-width:980px){
  .rs-wrap{grid-template-columns:1fr}
  .rs-rail{display:none}
}

.rs-body > section{padding-bottom:clamp(30px,4vw,52px)}
.rs-body h2{
  font-size:clamp(1.4rem,2.4vw,1.95rem);font-weight:800;line-height:1.2;
  color:var(--blue);margin:0 0 16px;scroll-margin-top:130px;
}
.rs-body h3{font-size:clamp(1.1rem,1.65vw,1.28rem);font-weight:800;color:var(--blue);margin:26px 0 8px}
.rs-body p{margin:0 0 1.05em;font-size:1.125rem;line-height:1.7;max-width:74ch}
.rs-body ul,.rs-body ol{margin:0 0 1.2em;padding-left:22px;max-width:74ch}
.rs-body li{margin-bottom:9px;font-size:1.125rem;line-height:1.62}
/* buttons carry their own colours; the inline-link rule must not reach them */
.rs-body a:not(.btn){color:var(--amber-deep);font-weight:700}
.rs-body a:not(.btn):hover{color:var(--blue)}

/* a bordered call-out for the things that must not be missed */
.rs-alert{
  border-left:5px solid var(--amber-deep);background:#FBF5EF;border-radius:var(--radius);
  padding:clamp(20px,2.4vw,28px);margin:0 0 1.4em;max-width:74ch;
}
.rs-alert.is-urgent{border-left-color:#B3261E;background:#FDF1F0}
.rs-alert p:last-child{margin-bottom:0}
.rs-alert strong{color:var(--ink)}

/* a compact reference block for hotlines and reporting routes */
.rs-refs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;max-width:74ch}
.rs-ref{padding:16px clamp(16px,2vw,26px) 18px 0;border-top:1px solid rgba(34,48,63,.15)}
.rs-ref b{display:block;font-size:1.04rem;font-weight:800;color:var(--blue);margin-bottom:5px}
.rs-ref span{display:block;font-size:1rem;line-height:1.5;color:var(--ink-soft)}
.rs-ref a{word-break:break-word}
@media (max-width:620px){.rs-refs{grid-template-columns:1fr}}

/* ==========================================================================
   STICKY QUICK EXIT
   The most important control on the site. Fixed to the lower right of every
   page, above everything, and never scrolled away from. Someone who needs it
   should not have to find it.
   ========================================================================== */
/* Matches the Exit Site button in the safety bar exactly: same fill, same
   radius, same type. One control, one appearance, wherever it appears. */
.exit-fab{
  position:fixed;right:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);
  z-index:120;                      /* above the mobile action bar (80) and the header (50) */
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 20px;border:0;border-radius:var(--radius);cursor:pointer;
  background:var(--alert);color:#fff;
  font-family:var(--body);font-size:.8rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 6px 22px rgba(0,0,0,.30), 0 0 0 3px rgba(255,255,255,.92);
  transition:background .16s ease, transform .16s ease;
}
.exit-fab:hover{background:#8F2C23;transform:translateY(-2px)}
.exit-fab:active{transform:translateY(0)}
.exit-fab:focus-visible{outline:3px solid #fff;outline-offset:3px}
.exit-fab svg{display:none}
.exit-fab small{display:none}
.exit-fab-txt{display:block;line-height:1.05}

/* clear the mobile action bar so the two never overlap */
@media (max-width:760px){
  .exit-fab{bottom:calc(58px + env(safe-area-inset-bottom,0px) + 14px);padding:11px 17px;font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){
  .exit-fab{transition:none}
  .exit-fab:hover{transform:none}
}
@media print{.exit-fab{display:none}}

/* --- Resource page lift --------------------------------------------------
   Some resource pages are reference material and should stay plain. Others,
   like prevention, are making a case to a decision-maker and need the proof
   pulled out of the prose. */

/* photographic masthead variant */
.rs-open--photo{background:var(--night);color:#fff;position:relative;overflow:hidden}
.rs-open--photo .rs-photo{position:absolute;inset:0;z-index:0}
.rs-open--photo .rs-photo img{width:100%;height:100%;object-fit:cover;display:block}
.rs-open--photo .rs-photo::after{
  content:"";position:absolute;inset:0;
  /* Heavy through the whole text column: brand orange only reaches 2.6:1 over a
     lighter scrim, below the 3:1 large-text threshold. Clears on the right. */
  background:linear-gradient(100deg,
    rgba(0,48,71,.955) 0%, rgba(0,48,71,.93) 52%,
    rgba(0,48,71,.82) 72%, rgba(0,48,71,.45) 100%);
}
.rs-open--photo .rs-open-in{position:relative;z-index:2}
.rs-open--photo h1{color:#fff}
.rs-open--photo h1 em{color:var(--amber)}
.rs-open--photo .lede{color:#C8DAEA}
.rs-open--photo .eyebrow{color:var(--amber)}
.rs-open--photo .rs-crumb{color:#8FAFC6}
.rs-open--photo .rs-crumb a{color:var(--amber)}

/* evidence figures */
.rs-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  margin:0 0 clamp(26px,3vw,40px);
}
.rs-stat{padding:18px clamp(14px,1.8vw,26px) 6px 0;border-top:3px solid var(--amber-deep)}
.rs-stat b{
  display:block;font-size:clamp(1.7rem,3vw,2.5rem);font-weight:800;line-height:1;
  letter-spacing:-.03em;color:var(--blue);margin-bottom:9px;
}
.rs-stat span{display:block;font-size:.98rem;line-height:1.45;color:var(--ink-soft)}
@media (max-width:880px){.rs-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.rs-stats{grid-template-columns:1fr}}

/* a quote given real weight, for the Attorney General and the superintendent */
.rs-pull{
  margin:0 0 1.4em;padding:clamp(24px,3vw,36px);border-radius:var(--radius);
  background:var(--night);color:#fff;max-width:74ch;
}
.rs-pull p{
  margin:0 0 16px;font-size:clamp(1.12rem,1.7vw,1.35rem);line-height:1.5;
  font-weight:700;color:#fff;max-width:none;
}
.rs-pull cite{
  display:block;font-style:normal;font-size:.8rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--amber);
}

/* the two curricula, as cards rather than run-on prose */
.rs-progs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;max-width:none}
.rs-prog{
  padding:clamp(24px,2.8vw,34px) clamp(20px,2.2vw,30px) clamp(26px,3vw,34px) 0;
  border-top:2px solid rgba(34,48,63,.16);margin-right:clamp(18px,2.4vw,34px);
}
.rs-prog:last-child{margin-right:0}
.rs-prog .tag{
  display:inline-block;margin-bottom:12px;padding:5px 11px;border-radius:100px;
  background:#E4EEF6;color:var(--blue);
  font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.rs-prog h3{margin:0 0 10px;font-size:clamp(1.2rem,1.9vw,1.5rem);color:var(--blue)}
.rs-prog p{font-size:1.06rem;line-height:1.6;max-width:none}
@media (max-width:760px){
  .rs-progs{grid-template-columns:1fr}
  .rs-prog{margin-right:0;padding-right:0}
}

/* ==========================================================================
   MOBILE TAP TARGETS AND LEGIBILITY
   Footer links are standalone navigation, not inline links in a sentence, so
   they need a real tap area rather than the height of their own text.
   ========================================================================== */
@media (max-width:760px){
  .foot ul{gap:0}
  .foot ul a{display:flex;align-items:center;padding:11px 0;min-height:44px;font-size:.95rem}
  .foot-bar{font-size:.88rem;line-height:1.8}
  .foot-bar a{display:inline-flex;align-items:center;min-height:44px;padding:4px 0}
  .foot p{font-size:.95rem}

  /* The quick-exit control is the most important button on the site for
     somebody in danger. It gets a full touch target on both instances. */
  .exit-btn,.exit-fab{min-height:44px;padding-top:12px;padding-bottom:12px;font-size:.82rem}

  /* Reporting hotlines on the crisis pages must be easy to hit. */
  .rs-ref a,.rs-refs a{display:inline-flex;align-items:center;min-height:44px}

  /* small uppercase labels get a floor so they stay readable on a phone */
  .eyebrow{font-size:.8rem}
  .foot h4{font-size:.8rem}
  /* Every small label component shares one mobile floor. Below about 12.5px
     uppercase letterspaced text stops being comfortably readable on a phone. */
  .ct-for,.ev-fact dt,.rs-rail p,.mh-unit span,.ev-when span,.ev-num,.iv-cost,
  .sp-num,.ab-attrib,.dn-cad,.ev-src,.ev-src b,.pw-wall-note,.rs-prog .tag,
  .fg-rail a,.ab-person span,.dn-assure span,.rs-ref span,.give-fine,
  .form-note,.faq summary,.ab-roster li span,.sy-tab{font-size:.82rem}
  .mh-unit span,.ev-when span,.iv-cost,.rs-prog .tag,.ab-person span,
  .dn-assure span,.rs-ref span{font-size:.88rem}
  .exit-note{font-size:.82rem}
  .ph-tag{font-size:.74rem}

  /* the menu toggle is the primary navigation control on a phone */
  .menu-toggle{min-height:44px;padding:12px 16px}

  /* resource list items that are wholly a link, rather than a link in a sentence */
  .rs-body li > a:only-child{display:inline-flex;align-items:center;min-height:44px}

  /* footer column links sit at the body size, not the small-label size */
  .foot ul a{font-size:.95rem;line-height:1.35}

  /* breadcrumb sits below the readable floor by default */
  .rs-crumb{font-size:.8rem}

  /* Standalone links — a whole list item, a breadcrumb, an arrow link, a phone
     number set as its own line — get a full touch target. Links sitting inside
     a sentence are left alone, because stretching those breaks the line. */
  .ct-num,.iv-go,.rs-crumb a,.ab-person a,.ev-card .go a,
  .checklist li > a:only-child,
  .dn-route span > a:only-child,
  .ed-cell > a:only-child,
  .sp-plate a,.ct-reg .v a,.safety a,.rs-alert a,
  .mh-secret a,.dn-route b + span a{
    display:inline-flex;align-items:center;min-height:44px;
  }

  /* remaining small labels brought up to the same floor */
  .fg-rail a{font-size:.9rem;padding-top:12px;padding-bottom:12px}
  .safety-in strong,.safety-in span{font-size:.84rem}
  .ev-src,.ev-src b{font-size:.82rem}
  .rs-prog .tag{font-size:.8rem}

  /* the last of the small labels: rule labels, figure sources, hero meta */
  .ed-rule-label,.fg-rail a,.ev-src,.ev-src b,.hero-meta,.stat-l,
  .fg-figure span,.ab-roster li span,.pw-wall-note span{font-size:.84rem}
  .ph-tag{font-size:.76rem}

  /* hotline numbers in running text still deserve a comfortable target */
  .rs-alert a,.faq-body a,.ed-col a{padding-top:4px;padding-bottom:4px}

  /* every button is a primary control on a phone */
  .btn{min-height:44px}

  /* home page labels: mobile legibility only, desktop sizing unchanged */
  .route-k,.stat-src{font-size:.82rem}

  /* out-specified by .ab-person .ph-tag, so match that specificity */
  .ab-person .ph-tag{font-size:.76rem}

  /* final pass: every remaining label lifted to the mobile floor */
  .path-stage,.tier-cad,.tier-flag,.fg-rail-label,
  .hero-blockquote cite,.quote cite,.ed-open cite{font-size:.82rem}
  .ed-call-meta span,.ed-call-meta{font-size:.86rem}
  .ed-kicker span{font-size:.82rem}
  cite{font-size:.82rem}

  /* any telephone link that is not sitting inside a sentence */
  li > a[href^="tel:"],p > a[href^="tel:"]:only-child,
  .ed-index a[href^="tel:"],.checklist a[href^="tel:"],
  .v > a[href^="tel:"],.ed-dir a[href^="tel:"]{
    display:inline-flex;align-items:center;min-height:44px;
  }
}

/* --- Founder portrait ----------------------------------------------------
   A masthead that carries a portrait rather than a full-bleed photograph.
   Used where the page is about one person. */
.rs-open--portrait .rs-open-in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(240px,30vw,380px));
  gap:clamp(28px,5vw,72px);align-items:center;
}
.rs-portrait{margin:0;position:relative}
.rs-portrait img{
  width:100%;height:auto;display:block;border-radius:var(--radius);
  box-shadow:0 22px 50px rgba(0,48,71,.22);
}
.rs-portrait figcaption{
  margin-top:14px;font-size:.8rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--amber-deep);
}
.rs-portrait figcaption span{
  display:block;margin-top:5px;font-size:.92rem;font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--ink-soft);
}
@media (max-width:820px){
  .rs-open--portrait .rs-open-in{grid-template-columns:1fr;gap:28px}
  .rs-portrait{max-width:280px}
}