/* Inter (SIL Open Font License 1.1) — served to every visitor as the web
   stand-in for Helvetica Neue, which is licensed and Apple-only. Variable
   file, weights 100–900, so the guidelines' Light / Regular / Bold all render
   from one 47KB request. */
@font-face{
  font-family:"SageHaus Sans";
  src:url("../fonts/sagehaus-sans.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ============================================================
   SageHaus design system
   Palette is strictly the three approved brand colours
   (SageHaus Deep Green / Light Green / Bronze), their tints,
   and tints of black. Bronze is used sparingly, per 4.2.
   Type is Helvetica Neue with the Arial fallback from 5.1/5.2.
   ============================================================ */
:root{
  --deep:#4D644B;          /* SageHaus Deep Green 100% */
  --deep-90:#5E7359;
  --deep-70:#7F9179;
  --deep-50:#A6B2A5;
  --deep-30:#CAD1C9;
  --deep-10:#EDEFEC;
  --light:#A5BAA5;         /* SageHaus Light Green 100% */
  --light-50:#D2DCD2;
  --light-30:#E4EBE4;
  --light-10:#F6F8F6;
  --bronze:#C8834B;        /* SageHaus Bronze 100% — used sparingly */
  --bronze-ink:#A96B36;    /* darker bronze, for bronze set as text rather than as a rule */
  --bronze-30:#EEDACA;
  --ink:#14170F;           /* tint of black */
  --ink-70:#4F534B;
  --ink-50:#686C66;
  --paper:#FFFFFF;

  --shell:min(1280px,100% - 2 * var(--gut));
  --gut:clamp(20px,5vw,64px);
  --r:2px;

  --f-body:"SageHaus Sans","Helvetica Neue","HelveticaNeue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.16,.84,.28,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-weight:300;
  font-size:clamp(17px,.55vw + 15px,19px);line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{font-weight:300;margin:0;letter-spacing:-.02em;line-height:1.06}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
::selection{background:var(--light);color:var(--ink)}

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

.shell{width:var(--shell);margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--deep);color:#fff;padding:14px 22px}
.skip:focus{left:16px;top:16px}

/* ---------- type scale ---------- */
.display{font-size:clamp(2.75rem,8.2vw,7.25rem);line-height:.96;letter-spacing:-.035em}
.h2{font-size:clamp(2rem,4.2vw,3.65rem);letter-spacing:-.028em;line-height:1.04}
.h3{font-size:clamp(1.3rem,1.7vw,1.6rem);letter-spacing:-.015em;line-height:1.22}
.lede{font-size:clamp(1.12rem,1.35vw,1.4rem);line-height:1.62;color:var(--ink-70)}
.eyebrow{
  font-size:.75rem;font-weight:400;text-transform:uppercase;
  letter-spacing:.22em;color:var(--deep);margin:0 0 1.5rem;
  display:flex;align-items:center;gap:.85rem;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--bronze);flex:none}
.on-dark .eyebrow{color:var(--light-30)}
.on-dark .lede{color:var(--light-30)}
.small{font-size:.9rem;line-height:1.6;color:var(--ink-50)}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--deep);--fg:#fff;
  display:inline-flex;align-items:center;gap:.7rem;
  padding:1.05rem 1.9rem;background:var(--bg);color:var(--fg);
  text-decoration:none;font-size:1rem;font-weight:400;
  border:1px solid var(--bg);border-radius:var(--r);
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease);
  min-height:56px;
}
.btn:hover{background:transparent;color:var(--deep);transform:translateY(-2px)}
.btn .arw{transition:transform .45s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}
.btn--ghost{--bg:transparent;--fg:var(--ink);border-color:var(--deep-30)}
.btn--ghost:hover{background:var(--deep);color:#fff;border-color:var(--deep)}
.on-dark .btn{--bg:#fff;--fg:var(--deep);border-color:#fff}
.on-dark .btn:hover{background:transparent;color:#fff}
.on-dark .btn--ghost{--bg:rgba(20,23,15,.30);--fg:#fff;border-color:rgba(255,255,255,.62);backdrop-filter:blur(3px)}
.on-dark .btn--ghost:hover{background:#fff;color:var(--deep);border-color:#fff}

.link{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  font-size:1rem;color:var(--deep);padding-block:.35rem;
  border-bottom:1px solid var(--deep-30);transition:border-color .4s var(--ease),gap .4s var(--ease)
}
.link:hover{border-color:var(--bronze);gap:1rem}
/* .link is a standalone call to action - inline-flex, fixed at 1rem, with its own
   padding and rule. Dropped inside a sentence it breaks the line box and shrinks
   the address below the copy around it. This is the inline version: it inherits
   the size of whatever it sits in and underlines like text. */
.inlink{color:var(--deep);text-decoration:underline;text-underline-offset:.18em;
  text-decoration-thickness:1px;text-decoration-color:var(--deep-30);
  transition:text-decoration-color .35s var(--ease),color .35s var(--ease)}
.inlink:hover{color:var(--ink);text-decoration-color:var(--bronze)}
/* The same link on a dark band. --deep ink on deep green would be invisible, so the
   on-dark variant takes white with a half-strength rule under it - the underline still
   reads as a link without competing with the copy around it. */
.sec--deep .inlink,.on-dark .inlink{color:#fff;text-decoration-color:rgba(255,255,255,.5)}
.sec--deep .inlink:hover,.on-dark .inlink:hover{color:#fff;text-decoration-color:#F2D5B6}

/* ---------- header ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:90;
  padding:clamp(16px,1.8vw,26px) 0;
  transition:background .5s var(--ease),padding .5s var(--ease),box-shadow .5s var(--ease);
}
.hdr__in{display:flex;align-items:center;gap:clamp(16px,3vw,40px)}
.hdr__logo{flex:none;line-height:0}
/* Amend 05/10/26: "can the SageHaus logo be larger?" - up about 17% in both states.
   The ceiling is set by the nav, not by taste: the header is one flex row of logo,
   seven nav links and the Contact button, and the first width where they collide is
   just above 1024px. Verified by measuring the gap between the logo and the first nav
   link at every width from 900 to 1600 - see qc_header.js. */
.hdr__logo img{width:clamp(170px,14.6vw,208px);height:auto;transition:width .45s var(--ease)}
.hdr--solid .hdr__logo img{width:clamp(156px,12.9vw,187px)}
/* The brand pack supplies one lockup, in green. Over the hero that green sits on
   sky and disappears, so the reversed state is generated: brightness(0) makes every
   pixel black, invert(1) makes it white, and alpha is preserved. The shadow keeps it
   legible if the sky behind is bright. */
.hdr__logo .rev{display:block;
  filter:brightness(0) invert(1) drop-shadow(0 1px 5px rgba(20,23,15,.5))}
.hdr__logo .pos{display:none}
.nav{display:flex;gap:clamp(14px,1.9vw,30px);margin-left:auto;align-items:center}
.nav a{
  text-decoration:none;font-size:.95rem;color:rgba(255,255,255,.9);position:relative;
  padding:.4rem 0;transition:color .35s var(--ease)
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.hdr .btn{padding:.8rem 1.35rem;min-height:48px;font-size:.95rem}
.hdr:not(.hdr--solid):not(.hdr--locked) .btn{background:rgba(20,23,15,.28);color:#fff;border-color:rgba(255,255,255,.58);backdrop-filter:blur(3px)}
.hdr:not(.hdr--solid):not(.hdr--locked) .btn:hover{background:#fff;color:var(--deep);border-color:#fff}
.hdr--solid{background:rgba(255,255,255,.94);backdrop-filter:blur(14px) saturate(1.1);box-shadow:0 1px 0 var(--deep-10);padding-block:12px}
.hdr--solid .hdr__logo .rev{display:none}
.hdr--solid .hdr__logo .pos{display:block}
.hdr--solid .nav a{color:var(--ink)}
.hdr--solid .btn{--bg:var(--deep);--fg:#fff}
.hdr--solid .btn:hover{background:transparent;color:var(--deep)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:12px;cursor:pointer;color:#fff}
.hdr--solid .burger{color:var(--ink)}
.burger span{display:block;width:26px;height:1.5px;background:currentColor;margin:5px 0;transition:transform .4s var(--ease),opacity .3s}
body.menu-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:80;background:var(--deep);color:#fff;
  display:flex;flex-direction:column;justify-content:center;
  padding:100px var(--gut) 48px;gap:.2rem;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease);
  visibility:hidden;
}
body.menu-open .drawer{clip-path:inset(0 0 0 0);visibility:visible}
.drawer a{
  text-decoration:none;font-size:clamp(1.7rem,7vw,2.6rem);font-weight:300;letter-spacing:-.02em;
  padding:.42rem 0;border-bottom:1px solid rgba(255,255,255,.16);
  opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)
}
body.menu-open .drawer a{opacity:1;transform:none}
.drawer a:nth-child(1){transition-delay:.14s}.drawer a:nth-child(2){transition-delay:.19s}
.drawer a:nth-child(3){transition-delay:.24s}.drawer a:nth-child(4){transition-delay:.29s}
.drawer a:nth-child(5){transition-delay:.34s}.drawer a:nth-child(6){transition-delay:.39s}
.drawer a:nth-child(7){transition-delay:.44s}.drawer a:nth-child(8){transition-delay:.49s}
.drawer a:nth-child(9){transition-delay:.54s}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--deep);color:#fff;padding-bottom:clamp(48px,7vh,92px)}
.hero__art{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--deep)}
.hero__art img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);will-change:transform}
/* The scroll cue sits in the bottom-right corner, which is the one place the wedge
   below deliberately leaves at full brightness. Rather than darken the whole
   photograph to carry one small label, this is a soft pool of shade under the cue
   alone - about a fifth of the width, feathered to nothing. */
.hero__art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 42% at 100% 100%,rgba(20,23,15,.62) 0%,rgba(20,23,15,.34) 42%,rgba(20,23,15,0) 78%);
}
/* The scrim is shaped to the copy, not painted across the picture.

   ::before  a bar under the nav only.
   ::after   a wedge running left-to-right, multiplied by a vertical mask so it
             switches off above the headline. The result darkens the lower-left
             quadrant where the text lives and leaves the sky, the roofline and the
             whole right-hand side of the photograph untouched.

   Retuned 02/09 for the daylight hero. The dusk house was dark to begin with, so a
   narrow wedge carried the copy; this photograph has bright sky and sunlit grasses
   behind the same text. The fix was not a heavier wash but a wider one - holding the
   shade out to where the text column actually ends (~70%) before falling away - which
   reads lighter on the picture than raising the alpha would have.

   The stops are not guesswork: every white element is measured per glyph pixel against
   the rendered backdrop by qc_shotcontrast.js. Worst pixel 8.67:1 at 1440, 6.15:1 at
   390 - both clear of the 4.5:1 AA floor with room to spare. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,23,15,.78) 0,rgba(20,23,15,.60) 96px,rgba(20,23,15,.12) 180px,rgba(20,23,15,0) 240px);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(20,23,15,.86) 0%,rgba(20,23,15,.83) 40%,rgba(20,23,15,.78) 58%,rgba(20,23,15,.64) 70%,rgba(20,23,15,.38) 80%,rgba(20,23,15,.15) 90%,rgba(20,23,15,0) 98%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.52) 11%,#000 24%);mask-image:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.52) 11%,#000 24%);
}
.hero__in{position:relative;z-index:2;width:var(--shell);margin-inline:auto;padding-top:clamp(150px,24vh,250px)}
.hero h1{max-width:16ch}
/* the mask has to be taller than the line box or it clips descenders (g, y, comma) */
.hero h1 .w{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding:.1em .06em .26em;margin:-.1em -.06em -.26em;
}
.hero h1 .w i{display:inline-block;font-style:normal;transform:translateY(150%);transition:transform 1s var(--ease)}
.hero.in h1 .w i{transform:none}
.hero h1 .w:nth-of-type(2) i{transition-delay:.09s}
.hero h1 .w:nth-of-type(3) i{transition-delay:.18s}
.hero__body{max-width:54ch;margin-top:clamp(24px,3.2vw,40px);color:rgba(255,255,255,.9);font-size:clamp(1.05rem,1.2vw,1.28rem)}
.hero__tag{
  display:block;margin-top:1.7rem;font-size:clamp(1.15rem,1.5vw,1.5rem);
  color:#fff;font-weight:400;letter-spacing:.005em
}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,3.4vw,44px)}
.hero__fade{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hero.in .hero__fade{opacity:1;transform:none}
.hero.in .hero__body{transition-delay:.34s}
.hero.in .hero__cta{transition-delay:.46s}
.hero.in .hero__meta{transition-delay:.58s}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,48px);margin-top:clamp(40px,5vw,70px);
  padding-top:26px;border-top:1px solid rgba(255,255,255,.22);font-size:.92rem;color:rgba(255,255,255,.82)
}
.hero__meta b{font-weight:400;color:#fff}
.scrollcue{
  position:absolute;right:var(--gut);bottom:clamp(48px,7vh,92px);z-index:2;
  writing-mode:vertical-rl;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.92);display:flex;align-items:center;gap:12px
}
.scrollcue::after{content:"";width:1px;height:64px;background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0));animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding:clamp(76px,10vw,148px) 0}
/* --bronze-ink is set for bronze text on white; against the tint it drops to 4.06:1,
   under AA for anything small. Darken the token for the whole tinted section so every
   bronze word inside it clears 4.5:1 without each rule having to know where it sits. */
.sec--tint{background:var(--light-10);--bronze-ink:#8E5A2B}
.sec--deep{background:var(--deep);color:#fff}
.sec--deep .h2,.sec--deep p{color:#fff}
.grid{display:grid;gap:clamp(28px,4vw,64px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,90px);align-items:start}
.split--stretch{align-items:stretch}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .62s var(--ease),transform .62s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}

/* about */
.about__quote{
  margin:0;font-size:clamp(1.6rem,3.4vw,2.75rem);line-height:1.16;
  letter-spacing:-.024em;color:var(--deep);max-width:26ch
}
.about__quote span{color:var(--bronze)}

/* the title and standfirst above the film. Measure is held to ~62ch: the paragraph
   runs long and a full-shell line would be a poor read at this size. */
.filmintro{padding:0 0 clamp(30px,3.4vw,48px)}
.filmintro .lede{max-width:62ch;margin-top:clamp(16px,1.8vw,24px)}

/* the film as a wide band rather than a column-filler */
.media.filmband{aspect-ratio:21/9;width:100%}
@media (max-width:820px){ .media.filmband{aspect-ratio:4/3} }
.about__quote span{color:var(--bronze)}
.media{
  position:relative;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;background:var(--deep);
  display:flex;align-items:flex-end;padding:clamp(20px,2.6vw,34px);color:#fff;text-decoration:none;
  border:0;width:100%;cursor:pointer;font:inherit;text-align:left
}
/* the film is a YouTube iframe from 24/09/26; it fills the band the same way the
   <video> did, and the poster image stays beneath it */
.media > img,.media > video,.media > iframe{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border:0}
.media.playing{cursor:default}
.media.playing > iframe{z-index:2}
.media.playing .media__veil,.media.playing .media__lbl{opacity:0;pointer-events:none}
.media__veil,.media__lbl{transition:opacity .5s var(--ease)}
.media__veil{display:block;position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,23,15,0) 38%,rgba(20,23,15,.62) 100%)}
.media__lbl{position:relative;display:flex;align-items:center;gap:16px;font-size:1rem}
.play{
  display:grid;width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.7);flex:none;
  display:grid;place-items:center;transition:background .45s var(--ease),transform .45s var(--ease)
}
.media:hover .play{background:#fff;transform:scale(1.06)}
.media:hover .play svg{fill:var(--deep)}
.play svg{fill:#fff;transition:fill .45s var(--ease)}

/* pillars */
.pillar{border-top:1px solid var(--deep-30);padding-top:26px;position:relative}
.pillar__n{font-size:.78rem;letter-spacing:.2em;color:var(--bronze);margin-bottom:1.5rem;display:block}
.pillar h3{margin:1.4rem 0 .85rem}
.pillar p{font-size:1rem;color:var(--ink-70);line-height:1.7}
.pillar::after{content:"";position:absolute;top:-1px;left:0;width:0;height:1px;background:var(--deep);transition:width .8s var(--ease)}
.pillar.in::after{width:100%}
.sec--deep .pillar{border-color:rgba(255,255,255,.28)}
.sec--deep .pillar p{color:rgba(255,255,255,.84)}
.sec--deep .pillar__n{color:var(--light-30)}
.sec--deep .pillar::after{background:#fff}

/* communities */
.card{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%}
.card__img{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r);background:var(--light-30)}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card:hover .card__img img{transform:scale(1.06)}
.card__pill{
  display:block;position:absolute;top:16px;left:16px;z-index:2;background:rgba(255,255,255,.94);color:var(--deep);
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;padding:.5rem .85rem;border-radius:100px
}
.card__pill--soon{background:var(--deep);color:#fff}
.card h3{margin:22px 0 .5rem}
.card p{font-size:1rem;color:var(--ink-70)}
.card__more{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:.55rem;color:var(--deep);font-size:.95rem;border-bottom:1px solid var(--deep-30);padding-bottom:3px;transition:gap .4s var(--ease),border-color .4s var(--ease)}
.card:hover .card__more{gap:1rem;border-color:var(--bronze)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.26);border:1px solid rgba(255,255,255,.26);border-radius:var(--r);overflow:hidden;margin-top:clamp(40px,5vw,66px)}
.stat{background:var(--deep);padding:clamp(22px,2.6vw,34px)}
.stat b{display:block;font-weight:300;font-size:clamp(2rem,3.6vw,3.15rem);letter-spacing:-.03em;line-height:1;color:#fff}
.stat > span{display:block;margin-top:.7rem;font-size:.9rem;color:var(--light-30);line-height:1.5}

/* list */
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ticks li{position:relative;padding-left:34px;font-size:1.02rem;line-height:1.6}
.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;width:16px;height:8px;
  border-left:1.5px solid var(--bronze);border-bottom:1.5px solid var(--bronze);transform:rotate(-45deg)
}

.figs{display:grid;gap:clamp(12px,1.6vw,20px)}
.fig{position:relative;overflow:hidden;border-radius:var(--r);background:var(--light-30)}
.fig img{width:100%;height:100%;object-fit:cover;display:block}
.fig--tall{aspect-ratio:4/3}
.fig--wide{aspect-ratio:16/9}

/* news */
.post{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.post__img{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r)}
.post__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.post:hover .post__img img{transform:scale(1.06)}
.post__meta{display:flex;gap:14px;align-items:center;margin:20px 0 12px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-50)}
.post__meta i{font-style:normal;color:var(--deep)}
.post h3{font-size:clamp(1.15rem,1.5vw,1.42rem);line-height:1.24;margin-bottom:.6rem}
.post p{font-size:.98rem;color:var(--ink-70)}
.post__more{margin-top:auto;padding-top:18px;color:var(--deep);font-size:.95rem;display:inline-flex;gap:.55rem;transition:gap .4s var(--ease)}
.post:hover .post__more{gap:1rem}

/* cta */
.cta{position:relative;overflow:hidden;background:var(--deep);color:#fff;padding:clamp(80px,11vw,160px) 0}
.cta__art{position:absolute;inset:0}
.cta__art img{width:100%;height:100%;object-fit:cover}
/* The scrim was tuned for the dark stock woodland path that used to sit here. The
   client's own Woodland Walk photograph is a much brighter forest, and the old mid
   green (45,58,44) caps how much contrast a wash of it can buy at any alpha - so
   the tint moves to the darker green the panels use, at a slightly lower alpha.
   Net effect: more of the photograph reads through than before, and the copy on it
   goes from 4.64:1 to comfortably clear on a phone. */
.cta__art::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,42,30,.80),rgba(31,42,30,.72))}
.cta__in{position:relative;z-index:2;text-align:center}
.cta h2{max-width:20ch;margin-inline:auto}
.cta p{max-width:58ch;margin-inline:auto;color:#fff}
.cta__wide{max-width:none}

/* footer */
.ftr{background:var(--ink);color:rgba(255,255,255,.78);padding:clamp(64px,8vw,110px) 0 40px;font-size:.95rem}
.ftr__top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
/* Same story as the header: the only lockup is green, and on the near-black footer
   its wordmark measures 2.8:1 - visible but not readable. Reversed to white the same
   way, from the same file. No shadow needed on a flat dark ground. */
.ftr__logo{width:116px;height:auto;margin-bottom:28px;
  filter:brightness(0) invert(1);opacity:.92}
.ftr h4{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--light);margin-bottom:1.2rem;font-weight:400}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.ftr a{text-decoration:none;transition:color .35s var(--ease)}
.ftr a:hover{color:var(--light)}
.ftr__bot{
  margin-top:clamp(44px,6vw,80px);padding-top:26px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;font-size:.85rem;color:rgba(255,255,255,.55)
}

/* progress */
.prog{position:fixed;top:0;left:0;height:2px;background:var(--bronze);z-index:95;width:0}

/* ---------- icons ---------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{
  width:var(--ico,26px);height:var(--ico,26px);flex:none;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.badge{
  width:clamp(50px,4.2vw,60px);aspect-ratio:1;border-radius:50%;flex:none;align-self:flex-start;
  display:grid;place-items:center;background:var(--light-30);color:var(--deep);
  transition:background .55s var(--ease),color .55s var(--ease),transform .55s var(--ease);
}
.on-dark .badge,.sec--deep .badge{background:rgba(255,255,255,.13);color:#fff}
.card-lift:hover .badge{transform:translateY(-3px) scale(1.05);background:var(--deep);color:#fff}
.on-dark .card-lift:hover .badge{background:#fff;color:var(--deep)}

/* ---------- intrinsic grids: sized by content, not by breakpoint ---------- */
.auto{display:grid;gap:clamp(26px,3vw,48px);
      grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.auto--sm{grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr))}
.auto--lg{grid-template-columns:repeat(auto-fit,minmax(min(100%,23rem),1fr))}

/* ---------- feature card ---------- */
.feat{display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:1.1rem 1.35rem}
.feat__body{flex:1 1 14rem;min-width:0}
.feat h3{font-size:clamp(1.15rem,1.5vw,1.42rem);letter-spacing:-.018em;line-height:1.2}
.feat p{font-size:1rem;color:var(--ink-70);line-height:1.7;text-wrap:pretty}
.on-dark .feat p,.sec--deep .feat p{color:rgba(255,255,255,.84)}

/* ---------- fact row (own front door / garden / driveway / bills) ---------- */
.facts{display:grid;gap:2px;background:var(--deep-10);border-block:1px solid var(--deep-10);
       grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.fact{background:var(--paper);padding:clamp(20px,2.2vw,28px) 4px;display:flex;gap:.9rem;align-items:center}
.fact span{font-size:1rem;line-height:1.4;text-wrap:balance}
.sec--tint .fact{background:var(--light-10)}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none}
.chips li{
  display:inline-flex;align-items:center;gap:.6rem;padding:.72rem 1.15rem;
  border:1px solid var(--deep-30);border-radius:100px;font-size:.98rem;line-height:1.2;
  transition:border-color .45s var(--ease),background .45s var(--ease)
}
.chips li:hover{border-color:var(--deep);background:var(--paper)}
.chips .ico{--ico:19px;color:var(--deep)}

/* ---------- service list ---------- */
.svc{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.svc li{display:flex;align-items:flex-start;gap:clamp(16px,2vw,26px);padding:clamp(22px,2.4vw,30px) 0;border-top:1px solid var(--deep-30)}
.svc li:last-child{border-bottom:1px solid var(--deep-30)}
.svc h3{font-size:1.12rem;margin-bottom:.4rem;letter-spacing:-.012em}
.svc p{font-size:1rem;color:var(--ink-70);line-height:1.68;text-wrap:pretty}
.svc .badge{width:clamp(44px,3.4vw,52px)}

/* ---------- biophilic ---------- */
.bio__q{
  font-size:clamp(1.3rem,2.3vw,2rem);line-height:1.32;letter-spacing:-.02em;
  max-width:34ch;text-wrap:pretty
}
.bio__cite{display:block;margin-top:1.2rem;font-size:.9rem;color:var(--light-30);letter-spacing:.02em}
.bens{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.bens li{display:flex;gap:.9rem;align-items:flex-start;font-size:1.02rem;line-height:1.5}
.bens .ico{--ico:21px;margin-top:.18em;color:var(--light)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:0;margin-top:clamp(32px,4vw,52px)}
.faq details{border-top:1px solid var(--deep-30)}
.faq details:last-of-type{border-bottom:1px solid var(--deep-30)}
.faq summary{
  display:flex;gap:1.2rem;align-items:flex-start;justify-content:space-between;
  padding:clamp(22px,2.4vw,30px) 0;cursor:pointer;list-style:none;
  font-size:clamp(1.08rem,1.5vw,1.34rem);line-height:1.3;letter-spacing:-.015em;
  transition:color .4s var(--ease)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--ink)}
.faq summary .ico{--ico:22px;color:var(--deep);margin-top:.15em;transition:transform .45s var(--ease)}
.faq details[open] summary .ico{transform:rotate(45deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq details[open] .faq__a{grid-template-rows:1fr}
.faq__a > div{overflow:hidden}
.faq__a p{margin:0;max-width:70ch;font-size:1.02rem;line-height:1.75;color:var(--ink-70);text-wrap:pretty}
.faq__a p + p{margin-top:1.1rem}
.faq__a > div > :last-child{padding-bottom:clamp(24px,2.6vw,34px)}
.faq__a strong{font-weight:400;color:var(--ink)}

/* ---------- disclosure list ----------
   Long runs of title + paragraph read as a wall. This shows the titles as a
   scannable index and opens the detail on demand - the same mechanism as the FAQ,
   so nothing is deleted and the page is a third of the height. */
/* align-content:start - as a stretched grid child the rows would otherwise share out
   the extra height and each row would double in depth */
.disc{list-style:none;margin:0;padding:0;display:grid;gap:0;align-content:start}
.disc > li{border-top:1px solid var(--deep-30)}
.disc > li:last-child{border-bottom:1px solid var(--deep-30)}
.disc summary{
  display:flex;align-items:center;gap:clamp(13px,1.5vw,20px);
  padding:clamp(17px,1.9vw,23px) 0;cursor:pointer;list-style:none;
  font-size:clamp(1.04rem,1.35vw,1.2rem);line-height:1.3;letter-spacing:-.015em;
  transition:color .4s var(--ease)
}
.disc summary::-webkit-details-marker{display:none}
/* --deep is lighter than the body ink, so colouring on hover greyed the title
   out instead of strengthening it. The row signals itself by moving. */
.disc summary:hover{color:var(--ink)}
.disc summary > .ico{--ico:22px;color:var(--bronze);flex:none}
.disc__t{flex:1 1 auto;min-width:0;text-wrap:balance}
.disc__x{--ico:19px;color:var(--deep);flex:none;transition:transform .45s var(--ease)}
.disc details[open] .disc__x{transform:rotate(45deg)}
.disc__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.disc details[open] .disc__a{grid-template-rows:1fr}
.disc__a > div{overflow:hidden}
.disc__a p{
  margin:0;max-width:68ch;font-size:1rem;line-height:1.72;color:var(--ink-70);
  text-wrap:pretty;padding:clamp(4px,.6vw,8px) 0 clamp(22px,2.6vw,32px);
  padding-left:calc(clamp(13px,1.5vw,20px) + 22px)
}
@media (max-width:560px){ .disc__a p{padding-left:0} }

.on-dark .disc > li,.gband .disc > li{border-color:rgba(255,255,255,.24)}
.on-dark .disc > li:last-child,.gband .disc > li:last-child{border-bottom-color:rgba(255,255,255,.24)}
.on-dark .disc__a p,.gband .disc__a p{color:rgba(255,255,255,.84)}
.on-dark .disc__x,.gband .disc__x{color:#fff}
.on-dark .disc summary > .ico,.gband .disc summary > .ico{color:rgba(255,255,255,.72)}
.on-dark .disc summary:hover,.gband .disc summary:hover{color:#fff}


/* ---------- disclosure rows: hover and open states ----------
   No fill. A tinted block spanning the row read as a panel floating over the
   hairline grid rather than as a highlighted row - worst on the green band, where a
   lighter rectangle sat hard against the rules. The row now signals itself by moving
   instead: the whole line steps right, the icon warms and grows, and the rule beneath
   turns bronze from the left. Nothing overlaps the grid, so nothing can look
   misplaced. */
.disc > li,.faq details{position:relative}
.disc > li:hover,.disc > li:focus-within,
.faq details:hover,.faq details:focus-within{z-index:2}
.disc summary,.faq summary{position:relative}

/* the rule under the row, drawn in bronze from the left */
.disc summary::after,.faq summary::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--bronze);transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.22,1,.36,1)
}
.disc summary:hover::after,.faq summary:hover::after,
.disc summary:focus-visible::after,.faq summary:focus-visible::after,
.disc details[open] summary::after,.faq details[open] summary::after{transform:scaleX(1)}

/* the row itself steps right */
.disc summary > .ico:first-child,.disc__t,.disc__x{
  transition:transform .5s cubic-bezier(.22,1,.36,1),color .4s var(--ease)}
.disc summary:hover > .ico:first-child,
.disc summary:focus-visible > .ico:first-child{transform:translateX(6px) scale(1.14)}
.disc summary:hover .disc__t,
.disc summary:focus-visible .disc__t{transform:translateX(10px)}
.disc summary:hover > .ico:first-child{color:var(--bronze-ink)}
.disc summary:hover .disc__x{transform:translateX(-4px)}

.disc details[open] summary{color:var(--deep)}
.on-dark .disc details[open] summary,.gband .disc details[open] summary{color:#fff}
.on-dark .disc summary::after,.gband .disc summary::after{background:var(--light)}
.on-dark .disc summary:hover > .ico:first-child,
.gband .disc summary:hover > .ico:first-child{color:#fff}

.disc summary:focus-visible,.faq summary:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  .disc summary::after,.faq summary::after,
  .disc__t,.disc__x,.disc summary > .ico:first-child{transition:none}
  .disc summary:hover .disc__t,.disc summary:hover .disc__x,
  .disc summary:hover > .ico:first-child{transform:none}
}

/* ---------- misc modern touches ---------- */
h1,h2,.h2,.h3,.display{text-wrap:balance}
.lede,.pillar p,.card p,.post p{text-wrap:pretty}
[id]{scroll-margin-top:clamp(96px,12vh,132px)}
.rule{height:1px;background:var(--deep-10);border:0;margin:0}

/* ---------- numbered editorial steps ---------- */
.hold{align-self:start}
@media (min-width:1081px){ .hold{position:sticky;top:clamp(120px,15vh,164px)} }

.steps{list-style:none;margin:0;padding:0}
.steps li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.2vw,32px);
  padding:clamp(26px,3vw,42px) 0;border-top:1px solid var(--deep-30);
  transition:padding-left .55s var(--ease)
}
.steps li:last-child{border-bottom:1px solid var(--deep-30)}
.steps li:hover{padding-left:10px}
.steps__n{font-size:.74rem;letter-spacing:.2em;color:var(--deep);padding-top:.7em;font-variant-numeric:tabular-nums}
.steps h3{
  display:flex;align-items:center;gap:.8rem;
  font-size:clamp(1.28rem,1.9vw,1.72rem);letter-spacing:-.022em;line-height:1.15;margin-bottom:.65rem
}
.steps h3 .ico{--ico:clamp(24px,2vw,29px);color:var(--deep);flex:none}
.steps h3 .ico{transition:color .5s var(--ease)}
.steps p{font-size:1.04rem;line-height:1.7;color:var(--ink-70);max-width:54ch;text-wrap:pretty}

/* ---------- spec band: icon over label, hairline dividers ---------- */
/* compact icon + label + one-liner grid, for sitting beside a photograph */
/* figure carries a 40px UA inline margin that silently pushes grid and flex
   items out of their column - reset it once, here. */
figure{margin:0}
.kit{list-style:none;margin:0;padding:0;display:grid;gap:clamp(16px,1.8vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.kit li{display:flex;gap:.85rem;align-items:flex-start}
.kit .ico{width:22px;height:22px;flex:none;color:var(--deep);margin-top:.15rem}
.kit b{display:block;font-weight:500;letter-spacing:-.012em;line-height:1.25}
.kit span{display:block;margin-top:.3rem;font-size:.94rem;line-height:1.45;color:var(--ink-70)}
.spec{border-top:1px solid var(--deep-30);border-bottom:1px solid var(--deep-30)}
.spec__hd{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-50);padding:clamp(18px,2vw,24px) 0 0}
.spec ul{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr))
}
.spec li{
  display:flex;flex-direction:column;gap:.85rem;
  padding:clamp(24px,2.6vw,34px) clamp(14px,1.6vw,22px) clamp(24px,2.6vw,34px) 0;
  font-size:1rem;line-height:1.42;text-wrap:pretty;position:relative
}
.spec li + li{padding-left:clamp(14px,1.6vw,22px)}
.spec li + li::before{
  content:"";position:absolute;left:0;top:clamp(20px,2.2vw,28px);bottom:clamp(20px,2.2vw,28px);
  width:1px;background:var(--deep-10)
}
.spec .ico{--ico:27px;color:var(--deep)}

/* stacked variant, for when a spec list sits in a half-width column */
.spec--one ul{grid-template-columns:1fr}
.spec--one li{flex-direction:row;align-items:center;gap:clamp(14px,1.6vw,20px);
  padding:clamp(15px,1.7vw,20px) 0}
.spec--one li + li{padding-left:0;border-top:1px solid var(--deep-10)}
.spec--one li + li::before{display:none}
.spec--one .ico{--ico:23px;flex:none}

/* two equal columns that stack on narrow screens.
   One column carries a standfirst line and the other does not, so left to itself the
   second list starts a line lower than the first. Subgrid puts heading, standfirst
   and list on shared rows, so both lists begin on the same line whether or not the
   column above them is filled. */
.twin{display:grid;align-items:start;
  column-gap:clamp(32px,4vw,64px);row-gap:clamp(32px,4vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.twin__col{display:flex;flex-direction:column}
.twin__col > .h3{margin-bottom:clamp(18px,2vw,26px)}
.twin__note{margin:0 0 clamp(18px,2vw,24px);color:var(--ink-70)}
.twin__fig{position:relative;margin:0 0 clamp(20px,2.4vw,30px);aspect-ratio:4/3;
  overflow:hidden;border-radius:var(--r);background:var(--light-30)}
.twin__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.twin__col:hover .twin__fig img{transform:scale(1.04)}

@media (min-width:860px){
  @supports (grid-template-rows:subgrid){
    /* four shared rows now - picture, title, standfirst, list - so both columns
       line up whether or not a column has a standfirst */
    .twin{grid-template-rows:auto auto auto auto;row-gap:clamp(14px,1.6vw,20px)}
    .twin__col{display:grid;grid-row:1 / span 4;grid-template-rows:subgrid;align-content:start}
    .twin__col > .twin__fig{grid-row:1;margin-bottom:clamp(6px,1vw,12px)}
    .twin__col > .h3{grid-row:2;margin-bottom:0}
    .twin__col > .twin__note{grid-row:3;margin:0}
    .twin__col > .spec{grid-row:4;align-self:start}
  }
}

/* ---------- paired rows: media stretches to match its text exactly ---------- */
.duo{
  display:grid;gap:clamp(26px,3.6vw,66px);align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr))
}
.duo + .duo{margin-top:clamp(36px,4.4vw,72px)}
.duo__media{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--light-30);
  min-height:clamp(300px,32vw,470px);margin:0
}
/* absolute so the photo takes its height from the row, not from its own aspect ratio -
   the media column then always matches the height of the text beside it */
.duo__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.duo__body{align-self:center;max-width:56ch}

/* a figure that fills whatever height its column ends up being */
.fill{position:relative;flex:1 1 auto;width:100%;aspect-ratio:16/10;min-width:0;min-height:0;overflow:hidden;
  border-radius:var(--r);background:var(--light-30);margin:0}
.fill img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* inside a stretched split the picture should finish level with the column beside it.
   aspect-ratio would fix its height and leave one side short, so let flex give it the
   remaining space instead and keep a floor so it never collapses on a short neighbour. */
@media (min-width:761px){
  .split--stretch .fill{aspect-ratio:auto;min-height:clamp(200px,16vw,280px)}
}
.duo__body h3{margin-bottom:1.1rem}
@media (min-width:1081px){ .duo--flip .duo__media{order:2} }

/* ---------- communities: one feature + compact siblings ---------- */
.vfeat{
  display:grid;gap:0;align-items:stretch;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));
  background:var(--paper);border:1px solid var(--deep-10);border-radius:var(--r);
  overflow:hidden;text-decoration:none;color:inherit;
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease)
}
.vfeat:hover{border-color:var(--deep-30);box-shadow:0 26px 60px -40px rgba(20,23,15,.45)}
.vfeat__media{position:relative;overflow:hidden;min-height:clamp(250px,26vw,400px);background:var(--light-30)}
.vfeat__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.vfeat:hover .vfeat__media img{transform:scale(1.05)}
.vfeat__body{
  padding:clamp(28px,3.2vw,52px);display:flex;flex-direction:column;
  justify-content:center;gap:clamp(14px,1.5vw,20px)
}
.vfeat__body h3{font-size:clamp(1.6rem,2.6vw,2.35rem);letter-spacing:-.028em;line-height:1.06}
.vfeat__body p{color:var(--ink-70);max-width:46ch}

.status{
  display:inline-flex;align-items:center;gap:.6rem;font-size:.74rem;
  letter-spacing:.19em;text-transform:uppercase;color:var(--deep)
}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bronze);flex:none}
.status--live::before{background:var(--deep);box-shadow:0 0 0 4px var(--light-30)}

.meta{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;margin:0;padding:0;list-style:none}
.meta li{display:inline-flex;align-items:center;gap:.55rem;font-size:.97rem;color:var(--ink-70)}
.meta .ico{--ico:20px;color:var(--deep);flex:none}

.vgrid{display:grid;gap:clamp(16px,1.7vw,22px);margin-top:clamp(16px,1.7vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.vcard{
  /* media row takes the slack, so cards match height without leaving dead space
     under the shorter descriptions - the sparse ones simply get a bigger photo */
  display:grid;grid-template-rows:minmax(0,1fr) auto;text-decoration:none;color:inherit;
  border:1px solid var(--deep-10);border-radius:var(--r);overflow:hidden;background:var(--paper);
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease)
}
.vcard:hover{border-color:var(--deep-30);box-shadow:0 20px 44px -34px rgba(20,23,15,.45)}
.vcard__media{position:relative;min-height:clamp(180px,15vw,225px);overflow:hidden;background:var(--light-30)}
.vcard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.vcard:hover .vcard__media img{transform:scale(1.06)}
.vcard__body{padding:clamp(20px,2.1vw,28px);display:flex;flex-direction:column;gap:.7rem}
.vcard__body h3{font-size:clamp(1.12rem,1.5vw,1.34rem);letter-spacing:-.018em}
.vcard__body p{font-size:.98rem;color:var(--ink-70)}
.vcard__more{padding-top:.5rem;display:inline-flex;align-items:center;gap:.5rem;
  font-size:.95rem;color:var(--deep);transition:gap .45s var(--ease)}
.vcard:hover .vcard__more{gap:.95rem}

/* ---------- wide section band ---------- */
.band{position:relative;overflow:hidden;border-radius:var(--r);margin:0;
  aspect-ratio:21/9;background:var(--light-30)}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:820px){ .band{aspect-ratio:4/3} }
/* a letterbox source, shown at its own shape so the subject is not cropped away */
.band--wide{aspect-ratio:1600/597}
@media (max-width:820px){ .band--wide{aspect-ratio:16/9} }

/* ---------- tiled inclusion grid ---------- */
.incl{
  list-style:none;margin:0;padding:0;display:grid;gap:1px;
  /* the container is paper, not tint: these lists run to 11 items, which never
     fills the last row evenly, and a tinted container turns the leftover cell
     into a grey block. The hairlines come from each cell's outline instead, so
     an empty trailing cell is simply invisible. */
  background:var(--paper);border:1px solid var(--deep-10);border-radius:var(--r);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr))
}
.incl li{
  background:var(--paper);padding:clamp(22px,2.3vw,30px);outline:1px solid var(--deep-10);
  display:flex;gap:.9rem;align-items:flex-start;font-size:1rem;line-height:1.5;text-wrap:pretty
}
.incl .ico{--ico:24px;color:var(--deep);flex:none;margin-top:.08em}

/* ---------- definition panels + deep-green sub-band ---------- */
.defs{display:grid;gap:clamp(16px,1.8vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr))}
.def{
  background:var(--paper);border:1px solid var(--deep-10);border-radius:var(--r);
  padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:1rem;
  transition:border-color .5s var(--ease)
}
.def:hover{border-color:var(--deep-30)}
.def h3{font-size:clamp(1.2rem,1.7vw,1.5rem);letter-spacing:-.02em}
.def p{color:var(--ink-70);font-size:1.02rem;line-height:1.7}

.gband{
  background:var(--deep);color:#fff;border-radius:var(--r);
  padding:clamp(32px,4.2vw,66px)
}
/* the hairline list is used on light and dark grounds alike - one override so it
   never has to be patched per section */
.on-dark .svc li,.gband .svc li{border-color:rgba(255,255,255,.24)}
.on-dark .svc li:last-child,.gband .svc li:last-child{border-bottom-color:rgba(255,255,255,.24)}
.on-dark .svc p,.gband .svc p{color:rgba(255,255,255,.84)}
.on-dark .svc .badge,.gband .svc .badge{background:rgba(255,255,255,.12);color:#fff}
.gband .rule{background:rgba(255,255,255,.24)}
.gband__end{
  font-size:clamp(1.35rem,2.4vw,2.05rem);line-height:1.18;letter-spacing:-.024em;
  max-width:22ch;margin:0
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav{display:none}
  .hdr .btn{display:none}
  .burger{display:block}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .ftr__top{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1080px){
  /* The copy fills the width here, so there is no clear side to leave alone - the wash
     has to run the whole way down and the only question is how heavy.

     Retuned 06/10 with the lunch photograph. The old stops (.86 / .90 / .93 below the
     headline) were set when the hero was a house, where losing the lower two thirds of
     the picture cost nothing. This photograph was chosen for the four people in it, and
     at those stops you could not see them: the phone showed a dark green panel with a
     faint shape behind it. The measured headroom paid for the fix - the copy was sitting
     at 12.02:1 against a 4.5:1 floor, so better than half the wash was doing no work for
     legibility and all of it was hiding the picture. */
  .hero::before{display:none}
  .hero::after{background:linear-gradient(180deg,rgba(20,23,15,.52) 0,rgba(20,23,15,.26) 11%,rgba(20,23,15,.46) 19%,rgba(20,23,15,.62) 27%,rgba(20,23,15,.66) 44%,rgba(20,23,15,.70) 100%);-webkit-mask-image:none;mask-image:none}
  .hero__art img{object-position:62% 58%}
}
@media (max-width:820px){
  .g-3,.g-2{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .scrollcue{display:none}
  .hero{min-height:92svh}
}
@media (max-width:520px){
  .g-4{grid-template-columns:1fr}
  .ftr__top{grid-template-columns:1fr}
  .hero__meta{gap:12px;flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv,.hero__fade{opacity:1;transform:none}
  .hero h1 .w i{transform:none}
}
@media print{.hdr,.drawer,.prog,.scrollcue{display:none}}

/* ============================================================
   MULTI-PAGE COMPONENTS
   ============================================================ */

/* Interior page hero. Shorter than the home hero - the picture is a band
   under the title rather than a full-bleed backdrop, so no scrim is needed
   and the photography stays at full brightness. */
.phero{padding:clamp(140px,17vh,210px) 0 0}
.phero__in{width:var(--shell);margin-inline:auto}
.phero h1{max-width:15ch;margin:0}
.phero__lede{max-width:58ch;margin-top:clamp(20px,2.4vw,30px);font-size:clamp(1.05rem,1.2vw,1.28rem);line-height:1.55;color:var(--ink-70)}
.phero__band{width:var(--shell);margin:clamp(40px,5vw,72px) auto 0;position:relative;
  aspect-ratio:21/9;min-width:0;overflow:hidden;border-radius:var(--r);background:var(--deep-10)}
.phero__band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:820px){.phero__band{aspect-ratio:3/2}}

/* Home-page section intro: short copy beside a photograph, sides alternating.
   Used for Our Communities / Lifestyle / Care / AgeTech, each linking on to
   its own page. */
.pitch{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
  gap:clamp(28px,4vw,72px);align-items:center}
.pitch__body{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);min-width:0}
.pitch__body p{margin:0;max-width:46ch}
.pitch__media{position:relative;width:100%;aspect-ratio:4/3;min-width:0;overflow:hidden;
  border-radius:var(--r);background:var(--deep-10)}
.pitch__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform 1.1s var(--ease)}
.pitch:hover .pitch__media img{transform:scale(1.06)}
.pitch--flip .pitch__media{order:-1}
@media (max-width:760px){.pitch--flip .pitch__media{order:0}}
.pitch .link{align-self:flex-start;margin-top:.35rem}

/* Masterplan. Unlike the photography, a site plan must be seen whole - it is
   contained inside its panel rather than cropped to fill one. */
/* The plan column is wider than its text column, but only while there are two
   columns - scoped to a min-width so the stacked layout is never overridden by
   an inline ratio. */
@media (min-width:821px){
  .split--plan{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
.plan{width:100%;background:var(--deep-10);border:1px solid var(--deep-30);border-radius:var(--r);
  padding:clamp(10px,1.1vw,16px);display:grid;place-items:center;margin:0}
/* width drives the size so the plan is as large as the column allows, capped at
   its natural width so it is never upscaled into mush */
.plan img{display:block;width:100%;max-width:1170px;height:auto;border-radius:1px}
.plan figcaption{margin-top:clamp(12px,1.4vw,18px);font-size:.88rem;line-height:1.5;
  color:var(--ink-50);max-width:62ch;text-align:center}

/* About page - directors */
.team{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,2.4vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.team li{background:var(--paper);border:1px solid var(--deep-10);border-radius:var(--r);
  padding:clamp(24px,2.6vw,34px);display:flex;flex-direction:column;gap:.65rem}
.team .avatar{width:56px;height:56px;border-radius:50%;background:var(--deep-10);color:var(--deep);
  display:grid;place-items:center;font-size:1.02rem;letter-spacing:.02em;flex:none}
.team b{font-weight:500;letter-spacing:-.014em;font-size:1.06rem}
.team span.role{font-size:.9rem;color:var(--ink-50)}

/* ---------- section head: rule + title, standfirst alongside ----------
   The title column was much shorter than the text beside it, leaving a void under
   the heading. Bottom-aligning the two closes it, and the rule gives the title
   something to sit on. */
.sechd{display:grid;gap:clamp(24px,4vw,72px);align-items:start;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.sechd > :first-child{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);
  align-self:start}
/* the title column carries a supporting paragraph, so the two columns fill each other
   out instead of leaving a well of empty ground under a one-line heading */
.sechd--wide{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
.sechd__note{margin-top:clamp(20px,2.4vw,30px);max-width:44ch;
  padding-top:clamp(20px,2.4vw,30px);border-top:1px solid var(--deep-30);
  color:var(--ink-70);font-size:1rem;line-height:1.7}
.on-dark .sechd__note{border-top-color:rgba(255,255,255,.24);color:rgba(255,255,255,.84)}
.sechd--wide .statement{max-width:none}
/* The statement used to lead on mobile - it was one short display figure, and putting
   it above the heading made a strong opening. From 05/10/26 it carries sixty words of
   group description instead, and a paragraph that long arriving before its own heading
   reads as though the heading has been orphaned. It now follows the heading, as it
   does on desktop. */
@media (max-width:760px){.sechd--wide{grid-template-columns:1fr}
  .sechd--wide .statement{max-width:none;order:-1}
  .sechd--wide .sechd__note{max-width:none}}
.sechd .h2,.sechd h2{margin:0}
.sechd__rule{width:56px;height:2px;background:var(--bronze);border:0;margin:0}
.sechd p{margin:0}
@media (max-width:760px){.sechd{grid-template-columns:1fr;align-items:start}}

/* the quantities picked out of a sentence by colour alone - no words added or moved,
   and no size change, so the line rhythm is untouched. (.fig is already the image
   figure class, hence .qty.) */
.qty{color:var(--bronze-ink);white-space:nowrap}
/* Bronze is an ink for light backgrounds. On the deep green band it measures
   1.49:1 against the panel - the figures it is meant to emphasise were the least
   legible words in the sentence. This is the same hue lifted until it clears AA
   on that green (4.62:1) while still reading as a highlight beside white. */
.sec--deep .qty,.on-dark .qty{color:#F2D5B6}

/* Who We Are, rebuilt 05/10/26 for the group copy. The lead paragraph runs at a
   comfortable measure under the display statement; the two partner companies sit side
   by side beneath it because they are peers and reading them as one column would bury
   the second. Below 820px everything stacks. */
.who{margin-top:clamp(40px,5vw,72px);padding-top:clamp(36px,4.4vw,64px);
  border-top:1px solid rgba(255,255,255,.22);display:grid;gap:clamp(28px,3.4vw,52px)}
.who__lead p{max-width:78ch}
.who__pair{display:grid;gap:clamp(28px,3.4vw,52px)}
@media (min-width:820px){.who__pair{grid-template-columns:1fr 1fr}}
.who__h{margin:0 0 .6rem;font-size:clamp(1.05rem,1.35vw,1.22rem);letter-spacing:-.01em;
  color:#fff;font-weight:600}
.who p{color:rgba(255,255,255,.88);margin:0}
/* the group block runs two paragraphs; without this they close up into one slab */
.who p + p{margin-top:clamp(14px,1.5vw,20px)}
/* Partner logos beside the two "About …" headings. Each sits on a light chip rather
   than straight on the green: Boom publishes a reversed logo and Aldenham does not, and
   inverting someone else's mark is their decision, not ours - so both appear in their
   own colours and the pair stays consistent. The chip is sized by height so two logos
   of different proportions still read as the same weight. */
.who__h--logo{display:flex;align-items:center;gap:.7em;flex-wrap:wrap}
.who__mark{display:inline-flex;align-items:center;justify-content:center;
  background:var(--paper,#F7F1E9);border-radius:3px;padding:.55em .8em;
  height:3.4em;box-sizing:border-box;flex:none;
  transition:transform .35s var(--ease)}
.who__mark img{display:block;height:100%;width:auto;max-width:13rem;object-fit:contain}
.who__mark:hover{transform:translateY(-2px)}
/* on the deep green the figures have to read as brighter than the sentence around
   them, not dimmer - a warm cream does that where the sage green read as greyed out */
.on-dark .qty{color:#F0D8BE}

/* ---------- team roster ----------
   Built for portraits. Each member is a 4:5 well with the name beneath; drop an
   <img> into the well and it takes over, otherwise the initials stand in. Adding
   photographs later changes no CSS and no layout - only the markup inside the well.
   Hover lifts the card, warms the well and draws a bronze rule under the name. */
.roster{list-style:none;margin:0;padding:0;display:grid;
  gap:clamp(28px,3.4vw,52px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr))}
/* portrait beside the words, so a bio has somewhere to go */
.roster li{display:grid;gap:clamp(18px,2.2vw,30px);align-items:start;
  grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}
@media (max-width:460px){.roster li{grid-template-columns:1fr}}

.mbr__port{
  position:relative;display:block;aspect-ratio:4/5;overflow:hidden;
  border-radius:var(--r);background:var(--light-10);
  border:1px solid var(--deep-10);
  display:grid;place-items:center;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),background .6s var(--ease)
}
.mbr__port img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease)}
.mbr__ini{
  font-weight:300;font-size:clamp(2.6rem,4.6vw,3.9rem);line-height:.86;
  letter-spacing:-.05em;color:var(--bronze-ink);
  transition:transform .6s var(--ease),opacity .5s var(--ease)
}
.mbr__port:has(img) .mbr__ini{display:none}
.roster li:hover .mbr__port{transform:translateY(-6px);background:#F7F1E9;
  border-color:var(--bronze-30);box-shadow:0 26px 50px -34px rgba(20,23,15,.42)}
.roster li:hover .mbr__port img{transform:scale(1.05)}
.roster li:hover .mbr__ini{transform:scale(1.06)}

.mbr__meta{display:flex;flex-direction:column;gap:.4rem;
  padding-top:clamp(12px,1.4vw,16px);border-top:1px solid var(--deep-30);
  transition:border-color .5s var(--ease)}
.mbr__role{font-size:.95rem;line-height:1.5;color:var(--deep);margin-bottom:.35rem}
.mbr__meta p{margin:0;font-size:.95rem;line-height:1.62;color:var(--ink-70);text-wrap:pretty}
.mbr__meta p + p{margin-top:.6rem}
.roster li:hover .mbr__meta{border-color:var(--bronze)}
.roster .num{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-50)}
.roster b{font-weight:400;font-size:clamp(1.04rem,1.3vw,1.2rem);letter-spacing:-.018em;
  line-height:1.22;color:var(--deep);text-wrap:balance}

@media (max-width:520px){
  .roster{grid-template-columns:1fr 1fr;gap:18px}
}
@media (prefers-reduced-motion: reduce){
  .mbr__port,.mbr__port img,.mbr__ini,.mbr__meta{transition:none}
  .roster li:hover .mbr__port{transform:none}
}

/* Contact page */
.cgrid{display:grid;gap:clamp(20px,2.4vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.cbox{background:var(--paper);border:1px solid var(--deep-10);border-radius:var(--r);
  padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:.8rem}
.cbox h3{margin:0;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-50);font-weight:500}
.cbox a,.cbox address{font-style:normal;font-size:clamp(1.05rem,1.4vw,1.28rem);line-height:1.4;
  letter-spacing:-.016em;color:var(--ink);text-decoration:none}
.cbox a:hover{color:var(--deep)}
/* Amend M5: the picture under the contact details. Contained inside the shell rather
   than full-bleed, because it is the same photograph as the Our Communities page head
   and a different shape keeps the two from reading as one picture used twice. */
.cfig{margin:clamp(40px,5vw,72px) 0 0}
.cfig img{width:100%;height:auto;display:block;border-radius:var(--r)}

/* Interior pages: the header never has a dark hero behind it, so it is solid
   from the first pixel rather than fading in on scroll. */
.hdr--locked{background:rgba(255,255,255,.94);backdrop-filter:blur(14px) saturate(1.1);box-shadow:0 1px 0 var(--deep-10)}
.hdr--locked .hdr__logo .rev{display:none}
.hdr--locked .hdr__logo .pos{display:block}
.hdr--locked .nav a{color:var(--ink)}
.hdr--locked .btn{--bg:var(--deep);--fg:#fff;background:var(--bg);color:var(--fg);border-color:var(--bg);backdrop-filter:none}
.hdr--locked .btn:hover{background:transparent;color:var(--deep)}
.hdr--locked .burger{color:var(--ink)}

/* ---------- news / article pages ---------- */

.toc{border-top:1px solid var(--deep-30);margin-top:clamp(40px,5vw,64px);padding-top:26px;display:grid;gap:2px}
.toc a{display:flex;gap:clamp(14px,3vw,40px);align-items:baseline;padding:20px 0;border-bottom:1px solid var(--deep-10);text-decoration:none;transition:padding-left .5s var(--ease)}
.toc a:hover{padding-left:12px}
.toc em{font-style:normal;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--deep);flex:none;width:9ch}
.toc span{font-size:clamp(1.1rem,1.7vw,1.5rem);letter-spacing:-.015em;line-height:1.25}

.article{padding:clamp(64px,8vw,120px) 0;border-top:1px solid var(--deep-10)}
.article:first-of-type{border-top:0}
.article__head{display:grid;grid-template-columns:minmax(0,1fr);gap:0;max-width:22ch}
.article h2{font-size:clamp(1.9rem,3.9vw,3.2rem);letter-spacing:-.03em;line-height:1.05;max-width:20ch}
.article__meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-50);margin-bottom:1.6rem}
.article__meta i{font-style:normal;color:var(--deep)}
.article__body{max-width:68ch;margin-top:clamp(28px,3.4vw,44px)}
.article__body p{font-size:clamp(1.02rem,1.1vw,1.14rem);line-height:1.78}
.article__body h3{font-size:clamp(1.25rem,1.8vw,1.6rem);margin:clamp(32px,4vw,52px) 0 1rem;letter-spacing:-.02em}
.article__body blockquote{
  margin:clamp(32px,4vw,52px) 0;padding-left:clamp(20px,2.4vw,32px);
  border-left:2px solid var(--bronze);font-size:clamp(1.25rem,2.1vw,1.75rem);
  line-height:1.34;letter-spacing:-.018em;color:var(--deep)
}
.article__hero{margin:0;aspect-ratio:21/9;overflow:hidden;border-radius:var(--r);margin-bottom:clamp(28px,3.4vw,44px)}
.article__hero img{width:100%;height:100%;object-fit:cover}
.article__end{margin-top:clamp(32px,4vw,48px);font-size:.78rem;letter-spacing:.2em;color:var(--ink-50)}
.backlink{margin-top:clamp(40px,5vw,64px)}

/* ---------- news index: one card per post ---------- */
.posts{display:grid;gap:clamp(20px,2.4vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.post{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid var(--deep-10);border-radius:var(--r);
  overflow:hidden;transition:border-color .5s var(--ease),transform .5s var(--ease)}
.post:hover{border-color:var(--deep-30);transform:translateY(-3px)}
.post__media{position:relative;display:block;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--deep-10)}
.post__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform 1.1s var(--ease)}
.post:hover .post__media img{transform:scale(1.06)}
.post__body{display:flex;flex-direction:column;gap:.75rem;padding:clamp(24px,2.6vw,34px);flex:1}
.post__kind{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--deep)}
.post h2{font-size:clamp(1.2rem,1.7vw,1.5rem);letter-spacing:-.018em;line-height:1.22}
.post p{margin:0;font-size:.96rem;line-height:1.6;color:var(--ink-70);text-wrap:pretty}
.post__more{margin-top:auto;padding-top:.6rem;font-size:.92rem;color:var(--deep);
  display:inline-flex;align-items:center;gap:.5rem;transition:gap .4s var(--ease)}
.post:hover .post__more{gap:.9rem}

/* the numbered list runs full width when it is not paired with a heading column */
.steps--wide{max-width:none}
.steps--wide li{max-width:92ch}

/* ============================================================
   HOW IT WORKS / CARE - editorial layouts
   ============================================================ */

/* The three principles are the sharpest thing v5 says. They were set as small
   list text; here they carry the numeral at display size and the sentence at
   reading size, three abreast, so the page opens on a statement. */
.tenets{list-style:none;margin:0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.tenets li{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);
  padding:clamp(30px,3.4vw,48px) clamp(24px,2.6vw,40px);
  border-top:1px solid var(--deep-30)}
.tenets li + li{border-left:1px solid var(--deep-30)}
@media (max-width:820px){.tenets li + li{border-left:0}}
.tenets b{font-weight:300;font-size:clamp(2.6rem,5vw,4.2rem);line-height:.9;
  letter-spacing:-.04em;color:var(--deep);display:block}
.tenets .ico{--ico:26px;color:var(--bronze)}
.tenets p{margin:0;font-size:clamp(1.02rem,1.15vw,1.16rem);line-height:1.5;
  letter-spacing:-.012em;text-wrap:pretty}

/* A single v5 sentence set at display size, used where a band would otherwise
   hold two loose paragraphs. No new words - just scale. */
.statement{max-width:26ch;font-size:clamp(1.6rem,3.4vw,2.9rem);line-height:1.12;
  letter-spacing:-.028em;margin:0}
.statement + p{margin-top:clamp(22px,2.6vw,34px);max-width:52ch}

/* A passage that opens on a statement. The first paragraph is set at display
   size in the deep green with a bronze rule above it, so it reads as a
   deliberate opening rather than a paragraph that happens to be larger; the
   rest follow in even columns beneath, each with its own hairline, so no column
   is left with a void under it. */
.passage__lead{margin:0;max-width:30ch;font-size:clamp(1.5rem,2.9vw,2.35rem);
  line-height:1.18;letter-spacing:-.026em;color:var(--deep);font-weight:300}
.passage__lead::before{content:"";display:block;width:56px;height:2px;
  background:var(--bronze);margin-bottom:clamp(20px,2.2vw,30px)}
.passage__cols{margin-top:clamp(36px,4.2vw,60px);display:grid;
  gap:clamp(24px,2.8vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.passage__cols p{margin:0;padding-top:clamp(20px,2.2vw,28px);
  border-top:1px solid var(--deep-30);font-size:1rem;line-height:1.66;
  color:var(--ink-70);text-wrap:pretty}

/* The Helping Hands credentials: the partner's own logo and their CQC listing, sat
   between the opening statement and the columns.

   Both are supplied artwork rather than photography, so they are boxed on paper with a
   hairline instead of bled like the pictures elsewhere - a logo on a tinted section
   reads as a mistake, and the CQC panel carries its own purple. The two are top
   aligned rather than matched in height: the listing has to stay large enough to read,
   and shrinking it to the logo's height would make it a grey smudge. */
.cred{margin-top:clamp(28px,3.2vw,44px);display:flex;flex-wrap:wrap;
  align-items:flex-start;gap:clamp(16px,2vw,24px)}
.cred__fig{margin:0;background:#fff;border:1px solid var(--deep-30);border-radius:3px;
  overflow:hidden;line-height:0}
.cred__fig img{display:block;width:100%;height:auto}
.cred__fig--logo{width:clamp(96px,10vw,124px)}
.cred__fig--cqc{width:clamp(200px,19vw,232px)}
.cred__link{flex-basis:100%;margin:clamp(4px,.6vw,8px) 0 0;font-size:.95rem}

/* The care types: a hairline grid rather than free-floating cards, with the
   icon carried up beside the heading. */
/* paper, not tint, behind the grid: 11 items never fill the last row and a
   tinted container turns the leftover cell into a grey block. The hairlines
   come from each cell's outline instead. */
.svcgrid{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--paper);
  border:1px solid var(--deep-10);border-radius:var(--r);overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr))}
.svcgrid li{background:var(--paper);padding:clamp(26px,2.8vw,36px);
  display:flex;flex-direction:column;gap:.7rem;outline:1px solid var(--deep-10);
  transition:background .5s var(--ease)}
.svcgrid li:hover{background:var(--light-10)}
.svcgrid h3{display:flex;align-items:center;gap:.7rem;font-size:1.08rem;
  letter-spacing:-.014em;margin:0}
.svcgrid .ico{--ico:22px;color:var(--deep);flex:none}
.svcgrid p{margin:0;font-size:.96rem;line-height:1.6;color:var(--ink-70);text-wrap:pretty}

/* ============================================================================
   MOBILE
   Most of this audience is on a phone, and most of it is over 65. Two things
   follow: every link needs a finger-sized target, and the small-caps labels that
   read fine at 12px on a desktop monitor are too small held at arm's length.
   Nothing here changes the layout - only touch area and label size.
   ========================================================================== */
@media (max-width:760px){

  /* --- touch targets: 44px minimum on anything tappable --- */
  .ftr ul{gap:0}
  .ftr ul a{display:block;padding-block:12px;line-height:1.45}
  .ftr__bot{gap:6px 18px}
  .ftr__bot a{display:inline-block;padding-block:12px}
  .ftr__legal{display:flex;flex-wrap:wrap;gap:0 18px}

  .link{padding-block:.62rem}
  .cbox a{display:inline-block;padding-block:.66rem}
  .backlink .link{padding-block:.7rem}

  /* --- label type: nothing under 13px --- */
  .eyebrow{font-size:.88rem;letter-spacing:.17em;margin-bottom:1.15rem}
  .status{font-size:.87rem;letter-spacing:.14em}
  .post__meta,.post__kind{font-size:.87rem;letter-spacing:.12em}
  .pillar__n{font-size:.9rem}
  .roster .num{font-size:.87rem;letter-spacing:.17em}
  .cbox h3{font-size:.87rem;letter-spacing:.15em}
  .ftr h4{font-size:.88rem;letter-spacing:.15em}
  .spec__hd{font-size:.87rem;letter-spacing:.15em}
  .article__meta,.small{font-size:.95rem}
}

/* ---------- full-bleed photographic section ----------
   A picture behind the copy, with the copy on a solid panel over it.
   The first version washed the photograph down until it read as a dark slab rather
   than a picture - and where two of those met (a photographic section above the CTA
   band, or below the hero) the page turned into one long murk. Now the scrim is light
   enough that the photograph is legible as a photograph, and the words sit on solid
   green instead of on the image. That also means contrast here is measured normally,
   against a real background colour, rather than per pixel against whatever the
   picture happens to be doing. */
.sec--shot{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  padding-block:clamp(64px,8vw,140px)}
/* taller than the section so it can drift on scroll without exposing an edge */
.sec--shot .sec__bg{position:absolute;left:0;right:0;top:-9%;width:100%;height:118%;
  object-fit:cover;z-index:0;margin:0;will-change:transform}
@media (prefers-reduced-motion: reduce){
  .sec--shot .sec__bg{top:0;height:100%}
}
.sec--shot::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,23,15,.34) 0%,rgba(20,23,15,.20) 45%,
    rgba(20,23,15,.34) 100%)}

/* Amends M1 and M4 (04/09/26): the client asked for these panels to be translucent so
   the photograph reads through them.

   The tint is a much darker green than the solid panel was. It has to be: at 55% the
   photograph supplies nearly half the backdrop luminance, and SageHaus deep green
   (#4D644B) is a mid tone - white copy on it tops out at 6.5:1 even at full opacity, so
   there is nothing left to spend on translucency. The dark green holds 5.3:1 at the
   worst pixel with 45% of the picture showing through.

   The blur is doing as much work as the tint. It takes the bright specular pixels -
   sky through branches, sunlight on a roof - and averages them away, which is what the
   worst-pixel measurement is sensitive to. Dropping it to zero costs about 2 stops.

   Opened up from 55% to 46% on 24/09/26. Getting there needed the copy on these two
   panels set to pure white rather than the softened light-30 used elsewhere on dark -
   the eyebrow in particular was the dimmest thing on the Biophilic panel and set the
   floor for the whole block. Softened white is a luxury a translucent panel cannot
   afford; the photograph is already spending the contrast budget.

   46% is the limit, not a preference. At 40% the About panel falls to 4.48:1 on a
   phone, under the AA floor. Measured per glyph pixel by qc_shotcontrast.js. */
.shot__panel{position:relative;z-index:2;
  background:rgba(31,42,30,.46);
  -webkit-backdrop-filter:blur(22px) saturate(1.05);backdrop-filter:blur(22px) saturate(1.05);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 90px -60px rgba(20,23,15,.85);
  border-radius:var(--r);padding:clamp(30px,4.2vw,68px);
  /* inset from the shell so the photograph frames the panel on all four sides
     rather than showing as a thin strip */
  margin-inline:clamp(0px,3vw,64px)}
.shot__panel .h2,.shot__panel h1,.shot__panel h2,.shot__panel h3,
.shot__panel p,.shot__panel li,.shot__panel cite,.shot__panel blockquote{color:#fff}
/* pure white, not the softened light-30 used elsewhere on dark: these panels are
   translucent, so the photograph behind is already spending the contrast budget */
.shot__panel .lede{color:#fff}
/* the eyebrow inherits light-30 from .on-dark and was the dimmest thing on the
   Biophilic panel - it set the floor for the whole block */
.shot__panel .eyebrow{color:#fff}
/* Without backdrop-filter there is no blur to tame the bright pixels, so a 55% tint
   would put white copy on raw photograph. Those browsers get a near-solid panel -
   the old behaviour - rather than an unreadable one. */
/* The two panels no longer share a tint, and deliberately so. Matching the NUMBER
   stopped matching the RESULT once they sat on different pictures: the About panel is
   over the road through the village, which is even and mid-toned, while Biophilic is
   over a bright, busy woodland and lake. At 24% the About copy still measures 5.5:1 at
   the worst pixel on a phone; Biophilic at 24% would be nowhere near it, so it keeps
   the 46% that was measured for its own backdrop.

   What made this possible was the picture, not the CSS. Behind the house exterior the
   same copy measured 5.04:1 on a phone; behind the road it measures 7.69:1, and that
   headroom is what paid for the glass being this clear. */
#about .shot__panel{background:rgba(31,42,30,.24)}
/* Biophilic needs the opposite of About. The client moved its backdrop on 05/10 from
   the dark lake to the couple on the terrace, which is a much brighter picture, and at
   the shared 46% the copy fell to 4.20:1. 58% brings it back to 5.4:1. The three
   panels now each carry the tint their own photograph needs rather than a shared
   number that suits none of them. */
#biophilic .shot__panel{background:rgba(31,42,30,.58)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .shot__panel{background:rgba(31,42,30,.94)}
}
@media (max-width:560px){.shot__panel{border-radius:calc(var(--r) * .7)}}
/* two even text columns under a full-width heading. Below 780px they stack, because
   two columns of body copy at phone width give four or five words to the line. */
.cols2{display:grid;gap:clamp(24px,3vw,54px)}
@media (min-width:780px){.cols2{grid-template-columns:1fr 1fr;align-items:start}}
/* NOTE: 652 lines duplicated verbatim from earlier in this file were removed on
   04/09/26. Both copies were identical, so the later one silently won every
   cascade - which is how an old .sec--shot rule kept overriding its own
   replacement. Verified by pixel-diffing every page at 1440 and 390, before and
   after: no rendered difference. */
/* ---------- sites stacked at equal weight ----------
   The three planning sites used to sit in small cards beside a large Sylvan feature,
   which made them look provisional and meant a new site could not be added without
   redesigning the row. They now use the same block as the Sylvan, stacked, with the
   middle one reversed so four identical rows do not read as a table. */
.vstack{display:grid;gap:clamp(20px,2.4vw,34px)}
@media (min-width:861px){
  .vfeat--flip .vfeat__media{order:2}
}

/* ---------- home page showcase index ----------
   Four short intros that each link on to a page. As four stacked rows they took four
   screens and read as a list of near-identical blocks. As an index they take one: the
   titles stack, and one picture beside them changes to match whichever is active.

   The base layout below 900px is four ordinary cards with every picture and paragraph
   visible - that is also exactly what a browser with no JavaScript renders, since the
   index behaviour is applied by a class the script adds. */
.sc__list{list-style:none;margin:0;padding:0}
.sc__link{display:grid;gap:clamp(12px,1.4vw,18px);text-decoration:none;color:inherit;
  padding:clamp(24px,2.8vw,36px) 0;border-top:1px solid var(--deep-30)}
.sc__item:last-child .sc__link{border-bottom:1px solid var(--deep-30)}
/* 14px, not the 12.5px an index numeral would usually take - the audience is 65+ and
   the phone audit holds every line to a readable size. The tracking keeps it looking
   like a marker rather than body copy. */
.sc__n{font-size:.875rem;letter-spacing:.22em;color:var(--ink-50)}
.sc__t{font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.08;letter-spacing:-.028em;
  color:var(--deep);text-wrap:balance}
.sc__p{display:block;color:var(--ink-70);line-height:1.66;max-width:56ch}
.sc__go{display:inline-flex;align-items:center;gap:.55rem;margin-top:.9rem;
  color:var(--deep);border-bottom:1px solid var(--deep-30);padding-bottom:.2rem;
  transition:gap .4s var(--ease)}
.sc__link:hover .sc__go{gap:1rem}
.sc__fig{margin:clamp(18px,2.2vw,26px) 0 0}
.sc__fig img{width:100%;height:auto;border-radius:var(--r);display:block}
.sc__stage:empty{display:none}

/* --- the index proper, once the script is running and there is room for it --- */
@media (min-width:900px){
  .sc--live{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
    gap:clamp(40px,5vw,90px);align-items:start}
  /* 5:4, matching the stills. The list runs tall once an item is open, and a 4:3 stage
     left a visible void beside it; the squarer frame fills the column without the hard
     cropping a true square forced on the group shots. */
  .sc--live .sc__stage{position:sticky;top:clamp(96px,13vh,140px);margin:0;
    aspect-ratio:5/4;border-radius:var(--r);overflow:hidden;background:var(--light-30)}
  .sc--live .sc__fig{position:absolute;inset:0;margin:0;opacity:0;
    transition:opacity .7s var(--ease)}
  .sc--live .sc__fig img{width:100%;height:100%;object-fit:cover;border-radius:0;
    transform:scale(1.05);transition:transform 1.2s var(--ease)}
  .sc--live .sc__fig.on{opacity:1}
  .sc--live .sc__fig.on img{transform:scale(1)}

  .sc--live .sc__link{grid-template-columns:auto 1fr;align-items:baseline;
    column-gap:clamp(18px,2.2vw,30px);row-gap:0;
    transition:padding .5s var(--ease)}
  .sc--live .sc__n{grid-column:1;padding-top:.5em}
  .sc--live .sc__t{grid-column:2;transition:transform .5s var(--ease)}
  /* the paragraph is closed by a grid row that opens, so nothing is clipped mid-word */
  .sc--live .sc__panel{grid-column:2;display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .55s var(--ease),opacity .45s var(--ease);opacity:0}
  .sc--live .sc__panel-in{overflow:hidden;min-height:0}
  .sc--live .sc__p{padding-top:clamp(10px,1.2vw,16px)}
  .sc--live .sc__item.on .sc__panel{grid-template-rows:1fr;opacity:1}
  .sc--live .sc__item.on .sc__t{transform:translateX(6px)}
  .sc--live .sc__item.on .sc__n{color:var(--bronze-ink)}
  .sc--live .sc__link:focus-visible{outline:2px solid var(--bronze);outline-offset:4px}
}
@media (prefers-reduced-motion: reduce){
  .sc--live .sc__still,.sc--live .sc__t,.sc--live .sc__panel{transition:none}
}