/* ============================================================
   AC RESIDENTIAL — v6
   Monochrome, high contrast. Ink on white. Text pops.
   Playfair Display headings, Figtree body. Photography-led.

   The design is the deployed v4 site, unchanged. v6 adds only
   the pieces Wayne asked to carry over: guide ranges, price per
   sq ft, reinstatement, letting evidence, building galleries,
   review + subscribe, and a properly designed calculator.
   ============================================================ */

:root {
  --white: #ffffff;
  --ivory: #f6f5f2;
  --ink: #0e0e10;
  --char: #1a1a1c;
  --mut: #4d4c48;
  --line: rgba(14, 14, 16, 0.16);
  --line-light: rgba(255, 255, 255, 0.28);
  --max: 1280px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: "Figtree", system-ui, sans-serif;
  font-weight: 300;
  background: var(--white);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .serif {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 500;
  line-height: 1.15;
  color: var(--ink);
}
h1 em, h2 em, h3 em, blockquote em { font-style: italic; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 5vw; }

.kicker {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  margin-bottom: 1.4rem;
}

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: transparent;
  transition: background 0.35s, box-shadow 0.35s;
}
.nav.solid { background: rgba(255, 255, 255, 0.98); box-shadow: 0 1px 0 var(--line); }
.nav-inner {
  max-width: var(--max); margin: 0 auto; padding: 1.3rem 5vw;
  display: flex; align-items: center; justify-content: space-between;
}
.wordmark {
  font-family: "Playfair Display", serif;
  font-size: 1.2rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #fff; transition: color 0.35s; white-space: nowrap;
}
.wordmark b { font-weight: 500; }
.nav.solid .wordmark { color: var(--ink); }
.nav-links { display: flex; gap: 2.4rem; align-items: center; }
.nav-links a {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: #fff; opacity: 0.9; transition: 0.25s; position: relative; padding: 0.3rem 0;
}
.nav.solid .nav-links a { color: var(--ink); opacity: 0.8; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px;
  width: 0; background: currentColor; transition: width 0.3s;
}
.nav-links a:hover { opacity: 1; }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active { opacity: 1; }
.nav-cta { border: 1px solid currentColor; padding: 0.65rem 1.5rem !important; opacity: 1 !important; }
.nav-cta::after { display: none; }
.nav-cta:hover { background: #fff; color: var(--ink) !important; border-color: #fff; }
.nav.solid .nav-cta:hover { background: var(--ink); color: #fff !important; border-color: var(--ink); }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; z-index: 110; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--ink); margin: 6px 0; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center;
  isolation: isolate; color: #fff;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; background-color: #1a1a1c; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,8,10,0.6) 0%, rgba(8,8,10,0.3) 45%, rgba(8,8,10,0.7) 100%);
}
.hero-inner { width: 100%; padding-top: 6rem; }
.hero .kicker { color: #fff; }
.hero h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  max-width: 18ch; color: #fff;
  text-shadow: 0 2px 28px rgba(0,0,0,0.45);
}
.hero .lede {
  margin-top: 1.8rem; max-width: 54ch;
  font-size: 1.1rem; font-weight: 400; color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 14px rgba(0,0,0,0.4);
}
.hero-cta { display: flex; gap: 1.4rem; margin-top: 2.8rem; flex-wrap: wrap; }
.hero-scroll {
  position: absolute; bottom: 2.4rem; left: 50%; transform: translateX(-50%);
  font-size: 0.64rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(255,255,255,0.8);
}
.hero.sub { min-height: 64vh; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; font-family: "Figtree", sans-serif;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase;
  padding: 1.05rem 2.4rem; transition: 0.3s; cursor: pointer;
  border: 1px solid #fff; color: var(--ink); background: #fff;
}
.btn:hover { background: transparent; color: #fff; }
.btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.85); }
.btn.ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn.outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.outline:hover { background: var(--ink); color: #fff; }
.btn.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.dark:hover { background: transparent; color: var(--ink); }
.text-link {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 0.35rem;
  transition: opacity 0.25s;
}
.text-link:hover { opacity: 0.55; }

/* ---------- sections ---------- */
section { padding: 7.5rem 0; }
.bg-ivory { background: var(--ivory); }
.bg-ink { background: var(--ink); color: #fff; }
.bg-ink h2, .bg-ink h3, .bg-ink h4, .bg-ink .kicker { color: #fff; }
.bg-ink .section-head p { color: rgba(255,255,255,0.7); }

.section-head { text-align: center; max-width: 740px; margin: 0 auto 4.5rem; }
.section-head h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.section-head p { margin-top: 1.4rem; color: var(--mut); font-size: 1rem; }

.intro-statement {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 400; line-height: 1.5; text-align: center;
  max-width: 32ch; margin: 0 auto; color: var(--ink);
}
.intro-sub { text-align: center; max-width: 64ch; margin: 1.8rem auto 0; color: var(--mut); font-size: 1rem; }

/* ---------- the [to confirm] marker ---------- */
.tbc {
  font-family: "Figtree", sans-serif; font-style: normal;
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mut); border: 1px dashed var(--line);
  padding: 0.2rem 0.6rem; white-space: nowrap; vertical-align: middle;
}
.bg-ink .tbc, .forms-band .tbc, .calc-out .tbc { color: rgba(255,255,255,0.6); border-color: var(--line-light); }

/* ---------- building cards ----------
   Full-width alternating rows: image one side, text the other, flipping on
   every second building. Wayne's instruction 12 Aug 2026 - the stacked
   two-column grid read as a listings page; an estate agency of this level
   presents a building at a time. */
.bgrid { display: grid; grid-template-columns: 1fr; gap: 3.4rem; }
.bcard {
  background: var(--white); border: 1px solid var(--line);
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch;
  transition: box-shadow 0.35s;
}
.bcard:hover { box-shadow: 0 24px 60px rgba(14,14,16,0.12); }
/* every second building flips: text left, image right */
.bcard:nth-child(even) .bcard-media { order: 2; }
.bcard-media {
  position: relative; overflow: hidden; background: var(--ivory);
  min-height: 400px;
}
/* The image is taken OUT of the flow. Left in it, a portrait-orientation
   photograph sets the panel's height from its own natural size - 8 Artillery
   Row's shot stretched its row to 829px against 380px for the rest. Absolute
   positioning means the panel is sized by the row, and the photograph crops
   to fill it whatever shape it arrives in. */
.bcard-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s ease;
}
.bcard:hover .bcard-media img { transform: scale(1.035); }
.bcard-media .flag {
  position: absolute; top: 1rem; left: 1rem;
  font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase;
  background: rgba(8,8,10,0.6); color: rgba(255,255,255,0.9);
  padding: 0.45rem 0.85rem; backdrop-filter: blur(6px);
}
.bcard-media .area-tag {
  position: absolute; bottom: 1rem; left: 1rem;
  font-size: 0.66rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase;
  background: #fff; color: var(--ink); padding: 0.5rem 1rem;
}
.bcard-body {
  padding: 3rem 3.2rem; display: flex; flex-direction: column;
  justify-content: center; min-width: 0;
}
.bcard-body h3 { font-size: 2.2rem; }
.bcard-body .desc { margin-top: 0.8rem; font-size: 0.95rem; color: var(--mut); }
.bcard-actions { margin-top: auto; padding-top: 1.8rem; display: flex; gap: 2rem; align-items: center; }

/* ---------- guide range: sealed until asked for ---------- */
.guide { margin-top: 1.6rem; border-top: 1px solid var(--ink); }
.guide-row { border-bottom: 1px solid var(--line); }
.guide-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.9rem 0; cursor: pointer; gap: 1rem;
  background: none; border: 0; width: 100%; text-align: left;
  font-family: inherit; font-size: 0.94rem; font-weight: 400; color: var(--char);
}
.guide-head:hover .guide-open { opacity: 1; }
.guide-open {
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mut); opacity: 0.7; transition: opacity 0.25s; white-space: nowrap;
}
.guide-open::after { content: " \2192"; }
.guide-row.open .guide-open { visibility: hidden; }
.guide-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.2,0.6,0.2,1);
}
.guide-row.open .guide-body { grid-template-rows: 1fr; }
.guide-body > div { overflow: hidden; }
.guide-inner { padding: 0.2rem 0 1.3rem; }
.guide-range {
  font-family: "Playfair Display", serif; font-size: 1.5rem;
  color: var(--ink); line-height: 1.2;
}
.guide-range .dash { color: var(--mut); margin: 0 0.45rem; }
.guide-range .from-word {
  font-family: "Figtree", sans-serif; font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--mut);
  margin-right: 0.7rem; vertical-align: middle;
}
.pfnote {
  margin-top: auto; padding-top: 1.6rem; align-self: flex-start;
  font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mut);
}
.guide-meta { display: flex; flex-wrap: wrap; gap: 1.8rem; margin-top: 1rem; }
.guide-meta div { display: flex; flex-direction: column; }
.guide-meta .k { font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mut); }
.guide-meta .v { font-size: 0.98rem; color: var(--char); margin-top: 0.2rem; }
.guide-note { margin-top: 1rem; font-size: 0.82rem; color: var(--mut); max-width: 48ch; }

/* purchase / rental switch above the guide */
.guide-tabs { display: flex; border: 1px solid var(--ink); margin-bottom: 2.2rem; }
.guide-tabs button {
  flex: 1; background: none; border: 0; cursor: pointer;
  font-family: "Figtree", sans-serif; font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--mut);
  padding: 1rem 0.6rem; transition: 0.25s;
}
.guide-tabs button + button { border-left: 1px solid var(--ink); }
.guide-tabs button.on { background: var(--ink); color: #fff; }
.guide-tabs button:hover:not(.on) { background: var(--ivory); color: var(--ink); }
.guide-rows { border-top: 1px solid var(--ink); }
.guide:has(.guide-tabs) { border-top: 0; }

/* ---------- life here ---------- */
.life { display: grid; grid-template-columns: 1fr; gap: 3.5rem; }
.life-story { max-width: 62ch; margin: 0 auto; text-align: center; }
.life-story h3 {
  font-family: "Figtree", sans-serif; font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--mut); margin-bottom: 1rem;
}
.life-story h3 + p { font-family: "Playfair Display", serif; font-size: 1.25rem; line-height: 1.6; color: var(--ink); }
.life-story h3:not(:first-child) { margin-top: 2.6rem; }
.life-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem; }
.life-col { border-top: 1px solid var(--ink); padding-top: 1.4rem; }
.life-col h4 {
  font-family: "Figtree", sans-serif; font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--mut); margin-bottom: 1.1rem;
}
.life-col ul { list-style: none; }
.life-col li { padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; color: var(--char); }
.life-empty { margin-top: 0.4rem; }

/* ---------- letting evidence ---------- */
/* three metrics since the management fee was removed (12 Aug 2026) */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.proof { text-align: center; padding: 2.4rem 1.2rem; border: 1px solid var(--line); background: var(--white); }
.bg-ink .proof { border-color: rgba(255,255,255,0.2); background: transparent; }
.proof .pv {
  font-family: "Playfair Display", serif; font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1; color: var(--ink); display: block;
}
.bg-ink .proof .pv { color: #fff; }
.proof .pk { display: block; margin-top: 1rem; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mut); }
.bg-ink .proof .pk { color: rgba(255,255,255,0.6); }
.proof .pd { margin-top: 0.7rem; font-size: 0.86rem; color: var(--mut); }
.bg-ink .proof .pd { color: rgba(255,255,255,0.55); }

/* toggle inside a metric tile */
.ptog { display: flex; justify-content: center; gap: 0; margin-bottom: 1.6rem; }
.ptog button {
  background: none; border: 1px solid var(--line); cursor: pointer;
  font-family: "Figtree", sans-serif; font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut);
  padding: 0.45rem 0.85rem; transition: 0.25s;
}
.ptog button + button { border-left: 0; }
.ptog button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.bg-ink .ptog button { border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.6); }
.bg-ink .ptog button.on { background: #fff; color: var(--ink); border-color: #fff; }
.proof[data-metric] .pv { min-height: 1em; }

/* ---------- portfolio sales ---------- */
.pfgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; }
.pfcard {
  background: var(--white); border: 1px solid var(--line);
  display: flex; flex-direction: column; transition: box-shadow 0.35s, transform 0.35s;
}
.pfcard:hover { box-shadow: 0 20px 50px rgba(14,14,16,0.12); transform: translateY(-4px); }
.pfcard-media { aspect-ratio: 4 / 2.6; overflow: hidden; background: var(--ivory); }
.pfcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
.pfcard:hover .pfcard-media img { transform: scale(1.05); }
.pfcard-body { padding: 1.8rem 2rem 2rem; display: flex; flex-direction: column; flex: 1; }
.pfcard-body h3 { font-size: 1.4rem; }
.pfcard-body .desc {
  margin-top: 0.4rem; font-size: 0.64rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--mut);
}
.pflines { margin: 1.5rem 0 0; border-top: 1px solid var(--ink); }
.pfline {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.75rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem;
}
.pfline .k { color: var(--mut); }
.pfline .v { font-family: "Playfair Display", serif; font-size: 1.08rem; color: var(--ink); }
.pfcard-body .text-link { margin-top: auto; padding-top: 1.6rem; align-self: flex-start; border-bottom: 0; }

/* the wide feature box on the home page */
.pffeature { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.pffeature h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
.pffeature p { margin-top: 1.3rem; color: rgba(255,255,255,0.72); font-size: 1rem; max-width: 46ch; }
.pffacts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.pffact { border: 1px solid rgba(255,255,255,0.2); padding: 1.8rem 1.6rem; }
.pffact .fv { font-family: "Playfair Display", serif; font-size: 1.7rem; color: #fff; display: block; }
.pffact .fk {
  display: block; margin-top: 0.6rem; font-size: 0.6rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
}

/* ---------- calculator ---------- */
.calc { display: grid; grid-template-columns: 1.05fr 0.95fr; border: 1px solid var(--line); background: var(--white); }
.calc-controls { padding: 3rem 3.2rem; }
.calc-out { padding: 3rem 3.2rem; background: var(--ink); color: #fff; }

.calc-seg { display: flex; border: 1px solid var(--line); margin-bottom: 2.4rem; }
.calc-seg button {
  flex: 1; background: none; border: 0; cursor: pointer;
  font-family: "Figtree", sans-serif; font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--mut);
  padding: 0.9rem 0.4rem; transition: 0.25s;
}
.calc-seg button + button { border-left: 1px solid var(--line); }
.calc-seg button.on { background: var(--ink); color: #fff; }

.ctrl { margin-bottom: 2.5rem; }
.ctrl-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; gap: 1rem; }
.ctrl-top .cl { font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mut); }
.ctrl-top .cv { font-family: "Playfair Display", serif; font-size: 1.35rem; color: var(--ink); }

input[type="range"].ac {
  -webkit-appearance: none; appearance: none;
  width: 100%; background: transparent; cursor: pointer; height: 22px; margin: 0;
}
input[type="range"].ac::-webkit-slider-runnable-track {
  height: 2px; background: var(--line);
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat; background-size: var(--pct, 0%) 100%;
}
input[type="range"].ac::-moz-range-track { height: 2px; background: var(--line); }
input[type="range"].ac::-moz-range-progress { height: 2px; background: var(--ink); }
input[type="range"].ac::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -7px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--ink);
  box-shadow: 0 2px 10px rgba(14,14,16,0.22);
  transition: transform 0.18s, box-shadow 0.18s;
}
input[type="range"].ac:hover::-webkit-slider-thumb,
input[type="range"].ac:focus::-webkit-slider-thumb { transform: scale(1.22); box-shadow: 0 4px 16px rgba(14,14,16,0.3); }
input[type="range"].ac::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--ink);
  box-shadow: 0 2px 10px rgba(14,14,16,0.22);
}
input[type="range"].ac:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
.ctrl-scale { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.62rem; letter-spacing: 0.14em; color: var(--mut); }

.calc-out .co-kick { font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.calc-out .co-big {
  font-family: "Playfair Display", serif; font-size: clamp(2.3rem, 4.2vw, 3.3rem);
  line-height: 1.05; color: #fff; margin-top: 0.8rem;
}
.calc-out .co-sub { font-size: 0.88rem; color: rgba(255,255,255,0.6); margin-top: 0.5rem; }
.co-lines { margin-top: 2.4rem; border-top: 1px solid rgba(255,255,255,0.18); }
.co-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 0.92rem;
}
.co-line .k { color: rgba(255,255,255,0.62); }
.co-line .v { font-family: "Playfair Display", serif; font-size: 1.12rem; color: #fff; }
.co-line.net { border-bottom: 0; padding-top: 1.4rem; }
.co-line.net .k { color: #fff; }
.co-line.net .v { font-size: 1.5rem; }
.co-foot { margin-top: 1.6rem; font-size: 0.78rem; color: rgba(255,255,255,0.5); line-height: 1.6; }

/* ---------- in pictures ---------- */
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.gal button {
  position: relative; overflow: hidden; background: var(--ivory);
  aspect-ratio: 4 / 3; display: block; border: 0; padding: 0; cursor: pointer; width: 100%;
}
.gal button:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.gal button:hover img { transform: scale(1.05); }
.gal-empty {
  border: 1px dashed var(--line); padding: 4.5rem 2rem; text-align: center;
  color: var(--mut); font-size: 0.9rem; grid-column: 1 / -1;
}

.lb { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(8,8,10,0.94); align-items: center; justify-content: center; }
.lb.open { display: flex; }
.lb img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.lb-close { position: absolute; top: 1.4rem; right: 1.8rem; background: none; border: 0; color: #fff; font-size: 2.2rem; cursor: pointer; line-height: 1; }

/* ---------- review ---------- */
.review { border: 1px solid var(--line); padding: 3rem 3.2rem; background: var(--white); }
.bg-ivory .review { background: var(--white); }
.review blockquote {
  font-family: "Playfair Display", serif; font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  line-height: 1.45; color: var(--ink);
}
.review .rmeta {
  margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem;
  font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mut);
}

/* ---------- subscribe ---------- */
.sub-band { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.sub-band h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.sub-band > div > p { margin-top: 1.2rem; color: rgba(255,255,255,0.7); font-size: 0.98rem; max-width: 44ch; }
.sub-form { display: flex; gap: 1.4rem; align-items: flex-end; }
.sub-form .field { flex: 1; margin-bottom: 0; }
.sub-form .btn { white-space: nowrap; padding: 0.95rem 2rem; }
.sub-note { margin-top: 1.2rem; font-size: 0.78rem; color: rgba(255,255,255,0.45); }

/* ---------- full-bleed quote band ---------- */
.band {
  position: relative; isolation: isolate; min-height: 62vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff;
  background-attachment: fixed; background-size: cover; background-position: center; background-color: #1a1a1c;
}
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8,8,10,0.62); }
.band blockquote {
  font-family: "Playfair Display", serif; font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.4;
  max-width: 30ch; padding: 4rem 5vw; color: #fff;
}

/* ---------- service cards ---------- */
/* four services since 12 Aug 2026 (acquisition & advisory added), so 2x2
   rather than a row of four narrow cards */
.sgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
.scard { background: var(--white); border: 1px solid var(--line); transition: box-shadow 0.35s, transform 0.35s; display: flex; flex-direction: column; }
.scard:hover { box-shadow: 0 20px 50px rgba(14,14,16,0.12); transform: translateY(-4px); }
.scard-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ivory); }
.scard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s; }
.scard:hover .scard-media img { transform: scale(1.05); }
.scard-body { padding: 2rem 2.2rem 2.4rem; flex: 1; display: flex; flex-direction: column; }
.scard-body h3 { font-size: 1.45rem; }
.scard-body p { margin-top: 0.8rem; font-size: 0.94rem; color: var(--mut); }
.scard-body .text-link { margin-top: auto; padding-top: 1.6rem; align-self: flex-start; border-bottom: none; }

/* ---------- why us ---------- */
.wgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem; }
.witem { text-align: center; padding: 0 0.5rem; }
.witem .wnum {
  font-family: "Playfair Display", serif; font-style: italic;
  font-size: 2.4rem; color: var(--ink); display: block; margin-bottom: 1rem;
}
.witem h3 { font-size: 1.2rem; margin-bottom: 0.8rem; }
.witem p { font-size: 0.92rem; color: var(--mut); }

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.split-media { position: relative; }
.split-media img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; background: var(--ivory); }
.split-media::after {
  content: ""; position: absolute; inset: 1.4rem -1.4rem -1.4rem 1.4rem;
  border: 1px solid var(--ink); z-index: -1;
}
.split .body-lg { font-size: 1.12rem; line-height: 1.8; color: var(--char); }
.split p + p { margin-top: 1.3rem; }
.split .muted { color: var(--mut); font-size: 0.98rem; }

/* ---------- forms band ---------- */
.forms-band { background: var(--ink); color: #fff; }
.forms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; }
.formcard h3 { font-size: 1.7rem; color: #fff; }
.formcard > p { margin: 0.9rem 0 2rem; font-size: 0.94rem; color: rgba(255,255,255,0.75); }
form .field { margin-bottom: 1.5rem; }
form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
form label {
  display: block; font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); margin-bottom: 0.5rem;
}
form input, form textarea, form select {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid var(--line-light); color: #fff;
  font-family: "Figtree", sans-serif; font-size: 0.98rem; font-weight: 300;
  padding: 0.65rem 0; outline: none; transition: border-color 0.3s;
}
form select option { background: var(--ink); }
form input:focus, form textarea:focus, form select:focus { border-bottom-color: #fff; }
form textarea { resize: vertical; min-height: 90px; }
.forms-band .btn, .bg-ink .btn { background: #fff; color: var(--ink); border-color: #fff; }
.forms-band .btn:hover, .bg-ink .btn:hover { background: transparent; color: #fff; }
.form-note { margin-top: 1.2rem; font-size: 0.78rem; color: rgba(255,255,255,0.5); }

/* ---------- detail list ---------- */
.detail-list { border-top: 1px solid var(--ink); }
.detail-item {
  display: grid; grid-template-columns: 1fr 2fr; gap: 3rem;
  padding: 2.6rem 0; border-bottom: 1px solid var(--line);
}
.detail-item h3 { font-size: 1.35rem; }
.detail-item p { font-size: 0.97rem; color: var(--mut); }

/* ---------- contact strip ---------- */
.contact-lines { margin-top: 2.4rem; }
.contact-line {
  display: flex; justify-content: space-between;
  padding: 1.2rem 0; border-bottom: 1px solid var(--line); font-size: 0.95rem;
}
.contact-line .k { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mut); padding-top: 0.2rem; }
.contact-line .v { text-align: right; }
.contact-line .v a { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.contact-line .v a:hover { opacity: 0.65; }
/* the contact block sits inside the dark enquiry band, so it inverts there.
   These rules replace per-element inline styles that had to be retyped on
   every page - the block is now rendered from compliance.js in one place. */
.forms-band .contact-line { border-bottom-color: rgba(255, 255, 255, 0.16); }
.forms-band .contact-line .k { color: rgba(255, 255, 255, 0.6); }
.forms-band .contact-line .v { color: #fff; }

/* ---------- footer ---------- */
footer { background: #0a0a0c; color: rgba(255,255,255,0.85); padding: 5rem 0 2.8rem; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 4rem; }
.foot-grid .wordmark { color: #fff; font-size: 1.05rem; }
.foot-grid > div > p { font-size: 0.88rem; color: rgba(255,255,255,0.6); max-width: 32ch; margin-top: 1.2rem; }
.foot-col h4 {
  font-family: "Figtree", sans-serif; font-size: 0.64rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 1.3rem; font-weight: 500;
}
.foot-col a { display: block; font-size: 0.9rem; padding: 0.32rem 0; opacity: 0.9; transition: 0.25s; }
.foot-col a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.foot-base {
  border-top: 1px solid rgba(255,255,255,0.14); padding-top: 2rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 0.76rem; color: rgba(255,255,255,0.5);
}

/* ---------- reveal (only once JS is running, so it can't hide content) ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s cubic-bezier(0.2,0.6,0.2,1), transform 0.9s cubic-bezier(0.2,0.6,0.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .bgrid, .split, .forms-grid, .calc, .sub-band { grid-template-columns: 1fr; }
  /* the alternating rows collapse back to image-above-text, and the flip is
     cancelled so every building reads in the same order on a phone */
  .bcard { grid-template-columns: 1fr; }
  .bcard:nth-child(even) .bcard-media { order: 0; }
  .bcard-media { min-height: 0; aspect-ratio: 16 / 9.5; }
  .bcard-body { padding: 2.2rem 2rem 2.4rem; }
  .sgrid { grid-template-columns: 1fr; }
  .wgrid, .proof-grid { grid-template-columns: 1fr 1fr; gap: 2.4rem; }
  .pfgrid { grid-template-columns: 1fr 1fr; }
  .pffeature { grid-template-columns: 1fr; gap: 3rem; }
  .gal { grid-template-columns: repeat(2, 1fr); }
  .life-cols { grid-template-columns: 1fr; gap: 2rem; }
  .split-media::after { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .band { background-attachment: scroll; }
  .calc-controls, .calc-out { padding: 2.4rem 2rem; }
}
@media (max-width: 760px) {
  .nav-links {
    position: fixed; inset: 0; background: rgba(255,255,255,0.98);
    flex-direction: column; justify-content: center; gap: 2.2rem; display: none;
  }
  .nav-links a { color: var(--ink) !important; }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
  section { padding: 5rem 0; }
  .detail-item { grid-template-columns: 1fr; gap: 1rem; }
  form .row { grid-template-columns: 1fr; }
  .proof-grid, .pfgrid, .pffacts { grid-template-columns: 1fr; }
  .gal button:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
  .sub-form { flex-direction: column; align-items: stretch; gap: 1.2rem; }
}

/* ---------- regulatory footer ---------- */
.compliance { border-top: 1px solid rgba(255,255,255,0.14); margin-top: 2.6rem; padding-top: 2.2rem; }
.compliance .badges {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.4rem; margin-bottom: 1.8rem;
}
.compliance .badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; opacity: 0.85; transition: opacity 0.25s;
}
.compliance .badge:hover { opacity: 1; }
.compliance .badge img { max-height: 34px; width: auto; filter: brightness(0) invert(1); }
.compliance .badge.missing {
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.5);
  border: 1px dashed rgba(255,255,255,0.3); padding: 0.5rem 0.9rem; height: auto;
}
.cregs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem 3rem; margin-bottom: 1.4rem; }
.creg { display: flex; justify-content: space-between; gap: 1.2rem; padding: 0.45rem 0;
        border-bottom: 1px solid rgba(255,255,255,0.09); font-size: 0.8rem; }
.creg .ck { color: rgba(255,255,255,0.55); white-space: nowrap; }
.creg .cv { color: rgba(255,255,255,0.9); text-align: right; }
.clegal { font-size: 0.72rem; line-height: 1.7; color: rgba(255,255,255,0.5); max-width: 92ch; }
.clegal + .clegal { margin-top: 0.7rem; }
.clegal a { text-decoration: underline; text-underline-offset: 3px; }
.compliance .tbc {
  font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); border: 1px dashed rgba(255,255,255,0.28); padding: 0.1rem 0.4rem;
}
@media (max-width: 760px) { .cregs { grid-template-columns: 1fr; } }