/* ═══════════════════════════════════════════════════════════════
   CGEN CARE — Homepage v3 (refined from v2)
   Palette:  deep #0A3C30 · green #174D38 · teal #005C5C
             ivory #F1EDE3 · stone #E6E0D0 · sage #DDE3D6 · sand #C6A87E
   Type:     Newsreader (editorial serif) · Archivo (grotesque, wdth axis)
   Signature: "the seam" — a vertical split with offset halves, taken
             from the logo's divided circle.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --deep:  #0A3C30;
  --green: #174D38;
  --teal:  #005C5C;
  --ivory: #F1EDE3;
  --stone: #E6E0D0;
  --sage:  #DDE3D6;
  --sand:  #C6A87E;
  --ink:   #142019;
  --muted: #56625C;
  --on-deep: #C9D6CF;
  --line:      rgba(20, 32, 25, .16);
  --line-inv:  rgba(241, 237, 227, .2);

  --serif: "Newsreader", "Times New Roman", serif;
  --sans:  "Archivo", "Helvetica Neue", Arial, sans-serif;

  --page: 1440px;
  --m: max(20px, min(5vw, 80px));
  --ease: cubic-bezier(.2, .65, .2, 1);
  color-scheme: light;
}

/* ─── base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ivory); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--teal); color: var(--ivory); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.deep :focus-visible { outline-color: var(--sand); }

.skip { position: absolute; left: -999px; top: 0; z-index: 300; background: var(--deep); color: var(--ivory); padding: 12px 20px; }
.skip:focus { left: 0; }

.frame {
  max-width: var(--page); margin-inline: auto;
  padding-left: max(var(--m), env(safe-area-inset-left, 0px));
  padding-right: max(var(--m), env(safe-area-inset-right, 0px));
}
.deep { background: var(--deep); color: var(--ivory); }
.stone { background: var(--stone); }

/* ─── type roles ───────────────────────────────────────────── */
.eyebrow {
  display: block; font-size: 12px; font-weight: 600; font-stretch: 115%;
  letter-spacing: .3em; text-transform: uppercase; color: var(--green);
}
.deep .eyebrow, .on-photo .eyebrow { color: var(--sand); }
h1, h2, h3 { text-wrap: balance; }
.h-serif {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; line-height: 1.08;
}
.h-serif em { font-style: italic; color: var(--green); }
.deep .h-serif em, .on-photo .h-serif em { color: var(--sand); }
.note { font-size: 15.5px; line-height: 1.7; color: var(--muted); max-width: 26em; }
.deep .note, .on-photo .note { color: var(--on-deep); }

/* seam rule: hairline beside a block of text */
.seam { border-left: 1px solid var(--line); padding-left: 24px; }
.deep .seam, .on-photo .seam { border-left-color: var(--line-inv); }

/* seam divider: two half-rules, vertically offset */
.seam-divider { position: relative; height: 28px; }
.seam-divider::before, .seam-divider::after {
  content: ""; position: absolute; height: 1px; background: var(--line);
}
.seam-divider::before { left: 0; right: 50%; top: 8px; }
.seam-divider::after { left: 50%; right: 0; top: 20px; }

/* ─── buttons & links ──────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 14px; white-space: nowrap;
  padding: 17px 26px; border: 1px solid var(--green);
  background: var(--green); color: var(--ivory);
  font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.btn:hover { background: var(--deep); border-color: var(--deep); }
.btn .arr { transition: transform .35s var(--ease); }
.btn:hover .arr { transform: translateX(5px); }
.deep .btn { background: var(--sand); border-color: var(--sand); color: var(--deep); }
.deep .btn:hover { background: #D6BC97; border-color: #D6BC97; }

.link {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; color: var(--green);
  padding-bottom: 6px; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: background-size .45s var(--ease);
}
.link:hover { background-size: 35% 1px; }
.deep .link, .on-photo .link { color: var(--ivory); }

/* ─── photography ──────────────────────────────────────────────
   Each .ph has a real photo layered over a tonal fallback, so a
   missing image never shows a broken icon or an empty hole.      */
.ph {
  position: relative; overflow: hidden;
  background-color: #A9AC98;
  background-image: var(--img, linear-gradient(transparent, transparent)), var(--tone, none);
  background-size: cover; background-position: center;
}
.ph::after {          /* slow scale on hover */
  content: ""; position: absolute; inset: 0; background: inherit;
  transition: transform 1.4s var(--ease);
}
.ph:hover::after { transform: scale(1.03); }
.ph .cap {
  position: absolute; z-index: 2; left: 0; bottom: 0;
  background: rgba(10, 60, 48, .82); color: var(--ivory);
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; padding: 7px 11px;
}
.t-stone { --tone: linear-gradient(165deg, #CFC6B2 0%, #B1A68E 55%, #918670 100%); }
.t-sage  { --tone: linear-gradient(165deg, #C4CCBD 0%, #9EA996 55%, #7E8B77 100%); }
.t-green { --tone: linear-gradient(170deg, #4F6B5D 0%, #2E4D40 60%, #1C3A2F 100%); }

/* ─── header ───────────────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  transition: background .5s var(--ease), border-color .5s var(--ease);
}
.site-header.is-fixed { background: rgba(241, 237, 227, .92); backdrop-filter: blur(12px); border-bottom-color: var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; transition: padding .4s var(--ease); }
.is-fixed .bar { padding-block: 13px; }

.lockup { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.lockup .mark { height: 52px; width: auto; transition: height .4s var(--ease); }
.lockup .word { height: 17px; width: auto; }
.is-fixed .lockup .mark { height: 42px; }

.primary-nav { display: flex; align-items: center; gap: 34px; }
.primary-nav a:not(.btn) {
  font-size: 14px; font-weight: 500; letter-spacing: .06em; text-decoration: none; color: var(--ink);
  background: linear-gradient(var(--teal), var(--teal)) left bottom / 0 1px no-repeat;
  padding-bottom: 4px; transition: background-size .4s var(--ease), color .3s;
}
.primary-nav a:not(.btn):hover { background-size: 100% 1px; color: var(--teal); }
.primary-nav .btn { padding: 13px 20px; font-size: 13px; }

.nav-toggle { display: none; width: 46px; height: 46px; position: relative; z-index: 140; background: none; border: 0; cursor: pointer; }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); transition: transform .4s var(--ease), background .4s; }
.nav-toggle span:nth-child(1) { top: 19px; }
.nav-toggle span:nth-child(2) { top: 27px; }
body.nav-open .nav-toggle span { background: var(--ivory); }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.overlay {
  position: fixed; inset: 0; z-index: 120; background: var(--deep); color: var(--ivory);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(110px + env(safe-area-inset-top, 0px)) max(var(--m), env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) max(var(--m), env(safe-area-inset-left, 0px));
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s;
}
body.nav-open .overlay { opacity: 1; visibility: visible; }
.overlay nav a {
  display: block; font-family: var(--serif); font-size: clamp(34px, 9vw, 52px); line-height: 1.3;
  text-decoration: none; border-bottom: 1px solid var(--line-inv);
  transform: translateY(12px); transition: transform .55s var(--ease), color .3s;
}
body.nav-open .overlay nav a { transform: none; }
.overlay nav a:hover { color: var(--sand); }
.overlay .btn { align-self: flex-start; margin-top: 32px; }
.overlay .contact { font-size: 14px; color: var(--on-deep); margin-top: 24px; }

/* ─── reveal (progressive: content is visible without JS) ──── */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .d1 { transition-delay: .12s; } .js .d2 { transition-delay: .24s; } .js .d3 { transition-delay: .36s; }

@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero .load { animation: rise 1.1s var(--ease) both; }
.hero .load.d1 { animation-delay: .12s; } .hero .load.d2 { animation-delay: .26s; } .hero .load.d3 { animation-delay: .4s; }

/* ═══ 01 · HERO (panorama) ══════════════════════════════════ */
.hero { padding-top: calc(clamp(96px, 12vh, 120px) + env(safe-area-inset-top, 0px)); }
.hero-stage {
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
  margin-inline: var(--gutter); border-radius: var(--r-sec);
  min-height: clamp(560px, calc(100vh - 200px), 820px);
  background: var(--img) 58% 58% / cover no-repeat, linear-gradient(170deg, #7E8B77, #3F5A4C);
}
.hero-stage::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(4deg, rgba(10,60,48,.95) 0%, rgba(10,60,48,.86) 30%, rgba(10,60,48,.5) 52%, rgba(10,60,48,0) 80%);
}
.hero-stage .cap { position: absolute; z-index: 3; top: 16px; right: 16px; background: rgba(10,60,48,.82); color: var(--ivory); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; padding: 7px 12px; border-radius: var(--r-ui); }
.hero-copy { position: relative; z-index: 2; width: 100%; padding-block: clamp(32px, 6vh, 60px); color: var(--ivory); }
.hero .eyebrow { color: #E3CDA6; }
.hero h1 { margin-top: clamp(16px, 3vh, 22px); text-shadow: 0 2px 24px rgba(10,60,48,.35); }
.hero h1 .l1 {
  display: block; color: var(--ivory);
  font-family: var(--sans); font-weight: 640; font-stretch: 112%; text-transform: uppercase;
  font-size: clamp(42px, 6.2vw, 98px); line-height: .94; letter-spacing: 0;
}
.hero h1 .l2 {
  display: block; margin-top: .3em;
  font-family: var(--serif); font-style: italic; font-weight: 380; color: var(--ivory);
  font-size: clamp(30px, 4vw, 62px); line-height: 1.06; letter-spacing: -.015em;
}
.hero-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px 48px; margin-top: clamp(24px, 4vh, 40px); }
.hero-row .note { color: var(--on-deep); border-left-color: var(--line-inv); }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.hero .btn { background: var(--sand); border-color: var(--sand); color: var(--deep); }
.hero .btn:hover { background: #D6BC97; border-color: #D6BC97; }
.hero .link { color: var(--ivory); }
.hero-base { margin-top: 18px; }

.hero-base { border-top: 1px solid var(--line); }
.hero-base .frame { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; padding-block: 20px; }
.verbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; font-size: 13px; letter-spacing: .26em; text-transform: uppercase; font-weight: 550; }
.verbs .lead { color: var(--teal); font-weight: 650; }
.verbs .tick { width: 1px; height: 14px; background: var(--line); }
.base-cta { font-size: 15px; color: var(--muted); }
.base-cta a { color: var(--green); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--sand); }

/* ═══ 02 · STATEMENT ════════════════════════════════════════ */
.statement { padding-block: clamp(96px, 16vh, 168px) clamp(64px, 10vh, 112px); }
.statement h2 { font-size: clamp(36px, 5.2vw, 80px); max-width: 15em; }
.statement-foot { display: flex; justify-content: flex-end; margin-top: clamp(40px, 7vh, 72px); }

/* ═══ 03 · ACQUISITION (text only) ═════════════════════════ */
.acq { position: relative; overflow: hidden; }
.acq-wrap {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 120px); align-items: start;
  padding-block: clamp(88px, 13vh, 136px);
}
.acq-head { position: sticky; top: 130px; }
.acq h2 { font-size: clamp(38px, 4.6vw, 72px); margin-top: 24px; max-width: 10.5em; }
.acq-lead { margin-top: 30px; font-size: clamp(17px, 1.35vw, 19px); line-height: 1.68; color: var(--on-deep); max-width: 29em; }
.acq-cta { margin-top: 38px; }
.acq-process-h { font-size: 12px; font-weight: 600; font-stretch: 115%; letter-spacing: .3em; text-transform: uppercase; color: var(--sand); padding-bottom: 20px; }
.acq-steps { border-top: 1px solid var(--line-inv); }
.acq-steps li { display: grid; grid-template-columns: clamp(64px, 7vw, 96px) minmax(0, 1fr); gap: 0 20px; padding-block: clamp(28px, 4vh, 40px); border-bottom: 1px solid var(--line-inv); }
.acq-steps .n { font-family: var(--serif); font-size: clamp(44px, 4.6vw, 68px); line-height: .95; color: var(--sand); }
.acq-steps h4 { font-size: clamp(17px, 1.6vw, 21px); font-weight: 620; font-stretch: 112%; letter-spacing: .06em; text-transform: uppercase; padding-top: 4px; }
.acq-steps p { margin-top: 10px; color: var(--on-deep); max-width: 32em; }
.acq-steps .you { margin-top: 16px; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ivory); }
.acq-steps .you span { font-family: var(--sans); font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--sand); margin-right: 12px; }
.assure { border-top: 1px solid var(--line-inv); }
.assure .frame { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; padding-block: 20px; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--sand); }
.assure .tick { width: 1px; height: 13px; background: var(--line-inv); }

/* ═══ 04 · HOW WE THINK ═════════════════════════════════════ */
.think { padding-block: clamp(96px, 14vh, 152px); }
.think-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.think-head { position: sticky; top: 130px; }
.think-head h2 { font-size: clamp(34px, 3.8vw, 56px); margin-top: 22px; max-width: 10em; }
.think-head .note { margin-top: 26px; }

.principles { border-top: 1px solid var(--line); }
.principle { border-bottom: 1px solid var(--line); }
.principle button {
  width: 100%; display: grid; grid-template-columns: 64px 1fr 16px; align-items: baseline; gap: 16px;
  padding: 26px 0; text-align: left; background: none; border: 0; cursor: pointer;
  transition: padding-left .5s var(--ease);
}
.principle button:hover { padding-left: 10px; }
.principle .no { font-family: var(--serif); font-size: 28px; line-height: 1; color: var(--teal); }
.principle .ti { font-weight: 620; font-stretch: 112%; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(16px, 1.6vw, 21px); }
.principle .ind { position: relative; width: 14px; height: 14px; align-self: center; }
.principle .ind::before, .principle .ind::after { content: ""; position: absolute; background: var(--green); transition: transform .5s var(--ease); }
.principle .ind::before { left: 0; right: 0; top: 6px; height: 1.5px; }
.principle .ind::after { top: 0; bottom: 0; left: 6px; width: 1.5px; }
.principle.open .ind::after { transform: scaleY(0); }
.principle .body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.principle.open .body { grid-template-rows: 1fr; }
.principle .body > div { overflow: hidden; }
.principle .body p { padding: 0 0 28px 80px; max-width: 36em; color: var(--muted); }

/* ═══ 05 · PORTFOLIO ════════════════════════════════════════ */
.folio { padding-block: clamp(96px, 14vh, 152px); overflow: hidden; }
.folio-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: clamp(48px, 8vh, 80px); }
.folio-head h2 { font-size: clamp(34px, 4.4vw, 64px); margin-top: 20px; max-width: 12em; }

.meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 16px; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; font-weight: 550; color: var(--muted); }

/* portfolio ledger: one row per care group */
.ledger { border-top: 1px solid var(--line); }
.lrow a { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr) auto; gap: 24px clamp(24px, 3vw, 48px); align-items: center; padding-block: clamp(34px, 5vw, 56px); border-bottom: 1px solid var(--line); text-decoration: none; transition: padding-left .5s var(--ease); }
.lrow a:hover { padding-left: 14px; }
.lrow-logo img { height: clamp(46px, 4.6vw, 64px); width: auto; }
.lrow-ghost { font-family: var(--serif); font-style: italic; font-size: clamp(26px, 3vw, 40px); color: var(--green); }
.lrow-info .meta { margin-top: 0; }
.lrow-info .note { display: block; margin-top: 10px; }

.lrow-go { grid-column: 4; font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--green); display: inline-flex; gap: 10px; }
.lrow-go i { font-style: normal; transition: transform .4s var(--ease); }
.lrow a:hover .lrow-go i { transform: translateX(6px); }
.lrow-peek { position: absolute; z-index: 3; right: clamp(110px, 11vw, 160px); top: 50%; width: clamp(220px, 21vw, 300px); aspect-ratio: 4 / 3; opacity: 0; pointer-events: none; transform: translateY(-50%) scale(.94) rotate(-1.6deg); transition: opacity .45s var(--ease), transform .6s var(--ease); box-shadow: 0 24px 60px rgba(20,32,25,.28); }
.lrow a:hover .lrow-peek, .lrow a:focus-visible .lrow-peek { opacity: 1; transform: translateY(-50%) scale(1) rotate(0); }
@media (hover: none), (max-width: 900px) {
  .lrow a { grid-template-columns: 1fr; }
  .lrow-go { grid-column: auto; }
  .lrow-peek { position: static; opacity: 1; transform: none; width: 100%; order: -1; box-shadow: none; }
  .lrow a:hover { padding-left: 0; }
}


.folio-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: clamp(64px, 10vh, 104px); padding-top: 24px; border-top: 1px solid var(--line); }
.folio-foot p { color: var(--muted); font-size: 15.5px; }

/* ═══ 06 · LOOKING FOR ══════════════════════════════════════ */
.seek { padding-block: clamp(96px, 14vh, 152px); }
.seek-top { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.seek-top::after { content: ""; height: 1px; background: var(--line); }
.seek-lines { margin-top: clamp(40px, 6vh, 64px); }
.seek-lines li {
  display: flex; align-items: baseline; gap: 26px;
  padding-block: clamp(18px, 2.8vh, 28px); border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: clamp(28px, 3.8vw, 58px); line-height: 1.1; letter-spacing: -.012em;
  transition: padding-left .6s var(--ease), color .4s var(--ease);
}
.seek-lines li:first-child { border-top: 1px solid var(--line); }
.seek-lines li:nth-child(even) { padding-left: clamp(0px, 8vw, 128px); }
.seek-lines li:hover { color: var(--green); padding-left: 24px; }
.seek-lines li:nth-child(even):hover { padding-left: calc(clamp(0px, 8vw, 128px) + 24px); }
.seek-lines .tick { flex: 0 0 auto; width: 1px; height: .9em; background: var(--teal); transform: translateY(.12em); }
.seek-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; margin-top: 36px; }
.seek-foot p { color: var(--muted); font-size: 15.5px; max-width: 32em; }

/* ═══ 07 · HUMAN ════════════════════════════════════════════ */
.human { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(560px, 92vh, 900px); }
.human > .ph { position: absolute; inset: 0; }
.human .scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(12deg, rgba(10,60,48,.92) 0%, rgba(10,60,48,.5) 45%, rgba(10,60,48,.1) 100%); }
.human .frame { position: relative; z-index: 2; width: 100%; padding-block: clamp(64px, 10vh, 104px); color: var(--ivory); }
.human h2 { font-size: clamp(38px, 5.4vw, 82px); margin-top: 22px; max-width: 12em; }
.human-foot { display: flex; justify-content: flex-end; margin-top: 36px; }

/* ═══ 08 · NEXT CHAPTER + ENQUIRY ═══════════════════════════ */
.chapter { position: relative; overflow: hidden; padding-block: clamp(96px, 14vh, 152px); }
.chapter-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.chapter h2 { font-size: clamp(40px, 5.6vw, 88px); margin-top: 24px; max-width: 9em; }
.chapter .note { margin-top: 28px; }
.direct { margin-top: 40px; border-top: 1px solid var(--line-inv); }
.direct div { display: flex; justify-content: space-between; gap: 16px; padding-block: 14px; border-bottom: 1px solid var(--line-inv); font-size: 15px; }
.direct span:first-child { color: var(--on-deep); }
.ghost-arc {
  position: absolute; left: -18vw; bottom: -40vw; width: 70vw; height: 70vw; max-width: 980px; max-height: 980px;
  border-radius: 50%; border: 1px solid rgba(198,168,126,.22); pointer-events: none;
}
.ghost-arc::before { content: ""; position: absolute; inset: 17%; border-radius: 50%; border: 1px solid rgba(198,168,126,.14); }

.enquiry { background: var(--ivory); color: var(--ink); padding: clamp(28px, 3.4vw, 48px); }
.enquiry h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; color: var(--deep); }
.enquiry .sub { color: var(--muted); font-size: 15px; margin-top: 8px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin-top: 28px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 0 11px; border: 0; border-bottom: 1px solid #BDB6A6; border-radius: 0;
  background: transparent; font-size: 16px; color: var(--ink); transition: border-color .3s;
}
.field select { appearance: none; background: linear-gradient(45deg, transparent 50%, var(--green) 50%) right 6px top 50% / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--green) 50%) right 0 top 50% / 6px 6px no-repeat; padding-right: 22px; }
.field textarea { resize: vertical; min-height: 76px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--teal); box-shadow: 0 1px 0 var(--teal); }
.field .err { display: none; font-size: 13px; color: #9A2F1F; }
.field.invalid input { border-bottom-color: #9A2F1F; }
.field.invalid .err { display: block; }
.enquiry .send { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 32px; }
.enquiry .send p { font-size: 13.5px; color: var(--muted); max-width: 22em; }
.enquiry .btn { background: var(--green); border-color: var(--green); color: var(--ivory); }
.enquiry .btn:hover { background: var(--deep); border-color: var(--deep); }
.sent-msg { display: none; padding-top: 12px; }
.sent-msg h3 { color: var(--green); }
.sent-msg p { color: var(--muted); margin-top: 12px; max-width: 30em; }
.enquiry.is-sent .form-body { display: none; }
.enquiry.is-sent .sent-msg { display: block; }

/* ─── footer ───────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line-inv); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 3fr); gap: clamp(32px, 5vw, 80px); padding-block: clamp(56px, 8vh, 80px); }
.foot-brand .lockup .mark { height: 56px; }
.foot-brand .lockup .word { height: 18px; }
.foot-brand p { margin-top: 24px; font-size: 15px; color: var(--on-deep); max-width: 26em; }
.foot-h { font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; color: var(--sand); margin-bottom: 18px; }
.foot-list li { margin-bottom: 9px; font-size: 15px; color: var(--on-deep); }
.foot-list a { text-decoration: none; color: var(--ivory); transition: color .3s; }
.foot-list a:hover { color: var(--sand); }
.foot-base .frame { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 22px calc(26px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-inv); font-size: 13px; color: rgba(241,237,227,.55); }
.foot-base ul { display: flex; gap: 24px; }
.foot-base a { text-decoration: none; }
.foot-base a:hover { color: var(--sand); }

/* ═══ responsive ════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .primary-nav a:not(.btn) { display: none; }
  .hero-stage { min-height: 780px; background-position: 62% 20%, center; }
  .hero-stage::before { background: linear-gradient(0deg, rgba(10,60,48,.96) 0%, rgba(10,60,48,.92) 40%, rgba(10,60,48,.5) 58%, rgba(10,60,48,0) 78%); }
  .hero-row { align-items: flex-start; }
  .acq-wrap, .think-grid, .chapter-grid { grid-template-columns: 1fr; }
  .acq-head { position: static; }
  .think-head { position: static; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .primary-nav { display: none; }
  .nav-toggle { display: block; }
  .lockup .mark { height: 42px; } .lockup .word { height: 14px; }
  .acq-steps li { grid-template-columns: 52px minmax(0, 1fr); gap: 0 14px; }
  .principle button { grid-template-columns: 44px 1fr 14px; }
  .principle .body p { padding-left: 60px; }
  .seek-lines li:nth-child(even) { padding-left: 0; }
  .fields { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .hero-base .frame { flex-direction: column; align-items: flex-start; }
  .statement-foot, .human-foot { justify-content: flex-start; }
}
@media (max-width: 380px) { .lockup .word { display: none; } }
@media (min-width: 721px) { .overlay { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .rv { opacity: 1; transform: none; }
}

/* fixes after review */
@media (max-width: 720px) {
  .btn { white-space: normal; }
  .hero-ctas .btn { width: 100%; justify-content: space-between; }
}


/* ═══ v3.1 · stacked logo, portfolio brands, stock-image tone ═══ */
:root { --tone: linear-gradient(transparent, transparent); }

/* logo: full stacked lockup, as supplied */
.logo { display: inline-block; line-height: 0; text-decoration: none; }
.logo img { height: 68px; width: auto; transition: height .4s var(--ease); }
.is-fixed .logo img { height: 54px; }
.foot-brand .logo img { height: 92px; }

/* named image slots (urls live here so they resolve relative to this file) */
/* v3.2 · real care home photography (natural colour, no tint) */
.img-hero  { --img: url('../images/real-stowlangtoft-front.jpg'); }
.img-stow  { --img: url('../images/real-stow-cedar.jpg'); background-position: 62% 50%; }
.img-stm   { --img: url('../images/real-althorpe-grange.jpg'); background-position: 6% 50%; }
.img-human { --img: url('../images/real-terrace-sails.jpg'); background-position: 50% 38%; }


/* portfolio brands */
.brand-logo { margin: 0 0 4px; line-height: 0; }
.brand-logo img { height: clamp(46px, 5vw, 66px); width: auto; }
.human-foot { justify-content: flex-start; }

@media (max-width: 720px) {
  .logo img { height: 56px; }
  .is-fixed .logo img { height: 46px; }
  .foot-brand .logo img { height: 80px; }
}


/* ═══ v3.3 · soft corners ═══════════════════════════════════════
   One place to tune the roundness: change these three tokens.      */
:root {
  --r-img: 22px;                      /* photographs */
  --r-ui:  10px;                      /* buttons, inputs, captions */
  --r-sec: clamp(18px, 2.2vw, 32px);  /* the large section panels */
  --gutter: clamp(8px, 1.1vw, 16px);  /* inset of the section panels from the page edge */
}
.ph { border-radius: var(--r-img); }
.ph .cap { left: 14px; bottom: 14px; border-radius: var(--r-ui); }
.btn { border-radius: var(--r-ui); }
.enquiry { border-radius: calc(var(--r-img) - 2px); }


/* large panels: inset from the page edge with softened corners */
.acq, .folio, .human, .chapter, .site-footer { margin-inline: var(--gutter); border-radius: var(--r-sec); }
.chapter, .site-footer { margin-top: var(--gutter); }
.site-footer { margin-bottom: var(--gutter); }
.human > .ph { border-radius: 0; }

/* enquiry fields: soft boxes instead of bare underlines */
.field input, .field select, .field textarea {
  padding: 13px 16px; border: 1px solid #CDC6B4; border-radius: var(--r-ui);
  background: rgba(255,255,255,.55);
}
.field select { padding-right: 38px; background: linear-gradient(45deg, transparent 50%, var(--green) 50%) right 20px top 50% / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--green) 50%) right 14px top 50% / 6px 6px no-repeat, rgba(255,255,255,.55); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,92,92,.14); }
.field.invalid input { border-color: #9A2F1F; }

@media (max-width: 720px) {
  .acq-steps .you span { display: block; margin: 0 0 4px; }
  .assure .tick { display: none; }
  .assure .frame { gap: 8px 22px; }
}
.lrow-ghost { line-height: 1.12; }


/* ═══ v3.4 · full-width hero; header and photograph blend ═══════
   The photograph runs edge to edge from the very top of the page. Its top edge fades into the
   ivory page colour, so the header (original dark logo and menu) sits on a light area and the
   two read as one surface. Scrolling turns the header into the solid ivory bar.             */
.hero { padding-top: 0; }
.hero-stage {
  margin: 0; border-radius: 0;
  min-height: clamp(620px, calc(100vh - 64px), 900px);
}
.hero-stage::before {
  background:
    linear-gradient(180deg, rgba(241,237,227,.97) 0%, rgba(241,237,227,.82) 8%, rgba(241,237,227,.42) 16%, rgba(241,237,227,0) 27%),
    linear-gradient(4deg, rgba(10,60,48,.95) 0%, rgba(10,60,48,.86) 30%, rgba(10,60,48,.5) 52%, rgba(10,60,48,0) 80%);
}
@media (max-width: 1100px) {
  .hero-stage { min-height: 820px; }
  .hero-stage::before {
    background:
      linear-gradient(180deg, rgba(241,237,227,.97) 0%, rgba(241,237,227,.82) 9%, rgba(241,237,227,.4) 17%, rgba(241,237,227,0) 26%),
      linear-gradient(0deg, rgba(10,60,48,.96) 0%, rgba(10,60,48,.92) 40%, rgba(10,60,48,.5) 58%, rgba(10,60,48,0) 78%);
  }
}


/* ═══ v3.5 · inner pages (About, Contact) ════════════════════════ */
.page-intro { padding-top: calc(clamp(132px, 19vh, 180px) + env(safe-area-inset-top, 0px)); padding-bottom: clamp(48px, 8vh, 88px); }
.intro-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 96px); align-items: end; }
.page-intro h1 { font-size: clamp(40px, 6vw, 92px); margin-top: 22px; max-width: 11.5em; }
.page-intro .note { padding-bottom: 8px; }
.ph-text { color: var(--muted); font-style: italic; }

.band { margin: 0 var(--gutter); border-radius: var(--r-sec); height: clamp(300px, 56vh, 620px); background: var(--img) 50% 58% / cover no-repeat, linear-gradient(170deg, #7E8B77, #3F5A4C); }
.img-band { --img: url('../images/real-stowlangtoft-conservatory.jpg'); }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.split-head { position: sticky; top: 130px; }
.who { padding-block: clamp(88px, 13vh, 144px); }
.who h2, .prin h2, .people h2 { font-size: clamp(34px, 3.8vw, 58px); margin-top: 22px; max-width: 10em; }
.prose p { font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.72; color: var(--ink); max-width: 33em; }
.prose p + p { margin-top: 1.2em; }

.doing { padding-bottom: clamp(88px, 13vh, 144px); }
.do-list { margin-top: 28px; border-top: 1px solid var(--line); }
.do-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px clamp(40px, 7vw, 120px); align-items: baseline; padding-block: clamp(26px, 4vh, 40px); border-bottom: 1px solid var(--line); }
.do-row h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 4.4vw, 68px); line-height: 1; letter-spacing: -.015em; color: var(--green); }
.do-row p { font-size: clamp(17px, 1.35vw, 19.5px); color: var(--muted); max-width: 30em; }

.prin { padding-bottom: clamp(88px, 13vh, 144px); }
.prin-head { margin-bottom: clamp(36px, 6vh, 64px); }
.pr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 7vw, 120px); }
.pr-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 12px; padding-block: 30px 36px; border-top: 1px solid var(--line); }
.pr-item .no { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--teal); }
.pr-item h3 { font-weight: 620; font-stretch: 112%; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(16px, 1.5vw, 20px); }
.pr-item p { margin-top: 10px; color: var(--muted); max-width: 30em; }

.people { padding-block: clamp(88px, 13vh, 144px); }
.people-list { border-top: 1px solid var(--line); }
.people-list li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); gap: 12px clamp(24px, 4vw, 64px); align-items: baseline; padding-block: clamp(24px, 3.4vh, 36px); border-bottom: 1px solid var(--line); }
.people-list .nm { font-family: var(--serif); font-size: clamp(28px, 3vw, 44px); line-height: 1.1; }
.people-list .rl { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; font-weight: 550; color: var(--muted); }
.people-list p { color: var(--muted); font-size: 16px; max-width: 28em; }
.people-note { margin-top: 22px; font-size: 14px; color: var(--muted); font-style: italic; }

.closing { margin: var(--gutter) var(--gutter) 0; border-radius: var(--r-sec); padding-block: clamp(72px, 11vh, 120px); }
.closing-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 112px); align-items: end; }
.closing h2 { font-size: clamp(36px, 4.6vw, 70px); margin-top: 22px; max-width: 11em; }
.closing-act .btn { margin-top: 28px; }

/* contact */
.contact-panel { margin-top: 0; padding-block: clamp(48px, 7vh, 88px); }
.contact-panel .direct { margin-top: 24px; }
.next-h { margin-top: clamp(40px, 6vh, 64px); }
.next-steps { margin-top: 18px; border-top: 1px solid var(--line-inv); }
.next-steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 12px; padding-block: 22px; border-bottom: 1px solid var(--line-inv); }
.next-steps .n { font-family: var(--serif); font-size: 32px; line-height: 1; color: var(--sand); }
.next-steps h3 { font-size: 14px; font-weight: 620; letter-spacing: .1em; text-transform: uppercase; }
.next-steps p { margin-top: 6px; font-size: 15px; color: var(--on-deep); max-width: 28em; }

/* current page in the menu */
.primary-nav a[aria-current="page"]:not(.btn) { background-size: 100% 1px; color: var(--teal); }

@media (max-width: 1100px) {
  .intro-grid, .split, .closing-grid { grid-template-columns: 1fr; }
  .split-head { position: static; }
  .do-row { grid-template-columns: 1fr; gap: 10px; }
  .pr-grid { grid-template-columns: 1fr; }
  .people-list li { grid-template-columns: 1fr; }
}

/* v3.5b: ledger photos on small screens — fixed landscape ratio */
@media (max-width: 1100px) {
  .lrow-peek { position: relative; inset: auto; aspect-ratio: 16 / 10; height: auto; min-height: 0; }
}

/* v3.6: section panels run full width, edge to edge (images, buttons and form keep soft corners) */
.acq, .folio, .human, .chapter, .site-footer, .closing, .band { margin-inline: 0; border-radius: 0; }
.chapter, .site-footer, .closing { margin-top: 0; }
.site-footer { margin-bottom: 0; }
.chapter + .site-footer, .closing + .site-footer { border-top: 1px solid var(--line-inv); }

/* v3.7: homepage closing CTA carries direct details under the button */
.closing-act .direct { margin-top: 36px; }
.closing:has(.direct) .closing-grid { align-items: start; }

/* v3.8: closing call to action — centred statement */
.closing { position: relative; overflow: hidden; padding-block: clamp(96px, 16vh, 180px); text-align: center; }
.closing .closing-c { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.closing h2 { font-size: clamp(40px, 6vw, 96px); max-width: 13em; margin-top: 26px; }
.closing .note { max-width: 36em; margin-top: 30px; }
.closing .btn-lg { margin-top: 44px; padding: 20px 34px; font-size: 14.5px; }
.closing-fine { margin-top: 26px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-deep); opacity: .75; }
.ghost-arc-r { left: auto; right: -22vw; bottom: auto; top: 50%; transform: translateY(-50%); }
.site-footer address, .foot-list li { font-style: normal; }
@media (max-width: 700px) { .closing-fine { letter-spacing: .1em; line-height: 1.8; } }

/* v3.9: mobile refinements */
/* open menu: keep the header (logo + close button) above the overlay */
body.nav-open .site-header { z-index: 130; background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
body.nav-open .site-header .logo img { filter: brightness(0) invert(1); }
body.nav-open .site-header .logo img, body.nav-open .nav-toggle span { transition: filter .3s, background .3s, transform .4s var(--ease); }
@media (max-width: 720px) {
  .overlay nav a { line-height: 1.15; padding-block: 15px; }
  .overlay .contact a { display: inline-block; padding-block: 12px; }
}
/* comfortable tap targets and legible small text on touch screens */
@media (max-width: 1100px), (pointer: coarse) {
  .link, .base-cta a, .site-footer ul a { display: inline-block; padding-block: 12px; }
  .direct a { text-decoration: none; }
  .foot-list a { padding-block: 8px; }
  .site-footer ul:not(.foot-list) { gap: 8px 20px; }
  .acq-steps .you span, .field label, .foot-h { font-size: 12px; }
}

/* v3.9b: phone — stronger scrims so small text stays legible over photography */
@media (max-width: 720px) {
  .hero-stage::before {
    background:
      linear-gradient(180deg, rgba(241,237,227,.97) 0%, rgba(241,237,227,.82) 9%, rgba(241,237,227,.4) 17%, rgba(241,237,227,0) 26%),
      linear-gradient(0deg, rgba(10,60,48,.97) 0%, rgba(10,60,48,.95) 50%, rgba(10,60,48,.78) 62%, rgba(10,60,48,.35) 74%, rgba(10,60,48,0) 86%);
  }
  .human .scrim { background: linear-gradient(0deg, rgba(10,60,48,.96) 0%, rgba(10,60,48,.9) 50%, rgba(10,60,48,.62) 72%, rgba(10,60,48,.2) 100%); }
  .foot-list li { margin-bottom: 2px; }
}
@media (max-width: 720px) { .verbs .lead { flex: 0 0 100%; margin-bottom: 4px; } }

/* v3.9c: tablets use the menu button too (the inline links need desktop width) */
@media (max-width: 1100px) {
  .primary-nav { display: none; }
  .nav-toggle { display: block; }
  .overlay { display: flex; }
}

/* v3.10: closing CTA as a framed card on an ivory band (breaks the run of greens) */
.closing-frame { padding-block: clamp(56px, 10vh, 112px); }
.closing-frame .closing { border-radius: var(--r-sec); padding-block: clamp(72px, 12vh, 140px); }
.closing-frame .closing-c { padding-inline: clamp(24px, 5vw, 72px); }
.closing-frame + .site-footer { border-top: 0; }
/* photograph scrim: neutral charcoal-green rather than brand green, so it stops reading as another green block */
.human .scrim { background: linear-gradient(12deg, rgba(14,26,21,.9) 0%, rgba(14,26,21,.5) 45%, rgba(14,26,21,.08) 100%); }
@media (max-width: 720px) {
  .human .scrim { background: linear-gradient(0deg, rgba(14,26,21,.94) 0%, rgba(14,26,21,.88) 50%, rgba(14,26,21,.6) 72%, rgba(14,26,21,.2) 100%); }
  .closing-frame .closing { padding-block: 64px; }
}

/* v3.11: general contact, routes and enquiry-type fields */
.closing-fine a { color: var(--sand); text-decoration: underline; text-underline-offset: 4px; text-transform: none; letter-spacing: .04em; font-size: 14px; }
.closing-fine a:hover { color: var(--ivory); }
.route-list { margin-top: 18px; border-top: 1px solid var(--line-inv); }
.route-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; border-bottom: 1px solid var(--line-inv); text-decoration: none; color: var(--ivory); transition: padding-left .4s var(--ease); }
.route-list a::after { content: "→"; color: var(--sand); transition: transform .4s var(--ease); }
.route-list a:hover { padding-left: 8px; }
.route-list a:hover::after { transform: translateX(4px); }
.route-list strong { display: block; font-weight: 500; font-size: 17px; }
.route-list em { display: block; font-style: normal; font-size: 14px; color: var(--on-deep); margin-top: 3px; }
.home-fields { grid-column: 1 / -1; display: grid; grid-template-columns: inherit; gap: inherit; }
.home-fields[hidden] { display: none; }
@media (max-width: 720px) { .home-fields { grid-template-columns: 1fr; gap: 22px; } }
.direct a { text-decoration: none; }
.prose .link { display: inline; padding: 0; }

/* v3.12 legal page, anchor offsets */
.legal-body { padding-bottom: clamp(72px, 12vh, 140px); }
.legal-grid { display: grid; gap: clamp(36px, 6vh, 64px); max-width: 44rem; }
.legal-grid article { scroll-margin-top: 110px; padding-top: 28px; border-top: 1px solid var(--line); }
.legal-grid h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 14px; }
.legal-grid p { color: var(--muted); }
#approach, #portfolio, #process, #how-we-work, #about, #conversation { scroll-margin-top: 72px; }

/* v3.13 legal copy */
.legal-wrap { max-width: 46rem; margin-left: 0; }
.legal-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.legal-nav a { display: inline-block; padding: 10px 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 500; color: var(--green); text-decoration: none; }
.legal-nav a:hover { background: var(--sage); }
.legal-date { color: var(--muted); font-size: 14px; margin-bottom: clamp(28px, 5vh, 48px); }
.legal-grid { max-width: none; }
.legal-grid article { scroll-margin-top: 96px; }
.legal-grid h3 { font-family: var(--sans); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--teal); margin: 30px 0 10px; }
.legal-grid p, .legal-grid li { color: var(--ink); font-size: 16.5px; line-height: 1.65; max-width: 40rem; }
.legal-grid p { margin: 0 0 14px; }
.legal-grid ul { margin: 0 0 16px; padding-left: 1.2em; }
.legal-grid li { margin-bottom: 8px; }
.legal-grid .link { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.legal-grid ul { list-style: disc; }
.legal-grid .link { text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: 500; display: inline; padding: 0; border: 0; }

/* v3.14 form: honeypot, error, busy state */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { margin: 18px 0 0; padding: 12px 16px; border-radius: var(--r-ui, 12px); background: var(--stone); box-shadow: inset 3px 0 0 #9A3B2A; color: var(--ink); font-size: 15px; line-height: 1.5; }
.form-error a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.btn.is-busy { opacity: .6; cursor: progress; }

/* ═══ v4.0 · homepage hero slideshow ═════════════════════════════
   Stowlangtoft Hall stays as the base photograph (the --img background). The photos in
   .hero-slides fade in over it, one at a time; the same scrims sit above all of them.     */
.hero-stage { isolation: isolate; }
.hero-slides { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-slides img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease-in-out;
}
.hero-slides img.is-on { opacity: 1; }
.hero-copy { padding-bottom: calc(clamp(32px, 6vh, 60px) + 44px); }
.hero-ui {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 16px; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  pointer-events: none;
}
.hero-cap { margin: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.88); text-shadow: 0 1px 12px rgba(10,60,48,.6); }
.hero-toggle {
  pointer-events: auto; flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.55); background: rgba(10,60,48,.45); color: #fff; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.hero-toggle:hover { background: rgba(10,60,48,.75); border-color: #fff; }
.hero-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hero-toggle svg { fill: currentColor; }
.hero-toggle .i-play { display: none; }
.is-paused .hero-toggle .i-pause { display: none; }
.is-paused .hero-toggle .i-play { display: block; }
.hero-static .hero-toggle { display: none; }
@media (max-width: 720px) { .hero-cap { font-size: 10px; letter-spacing: .16em; } }
@media (prefers-reduced-motion: reduce) { .hero-slides img { transition: none; } }

/* phone only: lift three slides so the buildings sit in the lighter upper part of the hero
   (Stowlangtoft Hall and Manson House are left as they were) */
@media (max-width: 720px) {
  .hero-slides img.m-halstead  { top: -22%; bottom: auto; height: 122%; object-position: 48% 50% !important; }
  .hero-slides img.m-hawthorne { top: -26%; bottom: auto; height: 126%; object-position: 56% 50% !important; }
  .hero-slides img.m-althorp   { top: -24%; bottom: auto; height: 124%; object-position: 14% 50% !important; }
}