/* Care Home Website - base + section library v0.4
   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:60ch; }
.section-head.center{ margin-inline:auto; text-align:center; }
.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; }

/* ---------- 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 */
/* .97, not .94 (10 Sep 2026): at .94 the hero's very large white display type
   ghosted through the painted bar as it passed underneath. Visible at 1440 on
   the home page. The blur stays, so it still reads as a surface over a
   photograph rather than a flat block. PROMOTE UPSTREAM. */
.nav.scrolled{ background:rgba(251,248,240,.97); 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; }

/* ---------- homes (hover-reveal cards) ---------- */
.homes-grid{ margin-top:2.6rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.home-card{ position:relative; aspect-ratio:3/4; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  cursor:pointer; }
.home-card .home-img{ position:absolute; inset:0; }
.home-card .home-img.ph::before{ color:#fff; opacity:.85; }
.home-card .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(24,47,39,0) 38%, rgba(24,47,39,.78) 100%); transition:background .6s var(--ease); }
.home-card .label{ position:absolute; left:0; right:0; bottom:0; padding:1.6rem; z-index:2; color:#fff; }
.home-card .label .place{ font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--accent-soft); }
.home-card .label h3{ color:#fff; font-size:1.7rem; margin-top:.2rem; }
.home-card .label .more{ max-height:0; opacity:0; overflow:hidden; margin-top:0;
  transition:max-height .6s var(--ease), opacity .55s var(--ease), margin-top .6s var(--ease); }
.home-card .label .more p{ font-size:.98rem; color:rgba(255,255,255,.92); }
.home-card .label .more .view{ display:inline-flex; margin-top:1rem; font-weight:800; color:#fff; border:2px solid rgba(255,255,255,.6);
  padding:.55rem 1.1rem; border-radius:999px; font-size:.9rem; transition:background .25s, border-color .25s; }
.home-card:hover .scrim{ background:linear-gradient(180deg, rgba(24,47,39,.15) 0%, rgba(24,47,39,.88) 100%); }
.home-card:hover .label .more{ max-height:240px; opacity:1; margin-top:.9rem; }
.home-card:hover .label .more .view:hover{ background:rgba(255,255,255,.16); border-color:#fff; }

/* ---------- 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-top:1.8rem; text-align:center; color:var(--ink-soft); }
.care-foot a{ color:var(--cta-hover); font-weight:800; }

/* ---------- testimonials (carousel) ---------- */
.tcarousel{ position:relative; max-width:60rem; margin:2.4rem auto 0; text-align:center; }
.tstack{ display:grid; }
.tslide{ grid-area:1 / 1; opacity:0; visibility:hidden; transition:opacity .5s var(--ease); }
.tslide.active{ opacity:1; visibility:visible; }
.tstars{ color:var(--accent-soft); letter-spacing:.3em; font-size:1.1rem; }
.tquote{ font-family:var(--display); font-weight:500; font-style:italic; font-size:clamp(1.4rem,2.6vw,2rem);
  line-height:1.4; color:#fff; margin-top:1.2rem; }
.tattr{ margin-top:1.6rem; font-weight:800; color:#fff; letter-spacing:.02em; }
.tattr span{ display:block; font-weight:600; color:rgba(255,255,255,.7); font-size:.9rem; margin-top:.2rem; }
.tnav{ display:flex; gap:.6rem; justify-content:center; align-items:center; margin-top:2rem; }
.tdot{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.32); border:0; cursor:pointer; transition:background .3s, transform .3s; }
.tdot.active{ background:#fff; transform:scale(1.25); }
.tarrow{ width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff; cursor:pointer; font-size:1.1rem; transition:background .25s; }
.tarrow:hover{ background:rgba(255,255,255,.14); }

/* ---------- 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; }
.foot a:hover{ color:#fff; }
.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; }
@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:1px solid var(--rule); 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; }
.home-select{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.9rem; }
.home-opt{ position:relative; }
.home-opt input{ position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; }
.home-opt label{ display:block; height:100%; cursor:pointer; border:2px solid var(--rule); border-radius:14px; padding:1.15rem 1.1rem 1.25rem; background:var(--surface); transition:border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.home-opt .place{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:var(--ink-soft); display:block; }
.home-opt .hn{ font-family:var(--display); font-size:1.14rem; color:var(--ink); margin-top:.2rem; display:block; line-height:1.15; }
.home-opt .tick{ position:absolute; top:.7rem; right:.7rem; width:22px; height:22px; border-radius:50%; border:2px solid var(--rule); background:#fff; display:grid; place-items:center; transition:.2s var(--ease); }
.home-opt .tick svg{ opacity:0; transition:opacity .2s; }
.home-opt input:hover + label{ border-color:var(--primary); }
.home-opt input:checked + label{ border-color:var(--cta); background:var(--accent-tint); box-shadow:0 8px 22px rgba(185,138,46,.24); transform:translateY(-2px); }
.home-opt input:checked + label .tick{ background:var(--cta); border-color:var(--cta); }
.home-opt input:checked + label .tick svg{ opacity:1; }
.home-opt input:focus-visible + label{ outline:2px solid var(--primary-ink); outline-offset:2px; }
.enq-banner{ display:flex; align-items:center; gap:.7rem; background:var(--band-tint); border:1px solid var(--rule); border-radius:12px; padding:.85rem 1.1rem; font-family:var(--body); font-weight:700; color:var(--primary-deep); margin-bottom:1.6rem; font-size:.98rem; }
.enq-banner svg{ flex:none; color:var(--primary-ink); }
.enq-banner b{ color:var(--cta-hover); }
.field{ margin-bottom:1.25rem; }
.field-row + .field, .field-row + .field-row{ margin-top:0; }
.enq-banner + .step-label{ margin-top:.3rem; }
.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); box-shadow:0 0 0 3px rgba(46,82,68,.18); }
.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 rgba(46,82,68,.18); }
.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, and as
   the no-JS fallback). The .no-js pairing was added 10 Sep 2026 alongside the
   nav-paint fix in script.js: script is what toggles .scrolled, so without it
   the bar stayed transparent for the whole page and the hero copy tangled with
   the wordmark permanently. With no script the bar is simply painted from the
   top, which .hero .inner's 7rem (126px) of top padding already clears.
   PROMOTE UPSTREAM. --- */
.nav.solid,
.no-js .nav{ background:rgba(251,248,240,.97); 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,
.no-js .nav .brand{ color:var(--primary-ink); }
.nav.solid .navlinks a:not(.btn), .nav.solid .nav-tel,
.no-js .nav .navlinks a:not(.btn), .no-js .nav .nav-tel{ color:var(--ink); }
.nav.solid .navlinks a:not(.btn):hover,
.no-js .nav .navlinks a:not(.btn):hover{ color:var(--primary-ink); }
.nav.solid .burger,
.no-js .nav .burger{ border-color:var(--rule); background:#fff; }
.nav.solid .burger span,
.no-js .nav .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 */
.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); }
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:2.8rem; 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; }

/* --- N1 brand mark: wordmark + line-art nightingale ----------
   The bird is drawn from measured circle geometry (body r10 at
   27,25; head r5.6 at 43,14; the back, breast, tail and beak are
   true tangents to those circles, so the silhouette has no kinks
   it did not ask for). See BUILD_NOTES.md, "Brand mark". */
.brand{ gap:.6rem; align-items:center; }
.brand .bird{ width:36px; height:27px; flex:none; color:var(--primary); display:block; }
.nav:not(.scrolled) .brand .bird{ color:var(--accent-on-photo);
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.45)); }
.brand .wm{ font-family:var(--display); font-weight:600; font-size:1.34rem;
  letter-spacing:.004em; line-height:1; }
@media (max-width:420px){ .brand .wm{ font-size:1.16rem; } .brand .bird{ width:30px; height:23px; } }

/* --- N2 first-load veil: the bird draws itself ---------------
   Ported from Gratwick. Shown once per browser session (script.js
   sets the flag; the inline head script hides it immediately on
   later pages). A CSS animation always clears it, so a blocked
   or broken script.js can never trap the page. PROMOTE. */
.loader{ position:fixed; inset:0; z-index:1000; background:var(--surface);
  display:grid; place-items:center;
  transition:opacity .55s var(--ease), visibility .55s var(--ease);
  animation:veilfail .55s var(--ease) 2.7s forwards; }
.loader.done{ animation:none; opacity:0; visibility:hidden; }
@keyframes veilfail{ to{ opacity:0; visibility:hidden; } }
.loader .lmark{ display:flex; flex-direction:column; align-items:center; gap:1.15rem; }
.loader .bird{ width:150px; height:113px; color:var(--primary); }
.loader .bird path{ stroke-dasharray:190; stroke-dashoffset:190;
  animation:birddraw 1.25s var(--ease) forwards; }
.loader .bird path:nth-of-type(2){ animation-delay:.5s; }
.loader .bird path:nth-of-type(3){ animation-delay:.62s; }
.loader .bird path:nth-of-type(4){ animation-delay:.72s; }
.loader .bird circle{ opacity:0; animation:lfade .4s var(--ease) 1.05s forwards; }
.loader .lwm{ font-family:var(--display); font-weight:600; font-size:.9rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--primary-ink);
  opacity:0; animation:lfade .6s var(--ease) .95s forwards; }
@keyframes birddraw{ to{ stroke-dashoffset:0; } }
@keyframes lfade{ to{ opacity:1; } }
.no-js .loader, html.veilseen .loader{ display:none; }
@media (prefers-reduced-motion:reduce){ .loader{ display:none; } }

/* --- 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; } }

/* --- N7 the year band (history teaser on the deep green) ----- */
.yearband{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.8rem,4vw,3.6rem);
  align-items:center; }
.yb-year{ font-family:var(--display); font-weight:600; line-height:.9;
  font-size:clamp(3.6rem,8vw,6rem); color:var(--accent-on-photo); }
.yb-copy h2{ color:#fff; }
.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; }
@media (max-width:700px){ .yearband{ grid-template-columns:1fr; gap:1rem; } }

/* --- N8 verbatim reviews + score (ported from Gratwick) ------ */
.score{ display:flex; align-items:center; gap:clamp(1.3rem,3vw,2.4rem); flex-wrap:wrap;
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:clamp(1.5rem,3vw,2.3rem) clamp(1.5rem,3.4vw,2.8rem); }
.score .num{ flex:none; width:108px; height:108px; border-radius:50%; background:var(--band-tint);
  display:grid; place-items:center; font-family:var(--display); font-weight:600;
  font-size:2.2rem; color:var(--primary-ink); line-height:1; }
.score .st{ flex:1; min-width:270px; }
.score .st b{ font-family:var(--body); font-weight:800; font-size:1.1rem; display:block; }
.score .st p{ color:var(--ink-soft); margin-top:.45rem; font-size:.97rem; max-width:74ch; }
.reviews{ margin-top:2.4rem; display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:stretch; }
.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); }
@media (max-width:860px){ .reviews{ 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; }
}

/* --- N11 the story rail (our-story timeline, restrained) ----- */
/* R4.3 SINGLE SOURCE OF TRUTH for the timeline geometry.
   The rail and the milestone rings must sit on the same vertical line at
   every width and zoom, so every number they share is declared ONCE here and
   both derive from it. Do not re-state 6.5rem / the gap / the ring size
   anywhere else, and do not re-implement this arithmetic in JS.
   Note --sl-dot is the ring's OUTER diameter: the global `*{box-sizing}` rule
   does not match pseudo-elements, so the ring sets box-sizing itself below. */
.storyline{ --sl-col:6.5rem; --sl-gap:clamp(1.2rem,3vw,2.4rem);
  --sl-rail:2px; --sl-dot:16px; --sl-dot-top:.62rem;
  --sl-dot-c:calc(var(--sl-dot-top) + var(--sl-dot) / 2);  /* ring centre, from the row top */
  --sl-axis:calc(var(--sl-col) + var(--sl-gap));           /* the shared vertical axis */
  margin-top:2.8rem; max-width:820px; margin-inline:auto; }
.sl{ display:grid; grid-template-columns:var(--sl-col) 1fr; gap:var(--sl-gap);
  position:relative; padding-bottom:2.2rem; }
.sl:last-child{ padding-bottom:0; }
/* R4.2: the rail runs exactly through the dot centres. Dot centre x is the
   body column's left edge (6.5rem + gap) plus 1px (ring at left:-5px, 12px
   wide); a 2px line starting at 6.5rem + gap is centred on exactly that.
   Segments butt together (top:0/bottom:0), the first starts at the first
   dot's centre (16px) and the last is a 16px stub down to the last dot's
   centre, so the rail begins and ends dead on the end dots. */
.sl::before{ content:""; position:absolute;
  left:calc(var(--sl-axis) - var(--sl-rail) / 2);
  top:0; bottom:0; width:var(--sl-rail); background:var(--rule); }
.fl-track + .sl::before, .sl:first-child::before{ top:var(--sl-dot-c); }
.sl:last-child::before{ bottom:auto; height:var(--sl-dot-c); }
.sl .yr{ font-family:var(--display); font-weight:600; font-size:1.3rem; color:var(--gold-ink);
  text-align:right; padding-top:.05rem; }
.sl .sl-body{ position:relative; padding-left:1.6rem; }
/* R7: the milestone ring has two possible hosts. Wide, it sits on the body,
   level with the year and the heading. On a phone (below) it moves onto
   the year label, which is the milestone once the year sits above the
   heading rather than beside it. Both are drawn by these rules; only one
   is displayed at a time, and script.js reads whichever is painting. */
.sl .sl-body::before, .sl .yr::before{ content:""; position:absolute; box-sizing:border-box;
  left:calc(var(--sl-dot) / -2); top:var(--sl-dot-top);
  width:var(--sl-dot); height:var(--sl-dot);
  border-radius:50%; background:var(--surface); border:2px solid var(--accent-line); }
.sl .yr::before{ display:none; }
.sl .sl-body h3{ font-family:var(--body); font-weight:800; font-size:1.08rem; }
.sl .sl-body p{ margin-top:.4rem; color:var(--ink-soft); }
.band-tint .sl .sl-body::before, .band-tint .sl .yr::before{ background:var(--band-tint); }
/* R7: the phone spine. The year column goes, so the shared axis moves to
   the storyline's left edge: the column is 0 and the gap is one ring
   radius, so the ring sits just inside the box and the rail runs through
   its centre. Year and chapter text both indent off that axis. Every
   number still derives from the same --sl-* set, so the static rail, the
   drawn track and the ring share one axis, and the axis snap in script.js
   (which nudges --sl-gap) works here unchanged. The ring rises onto the
   year label, centred on its first line. */
@media (max-width:620px){
  .storyline, .flight .storyline{ --sl-col:0px; --sl-gap:calc(var(--sl-dot) / 2);
    --sl-indent:1.5rem; --sl-yr-lh:1.5rem;
    --sl-dot-top:calc((var(--sl-yr-lh) - var(--sl-dot)) / 2); }
  .sl{ grid-template-columns:var(--sl-col) 1fr; row-gap:.25rem; column-gap:var(--sl-gap);
    padding-bottom:1.9rem; }
  .storyline .sl .yr, .storyline .sl .sl-body{ grid-column:2; padding-left:var(--sl-indent); }
  .storyline .sl .yr{ position:relative; text-align:left; line-height:var(--sl-yr-lh); padding-top:0; }
  .sl .sl-body::before{ display:none; }
  .sl .yr::before{ display:block; }
}

/* --- N12 the bird rule ornament (used once a page at most) --- */
.bird-rule{ display:flex; align-items:center; gap:1rem; margin-bottom:1.1rem; }
.bird-rule.center{ justify-content:center; }
.bird-rule .ln{ height:1px; width:clamp(38px,8vw,92px); background:var(--rule); }
.bird-rule .bird{ width:30px; height:23px; color:var(--accent-line); flex:none; }
.band-deep .bird-rule .ln{ background:rgba(255,255,255,.25); }
.band-deep .bird-rule .bird{ color:var(--accent-soft); }

/* --- 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. */
.hero .bg > img.cover, .hero .bg > .ph{ filter:saturate(.90) brightness(.66); }
.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; }

/* --- N20 fees table (plain, readable, no zebra stripes) ------ */
.feetable{ width:100%; border-collapse:collapse; margin-top:1.8rem; background:var(--card);
  border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm); }
.feetable caption{ text-align:left; color:var(--ink-soft); font-size:.92rem; margin-bottom:.8rem; }
.feetable th, .feetable td{ text-align:left; padding:.95rem 1.2rem; border-bottom:1px solid var(--rule); }
.feetable thead th{ font-family:var(--body); font-weight:800; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold-ink); background:var(--surface); }
.feetable tbody th{ font-family:var(--body); font-weight:700; color:var(--ink); font-size:1rem; }
.feetable td{ color:var(--ink-soft); font-weight:700; white-space:nowrap; }
.feetable tr:last-child th, .feetable tr:last-child td{ border-bottom:0; }
@media (max-width:560px){
  .feetable th, .feetable td{ padding:.8rem .9rem; font-size:.94rem; }
  .feetable thead th{ font-size:.68rem; letter-spacing:.1em; }
}

/* --- 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; }

/* --- R4 the flight down the years (our-story) ----------------
   Sections 1+2 merged. JS adds .flight-on to the section when the
   enhancement boots (desktop, motion allowed): the per-item grey
   segments hand over to one continuous track, a gold line draws
   down it with scroll, and the nightingale glides along the line,
   lighting each milestone dot as it passes. Without JS and under
   reduced motion, none of this CSS applies and the static timeline
   shows unchanged. R7: this now runs at every width; the phone
   layout of the axis lives with the .storyline rules above. */
.flight{ overflow:clip; }
.prose.drop > p:first-child::first-letter{ font-family:var(--display); font-weight:600;
  font-size:3.3em; line-height:.78; float:left; padding:.1em .13em 0 0; color:var(--primary-ink); }
.fl-lede{ text-align:center; font-family:var(--display); font-style:italic; font-weight:600;
  font-size:1.35rem; color:var(--gold-ink); margin-top:clamp(3rem,5vw,4.2rem); }
/* R4.1 air: the flight gets room to breathe. Scoped to .flight so other
   timelines keep their rhythm. R5 widens the storyline for the chapters. */
.flight .storyline{ position:relative; margin-top:clamp(3.6rem,6vw,5.2rem); max-width:980px;
  /* R5.1: chapter text is top-aligned, so the milestone ring rises to sit
     optically level with the chapter title's first line and the year label.
     The rail's start/end stubs follow automatically via --sl-dot-c. */
  --sl-dot-top:.3rem; }
.flight .sl{ padding-bottom:clamp(4rem,7vw,6rem); z-index:1; }
.flight .sl:last-child{ padding-bottom:0; }

/* --- R5 the chapters and the album prints -------------------
   Each era is now a chapter: the entry text beside an aged
   album print, held by photo-mounting corners, tilted a degree
   or two as if laid on a table. Five frames wait, honestly
   labelled, for the photographs the home already owns; the
   Today frame holds a real photograph, so the story arrives in
   the present in colour. Taller chapters also slow the ghost
   era numerals right down. */
.ch-grid{ display:grid; grid-template-columns:1.1fr .8fr; gap:clamp(1.8rem,3.4vw,3rem);
  align-items:start; }
.ch-txt h3{ font-family:var(--body); font-weight:800; font-size:1.08rem; padding-top:3px; }
.flight .sl .yr{ line-height:1.15; padding-top:0; }
.ch-txt p{ margin-top:.4rem; color:var(--ink-soft); max-width:52ch; }
.era-print{ margin:0; position:relative; background:#FDFBF3; border-radius:2px;
  padding:10px 10px 12px; transform:rotate(-1.4deg);
  box-shadow:0 22px 44px -28px rgba(var(--shadow-rgb),.55), 0 2px 8px rgba(var(--shadow-rgb),.10);
  transition:transform .5s var(--ease); }
.sl:nth-child(even) .era-print{ transform:rotate(1.1deg); }
.era-print:hover{ transform:rotate(0deg); }
.era-print .pc{ position:absolute; width:22px; height:22px; z-index:2; }
.era-print .pc::before{ content:""; position:absolute; inset:0; background:#E3D6B4;
  clip-path:polygon(0 0, 100% 0, 0 100%); box-shadow:0 1px 2px rgba(var(--shadow-rgb),.15); }
.era-print .pc.tl{ top:-7px; left:-7px; }
.era-print .pc.tr{ top:-7px; right:-7px; transform:rotate(90deg); }
.era-print .pc.br{ bottom:-7px; right:-7px; transform:rotate(180deg); }
.era-print .pc.bl{ bottom:-7px; left:-7px; transform:rotate(270deg); }
.era-print .ep-img{ position:relative; aspect-ratio:4/3; overflow:hidden;
  background:linear-gradient(150deg, #EFE6CF 0%, #F6EFDD 55%, #EAE0C6 100%); }
.era-print .ep-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ep-empty{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.45rem; padding:1rem; text-align:center; }
.ep-empty .ep-bird{ width:34px; height:26px; color:var(--gold-ink); opacity:.35; margin-bottom:.2rem; }
.ep-empty .ep-from{ font-family:var(--body); font-weight:800; font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink); opacity:.75; }
.ep-empty .ep-what{ font-family:var(--display); font-style:italic; font-weight:600;
  font-size:1.02rem; color:var(--ink-soft); max-width:20ch; line-height:1.35; }
.era-print figcaption{ margin-top:9px; text-align:center; font-family:var(--display);
  font-style:italic; font-weight:600; font-size:.95rem; color:var(--ink-soft); }
@media (max-width:900px){
  .ch-grid{ grid-template-columns:1fr; align-items:start; }
  /* width:100% is load-bearing: with margin-inline:auto a grid item stops
     stretching and shrinks to its content, and the print's content is all
     absolutely positioned, so without this the frame collapses to nothing */
  .era-print{ width:100%; max-width:340px; margin-top:1.4rem; }
}
@media (max-width:620px){
  /* R7: with the spine at the left edge the print no longer centres in
     the whole column; it hangs off the spine like the text does, the same
     way it does between 620 and 900. Left margin stays 0 so the tilted
     corner mounts clear the rail. */
  .era-print{ width:100%; max-width:320px; margin-inline:0; }
}
/* R4.2: the bird is gone (Jon's call). What remains of the flight is the
   quiet layer: the continuous rail, the gold line drawing down it at the
   reader's pace, milestone dots lighting as the reader passes, and the
   ghost era numerals. The track's x comes from the SAME calc as the static
   segments, so drawn and static rails are pixel-identical. */
.fl-track{ display:none; position:absolute;
  left:calc(var(--sl-axis) - var(--sl-rail) / 2);
  width:var(--sl-rail); background:var(--rule); z-index:0; }
.fl-track .fl-draw{ position:absolute; left:0; top:0; width:100%; height:0;
  background:var(--accent-line); }
.flight-on .fl-track{ display:block; }
.flight-on .sl::before{ display:none; }
.flight-on .sl .sl-body::before, .flight-on .sl .yr::before{ transition:background-color .4s var(--ease),
  border-color .4s var(--ease), box-shadow .4s var(--ease); }
.sl.lit .sl-body::before, .sl.lit .yr::before{ background:var(--accent-line) !important;
  border-color:var(--accent-line); box-shadow:0 0 0 5px rgba(199,154,52,.16); }
/* (R5.1: the ghost era numerals are gone, Jon's call; the dates now live on
   the left spine labels, which is where the eye already is.) */

/* --- 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); }

/* ============ SX SIGNATURE COMPONENT LIBRARY (SEO pages, Sep 2026) ============ */

/* =========================================================================
   NIGHTINGALE - SX SET A
   Signature components for the four care pages (nursing, dementia,
   residential, respite). Loaded AFTER base.css; nothing in here is a
   base-library override, every selector is prefixed .sx-.

   Rules this file keeps to:
   - tokens.css only, no literal palette colours except gold alphas derived
     from --accent-line / --accent-soft for hairlines and glows.
   - Mobile first. The plain rules ARE the 390px layout; every wide-viewport
     override is scoped to min-width:561px or above (the round 2 lesson).
   - Legible with JavaScript off: nothing here hides content, and the
     .reveal classes on these blocks are handled by base.css.
   - Reduced motion respected; the only motion is a hover lift.
   - Contrast: ink or white text only. Gold is used for hairlines, rings,
     ghost numerals and small labels via --gold-ink (6.3:1 on the cream).
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. .sx-night  ("While Littlehampton sleeps", nursing page)
   The night side of the dayline on our-care: that one is light medallions
   with line art on a gold band, running down a vertical spine. This is a
   deep green band, hour numerals instead of icons, and a dotted rail that
   turns horizontal once there is room for the four hours to sit in a row.
   ------------------------------------------------------------------------- */
.sx-night{
  background:var(--primary-deep);
  background-image:radial-gradient(ellipse 74% 62% at 50% 4%, rgba(231,198,126,.13), transparent 72%);
  color:rgba(255,255,255,.86);
}
.sx-night h2{ color:#fff; }
.sx-night .eyebrow{ color:var(--accent-soft); }
.sx-night .section-head .say{ color:rgba(255,255,255,.82); }
.sx-night .sx-night-foot{ margin:2.4rem auto 0; max-width:60ch; color:rgba(255,255,255,.78);
  font-size:1rem; }

.sx-hours{ --sx-hgap:1.7rem; margin-top:2.4rem; display:grid; gap:var(--sx-hgap); }
.sx-hour{ position:relative; display:grid; grid-template-columns:72px 1fr; gap:1.1rem; align-items:start; }
.sx-dial{ position:relative; z-index:1; width:72px; height:72px; border-radius:50%;
  background:rgba(255,255,255,.05); border:1px solid rgba(231,198,126,.55);
  display:grid; place-items:center; }
.sx-dial b{ font-family:var(--display); font-weight:600; font-size:1.1rem; line-height:1;
  color:var(--accent-soft); letter-spacing:.005em; }
.sx-hour p{ padding-top:.5rem; color:rgba(255,255,255,.82); font-size:1rem; }
/* The rail between one hour and the next, dotted. On a phone it is vertical and
   drawn by ::after on the hour ABOVE the join (TP.2, 10 Sep 2026); ::before is
   only the horizontal rail from 920px up, geometry in the 920 block and in
   fix A below. Why the phone rail moved: each .sx-hour is a 72px dial beside a
   paragraph, and the paragraph sets the row height, so the real distance from
   one dial's bottom edge to the next dial's top was 52, 81 and 110px at 390
   while ::before was a fixed --sx-hgap (30.6px) hanging off the top of the
   next item. An ::after on the previous item can use both edges it needs: its
   top is that item's own dial bottom, its bottom is the item's box bottom plus
   the grid gap, which IS the next dial's top, whatever the paragraph did. */
.sx-hour + .sx-hour::before{ content:""; position:absolute; display:none; }
.sx-hour:not(:last-child)::after{ content:""; position:absolute; left:35px; width:2px;
  top:calc(72px + 6px);                          /* this dial's bottom edge + 6px air */
  bottom:calc(-1 * var(--sx-hgap) + 6px);        /* the next dial's top edge - 6px air */
  background-image:linear-gradient(180deg, transparent 0 2.5px, rgba(231,198,126,.75) 2.5px 7.5px,
    transparent 7.5px 10px);
  background-size:2px 10px; background-repeat:no-repeat round; }  /* whole dashes, both ends even */

@media (min-width:561px){
  .sx-hours{ grid-template-columns:1fr 1fr; column-gap:clamp(1.6rem,3.4vw,2.8rem); }
  .sx-hour + .sx-hour::before, .sx-hour:not(:last-child)::after{ display:none; }
}
@media (min-width:920px){
  .sx-hours{ --sx-hgap:clamp(1.2rem,2.6vw,2.2rem); grid-template-columns:repeat(4,1fr);
    column-gap:var(--sx-hgap); margin-top:3rem; }
  .sx-hour{ grid-template-columns:1fr; gap:0; text-align:center; }
  .sx-dial{ width:88px; height:88px; margin-inline:auto; }
  .sx-dial b{ font-size:1.26rem; }
  .sx-hour p{ padding-top:1.15rem; }
  .sx-hour + .sx-hour::before{ display:block; left:auto; right:100%; top:44px;
    width:var(--sx-hgap); height:2px;
    background-image:linear-gradient(90deg, rgba(231,198,126,.75) 0 5px, transparent 5px 10px);
    background-size:10px 2px; }
}


/* -------------------------------------------------------------------------
   2. .sx-samequiet  ("what stays the same / what we quietly change", 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.
   ------------------------------------------------------------------------- */
.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); }
}


/* -------------------------------------------------------------------------
   3. .sx-steppath  ("if more help is ever needed", residential)
   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 800.

   The old .sx-path / .sx-stop / .sx-mark rules were REMOVED here on 7 Sep 2026
   (round 4): the residential step path was rebuilt as .sx-steppath / .sx-sp
   with the connector drawn medallion-centre to medallion-centre. Nothing
   references the old names.
   ------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------
   4. .sx-stayline  ("how a short stay comes together", respite)
   Four tiles with a ghost numeral behind the heading and a chevron in the
   gap between them, pointing down the stack on a phone and along the row on
   a wide screen. Boxed and numbered, so it cannot be confused with the
   unboxed path on the residential page.
   ------------------------------------------------------------------------- */
.sx-stay{ --sx-sgap:1.15rem; margin-top:2.6rem; display:grid; gap:var(--sx-sgap); }
.sx-step{ position:relative; background:var(--card); border:1px solid var(--rule);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-sm);
  padding:1.5rem 1.5rem 1.6rem; }
.sx-step .sx-n{ position:absolute; right:1rem; top:.5rem; font-family:var(--display);
  font-weight:600; font-size:3.4rem; line-height:1; color:var(--accent-line);
  opacity:.24; pointer-events:none; }
.sx-step .sx-tick{ display:block; width:26px; height:2px; border-radius:2px;
  background:var(--cta); margin-bottom:.9rem; }
.sx-step h3{ position:relative; font-family:var(--body); font-weight:800; font-size:1.06rem;
  letter-spacing:.01em; padding-right:2.5rem; }
.sx-step p{ position:relative; margin-top:.5rem; color:var(--ink-soft); font-size:1rem; }
.sx-step + .sx-step::before{ content:""; position:absolute; left:50%; margin-left:-5px;
  top:calc(var(--sx-sgap) / -2 - 6px); width:9px; height:9px; transform:rotate(45deg);
  border-right:2px solid var(--accent-line); border-bottom:2px solid var(--accent-line); }

@media (min-width:561px){
  .sx-stay{ grid-template-columns:1fr 1fr; column-gap:1.2rem; }
  .sx-step + .sx-step::before{ display:none; }
}
@media (min-width:960px){
  .sx-stay{ --sx-sgap:clamp(1rem,1.9vw,1.5rem); grid-template-columns:repeat(4,1fr);
    column-gap:var(--sx-sgap); align-items:stretch; }
  .sx-step + .sx-step::before{ display:block; left:calc(var(--sx-sgap) / -2 - 4px);
    margin-left:0; top:2.5rem; transform:rotate(-45deg); }
}


/* -------------------------------------------------------------------------
   5. .sx-readnext  (the shared strip above the CTA on all four pages)
   Photo-side mini cards: a small square photograph, an eyebrow label and a
   line in the display face. Three across from 700px, stacked below it.
   ------------------------------------------------------------------------- */
.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; }
}

/* ============================================================
   Nightingale Nursing Home - signature components, set B
   Pages 5 to 8 of the SEO set (palliative, fees, the nursing vs
   residential guide, areas we serve).

   Loaded AFTER base.css. Nothing in here overrides a base class;
   every selector is prefixed .sx- so the set can be lifted into
   the shared library later. All colour, radius, shadow and easing
   comes from tokens.css: no literal palette values live here.

   Mobile first. Every wide-viewport rule is scoped to a
   min-width media query (round-2 lesson), and every component
   is fully legible with JavaScript disabled, since none of them
   need script to lay out.

   Page 5 (palliative) has no component of its own. Its signature
   is restraint: a single column, base classes only, and a lot of
   air. It still links this file so the set stays uniform.
   ============================================================ */


/* ------------------------------------------------------------
   .sx-fourdoors - the four ways a place is paid for (page 6)

   Four 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 the four line up whatever the copy
   length. Ink on white, so contrast is the card's own 13:1; the
   gold is used for the outline and the small label only, never
   as a fill behind text.
   ------------------------------------------------------------ */
.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 four
   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; }
}


/* ------------------------------------------------------------
   .sx-sidebyside - residential and nursing, matched row by row
   (page 7)

   Not a feature matrix. Each row is one topic, announced by a
   small centred rule-and-caps line, with two plain white cards
   under it carrying one warm sentence each. The two sides are
   styled identically on purpose: this page has to read as fair
   to residential homes.

   Narrow screens: the column headings drop away and each card
   carries its own "A residential home" / "A nursing home" tag,
   so a stacked reader never loses which is which.
   ------------------------------------------------------------ */
.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; }
}


/* ------------------------------------------------------------
   .sx-coastline - the coast, west to east (page 8)

   A single gold line with place markers, the nightingale sitting
   over the home's own marker, and two places set just off the
   line because they are inland or further west. Pure CSS and one
   inline SVG bird: no map embed, no tiles, no script.

   Below 1000px it is a vertical spine (the horizontal form
   cannot hold ten legible place names on a phone). From 1000px
   up the same markup lays itself along a horizontal line. The
   line is drawn per marker, from one marker's centre to the
   next, so it starts and stops exactly on the end dots instead
   of overshooting, the same trick base.css uses for the dayline.
   ------------------------------------------------------------ */
.sx-coastline{ --sx-cl-bg:var(--band-tint); --sx-cl-vy:26px;
  list-style:none; margin:2.4rem 0 0; padding:0; }

.sx-cl-stop{ position:relative; display:grid; grid-template-columns:26px 1fr;
  column-gap:1rem; padding-block:.7rem; }
.sx-cl-stop::before{ content:""; position:absolute; left:12.25px; top:0; bottom:0;
  width:1.5px; background:var(--accent-line); opacity:.7; }
.sx-cl-stop:first-child::before{ top:var(--sx-cl-vy); }
.sx-cl-stop:last-child::before{ bottom:calc(100% - var(--sx-cl-vy)); }

.sx-cl-mark{ grid-column:1; grid-row:1 / span 2; align-self:start;
  position:relative; z-index:1; height:26px; display:grid; place-items:center; }
.sx-cl-dot{ display:block; width:11px; height:11px; border-radius:50%;
  background:var(--accent-line); box-shadow:0 0 0 4px var(--sx-cl-bg); }

.sx-cl-above{ grid-column:2; grid-row:1; display:block; }
.sx-cl-below{ grid-column:2; grid-row:2; display:block; }

.sx-cl-name{ display:block; font-family:var(--body); font-weight:800; font-size:1rem;
  color:var(--ink); line-height:1.25; }
.sx-cl-dist{ display:block; margin-top:.15rem; color:var(--ink-soft); font-size:.88rem; }

/* the bird sits over the home's marker */
.sx-cl-bird{ display:block; width:34px; height:26px; color:var(--gold-ink); margin-bottom:.35rem; }
.sx-cl-home .sx-cl-dot{ width:14px; height:14px; background:var(--cta); }
.sx-cl-home .sx-cl-name{ font-family:var(--display); font-weight:600; font-size:1.3rem;
  letter-spacing:-.01em; }

/* the two places that sit off the coast road */
.sx-cl-off .sx-cl-dot{ width:9px; height:9px; background:var(--sx-cl-bg);
  border:1.5px solid var(--accent-line); }
.sx-cl-off .sx-cl-name{ font-weight:700; color:var(--ink-soft); }

@media (min-width:1000px){
  .sx-coastline{ --sx-cl-hy:81px; display:flex; align-items:stretch; margin-top:3.4rem; }

  .sx-cl-stop{ flex:1 1 0; display:block; text-align:center;
    padding:0 .35rem; }
  .sx-cl-stop::before{ left:0; right:0; top:var(--sx-cl-hy); bottom:auto;
    width:auto; height:1.5px; }
  .sx-cl-stop:first-child::before{ left:50%; top:var(--sx-cl-hy); }
  .sx-cl-stop:last-child::before{ right:50%; bottom:auto; }

  .sx-cl-above{ display:flex; flex-direction:column; justify-content:flex-end;
    align-items:center; height:68px; }
  .sx-cl-mark{ height:26px; }
  .sx-cl-below{ padding-top:.55rem; }

  .sx-cl-name{ font-size:.92rem; }
  .sx-cl-dist{ font-size:.78rem; }
  .sx-cl-home .sx-cl-name{ font-size:1.15rem; }
  .sx-cl-bird{ margin-bottom:.5rem; }

  /* an off-line place hangs its name above the road on a short stub */
  .sx-cl-off .sx-cl-above .sx-cl-name{ font-size:.86rem; }
  .sx-cl-off .sx-cl-above::after{ content:""; display:block; width:1.5px; height:13px;
    background:var(--accent-line); opacity:.6; margin-top:.4rem; }
}

/* the quiet line that closes the strip */
.sx-cl-foot{ margin:2.2rem auto 0; max-width:56ch; text-align:center;
  color:var(--ink-soft); font-size:1rem; }


/* ------------------------------------------------------------
   .sx-readnext - NOT defined here on purpose.

   The sibling-page strip is shared with the pages built alongside
   these, and its CSS already lives in styles/sx-a.css. Pages 6, 7
   and 8 use exactly the set A markup (.sx-readnext > .sx-rn with
   .sx-rn-img / .sx-rn-k / .sx-rn-h / .sx-rn-go) so that one
   definition serves all seven pages and nothing has to be merged.
   INTEGRATOR: make sure whichever stylesheet carries .sx-readnext
   is loaded on these three pages too, or fold sx-a.css and this
   file into base.css together.
   ------------------------------------------------------------ */

/* ============================================================================
   ROUND 4 (Jon's review, 7 Sep 2026)
   Three components ported from the Yelverton build, which Jon named as the
   reference, plus the four Fable design files from this round's page work.
   ============================================================================ */

/* --- R4.1 the care accordion, Yelverton rule 14 -------------------------------
   Jon: "make the image larger and standardise the length of the open boxes so it
   doesn't push the site or image up and down - see how it was done on Yelverton."
   The construction Jon signed off on Serenity round 7 and Yelverton round 7: the
   photograph is a FIXED height and the panel column is capped to that same height,
   so the picture never resizes when a panel opens AND no open panel runs past the
   bottom of the picture. Both only hold together if the frame is fixed rather than
   derived. Larger here than before: the photo column grows from .82fr to .95fr and
   the frame is an explicit 640px instead of a 1/1 aspect ratio.

   The cap is gated on html.reveal-ready and MUST stay gated. With JavaScript off
   every panel is open by design (the honest fallback), and a flat cap would hide
   most of them behind overflow:hidden. reveal-ready is set by the inline head
   script and dropped after 2.5s if script.js never boots, so the cap applies in
   exactly the case it was written for. PROMOTE UPSTREAM: inherited by every build
   carrying this component. */
@media (min-width:901px){
  .care-accordion{ grid-template-columns:.95fr 1.05fr; align-items:start; }
  .care-accordion .ca-photo{
    position:sticky; top:110px;
    height:var(--ca-frame); aspect-ratio:auto; min-height:0;
  }
  html.reveal-ready .care-accordion .acc{ max-height:var(--ca-frame); overflow:hidden; }
  /* ...and every open panel is the same height, which is the other half of what
     Jon asked for: "standardise the length of the open boxes so it doesn't push
     the site or image up and down". Without this the panels ran 262px to 366px,
     so the section below jumped by up to 100px on every click. The floor is the
     tallest measured body; the frame above is sized to head-stack + this floor. */
  html.reveal-ready .care-accordion .acc-body-inner{ min-height:23rem; }
}

/* --- R4.2 uniform FAQ panels ---------------------------------------------------
   Jon: "make q&a accordion length uniform across the site so it doesn't push the
   section down." Every open FAQ answer now reserves the same minimum height, so
   opening a one-line answer and a four-line answer move the page by the same
   amount, i.e. not at all. Gated on reveal-ready for the same reason as R4.1:
   with JS off all panels are open and a floor would add dead space to each.
   .faq only. The care accordion keeps its own frame (R4.1). */
@media (min-width:701px){
  html.reveal-ready .faq .acc-body-inner{ min-height:7.2rem; }
}
/* --- 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.4 the review slider ---------------------------------
   Adopted from the Serenity build. One review at a time, fading, with arrows
   and dots; it advances on its own every 7 seconds and STOPS for good the
   moment anyone touches a control, so it never moves under a reader's eye.
   With no JavaScript, or if script.js fails, every review is simply stacked
   and readable rather than three quarters of the section being invisible. */
.revslider{ max-width:860px; margin:2.4rem auto 0; text-align:center; }
.rs-track{ position:relative; }
/* The hidden state is gated on html.reveal-ready, the same gate the scroll
   reveals use, and NOT on .no-js. Measured: with script.js blocked but the page
   otherwise fine (an ad blocker, a bad deploy, a slow CDN) the inline head script
   has already swapped no-js for js, so a .no-js rule never matches and five of
   the six reviews stayed invisible for good. The inline script drops
   reveal-ready after 2.5s when script.js has not booted, so this way the slider
   falls back to a plain stack in exactly the cases that matter. */
/* Jon, 7 Sep 2026: "set the length of the section so it doesn't jump up and
   down when the text is longer / shorter". Absolutely positioning the inactive
   reviews collapsed the track onto whichever one was showing, so the section
   grew and shrank by up to 126px as it advanced. Stacking all six in a single
   grid cell instead makes the track the height of the TALLEST review, always.
   It costs nothing, and unlike a measured constant it cannot go stale when the
   copy changes. */
.rs-item{ margin:0; position:relative; }
html.reveal-ready .rs-track{ display:grid; grid-template-columns:1fr; align-items:start; }
html.reveal-ready .rs-item{ grid-area:1 / 1; opacity:0; visibility:hidden;
  transition:opacity .45s var(--ease); }
html.reveal-ready .rs-item.is-on{ opacity:1; visibility:visible; }
.rs-item + .rs-item{ margin-top:2.4rem; }
html.reveal-ready .rs-item + .rs-item{ margin-top:0; }
.revslider .marks{ display:block; font-family:var(--display); font-size:3.2rem; line-height:1;
  color:var(--primary); opacity:.55; margin-bottom:.4rem; }
.revslider blockquote{ font-family:var(--display); font-weight:500;
  font-size:clamp(1.14rem,1.8vw,1.46rem); line-height:1.62; color:var(--ink);
  margin:0 auto; max-width:58ch; }
.revslider .attr{ margin-top:1.15rem; font-family:var(--body); }
.revslider .attr b{ font-weight:800; color:var(--ink); }
.revslider .attr span{ display:block; font-size:.9rem; color:var(--ink-soft); margin-top:.15rem; }
.rs-nav{ display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1.7rem; }
.rs-nav button{ width:44px; height:44px; border-radius:50%; border:1px solid var(--rule);
  background:var(--card); color:var(--primary-ink); display:grid; place-items:center; cursor:pointer;
  transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.rs-nav button:hover{ border-color:var(--primary-ink); background:var(--surface); }
.rs-dots{ display:flex; gap:.5rem; }
.rs-dots button{ width:9px; height:9px; min-height:0; border-radius:50%; padding:0;
  border:0; background:var(--rule); cursor:pointer; transition:background .25s var(--ease); }
.rs-dots button[aria-selected="true"]{ background:var(--cta); }
.rs-src{ margin-top:1.2rem; font-size:.88rem; color:var(--ink-soft); }
.rs-src a{ color:var(--gold-ink); font-weight:700; text-decoration:underline; }
.no-js .rs-nav{ display:none; }
html:not(.reveal-ready) .rs-nav{ display:none; }
@media (max-width:560px){ .rs-nav > button{ width:40px; height:40px; } }

/* --- R4.3 Fable round-4 page components ------------------------------- */

/* ---- fable-a ---- */
/* =========================================================================
   ROUND 4, fable-a: nursing + dementia refinements (7 Sep 2026)
   Mobile first: the plain rules ARE the 390px layout; every wide-viewport
   override is scoped to min-width:561px or above. No JS needed anywhere.
   Contrast: ink / ink-soft / white text only; gold is rules and rings.
   All new classes are .sx- prefixed. Two blocks (marked SUPERSEDES) carry
   a higher specificity than the round-3 .sx-night rules so they win in any
   merge order; the integrator can fold them into the originals if preferred.
   ========================================================================= */


/* -------------------------------------------------------------------------
   A. .sx-night spacing fix (nursing page, "While Littlehampton sleeps")
   Diagnosis, measured at 1536: the section-head was left-aligned at x=198,
   the four medallions were centred inside their grid columns, and the foot
   paragraph was a margin:auto block (x=444..1092) with left-ragged text, so
   the section ran three alignment systems at once. And the dotted rail
   between medallions was sized to the grid GAP (39.6px) when the actual
   space between one dial's edge and the next was 207px, so it drew as a
   four-dash stub floating in the gutter rather than a line joining the
   hours. Second defect, visible from 920 to about 1200: each .sx-hour is a
   grid item stretched to the tallest sibling, and its two auto rows (dial,
   paragraph) then split the spare height between them, so the paragraphs
   under the shorter items drifted down (measured at 1024: paragraph tops at
   3096 / 3082 / 3111 / 3082px). Fix: head centred (class change in the
   HTML), foot text centred, rail runs dial edge to dial edge, and the rows
   inside each hour pack to the top so every paragraph starts level.
   ------------------------------------------------------------------------- */
.sx-night .hold > .sx-night-foot{ text-align:center; }               /* SUPERSEDES */
.sx-night .sx-hours .sx-hour{ align-content:start; }
@media (min-width:920px){
  .sx-night .sx-hours .sx-hour + .sx-hour::before{                   /* SUPERSEDES */
    right:auto;
    left:calc(-50% - var(--sx-hgap) + 50px);   /* previous dial's right edge (44px radius) + 6px air */
    width:calc(100% + var(--sx-hgap) - 100px); /* to this dial's left edge, less 6px air each side */
  }
}


/* -------------------------------------------------------------------------
   B. .sx-answer  (nursing page, section 1, "What nursing care means")
   The answer-first section, given a shape: the definition set in the
   display face on the left, like a lede, with the one fact that matters
   (a nurse on every shift) ringed beneath it; on the right a white card
   listing when families usually ring, each line on its own hairline. The
   fee line stays centred under the pair. Stacks below 900.
   ------------------------------------------------------------------------- */
.sx-ans{ margin-top:2.2rem; display:grid; gap:1.6rem; }
.sx-ans-def{ text-align:left; }
.sx-ans-def::before{ content:""; display:block; width:44px; height:2px; border-radius:2px;
  background:var(--accent-line); margin-bottom:1.15rem; }
.sx-ans-def .sx-ans-lede{ font-family:var(--display); font-weight:500;
  font-size:clamp(1.2rem,2.1vw,1.46rem); line-height:1.42; color:var(--ink); }
.sx-ans-def .sx-ans-lede .serif{ font-style:italic; color:var(--primary-ink); }
.sx-ans-def .sx-ans-body{ margin-top:1rem; color:var(--ink-soft); font-size:1.04rem; max-width:52ch; }
.sx-ans-fact{ margin-top:1.5rem; display:flex; align-items:center; gap:.9rem;
  color:var(--ink-soft); font-size:1rem; }
.sx-ans-fact b{ font-family:var(--body); font-weight:800; color:var(--ink); }
.sx-ans-ring{ flex:none; width:44px; height:44px; border-radius:50%; box-sizing:border-box;
  border:1.5px solid var(--accent-line); color:var(--primary-ink);
  display:grid; place-items:center; }
.sx-ans-ring svg{ width:22px; height:22px; display:block; }

.sx-ans-when{ background:var(--card); border:1px solid var(--rule); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:clamp(1.4rem,3.4vw,2.1rem); text-align:left; }
.sx-ans-lab{ display:block; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:800; color:var(--gold-ink); }
.sx-ans-when h3{ font-family:var(--display); font-weight:600; font-size:clamp(1.22rem,2.2vw,1.42rem);
  line-height:1.18; margin-top:.5rem; }
.sx-ans-list{ list-style:none; margin:1.1rem 0 0; padding:0; }
.sx-ans-list li{ display:grid; grid-template-columns:auto 1fr; gap:.85rem; align-items:start;
  padding:.78rem 0; border-top:1px solid var(--rule); color:var(--ink-soft); font-size:1rem; }
.sx-ans-list li::before{ content:""; box-sizing:border-box; width:11px; height:11px; margin-top:.48em;
  border-radius:50%; border:2px solid var(--primary); }
.sx-ans-when .sx-ans-foot{ margin-top:.9rem; padding-top:1rem; border-top:1px solid var(--rule);
  color:var(--ink); font-size:1rem; }
.sx-ans-when .sx-ans-foot a{ color:var(--primary-ink); font-weight:800; text-decoration:underline; }

@media (min-width:900px){
  .sx-ans{ grid-template-columns:1.08fr .92fr; gap:clamp(2.2rem,4.5vw,4rem); align-items:start; margin-top:2.6rem; }
  .sx-ans-def{ padding-top:.4rem; }
}


/* -------------------------------------------------------------------------
   C. .sx-alongside  (nursing page, section 4, "more than one thing going on")
   The conditions stay in the centred lede where they belong (a quiet
   mention, not an inventory), and the promise underneath gets a shape: one
   white sheet in three cells, a small line-art mark sat beside each heading
   rather than centred above it, so it reads differently from the icon row
   further down. Stacks on a phone, three across from 800.
   ------------------------------------------------------------------------- */
.sx-along{ margin-top:2.4rem; display:grid; background:var(--card); border:1px solid var(--rule);
  border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; text-align:left; }
.sx-along-cell{ position:relative; padding:clamp(1.5rem,3.6vw,2.2rem); }
.sx-along-cell + .sx-along-cell{ border-top:1px solid var(--rule); }
.sx-along-head{ display:flex; align-items:center; gap:.85rem; }
.sx-along-ico{ flex:none; width:40px; height:40px; border-radius:50%; box-sizing:border-box;
  background:var(--band-tint); color:var(--primary-ink); display:grid; place-items:center; }
.sx-along-ico svg{ width:22px; height:22px; display:block; }
.sx-along-cell h3{ font-family:var(--display); font-weight:600; font-size:1.24rem; line-height:1.16; }
.sx-along-cell p{ margin-top:.9rem; color:var(--ink-soft); font-size:1rem; }
.sx-along-foot{ margin-top:2rem; text-align:center; color:var(--ink-soft); font-size:.98rem; }
.sx-along-foot a{ color:var(--primary-ink); font-weight:800; text-decoration:underline; }

@media (min-width:800px){
  .sx-along{ grid-template-columns:repeat(3,1fr); }
  /* a fixed two-line box for the heading, so the three paragraphs start level
     whether a heading wraps or not (the Gratwick dense-row rule) */
  .sx-along-cell h3{ min-height:2.32em; display:flex; align-items:center; }
  .sx-along-cell + .sx-along-cell{ border-top:0; }
  .sx-along-cell + .sx-along-cell::before{ content:""; position:absolute; left:0; top:2rem; bottom:2rem;
    width:1px; background:linear-gradient(180deg, transparent, var(--rule) 15%, var(--rule) 85%, transparent); }
}


/* -------------------------------------------------------------------------
   D. .sx-visit  (dementia page, section 6, "Come as often as you can")
   An .about-grid with the copy first and the framed photo second, so the
   photo sits on the right and mirrors the feature-duo at the top of the
   page. On a phone the photo goes first, as it does everywhere else.
   ------------------------------------------------------------------------- */
.sx-visit .framed-wrap{ order:-1; }
.sx-visit .framed .cover{ object-position:42% 50%; }
@media (min-width:1001px){
  .sx-visit .framed-wrap{ order:0; }
}


/* -------------------------------------------------------------------------
   E. .sx-watch  (dementia page, section 4, the icon row's foot line)
   The registration sentence under the four icons, centred and held to a
   readable measure.
   ------------------------------------------------------------------------- */
.sx-watch-foot{ margin:2.6rem auto 0; max-width:62ch; text-align:center; color:var(--ink-soft); font-size:1rem; }
.sx-watch-foot a{ color:var(--primary-ink); font-weight:800; text-decoration:underline; }

/* ---- fable-b ---- */
/* =========================================================================
   ROUND 4 / fable-b.css  (residential + palliative pages)
   Every selector is prefixed .sx- and every wide-viewport override lives in a
   min-width media query, so the file is mobile-first and merges into base.css
   without touching anything already there. Tokens only, no new colours.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. .sx-steppath  ("If more help is ever needed", residential)

   REPLACES the round-3 .sx-path / .sx-stop / .sx-mark block, which had three
   real bugs (see the round-4 report):
     a) vertical: the connector stopped at the top of the next block, but the
        next medallion started .34rem lower, so every join had a visible gap;
     b) `.sx-path.on-accent .sx-mark` came later in the file at the same
        specificity as `.sx-stop:last-child .sx-mark`, so the filled terminal
        medallion was painted hollow again;
     c) horizontal: medallions sat at the LEFT of each column and the line ran
        mark-to-mark, so the whole path stopped at the 2/3 point of the row and
        the one-line heading (flex-end in a 2.4em box) sat lower than the
        two-line ones.

   The geometry is now stated once. 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.
   ------------------------------------------------------------------------- */
.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(199,154,52,.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{ 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; }

@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; }
}


/* -------------------------------------------------------------------------
   2. .sx-kind  ("You are welcome here at any hour", palliative)
   The practical kindnesses as 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.
   ------------------------------------------------------------------------- */
.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; }
  /* TP.3 (10 Sep 2026): 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; }
}


/* -------------------------------------------------------------------------
   3. .sx-hush  (the Malinda S review, palliative)
   The emotional centre of the page, on the deep green so the lights go down
   around it. Not a card: cream display type on the band, a short gold
   hairline above, and nothing else in the section. Contrast (measured
   against #182F27): cream #FBF8F0 14.2:1, --accent-soft 8.7:1, the .72 white
   of the attribution line about 8:1, the .62 white of the credit about 6:1.
   ------------------------------------------------------------------------- */
.sx-hush{ background:var(--primary-deep); color:#fff;
  padding-block:clamp(4.5rem,9vw,7.5rem); }
.sx-hush figure{ margin:0; }
.sx-hush-in{ max-width:780px; margin-inline:auto; padding-inline:var(--w1); text-align:center; }
.sx-hush-rule{ display:block; width:44px; height:1px; margin:0 auto;
  background:var(--accent-soft); opacity:.75; }
.sx-hush blockquote{ margin:1.9rem 0 0; font-family:var(--display); font-weight:500;
  font-size:clamp(1.28rem,2.4vw,1.9rem); line-height:1.5; color:var(--surface);
  letter-spacing:-.005em; }
.sx-hush .sx-hush-attr{ margin-top:1.9rem; }
.sx-hush .sx-hush-attr b{ font-family:var(--body); font-weight:800; color:#fff; }
.sx-hush .sx-hush-attr span{ display:block; margin-top:.2rem; font-size:.9rem;
  color:rgba(255,255,255,.72); }
.sx-hush .sx-hush-src{ margin-top:1.5rem; font-size:.82rem; color:rgba(255,255,255,.62); }
.sx-hush .sx-hush-src a{ color:var(--accent-soft); text-decoration:underline; }


/* -------------------------------------------------------------------------
   4. .sx-after  ("Afterwards, there is no hurry", palliative)
   A two-column copy grid: the heading holds the left column, the two short
   paragraphs the right, so a small section still has a shape. Stacks on a
   phone. The head is left-aligned because it sits inside a two-column grid.
   ------------------------------------------------------------------------- */
.sx-after{ display:grid; gap:1.4rem; max-width:1060px; margin-inline:auto; }
.sx-after h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); }
.sx-after p{ color:var(--ink-soft); font-size:1.04rem; line-height:1.68; max-width:54ch; }
.sx-after p + p{ margin-top:.9rem; }
.sx-after .sx-after-links{ margin-top:1.6rem; font-size:.98rem; }
.sx-after .sx-after-links a{ color:var(--primary-ink); font-weight:800; text-decoration:underline; }
@media (min-width:900px){
  .sx-after{ grid-template-columns:5fr 7fr; column-gap:clamp(2.4rem,5vw,4.5rem);
    align-items:start; }
  .sx-after h2{ position:sticky; top:6rem; }
}

/* ---- fable-c ---- */
/* ============================================================
   ROUND 4, FABLE C: the guide page and the areas page
   (nursing-home-or-residential-care.html, areas-we-serve.html)

   All classes .sx- prefixed. Checked against fable-a.css and
   fable-b.css for collisions (none: nothing here reuses
   .sx-along, .sx-ans, .sx-hush, .sx-kind, .sx-sp, .sx-visit,
   .sx-watch-foot or .sx-steppath). Every colour is a token from
   tokens.css, so the contrast figures in the token comments
   carry over: --ink-soft 5.8:1 on surface, 5.3:1 on band-tint,
   5.4:1 on accent-tint; --primary-ink 9.7:1; --gold-ink 6.3:1.
   No JavaScript anywhere in these components.

   Contents
     1. .sx-sidebyside tweak  (guide: per-cell tags at every width)
     2. .sx-stand             (guide: "Where Nightingale stands")
     3. .sx-signs             (guide: the five signs as cards)
     4. .sx-askduo/.sx-askpath (guide: who to ask, a numbered path
                               beside a sticky photo)
     5. .sx-coastline tweaks  (areas: more presence on wide screens)
     6. .sx-ways              (areas: three "from which direction" cards)
   ============================================================ */


/* ------------------------------------------------------------
   1. Side by side: keep the per-cell "A residential home /
      A nursing home" tags visible at every width.
   Round 3 hid them from 561px up and relied on the two column
   headings at the top of the table, so by the fourth row a reader
   had lost which side was which. The tags are tiny caps and cost
   nothing; the column headings stay as the table's title row.
   ------------------------------------------------------------ */
@media (min-width:561px){
  .sx-sidebyside .sx-sbs-who{ display:block; }
  .sx-sidebyside .sx-sbs-heads{ margin-bottom:.9rem; }
}


/* ------------------------------------------------------------
   2. .sx-stand: the one labelled seat for the home's own voice
      on the guide page. A white card with the nightingale mark
      and a caps label, sat under the comparison table on the
      tinted band, so the switch from "the guide" to "Nightingale"
      is visible before it is read.
   ------------------------------------------------------------ */
.sx-stand{ margin:2.6rem auto 0; max-width:1000px;
  display:grid; grid-template-columns:auto 1fr; gap:1.1rem 1.4rem; align-items:start;
  background:var(--card); border:1px solid var(--rule); border-left:4px solid var(--cta);
  border-radius:var(--radius-sm); padding:1.5rem 1.6rem 1.55rem;
  box-shadow:0 16px 34px -30px rgba(var(--shadow-rgb),.6); }
.sx-stand-bird{ display:block; width:40px; height:30px; margin-top:.15rem; color:var(--gold-ink); }
.sx-stand-lab{ display:block; font-family:var(--body); font-weight:800; font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-ink); }
.sx-stand-body p{ margin-top:.55rem; color:var(--ink); font-size:1.04rem; line-height:1.6; }
.sx-stand-body a{ color:var(--primary-ink); font-weight:800; text-decoration:underline; }
@media (max-width:560px){
  .sx-stand{ grid-template-columns:1fr; gap:.6rem; padding:1.3rem 1.2rem 1.35rem; }
  .sx-stand-bird{ width:34px; height:26px; }
}


/* ------------------------------------------------------------
   3. .sx-signs: the moments families tell us about, as five
      quiet cards. A small hollow gold ring rather than a tick,
      because these are signs to notice, not benefits to enjoy.
      Three across, then two centred underneath, on a wide screen;
      one column on a phone.
   ------------------------------------------------------------ */
.sx-signs{ margin-top:2.6rem; display:grid; grid-template-columns:1fr; gap:1rem; }
.sx-sign{ position:relative; background:var(--card); border:1px solid var(--rule);
  border-radius:var(--radius-sm); padding:1.35rem 1.4rem 1.4rem 3.1rem;
  box-shadow:0 16px 34px -30px rgba(var(--shadow-rgb),.6); }
.sx-sign-ring{ position:absolute; left:1.35rem; top:1.55rem; box-sizing:border-box;
  width:14px; height:14px; border-radius:50%; border:2px solid var(--accent-line);
  background:var(--surface); }
.sx-sign h3{ font-family:var(--display); font-weight:600; font-size:1.18rem; line-height:1.2;
  letter-spacing:-.01em; color:var(--ink); }
.sx-sign p{ margin-top:.5rem; color:var(--ink-soft); font-size:.98rem; }
.sx-signs-foot{ margin:2.2rem auto 0; max-width:62ch; text-align:center;
  color:var(--ink-soft); font-size:1.02rem; }
@media (min-width:700px){
  .sx-signs{ grid-template-columns:repeat(6,1fr); gap:1.2rem; }
  .sx-sign{ grid-column:span 3; }
}
@media (min-width:1000px){
  .sx-signs{ max-width:1100px; margin-inline:auto; }
  .sx-sign{ grid-column:span 2; padding:1.5rem 1.5rem 1.55rem 3.3rem; }
  .sx-sign-ring{ left:1.45rem; top:1.7rem; }
  /* the two on the second row sit centred under the three above */
  .sx-sign:nth-child(4){ grid-column:2 / span 2; }
  .sx-sign:nth-child(5){ grid-column:4 / span 2; }
}


/* ------------------------------------------------------------
   4. .sx-askduo / .sx-askpath: who to ask, and in what order.
      A .feature-duo.flip with the copy column carrying a vertical
      numbered path. Five stops make the copy column tall, so the
      grid aligns to the top and the photo sticks while the list
      scrolls past it (the care-accordion trick), instead of
      floating in the middle of a tall column.
   ------------------------------------------------------------ */
.sx-askduo{ align-items:start; }
.sx-askduo .fd-photo{ position:sticky; top:110px; aspect-ratio:1/1; min-height:0; }
.sx-askduo .fd-photo .cover{ object-position:40% 50%; }
.sx-askduo .fd-copy .section-head h2{ margin-top:.7rem; }

.sx-askpath{ --sx-ak-ring:34px; list-style:none; margin:2rem 0 0; padding:0;
  display:grid; gap:1.7rem; }
.sx-ask{ position:relative; padding-left:calc(var(--sx-ak-ring) + 1.1rem); }
.sx-ask-n{ position:absolute; left:0; top:-.1rem; box-sizing:border-box; z-index:1;
  width:var(--sx-ak-ring); height:var(--sx-ak-ring); border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:600; font-size:1rem; line-height:1;
  color:var(--primary-ink); background:var(--card); border:1.5px solid var(--accent-line); }
.sx-ask:last-child .sx-ask-n{ background:var(--cta); border-color:var(--cta); color:var(--btn-ink); }
/* the joining line, from the bottom of one medallion to the top of the next */
.sx-ask:not(:last-child)::before{ content:""; position:absolute;
  left:calc(var(--sx-ak-ring) / 2 - 1px); width:1.5px;
  top:calc(var(--sx-ak-ring) - .1rem); bottom:calc(-1.7rem - .1rem);
  background:var(--accent-line); opacity:.6; }
.sx-ask h3{ font-family:var(--body); font-weight:800; font-size:1.06rem; letter-spacing:.01em;
  color:var(--ink); padding-top:.35rem; }
.sx-ask p{ margin-top:.35rem; color:var(--ink-soft); font-size:.98rem; max-width:48ch; }
.sx-ask p a{ color:var(--primary-ink); font-weight:800; text-decoration:underline; }
@media (max-width:1000px){
  .sx-askduo .fd-photo{ position:static; aspect-ratio:16/10; }
}


/* ------------------------------------------------------------
   5. .sx-coastline: more presence on a wide screen, and no
      collisions on a narrower one.
   Round 3 set the place names at .92rem and the distances at
   .78rem, which at 1536 made the strip a footnote under its own
   heading. Lifted from 1200px up. Distances never wrap, so every
   one sits level with its neighbours. The two off-road places
   (Middleton-on-Sea, Arundel) now carry their distance ABOVE the
   line with their name (markup change), which leaves the row
   under the line empty either side of "Littlehampton" so the
   home's larger name has room to breathe at every width.
   ------------------------------------------------------------ */
@media (min-width:1000px){
  .sx-coastline{ margin-top:3.8rem; }
  .sx-coastline .sx-cl-dist{ white-space:nowrap; }
  .sx-coastline .sx-cl-home .sx-cl-name{ white-space:nowrap; }
  /* a flex item will not shrink below its nowrap content unless told to;
     let a long label spill evenly either side of its own marker instead
     of pushing the whole strip out of the page */
  .sx-coastline .sx-cl-stop{ min-width:0; }
  .sx-coastline .sx-cl-off .sx-cl-above .sx-cl-dist{ margin-top:.1rem; }
  .sx-coastline .sx-cl-above{ height:74px; }
  .sx-coastline .sx-cl-bird{ width:40px; height:30px; }
}
@media (min-width:1200px){
  .sx-coastline .sx-cl-name{ font-size:.96rem; white-space:nowrap; }
  .sx-coastline .sx-cl-dist{ font-size:.82rem; margin-top:.25rem; }
  .sx-coastline .sx-cl-home .sx-cl-name{ font-size:1.24rem; }
  .sx-coastline .sx-cl-off .sx-cl-above .sx-cl-name{ font-size:.9rem; }
}
@media (min-width:1400px){
  .sx-coastline .sx-cl-name{ font-size:1.02rem; }
  .sx-coastline .sx-cl-home .sx-cl-name{ font-size:1.32rem; }
  .sx-coastline .sx-cl-off .sx-cl-above .sx-cl-name{ font-size:.94rem; }
}


/* ------------------------------------------------------------
   6. .sx-ways: which direction you come from. Three cards, one
      per approach (along the coast from the east, down from
      Arundel, over the river from the west), each naming its
      towns once and its road once. Replaces the round-3
      town-by-town prose, which repeated the strip five times.
   ------------------------------------------------------------ */
.sx-ways{ margin-top:2.6rem; display:grid; grid-template-columns:1fr; gap:1.2rem; }
.sx-way{ position:relative; background:var(--card); border:1px solid var(--rule);
  border-radius:var(--radius); padding:1.7rem 1.6rem 1.8rem;
  box-shadow:0 16px 34px -30px rgba(var(--shadow-rgb),.6); }
.sx-way-lab{ display:flex; align-items:center; gap:.7rem;
  font-family:var(--body); font-weight:800; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-ink); }
.sx-way-lab::after{ content:""; flex:1 1 auto; height:1px; background:var(--rule); }
.sx-way h3{ margin-top:.8rem; font-family:var(--display); font-weight:600;
  font-size:1.34rem; line-height:1.2; letter-spacing:-.01em; color:var(--ink); }
.sx-way p{ margin-top:.7rem; color:var(--ink-soft); font-size:1rem; }
.sx-way .sx-way-road{ display:block; margin-top:1.1rem; padding-top:.9rem;
  border-top:1px solid var(--rule); color:var(--ink-soft); font-size:.9rem; }
.sx-way .sx-way-road b{ font-family:var(--body); font-weight:800; color:var(--ink); }
@media (min-width:760px){
  .sx-ways{ grid-template-columns:repeat(3,1fr); gap:1.4rem; }
  .sx-way{ display:flex; flex-direction:column; }
  .sx-way .sx-way-road{ margin-top:auto; padding-top:1rem; }
  .sx-way p{ margin-bottom:1rem; }
}


/* ------------------------------------------------------------
   7. .sx-duo-top: a portrait photograph inside the .duoband
      (areas page, pet-visit.jpg is 3:4). The band crops to 16:10,
      which on a portrait picture takes the middle and loses the
      face; anchoring the crop near the top keeps the resident and
      the dog's head in frame. Applied to the <img> only, so it
      does not touch the integrator's .duoband rules.
   ------------------------------------------------------------ */
.duoband .duo .d img.sx-duo-top{ object-position:50% 14%; }

/* ---- fable-d ---- */
/* ============================================================
   Nightingale Nursing Home - round 4, fable-d
   Two components, one per page:

     .sx-pack       the packing list on the respite page (section 4)
     .sx-meanstest  the council means-test scale on the fees page (section 4)

   Same house rules as the round-3 set: every selector is .sx- prefixed,
   nothing overrides a base class, every colour/radius/shadow comes from
   tokens.css, mobile first with wide-viewport rules scoped to
   min-width:561px or above, and both components lay out with no script
   (the .reveal classes are handled by base.css).
   ============================================================ */


/* ------------------------------------------------------------
   .sx-pack - "What to pack" (respite, section 4)

   One white panel on the gold band, drawn as a case: a rounded gold
   handle sits centred on the top edge. Inside, two groups under small
   caps labels ("for the first hour", "the practical bits"), 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 "we do the rest" reassurance.
   Contrast: ink and ink-soft on white (13:1 and 5.8:1); gold-ink for
   the small labels only (6.3:1 on white).
   ------------------------------------------------------------ */
.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: 76 wide, 24 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; }
}


/* ------------------------------------------------------------
   .sx-meanstest - "What the council actually looks at" (fees, section 4)

   Not cards (the four doors sit directly above). Three parts:

   1. .sx-mt-scale  a single gold rail with the two 2026/27 limits on it
      as filled gold marks, and the three zones (below, between, above)
      as hollow marks with one plain sentence each. A vertical rail down
      the left on a phone; a horizontal rail across the top from 860px.
   2. .sx-mt-house  one quiet hairline row for the house question, with a
      line-art house at its left.
   3. .sx-mt-assess the line that must not be missed, set on the deep
      green in the display face, with the phone number under it.

   Contrast: ink/ink-soft on the cream (13:1, 5.8:1); gold-ink small
   labels 6.3:1; on the deep green, white 14.2:1, white at .8 about 9:1,
   accent-soft 8.7:1. The gold rail is a line, never text.
   ------------------------------------------------------------ */
.sx-mt-scale{ --sx-rail:2.5rem; position:relative; margin-top:2.8rem; display:grid; gap:1.4rem;
  padding-left:var(--sx-rail); }
.sx-mt-scale::before{ content:""; position:absolute; left:6px; top:8px; bottom:8px; width:2px; border-radius:2px;
  background:linear-gradient(180deg, transparent 0%, var(--accent-line) 7%, var(--accent-line) 93%, transparent 100%);
  opacity:.75; }

.sx-mt-band{ position:relative; }
.sx-mt-band::before{ content:""; position:absolute; left:calc(1.5px - var(--sx-rail)); top:.5rem;
  width:8px; height:8px; border-radius:50%; background:var(--surface); border:1.5px solid var(--accent-line); }
.sx-mt-band-k{ display:block; font-family:var(--body); font-weight:800; font-size:1rem; letter-spacing:.01em;
  line-height:1.3; color:var(--ink); }
.sx-mt-band p{ margin-top:.35rem; color:var(--ink-soft); font-size:.98rem; }

.sx-mt-mark{ position:relative; display:flex; align-items:baseline; flex-wrap:wrap; gap:.25rem .7rem;
  padding:.1rem 0; }
.sx-mt-mark::before{ content:""; position:absolute; left:calc(0px - var(--sx-rail)); top:50%; width:14px; height:14px;
  transform:translateY(-50%); border-radius:50%; background:var(--cta);
  box-shadow:0 0 0 4px var(--surface); }
.sx-mt-mark b{ font-family:var(--display); font-weight:600; font-size:1.55rem; line-height:1; letter-spacing:-.01em;
  color:var(--ink); }
.sx-mt-mark span{ font-family:var(--body); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:800; color:var(--gold-ink); }

.sx-mt-house{ margin-top:2.6rem; display:grid; grid-template-columns:48px 1fr; gap:1.1rem; align-items:start;
  padding:1.6rem 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.sx-mt-house-ico{ width:48px; height:48px; color:var(--primary-ink); }
.sx-mt-house-ico svg{ display:block; width:100%; height:100%; }
.sx-mt-house h3{ font-family:var(--body); font-weight:800; font-size:1.05rem; letter-spacing:.01em; color:var(--ink); }
.sx-mt-house p{ margin-top:.45rem; color:var(--ink-soft); font-size:1rem; }

/* Jon, 8 Sep 2026: the gold radial glare across the top of this box is gone.
   Flat deep green now. */
.sx-mt-assess{ position:relative; margin-top:2.6rem; background:var(--primary-deep);
  color:#fff; border-radius:var(--radius); padding:2.3rem 1.4rem 2.4rem; text-align:center; }
.sx-mt-assess-k{ display:block; font-family:var(--body); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:800; color:var(--accent-soft); }
.sx-mt-assess h3{ margin:.8rem auto 0; max-width:22ch; color:#fff; font-size:clamp(1.55rem,3.2vw,2.15rem);
  line-height:1.12; letter-spacing:-.01em; }
.sx-mt-assess h3 .serif{ color:var(--accent-soft); }
.sx-mt-assess p{ margin:1.1rem auto 0; max-width:54ch; color:rgba(255,255,255,.82); font-size:1rem; }
.sx-mt-assess .sx-mt-tel{ display:inline-block; margin-top:1.3rem; font-family:var(--display); font-weight:600;
  font-size:clamp(1.4rem,2.4vw,1.85rem); color:#fff; letter-spacing:-.01em; border-bottom:1.5px solid var(--accent-soft);
  padding-bottom:.1rem; }
.sx-mt-assess .sx-mt-tel:hover{ color:var(--accent-soft); }

@media (min-width:561px){
  .sx-mt-assess{ padding:2.8rem 2.4rem 2.9rem; }
  .sx-mt-house{ grid-template-columns:60px 1fr; gap:1.5rem; padding:2rem 0; }
  .sx-mt-house-ico{ width:60px; height:60px; }
}
@media (min-width:860px){
  /* the rail turns horizontal and runs across the top of the row. The two
     limit marks sit in zero-width grid columns on the boundaries between the
     three zones, positioned absolutely within their own column so the figure
     stands above the rail and the dot sits on it; the zone dots are hollow. */
  .sx-mt-scale{ --sx-railtop:4.2rem; grid-template-columns:1fr 0 1fr 0 1fr; column-gap:1.7rem;
    padding-left:0; padding-top:calc(var(--sx-railtop) + 2.3rem); align-items:start; }
  .sx-mt-scale::before{ left:0; right:0; top:var(--sx-railtop); bottom:auto; width:auto; height:2px;
    background:linear-gradient(90deg, transparent 0%, var(--accent-line) 5%, var(--accent-line) 95%, transparent 100%); }
  .sx-mt-band{ text-align:center; }
  .sx-mt-band:nth-child(1){ grid-column:1; }
  .sx-mt-band:nth-child(3){ grid-column:3; }
  .sx-mt-band:nth-child(5){ grid-column:5; }
  .sx-mt-band::before{ left:50%; top:calc(-2.3rem - 4.5px); transform:translateX(-50%); }
  .sx-mt-band p{ max-width:28ch; margin-inline:auto; }
  .sx-mt-mark{ position:absolute; top:0; left:0; width:max-content; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:0; }
  .sx-mt-mark:nth-child(2){ grid-column:2; }
  .sx-mt-mark:nth-child(4){ grid-column:4; }
  .sx-mt-mark::before{ left:50%; top:calc(var(--sx-railtop) - 6px); transform:translateX(-50%); }
  .sx-mt-mark b{ font-size:1.85rem; white-space:nowrap; }
  .sx-mt-mark span{ white-space:nowrap; }
  .sx-mt-house{ margin-top:3rem; }
  .sx-mt-assess{ margin-top:3rem; padding:3.1rem 3rem 3.2rem; }
}

/* ============================================================================
   ROUND 4b (Jon's second review, 7 Sep 2026)
   ============================================================================ */

/* --- R4b.1 .sx-ans: the two columns must finish level -----------------------
   Jon: "the section is bugged". It was: with align-items:start the definition
   column ended 179px above the bottom of the card beside it, leaving a ragged
   white hole at the bottom left. Nothing was broken in the markup; the columns
   simply had no reason to relate to each other. Stretching the row and pushing
   the ringed fact to the bottom of its column makes both columns end level by
   construction, whatever length the copy is edited to. */
@media (min-width:761px){
  /* Revised 8 Sep 2026. The first version pushed the ringed fact to the bottom
     of its column with margin-top:auto so the two columns finished level. With
     Jon's shorter copy that put a 240px hole in the MIDDLE of the left column
     and cut the fact adrift from the paragraph it belongs to, which reads worse
     than the original ragged bottom. The left column has no border or fill, so
     its bottom edge is invisible and does not need to meet the card's: only the
     optical balance matters. So the copy now flows naturally and the whole block
     is centred against the card. */
  .sx-ans{ align-items:center; }
  .sx-ans-def{ display:flex; flex-direction:column; }
}

/* --- R4b.2 .sx-pack: pair the two aisles, row by row ------------------------
   Jon: "ensure that both aisles of the copy are aligned correctly, the logos
   are not symmetrical." Two faults, both fixed here and in the markup:
   1. The two groups were independent stacks, so item 2 on the left sat 28px
      above item 2 on the right and the drift grew down the list. The group and
      list wrappers now use display:contents so all ten children (2 labels +
      8 items) become items of ONE grid, filling column-major. Each row is then
      as tall as the taller of its pair, so the two aisles stay in step.
   2. The eight icons were drawn at wildly different sizes inside their 56x56
      canvases (30x42 for the photographs, 44x17 for the glasses), so they read
      as different weights. Every viewBox was re-cut to centre its own artwork
      at a common optical size; all eight now draw 41.6px in their dominant
      dimension. If an icon is ever added, re-cut it the same way with
      round4/tools/icobox.js and check with icocheck.js. */
/* Jon, 8 Sep 2026: the two column headers ("For the first hour" / "The
   practical bits") are replaced by ONE centred label above both aisles, and the
   two groups are now a flat list of eight items in a single grid. Column flow
   keeps the comfort things on the left and the practical things on the right,
   so the grouping survives without needing to be labelled twice. Each grid row
   is as tall as the taller of its pair, which is what makes the two aisles
   start and finish level. */
.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-cols{ row-gap:1.5rem; }
@media (min-width:901px){
  .sx-pack-cols{
    grid-template-columns:1fr 1fr;
    grid-template-rows:repeat(4, auto);
    grid-auto-flow:column;
    row-gap:1.6rem;
  }
}
.sx-pack-ico{ display:grid; place-items:center; }

/* --- R4c.1 the coastline, decongested (Jon, 8 Sep 2026) ---------------------
   "the section is nice but its all cramped ... nightingale should be central
   and named with (above or below) littlehampton."
   Ten stops on one rule was three too many: at 1536 the East Preston and
   Angmering labels touched, and the home marker sat fourth of ten, so the one
   place the strip exists to point at was off to the left. It is now SEVEN
   stops, three either side of the home, so Littlehampton is the exact centre
   by construction. Angmering, Ferring and Arundel came off the rule and lose
   nothing: all three are still named in the cards below and in the page meta.
   Arundel was on a coastline it is not on anyway.
   The home stop now carries the mark AND the name above it, which is what the
   strip was missing: the bird alone did not say whose home it is. */
.sx-cl-here{ display:block; font-family:var(--display); font-weight:600;
  font-size:1rem; line-height:1.1; color:var(--primary-ink); letter-spacing:-.01em;
  white-space:nowrap; }
@media (min-width:1200px){
  .sx-coastline .sx-cl-here{ font-size:1.12rem; }
}

/* ============================================================================
   RESPONSIVE PASS (8 Sep 2026). Measured faults only; tools in ../resp/.
   ============================================================================ */

/* --- RP.1 the care-accordion frame is a RANGE, not a number -----------------
   The frame was calibrated at 1536 alone, and narrower desktop widths wrap both
   the panel headings and the body copy, so they need MORE height, not less.
   Measured worst case per band (heads + tallest body, all panels checked):
     901px  needs 927  <- the old 830 frame clipped 97px, most of a panel
     1000px needs 843
     1100-1280 needs 831
     1366+  needs 802
   So the cap now steps down as the column widens. This is the third time this
   component has shipped a silently clipped panel; the rule is that --ca-frame
   must be measured at the NARROWEST width the cap applies to, not the widest.
   Re-measure with resp/clip3.js. PROMOTE UPSTREAM. */
@media (min-width:901px){  :root{ --ca-frame:950px; } }
@media (min-width:1000px){ :root{ --ca-frame:870px; } }
@media (min-width:1366px){ :root{ --ca-frame:830px; } }

/* --- RP.2 the phone number is the most important tap target on the site -----
   Measured 124x24 on a phone, well under the 44px minimum, everywhere it
   appears as a standalone line (.tel, .hero-tel, .crow). These are not links
   inside running prose; they are the thing a worried family actually taps. */
@media (max-width:834px){
  /* Revised 8 Sep 2026. The first version set line-height:44px on every phone
     link, including the ones that sit INSIDE a sentence (".tel" is "or call
     01903 717376", ".hero-tel" is "Or ring the home on ..."). That gave the
     number a 44px line box in the middle of a line of prose, which pushed it
     away from the button above it and read as broken. Standalone links keep the
     block treatment; links in a sentence get the hit area from vertical padding
     instead, which extends the tappable box WITHOUT changing the line box, and
     a matching negative margin so nothing shifts. */
  .crow a, .foot a[href^="tel:"], .foot a[href^="mailto:"]{
    display:inline-block; min-height:44px; line-height:44px; }
  .tel a, .hero-tel a{ padding-block:12px; margin-block:-12px; }
  .door .val{ min-height:44px; }
}

/* --- RP.3 review-slider arrows kept round on a phone ------------------------
   .rs-nav is a flex row and the arrows were being squeezed to 18px wide at
   390 while keeping their 40px height, so they read as slots, not buttons. */
/* DIRECT children only. `.rs-nav button` also matches the dots, which live in
   .rs-dots inside .rs-nav, so the first version blew each 9px dot up to 44px
   and pushed our-story 10px past the viewport at 360. */
.rs-nav > button{ flex:none; width:44px; height:44px; }
@media (max-width:400px){ .rs-nav{ gap:.7rem; } }

/* The dots stay 9px to look at but get a 30px transparent hit area, which is
   the standard trick: pad the button out and clip the painted background to the
   content box. Visual design unchanged, thumb target trebled. */
.rs-dots button{ padding:10px; background-clip:content-box; box-sizing:content-box; }
.rs-dots{ gap:0; }

/* --- RP.4 review credit line legible on a phone -----------------------------
   .src and .sx-hush-src measured 14.76px; 15px is the floor for anything that
   is still running text rather than a label. */
@media (max-width:430px){
  /* .review .src is 0-2-0, so a bare .src loses to it. Match the specificity. */
  .review .src, .qp-card .src, .sx-hush .sx-hush-src, .src, .sx-hush-src,
  .rs-src{ font-size:.95rem; }
}

/* --- RP.5 remaining under-size tap targets ---------------------------------
   .brand is the wordmark in the header (361px wide but only 27px tall) and
   .flink is a standalone "read more" link. Both are targets in their own right,
   not links inside a sentence. Links that DO sit inside running prose are left
   alone: making them 44px tall would break the line rhythm of the paragraph. */
@media (max-width:834px){
  .nav .brand{ min-height:44px; display:flex; align-items:center; }
  .flink{ display:inline-block; min-height:44px; line-height:44px; }
}

/* --- RP.6 read-next cards: keep the row on one baseline --------------------
   The eyebrow is one line for "Our care" and two for "Fees and funding", so at
   tablet width one card's heading sat 21px lower than its neighbours and the
   3-up row lost its shared baseline. Reserve two lines for the label from the
   width where the cards sit side by side. */
@media (min-width:700px){
  /* Two things were breaking the shared baseline across the 3-up row: the label
     is one line for "Our care" and two for "Fees and funding" (20px vs 39px),
     and the card is align-items:center, so any card with taller content also
     shifts vertically. Reserve two lines for the label AND start-align the
     text block, so every heading in the row begins at the same y. The photo
     stays centred on its own. */
  .sx-rn-k{ display:block; min-height:39px; }
  .sx-rn{ align-items:start; }
  .sx-rn-img{ align-self:center; }
}

/* --- RP.7 the enquiry select on a narrow phone -----------------------------
   Options run to 46 characters in a 283px field and a native select clips
   mid-word with no ellipsis. Slightly smaller text and a little more room for
   the chevron keeps the common options whole; the full text is still visible
   when the list is opened. */
@media (max-width:430px){
  /* .field select is 0-2-0 and sets padding, so match it */
  .field select{ font-size:.95rem; padding-right:2.2rem; }
}

/* ============================================================================
   TYPOGRAPHY PASS (10 Sep 2026). Jon: "the cramped text is a recurring issue,
   so it may be worth understanding a nice fix for mobile rather than just
   removing or moving text". Everything in TP.1 is scoped to max-width:560px,
   the phone band this library already uses; 561px and up were captured before
   and after and compared pixel for pixel. Not a word of copy changed.
   ============================================================================ */

/* --- TP.1 the phone prose system --------------------------------------------
   Measured at 390 before this pass, the running copy was being served at its
   DESKTOP size: 18.7px for a plain paragraph, 19.4px in .about-copy, 20.2px for
   a .say intro, in a column of 309 to 350px. That is 30 to 32 characters a
   line, when a comfortable phone measure is 38 to 45. Paragraph gaps were 14.4
   to 18px against a 30 to 32px line, under 0.6 of a line, so consecutive
   paragraphs fused into one grey slab; that was the largest single cause. And
   every .w2 section ran a 41px gutter beside the .hold sections' 20px, so the
   text column changed width from band to band down the same page.

   The fix is one phone type scale, declared once as tokens and applied to every
   rule in the library that carries running copy, rather than a patch per page:
     copy    17px / 1.55   (.945rem at the 18px root)   = 36 to 40 cpl
     intro   18px / 1.5    the centred .say under a heading, .cta copy, ledes
     gap     1.4em = 0.9 of a line between consecutive paragraphs
     gutter  one gutter (--w1) for .w2 and .hold alike, 20px at 390
   Card and list copy that was already 1rem comes down to the copy size too, so
   a phone has ONE body size and a card never sets larger than the prose beside
   it. Copy already under 1rem (.98rem notes and footlines) is left alone.

   Openers: the four .about-copy openers Jon named (home welcome, residential,
   respite, palliative) get the treatment the nursing opener already has in
   .sx-ans-def: a short gold rule under the heading and a first paragraph that
   carries the weight, in ink at the intro size, with the rest sitting quieter
   beneath it. Same 44x2 rule, same accent token; nothing new invented. The
   nursing lede itself comes down a step (21.6 to 19.8px) so it runs six lines
   rather than seven at 390. */
@media (max-width:560px){
  :root{ --m-copy:.945rem; --m-copy-lh:1.55; --m-intro:1rem; --m-intro-lh:1.5;
         --m-pgap:1.4em; }

  /* one gutter on a phone */
  .w2{ padding-inline:var(--w1); }

  /* running copy: the prose columns */
  p,
  .about-copy .body, .approach-copy .body, .fd-copy .body,
  .sx-ans-def .sx-ans-body, .acc-body-inner, .prose p, .prose li,
  .ch-txt p, .dayline .dli .dbody p, .dl p, .sx-stand-body p, .yb-copy p,
  .callers > p, .care-foot, .sx-after p,
  /* running copy: cards and lists that were 1rem or a shade over */
  .pcard p, .sx-door p, .sx-hour p, .sx-mt-house p, .sx-mt-assess p, .sx-sp p,
  .sx-step p, .sx-way p, .sx-along-cell p, .sx-kind-row p, .sx-sbs-cell p,
  .sx-ans-when .sx-ans-foot, .sx-night .sx-night-foot, .sx-watch-foot,
  .sx-sp-foot, .sx-cl-foot, .sx-signs-foot, .value p, .care-card p, .fstep p,
  .sx-ans-fact, .sx-ans-list li, .sx-sq-list li, .lede-list .li2{
    font-size:var(--m-copy); line-height:var(--m-copy-lh); }

  /* intros and ledes */
  .section-head .say, .cta p, .feesrow .fr-copy .lede{
    font-size:var(--m-intro); line-height:var(--m-intro-lh); }

  /* the gap between one paragraph and the next: 0.9 of a line, not 0.5 */
  .about-copy .body + .body, .approach-copy .body + .body, .fd-copy .body + .body,
  .acc-body-inner p + p, .prose p + p, .sx-door p + p, .sx-after p + p,
  .ch-txt p + p, .pcard p + p, .sx-stand-body p + p, .yb-copy p + p,
  .sx-ans-def .sx-ans-body{ margin-top:var(--m-pgap); }

  /* the openers: lede treatment borrowed from .sx-ans-def */
  .about-copy .body:first-of-type{ font-size:var(--m-intro); line-height:var(--m-intro-lh);
    color:var(--ink); margin-top:1.3rem; }
  .about-copy .body:first-of-type::before{ content:""; display:block; width:44px; height:2px;
    border-radius:2px; background:var(--accent-line); margin-bottom:1.1rem; }
  .sx-ans-def .sx-ans-lede{ font-size:1.1rem; line-height:1.45; }
}

/* ============================================================================
   AQUARIUS LODGE (24 Sep 2026). Cloned from Nightingale; everything above this
   line is byte-identical to builds/nightingale/styles/base.css. Every block below
   is token-only. PROMOTE UPSTREAM where marked.
   ============================================================================ */

/* --- AQ.0 the painted nav takes the build's own paper and shadow ------------
   The library hard-codes Nightingale's cream and green shadow on .nav.scrolled.
   Same values, from tokens. PROMOTE UPSTREAM (tokenise these two literals). */
.nav.scrolled{ background:color-mix(in srgb, var(--surface) 97%, transparent);
  box-shadow:0 10px 30px -24px rgba(var(--shadow-rgb),.4); }
.field input:focus, .field select:focus, .field textarea:focus{
  box-shadow:0 0 0 3px rgba(var(--shadow-rgb),.16); }

/* --- AQ.1 the mark and the two-line wordmark ---------------------------------
   A continuous-line water-bearer's jug tipping into two wave strokes. PROPOSED
   (no client logo exists); see BUILD_NOTES. It reuses the engine's .bird slot so
   the veil draw, nav sizing and footer rules apply unchanged. */
.brand .wm{ display:flex; flex-direction:column; gap:.28rem; }
.brand .wm-sub{ font-family:var(--body); font-weight:600; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; opacity:.86; line-height:1; }
.nav:not(.scrolled) .brand .wm-sub{ color:rgba(255,255,255,.9); }
.nav.scrolled .brand .wm-sub{ color:var(--ink-soft); opacity:1; }
.no-js .brand .wm-sub{ color:var(--ink-soft); }
@media (max-width:420px){ .brand .wm-sub{ font-size:.6rem; letter-spacing:.12em; } }
.loader .lwm{ letter-spacing:.3em; }

/* --- AQ.2 the certificate carrying a mixed result (ported from Yelverton Y13.3)
   Four areas Good with a green tick; Well-led Requires improvement with a
   hollow amber ring. The overall word stays green because the overall rating
   IS Good. Both colours measured to the same contrast (6.88 / 6.96 on the card)
   so the amber is visible without shouting. PROMOTE UPSTREAM (Yelverton has it;
   Nightingale's copy of the library did not). */
.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-fives li.is-mixed em{ color:var(--mixed); line-height:1.3; font-size:.74rem; }
.cc-line .big .mixed{ color:var(--mixed); font-style:italic; }
.cc-line .big .good{ color:var(--cqc-good); }
/* Five columns at 820px leave 104px each; "Requires improvement" needs two lines,
   so every column reserves two lines for the result and the row stays level. */
.cc-fives em{ min-height:2.6em; display:block; text-align:center; }
@media (max-width:640px){ .cc-fives em{ min-height:0; } }

/* --- AQ.3 (removed round 4): the footer CQC plaque came off every page. Reg 20A asks
   for the rating on the website, conspicuously, not on every page; the certificate on
   the home page (and on the Margate page) carries all four required elements. */

/* --- AQ.4 the brand-field hero (Yelverton pattern) --------------------------
   For a page with no honest photograph: the deep brand field, a quiet linear
   deepening, and the mark's two wave strokes drawn once, faint, low in the
   frame. No photo, no vignette, no halo. PROMOTE UPSTREAM. */
.hero.field .bg{ background:linear-gradient(180deg, var(--primary) 0%, var(--primary-deep) 78%); }
.hero.field .bg::after{ background:none; }
.hero.field .waves{ position:absolute; left:50%; bottom:9%; transform:translateX(-50%);
  width:min(1100px,130%); height:auto; color:var(--accent-line); opacity:.22; pointer-events:none; }

/* --- AQ.5 (removed round 4: the jobs section, its form and the CV picker were taken off
   the contact page at Jon's request; job seekers use the one general enquiry form) */

/* --- AQ.6 small odds ---------------------------------------------------------- */
.care-foot a{ color:var(--gold-ink); }
.pcard .pc-body h3 a{ color:inherit; }
.pcard a.pc-link{ display:inline-block; margin-top:.6rem; font-weight:700; color:var(--primary-ink);
  text-decoration:underline; }
.sx-cl-mark-aq{ display:block; width:40px; height:30px; color:var(--gold-ink); margin:0 auto .35rem; }
.cblock .crow span{ color:var(--ink); }
.hero .sub a{ color:#fff; border-bottom:2px solid var(--accent-on-photo); }
.about-copy .signoff{ margin-top:1.1rem; font-family:var(--display); font-style:italic; font-weight:500;
  font-size:1.2rem; color:var(--primary-ink); }
/* headings balance their lines, so a centred two-liner never leaves one word alone */
h1, h2, .duo-say p{ text-wrap:balance; }
.localline.center{ text-align:center; }

/* --- AQ.7 --ca-frame re-stepped for FOUR panels (RP.1 range rule) -----------
   MEASURED on the rendered page (tools/ca-measure.js opens every panel for real
   and reads the panel column's scrollHeight), 24 Sep 2026. Worst open panel:
     901-999px  790px  -> frame 810
     1000-1199  768px  -> frame 790
     1200+      737px  -> frame 760
   Nightingale's five-panel values (950/870/830) left the photo 90-160px taller
   than the panel column here. Re-measure if a panel is added or its copy grows. */
@media (min-width:901px){  :root{ --ca-frame:810px; } }
@media (min-width:1000px){ :root{ --ca-frame:790px; } }
@media (min-width:1200px){ :root{ --ca-frame:760px; } }
/* the consent line is a sentence, not a field label: the library's .field > label
   rule was setting it in bold. PROMOTE UPSTREAM. */
.field > label.consent{ font-weight:400; font-size:.9rem; color:var(--ink-soft); }
.hero.field .bg{ overflow:hidden; }
/* footer links and the card links are standalone targets: 44px on a phone (RP.2 rule) */
@media (max-width:834px){
  .foot .fcol > a{ padding-block:10px; margin-bottom:0; line-height:1.4; }
  .pcard a.pc-link{ min-height:44px; line-height:44px; margin-top:.2rem; }
}
/* centred heads get a little more width so a heading sits on two lines rather than
   three at desktop sizes; the intro under it keeps its reading measure */
@media (min-width:900px){
  .section-head.center{ max-width:46rem; }
  .section-head.center .say{ max-width:60ch; margin-inline:auto; }
}

/* --- AQ.8 ROUND 2 (28 Sep 2026) ------------------------------------------------
   The life hero sits on the client's own sea photograph, and under the standard
   scrim the sea's blue went dark teal. On this one hero the scrim is lifted, and
   stopped at the measured floor: the lightest pixel behind the h1 box (sampled
   with .hero .inner hidden, as qa-check does) stays at or under 0.10 luminance at
   390, 768 and 1536, so white keeps 7:1 and the accent word 4.5:1. Values and
   measurements in BUILD_NOTES round 2. Every other hero keeps the standard scrim. */
.hero.compact.sea .bg > img.cover{ filter:saturate(1) brightness(.76); }
.hero.compact.sea .bg::after{
  background:
    radial-gradient(ellipse 80% 64% at 50% 46%, rgba(16,27,20,.52) 0%, rgba(16,27,20,.30) 55%, transparent 80%),
    linear-gradient(180deg, rgba(16,48,58,.58) 0%, rgba(16,48,58,.46) 45%, rgba(16,48,58,.78) 100%);
}
/* The footer now carries the email address, one long unbroken word. In the two-column
   footer (431-834px) it pushed its column past the viewport at 440-460px; let the grid
   column shrink and the address wrap at any point if it has to. Scoped to the footer. */
.foot .cols > .fcol{ min-width:0; }
.foot .fcol a[href^="mailto:"]{ overflow-wrap:anywhere; }
/* life.html visiting doors: the fit line on the last door is a link */
.sx-door .sx-door-fit a{ color:var(--primary-ink); text-decoration:underline; text-underline-offset:3px; }
/* the four visiting doors stand in a row on wide screens, like doors along a street,
   and their copy is centred under the arch */
.aq-visit .sx-door p, .aq-visit .sx-door .sx-door-fit{ text-align:center; }
@media (min-width:1100px){
  .sx-fourdoors.aq-visit{ grid-template-columns:repeat(4,1fr); }
  .aq-visit .sx-door{ padding:3.2rem 1.6rem 1.9rem; }
}

/* --- AQ.9 ROUND 4 (29 Sep 2026) ------------------------------------------------
   Jon: "all the accordion drops across the page have too much blank space below".
   Cause, measured on the rendered page: the library's uniform-panel floors (R4.1
   care accordion min-height 23rem from 901px, R4.2 FAQ min-height 7.2rem from 701px)
   were set for Nightingale's longer answers. Aquarius answers are shorter, so an open
   panel carried 41-101px (FAQ) and 60-210px (care accordion) of empty space under its
   last line on desktop, against 28px on a phone. The floors are lifted here, and the
   care-accordion frame is re-stepped below to the tallest REAL panel so nothing clips. */
@media (min-width:701px){ html.reveal-ready .faq .acc-body-inner{ min-height:0; } }
@media (min-width:901px){ html.reveal-ready .care-accordion .acc-body-inner{ min-height:0; } }
.acc-body-inner{ padding-bottom:1.25rem; }
/* --ca-frame re-stepped with the floors gone (tools/ca-measure.js, worst open panel,
   29 Sep 2026): 901px 786 / 1000px 762 / 1100px 702 / 1200px 671 / 1366px 641.
   Content only shrinks as the screen widens, so each step is measured at its lower edge
   and set just clear of it. */
@media (min-width:901px){  :root{ --ca-frame:790px; } }
@media (min-width:1000px){ :root{ --ca-frame:766px; } }
@media (min-width:1100px){ :root{ --ca-frame:706px; } }
@media (min-width:1200px){ :root{ --ca-frame:675px; } }
@media (min-width:1366px){ :root{ --ca-frame:645px; } }
/* Our-care "Food from our own kitchen" (Jon: "the alignment / spacing isnt quite right").
   Measured at 1366/1536/1920: the heading ran 514-744px wide, the paragraphs 436px and the
   quote card 501px, so the column had three right edges; and the copy stood 98-121px taller
   than the photo at 1366-1536, so the two tops never met. One measure for all three, and the
   photo takes the copy column's height, so tops and bottoms line up. Gap is the feature-duo's
   own, the same as every other photo-and-copy section on the site. Desktop only:
   from 1001px, where the feature-duo is two columns (round 5 fix: this was 901px, and
   between 901 and 1000 the stacked photo collapsed to 0px tall). */
@media (min-width:1001px){
  .aq-kitchen{ align-items:stretch; }
  .aq-kitchen .fd-copy{ max-width:30rem; align-self:center; }
  .aq-kitchen .fd-copy h2, .aq-kitchen .fd-copy .body, .aq-kitchen .qnote{ max-width:none; }
  .aq-kitchen .fd-photo{ aspect-ratio:auto; min-height:0; height:100%; position:relative; }
  .aq-kitchen .fd-photo img.cover{ position:absolute; inset:0; }
}
/* Our-care "What to bring" (Jon: "make the sides and each point more uniform").
   Measured before: rows 114/87/87/114px tall, so the rhythm stepped; the two icons new
   to this build were cut on loose canvases (the bottle drew at 42x83%, the phone at 57%),
   and every icon's stroke scaled with its own viewBox (1.4 to 1.8px on screen). Now: four
   equal rows, every viewBox re-cut to the library rule (artwork centred, dominant side 80%),
   and one 1.6px stroke on every icon whatever its canvas. */
@media (min-width:901px){ .sx-pack-cols{ grid-template-rows:repeat(4, 1fr); } }
.sx-pack-ico svg{ stroke-width:1.6; }
.sx-pack-ico svg *{ vector-effect:non-scaling-stroke; }
/* the footer lost its fourth column (the CQC plaque), so three tracks from 835px */
@media (min-width:835px){ .foot .cols{ grid-template-columns:1.3fr 1fr 1fr; } }

/* --- AQ.10 ROUND 5 (29 Sep 2026) ---------------------------------------------
   Jon: "remove the logo and just have the name as the logo". The jug-and-waves mark
   is gone from the header, the veil, the footer and the Margate coastline; the
   wordmark carries the brand alone, a step larger to fill the room the mark left.
   Sizes step down with the library's own nav bands so the centred links still clear. */
.brand .wm{ font-size:1.46rem; }
@media (min-width:1041px) and (max-width:1200px){ .brand .wm{ font-size:1.12rem; } }
@media (min-width:1201px) and (max-width:1400px){ .brand .wm{ font-size:1.26rem; } }
@media (max-width:430px){ .brand .wm{ font-size:1.12rem; } }
.loader .lwm{ font-size:clamp(1.3rem,2.6vw,1.9rem); letter-spacing:.2em; animation-delay:.25s; }
/* Home page welcome (Jon: "the spacing is off"). Measured at 1366/1536/1920: heading box
   507/570/736px against 464px paragraphs, the portrait photo 633/712/919px tall against
   653/654/595px of copy, and 114/186/356px of dead space between the text and the photo.
   Now the copy column is one 30rem measure for eyebrow, heading, paragraphs, sign-off and
   buttons, the photo sits beside it (up to 38rem wide, so the square photograph is never cut to a letterbox) at exactly the copy's height, and the gap
   is the about-grid's own (the same as the other about-grid sections). From 1001px, where
   the grid is two columns. The offset gold frame follows the photo box. */
@media (min-width:1001px){
  .aq-welcome{ grid-template-columns:minmax(0,30rem) minmax(0,38rem); justify-content:center; align-items:stretch; }
  .aq-welcome .about-copy .body{ max-width:none; }
  .aq-welcome .framed-wrap{ height:100%; }
  .aq-welcome .framed{ aspect-ratio:auto; min-height:0; height:100%; }
  .aq-welcome .framed img.cover{ position:absolute; inset:0; }
}
/* Life "Crowns on for Christmas lunch" (Jon: "cuts the image short and doesnt show what it
   is"). The photo is re-cut wide, 1122x620, and its frame takes that same ratio at every
   width, so nothing is cropped by the frame: 100% of the cut shows at 390, 1536 and 1920. */
.fd-photo.aq-xmas{ aspect-ratio:1122/620; min-height:0; }

/* --- AQ.11 ROUND 6 (29 Sep 2026): ONE RULE FOR EVERY PHOTO-AND-COPY SECTION -----------
   Jon flagged the same fault three times (kitchen, home welcome, our-care "Getting to know
   someone"): a heading wider than its paragraphs, a photo far taller than the copy beside it,
   and dead space between the two. The per-section fixes (.aq-kitchen, .aq-welcome) are now
   one component-level rule for .about-grid, .feature-duo and .feesrow, from 1001px, the width
   at which all three actually go two-column (below it they stack; see the round-4 901px bug).
     - the copy is one 30rem measure: heading, paragraphs, quote card and lists share it;
     - the photo column is at most 38rem, and the pair is centred, so no dead gap opens up;
     - one house gap for all three components;
     - the photo takes the copy's height, tops and bottoms level (a framed photo keeps its
       offset gold frame, which follows the photo box). A photo with its own fixed ratio
       (.aq-xmas) and the Margate map keep their own heights and centre against the copy.
   PROMOTE UPSTREAM: this block replaces per-section spacing patches in every build. */
@media (min-width:1001px){
  .about-grid, .feature-duo, .feesrow{ column-gap:clamp(2.5rem,4.5vw,4.5rem); justify-content:center; }
  .about-grid, .feesrow, .feature-duo.flip{ grid-template-columns:minmax(0,30rem) minmax(0,38rem); }
  /* a framed about-grid photo is a square or portrait crop: a narrower column keeps faces
     and hands both in frame when the copy beside it is short */
  .about-grid:has(> .framed-wrap){ grid-template-columns:minmax(0,30rem) minmax(0,34rem); }
  .feature-duo:not(.flip){ grid-template-columns:minmax(0,38rem) minmax(0,30rem); }
  .about-copy h2, .about-copy .body, .fd-copy, .fd-copy h2, .fd-copy .body, .fd-copy .qnote,
  .fr-copy h2, .fr-copy .lede{ max-width:none; }
  .about-grid:has(> .framed-wrap), .feature-duo:not(:has(.aq-xmas)), .feesrow{ align-items:stretch; }
  .about-grid > .framed-wrap{ height:100%; }
  .about-grid .framed{ aspect-ratio:auto; min-height:0; height:100%; }
  .about-grid .framed img.cover{ position:absolute; inset:0; }
  .feature-duo .fd-photo:not(.aq-xmas){ aspect-ratio:auto; min-height:0; height:100%; position:relative; }
  .feature-duo .fd-photo:not(.aq-xmas) img.cover{ position:absolute; inset:0; }
}
@media (min-width:1001px){
  .feesrow .fr-copy .lede{ max-width:none; }
  .feesrow .fr-photo{ min-height:0; height:100%; }
}

/* --- AQ.12 ROUND 9 (8 Oct 2026): batch 2 photographs ---------------------------------
   The life-page inset pair carries a wide group photograph (two residents at either edge
   of the frame), which a 4:3 crop cuts in half. .aq-wide holds both figures at 3:2, so the
   pair stays even and every face stays in frame. */
.inset-duo.aq-wide .if-img{ aspect-ratio:3/2; }

/* --- AQ.13 ROUND 10 (8 Oct 2026): life page fixes ------------------------------------
   Christmas: the photo is the point of the section and the copy is short, so this one
   pair gives the photo the wider column (up to 46rem) and the copy a 24rem measure. The
   pair still centres through AQ.11's justify-content, and the frame keeps the cut's own
   ratio, so the whole table stays in view. */
@media (min-width:1001px){
  .feature-duo.aq-xmasrow{ grid-template-columns:minmax(0,46rem) minmax(0,24rem); }
}
/* Visiting doors: every row the same height, so the cards match in both the 2x2 and the
   row-of-four layouts and the footer hairlines sit level across all four. */
@media (min-width:561px){
  .sx-fourdoors.aq-visit{ grid-auto-rows:1fr; }
}