/* Care Home Website - base + section library v0.4
   HIGHER PARK LODGE (16 Sep 2026): cloned from builds/yelverton-care/site/styles/base.css
   (the newest copy of the library). Dual-home machinery stripped on clone: home cards,
   the Our Homes dropdown, the per-home form selector, the review slider and reviews
   page, the film band, fee tables, team cards and the Yelverton type and oak-sprig
   layers (Y1-Y4). Everything HPL-specific lives in the HPL ADDITIONS block at the foot.
   History of the library, as it was before this clone:
   Cloned from builds/elm-lodge/site/styles/base.css (the most evolved copy of the
   library: it carries the ELM ROUND 6 gratwick-standard pass and the ROUND 7 port of
   Gratwick's component set). Everything above the NIGHTINGALE block is shared library
   code and belongs upstream; everything inside that block is either a new component
   this build earned or a Nightingale-preset override, and is marked for promotion.
   No literal client colours live in here: the palette is entirely tokens.css. */

*{ box-sizing:border-box; margin:0; padding:0; }
html{ font-size:112.5%; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ font-family:var(--body); color:var(--ink); background:var(--surface); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img{ display:block; max-width:100%; }
a{ color:var(--primary-ink); text-decoration:none; }
h1,h2,h3{ font-family:var(--display); font-weight:600; line-height:1.05; color:var(--ink); letter-spacing:-.015em; }
h1{ font-size:clamp(2.7rem,6vw,4.6rem); }
h2{ font-size:clamp(2rem,4vw,3.05rem); line-height:1.08; }
h3{ font-size:1.35rem; }
p{ font-size:1.04rem; }
.serif{ font-family:var(--display); font-style:italic; color:inherit; }

/* ---------- width helpers ---------- */
.full{ padding-inline:var(--w1); }
.w2{ padding-inline:var(--w2); }
.hold{ max-width:var(--hold); margin-inline:auto; padding-inline:var(--w1); }
.section{ padding-block:var(--sp); position:relative; }
.band-tint{ background:var(--band-tint); }
.band-accent{ background:var(--accent-tint); }
.band-deep{ background:var(--primary-deep); color:#fff; }
.band-deep h2,.band-deep h3{ color:#fff; }
.eyebrow{ font-size:.76rem; letter-spacing:.22em; text-transform:uppercase; font-weight:800; color:var(--primary-ink); }
.band-deep .eyebrow{ color:var(--accent-soft); }
.band-accent .eyebrow{ color:var(--cta-hover); }
.section-head{ max-width:40rem; }
.section-head.center{ max-width:46rem; margin-inline:auto; text-align:center; }
.section-head .say{ max-width:60ch; }
.section-head.center .say{ margin-inline:auto; }
.section-head h2{ margin-top:.7rem; }
.section-head .say{ margin-top:1rem; color:var(--ink-soft); font-size:1.12rem; }
.band-deep .section-head .say{ color:rgba(255,255,255,.8); }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-family:var(--body);
  font-weight:800; font-size:1rem; padding:1rem 1.7rem; border-radius:999px; background:var(--cta); color:#fff;
  border:2px solid var(--cta); cursor:pointer; transition:background .25s var(--ease), transform .25s var(--ease), border-color .25s; }
.btn:hover{ background:var(--cta-hover); border-color:var(--cta-hover); transform:translateY(-2px); }
.btn.light{ background:#fff; color:var(--primary-ink); border-color:#fff; }
.btn.light:hover{ background:#fff; transform:translateY(-2px); }
.btn.ghost-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.btn.ghost-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn.ghost{ background:transparent; color:var(--primary-ink); border-color:var(--rule); }
.btn.ghost:hover{ background:#fff; border-color:var(--primary-ink); }
.tel-lg{ font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,2.6vw,2rem); color:inherit; letter-spacing:-.01em; }
/* Base row for any pair of buttons. Every .cta-row used to depend on a parent
   (.hero, .cta, .hs-copy) supplying display:flex, so a row placed in a plain
   .section fell back to inline-block and ignored its own justify-content.
   Bug found on both home pages, 13 Aug 2026. Keep this rule first, the
   parent-scoped ones below still win on gap and alignment. */
.cta-row{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }

/* ---------- reveal ---------- */
html.reveal-ready .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
html.reveal-ready .reveal.in, .reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.1s } .reveal.d2{ transition-delay:.2s } .reveal.d3{ transition-delay:.3s }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none } html{ scroll-behavior:auto } }
.no-js .reveal{ opacity:1; transform:none; }

/* ---------- placeholders ---------- */
.ph{ position:relative; background-color:var(--band-tint);
  background-image:linear-gradient(135deg, var(--band-tint), var(--accent-tint)); display:grid; place-items:center;
  overflow:hidden; }
.ph::before{ content:attr(data-label); font-size:.82rem; font-weight:700; color:var(--primary-ink); opacity:.62;
  text-align:center; padding:1rem; max-width:26ch; }

/* ---------- nav (transparent over hero -> solid on scroll) ---------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:100; transition:background .3s var(--ease), box-shadow .3s, border-color .3s; border-bottom:1px solid transparent; }
.nav .bar{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:1.15rem; padding-inline:var(--w1); }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:600; font-size:1.4rem; color:#fff; transition:color .3s; }
.brand .mark{ width:34px; height:34px; border-radius:9px; background:var(--primary); display:grid; place-items:center; color:#fff; font-family:var(--body); font-weight:800; }
.navlinks{ display:flex; align-items:center; gap:2rem; }
/* R6: the links are truly centred on wide screens. The bar is flex
   space-between, and the phone + button side outweighs the brand, which
   used to drag the links about 80px left of the hero text's centre line. */
/* Absolute-centre the links only where the bar is wide enough to hold the full
   home name beside them. Below 1300 they flow naturally between the brand and
   the actions, which is the only way both fit; centring there would drive them
   straight through the wordmark. */
@media (min-width:1300px){
  .nav .bar{ position:relative; }
  .navlinks{ position:absolute; left:50%; transform:translateX(-50%); }
}
/* R6.8: the full home name shows at EVERY width. It used to appear only at
   1420px+, so on a 1366 or 1440 laptop the brand read "Nightingale" alone and
   the site looked inconsistent from one window size to the next. Instead of
   dropping the name, the bar tightens: between roughly 1040 and 1400 the
   wordmark and the links step down a little so the centred links still clear
   the brand and the actions. Centring is untouched. */
.wm-full{ display:inline; }
@media (min-width:1041px) and (max-width:1200px){
  .brand .wm{ font-size:1.04rem; }
  .brand .bird{ width:28px; height:21px; }
  .navlinks{ gap:.95rem; }
  .navlinks a:not(.btn){ font-size:.88rem; }
  .nav-tel{ font-size:.9rem; }
  .nav-actions .btn{ padding:.72rem 1.1rem; font-size:.88rem; }
}
@media (min-width:1201px) and (max-width:1400px){
  .brand .wm{ font-size:1.15rem; }
  .navlinks{ gap:1.15rem; }
  .navlinks a:not(.btn){ font-size:.92rem; }
  .nav-tel{ font-size:.95rem; }
}
@media (min-width:1401px) and (max-width:1560px){
  .navlinks{ gap:1.3rem; }
  .navlinks a:not(.btn){ font-size:.95rem; }
}
@media (max-width:430px){ .brand .wm{ font-size:1.02rem; } }
.navlinks a:not(.btn){ font-weight:700; font-size:1rem; color:rgba(255,255,255,.92); white-space:nowrap; transition:color .3s; }
.navlinks a:not(.btn):hover{ color:#fff; }
.nav-actions{ display:flex; align-items:center; gap:1.4rem; }
.nav-tel{ font-weight:800; color:#fff; white-space:nowrap; transition:color .3s; }
.burger{ display:none; width:46px; height:46px; border:1px solid rgba(255,255,255,.4); border-radius:12px; background:rgba(255,255,255,.08); cursor:pointer; }
.burger span{ display:block; width:20px; height:2px; background:#fff; margin:4px auto; border-radius:2px; transition:background .3s; }
.mobile-menu{ display:none; }
/* scrolled state */
.nav.scrolled{ background:rgba(251,248,240,.94); backdrop-filter:saturate(1.1) blur(10px); border-bottom-color:var(--rule); box-shadow:0 10px 30px -24px rgba(24,47,39,.4); }
.nav.scrolled .bar{ padding-block:.85rem; }
.nav.scrolled .brand{ color:var(--primary-ink); }
.nav.scrolled .navlinks a:not(.btn),.nav.scrolled .nav-tel{ color:var(--ink); }
.nav.scrolled .navlinks a:not(.btn):hover{ color:var(--primary-ink); }
.nav.scrolled .burger{ border-color:var(--rule); background:#fff; }
.nav.scrolled .burger span{ background:var(--ink); }

/* ---------- hero (full-bleed) ---------- */
.hero{ position:relative; min-height:92vh; display:grid; align-items:center; }
.hero .bg{ position:absolute; inset:0; }
.hero .bg .ph{ width:100%; height:100%; }
.hero .bg::after{ content:""; position:absolute; inset:0; background:var(--scrim); }
.hero .inner{ position:relative; z-index:2; text-align:center; max-width:60rem; margin-inline:auto; padding-inline:var(--w1); color:#fff; padding-top:5rem; }
.hero .eyebrow{ color:rgba(255,255,255,.85); }
.hero h1{ color:#fff; margin-top:1rem; text-shadow:0 2px 30px rgba(0,0,0,.25); }
.hero h1 .serif{ color:var(--accent-on-photo); }
.hero .sub{ color:rgba(255,255,255,.92); font-size:clamp(1.1rem,1.8vw,1.3rem); margin-top:1.3rem; max-width:44ch; margin-inline:auto; }
.hero .cta-row{ margin-top:2.2rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.hero .scroll-cue{ position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); z-index:2; color:rgba(255,255,255,.8); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; }

/* ---------- values triple (premium) ---------- */
.values-grid{ margin-top:2.6rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.value{ background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:2.4rem 2rem;
  box-shadow:var(--shadow-sm); text-align:center; position:relative; overflow:hidden; }
.value::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--primary); opacity:.85; }
.value .ico{ width:58px; height:58px; margin:0 auto 1.2rem; border-radius:50%; background:var(--band-tint); display:grid; place-items:center; color:var(--primary-ink); }
.value h3{ font-size:1.4rem; }
.value p{ margin-top:.7rem; color:var(--ink-soft); font-size:1rem; }

/* ---------- care (accent, distinct) ---------- */
.care-grid{ margin-top:2.6rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.care-card{ background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  border:1px solid var(--rule); display:flex; flex-direction:column; }
.care-card .care-photo{ aspect-ratio:3/2; }
.care-card .care-body{ padding:1.4rem 1.6rem 1.7rem; }
.care-card .tag{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; font-weight:800; color:var(--cta); }
.care-card h3{ font-size:1.35rem; margin-top:.3rem; }
.care-card p{ margin-top:.55rem; color:var(--ink-soft); font-size:1rem; }
.care-foot{ margin:2.4rem auto 0; max-width:74ch; text-align:center; color:var(--ink-soft); text-wrap:balance; }
.care-foot a{ color:var(--cta-hover); font-weight:800; }

/* ---------- funding (premium two-col) ---------- */
.funding-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
.funding-copy .lede{ margin-top:1rem; color:var(--ink-soft); font-size:1.1rem; max-width:46ch; }
.funding-copy .welcome{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.4rem; background:#fff;
  border:1px solid var(--rule); color:var(--primary-ink); font-weight:800; padding:.65rem 1.15rem; border-radius:999px; box-shadow:var(--shadow-sm); }
.fsteps{ margin-top:2rem; display:flex; flex-direction:column; gap:1.2rem; }
.fstep{ display:flex; gap:1.1rem; align-items:flex-start; }
.fstep .n{ flex:none; width:44px; height:44px; border-radius:50%; background:var(--primary-ink); color:#fff; display:grid; place-items:center; font-weight:800; }
.fstep h3{ font-family:var(--body); font-weight:800; font-size:1.1rem; }
.fstep p{ margin-top:.25rem; color:var(--ink-soft); font-size:1rem; }
.funding-photo{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow); min-height:360px; }

/* ---------- CTA (light, warm) ---------- */
.cta{ background:linear-gradient(160deg, var(--surface) 0%, var(--accent-tint) 100%); text-align:center; }
.cta h2{ max-width:20ch; margin-inline:auto; }
.cta p{ margin-top:.9rem; color:var(--ink-soft); font-size:1.12rem; }
.cta .cta-row{ margin-top:1.8rem; display:flex; gap:1.4rem; justify-content:center; align-items:center; flex-wrap:wrap; }
.cta .tel-lg{ color:var(--primary-ink); }

/* ---------- footer ---------- */
.foot{ background:var(--primary-deep); color:rgba(255,255,255,.86); }
.foot .cols{ display:grid; grid-template-columns:repeat(3,1fr) 1.2fr; gap:2.2rem; padding-block:3.6rem; padding-inline:var(--w2); }
.foot h4{ color:#fff; font-family:var(--body); font-weight:800; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.9rem; }
.foot a{ color:rgba(255,255,255,.86); display:block; margin-bottom:.4rem; }
/* Jon, 6 Sep 2026: footer links underline on hover. text-underline-offset keeps
   the rule clear of the descenders, and the colour lift is kept so the two
   signals arrive together. */
.foot a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.foot .fcol p{ color:rgba(255,255,255,.72); font-size:.95rem; }
.foot-legal{ border-top:1px solid rgba(255,255,255,.14); }
.foot-legal .row{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-block:1.3rem; padding-inline:var(--w2); font-size:.85rem; color:rgba(255,255,255,.66); }
.foot-legal a{ color:rgba(255,255,255,.8); display:inline; }
.credit a{ color:var(--accent-soft); font-weight:700; }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .values-grid,.homes-grid,.care-grid{ grid-template-columns:1fr 1fr; }
  .funding-grid{ grid-template-columns:1fr; }
  .funding-photo{ aspect-ratio:16/10; order:-1; }
  .foot .cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .navlinks{ display:none; }
  .nav-actions .nav-tel,.nav-actions .btn{ display:none; }
  .burger{ display:block; }
  .mobile-menu{ display:none; position:absolute; left:0; right:0; top:100%; background:var(--surface); border-bottom:1px solid var(--rule); box-shadow:var(--shadow-sm); padding:.6rem var(--w1) 1.4rem; }
  .mobile-menu.open{ display:flex; flex-direction:column; }
  .mobile-menu a{ padding:.9rem .2rem; font-weight:700; border-bottom:1px solid var(--rule); color:var(--ink); }
  .mobile-menu a.btn{ margin-top:1rem; border-bottom:none; color:#fff; justify-content:center; }
  .values-grid,.homes-grid,.care-grid{ grid-template-columns:1fr; }
  .home-card{ aspect-ratio:4/3; }
  .home-card .reveal-panel{ opacity:1; transform:none; } /* touch: always show */
  .home-card .scrim{ background:linear-gradient(180deg, rgba(24,47,39,.1) 30%, rgba(24,47,39,.85) 100%); }
  .foot .cols{ grid-template-columns:1fr 1fr; gap:1.6rem; }
  h1{ font-size:clamp(2.4rem,9vw,3.2rem); }
}
@media (max-width:430px){ .foot .cols{ grid-template-columns:1fr; } }

/* ============ INDIVIDUAL HOME PAGE ============ */
.hero.compact{ min-height:74vh; }
.hero .home-place{ display:inline-block; }

/* key-info bar under hero */
.keyinfo{ background:var(--card); border-bottom:1px solid var(--rule); }
.keyinfo .row{ display:flex; align-items:center; justify-content:center; gap:1.3rem; flex-wrap:wrap; padding-block:1.5rem; padding-inline:var(--w1); }
.ki-label{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:var(--ink-soft); }
.keyinfo .kchips{ display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; }
.kchip{ font-size:.82rem; font-weight:800; color:var(--primary-ink); background:var(--band-tint); padding:.5rem 1.05rem; border-radius:999px; }

/* about this home (image 8/9 layout) */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.script{ font-family:var(--display); font-style:italic; font-size:1.5rem; color:var(--cta); }
.about-copy h2{ margin-top:.2rem; text-transform:uppercase; letter-spacing:.06em; }
.about-copy .body{ margin-top:1.2rem; color:var(--ink-soft); font-size:1.08rem; max-width:48ch; }
.cs-title{ margin-top:2rem; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:var(--ink); padding-bottom:.8rem; border-bottom:1px solid var(--rule); }
.cs-grid{ margin-top:1.1rem; display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.cs-item{ display:flex; align-items:center; gap:.6rem; background:var(--surface); border:1px solid var(--rule); border-radius:12px; padding:.7rem 1rem; font-weight:700; color:var(--ink); font-size:.95rem; }
.cs-item .dot{ width:8px; height:8px; border-radius:50%; background:var(--cta); flex:none; }
.about-cta{ margin-top:1.9rem; display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.about-cta .tel{ font-weight:800; color:var(--primary-ink); }
.framed-wrap{ position:relative; }
.framed-wrap::before{ content:""; position:absolute; inset:0; transform:translate(22px,22px); border:1.5px solid var(--cta); border-radius:var(--radius); z-index:0; opacity:.55; }
.framed{ position:relative; z-index:1; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow); min-height:420px; }
.framed-wrap.sm .framed{ aspect-ratio:1/1; min-height:0; }
/* .wide: for a photograph of a BUILDING. The 4/5 default is built for interiors
   and people, where a portrait crop flatters; on a wide elevation it cuts both
   ends off the house and leaves a wall. 4/3 keeps about nine tenths of the
   frame's width, so the whole building reads. */
.framed-wrap.wide .framed{ aspect-ratio:4/3; min-height:0; }
@media (max-width:760px){ .framed-wrap::before{ transform:translate(12px,12px); } }

/* highlights */
.hl-grid{ margin-top:2.4rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.hl{ background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--rule); }
.hl .hl-img{ aspect-ratio:3/2; }
.hl .hl-body{ padding:1.2rem 1.3rem 1.4rem; }
.hl h3{ font-size:1.2rem; }
.hl p{ margin-top:.4rem; color:var(--ink-soft); font-size:.96rem; }

/* feature duo (rooms) */
.feature-duo{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.6rem); align-items:center; }
.feature-duo.flip .fd-photo{ order:2; }
.fd-photo{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-sm); min-height:320px; }
.fd-copy .body{ margin-top:1rem; color:var(--ink-soft); font-size:1.06rem; max-width:46ch; }
.amenities{ margin-top:1.4rem; display:flex; flex-wrap:wrap; gap:.6rem; }

/* life / activities band */
.act-band{ margin-top:2.4rem; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:1rem; }
.act-band .act{ border-radius:var(--radius-sm); overflow:hidden; }
.act-band .act.tall{ grid-row:span 2; }

/* location */
.loc-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(2rem,4vw,3.6rem); align-items:stretch; }
.loc-map{ border-radius:var(--radius); overflow:hidden; min-height:360px; }
.loc-details h3{ font-size:1.35rem; }
.loc-details .li{ margin-top:1.1rem; }
.loc-details .li b{ display:block; font-family:var(--body); font-weight:800; color:var(--ink); font-size:.95rem; }
.loc-details .li span{ color:var(--ink-soft); }

/* cqc at bottom (honest, neutral) */
.cqc-card{ display:flex; align-items:center; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:1.6rem 2rem; box-shadow:var(--shadow-sm); }
.cqc-card .cqc-txt b{ font-family:var(--body); font-weight:800; }
.cqc-card .cqc-txt p{ color:var(--ink-soft); margin-top:.3rem; font-size:.96rem; }

/* back to homes */
.svc-return{ text-align:center; padding-block:2.4rem; }
.svc-return a{ font-weight:800; color:var(--primary-ink); border:1px solid var(--rule); border-radius:999px; padding:.65rem 1.4rem; display:inline-block; }
.svc-return a:hover{ background:var(--band-tint); }

@media (max-width:1000px){
  .about-grid,.feature-duo,.loc-grid{ grid-template-columns:1fr; }
  .feature-duo.flip .fd-photo{ order:-1; }
  .framed{ aspect-ratio:16/11; order:-1; }
  .hl-grid{ grid-template-columns:1fr 1fr; }
  .act-band{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; }
  .act-band .act.tall{ grid-row:span 1; }
}
@media (max-width:760px){
  .hl-grid,.cs-grid{ grid-template-columns:1fr; }
  .keyinfo .row{ gap:.8rem; }
}

/* ============ OUR CARE PAGE ============ */
.approach-copy h2{ margin-top:.4rem; }
.approach-copy .body{ margin-top:1.1rem; color:var(--ink-soft); font-size:1.08rem; max-width:48ch; }
.approach-copy .body + .body{ margin-top:1rem; }

/* care accordion + swapping photo */
.care-accordion{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(2rem,4vw,4rem); align-items:start; margin-top:2.4rem; }
.ca-photo{ position:sticky; top:110px; border-radius:var(--radius); overflow:hidden; aspect-ratio:1/1; box-shadow:var(--shadow); }
.ca-photo .ca-img{ position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease); }
.ca-photo .ca-img.active{ opacity:1; }
.acc{ display:flex; flex-direction:column; }
.acc-item{ border-bottom:1px solid var(--rule); }
.acc-item:first-child{ border-top:1px solid var(--rule); }
.acc-head{ width:100%; text-align:left; background:none; border:0; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.35rem 0; font-family:var(--display); font-weight:600; font-size:1.32rem; color:var(--ink); }
.acc-head .pm{ position:relative; width:22px; height:22px; flex:none; }
.acc-head .pm::before,.acc-head .pm::after{ content:""; position:absolute; background:var(--cta); border-radius:2px; transition:transform .3s var(--ease); }
.acc-head .pm::before{ left:0; right:0; top:50%; height:2px; transform:translateY(-50%); }
.acc-head .pm::after{ top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%); }
.acc-item.open .acc-head .pm::after{ transform:translateX(-50%) scaleY(0); }
.acc-body{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
.acc-body-inner{ padding-bottom:1.5rem; color:var(--ink-soft); font-size:1.05rem; max-width:52ch; }
.acc-body-inner .avail{ margin-top:.9rem; font-size:.82rem; font-weight:800; letter-spacing:.02em; color:var(--primary-ink); }

/* day timeline */
.timeline{ margin-top:2.6rem; display:grid; gap:0; max-width:720px; margin-inline:auto; }
.tl-item{ display:grid; grid-template-columns:auto 1fr; gap:1.4rem; align-items:start; position:relative; padding-bottom:1.8rem; }
.tl-num{ width:54px; height:54px; border-radius:50%; background:var(--primary-ink); color:#fff; display:grid; place-items:center; font-weight:800; font-family:var(--body); flex:none; z-index:1; }
.tl-item::before{ content:""; position:absolute; left:27px; top:54px; bottom:0; width:2px; background:var(--rule); }
.tl-item:last-child{ padding-bottom:0; }
.tl-item:last-child::before{ display:none; }
.tl-body{ padding-top:.5rem; }
.tl-body h3{ font-family:var(--body); font-weight:800; font-size:1.2rem; }
.tl-body p{ margin-top:.3rem; color:var(--ink-soft); }

/* funding mini (condensed) */
.fund-mini{ text-align:center; }
.fund-mini .welcome{ display:inline-flex; align-items:center; gap:.5rem; margin-top:1.2rem; background:#fff; border:1px solid var(--rule); color:var(--primary-ink); font-weight:800; padding:.65rem 1.15rem; border-radius:999px; box-shadow:var(--shadow-sm); }
.fund-mini .flink{ display:block; margin-top:1.4rem; font-weight:800; color:var(--cta-hover); }

/* faq */
.faq{ max-width:820px; margin:2.4rem auto 0; }
.faq .acc-head{ font-family:var(--body); font-weight:800; font-size:1.12rem; padding:1.2rem 0; }
.faq .acc-body-inner{ max-width:none; }

@media (max-width:900px){
  .care-accordion{ grid-template-columns:1fr; }
  .ca-photo{ position:relative; top:0; aspect-ratio:16/10; min-height:0; order:-1; }
}

/* ============ REAL IMAGES ============ */
.cover{ display:block; width:100%; height:100%; object-fit:cover; }
.brand-logo{ height:42px; width:auto; display:block; filter:drop-shadow(0 2px 10px rgba(0,0,0,.45)); transition:filter .3s var(--ease); }
.nav.scrolled .brand-logo{ filter:none; }
.hero .bg img.cover{ position:absolute; inset:0; object-position:center 32%; }
/* page transition REMOVED (round 6). This rule hid the entire site behind
   body{opacity:0} and depended on script.js adding .loaded; a blocked or
   failed script.js rendered every page blank. Replaced by the .veil element,
   which a CSS animation always clears. See ROUND 6 section 6.5. */
/* two-up gallery variant (for pages with just a couple of life photos) */
.act-band.pair{ grid-template-columns:1fr 1fr; grid-auto-rows:auto; }
.act-band.pair .act{ aspect-ratio:3/2; }
@media (max-width:760px){ .act-band.pair{ grid-template-columns:1fr; } }

/* ============ CONTACT PAGE ============ */
.contact-wrap{ max-width:1560px; margin-inline:auto; padding-inline:var(--w1); }
.contact-wrap .section-head{ margin-bottom:.6rem; }
.contact-grid{ display:grid; grid-template-columns:1.6fr .9fr; gap:clamp(2.4rem,4.5vw,5rem); align-items:start; margin-top:2.6rem; }
.enquiry{ background:var(--card); border-radius:var(--radius); padding:clamp(1.8rem,3.2vw,3.2rem); box-shadow:var(--shadow); }
.step-label{ font-family:var(--body); font-weight:800; color:var(--ink); font-size:1.05rem; margin-bottom:.3rem; display:flex; align-items:center; gap:.6rem; }
.step-label .step-n{ width:26px; height:26px; border-radius:50%; background:var(--primary-ink); color:#fff; font-size:.85rem; display:grid; place-items:center; flex:none; }
.step-hint{ color:var(--ink-soft); font-size:.92rem; margin:.15rem 0 1rem 2.15rem; }
.field{ margin-bottom:1.25rem; }
.field-row + .field, .field-row + .field-row{ margin-top:0; }
.field > label{ display:block; font-family:var(--body); font-weight:700; font-size:.9rem; color:var(--ink); margin-bottom:.4rem; }
.field .opt{ color:var(--ink-soft); font-weight:600; }
.field input, .field select, .field textarea{ width:100%; font-family:var(--body); font-size:1rem; color:var(--ink); background:var(--surface); border:1.5px solid var(--rule); border-radius:10px; padding:.8rem .9rem; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--primary-ink); box-shadow:0 0 0 3px var(--focus-ring); }
/* The focus ring on a form field used to be rgba(--shadow-rgb,.20), a 20% warm
   grey halo, which on a light field is close to invisible: keyboard users could
   not tell which box they were in. It is now a token, set to the brand accent at
   a strength that actually reads, and the border deepens to the accent ink at
   the same time so there are two signals rather than one faint one. Older, less
   dexterous visitors are the audience here, so this is conversion, not
   compliance. PROMOTE UPSTREAM: every build in the library shipped the faint
   version. */
.field textarea{ min-height:120px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.consent{ display:flex; gap:.65rem; align-items:flex-start; font-size:.86rem; color:var(--ink-soft); margin:.4rem 0 1.3rem; line-height:1.5; }
.consent input{ width:auto; margin-top:.15rem; flex:none; }
.consent a{ color:var(--primary-ink); font-weight:700; text-decoration:underline; }
.enq-submit{ width:100%; justify-content:center; }
.enq-success{ display:none; text-align:center; padding:1.5rem .5rem; }
.enq-success.show{ display:block; }
.enq-success .es-ico{ width:64px; height:64px; border-radius:50%; background:var(--band-tint); color:var(--primary-ink); display:grid; place-items:center; margin:0 auto 1.1rem; }
.enq-success h3{ font-size:1.5rem; }
.enq-success p{ color:var(--ink-soft); margin-top:.6rem; max-width:42ch; margin-inline:auto; }
.enq-success .sh-home{ color:var(--cta-hover); font-weight:800; }
/* aside: prefer to talk */
.contact-aside{ position:sticky; top:110px; }
.contact-aside > h3{ font-size:1.35rem; margin-bottom:.4rem; }
.contact-aside > p{ color:var(--ink-soft); margin-bottom:1.4rem; }
.cblock{ background:var(--card); border:1px solid var(--rule); border-radius:var(--radius-sm); padding:1.2rem 1.3rem; box-shadow:var(--shadow-sm); }
.cblock + .cblock{ margin-top:.9rem; }
.cblock h4{ font-family:var(--display); font-weight:600; font-size:1.18rem; color:var(--ink); }
.cblock .place{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--ink-soft); display:block; margin-bottom:.15rem; }
.cblock .crow{ display:flex; align-items:flex-start; gap:.6rem; margin-top:.8rem; color:var(--ink-soft); font-size:.95rem; }
.cblock .crow svg{ flex:none; color:var(--primary-ink); margin-top:.15rem; }
.cblock .crow a{ color:var(--ink); font-weight:700; }
.cblock .crow a:hover{ color:var(--primary-ink); }
.aside-note{ margin-top:1.2rem; background:var(--band-tint); border-radius:var(--radius-sm); padding:1.1rem 1.3rem; color:var(--primary-deep); font-size:.95rem; }
.aside-note b{ font-family:var(--body); }
@media (max-width:1000px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-aside{ position:static; }
}
@media (max-width:620px){
  .home-select{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; gap:0; }
}

/* ============================================================
   ELM PRESET ADDITIONS (preset 3 "Elm", single-home, Homely)
   New sections + palette-neutral overrides of teal hardcodes.
   PROMOTE these upstream into the canonical Vitality base.css
   so future clones inherit them (see BUILD_NOTES).
   ============================================================ */

/* --- neutralise teal-specific hardcodes from v0.2 --- */
.band-deep .eyebrow{ color:var(--accent-soft); }
.credit a{ color:var(--accent-soft); }
.field input:focus, .field select:focus, .field textarea:focus{ box-shadow:0 0 0 3px var(--focus-ring); }
.nav.scrolled{ box-shadow:0 10px 30px -24px rgba(24,47,39,.45); }
.hero h1 .serif{ color:var(--accent-on-photo); }

/* --- nav: solid from the top (used on the light split-hero home page) --- */
.nav.solid{ background:rgba(251,248,240,.94); backdrop-filter:saturate(1.1) blur(10px);
  border-bottom-color:var(--rule); box-shadow:0 10px 30px -24px rgba(24,47,39,.4); }
.nav.solid .brand{ color:var(--primary-ink); }
.nav.solid .navlinks a:not(.btn), .nav.solid .nav-tel{ color:var(--ink); }
.nav.solid .navlinks a:not(.btn):hover{ color:var(--primary-ink); }
.nav.solid .burger{ border-color:var(--rule); background:#fff; }
.nav.solid .burger span{ background:var(--ink); }

/* --- brand wordmark + elm-leaf mark (inline SVG, currentColor) --- */
.brand{ gap:.55rem; }
.brand .leaf{ width:30px; height:30px; flex:none; color:var(--primary); display:block; }
.nav:not(.scrolled):not(.solid) .brand .leaf{ color:#fff; filter:drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.brand .wm{ font-family:var(--display); font-weight:600; letter-spacing:.005em; line-height:1; }

/* --- SPLIT-COLLAGE HERO (D1, light background) --- */
.hero-split{ position:relative; padding-top:clamp(7rem,12vh,9.5rem); padding-bottom:var(--sp);
  background:linear-gradient(180deg, var(--band-tint) 0%, var(--surface) 78%); overflow:hidden; }
.hs-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.hs-copy .eyebrow{ color:var(--primary-ink); }
.hs-copy h1{ margin-top:1rem; }
.hs-copy h1 .serif{ color:var(--cta); }
.hs-copy .sub{ margin-top:1.3rem; color:var(--ink-soft); font-size:clamp(1.1rem,1.7vw,1.28rem); max-width:42ch; }
.hs-copy .cta-row{ margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap; }
.hs-trust{ margin-top:1.9rem; display:flex; align-items:center; gap:.7rem; color:var(--ink-soft); font-size:.96rem; }
.hs-trust .cqc-dot{ flex:none; width:38px; height:38px; border-radius:50%; background:var(--band-tint);
  border:1px solid var(--rule); display:grid; place-items:center; color:var(--primary-ink); }
.hs-trust b{ color:var(--ink); font-family:var(--body); font-weight:800; }
.hs-collage{ position:relative; min-height:clamp(360px,52vw,540px); }
.hs-ph{ position:absolute; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.hs-ph.a{ inset:0 22% 26% 0; }
.hs-ph.b{ width:52%; right:0; bottom:0; aspect-ratio:4/5; border:6px solid var(--surface); }
.hs-ph .ph, .hs-ph img.cover{ width:100%; height:100%; }
.hs-badge{ position:absolute; left:-8px; bottom:16%; z-index:3; background:var(--card); border:1px solid var(--rule);
  border-radius:14px; box-shadow:var(--shadow-sm); padding:.7rem 1rem; display:flex; align-items:center; gap:.6rem;
  font-weight:800; color:var(--primary-ink); font-size:.92rem; }
.hs-badge .n{ font-family:var(--display); font-size:1.5rem; color:var(--cta); line-height:1; }

/* --- STATS STRIP (D2 first section) --- */
.stats-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
.stat{ background:var(--card); border:1px solid var(--rule); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm); padding:1.5rem 1.4rem; text-align:left; position:relative; }
.stat::before{ content:""; position:absolute; left:1.4rem; top:0; width:34px; height:3px; background:var(--primary); border-radius:0 0 3px 3px; }
.stat .big{ font-family:var(--display); font-weight:600; font-size:clamp(1.6rem,2.4vw,2.1rem); color:var(--ink); line-height:1.05; }
.stat .lab{ margin-top:.4rem; color:var(--ink-soft); font-size:.96rem; }
.stat a.big-link{ color:inherit; }

/* --- EDITORIAL BEAT (mid-page emotional moment) --- */
.beat{ text-align:center; }
.beat .kicker{ color:var(--cta); font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; }
.beat blockquote{ font-family:var(--display); font-weight:500; font-style:italic;
  font-size:clamp(1.55rem,3.2vw,2.5rem); line-height:1.32; color:var(--ink); max-width:22ch;
  margin:1.1rem auto 0; }
.beat blockquote b{ font-style:normal; font-weight:600; color:var(--primary-ink); }
.beat .by{ margin-top:1.4rem; color:var(--ink-soft); font-size:1rem; }

/* --- simple photo-strip (life) --- */
.strip3{ margin-top:2.4rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.strip3 .s{ border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:3/4; }
.strip3 .s.wide{ aspect-ratio:3/4; }

/* --- horizontal steps (arranging a visit) --- */
.steps-row{ margin-top:2.4rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; counter-reset:step; }
.steps-row .st{ position:relative; padding-top:.4rem; }
.steps-row .st .n{ width:44px; height:44px; border-radius:50%; background:var(--primary-ink); color:#fff;
  display:grid; place-items:center; font-weight:800; margin-bottom:.9rem; }
.steps-row .st h3{ font-family:var(--body); font-weight:800; font-size:1.08rem; }
.steps-row .st p{ margin-top:.3rem; color:var(--ink-soft); font-size:.98rem; }

/* --- fade-scale reveal (D7 for this preset) --- */
.reveal.scale{ transform:translateY(20px) scale(.975); }
.reveal.scale.in{ transform:none; }

/* --- CQC honest chip, richer (about page + trust band) --- */
.cqc-chip{ display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; background:var(--card);
  border:1px solid var(--rule); border-radius:var(--radius); padding:1.5rem 1.8rem; box-shadow:var(--shadow-sm); }
.cqc-chip .seal{ flex:none; width:60px; height:60px; border-radius:50%; background:var(--band-tint);
  border:1px solid var(--rule); display:grid; place-items:center; color:var(--primary-ink); }
.cqc-chip .ct{ flex:1; min-width:220px; }
.cqc-chip .ct b{ font-family:var(--body); font-weight:800; color:var(--ink); font-size:1.08rem; }
.cqc-chip .ct p{ color:var(--ink-soft); margin-top:.3rem; font-size:.95rem; }
.band-deep .cqc-chip{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); }
.band-deep .cqc-chip .seal{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.2); color:#fff; }
.band-deep .cqc-chip .ct b{ color:#fff; }
.band-deep .cqc-chip .ct p{ color:rgba(255,255,255,.8); }

/* --- cookie notice --- */
.cookie{ position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:200; max-width:640px; margin-inline:auto;
  background:var(--primary-deep); color:rgba(255,255,255,.9); border-radius:14px; box-shadow:var(--shadow);
  padding:1rem 1.2rem; display:flex; align-items:center; gap:1rem; font-size:.92rem; }
.cookie.hide{ display:none; }
.cookie p{ font-size:.92rem; }
.cookie a{ color:var(--accent-soft); text-decoration:underline; }
.cookie button{ flex:none; font-family:var(--body); font-weight:800; font-size:.9rem; border:0; cursor:pointer;
  background:#fff; color:var(--primary-deep); border-radius:999px; padding:.55rem 1.1rem; }

/* --- prose (privacy page) --- */
.prose{ max-width:70ch; }
.prose h2{ font-size:1.5rem; margin-top:2.2rem; }
.prose h3{ margin-top:1.6rem; }
.prose p, .prose li{ color:var(--ink-soft); font-size:1.02rem; margin-top:.8rem; }
.prose ul{ margin-top:.6rem; padding-left:1.2rem; }
.prose a{ color:var(--primary-ink); font-weight:700; text-decoration:underline; }

/* --- Elm responsive --- */
@media (max-width:1000px){
  .hs-grid{ grid-template-columns:1fr; gap:2.4rem; }
  .hs-collage{ min-height:clamp(320px,80vw,460px); order:-1; }
  .stats-strip{ grid-template-columns:1fr 1fr; }
  .steps-row{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .stats-strip{ grid-template-columns:1fr 1fr; }
  .strip3{ grid-template-columns:1fr; }
  .steps-row{ grid-template-columns:1fr; }
  .hs-ph.a{ inset:0 26% 30% 0; }
}

/* --- Elm small utilities --- */
.care-grid.c4{ grid-template-columns:repeat(4,1fr); }
.foot .fmuted{ color:rgba(255,255,255,.6); display:block; margin-bottom:.4rem; }
.about-copy .body + .body{ margin-top:1rem; }
.lede-list{ margin-top:1.3rem; display:flex; flex-direction:column; gap:.7rem; }
.lede-list .li2{ display:flex; gap:.7rem; align-items:flex-start; color:var(--ink-soft); font-size:1.02rem; }
.lede-list .li2 svg{ flex:none; color:var(--primary-ink); margin-top:.25rem; }
@media (max-width:1000px){ .care-grid.c4{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .care-grid.c4{ grid-template-columns:1fr; } }

/* --- Elm fix: release fixed photo min-heights on small screens so
   aspect-ratio drives width (prevents min-width overflow at <=1000/390) --- */
@media (max-width:1000px){
  .framed{ min-height:0; }
  .framed-wrap.sm .framed{ min-height:0; }
  .funding-photo{ min-height:0; }
  .fd-photo{ min-height:0; }
  .loc-map{ min-height:0; }
}

/* --- Elm: keep hero placeholders clean (hide slot label behind hero titles) --- */
.hero .bg .ph::before{ display:none; }

/* ============================================================
   ELM ROUND 2 - premium polish + consistency fixes
   (promote upstream to Vitality base.css)
   ============================================================ */

/* C1+C3 - placeholders always fill their slot AND show a neat, uniform
   bottom label strip (fixes the trim showing through + mismatched "banners") */
.ph{ position:relative; width:100%; height:100%; }
.framed, .fd-photo, .funding-photo, .hl-img, .care-photo, .ca-img, .strip3 .s, .loc-map{ position:relative; }
.framed .ph, .fd-photo .ph, .funding-photo .ph, .hl-img .ph, .care-photo .ph,
.ca-img .ph, .strip3 .s .ph, .loc-map .ph{ position:absolute; inset:0; }
.ph::before{ content:attr(data-label); position:absolute; left:0; right:0; bottom:0; top:auto;
  height:2.2rem; line-height:2.2rem; padding:0 1rem; margin:0; max-width:100%;
  text-align:center; font-size:.72rem; font-weight:700; letter-spacing:.01em;
  color:var(--primary-ink); background:rgba(255,255,255,.82); backdrop-filter:blur(2px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:1; }
.hero .bg .ph::before{ display:none; }

/* C1 - clay trim genuinely behind the photo (opaque photo now occludes top/left) */
.framed-wrap{ position:relative; z-index:0; }
.framed-wrap::before{ inset:auto; top:22px; left:22px; right:-22px; bottom:-22px;
  transform:none; opacity:.6; z-index:0; }
.framed{ z-index:1; background:var(--card); }
.framed-wrap.sm .framed{ background:var(--card); }
@media (max-width:760px){ .framed-wrap::before{ top:12px; left:12px; right:-12px; bottom:-12px; } }

/* C2 - equal-height cards; text length no longer changes box size */
.values-grid, .care-grid, .hl-grid{ align-items:stretch; }
.value, .care-card, .hl{ display:flex; flex-direction:column; height:100%; }
.value{ justify-content:flex-start; }
.value h3 + p{ margin-top:auto; padding-top:.7rem; }
.care-card .care-body, .hl .hl-body{ display:flex; flex-direction:column; flex:1; }
.care-card .care-body p, .hl .hl-body p{ margin-top:.55rem; }

/* C5 - nav link underline slide + consistent focus rings */
/* Direct children only. As a descendant selector this also underlined the links
   inside the "Our Homes" panel, which looked wrong in a dropdown (Jon, 13 Aug 2026). */
.navlinks > a:not(.btn){ position:relative; }
.navlinks > a:not(.btn)::after{ content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px;
  background:var(--cta); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease); }
.navlinks > a:not(.btn):hover::after, .navlinks > a:not(.btn)[aria-current]::after{ transform:scaleX(1); }
.navdrop-m a::after{ display:none; }
a:focus-visible, .btn:focus-visible, button:focus-visible, .home-opt input:focus-visible + label{
  outline:2px solid var(--primary-ink); outline-offset:3px; border-radius:6px; }
.nav:not(.scrolled):not(.solid) .navlinks a:focus-visible,
.nav:not(.scrolled):not(.solid) .nav-tel:focus-visible{ outline-color:#fff; }

/* ============================================================
   ELM ROUND 3 - hero heights (superseded by ROUND 6 below)
   ============================================================ */

/* ============================================================
   ELM ROUND 5 - uniform card photo height (image tops must line up)
   The flex-column cards were sizing the photo to each image's
   natural height; pin the photo to its aspect box and fill it.
   ============================================================ */
.care-card .care-photo, .hl .hl-img{ flex:0 0 auto; }
.care-card .care-photo > img.cover, .hl .hl-img > img.cover{ position:absolute; inset:0; width:100%; height:100%; }

/* ============================================================
   ELM ROUND 6 - the gratwick-standard pass (26 Jul 2026)
   PROMOTE UPSTREAM: every block in here is generic. Copy into
   the Vitality base.css so future clones inherit the fixes.
   ============================================================ */

/* --- 6.1 hero system: gratwick two-height, measured scrim ----
   Home hero taller; every inner page shares one compact hero.
   Phones hold the inner hero to ~58vh so the fold shows content. */
.hero{ min-height:clamp(520px, 80vh, 760px); }
/* R6: support-page heroes brought up close to the home hero's presence */
.hero.compact{ min-height:clamp(520px, 78vh, 730px); }
@media (max-width:640px){
  .hero.compact{ min-height:clamp(460px, 64vh, 580px); }
}

/* Measured scrim. The hero headline sits mid-band where the old
   gradient was weakest (.40), so white sub-copy fell to 2.5:1 on
   the lightest pixels. Deepen the mid stop, add an elliptical
   focus behind the text block, and take a little brightness and
   saturation out of the photograph itself. Target, verified by
   sampling the headline box: lightest pixel luminance <= 0.18,
   which clears 3:1 for the accent and 4.5:1 for white sub-copy. */
.hero .bg > img.cover, .hero .bg > .ph{ filter:saturate(.86) brightness(.80); }
.hero .bg::after{
  background:
    radial-gradient(ellipse 80% 64% at 50% 46%, rgba(16,27,20,.60) 0%, rgba(16,27,20,.34) 55%, transparent 80%),
    var(--scrim);
}

/* Accent over photographs needs real chroma. var(--accent-on-photo) was a pale
   tint that read as washed-out white; this is unmistakably the
   clay accent and still clears 3:1 at hero size. */
.hero h1 .serif{ color:var(--accent-on-photo); }

/* --- 6.2 nav: no overflow anywhere between 700 and 1536 -------
   The old burger breakpoint was 760px, but the full bar stopped
   fitting at about 1130px: the Enquire button ran off-screen and
   body{overflow-x:hidden} swallowed the evidence. Shed the tel
   number first, then switch to the drawer while the bar still
   fits. */
@media (max-width:1240px){
  .navlinks{ gap:1.5rem; }
  .nav .bar{ gap:1rem; }
}
@media (max-width:1160px){
  .nav-tel{ display:none; }
}
@media (max-width:1040px){
  .navlinks{ display:none; }
  .nav-actions .btn{ display:none; }
  .burger{ display:block; }
  .mobile-menu{ display:none; }
  .mobile-menu.open{ display:flex; }
}

/* --- 6.3 anchors must clear the fixed bar -------------------- */
[id]{ scroll-margin-top:156px; }
@media (max-width:1040px){ [id]{ scroll-margin-top:120px; } }

/* --- 6.4 dense rows get quiet separation --------------------
   Four and five column text rows mash together without help:
   hairlines in the gutters, faded at both ends, and headings in
   a fixed two-line box so every paragraph starts level. */
.steps-row > .st, .fsteps > .fstep, .timeline > .tl-item{ position:relative; }
@media (min-width:861px){
  .steps-row{ gap:2.6rem; }
  .steps-row > .st + .st::before,
  .fsteps > .fstep + .fstep::before{
    content:""; position:absolute; left:-1.3rem; top:6%; bottom:6%; width:1px;
    background:linear-gradient(180deg, transparent, var(--rule) 18%, var(--rule) 82%, transparent);
  }
  .steps-row > .st > h3{ min-height:2.6em; display:flex; align-items:flex-end; }
}
@media (max-width:860px){
  .steps-row > .st + .st::before{
    content:""; position:absolute; left:0; right:0; top:-1.1rem; height:1px;
    background:linear-gradient(90deg, transparent, var(--rule) 18%, var(--rule) 82%, transparent);
  }
}

/* --- 6.5 motion: warm, and once ------------------------------
   Elm's .veil element is replaced on this build by the branded
   .loader (see the NIGHTINGALE block at the foot of this file):
   same principle, a CSS animation always clears it, but the mark
   draws itself and it only appears once per browser session. */
/* --- 6.6 inset photo bands read as photographs --------------- */
.strip3 .s{ box-shadow:var(--shadow-sm); }
.strip3 figcaption, .framed-wrap figcaption{
  margin-top:.7rem; font-size:.85rem; color:var(--ink-soft); text-align:left; }

/* --- 6.7 about headings in sentence case ---------------------
   .about-copy h2 was set in uppercase, which suited a short
   address label ("ENYS ROAD, EASTBOURNE") but shouts when the
   heading is a warm sentence. The copy pass made both of these
   headings sentences, so the caps have to go.
   NOT a blanket upstream change: keep the caps option for
   presets whose about heading really is a place label. */
.about-copy h2{ text-transform:none; letter-spacing:-.015em; }

/* ============================================================
   ELM ROUND 7 - Gratwick section components (26 Jul 2026)
   Ported from builds/gratwick-house/site/styles/base.css so the
   two builds share one component set. PROMOTE UPSTREAM.
   ============================================================ */

/* --- 7.1 leaf rule ornament (Gratwick's lotus rule, Elm's mark) --- */
.leaf-rule{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:1.2rem; }
.leaf-rule .ln{ height:1px; width:clamp(38px,8vw,92px); background:var(--rule); }
.leaf-rule .lf{ width:26px; height:26px; color:var(--accent-line); flex:none; }
.band-deep .leaf-rule .ln{ background:rgba(255,255,255,.25); }
.band-deep .leaf-rule .lf{ color:var(--accent-soft); }

/* --- 7.2 decorative arc behind a centred heading ---------------
   The path is symmetric about x=600 on a 1200 viewBox; measured,
   not eyeballed (a 18px-off apex is the kind of thing Jon feels
   without being able to name it). */
.has-arc{ overflow:hidden; }
.has-arc .arc{ position:absolute; pointer-events:none; color:var(--accent-line); opacity:.18;
  width:min(1100px,120%); left:50%; top:8%; transform:translateX(-50%); z-index:0; }
.has-arc > *{ position:relative; z-index:1; }

/* --- 7.3 line-art icon row ------------------------------------- */
.icon-row{ --ir-gap:clamp(1.8rem,3.4vw,3.2rem);
  margin-top:3.4rem; display:grid; grid-template-columns:repeat(5,1fr); gap:var(--ir-gap); }
.icon-row.four{ grid-template-columns:repeat(4,1fr); }
.icon-row.three{ grid-template-columns:repeat(3,1fr); }
.icon-row .ir{ position:relative; text-align:center; }
.icon-row .ir + .ir::before{ content:""; position:absolute; top:6%; bottom:6%;
  left:calc(var(--ir-gap) / -2); width:1px;
  background:linear-gradient(180deg, transparent 0%, rgba(var(--shadow-rgb),.16) 22%,
    rgba(var(--shadow-rgb),.16) 78%, transparent 100%); }
.icon-row .ir .ico{ width:56px; height:56px; margin:0 auto .95rem; color:var(--primary-ink); }
.icon-row .ir h3{ font-family:var(--body); font-weight:800; font-size:1rem; letter-spacing:.03em;
  min-height:2.2em; }
.icon-row .ir p{ margin-top:.5rem; color:var(--ink-soft); font-size:.96rem; }
@media (max-width:1024px){
  .icon-row, .icon-row.four{ grid-template-columns:repeat(2,1fr); row-gap:2.6rem; }
  .icon-row .ir:nth-child(2n+1)::before{ display:none; }
}
@media (max-width:640px){
  .icon-row, .icon-row.four, .icon-row.three{ grid-template-columns:1fr; row-gap:2.2rem; }
  .icon-row .ir + .ir::before, .icon-row .ir:nth-child(2n+1)::before{ display:block;
    top:calc(var(--ir-gap) / -2 - .35rem); bottom:auto; left:50%; transform:translateX(-50%);
    width:min(220px,52%); height:1px;
    background:linear-gradient(90deg, transparent 0%, rgba(var(--shadow-rgb),.16) 22%,
      rgba(var(--shadow-rgb),.16) 78%, transparent 100%); }
  .icon-row .ir:first-child::before{ display:none; }
}

/* --- 7.4 three doors (call / visit / message) ------------------ */
.doors{ margin-top:2.6rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.door{ text-align:center; padding:1.6rem 1rem; }
.door .ico{ width:52px; height:52px; margin:0 auto 1rem; color:var(--accent-soft); }
.door .lab{ display:block; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:#fff; }
.door .val{ display:inline-flex; align-items:center; gap:.5rem; margin-top:.6rem;
  font-family:var(--display); font-size:1.25rem; color:#fff; }
.door p{ margin-top:.5rem; color:rgba(255,255,255,.76); font-size:.94rem; }
.door a.val:hover{ color:var(--accent-soft); }
@media (max-width:860px){ .doors{ grid-template-columns:1fr; gap:.4rem; } }

/* --- 7.5 note band (a quiet aside inside a copy column) -------- */
.note-band{ border-left:3px solid var(--accent-line); padding:.9rem 0 .9rem 1.3rem; }
.note-band p{ color:var(--ink-soft); }
.note-band b{ color:var(--ink); }

/* --- 7.6 meta line under an accordion body -------------------- */
.acc-meta{ display:block; margin-top:.9rem; font-size:.86rem; font-weight:700;
  letter-spacing:.02em; color:var(--primary-ink); }

/* --- 7.7 areas served chips ----------------------------------- */
.areas{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.areas span{ font-size:.9rem; font-weight:600; color:var(--ink-soft);
  border:1px solid var(--rule); border-radius:999px; padding:.35rem .9rem; background:var(--card); }

/* --- 7.8 ask-list (generous checklist, contact page) ----------- */
.asks{ margin-top:2.4rem; display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem 2.4rem; }
.ask{ display:flex; gap:1rem; align-items:flex-start; padding-bottom:1.1rem; border-bottom:1px solid var(--rule); }
.ask .n{ flex:none; width:30px; height:30px; border-radius:50%; background:var(--band-tint);
  color:var(--primary-ink); display:grid; place-items:center; font-weight:800; font-size:.85rem; }
.ask h3{ font-family:var(--body); font-weight:800; font-size:1rem; }
.ask p{ margin-top:.3rem; color:var(--ink-soft); font-size:.95rem; }
@media (max-width:860px){ .asks{ grid-template-columns:1fr; } }

/* --- 7.9 inset photo band (breaks up a long reading page) ------
   Contained width, rounded, soft shadow, caption underneath.
   Full bleed reads as a section divider; inset reads as a
   photograph, which is what a long text page needs. */
.inset-band{ max-width:980px; margin-inline:auto; }
.inset-band .ph-wrap{ position:relative; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); aspect-ratio:16/7; }
.inset-band img{ width:100%; height:100%; object-fit:cover; }
.inset-band figcaption{ margin-top:.85rem; text-align:center; font-size:.9rem; color:var(--ink-soft); }
@media (max-width:640px){ .inset-band .ph-wrap{ aspect-ratio:4/3; } }

/* ============================================================
   NIGHTINGALE - preset 5 (26 Jul 2026)
   New components and preset overrides. Every block is written
   token-only and generic; the ones marked PROMOTE belong in the
   shared library so the next Refresh inherits them.
   ============================================================ */

/* --- N0 buttons: ink on gold ---------------------------------
   This palette's accent is a light aged gold. White on it is
   3.1:1 and fails, so the label is the deep green instead
   (4.57:1) and hover LIGHTENS the fill, which lifts the label
   to 5.9:1 rather than dropping it. design-engine.md allows
   either fill/label direction; measure and pick. PROMOTE the
   pattern, not the values. */
.btn{ color:var(--btn-ink); }
.btn:hover{ color:var(--btn-ink); }
.btn.light{ color:var(--primary-ink); }
.btn.ghost{ color:var(--primary-ink); }
.cta .tel-lg{ color:var(--primary-ink); }
.band-deep .eyebrow{ color:var(--accent-soft); }
.band-accent .eyebrow{ color:var(--gold-ink); }
.care-foot a, .fund-mini .flink, .review .src a, .score .st a,
.qp-card .src a, .care-card .tag{ color:var(--gold-ink); }
.note-band{ border-left:0; padding:0; }

/* --- N3 hero: full bleed, text CENTRED, gold rule ------------
   ROUND 2 (Jon): the left-set hero read as odd; every hero on
   every page is centred. The .left variant is retired sitewide.
   The inner block also carries real bottom padding so the last
   hero line can never touch the section below at any width. */
.hero .inner{ padding-top:7rem; padding-bottom:4.5rem; }
.hero .gold-rule{ display:block; width:64px; height:2px; background:var(--accent-on-photo);
  border-radius:2px; margin:0 auto 1.25rem; }
.hero .hero-tel{ display:block; margin-top:1.5rem; color:rgba(255,255,255,.92);
  font-size:1rem; }
.hero .hero-tel a{ color:#fff; font-weight:800; border-bottom:2px solid var(--accent-on-photo); }

/* --- N4 (retired, ROUND 2) -----------------------------------
   The four-column stat bar read as flat and out of place beside
   the reference builds. Replaced on the home page by an unboxed
   .icon-row of three warm reassurances (the njch principles-row
   move); the facts it stated now live in their best seats only:
   CQC in the CQC section, the room count on the Littlehampton
   page, 1949 in the history band. */

/* --- N5 D6 cards: photo beside the words ---------------------
   The alternative to an unboxed icon row: each card is a real
   photograph with the writing next to it, which suits a home
   whose photographs are its best asset. PROMOTE as D6
   "photo-side". */
.pcards{ margin-top:2.6rem; display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.pcards.one{ grid-template-columns:1fr; max-width:900px; }
.pcard{ display:grid; grid-template-columns:.82fr 1.18fr; background:var(--card);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.pcard .pc-photo{ position:relative; min-height:100%; }
.pcard .pc-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pcard .pc-body{ padding:1.5rem 1.6rem 1.65rem; display:flex; flex-direction:column; }
.pcard h3{ font-size:1.24rem; }
.pcard p{ margin-top:.55rem; color:var(--ink-soft); font-size:1rem; }
.pcard .pc-meta{ margin-top:auto; padding-top:1rem; font-size:.84rem; font-weight:800;
  letter-spacing:.02em; color:var(--gold-ink); }
@media (max-width:1080px){ .pcards{ grid-template-columns:1fr; } }
@media (max-width:560px){
  .pcard{ grid-template-columns:1fr; }
  .pcard .pc-photo{ aspect-ratio:16/9; min-height:0; }
}

/* --- N6 inset framed photographs, captioned (D5) ------------- */
.inset-duo{ margin-top:2.6rem; display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.2rem,2.6vw,2rem); }
.inset-duo figure{ margin:0; }
.inset-duo .if-img{ position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/3; box-shadow:var(--shadow-sm); }
.inset-duo .if-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.inset-duo figcaption{ margin-top:.8rem; color:var(--ink-soft); font-size:.9rem; }
@media (max-width:760px){ .inset-duo{ grid-template-columns:1fr; } }

/* --- N9 photo band, inset not full bleed (from Gratwick) ----- */
.photoband{ padding-block:clamp(1rem,2.4vw,2rem); }
.photoband .pb-hold{ max-width:var(--hold); margin-inline:auto; padding-inline:var(--w1); }
.photoband figure{ margin:0; }
.photoband .pb-img{ position:relative; overflow:hidden; border-radius:var(--radius);
  aspect-ratio:16/7; box-shadow:var(--shadow-sm); }
.photoband .pb-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photoband figcaption{ margin-top:.85rem; color:var(--ink-soft); font-size:.92rem; text-align:center; }
@media (max-width:700px){ .photoband .pb-img{ aspect-ratio:4/3; } }

/* --- N10 the day list (a day here, without a numbered rota) --
   The numbered timeline says "step 1 of 5", which is wrong for a
   day. Time-of-day labels on a hairline rail say "this is roughly
   how a day goes". PROMOTE. */
.daylist{ margin-top:2.6rem; max-width:760px; margin-inline:auto; }
.dl{ display:grid; grid-template-columns:9.5rem 1fr; gap:1.6rem; padding:1.5rem 0;
  border-top:1px solid var(--rule); position:relative; }
.dl:last-child{ border-bottom:1px solid var(--rule); }
.dl .when{ font-family:var(--display); font-weight:600; font-size:1.12rem; color:var(--primary-ink);
  padding-left:1.15rem; position:relative; }
.dl .when::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:7px;
  border-radius:50%; background:var(--accent-line); }
.dl p{ color:var(--ink-soft); }
@media (max-width:620px){
  .dl{ grid-template-columns:1fr; gap:.5rem; }
}

/* --- N13 quiet aside inside a copy column (card, not a stripe) */
.qnote{ background:var(--band-tint); border-radius:var(--radius-sm); padding:1.2rem 1.4rem;
  margin-top:1.7rem; max-width:56ch; }
.qnote blockquote{ font-family:var(--display); font-weight:600; font-style:italic;
  font-size:1.16rem; line-height:1.5; color:var(--ink); }
.qnote figcaption{ margin-top:.7rem; font-size:.86rem; color:var(--ink-soft); }
.qnote figcaption b{ font-family:var(--body); font-weight:800; color:var(--ink); }
.qnote a{ color:var(--primary-ink); font-weight:700; text-decoration:underline; }

/* --- N14 the quiet local line (links the local landing page) - */
.localline{ margin-top:1.8rem; font-size:.98rem; color:var(--ink-soft); }
.localline a{ color:var(--primary-ink); font-weight:800; text-decoration:underline; }

/* --- N15 fees note ------------------------------------------- */
.feesrow{ display:grid; grid-template-columns:.94fr 1.06fr; gap:clamp(2rem,4vw,3.4rem); align-items:center; }
.feesrow .fr-copy .lede{ margin-top:1rem; color:var(--ink-soft); font-size:1.08rem; max-width:48ch; }
.feesrow .fr-list{ margin-top:1.4rem; display:flex; flex-direction:column; gap:.8rem; }
.feesrow .fr-list div{ display:flex; gap:.75rem; align-items:flex-start; color:var(--ink-soft); font-size:1rem; }
.feesrow .fr-list svg{ flex:none; color:var(--primary); margin-top:.28rem; }
.feesrow .fr-list b{ color:var(--ink); font-family:var(--body); font-weight:800; }
.feesrow .fr-photo{ border-radius:var(--radius); overflow:hidden; aspect-ratio:auto;
  align-self:stretch; min-height:clamp(400px,36vw,540px);
  box-shadow:var(--shadow); position:relative; }
.feesrow .fr-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:1000px){ .feesrow{ grid-template-columns:1fr; }
  .feesrow .fr-photo{ order:-1; aspect-ratio:4/3; align-self:auto; min-height:0; } }

/* --- N16 hero refinements for this palette -------------------
   The library's inner-page hero filter and radial focus, tuned so
   the measured lightest pixel behind the headline stays dark
   enough for the gold italic word (needs 3:1) and white body
   copy (needs 4.5:1). Measured in QA, see BUILD_NOTES. */
/* R1.6 The .66 brightness was tuned against a flat brand field. Over the real
   photographs it made both houses read as a dark, dramatic backdrop, which is
   the opposite of what this site is for (Jon, round 1). Photographs are lifted
   to .90; the brand field, which has no detail to lose, stays dark. Worst-case
   pixel behind every hero text box re-measured at 390 and 1920 afterwards. */
.hero .bg > .ph{ filter:saturate(.90) brightness(.66); }
.hero .bg > img.cover{ filter:saturate(.94) brightness(.86); }
.hero h1 .serif{ color:var(--accent-on-photo); }
.hero .eyebrow{ color:rgba(255,255,255,.93); }  /* measured: gold at eyebrow size fell to 3.9:1 on the
                                              lightest hero pixels and small text needs 4.5:1 */

/* --- N17 small odds and ends --------------------------------- */
.sub-tight{ max-width:52ch; }
.section-head .say a{ color:var(--primary-ink); font-weight:700; text-decoration:underline; }
.prose h2{ font-family:var(--display); }
.foot .fbird{ width:30px; height:23px; color:var(--accent-soft); margin-bottom:.7rem; display:block; }
.foot .est{ display:block; margin-top:.9rem; font-size:.82rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-soft); font-weight:800; }
.hold.narrow{ max-width:1020px; }
.acc-body-inner p + p{ margin-top:.8rem; }
.cqc-chip .ct p a{ color:var(--primary-ink); font-weight:700; text-decoration:underline; }
.band-deep .cqc-chip .ct p a{ color:var(--accent-soft); }
.map-note{ margin-top:1rem; color:var(--ink-soft); font-size:.92rem; }

/* --- N18 skip link + focus rings (ported from Gratwick; the Elm copy of the
   library never had a .skip rule, so its skip link rendered as visible text
   at the top of every page. PROMOTE UPSTREAM. ) --- */
.skip{ position:absolute; left:-9999px; top:0; z-index:300; background:var(--card);
  color:var(--primary-ink); font-weight:800; padding:.85rem 1.3rem; border-radius:0 0 12px 0; }
.skip:focus{ left:0; }
a:focus-visible, .btn:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--primary-ink); outline-offset:3px; border-radius:6px; }
.nav:not(.scrolled) .navlinks a:focus-visible,
.nav:not(.scrolled) .nav-tel:focus-visible,
.band-deep a:focus-visible, .band-deep button:focus-visible,
.hero a:focus-visible{ outline-color:#fff; }

/* --- N19 accordions must survive a failed script ------------
   LIBRARY BUG, found here: .acc-body was collapsed by CSS
   (max-height:0) and only ever opened by script.js, so with
   JavaScript off, or with script.js blocked, every accordion
   panel on Gratwick and Elm is invisible. Gate the collapse on
   the same boot flag the reveals use, so no JavaScript means all
   panels are simply open. PROMOTE UPSTREAM. */
.acc-body{ max-height:none; }
html.reveal-ready .acc-body{ max-height:0; }
.no-js .acc-body{ max-height:none; }

/* --- N21 form states the Elm copy of the library was missing --
   Ported from Gratwick: error text, invalid field borders, the
   send-failure box, a bigger tap target on inputs, and the mobile
   drawer's phone number. The Elm base.css had the form markup
   classes but none of these, so an invalid field showed nothing.
   PROMOTE UPSTREAM. */
.field input, .field select, .field textarea{ min-height:48px; padding:.85rem .9rem; }
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-soft); opacity:1; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:var(--cta); }
.field .err{ display:none; margin-top:.35rem; font-size:.86rem; font-weight:700; color:var(--gold-ink); }
.field.bad .err{ display:block; }
.consent input{ width:20px; height:20px; margin-top:.1rem; flex:none; min-height:0;
  accent-color:var(--primary); cursor:pointer; }
.form-error{ display:none; margin-top:1rem; background:var(--accent-tint); border-radius:12px;
  padding:1rem 1.2rem; color:var(--ink); font-size:.95rem; }
.form-error.show{ display:block; }
.form-error a{ color:var(--gold-ink); font-weight:800; }
.enq-success p a{ color:var(--gold-ink); font-weight:800; }
@media (max-width:1040px){
  .mobile-menu a.mm-tel{ color:var(--primary-ink); font-family:var(--display); font-size:1.2rem; }
}

/* --- N22 mobile drawer must be styled at the SAME width the
   burger appears. ROUND 6.2 moved the burger to 1040px but left
   the drawer's own styling (absolute position, background, stacked
   links) in the old 760px block, so between 761 and 1040 the menu
   opened as an unstyled row over the hero. LIBRARY BUG.
   PROMOTE UPSTREAM. */
@media (max-width:1040px){
  .mobile-menu{ position:absolute; left:0; right:0; top:100%; background:var(--surface);
    border-bottom:1px solid var(--rule); box-shadow:var(--shadow-sm); padding:.6rem var(--w1) 1.4rem; }
  .mobile-menu.open{ display:flex; flex-direction:column; }
  .mobile-menu a{ padding:.95rem .2rem; font-weight:700; border-bottom:1px solid var(--rule); color:var(--ink); }
  .mobile-menu a.btn{ margin-top:1rem; border-bottom:none; color:var(--btn-ink); justify-content:center; }
}

/* --- N23 reduced motion has to beat the reveal gate -----------
   LIBRARY BUG: the reduced-motion rule was written as `.reveal`
   (specificity 0,1,0) while the gate is `html.reveal-ready
   .reveal` (0,2,1), so on a machine that asks for reduced motion
   every off-screen section still started at opacity 0 and only
   appeared when the observer fired. Same selector weight fixes
   it, no !important needed. PROMOTE UPSTREAM. */
@media (prefers-reduced-motion: reduce){
  html.reveal-ready .reveal{ opacity:1; transform:none; transition:none; }
  html.reveal-ready .reveal.scale{ transform:none; }
}
/* with no JavaScript every panel is open, so the toggle should read as a minus */
.no-js .acc-head .pm::after{ transform:translateX(-50%) scaleY(0); }
/* an embedded map that has not loaded yet should read as a quiet panel, not a
   white hole in the page */
.loc-map{ background:var(--band-tint); }

/* ============================================================
   NIGHTINGALE ROUND 2 (Jon's review, 3 Aug 2026)
   ============================================================ */

/* --- R2.1 quieter section spacing for interstitial rows ------ */
.section.snug{ padding-block:calc(var(--sp) * .68); }

/* --- R2.2 photo-side care cards: even crops ------------------
   The photo strip was collapsing to a sliver wherever a card's
   text ran long. Give the photo column real width and a floor,
   so all four cards read as photographs, not slivers. Scoped
   above 560px so the phone stack (1 column, 16/9 photo) from the
   base rules still wins on small screens. */
@media (min-width:561px){
  .pcard{ grid-template-columns:.95fr 1.05fr; }
  .pcard .pc-photo{ min-height:230px; }
}

/* --- R2.3 the day, as a line -------------------------------
   Replaces the bullet-and-rule .daylist: a single gold spine,
   line-art time-of-day medallions, display-face moments. Keeps
   every fact, loses the enormous flat list. */
.dayline{ margin:2.8rem auto 0; max-width:820px; position:relative; }
/* R3.3: the spine is now drawn per item, from each medallion's centre to the
   next one's, so it starts at the first icon and stops dead at the last
   instead of overshooting the content at both ends. */
.dayline .dli::after{ content:""; position:absolute; left:31px;
  top:calc(1.35rem + 32px); bottom:calc(-1.35rem - 32px); width:1.5px;
  background:var(--accent-line); opacity:.65; }
.dayline .dli:last-child::after{ display:none; }
.dayline .dli{ position:relative; display:grid; grid-template-columns:64px 1fr;
  gap:clamp(1.2rem,3vw,2rem); padding-block:1.35rem; align-items:start; }
.dayline .dli .dico{ position:relative; z-index:1; width:64px; height:64px; border-radius:50%;
  background:var(--card); border:1px solid var(--rule); display:grid; place-items:center;
  color:var(--primary-ink); box-shadow:0 10px 24px -18px rgba(24,47,39,.5); }
.dayline .dli .dico svg{ width:30px; height:30px; }
.dayline .dli .dbody .when{ font-family:var(--display); font-weight:600; font-size:1.22rem;
  color:var(--ink); }
.dayline .dli .dbody p{ margin-top:.4rem; color:var(--ink-soft); max-width:56ch; }
@media (max-width:560px){
  .dayline .dli::after{ left:23px; top:calc(1.35rem + 24px); bottom:calc(-1.35rem - 24px); }
  .dayline .dli{ grid-template-columns:48px 1fr; gap:1rem; }
  .dayline .dli .dico{ width:48px; height:48px; }
  .dayline .dli .dico svg{ width:24px; height:24px; }
}
.dayfoot{ margin:3.2rem auto 0; max-width:62ch; text-align:center; }
.dayfoot h3{ font-family:var(--body); font-weight:800; font-size:1.06rem; }
.dayfoot p{ margin-top:.7rem; color:var(--ink-soft); font-size:1rem; }

/* --- R2.4 icon-row placement helpers -------------------------
   .below: the feature row under the nursing intro on Our Care.
   .solo: a row standing alone in its own section (home page
   reassurance row), so it carries no stray top margin. */
.icon-row.below{ margin-top:clamp(3.6rem,6.5vw,5.4rem); }
.icon-row.solo{ margin-top:0; }
.inset-duo.solo{ margin-top:0; }

/* --- R3.1 the CQC "Good", highlighted in green ---------------
   One word, one colour, nothing shouting: the italic display
   word picks up a CQC-family green. 4.8:1 on the cream, well
   clear of the 3:1 large-text floor. */
.section-head .good{ color:var(--cqc-good); }

/* --- R3.2 the callers row (replaces the plain-text dayfoot) --
   Who comes to the house, as quiet white chips with line-art
   marks, sitting on the gold band. */
.callers{ margin:3.4rem auto 0; max-width:820px; text-align:center; }
.callers h3{ font-family:var(--display); font-weight:600; font-size:clamp(1.4rem,2.6vw,1.8rem); color:var(--ink); }
.callers h3 .serif{ font-style:italic; color:var(--gold-ink); }
.callers > p{ margin:.8rem auto 0; color:var(--ink-soft); font-size:1rem; max-width:56ch; }
.caller-row{ margin-top:1.7rem; display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem; }
.caller{ display:inline-flex; align-items:center; gap:.6rem; background:var(--card);
  border:1px solid var(--rule); border-radius:999px; padding:.68rem 1.25rem;
  font-family:var(--body); font-weight:700; font-size:.95rem; color:var(--ink);
  box-shadow:0 10px 22px -18px rgba(var(--shadow-rgb),.55); }
.caller svg{ width:21px; height:21px; flex:none; color:var(--primary-ink); }
.callers .caller-note{ margin:1.5rem auto 0; color:var(--ink-soft); font-size:.92rem; max-width:52ch; }

/* --- R6.1 the reviews page, Gratwick treatment (Jon's call after
   seeing both): score row, featured quote on a photograph, then
   recent and earlier review cards. .score and .reviews already
   live in this stylesheet; only the quote-photo needed porting. */
.quote-photo{ position:relative; min-height:clamp(460px,58vw,620px); display:grid; align-items:center; }
.quote-photo .qp-bg{ position:absolute; inset:0; overflow:hidden; }
.quote-photo .qp-bg img.cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.quote-photo .qp-bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(var(--shadow-rgb),.72) 0%, rgba(var(--shadow-rgb),.34) 62%, rgba(var(--shadow-rgb),.5) 100%); }
.qp-hold{ position:relative; z-index:2; max-width:var(--hold); margin-inline:auto;
  padding-inline:var(--w1); padding-block:clamp(1.6rem,4.5vw,2.6rem); width:100%; }
.qp-card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:clamp(1.8rem,3.4vw,3rem); max-width:38rem; }
.qp-card .marks{ font-family:var(--display); font-weight:600; font-size:3.4rem; line-height:.6;
  color:var(--accent-line); display:block; height:1.6rem; }
.qp-card blockquote{ font-family:var(--display); font-weight:500;
  font-size:clamp(1.18rem,1.72vw,1.42rem); line-height:1.62; color:var(--ink); margin-top:1.1rem; }
.qp-card .attr{ margin-top:1.5rem; font-weight:800; color:var(--ink); }
.qp-card .attr span{ display:block; font-weight:600; color:var(--ink-soft); font-size:.92rem; margin-top:.2rem; }
.qp-card .src{ margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--rule);
  font-size:.88rem; color:var(--ink-soft); }
@media (prefers-reduced-motion:reduce){ .fl-tilt svg{ animation:none; } }
.rowband{ background:var(--card); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }

/* ============================================================
   SERENITY BLOCK (build 7, 12 Aug 2026)
   Everything above this line is shared library code inherited
   from the Nightingale copy of base.css (which carries Vitality
   v0.4 + Elm rounds 6-7 + the Gratwick component port + the
   Nightingale rounds). Nightingale's own mark, veil, story rail,
   flight and album components were stripped on clone because
   nothing here uses them.
   Everything below is either a NEW component this build earned
   (marked PROMOTE) or a Serenity preset override.
   ============================================================ */

/* --- S0 palette housekeeping -------------------------------
   The inherited hero scrim hard-codes a green rgba() from the
   Nightingale build. Re-point it at the shadow token so the
   whole page really does come out of tokens.css. PROMOTE. */
.hero .bg::after{
  background:
    radial-gradient(ellipse 80% 64% at 50% 46%, rgba(var(--shadow-rgb),.58) 0%, rgba(var(--shadow-rgb),.32) 55%, transparent 80%),
    var(--scrim);
}
.nav.scrolled{ background:rgba(250,247,241,.95); box-shadow:0 10px 30px -24px rgba(var(--shadow-rgb),.45); }

/* --- S2 first-load veil: the disc draws itself --------------
   Once per browser session (sessionStorage), and a CSS animation
   always clears it, so a failed script never leaves it up. */
/* Timing: the disc finishes drawing at 1.25s and the wordmark finishes fading in
   at 1.6s, but the veil used to start leaving at 1.5s, so the finished mark was
   never actually seen. It now HOLDS for about half a second once complete before
   fading (Jon, 13 Aug 2026: "let the loader sit a smidge once fully loaded").
   script.js uses the same 1.95s figure so the two never disagree. */
.loader{ position:fixed; inset:0; z-index:900; background:var(--primary-deep); display:grid; place-items:center;
  /* TWO exit paths, and they must not race. script.js lifts the veil at 1.95s using
     the transition below, which is the fade people actually see. The keyframe is only
     a safety net for a session where script.js never boots, so it starts LATER (3.2s)
     than the JS lift. When both were set to the same figure the animation won, overrode the
     inline opacity, and the veil cut rather than faded (Jon: "snaps too aggressively"). */
  animation:veilout 1.05s cubic-bezier(.33,0,.2,1) 3.2s forwards;
  transition:opacity 1.05s cubic-bezier(.33,0,.2,1); }
/* the mark leaves BEFORE the ground does, and drifts up as it goes, so the veil
   reads as a curtain lifting rather than the whole thing switching off at once.
   Softened 6 Sep 2026 at Jon's request: longer, and eased out rather than in. */
.loader .lmark{ transition:opacity .58s ease, transform 1.05s cubic-bezier(.33,0,.2,1); }
.loader.going .lmark{ opacity:0; transform:translateY(-14px); }
.loader .lmark{ display:grid; place-items:center; gap:.9rem; color:var(--primary); }
.loader .ldisc{ width:74px; height:74px; }
.loader .ldisc circle{ fill:none; stroke:currentColor; stroke-width:3; stroke-dasharray:220; stroke-dashoffset:220;
  animation:draw 1.15s var(--ease) .1s forwards; }
.loader .ldisc text{ fill:currentColor; opacity:0; animation:fadein .5s ease .85s forwards; }
.loader .lwm{ font-family:var(--display); font-weight:600; font-size:1.06rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-soft); opacity:0; animation:fadein .6s ease 1s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fadein{ to{ opacity:1; } }
@keyframes veilout{ to{ opacity:0; visibility:hidden; } }
.no-js .loader, html.veilseen .loader{ display:none; }
@media (prefers-reduced-motion:reduce){
  .loader{ animation:veilout .2s linear forwards; }
  .loader .ldisc circle{ animation:none; stroke-dashoffset:0; }
  .loader .ldisc text,.loader .lwm{ animation:none; opacity:1; }
}

/* --- S3 the brand field (D1 hero background, no photograph) --
   No client photography exists yet (GAPS 2). Rather than ship a
   grey box behind the biggest headline on the site, the hero
   sits on a designed brand surface: espresso base, one soft gold
   bloom, one large thin arc. It is deliberate on its own terms
   and it swaps for a photograph by replacing the div with the
   usual <img class="cover">, nothing else. PROMOTE. */
.brandfield{ position:absolute; inset:0; background:var(--primary-deep); overflow:hidden; }
.brandfield::before{ content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(ellipse 52% 58% at 74% 22%, var(--field-bloom-a) 0%, var(--field-bloom-a0) 68%),
    radial-gradient(ellipse 66% 70% at 12% 88%, var(--field-bloom-b) 0%, var(--field-bloom-b0) 70%); }
.brandfield .arc{ position:absolute; right:-14%; bottom:-42%; width:min(96vw,1180px); height:auto;
  color:var(--accent-line); opacity:.24; }
.brandfield .arc2{ position:absolute; left:-26%; top:-38%; width:min(72vw,860px); height:auto;
  color:var(--accent-line); opacity:.14; }
/* The field is already dark, so it does not want the photo scrim's
   brightness knock-down, only the readability wash. */
.hero .bg > .brandfield{ filter:none; }
/* ...and it does not want the photo VIGNETTE either. The .bg::after wash exists to
   hold text over a bright photograph; over a designed dark field it only muddies
   the brand colour, which is why the gold bloom measured invisible on the first
   render. White on the field is 14.08:1 with no wash at all. PROMOTE UPSTREAM:
   every photoless build in the library inherits this fault. */
.hero .bg:has(> .brandfield)::after{ display:none; }

/* --- S4 hero, text LEFT (D1) --------------------------------
   Vitality centres its hero, Nightingale left-aligns a plain one.
   Serenity's is left-aligned AND carries the film's poster card
   in the lower right, so the film is present at first paint. */
.hero.left .inner{ text-align:left; margin-inline:0; max-width:min(58rem,100%);
  padding-inline:var(--w1); }
.hero.left .hold-in{ max-width:var(--hold); margin-inline:auto; width:100%; position:relative; z-index:2; }
.hero.left .sub{ margin-inline:0; max-width:46ch; }
.hero.left .cta-row{ justify-content:flex-start; }
.gold-rule{ display:block; width:74px; height:3px; border-radius:2px; background:var(--primary); margin-bottom:1.4rem; }
.hero .hero-tel{ display:block; margin-top:1.5rem; color:rgba(255,255,255,.86); font-size:.98rem; }
/* One underline, not two. The base hero rule underlines these links with a gold
   2px border-bottom; this block later added a text-decoration underline as well,
   so every hero phone number rendered with a white underline AND a gold bar
   below it (Jon, 13 Aug 2026: "remove the second yellow underline"). The
   text-decoration is the one that reads as the link, so the border is unset.
   PROMOTE UPSTREAM: same collision exists anywhere both mechanisms are used. */
.hero .hero-tel a{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px; border-bottom:0; }

/* --- S5 key-info strip (D2, second half) --------------------
   The slim factual strip under the editorial welcome. Every fact
   on it is spent here and nowhere else (thin-facts rule). PROMOTE. */
.keystrip{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:var(--card);
  border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.keystrip .k{ padding:1.5rem 1.5rem 1.6rem; position:relative; }
.keystrip .k + .k::before{ content:""; position:absolute; left:0; top:18%; bottom:18%; width:1px;
  background:linear-gradient(180deg,transparent,var(--rule) 22%,var(--rule) 78%,transparent); }
.keystrip .k b{ display:block; font-family:var(--display); font-weight:600; font-size:1.32rem; color:var(--ink); line-height:1.15; }
.keystrip .k span{ display:block; margin-top:.4rem; font-size:.9rem; color:var(--ink-soft); }
.keystrip .k svg{ width:24px; height:24px; color:var(--primary-ink); margin-bottom:.7rem; }
@media (max-width:900px){ .keystrip{ grid-template-columns:repeat(2,1fr); }
  .keystrip .k:nth-child(3)::before,.keystrip .k:nth-child(2)::before{ }
  .keystrip .k:nth-child(odd)::before{ display:none; }
  .keystrip .k:nth-child(n+3){ border-top:1px solid var(--rule); } }
@media (max-width:520px){ .keystrip{ grid-template-columns:1fr; }
  .keystrip .k::before{ display:none; }
  .keystrip .k + .k{ border-top:1px solid var(--rule); } }

/* --- S8 regulation blocks ----------------------------------
   One isolated block per home. The two regulators never share a
   treatment beyond the shared chip shell, and neither block ever
   borrows a regulator's logo or colours. */
.cqc-chip{ align-items:flex-start; }
.cqc-chip .ct b{ font-family:var(--body); font-weight:800; font-size:.82rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); display:block; }
.cqc-chip .ct .rate{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.cqc-chip .ct .rate i{ font-style:normal; background:var(--band-tint); border-radius:999px;
  padding:.4rem .95rem; font-size:.88rem; font-weight:700; color:var(--ink); }
.cqc-chip .ct .rate i b{ display:inline; font-family:var(--body); font-size:.88rem; letter-spacing:0;
  text-transform:none; color:var(--good); font-weight:800; }
.cqc-chip .checked{ display:block; margin-top:1rem; font-size:.86rem; color:var(--ink-soft); }
.good{ color:var(--good); }

/* --- S9 gallery grid, filterable ---------------------------- */
.galfilter{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1.8rem; }
.galfilter button{ font-family:var(--body); font-weight:700; font-size:.92rem; padding:.6rem 1.25rem;
  border-radius:999px; border:1px solid var(--rule); background:var(--card); color:var(--ink); cursor:pointer;
  transition:background .2s, border-color .2s, color .2s; }
.galfilter button:hover{ border-color:var(--primary-ink); }
.galfilter button[aria-pressed="true"]{ background:var(--cta); border-color:var(--cta); color:#fff; }
.galgrid{ margin-top:2rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.galgrid figure{ margin:0; }
.galgrid .g-img{ aspect-ratio:4/3; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm); }
.galgrid .g-img .ph{ position:absolute; inset:0; }
.galgrid figcaption{ margin-top:.6rem; font-size:.86rem; color:var(--ink-soft); }
.galgrid figure[hidden]{ display:none; }
@media (max-width:900px){ .galgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .galgrid{ grid-template-columns:1fr; } }

/* --- S12 map frame ------------------------------------------ */
.loc-map iframe{ display:block; width:100%; height:100%; min-height:360px; border:0; }

/* --- S13 small things --------------------------------------- */
.hl-list{ margin-top:2.4rem; display:grid; gap:1.6rem; grid-template-columns:repeat(2,1fr); }
.hl-list .hl{ background:var(--card); border:1px solid var(--rule); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.hl-grid .hl{ display:flex; flex-direction:column; }
.hl-list .hl .hl-img{ aspect-ratio:16/10; position:relative; }
.hl .hl-img .ph{ position:absolute; inset:0; }
.hl-list .hl .hl-body{ padding:1.5rem 1.7rem 1.8rem; }
.hl-list .hl.lead{ grid-column:1 / -1; display:grid; grid-template-columns:1.02fr .98fr; }
.hl-list .hl.lead .hl-img{ aspect-ratio:auto; min-height:22rem; }
.hl-list .hl.lead .hl-body{ padding:clamp(1.8rem,3vw,2.8rem); align-self:center; }
.hl-list .hl.lead h3{ font-size:clamp(1.5rem,2.4vw,2rem); }
.hl-list .hl h3{ font-size:1.32rem; }
.hl-list .hl p{ margin-top:.65rem; color:var(--ink-soft); font-size:1rem; }
@media (max-width:900px){ .hl-list{ grid-template-columns:1fr; }
  .hl-list .hl.lead{ grid-template-columns:1fr; }
  .hl-list .hl.lead .hl-img{ min-height:0; aspect-ratio:16/10; } }
.pill-row{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.3rem; }
.pill{ background:var(--card); border:1px solid var(--rule); border-radius:999px; padding:.45rem 1rem;
  font-size:.88rem; font-weight:700; color:var(--ink); }
.band-deep .pill{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.24); color:#fff; }
.homelink{ display:inline-flex; align-items:center; gap:.4rem; font-weight:800; color:var(--sea-ink);
  text-decoration:underline; text-underline-offset:3px; }
.say a{ color:var(--sea-ink); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.care-foot a,.localline a{ color:var(--sea-ink); }
.foot .credit a{ text-decoration:underline; text-underline-offset:3px; }
.twocol{ columns:2; column-gap:clamp(2rem,4vw,3.4rem); }
@media (max-width:820px){ .twocol{ columns:1; } }

/* --- S14 placeholder plumbing ------------------------------
   The Elm placeholder convention is a NESTED .ph filling its slot.
   The inherited list of slots predates several of the components
   this build added, so extend it rather than fork it. PROMOTE. */
.pc-photo, .g-img, .tl-photo, .p-photo, .fr-photo, .home-img, .filmwrap, .hl-list .hl-img{ position:relative; }
.pc-photo > .ph, .g-img > .ph, .tl-photo > .ph, .p-photo > .ph,
.fr-photo > .ph, .home-img > .ph, .hl-list .hl-img > .ph{ position:absolute; inset:0; }
/* The hero brand field is not a placeholder and must not carry a label strip. */
.hero .bg .brandfield::before{ content:none; }

/* --- S15 hero, left variant, corrections -------------------
   N3 retired Nightingale's .left hero and centred the gold rule
   with margin:0 auto. Serenity's D1 IS left-aligned, so the rule
   has to start at the text edge again. */
.hero.left .gold-rule{ margin-inline:0; width:74px; height:3px; background:var(--primary); }
.hero.left .inner{ padding-top:6.5rem; padding-bottom:4rem; }
@media (max-width:900px){ .hero.left .inner{ padding-bottom:1.5rem; } }

/* --- S16 placeholders that look deliberate ------------------
   This build ships with no client photography at all, so the
   placeholder is not a rare gap-filler, it is a component people
   will look at. Give it a warm brand field, a quiet photograph
   glyph, and the same label strip as before, so a slot reads as
   "a photograph belongs here" rather than as a broken image.
   PROMOTE: the plain two-tint gradient was too faint to read. */
.ph{ background-color:var(--band-tint);
  background-image:
    radial-gradient(ellipse 70% 70% at 30% 22%, var(--ph-bloom) 0%, var(--ph-bloom-0) 62%),
    linear-gradient(150deg, var(--band-tint) 0%, var(--accent-tint) 100%); }
.ph::after{ content:""; position:absolute; left:50%; top:50%; width:clamp(30px,14%,54px);
  aspect-ratio:1; transform:translate(-50%,-60%); opacity:.34; pointer-events:none;
  background:var(--primary-ink);
  -webkit-mask:var(--ph-glyph) center/contain no-repeat; mask:var(--ph-glyph) center/contain no-repeat; }
:root{ --ph-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.6h3.2l1.4-2.2h8.8l1.4 2.2H21v10.2H3Z'/%3E%3Ccircle cx='12' cy='13.4' r='3.6'/%3E%3C/svg%3E"); }
.hero .bg .ph::after{ display:none; }

/* On a home card the strip would run straight through the home's
   name, so the marker becomes a small pill in the free corner. */
/* The label must clear the card's own furniture: the badge sits top-left and the
   name block runs along the bottom, so the only free corner is top-right. It sat
   bottom-right until this build, where it printed straight through the home's
   name. PROMOTE UPSTREAM. */
.home-card .ph::before{ left:auto; right:.9rem; top:.9rem; bottom:auto; height:auto; width:auto;
  max-width:46%; line-height:1.45; padding:.34rem .8rem; border-radius:999px; font-size:.62rem;
  text-align:right; white-space:normal; background:rgba(250,247,241,.92); }
.home-card .ph::after{ transform:translate(-50%,-90%); }
.filmwrap .poster{ place-content:center; }
.filmwrap .poster > *{ max-width:100%; }

/* --- S17 the ask list carries plain spans on this build ----- */
.asks .ask > svg{ flex:none; color:var(--primary); margin-top:.22rem; }
.asks .ask > span{ color:var(--ink-soft); font-size:1rem; }

/* --- S18 the cookie notice must not sit on top of a button ---
   It is fixed to the bottom centre, which is exactly where a form's
   submit button ends up on a long page: measured on contact.html,
   the notice covered #enqBtn and the button could not be clicked
   until it was dismissed. Reserve the space while it is up.
   PROMOTE: every build in the library has this fault. */
html.cookie-up body{ padding-bottom:9.5rem; }
@media (min-width:760px){ html.cookie-up body{ padding-bottom:8rem; } }

/* --- S19 the consent checkbox has to respond to being clicked --
   The inherited markup wraps the input in <label class="consent"
   for="f-consent">. Because the label is BOTH the ancestor and an
   explicit label, a click on the box itself toggles once for the
   input and once for the label, and lands back where it started:
   measured, a direct click on the box did nothing at all. The
   markup fix is to drop the redundant for= and rely on the
   implicit association, which is what the pages now do. This rule
   only widens the target, since this audience is older and less
   dexterous. PROMOTE UPSTREAM: Gratwick and Nightingale ship the
   same double-toggling markup. */
.consent{ cursor:pointer; padding:.35rem 0; }
.consent input{ width:22px; height:22px; }

/* --- S20 phone-width fixes found by measuring at 390 ---------
   Two real overflows, both invisible behind body{overflow-x:hidden}
   until scrollWidth was compared with clientWidth.
   1. The fees tables pushed the page to 612px wide at a 390px
      viewport. They now scroll inside their own container, with a
      hint so nobody has to guess, and the type tightens.
   2. The [to confirm] markers were white-space:nowrap, and one of
      them is a whole sentence, which pushed privacy.html to 421px.
      They wrap now; the marker still reads as a marker. PROMOTE. */
.feecap{ margin-top:.9rem; font-size:.92rem; color:var(--ink-soft); max-width:60ch; }
.feewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:.9rem; }
.feetable{ margin-top:0; }
.feetable caption{ display:none; }
@media (max-width:600px){
  .feetable th,.feetable td{ padding:.75rem .8rem; font-size:.95rem; }
  .feetable th{ font-size:.75rem; letter-spacing:.03em; }
}
@media (max-width:400px){
  .feetable th,.feetable td{ padding:.7rem .6rem; font-size:.9rem; }
}
.todo{ white-space:normal; }

/* --- S21 tap targets in the nav ------------------------------
   Measured at 29px tall. This audience is older and less
   dexterous, so the hit area is padded to 44px without changing
   how the bar looks. PROMOTE. */
/* Direct children only. As a descendant selector this also caught the links inside
   the "Our Homes" dropdown panel, turning each into an inline-flex row so the town
   label sat beside the home name instead of under it. */
.navlinks > a:not(.btn){ display:inline-flex; align-items:center; min-height:44px; }
/* the dropdown links keep the same 44px hit area, stacked rather than in a row */
.navdrop-m a{ min-height:44px; }
.foot a{ padding-block:.45rem; margin-bottom:0; }
.consent{ min-height:44px; align-items:center; }
/* The film band heading is display type in a body-measure column, which
   forced it to three cramped lines. Give it its own measure. */
.filmband .fb-head{ max-width:46rem; }
.teamlead blockquote{ margin-bottom:1.3rem; }

/* ============================================================
   ROUND 1 (Jon's review, 13 Aug 2026)
   ============================================================ */

/* --- R1.4 anchor landing -----------------------------------
   The generic [id] offset (156px) is right for bare elements but
   wrong for a whole <section>, which carries its own top padding
   (var(--sp), 119px at 1536). "See our homes" therefore landed the
   reader on 145px of empty band with the home cards below the fold.
   Anchored sections now pull themselves up by their own padding, so
   the section's gold rule sits just under the fixed nav (measured
   nav height: 100px scrolled at 1536, 82px at 390). */
section.section[id]{ scroll-margin-top:calc(124px - var(--sp)); }
section.section.snug[id]{ scroll-margin-top:calc(124px - (var(--sp) * .68)); }
@media (max-width:1040px){
  section.section[id]{ scroll-margin-top:calc(104px - var(--sp)); }
  section.section.snug[id]{ scroll-margin-top:calc(104px - (var(--sp) * .68)); }
}

/* --- R1.5 the cookie notice must not sit on top of the hero CTA ------
   S18 reserved space at the END of the document, which fixes long forms
   but does nothing for a full-height hero at the top: measured at 390px,
   the notice covered "Arrange a visit" and the hero phone line outright.
   script.js publishes the notice's real height as --cookie-h; the hero's
   centred content is lifted clear of it while the notice is up. Desktop
   is unaffected, the notice sits well below the hero content there.
   PROMOTE: every build in the library has this fault. */
@media (max-width:760px){
  /* padding-top still has to clear the fixed nav (measured 88px at 390): an
     earlier pass cut it to 1.2rem and the eyebrow slid under the wordmark. */
  html.cookie-up .hero .inner{ padding-top:5.4rem; padding-bottom:calc(2 * (var(--cookie-h, 0px) + 2rem)); }
  /* The home hero carries the most content of any (two CTAs and two phone
     numbers), so its rhythm is tightened while the notice is up. */
  html.cookie-up .hero h1{ margin-top:.6rem; }
  html.cookie-up .hero .sub{ margin-top:.9rem; }
  html.cookie-up .hero .cta-row{ margin-top:1.4rem; }
  html.cookie-up .hero .hero-tel{ margin-top:.9rem; }
}

/* --- R1.7 the cookie notice is compact on a phone -------------------
   At 390 it stood 169px tall, which with the fixed nav left too little
   room for a hero to sit between them. Same words, smaller frame. */
@media (max-width:520px){
  .cookie{ padding:.75rem .85rem; gap:.7rem; font-size:.84rem; bottom:.65rem; left:.65rem; right:.65rem; }
  .cookie p{ font-size:.84rem; line-height:1.45; }
  .cookie button{ padding:.5rem .9rem; font-size:.85rem; }
}

/* ------------------------------------------------------------------
   FOOTER REBUILD (Jon, round 3, 13 Aug 2026: "looks like word spaghetti")
   The fault was that every line in a column had the same weight, size and
   colour, so a service list, a postal address, two contact links and a
   navigation list all ran together as one grey block. The fix is hierarchy,
   not more space: the service line is small and muted, the address is set
   as an address at a comfortable measure, the phone and email are the
   brightest thing in the column because they are the useful thing, and the
   page links sit below a hairline so they read as a separate group. The
   Explore list goes two-up so the footer stops being a tall ladder.
   PROMOTE UPSTREAM: this replaces the flat .fcol treatment library-wide.
------------------------------------------------------------------- */
.foot .cols{ grid-template-columns:1.15fr 1fr 1fr 1.1fr; gap:2.6rem; }
.foot .fcol{ min-width:0; }

/* Fixed two-line box so both home columns start their address, phone and
   hairline on the same line, whether the service list wraps or not. Same
   trick as the dense-row headings in the gratwick-standard. */
.foot .fserv{
  display:block; font-size:.82rem; line-height:1.5; letter-spacing:.02em;
  color:rgba(255,255,255,.58); margin-bottom:.55rem;
  min-height:3em;   /* exactly two lines at line-height 1.5 */
}
.foot address{
  font-style:normal; font-size:.95rem; line-height:1.65;
  color:rgba(255,255,255,.74); margin-bottom:.9rem; max-width:22ch;
  min-height:4.95em;  /* three lines at line-height 1.65. Both home addresses are
                         set on three lines in the markup (street / town / postcode)
                         so neither wraps at any width and the phone, email and
                         hairline below start on the same line in both columns. */
}
/* The two things a worried family actually reaches for. */
.foot a.fkey{
  display:block; color:#fff; font-weight:600; font-size:.98rem;
  margin-bottom:.3rem; word-break:break-word;
}
.foot a.fkey:last-of-type{ font-weight:500; color:rgba(255,255,255,.9); font-size:.92rem; }

/* Page links, set apart from the contact block by a hairline. */
.foot .fmore{
  display:block; margin-top:1rem; padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.13);
}
.foot .fmore a{
  font-size:.9rem; color:rgba(255,255,255,.72); margin-bottom:.35rem;
}
.foot .fmore a:hover{ color:#fff; }

.foot .fnav{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.4rem; }
.foot .fnav a{ font-size:.92rem; margin-bottom:.5rem; }

@media (max-width:1040px){
  .foot .cols{ grid-template-columns:1fr 1fr; gap:2.2rem; }
}
@media (max-width:560px){
  .foot .cols{ grid-template-columns:1fr; gap:2rem; }
  .foot address{ max-width:none; }
  .foot .fnav{ gap:0 1rem; }
}

/* ------------------------------------------------------------------
   ROUND 4 FIXES (Jon, 13 Aug 2026)
------------------------------------------------------------------- */

/* 1. Four-value grids. Three columns stranded the fourth card on its own row
      (Our Values, About + Meet the Team). Four across on wide, 2x2 on tablet. */
.values-grid.four{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1180px){ .values-grid.four{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .values-grid.four{ grid-template-columns:1fr; } }

/* 2. The Q&A blocks read as broken because .faq is centred (max-width 820, auto
      margins) while its heading above stayed left-aligned, so the two sat on
      different axes with a large empty gutter. The heading now carries .center
      in the markup; this keeps the measure identical so they line up exactly. */
.section-head.center + .acc.faq,
.section-head.center ~ .acc.faq{ max-width:820px; margin-inline:auto; }
.acc.faq .acc-head{ text-align:left; }

/* 3. Care accordion: the copy column must not outgrow the sticky photograph, or
      an expanded item pushes the page down past it (Jon: "never goes below the
      bottom"). The photo is given a taller frame and the open body is capped and
      scrolls internally in the rare case a long answer still overflows.

      SCOPED TO DESKTOP on 6 Sep 2026. This 3/4 was written for the two-column
      desktop layout, but it was declared unscoped and at two-class specificity,
      so it also beat the library's `@media (max-width:900px){ .ca-photo{
      aspect-ratio:16/10 } }` and governed the PHONE, where the photograph is a
      full-width band. Measured at 900px: a 713px-wide picture 950px tall, which
      is most of a screen of scrolling before the panels even start. On desktop
      it is moot anyway, because rule 14 below sets an explicit height. */
@media (min-width:901px){ .care-accordion .ca-photo{ aspect-ratio:3/4; } }
.care-accordion .acc-body-inner{ max-height:none; }
@media (min-width:901px){
  .care-accordion .acc{ max-height:none; }
  .care-accordion .acc-body[style*="block"] .acc-body-inner,
  .care-accordion .acc-body-inner{ overflow:hidden; }
}

/* 4. Gallery: keep whole rows. Figures are added in threes so a filtered set
      never strands a single tile, and the grid holds 3-up to a sensible floor. */
.galgrid{ grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .galgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .galgrid{ grid-template-columns:1fr; } }

/* 8. Contact page density (Jon, round 4: "feels a little too large for the page
      and requires quite a lot of scroll"). The page was not long, it was loose:
      full section rhythm, a deeply padded enquiry card and generous field gaps
      on a page whose whole job is one form. Scoped to the contact page so the
      rest of the site keeps its breathing room. The home selector, which Jon
      likes, is untouched apart from sitting a little tighter. */
body.p-contact main .section{ padding-block:clamp(3rem,5.2vw,4.4rem); }

body.p-contact .field{ margin-bottom:.95rem; }
body.p-contact .field-row{ gap:1rem; }
body.p-contact .field textarea{ min-height:104px; }
body.p-contact .step-hint{ margin-bottom:.7rem; }
body.p-contact .section-head{ margin-bottom:.2rem; }
body.p-contact .ccard{ padding:1.3rem 1.4rem; }

/* 9. The enquiry form as a CALLOUT (Jon, round 5, pointing at the Gratwick
      contact page). Two things were wrong. The card carried a 1px outline, which
      pins it flat to the page instead of letting it float, and the round-4
      compaction had squeezed its padding, so it read as a cramped box rather
      than a generous callout. Gratwick's card is border-free, deeply padded and
      lifted on the standard shadow: that is the register. Page density is kept
      by tightening the space AROUND the card, never the card itself. */
.enquiry{
  padding:clamp(1.9rem,3.2vw,3.1rem);
  border-radius:calc(var(--radius) + 4px);
  box-shadow:0 44px 90px -54px rgba(var(--shadow-rgb),.55),
             0 6px 18px -12px rgba(var(--shadow-rgb),.22);
}
/* the callout lifts slightly into the space above it, which is what makes it
   read as sitting ON the page rather than in the flow of it */
body.p-contact .contact-grid{ margin-top:2rem; }
body.p-contact .contact-aside{ padding-top:.4rem; }
/* aside cards stay quieter than the callout so the form is clearly the subject */
body.p-contact .ccard{ box-shadow:var(--shadow-sm); }

/* Grid children default to min-width:auto, so an unbreakable child (a long email
   address, or a padded card) can force its track wider than the container. With
   the callout's larger padding this pushed the contact page 9px past 390. Letting
   the tracks shrink, and allowing the long addresses to wrap, fixes it at source. */
.contact-grid > *{ min-width:0; }
.contact-aside a, .contact-aside .crow span{ overflow-wrap:anywhere; }
@media (max-width:560px){
  .enquiry{ padding:clamp(1.15rem,4.4vw,1.6rem); border-radius:var(--radius); }
}

/* ------------------------------------------------------------------
   ROUND 6 (Jon, 13 Aug 2026)
------------------------------------------------------------------- */

/* 11. Our Care: the photograph now matches the accordion exactly, so the bottom
       edges are level whichever panel is open (Jon, round 6: "should just extend
       to the bottom of the extended drop down"). Stretching the row and letting
       the photo fill it does this by construction, with no fixed aspect ratio to
       drift out of step. Sticky is dropped: a sticky element cannot also be the
       thing whose height is being matched. */
@media (min-width:901px){
  .care-accordion{ align-items:stretch; }
  .care-accordion .ca-photo{
    position:relative; top:auto; height:100%; aspect-ratio:auto; min-height:0;
  }
}

/* 12. Our Care needed more places for real photographs (Jon, round 6). This strip
       sits under the day-in-the-life steps and gives three captioned slots that
       follow the arc of a day, so a phone-photo pass has somewhere obvious to land. */
.daystrip{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2.4rem; }
.daystrip figure{ margin:0; }
.daystrip .ds-img{ position:relative; aspect-ratio:4/3; border-radius:var(--radius-sm);
  overflow:hidden; box-shadow:var(--shadow-sm); }
.daystrip .ds-img .ph{ position:absolute; inset:0; }
.daystrip figcaption{ margin-top:.6rem; font-size:.88rem; color:var(--ink-soft); }
@media (max-width:820px){ .daystrip{ grid-template-columns:1fr 1fr; } .daystrip figure:last-child{ display:none; } }
@media (max-width:520px){ .daystrip{ grid-template-columns:1fr; } .daystrip figure:last-child{ display:block; } }

/* 13. Footer home columns sized as one (Jon, round 6). The service line was already
       boxed to two lines; the address needed the same so the two home columns match
       depth for depth, and both columns share a single grid row so their cards and
       links start and end level whatever the content length. */
.foot .cols{ align-items:start; }
.foot .fcol{ display:flex; flex-direction:column; }
.foot .fcol .fmore{ margin-top:auto; }

/* ------------------------------------------------------------------
   ROUND 7 (Jon, 13 Aug 2026)
------------------------------------------------------------------- */

/* 14. Care accordion, revised. Round 6 stretched the photograph to match the copy
       column, which kept the bottoms level but meant the picture changed size every
       time a panel opened. Jon now wants the IMAGE ITSELF to stay one size, while
       still honouring the earlier rule that an open panel never runs past the bottom
       of it. Both hold at once only if the photo is a FIXED height and the copy
       column is capped to that same height, so the tallest panel is the constraint
       rather than the outcome. The cap is generous enough that no current panel
       reaches it (measured: tallest is 614px against a 640px frame). */
@media (min-width:901px){
  .care-accordion{ align-items:start; }
  .care-accordion .ca-photo{
    position:sticky; top:110px;
    height:var(--ca-frame); aspect-ratio:auto; min-height:0;
  }
  /* The cap is gated on html.reveal-ready, and it has to be. The cap only makes
     sense while script.js is running, because that is what keeps exactly one
     panel open. With JavaScript off, every panel is open by design (see the
     .acc-body rules further up, which is the honest fallback) and the column
     needs 1855px - so a flat cap hid 1130px of it, four and a half of the six
     kinds of care, behind overflow:hidden. Measured with JS off AND with
     script.js blocked; both were silently broken.
     reveal-ready is set by the inline head script and dropped again after 2.5s
     if script.js never boots, so the cap applies in exactly the case it was
     written for and in no other. PROMOTE UPSTREAM: this is inherited, so every
     build carrying the care accordion has the same hole. */
  html.reveal-ready .care-accordion .acc{ max-height:var(--ca-frame); overflow:hidden; }
}
/* THE FRAME HEIGHT IS A VARIABLE NOW, and 640 was not enough here.
   640px is calibrated for FIVE panels, which is what Gratwick, Stanley Lodge and
   Nightingale all carry. This client has six, and a sixth closed head costs 78px,
   so the column needs 712px for its tallest panel. At 640 the cap silently
   clipped FIVE of the six panels with overflow:hidden - measured, and it would
   have shipped invisibly, because a clipped accordion looks exactly like a short
   one. The construction is unchanged and Jon's round 7 rule still holds: the
   picture is one fixed size and the panel column is capped to that same size, so
   no panel ever runs past the bottom of the photograph. Only the number moved.
   730 = 468 (six heads) + 244 (the tallest body) + 18 headroom for a copy edit.
   IF A PANEL IS ADDED OR ITS COPY GROWS, RE-MEASURE THIS. tools: cap.js. */
:root{ --ca-frame:730px; }

/* 15. Review slider. REMOVED, 7 Sep 2026. This build carried the component
   TWICE: once here and again as Y11.4 below, which is later in the file and
   therefore the one that was actually rendering. Two copies of a component
   is how a fix gets made in the half nobody is looking at - which is exactly
   what happened this round. The single definition is Y11.4. */

/* ============================================================
   Y. YELVERTON CARE (2 Sep 2026) - inherited layer. Y1-Y4 (Cormorant, Cinzel and
   the oak sprig) were removed on the Higher Park Lodge clone; the field variants,
   veil safety net, balance, transitions and certificate below are generic.
   Refresh page set, finished to the gratwick-standard. The build has NO client
   photography, so the layer below does two jobs: it carries the brand (an oak
   sprig lifted from the homes' own signage, and a Garamond under Trajan
   capitals), and it makes every empty slot look deliberate.
   ============================================================ */

/* --- Y5 hero field variants -----------------------------------
   Each page's field puts its blooms somewhere different, so the eight heroes
   are recognisably one system without being the same picture eight times. */
.brandfield.f2::before{ background:
  radial-gradient(ellipse 56% 60% at 18% 26%, var(--field-bloom-a) 0%, var(--field-bloom-a0) 66%),
  radial-gradient(ellipse 60% 64% at 88% 82%, var(--field-bloom-b) 0%, var(--field-bloom-b0) 70%); }
.brandfield.f3::before{ background:
  radial-gradient(ellipse 62% 52% at 50% 12%, var(--field-bloom-a) 0%, var(--field-bloom-a0) 70%),
  radial-gradient(ellipse 54% 62% at 16% 92%, var(--field-bloom-b) 0%, var(--field-bloom-b0) 68%); }
.brandfield.f4::before{ background:
  radial-gradient(ellipse 50% 56% at 84% 30%, var(--field-bloom-a) 0%, var(--field-bloom-a0) 64%),
  radial-gradient(ellipse 70% 60% at 30% 96%, var(--field-bloom-b) 0%, var(--field-bloom-b0) 72%); }
.brandfield .arc{ right:-18%; bottom:-46%; opacity:.16; }
.brandfield .arc2{ left:-30%; top:-42%; opacity:.10; }
/* The field needs to be a designed surface, not a dark rectangle: the sprig sits
   in it at a size nobody would call an icon, cropped by the frame the way a
   watermark is, with the blooms lifting the ground around it. */
.brandfield .fieldmark{ position:absolute; right:2%; top:50%; width:min(46vw,620px);
  transform:translateY(-54%); color:var(--primary); opacity:.19; }
.brandfield .fieldmark svg{ width:100%; height:auto; display:block; }
.brandfield.f2 .fieldmark{ right:auto; left:3%; top:34%; width:min(38vw,500px); opacity:.17; }
.brandfield.f3 .fieldmark{ right:6%; top:46%; width:min(34vw,460px); opacity:.18; }
.brandfield.f4 .fieldmark{ right:auto; left:46%; top:70%; width:min(40vw,520px); opacity:.16; }
@media (max-width:760px){ .brandfield .fieldmark{ width:96vw; right:-18%; top:auto; bottom:6%; transform:none; opacity:.15; } }

/* --- Y6 small things ------------------------------------------ */
.cta .ctatels{ margin-top:1.1rem; }
.hero .eyebrow{ color:var(--accent-on-photo); }
/* The library's .say sets a comfortable measure; Cormorant headings above it are
   now larger, so the gap between head and body needed one step more air. */
.section-head .say{ margin-top:1.05rem; }

/* --- Y8 highlight cards ------------------------------------
   The photoless override that slimmed these to a 16/5 band was reverted on
   6 Sep 2026 when the client's photographs arrived; the library's own 16/10
   proportion is right again now there is something in the frame. The lead
   card keeps a slightly shorter slab than the library default so the copy
   beside it still leads. */
@media (min-width:901px){ .hl-list .hl.lead .hl-img{ min-height:19rem; } }
.hl .hl-img .ph::after{ width:clamp(24px,9%,34px); }

/* --- Y10 no orphaned words in headings -----------------------
   Cormorant is wide, the headings are large, and several of them were breaking
   with a single short word alone on the last line ("go.", "is.", "inspected.").
   Measured, not guessed: three headings on three different pages. text-wrap
   balance lets the browser even the lines out, which fixes all of them at once
   and keeps working when the client edits the copy. It degrades to normal
   wrapping where it is unsupported. PROMOTE UPSTREAM. */
h1,h2,h3,.section-head .say,.hero .sub{ text-wrap:balance; }

/* ============================================================
   Y11  ROUND 3 (6 September 2026, Jon's list)
   ============================================================ */

/* --- Y11.1 page transitions ----------------------------------
   Jon: "needs to be a softer transition between loading / going between pages."
   Two halves, and they have to agree with each other or the site flickers.

   IN  - every page fades and settles up 8px on arrival. Opacity and transform
         only, so it composites and never relays the page. The first-load veil
         already sits over this, so on a first visit the two read as one move.
   OUT - script.js adds .leaving to <html> when an internal link is clicked and
         holds the navigation for the length of this fade. 260ms: long enough to
         read as a transition, short enough that nobody waits for it.

   THE FAILURE MODE this is written around: if the fade-in is gated on JavaScript
   and the script never boots, the page sits at opacity 0 and the site is blank.
   So the fade-in is declared on html.js ONLY (the inline head script sets that
   class before anything else can fail) and it is an animation with `forwards`,
   which cannot leave the page invisible even if it is interrupted. With no
   JavaScript at all the rule never matches and the page is simply there. */
@media (prefers-reduced-motion:no-preference){
  /* NO fill-mode on this animation, and that is deliberate. With `both` the
     animation's final opacity:1 keeps winning the cascade after it has finished
     (animations outrank ordinary declarations), so .leaving could never fade the
     page out and the exit half was silently dead. MEASURED: with the fill mode
     removed, body opacity is 0.42 at 150ms into a click. The animation has no
     delay, so it applies from the first frame and nothing flashes. */
  html.js body{ animation:pagein .5s var(--ease); }
  html.js.leaving body{ opacity:0; transition:opacity .26s var(--ease); }
}
@keyframes pagein{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
/* the veil sits above the fading body, so it must not fade with it */
.loader{ animation-fill-mode:forwards; }
html.js.leaving .loader{ opacity:0; }

/* --- Y11.2 the CQC certificate -------------------------------
   Adopted from the Stanley Lodge build (Jon, 6 Sep: "use the updated cqc cards
   we created ... ensure this is used going forward"). Re-skinned to the ivory
   and gold: the seal sits on the dove band, the rule is the ivory hairline and
   the rating word is --good (#38624A, 6.56:1 on white, MEASURED not assumed).

   USED ON THE YELVERTON ONLY. The library's rule, which this build follows:
   a decorative certificate is for a home rated Good. The Long Brook is rated
   Requires Improvement overall with Caring and Responsive Good, so it keeps the
   quiet .cqc-chip that states the position plainly. Dressing a mixed result up
   in a certificate would be the site telling a story the report does not. */
.cqc-cert{ position:relative; max-width:820px; margin:2.4rem auto 0; background:var(--card);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:clamp(2.1rem,4.5vw,3.2rem) clamp(1.4rem,4vw,3rem); text-align:center; }
.cqc-cert::before{ content:""; position:absolute; inset:12px; pointer-events:none;
  border:1px solid var(--rule); border-radius:calc(var(--radius) - 8px); }
.cc-seal{ display:inline-grid; place-items:center; width:52px; height:52px; border-radius:50%;
  background:var(--band-tint); color:var(--primary-ink); margin-bottom:.9rem; }
.cc-seal svg{ width:26px; height:26px; }
.cc-org{ display:block; font-weight:700; font-size:.78rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold-ink); }
.cc-fives{ list-style:none; margin:1.9rem auto 0; padding:0; max-width:620px;
  display:grid; grid-template-columns:repeat(5,1fr); }
.cc-fives li{ position:relative; display:flex; flex-direction:column; align-items:center;
  gap:.4rem; padding:.2rem .5rem; }
.cc-fives li + li::before{ content:""; position:absolute; left:0; top:12%; bottom:12%;
  width:1px; background:linear-gradient(180deg, transparent, var(--rule) 30%, var(--rule) 70%, transparent); }
.cc-fives .tick{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--good); color:#fff; }
.cc-fives .tick svg{ width:12px; height:12px; }
.cc-fives b{ font-family:var(--body); font-weight:700; font-size:.88rem; color:var(--ink); }
.cc-fives em{ font-style:normal; font-size:.78rem; color:var(--ink-soft); }
.cc-line{ margin:2rem auto 0; padding-top:1.7rem; max-width:560px; position:relative; }
.cc-line::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:min(340px,80%); height:1px; background:var(--rule); }
.cc-line .big{ font-family:var(--display); font-weight:600; font-size:clamp(1.35rem,2.6vw,1.7rem);
  color:var(--ink); }
.cc-line .big .good{ color:var(--good); font-style:italic; }
.cc-line .when{ display:block; margin-top:.45rem; color:var(--ink-soft); font-size:.95rem; }
.cc-actions{ margin-top:1.9rem; display:flex; align-items:center; justify-content:center;
  gap:.55rem 1.1rem; flex-wrap:wrap; }
.cc-addr{ color:var(--ink-soft); font-size:.92rem; }
.cc-addr a{ color:var(--gold-ink); font-weight:700; text-decoration:underline; }
@media (max-width:640px){
  .cc-fives{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:.9rem .4rem; max-width:340px; }
  .cc-fives li + li::before{ display:none; }
  .cc-fives li:last-child{ grid-column:1 / -1; }
}

/* --- Y11.3 the two-picture band ------------------------------
   Jon: "a dual image section to break up reviews and fees." Two photographs
   edge to edge with a line of copy between them, so the run of text blocks in
   the lower half of the home page has a breath in it. Deliberately NOT a card:
   no shadow, no radius on the outer, so it reads as a band rather than a
   third component competing with the reviews above and the fees below. */
.section.duoband{ padding:0; }
.duo{ display:grid; grid-template-columns:1fr 1fr; }
/* 16/10 rather than 4/3: at 1440 a 4/3 half-width picture is 540px tall, and two
   of them plus the line of copy made an 840px band, which stops being a breather
   between two sections and becomes a third section. */
.duo .d{ position:relative; overflow:hidden; aspect-ratio:16/10; }
.duo .d img{ width:100%; height:100%; object-fit:cover; display:block; }
.duo-say{ background:var(--accent-tint); display:grid; place-items:center;
  padding:clamp(2.6rem,5vw,4rem) var(--w1); text-align:center; }
.duo-say p{ font-family:var(--display); font-weight:500; font-size:clamp(1.3rem,2.5vw,1.85rem);
  line-height:1.45; color:var(--ink); max-width:34ch; margin:0 auto; }
.duo-say p .serif{ font-style:italic; color:var(--primary-ink); }
.duo-say .who{ display:block; margin-top:1rem; font-family:var(--body); font-size:.82rem;
  font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); }
@media (max-width:720px){ .duo{ grid-template-columns:1fr; } .duo .d{ aspect-ratio:16/10; }
  .duo .d:last-child{ display:none; } }

/* --- Y11.6 the care accordion --------------------------------
   NOTHING HERE. Deliberately.

   The first pass at this section shipped a Serenity-era 3/4 sticky picture, and
   the second reached for Stanley Lodge's S16 (stretch the photo to the panel
   column so the two finish level). Both were wrong, and the reason is in this
   file already: Serenity went through TWO rounds with Jon on this exact
   component. Round 6 was the stretch. Round 7 REVERSED it, because stretching
   means the picture changes size every time somebody opens a panel, and Jon
   asked for "the IMAGE ITSELF to stay one size". The answer he signed off is a
   fixed-height sticky photo with the panel column capped to the same height,
   and it is already in this build at rule 14 above.

   So the component keeps its own rules and this layer adds none. The only thing
   fixed below is a mobile leak in rule 3. */


/* ============================================================
   HPL ADDITIONS - Higher Park Lodge (16 Sep 2026)
   Single home, Homely tier, Refresh page set at showcase finish.
   Everything below is token-only. Blocks marked PROMOTE UPSTREAM are
   generic and belong in the shared library; the rest is this preset.
   ============================================================ */

/* --- H1 type: Fraunces sizes ----------------------------------
   The Yelverton layer lifted every heading ~1.15x because Cormorant
   runs small on the em. Fraunces has a generous x-height, so the
   library sizes the Briercliffe metrics were tuned on come back. */
h1{ font-size:clamp(2.5rem,5.4vw,4.2rem); line-height:1.05; letter-spacing:-.015em; }
h2{ font-size:clamp(1.95rem,3.7vw,2.9rem); line-height:1.1; letter-spacing:-.012em; }
h3{ letter-spacing:-.005em; }
.hero h1{ font-size:clamp(2.6rem,5.6vw,4.4rem); text-shadow:0 2px 30px rgba(0,0,0,.22); }
@media (max-width:760px){ h1, .hero h1{ font-size:clamp(2.2rem,8.6vw,3rem); } }
h2 .serif, h1 .serif{ font-style:italic; font-weight:500; }
.section-head h2 .serif, .about-copy h2 .serif, .fd-copy h2 .serif, .fr-copy h2 .serif,
.cta h2 .serif{ color:var(--cta); }
.band-deep h2 .serif, .hero h1 .serif{ color:var(--serif-hi); }
.eyebrow{ font-family:var(--body); font-weight:800; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; }
.ki-label{ font-family:var(--body); }
.hero .eyebrow{ color:rgba(255,255,255,.9); }
.acc-head{ font-weight:500; }

/* --- H2 the brand: horse chestnut leaf + wordmark -------------
   The leaf is drawn for this build (continuous-line, five leaflets,
   symmetric about x=24 on a 48 viewBox: measured bbox 10.42-37.58).
   It reads as "park" (conkers, avenues of trees) and is deliberately
   not Yelverton's oak or Briercliffe's rose. Removal is one swap: see
   BUILD_NOTES. */
.brand{ gap:.62rem; font-family:var(--display); }
.brand .leaf{ width:34px; height:34px; flex:none; display:block; color:var(--accent-soft); transition:color .3s; }
.brand .leaf svg{ width:100%; height:100%; display:block; }
.nav.scrolled .brand .leaf{ color:var(--primary); }
.brand .wm{ display:flex; flex-direction:column; line-height:1.02; }
.brand .wm b{ font-family:var(--display); font-weight:600; font-size:1.3rem; letter-spacing:-.005em; }
.brand .wm i{ font-style:normal; font-family:var(--body); font-weight:700; font-size:.6rem;
  letter-spacing:.22em; text-transform:uppercase; opacity:.8; margin-top:.22rem; }
@media (min-width:1041px) and (max-width:1200px){ .brand .wm b{ font-size:1.12rem; } .brand .leaf{ width:30px; height:30px; } }
@media (max-width:430px){ .brand .wm b{ font-size:1.08rem; } .brand .wm i{ font-size:.55rem; letter-spacing:.18em; } .brand .leaf{ width:30px; height:30px; } }
.nav.scrolled{ background:var(--nav-solid); box-shadow:0 10px 30px -24px rgba(var(--shadow-rgb),.45); }

/* --- H3 first-load veil: the leaf draws itself (index.html ONLY) ---
   Per-path dash lengths, MEASURED with getTotalLength() (the Briercliffe
   lesson: one shared dasharray finishes the short strokes long before
   the long ones). Order: stalk, centre leaflet, the two beside it, the
   two outer, then the veins. Finished drawing by 1.45s; the wordmark is
   in by 1.6s; script.js lifts at 1.95s; the CSS safety net at 3.2s. */
.loader .lmark{ color:var(--accent-soft); gap:1.1rem; }
.loader .lleaf{ width:112px; height:112px; display:block; }
.loader .lleaf path{ fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:draw var(--dur) var(--ease) var(--at) forwards; }
.loader .lleaf .p0{ --len:12;  --dur:.40s; --at:.10s; }
.loader .lleaf .p1{ --len:44;  --dur:.72s; --at:.38s; }
.loader .lleaf .p2, .loader .lleaf .p3{ --len:38; --dur:.66s; --at:.52s; }
.loader .lleaf .p4, .loader .lleaf .p5{ --len:29; --dur:.58s; --at:.66s; }
.loader .lleaf .p6{ --len:11; --dur:.34s; --at:1.02s; }
.loader .lleaf .p7, .loader .lleaf .p8{ --len:10; --dur:.32s; --at:1.08s; }
.loader .lleaf .p9, .loader .lleaf .p10{ --len:8; --dur:.30s; --at:1.14s; }
.loader .lwm{ font-family:var(--display); font-weight:600; font-size:1.18rem; letter-spacing:.01em;
  text-transform:none; color:#fff; opacity:0; transform:translateY(6px); animation:wmin .9s var(--ease) .85s forwards; }
@keyframes wmin{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.loader{ pointer-events:none; }
.loader .lmark{ pointer-events:auto; }
@media (prefers-reduced-motion:reduce){
  .loader .lleaf path{ animation:none; stroke-dashoffset:0; }
  .loader .lwm{ animation:none; opacity:1; transform:none; }
}

/* --- H4 the leaf as ornament --------------------------------- */
.leaf-rule .lf svg{ width:100%; height:100%; display:block; }
.foot .fleaf{ display:block; width:38px; height:38px; margin-bottom:.8rem; color:var(--accent-soft); }
.foot .fleaf svg{ width:100%; height:100%; display:block; }

/* --- H5 the hero field, carrying the leaf ---------------------
   No photograph of the home exists yet (IMAGE_GUIDE 1). The hero sits
   on the library's designed brand field (S3/Y5), deep park green with a
   soft green bloom, and the leaf held large and faint like a watermark.
   A photograph drops in by replacing .brandfield with <img class="cover">.
   Stroke is non-scaling so the watermark stays a fine line at any size. */
.brandfield .fieldmark{ color:var(--accent-soft); opacity:.12; }
.brandfield .fieldmark svg{ width:100%; height:auto; display:block; overflow:visible; }
.brandfield .fieldmark path{ fill:none; stroke:currentColor; stroke-width:2.4px; vector-effect:non-scaling-stroke;
  stroke-linecap:round; stroke-linejoin:round; }
.brandfield .arc, .brandfield .arc2{ color:var(--accent-soft); }
.brandfield .arc{ opacity:.10; }
.brandfield .arc2{ opacity:.07; }
@media (max-width:760px){ .brandfield .fieldmark{ width:120vw; right:-38%; bottom:-6%; opacity:.09; } }

/* The named photo slot. One quiet pill in the corner of the hero, the same
   voice as every other placeholder label, so the hero reads as designed now
   and says plainly what belongs there. Remove with the placeholder. */
.hero .slot-note{ position:absolute; z-index:3; right:var(--w1); bottom:1.1rem;
  display:inline-flex; align-items:center; gap:.5rem; max-width:calc(100% - 2 * var(--w1));
  background:rgba(251,248,242,.14); border:1px solid rgba(255,255,255,.22); color:rgba(255,255,255,.86);
  border-radius:999px; padding:.4rem .9rem; font-size:.74rem; font-weight:700; letter-spacing:.01em; }
.hero .slot-note svg{ width:15px; height:15px; flex:none; }
@media (max-width:760px){ .hero .slot-note{ left:var(--w1); right:auto; bottom:.8rem; font-size:.68rem; } }
html.cookie-up .hero .slot-note{ display:none; }

/* --- H6 .hero.plain (ported from Briercliffe) PROMOTE UPSTREAM ---
   An authored deep band for pages with no photograph (contact, privacy).
   primary-deep, the arc held large and faint behind the text. */
.hero.plain{ background:var(--primary-deep); overflow:hidden; }
.hero.plain .bg{ display:none; }
.hero.plain::after{ display:none; }
.hero.plain .plain-arc{ position:absolute; left:50%; top:50%; width:min(1180px,116%);
  transform:translate(-50%,-42%); color:var(--accent-soft); opacity:.10; pointer-events:none; }
.hero.plain .plain-arc path{ vector-effect:non-scaling-stroke; }
.hero.plain .inner{ position:relative; z-index:2; }
.hero.plain.slim{ min-height:clamp(440px,60vh,560px); }
@media (max-width:640px){ .hero.plain.slim{ min-height:clamp(400px,56vh,500px); } }

/* --- H7 .icon-row.six (ported from Briercliffe) PROMOTE UPSTREAM ---
   3 x 2 at desktop. The gutter rule never draws on the first item of a
   row, and a horizontal hairline sits above the second row. */
.icon-row.six{ grid-template-columns:repeat(3,1fr); row-gap:clamp(2.2rem,3.6vw,3.4rem); }
@media (min-width:1025px){
  .icon-row.six .ir:nth-child(3n+1)::before{ display:none; }
  .icon-row.six .ir:nth-child(n+4)::after{ content:""; position:absolute; left:6%; right:6%;
    top:calc(-1 * clamp(1.1rem,1.8vw,1.7rem)); height:1px;
    background:linear-gradient(90deg, transparent, var(--rule) 20%, var(--rule) 80%, transparent); }
}
@media (max-width:1024px){ .icon-row.six{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .icon-row.six{ grid-template-columns:1fr; } }

/* --- H8 elevation declared once (craft floor) -----------------
   Several inherited components carry a hairline border UNDER a soft
   shadow (the ghost card). On the components this site uses, keep the
   shadow and drop the border. The values card also loses its 4px top
   stripe, which is an accent stripe by another name. PROMOTE UPSTREAM. */
.value{ border:0; }
.value::before{ display:none; }
.value .ico svg{ width:30px; height:30px; }
.hl, .hl-list .hl{ border:0; }
.cblock{ border:0; }
.keystrip{ border:0; }

/* --- H9 the key-info strip, placed under the welcome ----------- */
.keystrip.after{ margin-top:clamp(3rem,5.4vw,4.4rem); }
.keystrip .k svg{ width:30px; height:30px; color:var(--primary); margin-bottom:.8rem; }
.keystrip .k b{ font-size:1.22rem; }

/* --- H10 the regulation block (neutral trust seat) ------------
   The shape and weight of the certificate the sibling builds carry,
   with none of the rating furniture: seal, organisation line, the
   neutral sentence, one link. Deliberately calm. No ticks, no rating
   word, no date. See BUILD_NOTES, CQC. */
.trust{ position:relative; max-width:760px; margin:0 auto; background:var(--card);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); text-align:center;
  padding:clamp(2.2rem,4.6vw,3.2rem) clamp(1.4rem,4.4vw,3.2rem); }
.trust::before{ content:""; position:absolute; inset:12px; pointer-events:none;
  border:1px solid var(--rule); border-radius:calc(var(--radius) - 8px); }
.trust .cc-org{ margin-top:.1rem; }
.trust .t-say{ margin:1.2rem auto 0; max-width:40ch; font-family:var(--display); font-weight:500;
  font-size:clamp(1.2rem,2.1vw,1.46rem); line-height:1.5; color:var(--ink); text-wrap:balance; }
.trust .t-say a{ color:var(--primary-ink); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; }
.trust .t-say a:hover{ color:var(--cta-hover); }
.trust .cc-actions{ margin-top:1.6rem; }
.band-tint .trust, .section .trust{ position:relative; }

/* --- H11 the care band on the honey tint ---------------------- */
.band-accent .icon-row .ir .ico{ color:var(--primary); }
.icon-row .ir .ico svg{ width:100%; height:100%; display:block; }
.care-foot a{ color:var(--gold-ink); text-decoration:underline; text-underline-offset:3px; }
.localline a{ color:var(--gold-ink); }

/* --- H12 the park beat: a photo slot that leads -------------- */
.feature-duo .fd-photo{ aspect-ratio:5/4; }
.fd-copy .localline{ margin-top:1.5rem; }
@media (min-width:1001px){ .feature-duo.big .fd-photo{ aspect-ratio:4/3.4; } }

/* --- H13 day care beat on the deep green --------------------- */
.band-deep .say{ color:rgba(255,255,255,.82); }
.band-deep .leaf-rule .lf{ color:var(--accent-soft); }
.band-deep .cta-row{ justify-content:center; margin-top:1.9rem; }
.btn.light:hover{ background:var(--accent-tint); border-color:var(--accent-tint); }

/* --- H14 footer (single home) -------------------------------- */
.foot .cols{ grid-template-columns:1.25fr 1fr 1fr 1.1fr; }
.foot address{ min-height:0; }
.foot .fnav{ grid-template-columns:1fr; }
.foot .fnav.two{ grid-template-columns:1fr 1fr; }
.foot-legal .row{ align-items:center; }
.foot-legal .reg a{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:1040px){ .foot .cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .foot .cols{ grid-template-columns:1fr; } }

/* --- H15 galleries with photo slots -------------------------- */
.galgrid .g-img{ position:relative; }
.galgrid .g-img img{ position:absolute; inset:0; }

/* --- H16 small things ---------------------------------------- */
.cta .tel-lg{ color:var(--primary-ink); }
.section-head.center .leaf-rule{ margin-bottom:1rem; }
.prose .updated{ margin-top:2.4rem; font-size:.92rem; color:var(--ink-soft); }
.about-cta .tel a{ color:var(--primary-ink); text-decoration:underline; text-underline-offset:3px; }
.loc-details .li span a{ color:var(--primary-ink); font-weight:700; }
.consent span a{ color:var(--primary-ink); }
.contact-aside .crow a{ font-size:1.05rem; }
.cs-grid.four{ grid-template-columns:1fr 1fr; }
.hero .cta-row .btn.ghost-light{ backdrop-filter:blur(2px); }

/* The hero rule over the dark field takes the ornament gold, not the green
   (the library's --primary would sit at 1.94:1 on primary-deep and vanish). */
.hero .gold-rule, .hero.left .gold-rule{ background:var(--accent-line); }

/* --- H17 first-render fixes (QA pass 1, 16 Sep 2026) ----------- */
/* The 56-unit line icons only fill about 70% of their box, so at 30px they
   read as specks inside the 58px values disc. Measured and lifted. */
.value .ico{ width:66px; height:66px; }
.value .ico svg{ width:40px; height:40px; }
.keystrip .k svg{ width:36px; height:36px; }
/* an eyebrow directly above a split-column heading was touching it */
.about-copy .eyebrow + h2, .fd-copy .eyebrow + h2, .fr-copy .eyebrow + h2{ margin-top:.75rem; }
.about-copy .eyebrow, .fd-copy .eyebrow, .fr-copy .eyebrow{ display:block; }
/* the arc behind the care band crossed the first and last columns' copy */
.band-accent.has-arc .arc{ opacity:.11; top:4%; }
/* Explore links: "The Home & Park" and "Privacy & Cookies" broke over two
   lines in a two-up list at 1536, so the list is one column. */
.foot .fnav.two{ grid-template-columns:1fr; }
/* Every hero on this site sets its text LEFT, so the watermark leaf always sits
   in the right half. The inherited f2/f4 positions put it behind the eyebrow. */
@media (min-width:761px){
  .brandfield.f2 .fieldmark{ left:auto; right:9%; top:44%; width:min(30vw,420px); opacity:.11; }
  .brandfield.f3 .fieldmark{ left:auto; right:4%; top:50%; width:min(34vw,470px); opacity:.12; }
  .brandfield.f4 .fieldmark{ left:auto; right:14%; top:56%; width:min(28vw,400px); opacity:.11; }
}
.dayline .dli .dico svg{ width:38px; height:38px; }
@media (max-width:560px){ .dayline .dli .dico svg{ width:30px; height:30px; } }
/* An embedded map that has not loaded (or is blocked) must read as a panel,
   not as nothing: on the tint band the library's tint fill was invisible. */
.band-tint .loc-map{ background:var(--card); box-shadow:var(--shadow-sm); }
.consent span{ font-weight:400; }
/* At phone width the hero content runs to the bottom edge, so the pill printed
   over the phone line (measured at 390). It joins the flow under the content. */
@media (max-width:760px){
  .hero .slot-note{ position:relative; left:auto; right:auto; bottom:auto; justify-self:start;
    margin:0 var(--w1) 1.4rem; }
  .hero:has(.slot-note) .inner{ padding-bottom:1.6rem; }
}
/* The visit steps are three, not the library's four. Declared as a class so the
   phone stack still wins (an inline grid-template here held three cramped
   columns at 390, measured). */
.steps-row.three{ grid-template-columns:repeat(3,1fr); margin-top:2.6rem; }
@media (max-width:860px){ .steps-row.three{ grid-template-columns:1fr; gap:2.2rem; } }
@media (max-width:560px){ .cs-grid.four{ grid-template-columns:1fr; } }


/* ============================================================
   HPL ROUND 2 (17 Sep 2026)
   ============================================================ */

/* --- R2.1 the CQC certificate carrying a mixed result --------
   Ported from the Yelverton build (Y13.3, The Long Brook). Jon, 17 Sep:
   "pull our cqc template from yelverton". The certificate base (.cqc-cert,
   .cc-fives, .cc-line) was already in this file; only the mixed marks
   were missing. Hollow amber ring, amber overall word, never the green. */
.cc-fives .mark{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:transparent; border:2px solid var(--mixed); color:var(--mixed); }
.cc-fives .mark svg{ width:11px; height:11px; }
.cc-line .big .mixed{ color:var(--mixed); font-style:italic; }
.cc-fives li.is-mixed em{ color:var(--mixed); line-height:1.3; font-size:.74rem; }

/* --- R2.2 review cards (ported from Yelverton, library .reviews) - */
.reviews{ margin-top:2.4rem; display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:stretch; }
.reviews.three{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.reviews.single{ grid-template-columns:1fr; max-width:820px; margin-inline:auto; }
.review{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:clamp(1.5rem,2.4vw,2.1rem); display:flex; flex-direction:column; height:100%; }
.review .marks{ font-family:var(--display); font-weight:600; font-size:2.6rem; line-height:.5;
  color:var(--accent-line); display:block; height:1.1rem; }
.review blockquote{ margin-top:1rem; color:var(--ink); font-size:1.03rem; line-height:1.72; }
.review .attr{ margin-top:auto; padding-top:1.3rem; }
.review .attr b{ font-family:var(--body); font-weight:800; color:var(--ink); }
.review .attr span{ display:block; color:var(--ink-soft); font-size:.9rem; margin-top:.15rem; }
.review .src{ margin-top:.85rem; font-size:.82rem; color:var(--ink-soft); }
.review .src a{ color:var(--primary-ink); font-weight:700; text-decoration:underline; }
/* on the deep green the cards carry no drop shadow (it reads as dirt on a dark ground) */
.band-deep .review{ box-shadow:none; }
@media (max-width:1100px){ .reviews.three{ grid-template-columns:1fr 1fr; }
  .reviews.three .review:last-child{ grid-column:1 / -1; } }
@media (max-width:860px){ .reviews, .reviews.three{ grid-template-columns:1fr; }
  .reviews.three .review:last-child{ grid-column:auto; } }
.qnote + .about-cta{ margin-top:1.6rem; }

/* R2.3 a quote aside sitting on a tint band would vanish into it (.qnote is itself
   band-tint): lift it onto the card colour there. */
.band-tint .qnote, .band-accent .qnote{ background:var(--card); box-shadow:var(--shadow-sm); }
.qp-card .src a{ color:var(--primary-ink); font-weight:700; text-decoration:underline; }

/* ============================================================
   HPL ROUND 2 - uniform care accordion (PROMOTE UPSTREAM)
   Jon, 17 Sep 2026, on #care: "I don't like how much the options move when
   going down in order or skipping some - please try make this more uniform."

   MEASURED BEFORE (header travel per click, sampled every 16ms):
     desktop 1536: 1->2 head 2 moved 321px, 2->3 head 3 moved 261px and head 4
     drifted 30px the OTHER way, 3->4 head 4 moved 291px; 3->1 moved heads 2-3
     by 321px and head 4 by 30px.  Phone 390: 500 / 440 / 411px, with 30-90px
     of drift on the heads below.  Every click moved a different amount, and
     the heads below the pair wobbled by the difference between the two bodies.
     (Section height was already stable thanks to the min-height floor.)

   WHY: an accordion's heads sit on top of whichever body is open, so their
   travel is the difference between the closing body and the opening body,
   and the four bodies are four different lengths.

   THE FIX: every care body reserves one shared slot height, --ca-slot, which
   script.js measures as the tallest body (re-measured on resize and when the
   webfonts land, so it cannot go stale). A closing panel and an opening panel
   now trade exactly the same pixels on the same curve, so:
     - heads between the closing and opening item move by ONE identical amount,
       whichever items they are, in order or skipping;
     - heads below both do not move at all, even mid-transition;
     - the column, the photo frame and the section never change height.
   The slot only exists while script.js is running (the variable is set at
   runtime), so the no-JS state, where every panel is open at its natural
   height, is untouched. The FAQ accordions never receive --ca-slot and keep
   their ordinary behaviour. Shorter bodies leave a little quiet space above
   the next rule, which is the price of the heads staying still. */
.care-accordion .acc-body-inner{ min-height:var(--ca-slot, 0px); box-sizing:border-box; }
/* one shared curve for the closing and the opening panel, so the pair cancels
   exactly frame by frame (the heads below them hold still throughout) */
.care-accordion .acc-body{ transition:max-height .45s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion: reduce){
  .care-accordion .acc-body{ transition:none; }
}

/* R3.1 the note above the certificate (new management, improvement commitment).
   A quiet panel, not a disclaimer box: card colour on the band, one hairline, the
   same 820px measure as the certificate it introduces so the two read as one object. */
.cc-lead{ max-width:820px; margin:2.2rem auto 0; background:var(--card); border:1px solid var(--rule);
  border-radius:var(--radius-sm); padding:1.15rem clamp(1.2rem,2.6vw,1.8rem); text-align:center; }
.cc-lead p{ color:var(--ink-soft); font-size:1rem; line-height:1.68; max-width:68ch; margin-inline:auto; }
.cc-lead b{ color:var(--ink); font-weight:800; }
.cc-lead + .cqc-cert{ margin-top:1.1rem; }

/* R3.2 the park hero holds the house right of centre, so a phone-width crop of the
   centre shows hedge and railing and loses the building entirely. Pull the crop across
   below 760px. Scoped to this image, not to every hero. */
@media (max-width:760px){
  .hero .bg img.cover.pos-house{ object-position:70% 42%; }
}

/* ============================================================================
   HPL ROUND 4: DEPTH (ported from Nightingale sx sets A/B and Stanley S14, 18 Sep 2026)

   >> PROMOTE UPSTREAM <<  These are the first single-home Refresh uses of the
   Nightingale sx set. Every component below was written for a multi-page SEO set;
   nothing in it is Nightingale-specific, and all nine belong in the shared library.

   Jon, 18 Sep 2026: "the whole page just lacks depth in the pages". The depth is
   carried by type, rule, numeral and layout, not by new photographs: this build has
   three real pictures and no interiors, so every component here is photoless by
   design (the read-next strip's photo slot is replaced by a line-art swatch).

   PORTED VERBATIM (Nightingale styles/base.css), with two changes only:
     1. every literal rgba() palette value is now rgba(var(--accent-line-rgb), ...)
        or rgba(var(--accent-soft-rgb), ...) - see tokens.css, round 4;
     2. the H8 one-declaration elevation rule is applied at the foot of this block
        (card components keep the shadow and drop the hairline border, as .value,
        .hl, .cblock and .keystrip already do on this build).
   The Nightingale geometry comments are kept: they explain why the connectors and
   arches are drawn the way they are, and re-deriving them is how they break.
   ============================================================================ */


/* -------------------------------------------------------------------------
   R4.1  .sx-sq  ("what stays the same / what we quietly changes", dementia)
   One panel, not two cards: a single white sheet split down the middle by a
   faded hairline, so the two halves read as one thought rather than a
   comparison table. Open rings mark what stays; small gold arrows mark what
   moves. On a phone the split turns horizontal.
   Seat on this site: Our Care, "What stays the same, and what we quietly change".
   ------------------------------------------------------------------------- */
.sx-sq{ margin-top:2.4rem; display:grid; background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); border:1px solid var(--rule); overflow:hidden; }
.sx-sq-col{ position:relative; padding:clamp(1.5rem,4.4vw,2.5rem); }
.sx-sq-col + .sx-sq-col{ border-top:1px solid var(--rule); }
.sx-sq-lab{ display:block; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:800; }
.sx-sq-same .sx-sq-lab{ color:var(--primary-ink); }
.sx-sq-change .sx-sq-lab{ color:var(--gold-ink); }
.sx-sq-col h3{ font-family:var(--display); font-weight:600; font-size:clamp(1.3rem,2.6vw,1.62rem);
  margin-top:.5rem; line-height:1.16; }
.sx-sq-list{ list-style:none; margin:1.3rem 0 0; padding:0; display:flex; flex-direction:column; gap:1rem; }
.sx-sq-list li{ position:relative; padding-left:1.85rem; color:var(--ink-soft); font-size:1rem; }
.sx-sq-list li b{ font-family:var(--body); font-weight:800; color:var(--ink); }
.sx-sq-same .sx-sq-list li::before{ content:""; position:absolute; box-sizing:border-box;
  left:0; top:.42em; width:12px; height:12px; border-radius:50%; border:2px solid var(--primary); }
.sx-sq-change .sx-sq-list li::before{ content:""; position:absolute; box-sizing:border-box;
  left:1px; top:.5em; width:9px; height:9px; transform:rotate(-45deg);
  border-right:2px solid var(--gold-ink); border-bottom:2px solid var(--gold-ink); }

@media (min-width:800px){
  .sx-sq{ grid-template-columns:1fr 1fr; }
  .sx-sq-col + .sx-sq-col{ border-top:0; }
  .sx-sq-col + .sx-sq-col::before{ content:""; position:absolute; left:0; top:2.2rem; bottom:2.2rem;
    width:1px; background:linear-gradient(180deg, transparent, var(--rule) 15%,
      var(--rule) 85%, transparent); }
}


/* -------------------------------------------------------------------------
   R4.3  .sx-readnext / .sx-rn  (the read-next strip above the CTA)
   Mini cards: a small square, an eyebrow label and a line in the display
   face. Three across from 700px, stacked with an arrow below it.
   HPL CHANGE: this build has no library of interior photographs, so the
   square carries a line-art icon instead (.sx-rn-img.ico, R4.10 below).
   Seats on this site: Our Care (tint), Life (honey).
   ------------------------------------------------------------------------- */
.sx-readnext{ margin-top:1.3rem; display:grid; gap:1rem; }
.sx-rn{ display:grid; grid-template-columns:84px 1fr auto; gap:1rem; align-items:center;
  background:var(--card); border:1px solid var(--rule); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm); padding:.65rem 1rem .65rem .65rem; color:var(--ink);
  transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.sx-rn:hover{ transform:translateY(-2px); border-color:var(--accent-line);
  box-shadow:0 24px 42px -30px rgba(var(--shadow-rgb),.6); }
.sx-rn-img{ position:relative; border-radius:11px; overflow:hidden; aspect-ratio:1/1;
  background:var(--band-tint); }
.sx-rn-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sx-rn-k{ display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:800; color:var(--gold-ink); }
.sx-rn-h{ display:block; margin-top:.25rem; font-family:var(--display); font-weight:600;
  font-size:1.08rem; line-height:1.2; color:var(--ink); }
.sx-rn-go{ flex:none; color:var(--primary-ink); }
.sx-rn-go svg{ display:block; width:18px; height:18px; }

@media (min-width:700px){
  .sx-readnext{ grid-template-columns:repeat(3,1fr); gap:1.2rem; }
  .sx-rn{ grid-template-columns:76px 1fr; padding:.7rem .9rem .8rem .7rem; align-items:center; }
  .sx-rn-go{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .sx-rn{ transition:none; }
  .sx-rn:hover{ transform:none; }
}


/* -------------------------------------------------------------------------
   R4.4  .sx-fourdoors / .sx-door  (the ways care is paid for)
   Arched cards, drawn like doors: a deep radius across the top, a second
   gold outline set inside the card edge, a small gold label, and one "who
   this usually fits" line pinned to the bottom of every card so they line up
   whatever the copy length. Ink on white, so contrast is the card's own
   13.70:1; the gold is the outline and the small label only, never a fill
   behind text.
   Seat on this site: Home, fees and funding (three doors, R4.9).
   ------------------------------------------------------------------------- */
.sx-fourdoors{ margin-top:2.6rem; display:grid; grid-template-columns:1fr; gap:1.5rem; }

.sx-door{ position:relative; display:flex; flex-direction:column;
  background:var(--card); border:1px solid var(--rule);
  border-radius:150px 150px var(--radius) var(--radius);
  padding:3.1rem 1.9rem 2rem; box-shadow:var(--shadow-sm); }

/* the inner gold arch, inset from the card edge and matched to it
   (outer radius 150px, inset 20px, so the inner radius is 130px) */
.sx-door::before{ content:""; position:absolute; left:20px; right:20px; top:18px; bottom:18px;
  border:1px solid var(--accent-line); opacity:.4; pointer-events:none;
  border-radius:130px 130px 12px 12px; }

.sx-door > *{ position:relative; z-index:1; }
.sx-door .sx-door-lab{ display:block; text-align:center; font-family:var(--body);
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-weight:800;
  color:var(--gold-ink); }
.sx-door h3{ margin-top:.55rem; text-align:center; font-size:1.24rem; line-height:1.16; }
.sx-door p{ margin-top:1rem; color:var(--ink-soft); font-size:1rem; }
.sx-door p + p{ margin-top:.7rem; }
/* margin-top:auto pins the fit line to the bottom of every card so the
   hairlines sit level whatever the copy length; the p above carries the gap. */
.sx-door p:last-of-type{ margin-bottom:1.5rem; }
.sx-door .sx-door-fit{ margin-top:auto; padding-top:1.15rem; border-top:1px solid var(--rule);
  font-size:.92rem; font-weight:700; color:var(--primary-ink); }
.sx-door .sx-door-fit b{ font-family:var(--body); font-weight:800; }

@media (min-width:561px){
  .sx-fourdoors{ grid-template-columns:1fr 1fr; gap:clamp(1.5rem,2.6vw,2.2rem); }
  .sx-door{ padding:3.3rem 2.1rem 2.1rem; }
}
@media (min-width:1100px){
  .sx-door h3{ font-size:1.32rem; }
}


/* -------------------------------------------------------------------------
   R4.5  .sx-sidebyside  (two options, matched row by row)
   Not a feature matrix. Each row is one topic, announced by a small centred
   rule-and-caps line, with two plain cards under it carrying one sentence
   each. The two sides are styled identically on purpose: neither option is
   being sold over the other.
   Narrow screens: the column headings drop away and each cell carries its
   own tag, so a stacked reader never loses which is which.
   Seat on this site: Our Care, "Respite or day care: which one fits".
   ------------------------------------------------------------------------- */
.sx-sidebyside{ margin-top:2.4rem; max-width:1000px; margin-inline:auto; }

.sx-sbs-heads{ display:none; }

.sx-sbs-row + .sx-sbs-row{ margin-top:2rem; }

.sx-sbs-topic{ display:flex; align-items:center; gap:.9rem;
  font-family:var(--body); font-weight:800; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft); }
.sx-sbs-topic::before,.sx-sbs-topic::after{ content:""; flex:1 1 auto; height:1px;
  background:var(--rule); }

.sx-sbs-cells{ margin-top:1.1rem; display:grid; grid-template-columns:1fr; gap:1rem; }

.sx-sbs-cell{ background:var(--card); border:1px solid var(--rule);
  border-radius:var(--radius-sm); padding:1.2rem 1.35rem;
  box-shadow:0 16px 34px -30px rgba(var(--shadow-rgb),.6); }
.sx-sbs-who{ display:block; font-family:var(--body); font-weight:800; font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--primary-ink); }
.sx-sbs-cell p{ margin-top:.5rem; color:var(--ink-soft); font-size:1.01rem; }

@media (min-width:561px){
  .sx-sbs-heads{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-bottom:.4rem; }
  .sx-sbs-heads span{ font-family:var(--display); font-weight:600;
    font-size:clamp(1.2rem,2.2vw,1.5rem); color:var(--ink); text-align:center;
    padding-bottom:.85rem; border-bottom:2px solid var(--accent-line); }
  .sx-sbs-cells{ grid-template-columns:1fr 1fr; gap:1.2rem; }
  .sx-sbs-who{ display:none; }
  .sx-sbs-cell{ padding:1.35rem 1.5rem; }
  /* HPL: the column heads' 2px gold underline and the first topic's hairline landed
     11px apart and read as one doubled rule. Give the first row its own air. */
  .sx-sbs-heads + .sx-sbs-row{ margin-top:1.5rem; }
}


/* -------------------------------------------------------------------------
   R4.6  .sx-steppath / .sx-sp  (three stops on one line)

   A path, not a warning: one gold hairline with three stops on it, the last
   one filled to show where it ends. No boxes, no numbers, so it reads as a
   route rather than a procedure. Vertical on a phone, horizontal from 900.

   THE GEOMETRY IS STATED ONCE, DO NOT RE-DERIVE IT (three real bugs were
   fixed here on the Nightingale build): every medallion sits at a fixed
   offset from the top of its stop, and each connector is drawn from ITS OWN
   medallion centre to the NEXT medallion centre (gap + offset + half ring),
   which is the same arithmetic whatever height the text runs to. On a wide
   screen the three stops are centred in three equal columns and ONE line is
   drawn on the container from the first medallion centre to the third:
   column width is (100% - 2 gaps) / 3, so the centres are at a sixth of that
   from either edge. Medallions paint on top with the band colour behind them,
   so the line disappears cleanly into each ring and there is nothing to
   overshoot.
   Seats on this site: Our Care, "If someone's needs change" (tint);
   Life, "Day care, how it begins" (deep green, R4.11).
   ------------------------------------------------------------------------- */
.sx-steppath{
  --sx-gap:2.4rem;      /* row gap on a phone, column gap on a wide screen */
  --sx-ring:20px;       /* medallion diameter */
  --sx-mtop:.3rem;      /* medallion offset from the top of its stop (phone) */
  position:relative; margin:2.8rem auto 0; max-width:640px;
  display:grid; gap:var(--sx-gap);
}
.sx-sp{ position:relative; padding-left:2.9rem; }
.sx-sp-mark{
  position:absolute; z-index:1; left:0; top:var(--sx-mtop); box-sizing:border-box;
  width:var(--sx-ring); height:var(--sx-ring); border-radius:50%;
  border:2px solid var(--accent-line); background:var(--surface);
}
.band-tint   .sx-sp-mark{ background:var(--band-tint); }
.band-accent .sx-sp-mark{ background:var(--accent-tint); }
.sx-sp:last-child .sx-sp-mark{
  background:var(--accent-line);
  box-shadow:0 0 0 5px rgba(var(--accent-line-rgb),.18);
}
/* connector: from this medallion's centre down to the next medallion's centre */
.sx-sp:not(:last-child)::before{
  content:""; position:absolute; z-index:0;
  left:calc(var(--sx-ring) / 2 - 1px); width:2px;
  top:calc(var(--sx-mtop) + var(--sx-ring) / 2);
  bottom:calc(-1 * (var(--sx-gap) + var(--sx-mtop) + var(--sx-ring) / 2));
  background:var(--accent-line); opacity:.55;
}
.sx-sp h3{ font-family:var(--display); font-weight:600; font-size:1.28rem; line-height:1.18; }
.sx-sp p{ margin-top:.55rem; color:var(--ink-soft); font-size:1rem; }
/* .sx-sp-foot is the SHARED centred foot line for the whole sx set on this build,
   not just the step path: the four tiles on the home page, the two panels on Our Care
   and the day care path on Life all end on one of these. Declared once. */
.sx-sp-foot{ margin:2.4rem auto 0; max-width:60ch; text-align:center;
  color:var(--ink-soft); font-size:1rem; }
.sx-sp-foot a{ color:var(--primary-ink); font-weight:800; text-decoration:underline; }
.sx-sq + .sx-sp-foot, .sx-sidebyside + .sx-sp-foot{ margin-top:2.1rem; }

@media (min-width:561px){
  .sx-steppath{ --sx-ring:22px; }
  .sx-sp{ padding-left:3.2rem; }
}
@media (min-width:900px){
  .sx-steppath{
    --sx-gap:clamp(2rem,4vw,3.6rem);
    max-width:none; margin-top:3.4rem;
    grid-template-columns:repeat(3,1fr); column-gap:var(--sx-gap);
  }
  .sx-sp{ padding-left:0; padding-top:calc(var(--sx-ring) + 1.5rem); text-align:center; }
  .sx-sp-mark{ left:50%; top:0; transform:translateX(-50%); }
  .sx-sp:not(:last-child)::before{ display:none; }
  .sx-steppath::before{
    content:""; position:absolute; z-index:0;
    top:calc(var(--sx-ring) / 2 - 1px); height:2px;
    left:calc((100% - 2 * var(--sx-gap)) / 6);
    right:calc((100% - 2 * var(--sx-gap)) / 6);
    background:var(--accent-line); opacity:.55;
  }
  .sx-sp h3{ max-width:16ch; margin-inline:auto; }
  .sx-sp p{ max-width:30ch; margin-inline:auto; }
}


/* -------------------------------------------------------------------------
   R4.7  .sx-kind  (the hairline ledger)
   A quiet ledger: a short display lead and one sentence under it, rows parted
   by hairlines, two columns from 561px. No icons, no chips, no fills; the
   shape comes from the rules and the space. Hairlines are var(--rule), which
   was measured on the tint band for this palette, so it needs nothing here.
   Seats on this site: The Home & Park, "The spaces you will see" (four rows,
   even, so the odd-row rule never fires); Life, "Visiting" (five rows, where
   it does).
   ------------------------------------------------------------------------- */
.sx-kind{ margin:2.6rem auto 0; max-width:980px; display:grid;
  border-top:1px solid var(--rule); }
.sx-kind-row{ padding:1.55rem 0 1.7rem; border-bottom:1px solid var(--rule); }
.sx-kind-row h3{ font-family:var(--display); font-weight:500; font-size:1.34rem;
  line-height:1.2; color:var(--ink); }
.sx-kind-row p{ margin-top:.6rem; color:var(--ink-soft); font-size:1.02rem;
  line-height:1.65; max-width:50ch; }
.sx-kind-row p a{ color:var(--primary-ink); font-weight:700; text-decoration:underline; }
@media (min-width:561px){
  .sx-kind{ --sx-kind-gap:clamp(2.4rem,5vw,4.8rem); grid-template-columns:1fr 1fr;
    column-gap:var(--sx-kind-gap); }
  .sx-kind-row{ padding:1.9rem 0 2.1rem; }
  /* an odd number of rows left the last one alone in the left column beside an
     empty cell, its hairline stopping at the gutter as if a row had fallen off.
     An odd last row now takes the full width and lays itself out on the same two
     columns: the lead where every lead sits, the sentence where the right-hand
     column's copy sits, one hairline right across to close the ledger. Fires
     only when the count is odd. */
  .sx-kind-row:nth-child(odd):last-child{ grid-column:1 / -1; display:grid;
    grid-template-columns:1fr 1fr; column-gap:var(--sx-kind-gap); align-items:start; }
  .sx-kind-row:nth-child(odd):last-child p{ margin-top:0; }
}


/* -------------------------------------------------------------------------
   R4.8  .sx-pack  (the packing-list panel with the handle)
   One panel drawn as a case: a rounded gold handle sits centred on the top
   edge. Inside, two groups under small caps labels, each a column of line-art
   icon + label + one line. The two columns share a faded vertical hairline
   once there is room for them side by side, and a hairline foot carries the
   reassurance.
   Seat on this site: The Home & Park, "What to bring when someone moves in".
   ------------------------------------------------------------------------- */
.sx-pack{ position:relative; margin-top:3.4rem; background:var(--card);
  border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:2.1rem 1.35rem 1.9rem; }
/* the handle: 84 wide, 26 tall, one continuous 1.5px gold line, no bottom edge
   so it appears to go into the case. The radii are clamped by the height, which
   is what gives it the squared-off luggage-handle shape. */
.sx-pack::before{ content:""; position:absolute; left:50%; top:-26px; width:84px; height:26px;
  transform:translateX(-50%); border:1.5px solid var(--accent-line); border-bottom:0;
  border-radius:42px 42px 0 0; opacity:.9; pointer-events:none; }
.sx-pack-cols{ position:relative; display:grid; gap:2.2rem; }
.sx-pack-k{ display:flex; align-items:center; gap:.85rem; font-family:var(--body);
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; font-weight:800;
  color:var(--gold-ink); }
.sx-pack-k::after{ content:""; flex:1; height:1px; background:var(--rule); }
.sx-pack-list{ margin-top:1.15rem; display:grid; gap:1.15rem; }
.sx-pack-item{ display:grid; grid-template-columns:46px 1fr; gap:1rem; align-items:start; }
.sx-pack-ico{ width:46px; height:46px; color:var(--primary-ink); }
.sx-pack-ico svg{ display:block; width:100%; height:100%; }
.sx-pack-item h3{ font-family:var(--body); font-weight:800; font-size:1rem; letter-spacing:.01em;
  line-height:1.3; margin-top:.2rem; color:var(--ink); }
.sx-pack-item p{ margin-top:.25rem; color:var(--ink-soft); font-size:.96rem; }

.sx-pack-foot{ margin-top:1.9rem; padding-top:1.3rem; border-top:1px solid var(--rule);
  color:var(--ink-soft); font-size:.98rem; }
.sx-pack-foot b{ font-family:var(--body); font-weight:800; color:var(--ink); }
.sx-pack-note{ max-width:62ch; margin-inline:auto; text-align:center; }

@media (min-width:561px){
  .sx-pack{ padding:2.5rem 2.2rem 2.2rem; }
  .sx-pack-foot{ display:flex; gap:1rem; align-items:flex-start; }
  .sx-pack-foot b{ flex:none; }
}
@media (min-width:860px){
  .sx-pack{ padding:2.9rem 2.9rem 2.5rem; }
  .sx-pack-cols{ grid-template-columns:1fr 1fr; column-gap:clamp(2.6rem,5vw,4.4rem); }
  .sx-pack-cols::before{ content:""; position:absolute; left:50%; top:4%; bottom:4%; width:1px;
    background:linear-gradient(180deg, transparent 0%, rgba(var(--shadow-rgb),.16) 22%,
      rgba(var(--shadow-rgb),.16) 78%, transparent 100%); }
  .sx-pack-list{ gap:1.35rem; }
  .sx-pack-item{ grid-template-columns:52px 1fr; gap:1.15rem; }
  .sx-pack-ico{ width:52px; height:52px; }
}


/* -------------------------------------------------------------------------
   R4.9  .sx-fourdoors.three  (NEW, this build)
   Three doors, not four. The mid range goes single column ON PURPOSE: two
   doors and an orphan is worse than a stack. At three across on a 960 viewport
   each door is about 300px wide, which the 150px arch still suits (Nightingale
   runs them at about 480), and the extra top padding keeps the small caps
   label clear of the inner arch at that width.
   Seat on this site: Home, fees and funding.
   ------------------------------------------------------------------------- */
.sx-fourdoors.three{ max-width:1100px; margin-inline:auto; }
@media (min-width:561px) and (max-width:959px){
  .sx-fourdoors.three{ grid-template-columns:1fr; max-width:560px; }
}
@media (min-width:960px){
  .sx-fourdoors.three{ grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,2.4vw,2rem); }
  .sx-fourdoors.three .sx-door{ padding-top:3.4rem; }
}
/* Between 960 and 1200 a third of the hold is about 290px, and Nightingale's 2.1rem
   side padding left the copy wrapping at four words. Pull the walls and the inner
   arch in together so the arch stays matched to the card edge (inset 14, outer 150,
   so the inner radius is 136). Measured at 960, 1024 and 1100. */
@media (min-width:960px) and (max-width:1199px){
  .sx-fourdoors.three .sx-door{ padding-left:1.5rem; padding-right:1.5rem; }
  .sx-fourdoors.three .sx-door::before{ left:14px; right:14px;
    border-radius:136px 136px 12px 12px; }
}
.sx-fourdoors + .note-band{ margin:2.4rem auto 0; max-width:68ch; }
.sx-fourdoors + .note-band + .localline{ text-align:center; }


/* -------------------------------------------------------------------------
   R4.10  .sx-rn-img.ico  (NEW, this build)
   The read-next card's photo slot, photoless. There is no library of interior
   photographs on this build and there may not be for some time; a grey
   placeholder box three times in a row would read as a broken page. The slot
   becomes a tinted square with one 34px line-art mark in it, which is finished
   rather than pending.
   ------------------------------------------------------------------------- */
.sx-rn-img.ico{ display:grid; place-items:center; background:var(--band-tint); color:var(--primary-ink); }
.sx-rn-img.ico svg{ width:34px; height:34px; }
.band-tint .sx-rn-img.ico{ background:var(--accent-tint); }
.band-accent .sx-rn-img.ico{ background:var(--band-tint); }


/* -------------------------------------------------------------------------
   R4.11  .sx-steppath on the deep green band (NEW, this build)
   Measured on --primary-deep #22311F: white at .84 is 11.0:1, --accent-soft
   #E8C68F is 8.45:1, both well clear. The terminal medallion fills with the
   soft honey instead of the ornament gold, because the ornament gold on the
   deep green is too close in value to read as "this is where it ends".
   Seat on this site: Life, "Day care, how it begins".
   ------------------------------------------------------------------------- */
.band-deep .sx-sp-mark{ background:var(--primary-deep); }
.band-deep .sx-sp:last-child .sx-sp-mark{ background:var(--accent-soft);
  box-shadow:0 0 0 5px rgba(var(--accent-soft-rgb),.22); }
.band-deep .sx-sp h3{ color:#fff; }
.band-deep .sx-sp p, .band-deep .sx-sp-foot{ color:rgba(255,255,255,.84); }
.band-deep .sx-sp-foot a{ color:var(--accent-soft); }
.band-deep .sx-steppath{ margin-top:2.6rem; }
.band-deep .sx-steppath + .cta-row,
.band-deep .sx-sp-foot + .cta-row{ margin-top:2.2rem; justify-content:center; }


/* Uniform FAQ answer heights (Jon asked for this on Nightingale). Gated on
   reveal-ready so the JS-off state, where every panel is open at its natural
   height, is untouched. */
@media (min-width:701px){
  html.reveal-ready .faq .acc-body-inner{ min-height:7.2rem; }
}


/* -------------------------------------------------------------------------
   R4.13  elevation declared once, on the ported set (the H8 rule)
   Every card above shipped a hairline border UNDER a soft shadow, which is
   the ghost card H8 already stripped from .value, .hl, .cblock and .keystrip
   on this build. Same answer here on every band: keep the shadow, drop the
   border, never both. The .sx-door inner arch is decoration, not elevation,
   and stays.
   ------------------------------------------------------------------------- */
.sx-sq{ border:0; }
.sx-rn{ border:0; }
.sx-rn:hover{ border-color:transparent; }
.sx-door{ border:0; }
.sx-sbs-cell{ border:0; }
.sx-pack{ border:0; }


/* -------------------------------------------------------------------------
   R4.14  anchor landing on the contact page
   R1.4 pulls an anchored <section> up by its own top padding, using var(--sp).
   The contact page overrides that padding (`body.p-contact main .section`,
   S-block above) with a tighter clamp, so the R1.4 arithmetic was 40px out and
   #enquire and #have-ready landed with their heading 11px UNDER the fixed bar.
   Measured at 1536: nav bottom 100px, heading top was 89px; it is 129px now.
   PROMOTE UPSTREAM: any build that retunes a page's section padding has this.
   ------------------------------------------------------------------------- */
body.p-contact section.section[id]{ scroll-margin-top:calc(124px - clamp(3rem,5.2vw,4.4rem)); }
@media (max-width:1040px){
  body.p-contact section.section[id]{ scroll-margin-top:calc(104px - clamp(3rem,5.2vw,4.4rem)); }
}

/* ============================================================
   HPL ROUND 5 (23 Sep 2026) - THE CLIENT LOGO
   Jon supplied the Higher Park Lodge logo: an illustrated elevation
   of the house (the park's old refreshment pavilion, ironwork
   verandahs and all) under a cream-green tree canopy, the wordmark
   in a humanist serif, a gold rule and a spaced-caps strapline.
   Traced to vector from his artwork (six flat colour layers, mean
   pixel difference 2.1/765 against the original), so it is crisp at
   every size. Files in assets/logo/:
     hpl-logo-nav[-reversed].svg       nav lockup, words enlarged (R5.1)
     hpl-logo-horizontal[-reversed].svg the full lockup, for print/email
     hpl-logo-stacked[-reversed].svg   footer, share image, schema
     hpl-mark.svg                      the house on its own
     hpl-mark-line-cream.svg           line-only house, hero watermark
     favicon.svg / apple-touch-icon.png / og-image.png
   The leaf motif Heritage drew in round 1 is retired everywhere.
   ============================================================ */

/* --- R5.1 nav: two lockups, one per ground ------------------
   The nav uses its own lockup (hpl-logo-nav): the same house, rule,
   wordmark and strapline as Jon's horizontal logo, but with the words
   set larger against the house. At nav height the horizontal logo's
   strapline measures 5px and the name 14px; here they are 8px and 23px,
   which is what makes the name readable in a 52px bar. */
.brand{ gap:0; line-height:0; flex:none; }
.brand .brand-logo{ height:52px; width:auto; display:block; filter:none; }
.brand .brand-logo.on-light{ display:none; }
.nav.scrolled .brand .brand-logo.on-dark, .nav.solid .brand .brand-logo.on-dark{ display:none; }
.nav.scrolled .brand .brand-logo.on-light, .nav.solid .brand .brand-logo.on-light{ display:block; }
.nav:not(.scrolled):not(.solid) .brand .brand-logo.on-dark{ filter:drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
.nav.scrolled .brand .brand-logo{ height:46px; }
@media (min-width:1041px) and (max-width:1300px){ .brand .brand-logo{ height:44px; } .nav.scrolled .brand .brand-logo{ height:40px; } }
@media (max-width:760px){ .brand .brand-logo{ height:42px; } .nav.scrolled .brand .brand-logo{ height:38px; } }
@media (max-width:380px){ .brand .brand-logo{ height:36px; } .nav.scrolled .brand .brand-logo{ height:34px; } }

/* --- R5.2 footer: the stacked logo, reversed ----------------- */
.foot .flogo{ display:block; width:min(236px,70%); margin-bottom:1.3rem; }
.foot .flogo img{ width:100%; height:auto; display:block; }

/* --- R5.3 the hero watermark: the house in line only --------- */
.brandfield .fieldmark img{ width:100%; height:auto; display:block; }
.brandfield .fieldmark{ color:inherit; opacity:.13; }
.brandfield.f2 .fieldmark, .brandfield.f3 .fieldmark, .brandfield.f4 .fieldmark{ opacity:.12; }
@media (max-width:760px){ .brandfield .fieldmark{ opacity:.10; } }

/* --- R5.4 the ornament: the logo's tree canopy --------------- */
.leaf-rule .lf.canopy{ width:34px; height:22px; color:var(--accent-line); }
.leaf-rule .lf.canopy svg{ width:100%; height:100%; display:block; fill:currentColor; }
.band-deep .leaf-rule .lf.canopy{ color:#D6D77E; }

/* THE VEIL, round 10 (Fable, 28 Sep 2026). Jon found the six-part build "a bit
   tacky", and he was right: trees, house, hedge, word, dashes and tag arriving on
   their own cues read as a slide build. The redesign is one gesture in, one out:
   the finished lockup breathes in as a single piece (a quiet settle, no parts),
   holds for a beat, then the whole veil lifts like a curtain, with the mark
   drifting up just ahead of it. script.js lifts at 2.5s; the CSS safety net
   still clears the veil on its own if the script never runs. */
.loader{ background:#F8F5EA; animation-delay:3.6s;
  transition:transform .9s cubic-bezier(.72,0,.22,1) .08s, opacity 1.05s cubic-bezier(.33,0,.2,1); }
.loader.going{ transform:translateY(-101%); }
.loader .lmark{ color:inherit; gap:0; }
.loader .lmarkfull{ width:clamp(240px,32vw,430px); height:auto; display:block; overflow:visible;
  opacity:0; transform:translateY(10px) scale(.99);
  animation:vsettle 1.7s cubic-bezier(.37,.12,.18,1) .4s forwards; }
.loader .lmarkfull > g{ transform-box:fill-box; }
@keyframes vsettle{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .loader .lmarkfull{ animation:none; opacity:1; transform:none; }
  .loader{ animation-delay:.8s; }
  .loader.going{ transform:none; opacity:0; }
}

/* ============================================================
   HPL ROUND 5 - SECTIONS, with more taken from Nightingale and
   Yelverton (Jon, 23 Sep 2026: "a few spots where this site isn't
   quite up to scratch with say Nightingale, Yelverton")
   ============================================================ */

/* --- R5.6 the year band (ported from Nightingale N7) ----------
   With one change: the year carries a small caption, because here
   the year is the PARK's and the house came later. Without the
   caption "1858" beside "a house that began as the park's pavilion"
   reads as the date of the house, which it is not. */
.yearband{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.8rem,4vw,3.8rem); align-items:center;
  position:relative; z-index:1; }
.yb-year{ font-family:var(--display); font-weight:600; line-height:.9; font-size:clamp(3.6rem,8vw,6.2rem);
  color:var(--accent-on-photo); letter-spacing:-.01em; }
.yb-year span{ display:block; margin-top:.9rem; font-family:var(--body); font-size:.74rem; font-weight:800;
  letter-spacing:.2em; text-transform:uppercase; line-height:1.3; color:rgba(255,255,255,.72); }
.yb-copy h2{ color:#fff; }
.yb-copy h2 .serif{ color:var(--accent-on-photo); }
.yb-copy p{ margin-top:1rem; color:rgba(255,255,255,.84); font-size:1.06rem; max-width:56ch; }
.yb-copy .flink{ display:inline-block; margin-top:1.3rem; font-weight:800; color:var(--accent-soft);
  text-decoration:underline; text-underline-offset:3px; }
.yb-copy .flink:hover{ color:#fff; }
@media (max-width:700px){ .yearband{ grid-template-columns:1fr; gap:1.1rem; } }
/* the house, in line, held large and faint at the right of the band */
.section.has-house{ position:relative; overflow:hidden; }
.section.has-house .house-mark{ position:absolute; right:-4%; bottom:-10%; width:min(52vw,720px); height:auto;
  opacity:.07; pointer-events:none; }
@media (max-width:760px){ .section.has-house .house-mark{ width:120vw; right:-30%; bottom:-4%; opacity:.06; } }

/* --- R5.7 reviews, featured (Yelverton's editorial quote, not cards) */
.rv-feature{ margin-top:2.6rem; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4.6rem);
  align-items:center; }
.rv-lead{ margin:0; }
.rv-lead .marks{ display:block; font-family:var(--display); font-weight:600; font-size:4.4rem; line-height:.55;
  height:2.1rem; color:var(--accent-line); }
.rv-lead blockquote{ margin-top:1rem; font-family:var(--display); font-weight:500; font-size:clamp(1.34rem,2.2vw,1.72rem);
  line-height:1.5; color:var(--ink); text-wrap:pretty; }
.rv-feature figcaption{ margin-top:1.3rem; }
.rv-feature figcaption b{ display:block; font-family:var(--body); font-weight:800; color:var(--ink); }
.rv-feature figcaption span{ display:block; margin-top:.2rem; font-size:.88rem; color:var(--ink-soft); }
.rv-feature figcaption a{ color:var(--primary-ink); font-weight:700; text-decoration:underline; }
.rv-side{ display:flex; flex-direction:column; border-left:1px solid var(--rule); padding-left:clamp(1.6rem,3.4vw,3rem); }
.rv-small{ margin:0; padding-block:1.4rem; }
.rv-small + .rv-small{ border-top:1px solid var(--rule); }
.rv-small:first-child{ padding-top:0; }
.rv-small:last-child{ padding-bottom:0; }
.rv-small blockquote{ font-size:1.02rem; line-height:1.7; color:var(--ink); }
.rv-small figcaption{ margin-top:.8rem; }
@media (max-width:900px){
  .rv-feature{ grid-template-columns:1fr; }
  .rv-side{ border-left:0; padding-left:0; border-top:1px solid var(--rule); padding-top:1.4rem; }
}

/* --- R5.8 the building's story (Nightingale our-story, compact) */
.story-grid{ display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(2.2rem,5.4vw,5rem); align-items:start; }
.story-photo .framed{ aspect-ratio:4/5; min-height:0; }
.story-copy .section-head{ margin-bottom:0; }
.storyline{ list-style:none; margin:1.8rem 0 0; padding:0; }
.storyline li{ display:grid; grid-template-columns:7.6rem 1fr; gap:1.4rem; padding-block:1.25rem;
  border-top:1px solid var(--rule); }
.storyline li:last-child{ border-bottom:1px solid var(--rule); }
.storyline .when{ font-family:var(--display); font-weight:600; font-size:1.34rem; line-height:1.2;
  color:var(--primary-ink); padding-top:.05rem; }
.storyline h3{ font-family:var(--body); font-weight:800; font-size:1.02rem; color:var(--ink); }
.storyline p{ margin-top:.3rem; color:var(--ink-soft); font-size:.99rem; }
@media (max-width:900px){
  .story-grid{ grid-template-columns:1fr; }
  .story-photo{ max-width:420px; }
}
@media (max-width:520px){ .storyline li{ grid-template-columns:1fr; gap:.35rem; } }

/* ============================================================
   HPL ROUND 6 (24 Sep 2026)
   ============================================================ */
/* --- R6.1 "How we can help": the arc, flattened (Jon: "the bowed line needs to be
   linear rather than aggressively pointed down"). One long, shallow bow across the
   full width of the band behind the heading, rising only ~130px over 1200, drawn
   at a constant 1.5px whatever the stretch. */
.band-accent.has-arc .arc.arc-soft{ left:0; right:0; top:clamp(2.4rem,5vw,4.2rem); width:100%; height:clamp(90px,11vw,170px);
  transform:none; opacity:.16; }
@media (max-width:760px){ .band-accent.has-arc .arc.arc-soft{ top:1.6rem; height:70px; } }

/* --- R6.2 What to bring: the refined Nightingale pack (their R4b.2) ----------
   One centred label over both aisles; the eight items are direct children of ONE
   grid that fills column by column (4 rows x 2), so each row is as tall as the
   taller of its pair and the two aisles start and finish level. Icons carry
   re-cut viewBoxes so all eight draw at the same optical size, centred. */
.sx-pack.ng .sx-pack-one{ display:block; text-align:center; font-family:var(--body); font-weight:800;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:1.6rem; }
.sx-pack.ng .sx-pack-cols{ display:grid; row-gap:1.5rem; }
.sx-pack.ng .sx-pack-item{ display:grid; grid-template-columns:46px 1fr; gap:1rem; align-items:start; }
.sx-pack.ng .sx-pack-ico{ width:46px; height:46px; display:grid; place-items:center; color:var(--primary-ink); }
.sx-pack.ng .sx-pack-ico svg{ width:100%; height:100%; display:block; }
.sx-pack.ng .sx-pack-item h3{ font-family:var(--body); font-weight:800; font-size:1rem; line-height:1.3;
  margin-top:.2rem; color:var(--ink); }
.sx-pack.ng .sx-pack-item p{ margin-top:.25rem; color:var(--ink-soft); font-size:.96rem; }
@media (min-width:901px){
  .sx-pack.ng .sx-pack-cols{ grid-template-columns:1fr 1fr; grid-template-rows:repeat(4,auto);
    grid-auto-flow:column; column-gap:clamp(2.6rem,5vw,4.4rem); row-gap:1.6rem; position:relative; }
  .sx-pack.ng .sx-pack-cols::before{ content:""; position:absolute; left:50%; top:2%; bottom:2%; width:1px;
    background:linear-gradient(180deg, transparent 0%, rgba(var(--shadow-rgb),.16) 18%, rgba(var(--shadow-rgb),.16) 82%, transparent 100%); }
  .sx-pack.ng .sx-pack-item{ grid-template-columns:52px 1fr; gap:1.15rem; }
  .sx-pack.ng .sx-pack-ico{ width:52px; height:52px; }
}

/* --- R6.3 the building's story, re-balanced (Jon: "the structure / layout needs
   sorting as it is off"). The photograph was a 1:1 square top-aligned beside a
   timeline 1.6x its height, and the timeline lines ran to 110 characters. Now:
   a true 4:5 portrait, the two columns centred on each other, the copy column
   held to a readable measure, and a narrower year column. */
.story-grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:clamp(2.4rem,6vw,5.6rem); }
.story-grid .story-photo .framed{ aspect-ratio:4/5; min-height:0; }
.story-copy{ max-width:40rem; }
.storyline li{ grid-template-columns:6.6rem 1fr; gap:1.2rem; padding-block:1.1rem; }
.storyline p{ max-width:52ch; }
@media (max-width:900px){ .story-grid{ grid-template-columns:1fr; } .story-grid .story-photo{ max-width:440px; } }

/* --- R6.4 contact: the map directly under the form ---------------------- */
.contact-map{ margin-top:clamp(2.4rem,4vw,3.4rem); }
.contact-map .loc-map{ min-height:0; height:clamp(280px,32vw,420px); box-shadow:var(--shadow-sm); border:1px solid var(--rule); }
.contact-map .loc-map iframe{ width:100%; height:100%; border:0; display:block; }
.contact-map .map-cap{ margin-top:.9rem; font-size:.9rem; color:var(--ink-soft); }
.contact-map .map-cap b{ color:var(--ink); font-weight:800; margin-right:.35rem; }
.contact-map .map-cap a{ color:var(--primary-ink); font-weight:700; text-decoration:underline; }

/* --- R6.5 "What happens next", given room (Jon: "seems a bit squashed").
   Three steps on a 1300px hold had 1.2rem gutters and the number badge sat alone on
   its own line above each heading, so each column was a narrow tower. Now the badge
   sits beside the heading, the gutters open to ~4rem with a hairline between steps,
   the row is held to 1100px, and the review below gets clear air. */
.steps-row.three.roomy{ max-width:1100px; margin:2.8rem auto 0; grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:0; }
.steps-row.roomy .st{ padding:.4rem clamp(1.4rem,3vw,2.6rem); display:grid; grid-template-columns:44px 1fr;
  column-gap:1rem; align-content:start; }
.steps-row.roomy .st + .st{ border-left:1px solid var(--rule); }
.steps-row.roomy .st .n{ grid-row:1 / span 2; margin:0; }
.steps-row.roomy .st h3{ align-self:center; margin:0; line-height:1.3; }
.steps-row.roomy .st p{ grid-column:2; margin-top:.45rem; }
.steps-row.roomy + .reviews{ margin-top:clamp(2.8rem,5vw,3.8rem); }
@media (max-width:860px){
  .steps-row.three.roomy{ grid-template-columns:1fr; row-gap:1.6rem; }
  .steps-row.roomy .st{ padding:0; }
  .steps-row.roomy .st + .st{ border-left:0; border-top:1px solid var(--rule); padding-top:1.6rem; }
}
/* neutralise the library's ::before dividers and forced h3 height inside the roomy row */
.steps-row.roomy{ gap:0 !important; column-gap:0; }
.steps-row.roomy > .st + .st::before{ display:none; }
.steps-row.roomy > .st > h3{ min-height:0; display:block; }
@media (max-width:860px){ .steps-row.three.roomy{ row-gap:1.6rem !important; } }

/* --- R6.6 the CQC rating on every page (Reg 20A) ------------------------
   Legible, not fine print: body-size text on its own ruled row above the legal
   line, with the seal. Carries rating, date, cqc.org.uk and the link. */
.foot-cqc{ border-top:1px solid rgba(255,255,255,.12); padding-inline:var(--w1); }
.foot-cqc .fc-row{ max-width:var(--hold); margin:0 auto; display:flex; align-items:flex-start; gap:.9rem;
  padding-block:1.3rem; }
.foot-cqc .fc-seal{ flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.08); color:var(--accent-soft); }
.foot-cqc .fc-seal svg{ width:18px; height:18px; }
.foot-cqc p{ color:rgba(255,255,255,.86); font-size:.95rem; line-height:1.6; padding-top:.3rem; }
.foot-cqc p b{ color:#fff; font-weight:800; }
.foot-cqc a{ color:var(--accent-soft); font-weight:700; text-decoration:underline; text-underline-offset:3px; display:inline; margin:0; padding:0; }


/* -------------------------------------------------------------------------
   R6.8  care mosaic: the Yelverton "around the house" grid, one lead and three
   Our Care, "The care we provide". Replaces the care accordion on this build.
   Elevation declared once: shadow, no border. PROMOTE UPSTREAM.
   ------------------------------------------------------------------------- */
.hl-list .hl{ border:0; }
.hl-list.three{ grid-template-columns:repeat(3,1fr); }
.hl-list .hl.lead h3{ font-size:clamp(1.5rem,2.4vw,2rem); }
.hl-list .hl h3{ font-family:var(--display); font-weight:600; line-height:1.18; }
.hl-list .hl .hl-body{ display:flex; flex-direction:column; flex:1; }
.hl-list .hl-more{ display:inline-block; margin-top:1rem; font-weight:800; font-size:.95rem;
  color:var(--primary-ink); text-decoration:underline; text-underline-offset:3px; align-self:flex-start; }
.hl-list .avail{ margin-top:auto; padding-top:1.1rem; font-size:.82rem; font-weight:800;
  letter-spacing:.02em; color:var(--primary-ink); }
.hl-list .hl.lead .avail{ margin-top:0; }
@media (min-width:901px){ .hl-list .hl.lead .hl-img{ min-height:22rem; } }
@media (max-width:1023px){
  .hl-list.three{ grid-template-columns:1fr; }
  .hl-list.three .hl:not(.lead){ display:grid; grid-template-columns:.82fr 1.18fr; }
  .hl-list.three .hl:not(.lead) .hl-img{ aspect-ratio:auto; min-height:100%; }
}
@media (max-width:640px){
  .hl-list.three .hl:not(.lead){ display:flex; flex-direction:column; }
  .hl-list.three .hl:not(.lead) .hl-img{ aspect-ratio:16/10; min-height:0; }
}


/* -------------------------------------------------------------------------
   R6.9  .trio  two unboxed lists either side of a framed portrait
   Our Care, dementia. Replaces the white .sx-sq panel on this build; the
   .sx-sq-lab and .sx-sq-list rules are reused as they are. PROMOTE UPSTREAM.
   ------------------------------------------------------------------------- */
.trio{ margin-top:2.8rem; display:grid; grid-template-columns:1fr minmax(300px,380px) 1fr;
  gap:clamp(1.8rem,3.6vw,3.4rem); align-items:start; }
.trio .framed-wrap{ align-self:center; }
.trio .framed{ aspect-ratio:4/5; min-height:0; }
.trio-col h3{ font-family:var(--display); font-weight:600; font-size:clamp(1.3rem,2.2vw,1.5rem);
  margin-top:.5rem; line-height:1.16; }
.trio + .sx-sp-foot{ margin-top:2.8rem; }
@media (max-width:1100px){
  .trio{ grid-template-columns:1fr 1fr; }
  .trio .framed-wrap{ grid-column:1 / -1; order:-1; width:100%; max-width:520px; margin-inline:auto; }
  .trio .framed{ aspect-ratio:4/3; }
}
@media (max-width:640px){ .trio{ grid-template-columns:1fr; gap:2.2rem; } }


/* -------------------------------------------------------------------------
   R6.10  .day-split  heading beside the day ledger (Our Care, a familiar rhythm)
   ------------------------------------------------------------------------- */
.day-split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4.6rem); align-items:start; }
.day-split .section-head{ margin-bottom:0; }
.day-split .daylist{ margin-top:.4rem; max-width:none; margin-inline:0; }
.day-split .day-foot{ margin-top:1.4rem; color:var(--ink-soft); max-width:44ch; }
@media (max-width:900px){ .day-split{ grid-template-columns:1fr; } .day-split .daylist{ margin-top:1.6rem; } }


/* -------------------------------------------------------------------------
   R6.11  side-by-side with photo heads and plain cells (Our Care, respite or
   day care). The row alignment of R4.5 is kept; the boxes are not.
   PROMOTE UPSTREAM as a variant.
   ------------------------------------------------------------------------- */
.sx-sidebyside.photos{ max-width:1040px; }
.sx-sbs-heads.photo{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-bottom:.4rem; }
.sx-sbs-heads.photo figure{ margin:0; }
.sx-sbs-heads.photo .sh-img{ position:relative; aspect-ratio:16/10; border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); }
.sx-sbs-heads.photo .sh-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sx-sbs-heads.photo figcaption{ margin-top:1rem; font-family:var(--display); font-weight:600;
  font-size:clamp(1.2rem,2.2vw,1.5rem); color:var(--ink); text-align:center;
  padding-bottom:.85rem; border-bottom:2px solid var(--accent-line); }
.sx-sbs-heads.photo + .sx-sbs-row{ margin-top:1.8rem; }
.sx-sidebyside.plain .sx-sbs-cell{ background:none; border:0; box-shadow:none; padding:.3rem .6rem 0; }
.sx-sidebyside.plain .sx-sbs-cell p{ margin-top:.35rem; }
.sx-sidebyside.plain + .sx-sp-foot{ margin-top:2.6rem; }
.sx-sp-foot + .sx-sp-foot{ margin-top:.8rem; }
@media (max-width:560px){
  .sx-sbs-heads.photo{ gap:.8rem; }
  .sx-sbs-heads.photo .sh-img{ aspect-ratio:1/1; }
  .sx-sbs-heads.photo figcaption{ font-size:1.05rem; padding-bottom:.6rem; }
  .sx-sidebyside.plain .sx-sbs-cell{ padding:.2rem 0 0; }
}


/* -------------------------------------------------------------------------
   R6.12  deep band section heads, the plain FAQ foot, the visiting split
   ------------------------------------------------------------------------- */
.band-deep .section-head h2{ color:#fff; }
.band-deep .section-head .say{ color:rgba(255,255,255,.84); }
#needs-change > .w2{ position:relative; z-index:1; }
#faq .faq + .sx-sp-foot{ margin-top:2rem; }
.visit-grid .framed .cover{ object-position:50% 40%; }
.visit-grid .lede-list{ margin-top:1.4rem; max-width:48ch; }
.visit-line{ margin-top:1.6rem; }
.visit-grid .about-copy h2{ margin-bottom:0; }
.hl-list .hl .hl-body .avail{ margin-top:auto; padding-top:.95rem; }
.hl-list .hl:not(.lead) .hl-body .avail{ border-top:1px solid var(--rule); margin-top:auto; }
.hl-list .hl:not(.lead) .hl-body > :nth-last-child(2){ margin-bottom:1.2rem; }
.hl-list .hl.lead .hl-body .avail{ margin-top:1.1rem; padding-top:0; }
a[href^="tel:"]{ white-space:nowrap; }
@media (min-width:1024px){
  .hl-list.three .hl:not(.lead) .hl-body .avail{ min-height:calc(3.6em + .95rem); min-height:calc(2lh + .95rem); box-sizing:border-box; }
}
.trio-col h3{ font-size:clamp(1.2rem,1.6vw,1.34rem); }
@media (min-width:1101px){ .trio-col h3{ white-space:nowrap; } }
.day-split{ align-items:center; }
/* R6.8b tablet: the photo-side cards cropped the portraits badly at 800. Two cards
   side by side with the photo on top, and the last one laid across like the lead. */
@media (min-width:641px) and (max-width:1023px){
  .hl-list.three{ grid-template-columns:1fr 1fr; }
  .hl-list.three .hl:not(.lead){ display:flex; flex-direction:column; }
  .hl-list.three .hl:not(.lead) .hl-img{ aspect-ratio:16/10; min-height:0; }
  .hl-list.three .hl:not(.lead):last-child{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; }
  .hl-list.three .hl:not(.lead):last-child .hl-img{ aspect-ratio:auto; min-height:100%; }
  .hl-list.three .hl:not(.lead) .hl-body .avail{ min-height:calc(2lh + .95rem); }
  .hl-list.three .hl:not(.lead):last-child .hl-body .avail{ min-height:0; }
}


/* -------------------------------------------------------------------------
   R7  (24 Sep 2026) Jon: the respite/day care columns sat too close together,
   and the dementia trio was cramped. Wider gutter between the two columns
   (photos, gold rules and cells share it so they stay aligned); cell text
   sits flush with the photo edges. The trio now carries three items a side
   with more air between them.
   ------------------------------------------------------------------------- */
.sx-sidebyside.photos{ --sbs-gap:clamp(2.2rem,5vw,4rem); max-width:1080px; }
.sx-sidebyside.photos .sx-sbs-heads.photo{ gap:var(--sbs-gap); }
@media (min-width:561px){
  .sx-sidebyside.photos .sx-sbs-cells{ gap:var(--sbs-gap); }
  .sx-sidebyside.plain .sx-sbs-cell{ padding:.3rem 0 0; }
}
.sx-sidebyside.photos .sx-sbs-row + .sx-sbs-row{ margin-top:2.4rem; }
@media (max-width:560px){ .sx-sidebyside.photos{ --sbs-gap:1rem; } }

#dementia .trio{ margin-top:3.2rem; }
#dementia .sx-sq-list{ gap:1.5rem; margin-top:1.6rem; }
#dementia .sx-sq-list li{ font-size:1.04rem; line-height:1.6; }
#dementia .trio-col{ max-width:22rem; }
#dementia .sx-sq-same{ justify-self:end; }
#dementia .sx-sq-change{ justify-self:start; }
@media (max-width:1100px){ #dementia .trio-col{ max-width:none; justify-self:stretch; } }
/* R7 review pass (independent check): one heading level per column, columns centred
   on the photo, no orphaned last words, the offset frame kept inside the text edge. */
#dementia .trio-col{ align-self:center; }
#dementia .trio-col h3{ margin-top:0; }
#dementia .sx-sq-list li{ text-wrap:pretty; }
@media (min-width:1101px){ #dementia .trio .framed-wrap{ transform:translateX(-11px); } }
@media (max-width:1100px){ #dementia .trio .framed-wrap{ max-width:640px; } }
@media (max-width:600px){
  #dementia .trio .framed-wrap::before{ top:10px; left:10px; right:-10px; bottom:-10px; }
  #dementia .trio .framed-wrap{ margin-right:10px; width:auto; }
}
/* Both headings on one line across the photo: the columns start level, set down
   so the longer (right) list sits centred on the portrait. */
@media (min-width:1101px){ #dementia .trio-col{ align-self:start; padding-top:3.2rem; } }
@media (max-width:1100px){ #dementia .trio-col{ align-self:start; } }


/* -------------------------------------------------------------------------
   R8 (24 Sep 2026)
   - Care cards: the "read more" links sit on one line across all three cards,
     pinned just above the availability hairline.
   - The Home & Park: three real park photographs above the landmark icons.
   ------------------------------------------------------------------------- */
.hl-list.three .hl:not(.lead) .hl-body .hl-more{ margin-top:auto; padding-top:1.2rem; margin-bottom:1.2rem; }
.hl-list.three .hl:not(.lead) .hl-body .hl-more + .avail{ margin-top:0; }
@media (max-width:640px){ .hl-list.three .hl:not(.lead) .hl-body .hl-more{ padding-top:.4rem; } }

.park-photos{ margin-top:2.4rem; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); }
.park-photos figure{ margin:0; }
.park-photos .g-img{ position:relative; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.park-photos .g-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.park-photos figcaption{ margin-top:.75rem; text-align:center; font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--ink); }
.park-photos + .icon-row{ margin-top:3rem; }
@media (max-width:760px){
  .park-photos{ grid-template-columns:1fr 1fr; }
  .park-photos figure:first-child{ grid-column:1 / -1; }
}


/* -------------------------------------------------------------------------
   R9 (28 Sep 2026)
   ------------------------------------------------------------------------- */
/* The Home & Park, places to walk: each photo carries its own line, and the icons
   below list only what is NOT photographed, under a quiet label. */
.park-photos figcaption{ text-align:center; }
.park-photos figcaption b{ display:block; font-family:var(--display); font-weight:600; font-size:1.12rem; color:var(--ink); }
.park-photos figcaption span{ display:block; margin:.35rem auto 0; max-width:34ch; font-family:var(--body); font-weight:400;
  font-size:.95rem; line-height:1.55; color:var(--ink-soft); }
.park-more-lab{ margin:clamp(3rem,5vw,4.2rem) 0 0; display:flex; align-items:center; gap:1rem; justify-content:center;
  font-size:.74rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink); }
.park-more-lab::before, .park-more-lab::after{ content:""; height:1px; width:min(18vw,180px); background:var(--rule); }
.park-more-lab + .icon-row{ margin-top:2rem; }

/* The Home & Park, what to ask: a numbered hairline list, no empty space under
   short answers, a softer focus ring. */
.asks-acc{ max-width:860px; }
html.reveal-ready .asks-acc .acc-body-inner{ min-height:0; }
.asks-acc .acc-head{ display:grid; grid-template-columns:3rem 1fr 36px; align-items:center; gap:1rem;
  padding:1.3rem .25rem; font-family:var(--display); font-weight:600; font-size:clamp(1.08rem,1.6vw,1.22rem);
  line-height:1.3; border-radius:var(--radius-sm); }
.asks-acc .q-n{ font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--gold-ink); letter-spacing:.02em; }
.asks-acc .acc-head .pm{ width:36px; height:36px; border-radius:50%; background:var(--band-tint);
  transition:background .3s var(--ease); }
.asks-acc .acc-head .pm::before{ left:11px; right:11px; }
.asks-acc .acc-head .pm::after{ top:11px; bottom:11px; }
.asks-acc .acc-item.open .acc-head .pm{ background:var(--cta); }
.asks-acc .acc-item.open .acc-head .pm::before{ background:#fff; }
.asks-acc .acc-body-inner{ padding:0 calc(36px + 1.25rem) 1.4rem calc(3rem + 1.25rem); font-size:1.02rem; }
.asks-acc .acc-head:hover .q-t{ color:var(--primary-ink); }
.asks-acc .acc-head:focus-visible{ outline:2px solid var(--accent-line); outline-offset:2px; }
@media (max-width:560px){
  .asks-acc .acc-head{ grid-template-columns:2.2rem 1fr 32px; gap:.7rem; }
  .asks-acc .acc-head .pm{ width:32px; height:32px; }
  .asks-acc .acc-head .pm::before{ left:9px; right:9px; }
  .asks-acc .acc-head .pm::after{ top:9px; bottom:9px; }
  .asks-acc .acc-body-inner{ padding:0 0 1.3rem calc(2.2rem + .95rem); }
}

/* Our Care, respite or day care: the text in each column is centred under its
   photo and heading, so the two sides read as mirrored columns. */
.sx-sidebyside.photos .sx-sbs-cell{ text-align:center; }
.sx-sidebyside.photos .sx-sbs-cell p{ max-width:42ch; margin-inline:auto; }
@media (max-width:560px){ .sx-sidebyside.photos .sx-sbs-cell{ text-align:left; } .sx-sidebyside.photos .sx-sbs-cell p{ max-width:none; } }

@media (max-width:760px){
  .park-photos{ grid-template-columns:1fr; row-gap:1.8rem; }
  .park-photos figure:first-child{ grid-column:auto; }
}
.park-more-lab{ white-space:nowrap; }
@media (max-width:560px){ .park-more-lab::before, .park-more-lab::after{ width:2.5rem; } }

/* R10 story photo stretched to the ledger (Opus, 28 Sep 2026) */
.story-grid{ align-items:stretch; }
.story-grid .story-photo{ display:flex; }
.story-grid .story-photo .framed{ aspect-ratio:auto; height:100%; min-height:420px; flex:1; }
.story-grid .story-photo .framed .cover{ position:absolute; inset:0; object-position:50% 45%; }
@media (max-width:900px){
  .story-grid .story-photo .framed{ aspect-ratio:4/3; height:auto; min-height:0; }
}
/* R10b phones: the R6.3 ledger override landed after the 520px stacking rule and
   undid it; restack the year above its entry on small phones. */
@media (max-width:520px){ .storyline li{ grid-template-columns:1fr; gap:.35rem; } }


/* =========================================================================
   HPL ROUND 11 (28 Sep 2026) - RESPONSIVE SYSTEM
   Jon: "ensure the website is optimised for mobile and tablet, with solid
   rules for other screen types". Audited at 320, 360, 390, 414, 600, 768,
   834, 1024 (both orientations), 1180, 1280, 1366, 1440, 1920, 2560, and
   phones in landscape (844x390, 932x430). The rules below are the house
   system; they sit last so they win, and each says what it fixes.

   Breakpoint vocabulary (use these, not new numbers):
     small phone  <= 400    phone <= 600    tablet portrait 601-900
     tablet landscape / small laptop 901-1199    desktop 1200+
     wide 1600+ (content capped at --wide)    short landscape: max-height 500
   ========================================================================= */

/* --- 11.1 one gutter system ---------------------------------------------
   Phones had two gutters: 16px on heroes and the footer, 33-40px on
   content sections, so edges jumped as you scrolled. --w1 now floors at
   20px and --w2 grows smoothly from 20px (phones) to the 160px desktop
   figure, so every section shares one edge on phones and tablets. */
:root{
  --w1: clamp(20px, 5.2vw, 92px);
  --w2: clamp(20px, calc(13vw - 38px), 184px);
  --wide: 1440px;
}

/* --- 11.2 wide screens: cap the content, keep one left edge -------------
   At 2560 the .w2 sections ran 2,190px wide while the heroes sat in a
   1,300px column, so nothing lined up and split sections grew 1,300px
   tall photos. Content now stops at --wide and every band (nav, hero,
   sections, footer) shares the same left edge. No effect below 1600. */
.w2{ padding-inline:max(var(--w2), calc((100% - var(--wide)) / 2)); }
.hero.left .hold-in{ max-width:none;
  padding-inline:max(calc(var(--w2) - var(--w1)), calc((100% - var(--wide)) / 2 - var(--w1))); }
.nav .bar{ padding-inline:max(var(--w1), calc((100% - var(--wide)) / 2)); }
.foot .cols, .foot-legal .row{ padding-inline:max(var(--w2), calc((100% - var(--wide)) / 2)); }
.foot-cqc{ padding-inline:max(var(--w2), calc((100% - var(--wide)) / 2)); }
.foot-cqc .fc-row{ max-width:none; }
.contact-wrap{ max-width:calc(var(--wide) + 2 * var(--w1)); }

/* --- 11.3 read-next cards -----------------------------------------------
   Three across from 700px squeezed the titles to one or two words a line
   at 768 and 1024 ("How care is / planned, / and / dementia ..."). Three
   across now only from 1100; below that they are full-width rows. */
@media (min-width:700px) and (max-width:1099px){
  .sx-readnext{ grid-template-columns:1fr; gap:.9rem; }
  .sx-rn{ grid-template-columns:72px 1fr auto; padding:.65rem 1.1rem .65rem .65rem; }
  .sx-rn-go{ display:block; }
}
@media (min-width:1100px){ .sx-readnext{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:400px){
  .sx-rn{ grid-template-columns:52px 1fr auto; gap:.8rem; padding:.55rem .85rem .55rem .55rem; }
  .sx-rn-img.ico svg{ width:26px; height:26px; }
  .sx-rn-h{ font-size:1rem; }
}

/* --- 11.4 care mosaic (Our Care) ----------------------------------------
   1024-1099 fell back to three narrow columns with 4-5 words a line; the
   two-up tablet layout now runs to 1099. Card copy gets more room on
   small phones, and the two-up photos keep heads in frame. */
@media (min-width:1024px) and (max-width:1099px){
  .hl-list.three{ grid-template-columns:1fr 1fr; }
  .hl-list.three .hl:not(.lead):last-child{ grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; }
  .hl-list.three .hl:not(.lead):last-child .hl-img{ aspect-ratio:auto; min-height:100%; }
  .hl-list.three .hl:not(.lead):last-child .hl-body .avail{ min-height:0; }
}
.hl-list.three .hl:not(.lead) .hl-img img{ object-position:50% 28%; }
@media (max-width:480px){
  .hl-list .hl .hl-body, .hl-list .hl.lead .hl-body{ padding:1.25rem 1.2rem 1.4rem; }
}

/* --- 11.5 icon rows of three: stack on tablet portrait -------------------
   "What families can expect" kept three 3-4 word columns at 768. */
@media (min-width:641px) and (max-width:900px){
  .icon-row.three{ grid-template-columns:1fr; row-gap:2.2rem; max-width:34rem; margin-inline:auto; }
  .icon-row.three .ir + .ir::before{ display:block; top:calc(var(--ir-gap) / -2 - .35rem); bottom:auto;
    left:50%; transform:translateX(-50%); width:min(220px,52%); height:1px;
    background:linear-gradient(90deg, transparent 0%, rgba(var(--shadow-rgb),.16) 22%,
      rgba(var(--shadow-rgb),.16) 78%, transparent 100%); }
}

/* --- 11.6 heroes ----------------------------------------------------------
   The desktop line break in the Our Care h1 stranded "around" on phones;
   the house watermark sat behind the headline on tablets and phones. */
@media (max-width:760px){ .hero h1 br{ display:none; } }
@media (max-width:1100px){
  .hero .brandfield[class] .fieldmark{ left:auto; right:-24%; top:auto; bottom:-10%;
    width:min(80vw,560px); opacity:.06; transform:none; }
}
@media (max-width:380px){
  .hero h1{ font-size:1.95rem; }
  .hero .sub{ font-size:1rem; }
}

/* --- 11.7 The Home & Park, the building's story ---------------------------
   From 901 to 1199 the stretched photo became a 330px sliver, mostly sky;
   below 900 it sat in a 440px box left-aligned. It now goes full width
   above the timeline, landscape, framed on the building. */
@media (max-width:1199px){
  .story-grid{ grid-template-columns:1fr; }
  .story-grid .story-photo{ max-width:none; display:block; }
  .story-grid .story-photo .framed{ aspect-ratio:16/10; height:auto; min-height:0; }
  .story-grid .story-photo .framed .cover{ object-position:50% 58%; }
  .story-copy{ max-width:46rem; }
}

/* --- 11.8 split sections with a landscape photo (Home & Park intro) -------
   At 1001-1199 a 4:3 photo stood 280px tall beside 700px of copy; below
   1200 the section now stacks, copy first, then the photo full width. */
@media (max-width:1199px){
  .about-grid:has(.framed-wrap.wide){ grid-template-columns:1fr; }
  .about-grid .framed-wrap.wide .framed{ aspect-ratio:16/10; min-height:0; }
}

/* --- 11.9 contact: stack the form and the sidebar until there is room ----- */
@media (max-width:1100px){
  .contact-grid{ grid-template-columns:1fr; }
  .contact-aside{ position:static; }
}
@media (max-width:400px){
  .field select{ font-size:.94rem; padding-right:2rem; }
}
#f-consent{ width:24px; height:24px; flex:none; }

/* --- 11.10 fee cards: the "May apply if" rules sit level ------------------ */
@media (min-width:561px){
  .sx-door .sx-door-fit{ min-height:calc(1.15rem + 3lh); }
}
@media (min-width:1200px){
  .sx-door .sx-door-fit{ min-height:calc(1.15rem + 2lh); }
}

/* --- 11.11 footer on phones: the two link lists sit side by side --------- */
@media (max-width:560px){
  .foot .cols{ grid-template-columns:1fr 1fr; gap:2rem 1.2rem; }
  .foot .cols > .fcol:nth-child(1), .foot .cols > .fcol:nth-child(2){ grid-column:1 / -1; }
  .foot .fnav.two{ grid-template-columns:1fr; }
}

/* --- 11.12 gallery on phones: two up, not one (halves the scroll) ------- */
@media (max-width:560px){
  .galgrid{ grid-template-columns:1fr 1fr; gap:.8rem; }
  .galgrid figcaption{ font-size:.8rem; }
}
/* placeholder captions wrap instead of cutting off ("the dining t...") */
.ph::before{ white-space:normal; height:auto; line-height:1.35; padding:.55rem .9rem; text-overflow:clip; }

/* --- 11.13 legibility floor: nothing under ~13px -------------------------- */
.sx-rn-k, .sx-door .sx-door-lab{ font-size:.74rem; }
.cblock .place{ font-size:.74rem; }
.section.cta p{ max-width:62ch; margin-inline:auto; }
.aside-note{ max-width:72ch; }
.aside-note a{ color:var(--primary-ink); font-weight:800; text-decoration:underline; text-underline-offset:3px; }

/* --- 11.14 reading measure on wide screens -------------------------------- */
.map-cap, .localline, .map-note{ max-width:72ch; }
.section-head.center .say, .section-head .say{ max-width:62ch; }

/* --- 11.15 touch: comfortable targets where a finger is the pointer ------ */
@media (pointer:coarse){
  .foot .fnav a, .foot .fcol > a:not(.flogo), .foot-legal a{ display:inline-block; padding-block:.5rem; }
  .cookie .btn{ min-height:44px; }
  .hl-list .hl-more{ padding-block:.45rem; }
  .navlinks a, .nav-tel{ padding-block:.65rem; }
  .yb-copy .flink, .door .val{ padding-block:.5rem; }
  .sx-rn:hover{ transform:none; }
}

/* --- 11.16 phones held in landscape (short screens) -----------------------
   At 844x390 the home hero was 600px tall and hid every button below the
   fold; photos and the map filled more than the whole screen. */
@media (orientation:landscape) and (max-height:500px){
  .hero, .hero.compact, .hero.plain.slim{ min-height:0; }
  .hero .inner{ padding-top:5.4rem; padding-bottom:2.4rem; }
  .hero h1{ font-size:clamp(1.8rem,4.2vw,2.4rem); margin-top:.4rem; }
  .hero .eyebrow, .hero .gold-rule{ display:none; }
  .hero .sub{ margin-top:.7rem; font-size:1rem; }
  .hero .cta-row{ margin-top:1.1rem; }
  .nav .bar, .nav.scrolled .bar{ padding-block:.45rem; }
  .brand .brand-logo{ height:38px; }
  .framed, .fd-photo, .hl-img, .park-photos .g-img, .galgrid .g-img, .sh-img{ max-height:78vh; }
  .hl-list .hl.lead .hl-img{ min-height:0; }
  .loc-map iframe, .contact-map .loc-map, .loc-map{ height:230px; min-height:0; }
  .section{ padding-block:clamp(2.6rem,7vh,3.6rem); }
}


/* -------------------------------------------------------------------------
   R12 (1 Oct 2026) Jon: all stock removed, blank placeholders until the
   home's own photographs arrive; his room and wet-room photos added.
   ------------------------------------------------------------------------- */
.sh-img .ph{ position:absolute; inset:0; }
/* The Home & Park, rooms: the room photo with the ensuite wet room inset at
   its lower corner, framed in the paper colour so it reads as a second print. */
.fd-photo-pair{ position:relative; margin-bottom:clamp(2.2rem,5vw,3.6rem); }
.fd-photo-pair .fd-photo{ position:relative; aspect-ratio:16/10; min-height:0; }
.fd-photo-pair .fd-photo img.cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fd-photo-pair .fd-inset{ position:absolute; z-index:2; left:clamp(-1.6rem,-2.4vw,-.6rem); bottom:clamp(-3.6rem,-5vw,-2.2rem);
  width:clamp(120px,32%,220px); aspect-ratio:3/4; border-radius:var(--radius-sm); overflow:hidden;
  border:5px solid var(--surface); box-shadow:var(--shadow); }
.fd-photo-pair .fd-inset img.cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.feature-duo.flip .fd-photo-pair{ order:2; }
@media (max-width:1000px){
  .feature-duo.flip .fd-photo-pair{ order:-1; }
  .fd-photo-pair .fd-inset{ left:auto; right:.9rem; bottom:-2rem; width:clamp(110px,28%,180px); }
}
@media (orientation:landscape) and (max-height:500px){ .fd-photo-pair .fd-photo{ max-height:78vh; } }


/* -------------------------------------------------------------------------
   R13 (2 Oct 2026) hero text position. Jon: "all the hero text is too far
   over to the left". Round 11 pinned the hero copy to the wide 1440px content
   edge, so on a 1900px screen the headline started 232px in, hard against the
   logo line, with the whole right of the photo empty. The hero copy now sits
   in the centred 1300px hero column (the Yelverton and Nightingale position):
   393px in at 1903, 198px at 1536, and never closer to the edge than the
   section gutter on smaller screens. */
.hero.left .hold-in{
  padding-inline:max(calc(var(--w2) - var(--w1)), calc((100% - var(--hold)) / 2)); }

/* ==========================================================================
   R14 (8 Oct 2026) Jon's notes.
   14.1 Fees: "Ask us about fees" sat in a 72ch box that was not centred, so
        the link floated between the note's left edge and the page centre.
        It now shares the note's centred 68ch column and starts on the same
        left edge as "Before you make a decision".
   14.2 Contact hero: taller, and the faint arcs swapped for the house line
        drawing used on the home page 1858 band (same art, same opacity).
   ========================================================================== */
.sx-fourdoors + .note-band + .localline{ max-width:calc(68ch / .98); margin-inline:auto; text-align:left; }

.hero.plain.house{ min-height:clamp(560px,74vh,700px); }
.hero.plain .house-mark{ position:absolute; right:-4%; bottom:-10%; width:min(52vw,720px); height:auto;
  opacity:.07; pointer-events:none; z-index:1; }
@media (max-width:760px){
  .hero.plain.house{ min-height:clamp(460px,64vh,560px); }
  .hero.plain .house-mark{ width:120vw; right:-30%; bottom:-4%; opacity:.06; } }
@media (orientation:landscape) and (max-height:500px){ .hero.plain.house{ min-height:0; } }

/* 14.3 Contact "What to expect from a visit" (Jon: "fix spacing and look").
   The body copy sat in a narrow column indented under the heading, so each
   step wrapped to five or six short lines with empty space to its right, and
   "Come for a look around" broke onto two lines. The badge stays beside the
   heading (R6.5), the heading holds one line, and the copy now runs the full
   width of the step beneath them, so the three steps read level. */
.steps-row.roomy .st{ grid-template-columns:44px 1fr; column-gap:.9rem; padding:.3rem clamp(1.4rem,2.6vw,2.4rem); }
.steps-row.roomy .st .n{ grid-row:1; align-self:center; }
.steps-row.roomy .st h3{ text-wrap:wrap; }
.steps-row.roomy .st p{ grid-column:1 / -1; margin-top:1rem; max-width:34ch; text-wrap:pretty; }
@media (max-width:860px){
  .steps-row.roomy .st{ padding:0; }
  .steps-row.roomy .st + .st{ padding-top:1.6rem; }
  .steps-row.roomy .st p{ max-width:60ch; } }

/* 14.4 Fees cards: the green "Ask about / Start with" lines start level.
   Card three's line runs to three lines, so with margin-top:auto it rose above
   the other two and its hairline touched the copy. Every fit block now
   reserves the same three-line height, so the hairlines and the green text
   start at one height across the row, with a set gap above the hairline. */
.sx-door p:not(.sx-door-fit){ margin-bottom:0; }
.sx-door .sx-door-fit{ margin-top:auto; }
.sx-door > p:not(.sx-door-fit):has(+ .sx-door-fit){ margin-bottom:1.5rem; }
@media (min-width:960px){
  .sx-fourdoors.three .sx-door-fit{ min-height:calc(1.15rem + 3lh + 1px); }
}

/* 14.5 A gallery tile still waiting for its photograph shows no "to follow"
   wording (Jon: no indication the site is not ready); just the quiet tile. */
.ph[data-label=""]::before{ display:none; }