/* ===========================================================================
   Camden Sickle Cell Registry
   Art direction from the Diteck Shopify theme, recoloured clinical.

   1. Tokens          6. Section heads     11. Duo cards
   2. Base            7. Hero              12. Steps
   3. Layout          8. Stat cards        13. Forms
   4. Buttons         9. Dark panel        14. FAQ
   5. Eyebrow        10. Logo strip        15. Footer
                                           16. Motion / responsive
   =========================================================================== */

/* --- 1. Tokens ------------------------------------------------------------ */

:root{
  /* Measured off the Diteck demo, then moved.

     The theme's #636EDF periwinkle reads as a design agency. This site asks
     people with a lifelong illness to hand over medical history, so the
     accent is a clinical blue instead. Everything else keeps the theme's
     relationships: a lavender-grey page, white cards ON it rather than in it,
     near-black headings and a distinctly lighter body grey. */
  --bg:         #F1F3F7;   /* never flat white — the theme's key move */
  --surface:    #FFFFFF;
  --ink:        #0B1220;   /* headings; near-black with blue in it */
  --body:       #6B7280;   /* deliberately lighter than --ink */
  --body-dim:   #9AA1AE;
  --primary:    #2B5FA8;
  --primary-2:  #234E8C;   /* hover */
  --primary-wash: #E7EEF8;
  --line:       #DFE2EA;
  --line-soft:  #EBEDF2;
  --dark:       #101826;   /* the dark panel */
  --on-dark:    rgba(255, 255, 255, .72);
  --success:    #2E9E7B;
  --success-bg: #D9EDE6;
  --error:      #C2332C;
  --error-bg:   #FBEAE9;

  --wrap: 1240px;
  --gutter: clamp(18px, 4vw, 40px);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --shadow: 0 18px 44px -28px rgba(11, 18, 32, .34);
}

/* --- 2. Base -------------------------------------------------------------- */

*, *::before, *::after{ box-sizing: border-box; }
[hidden]{ display: none !important; }

html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4{
  margin: 0 0 .5em;
  color: var(--ink);
  font-weight: 500;          /* the theme's headings are 500, not 700 */
  line-height: 1.06;
  letter-spacing: normal;    /* and NOT tracked in — that is Diteck's look */
}
h1{ font-size: clamp(2.6rem, 6.2vw, 5.1rem); }
h2{ font-size: clamp(2rem, 4.2vw, 3.4rem); }
h3{ font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.24; }
h4{ font-size: 1rem; line-height: 1.4; }

p{ margin: 0 0 1.1em; }
p:last-child{ margin-bottom: 0; }
strong{ color: var(--ink); font-weight: 600; }
a{ color: var(--primary); text-decoration: none; transition: color .25s var(--ease); }
a:hover{ color: var(--primary-2); }
img{ max-width: 100%; height: auto; display: block; }
::selection{ background: var(--primary); color: #fff; }

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

.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: 12px 18px; background: var(--ink); color: #fff; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus{ left: 0; }

.lede{ font-size: 1.06rem; max-width: 56ch; }
.fine{ font-size: .86rem; line-height: 1.66; color: var(--body-dim); }
.tint{ color: var(--primary); }

/* --- 3. Layout ------------------------------------------------------------ */

.wrap{ width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
/* Sections used to stack 116px of bottom padding onto 116px of the next
   section's top, which opened a dead band the height of a screen. */
.section{ padding: clamp(46px, 5.6vw, 84px) 0; }
.section--tight{ padding-top: clamp(20px, 2.6vw, 36px); }

.grid{ display: grid; gap: clamp(16px, 2vw, 24px); }
.grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Every track is minmax(0, 1fr), never a bare 1fr: a bare 1fr floors at
   min-content and lets a long word steal width from the column beside it. */

.card{
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.6vw, 32px);
}

.media{ border-radius: var(--r-xl); overflow: hidden; background: var(--line-soft); }
.media img{ width: 100%; height: 100%; object-fit: cover; }

/* A card that leads with a photograph. The image runs to the card edge, so
   the padding comes off the card and goes onto the body instead; the card
   keeps its own radius and clips the picture to it. */
.card--pic{ padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card--pic__pic{ aspect-ratio: 16 / 10; background: var(--line-soft); overflow: hidden; }
.card--pic__pic img{
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.card--pic:hover .card--pic__pic img{ transform: scale(1.05); }
.card--pic__body{ padding: clamp(20px, 2.2vw, 26px) clamp(22px, 2.6vw, 30px) clamp(24px, 2.6vw, 30px); }
.card--pic__body h3{ margin: 0 0 8px; }
.card--pic__body p{ margin: 0; }

@media (prefers-reduced-motion: reduce){
  .card--pic__pic img{ transition: none; }
  .card--pic:hover .card--pic__pic img{ transform: none; }
}

/* --- 4. Buttons ----------------------------------------------------------- */

/* Third design. The theme's own hover animated a badge that GREW to fill the
   button while the label, layered on top of it, flipped from dark to white
   somewhere in the middle of that travel — two elements changing colour
   against each other on a shared timeline, which never came out clean in
   either direction and needed a separate correction per variant.

   The rule this one is built on: ANIMATE POSITION, NOT COLOUR.

     colour   button and badge both invert in a single frame, no transition
     motion   the arrow in view slides out to the right while a second copy
              slides in from the left, both clipped by the badge

   The badge sits in flow at a fixed size and nothing is layered over anything
   else, so there is no frame where two colours are mid-way against each
   other. Leaving the hover is the same move reversed. The long note inside
   `.btn` records what was measured before landing here; do not reintroduce a
   colour transition without reading it. */

.btn{
  display: inline-flex; align-items: center;
  min-height: 58px; padding: 5px 26px 5px 5px;
  border: 1px solid var(--line); border-radius: 15px;
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.5;
  text-transform: capitalize; cursor: pointer;
  /* NOTHING about the colour is animated, on purpose.

     Three passes at crossfading it all failed the same way. Ink fading to
     white over a surface fading to blue puts both through a mid-tone at the
     same instant and the button spends ~150ms washed out. Snapping the label
     partway through fixes the way in and breaks the way out, because the
     easing is ease-out: the surface moves fast at the start of BOTH
     directions, so the moment that is safe going in (late) is the worst one
     coming back (measured: white label on #DFE7F2, a contrast of 1.3).

     Any fix for that is a pair of hand-tuned direction-specific delays, which
     is the thing that kept breaking. So the colour flips in one frame and the
     ARROW carries the animation instead. There is no intermediate state left
     to get wrong, in either direction. */
}
.btn > i{
  position: relative; overflow: hidden; flex: none;
  width: 46px; height: 46px; margin-right: 16px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--primary); color: #fff;
  /* Snaps with the button, for the same reason. */
}
/* Both arrows occupy the same grid cell; the second waits off to the left. */
.btn > i svg{
  grid-area: 1 / 1; width: 18px; height: 18px;
  transition: transform .42s var(--ease);
}
.btn > i svg + svg{ transform: translateX(-170%); }
.btn > span{ color: inherit; }

.btn:hover,
.btn:focus-visible{ background: var(--primary); border-color: var(--primary); color: #fff; }
.btn:hover > i,
.btn:focus-visible > i{ background: #fff; color: var(--primary); }
.btn:hover > i svg,
.btn:focus-visible > i svg{ transform: translateX(170%); }
.btn:hover > i svg + svg,
.btn:focus-visible > i svg + svg{ transform: none; }

/* Filled to start with, so hover deepens rather than inverts. */
.btn--solid{ background: var(--primary); border-color: var(--primary); color: #fff; }
.btn--solid > i{ background: #fff; color: var(--primary); }
.btn--solid:hover,
.btn--solid:focus-visible{ background: var(--primary-2); border-color: var(--primary-2); color: #fff; }
.btn--solid:hover > i,
.btn--solid:focus-visible > i{ background: #fff; color: var(--primary-2); }

.btn--light{ background: var(--surface); border-color: var(--surface); }
.btn--ghost{ background: transparent; }

.btn--wide{ width: 100%; }
.btn--wide > span{ flex: 1; text-align: center; }

@media (prefers-reduced-motion: reduce){
  .btn, .btn > i, .btn > i svg{ transition: none; }
}

/* --- 5. Eyebrow ----------------------------------------------------------- */

.eyebrow{
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 18px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink); font-size: .84rem; font-weight: 500; line-height: 1;
  white-space: nowrap;
}
.eyebrow i{ width: 6px; height: 6px; background: var(--primary); border-radius: 2px; }

/* --- 6. Section heads ----------------------------------------------------- */

/* The theme's signature opener: pill on the LEFT, oversized heading on the
   RIGHT. Not stacked. It is what stops every section reading the same. */
.sec-head{
  display: grid;
  grid-template-columns: minmax(0, .34fr) minmax(0, .66fr);
  gap: clamp(16px, 3vw, 44px);
  align-items: start;
  margin-bottom: clamp(24px, 2.8vw, 40px);
}
/* The pill sat hard against the left edge with a chasm before the heading,
   which is not what the reference does: there it sits close to the heading,
   near the right of its own column. */
.sec-head__label{ padding-top: 14px; justify-self: end; padding-right: clamp(0px, 2vw, 26px); }
@media (max-width: 820px){ .sec-head__label{ justify-self: start; padding-right: 0; } }
.sec-head__body h2{ margin-bottom: .34em; }
.sec-head__body .lede{ color: var(--body); }

@media (max-width: 820px){
  .sec-head{ grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sec-head__label{ padding-top: 0; }
}

/* --- 7. Header and hero --------------------------------------------------- */

.site-header{
  position: sticky; top: 0; z-index: 900;
  background: rgba(241, 243, 247, .88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: box-shadow .3s var(--ease);
}
.site-header.is-stuck{ box-shadow: 0 10px 30px -22px rgba(11, 18, 32, .4); }
.site-header .wrap{ display: flex; align-items: center; gap: 20px; min-height: 84px; }

.brand{ display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--ink); }
.brand svg{ width: 38px; height: 38px; flex: 0 0 38px; }
.brand b{ font-size: 1.12rem; font-weight: 700; white-space: nowrap; }

/* The nav sits in its own pill, the way the theme does it. */
.site-nav > ul{
  display: flex; align-items: center; gap: 4px;
  margin: 0; padding: 5px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
}
.site-nav a{
  display: block; padding: 9px 15px; border-radius: var(--r-pill);
  color: var(--ink); font-size: .87rem; font-weight: 500;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.site-nav a:hover{ background: var(--primary-wash); color: var(--primary); }
.site-nav a[aria-current="page"]{ background: var(--primary); color: #fff; }

/* Solid in the header. As a white container with a blue tile inside it read
   as a box within a box, sitting next to the white nav pill. */
.header-cta{ min-height: 50px; padding: 4px 20px 4px 4px; font-size: .9rem;
             background: var(--primary); border-color: var(--primary); color: #fff; }
.header-cta > i{ width: 40px; height: 40px; margin-right: 12px;
                 background: #fff; color: var(--primary); }
.header-cta:hover{ background: var(--primary-2); border-color: var(--primary-2); color: #fff; }
.header-cta:hover > i{ background: #fff; color: var(--primary-2); }

.nav-toggle{
  display: none; width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.nav-toggle span{ display: block; width: 18px; height: 2px; margin: 4px auto; background: currentColor;
  transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.hero{ padding: clamp(26px, 4vw, 54px) 0 clamp(40px, 6vw, 80px); }

/* The headline ran to three lines of 5.1rem while the column beside it held
   four lines of body copy, bottom-aligned. That left a hole the height of a
   whole line of display type in the top right, which is what read as broken
   rather than as deliberate whitespace.

   Two changes close it: the headline is a little smaller and allowed a wider
   measure, so it sets in two lines at desktop; and the two columns are
   baseline-ish rather than bottom-aligned, with the supporting column nudged
   down to sit under the headline's own first line. */
.hero h1{ font-size: clamp(2.5rem, 5.1vw, 4.2rem); max-width: 19ch; }
.hero-top{
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(20px, 3.4vw, 46px); align-items: end;
  margin-bottom: clamp(26px, 4vw, 44px);
}
.hero-top > div{ padding-bottom: 6px; }
.hero-top .lede{ font-size: 1.08rem; }
.hero-media{ position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 300px; }
.hero-media img{ width: 100%; height: 100%; min-height: 300px; object-fit: cover; }

/* The floating card that overlaps the hero image, as the theme does. */
.hero-float{
  position: absolute; right: clamp(14px, 3vw, 34px); top: clamp(14px, 3vw, 34px);
  width: min(300px, 62%);
  background: var(--surface); border-radius: var(--r-lg);
  padding: 20px 22px; box-shadow: var(--shadow);
}
.hero-float .big{ font-size: 2.1rem; font-weight: 600; color: var(--ink); line-height: 1; }
.hero-float .fine{ margin-top: 4px; }
.hero-float hr{ border: 0; border-top: 1px solid var(--line); margin: 14px 0; }

@media (max-width: 900px){
  .hero-top{ grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hero-top > div{ padding-bottom: 0; }
  .hero h1{ max-width: 15ch; }
  .hero-float{ position: static; width: auto; margin-top: 14px; box-shadow: none;
               border: 1px solid var(--line); }
  .hero-media{ min-height: 0; }
  .hero-media img{ min-height: 220px; }
}

/* --- 8. Stat cards -------------------------------------------------------- */

/* Big number, a small outlined icon in the corner, a square dot and label,
   then the explaining line. Straight from the theme. */
.stat{ position: relative; display: flex; flex-direction: column; gap: 10px; }
.stat__n{ font-size: clamp(2.4rem, 4.4vw, 3.5rem); font-weight: 500; color: var(--ink); line-height: 1; }
.stat__label{ display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 600;
              font-size: .95rem; }
.stat__label i{ width: 6px; height: 6px; background: var(--primary); border-radius: 2px; flex: none; }
/* Tucked inside the card, not hung off its corner. The bordered box read as
   a stray control floating in the padding; a soft tinted tile reads as part
   of the card. */
.stat__ic{
  position: absolute; top: 2px; right: 2px;
  width: 38px; height: 38px; display: grid; place-items: center;
  border: none; border-radius: 11px;
  background: var(--primary-wash); color: var(--primary);
}
.stat__ic svg{ width: 19px; height: 19px; }
.stat p{ margin-top: auto; padding-top: 14px; font-size: .92rem; }

/* --- 9. Dark panel -------------------------------------------------------- */

.panel-dark{
  position: relative;
  background: var(--dark); color: var(--on-dark);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4.4vw, 60px);
  overflow: hidden;
}
.panel-dark h2, .panel-dark h3, .panel-dark strong{ color: #fff; }
.panel-dark .eyebrow{ background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16);
                      color: #fff; }
.panel-dark a{ color: #fff; }
.panel-dark .btn{ color: var(--ink); }          /* .panel-dark a is (0,2,0) and */
.panel-dark .btn:hover{ color: #fff; }          /* ties with .btn:hover, so both  */
.panel-dark .btn--solid{ color: #fff; }         /* are restated here, after it.   */
.panel-dark .btn--ghost{ color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); background: transparent; }
.panel-dark .btn--ghost:hover{ color: #fff; }

/* A faint grid, which is what the theme puts on its solid-colour panel. */
.panel-dark::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(115deg, #000 10%, transparent 72%);
  -webkit-mask-image: linear-gradient(115deg, #000 10%, transparent 72%);
}
.panel-dark > *{ position: relative; }

/* --- 10. Logo strip ------------------------------------------------------- */

.logos{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: clamp(18px, 3vw, 40px);
  padding: clamp(20px, 3vw, 34px) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.logos span{ color: var(--body-dim); font-weight: 600; font-size: .96rem; white-space: nowrap; }

/* --- 11. Duo cards -------------------------------------------------------- */

/* The theme pairs a pale gradient card with a solid accent one. Two surfaces,
   not two of the same, which is what stops the row reading as a table. */
.duo{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.duo__a{
  border-radius: var(--r-xl); padding: clamp(24px, 3.4vw, 44px);
  background: linear-gradient(135deg, #FFFFFF 12%, var(--primary-wash) 92%);
  border: 1px solid var(--line);
}
.duo__b{
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); padding: clamp(24px, 3.4vw, 44px);
  background: var(--primary); color: rgba(255, 255, 255, .8);
}
.duo__b h3, .duo__b strong{ color: #fff; }
.duo__b::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 40px 40px;
}
.duo__b > *{ position: relative; }
@media (max-width: 760px){ .duo{ grid-template-columns: minmax(0, 1fr); } }

/* --- 11b. Watermark heading ----------------------------------------------- */

/* The theme sets an enormous pale word behind a white rounded panel, cropped
   by it so only the top half shows. It is decoration, so it is aria-hidden
   and the real heading is inside the panel.

   The panel must have its own background and sit above the word; the word is
   clipped by the SECTION's overflow, not by the panel, or the descenders
   reappear underneath. */
.wm-wrap{ position: relative; overflow: hidden; padding-top: clamp(40px, 7vw, 96px); }
.wm{
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: max-content; max-width: none;
  margin: 0; pointer-events: none; user-select: none;
  font-size: clamp(4.4rem, 13vw, 12rem); font-weight: 500; line-height: .82;
  color: #fff; white-space: nowrap;
}
.wm-panel{
  position: relative;
  background: var(--surface); border-radius: var(--r-xl);
  padding: clamp(30px, 5vw, 76px) clamp(20px, 4vw, 60px);
}

/* --- 11c. Quote panel ------------------------------------------------------ */

/* A dark slab with a lab photograph behind it, the quote on the left, and a
   portrait on the right that overlaps the top edge — the theme's "our
   promise" block. The portrait is NOT a cut-out PNG: it is a normal photo in
   a rounded frame, bottom-aligned and pushed above the panel, which reads the
   same way without needing a transparent asset. */
.quote{
  position: relative;
  border-radius: var(--r-xl);
  background: var(--dark);
  color: var(--on-dark);
  margin-top: clamp(40px, 7vw, 110px);   /* room for the portrait to rise into */
  overflow: visible;
}
.quote__bg{
  position: absolute; inset: 0; border-radius: var(--r-xl); overflow: hidden;
}
.quote__bg img{ width: 100%; height: 100%; object-fit: cover; opacity: .52;
                filter: grayscale(.35); }
.quote__bg::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(16,24,38,.95) 26%, rgba(16,24,38,.72) 52%, rgba(16,24,38,.42) 100%);
}
.quote__grid{
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(20px, 3vw, 40px); align-items: end;
  padding: clamp(28px, 4.4vw, 62px);
}
.quote__grid h2{ color: #fff; max-width: 15ch; margin: 22px 0 18px; }
.quote__grid p{ max-width: 46ch; }
.quote .eyebrow{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; }
.quote__who{ margin-top: 20px; font-size: .92rem; color: #fff; }
.quote__who span{ color: var(--body-dim); }

/* The portrait rises past the panel's top edge, the way the reference does.

   The reference uses a true cut-out PNG. There is no CC0 cut-out of a
   clinician to be had, and the best candidate wears a WHITE COAT against a
   LIGHT GREY WALL, so a colour key punches holes straight through him.

   So the effect is built instead of cut: the photograph has no frame and no
   radius, its left edge is masked into the panel, and the part that rises
   above the panel meets a page background close enough in value to the wall
   behind him that the join reads as intentional rather than as a pasted
   rectangle. */
/* A real cut-out PNG, supplied by the operator, so no masking trickery: he
   simply stands on the panel's bottom edge with his head above its top.
   object-fit is `contain` and the box is bottom-aligned, or `cover` would
   crop his head off at the very moment it matters. */
.quote__portrait{
  align-self: end;
  margin-top: clamp(-150px, -12vw, -80px);
  aspect-ratio: 3 / 4;
  display: flex; align-items: flex-end; justify-content: center;
}
.quote__portrait img{
  width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
  /* Fade him into the panel instead of cutting him off at its edge. */
  -webkit-mask-image: linear-gradient(#000 62%, transparent 99%);
  mask-image: linear-gradient(#000 62%, transparent 99%);
}

/* The button the theme floats off the bottom-right corner. */
.quote__cta{
  position: absolute; right: clamp(-6px, 0vw, 0px); bottom: clamp(-26px, -2.4vw, -18px);
  z-index: 2;
}
@media (max-width: 860px){
  .quote__grid{ grid-template-columns: minmax(0, 1fr); align-items: start; }
  .quote__portrait{ margin-top: 10px; aspect-ratio: 16 / 10; }
  .quote__cta{ position: static; margin: 18px clamp(28px, 4.4vw, 62px) 26px; }
}

/* --- 11d. Numbered list --------------------------------------------------- */

/* Image on the left, a numbered list on the right where one row is live and
   the rest are faded back. The theme fades on scroll; here the first row is
   live and the others sit back, which says the same thing without a scroll
   dependency that breaks in a background tab. */
.numlist{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
          gap: clamp(20px, 3.4vw, 54px); align-items: start; }
.numlist__media{ border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; }
.numlist__media img{ width: 100%; height: 100%; object-fit: cover; }
.numlist ol{ list-style: none; margin: 0; padding: 0; counter-reset: n; }
.numlist li{
  counter-increment: n;
  display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px;
  padding: clamp(18px, 2.4vw, 26px) 0;
  border-top: 1px solid var(--line);
  opacity: .42;
  transition: opacity .4s var(--ease);
}
.numlist li:first-child{ opacity: 1; }
.numlist li:hover, .numlist li:focus-within{ opacity: 1; }
.numlist li:last-child{ border-bottom: 1px solid var(--line); }
.numlist li::before{
  content: counter(n, decimal-leading-zero) ".";
  color: var(--primary); font-size: 1.05rem; font-weight: 500;
}
.numlist li:not(:first-child)::before{ color: var(--body-dim); }
.numlist h3{ margin-bottom: .3em; }
.numlist p{ font-size: .94rem; }
@media (max-width: 860px){ .numlist{ grid-template-columns: minmax(0, 1fr); } }

/* --- 11e. Closing CTA with a photograph ----------------------------------- */

/* A short column beside a long one — the contact details next to the message
   form, which is tall because the two consent disclosures are tall. Left to
   itself that is a metre of empty page. Sticky turns the gap into something
   doing a job: the phone number and the emergency notice stay in view for as
   long as the form does. */
.sticky-col{ position: sticky; top: 102px;  /* the 84px sticky header, plus air */ align-self: start; }
@media (max-width: 980px){ .sticky-col{ position: static; } }

.cta-split{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(22px, 4vw, 56px); align-items: center;
}
.cta-split__media{ border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 5 / 4; }
.cta-split__media img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px){
  .cta-split{ grid-template-columns: minmax(0, 1fr); }
  .cta-split__media{ order: -1; aspect-ratio: 16 / 9; }
}

/* --- 12. Steps ------------------------------------------------------------ */

.steps{ list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li{
  counter-increment: s;
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: clamp(14px, 2vw, 26px);
  padding: clamp(18px, 2.4vw, 26px) 0;
  border-top: 1px solid var(--line);
}
.steps li:last-child{ border-bottom: 1px solid var(--line); }
.steps li::before{
  content: counter(s, decimal-leading-zero);
  color: var(--primary); font-weight: 600; font-size: .92rem; padding-top: 3px;
}
.steps h3{ margin-bottom: .3em; }

/* --- 13. Forms ------------------------------------------------------------ */

.panel{
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: clamp(24px, 3.4vw, 44px);
}
.field{ margin-bottom: 16px; }
.field label{ display: block; margin-bottom: 7px; color: var(--ink); font-size: .9rem; font-weight: 600; }
.field .label{ display: block; margin-bottom: 9px; color: var(--ink); font-size: .9rem; font-weight: 600; }

/* Six areas, any number of them. This was a <select multiple>, which renders
   as a bare scrolling listbox that matches nothing else on the form and asks
   people to hold a modifier key to pick two. Checkboxes say the same thing
   and can be tapped. */
.picks{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.picks .pick{
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 11px 13px; font-size: .92rem; font-weight: 500; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.picks .pick:hover{ border-color: var(--primary); }
.picks .pick input{ flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--primary); }
.picks .pick:has(input:checked){ border-color: var(--primary); background: var(--primary-wash); }
@media (max-width: 560px){ .picks{ grid-template-columns: minmax(0, 1fr); } }
.field input, .field select, .field textarea{
  width: 100%; padding: 13px 15px;
  font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  background: #fff; border-color: var(--primary); outline: none;
}
.field textarea{ resize: vertical; min-height: 7rem; }
.field-2{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 560px){ .field-2{ grid-template-columns: minmax(0, 1fr); } }

/* The consent box. A field label is set in heading colour and semibold, which
   is right for "Email address" and unreadable for a paragraph of consent —
   and that paragraph is the exact text a person agrees to, so it has to be
   readable. This overrides the label rule rather than inheriting it. */
.check{
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: start;
  margin-bottom: 12px; padding: 15px 17px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg);
  font-size: .87rem; font-weight: 400; line-height: 1.6; color: var(--body);
  cursor: pointer;
}
.check input{ width: 17px; height: 17px; margin: .25rem 0 0; accent-color: var(--primary); cursor: pointer; }
.check b{ display: block; color: var(--ink); margin-bottom: 3px; }
.check.is-invalid{ border-color: var(--error); background: var(--error-bg); }

.form-error{
  display: none; margin-bottom: 14px; padding: 12px 15px;
  border-radius: var(--r-md); background: var(--error-bg); color: var(--error);
  font-size: .9rem; font-weight: 500;
}
.form-error.is-shown{ display: block; }

.form-done{ display: none; flex-direction: column; align-items: center; text-align: center;
            padding: clamp(18px, 3vw, 32px) 0 clamp(8px, 2vw, 18px); }
.form-done.is-shown{ display: flex; }
.form-done .ic{
  width: 58px; height: 58px; margin-bottom: 18px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--success-bg); color: var(--success);
}
.form-done .ic svg{ width: 26px; height: 26px; }
.form-done p{ max-width: 44ch; }

/* Reachable by a bot reading the HTML, invisible to everyone else.
   display:none is a tell — plenty of bots skip those. */
.hp{ position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.callout{
  padding: 16px 18px; border-left: 3px solid var(--primary);
  background: var(--primary-wash); border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: .92rem;
}
.callout strong{ display: block; margin-bottom: 3px; }
.callout--warn{ border-left-color: var(--error); background: var(--error-bg); }

/* --- 14. FAQ -------------------------------------------------------------- */

.faq-item{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
           margin-bottom: 10px; }
.faq-q{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 20px; border: none; background: none; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .98rem; color: var(--ink); text-align: left;
}
.faq-q .mark{
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--primary-wash); color: var(--primary);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.faq-item.is-open .faq-q .mark{ transform: rotate(45deg); background: var(--primary); color: #fff; }
.faq-a{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.faq-item.is-open .faq-a{ grid-template-rows: 1fr; }
.faq-a > div{ overflow: hidden; }
.faq-a p{ padding: 0 20px 18px; font-size: .94rem; }

/* --- 15. Footer ----------------------------------------------------------- */

.site-footer{ background: var(--surface); border-top: 1px solid var(--line); }
.site-footer .wrap{ padding-top: clamp(42px, 6vw, 76px); padding-bottom: clamp(24px, 3vw, 38px); }
.foot-grid{
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 44px);
}
.foot-brand p{ font-size: .92rem; max-width: 40ch; margin-top: 14px; }
.foot-contact{ font-size: .92rem; line-height: 1.9; }
.foot-contact span{ color: var(--body-dim); }
.foot-grid h4{ color: var(--ink); margin-bottom: 12px; }
.foot-grid ul{ list-style: none; margin: 0; padding: 0; }
.foot-grid li{ margin-bottom: 8px; }
.foot-grid li a{ color: var(--body); font-size: .92rem; }
.foot-grid li a:hover{ color: var(--primary); }

.disclaimer{
  margin-top: clamp(30px, 4vw, 52px); padding-top: clamp(20px, 3vw, 30px);
  border-top: 1px solid var(--line);
  font-size: .85rem; line-height: 1.72; color: var(--body);
}
.disclaimer strong{ color: var(--ink); }

.foot-legal{ border-top: 1px solid var(--line); }
.foot-legal .wrap{ display: flex; flex-wrap: wrap; gap: 10px 26px;
                   justify-content: space-between; padding-top: 18px; padding-bottom: 22px; }
.foot-legal p{ margin: 0; font-size: .85rem; color: var(--body-dim); }

/* --- 16. Motion and responsive -------------------------------------------- */

.fade-up{ opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.fade-up.in{ opacity: 1; transform: none; }

.to-top{
  position: fixed; right: 20px; bottom: 20px; z-index: 800;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: none; border-radius: 50%; background: var(--primary); color: #fff; cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.to-top.is-shown{ opacity: 1; pointer-events: auto; transform: none; }
.to-top svg{ width: 18px; height: 18px; transform: rotate(-90deg); }

@media (max-width: 1080px){
  .grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px){
  .site-nav{
    position: fixed; inset: 84px 0 auto 0; max-height: calc(100vh - 84px); overflow-y: auto;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 12px var(--gutter) 22px;
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .site-nav.is-open{ opacity: 1; transform: none; pointer-events: auto; }
  .site-nav > ul{ flex-direction: column; align-items: stretch; gap: 0;
                  background: none; border: none; border-radius: 0; padding: 0; }
  .site-nav > ul > li{ border-bottom: 1px solid var(--line-soft); }
  .site-nav a{ padding: 14px 2px; border-radius: 0; font-size: .96rem; }
  .site-nav a[aria-current="page"]{ background: none; color: var(--primary); }
  .nav-toggle{ display: block; order: 3; }
  .header-cta{ order: 2; }
  .brand{ order: 1; }
  .grid--3, .grid--2{ grid-template-columns: minmax(0, 1fr); }
  /* Picture cards keep two across on a tablet. One 16:10 photograph at the
     full column width is a banner, not a card, and six of them stacked is a
     very long scroll. */
  .grid--3.grid--pics{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px){
  .grid--3.grid--pics{ grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px){
  .grid--4{ grid-template-columns: minmax(0, 1fr); }
  .foot-grid{ grid-template-columns: minmax(0, 1fr); }
  .site-header .wrap{ min-height: 72px; gap: 10px; }
  .site-nav{ inset: 72px 0 auto 0; max-height: calc(100vh - 72px); }
  .brand svg{ width: 32px; height: 32px; flex: 0 0 32px; }
  .brand b{ font-size: 1rem; }
  .header-cta{ min-height: 42px; padding: 4px 14px 4px 4px; font-size: .82rem; }
  .header-cta > i{ width: 34px; height: 34px; margin-right: 9px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .fade-up{ opacity: 1; transform: none; }
}