/* =========================================================================
   BuyRightProperty Investment — stylesheet
   Brand colours are all defined once, in the :root block directly below.
   Change a value there and it updates everywhere on the site.
   ========================================================================= */

:root {
  /* ---- BRAND COLOURS (edit these) ----
     These are the colours from the printed brochure, so the site and the
     print pieces match. Change a value here and it updates site-wide. */
  --green:       #14312a;   /* deep forest green — dark sections, buttons */
  --green-deep:  #0f2620;   /* darker green — footer, button hover */
  --green-mid:   #22463c;   /* mid green — hairlines on green */
  --cream:       #f5f3ee;   /* page background */
  --sand:        #eae7de;   /* alternating sections */
  --ink:         #1b1a17;   /* headings */
  --body:        #3b3931;   /* body text */
  --gold:        #b9a47c;   /* accent on dark backgrounds */
  --gold-deep:   #8a7548;   /* the same accent, darker, for light backgrounds */

  /* ---- semantic roles (these are what the components actually use) ---- */
  --bg:          var(--cream);
  --surface:     var(--sand);
  --card:        #fffdf9;   /* cards sit just above the cream page */
  --dark:        var(--green);
  /* --accent is the brochure gold, darkened just enough to stay legible as
     small text on cream and sand. --gold-deep stays the brand swatch for
     larger, decorative type. */
  --accent:      #75633d;
  --accent-deep: #5a4d2f;
  --accent-tint: #efe9dc;
  --accent-light: var(--gold);

  /* ---- derived ---- */
  --line:        rgba(27, 26, 23, 0.14);
  --line-strong: rgba(27, 26, 23, 0.26);
  --line-dark:   rgba(245, 243, 238, 0.18);
  --shadow-sm:   0 1px 2px rgba(27, 26, 23, 0.05), 0 1px 3px rgba(27, 26, 23, 0.04);
  --shadow-md:   0 4px 6px rgba(27, 26, 23, 0.04), 0 10px 24px rgba(27, 26, 23, 0.08);
  --shadow-lg:   0 12px 32px rgba(27, 26, 23, 0.12);

  /* ---- type ---- */
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* ---- layout ---- */
  --shell: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(56px, 7vw, 96px);
  --radius: 14px;
  --radius-sm: 8px;
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--sans);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.021em;
  margin: 0;
  line-height: 1.15;
  text-wrap: balance;
}

h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); letter-spacing: -0.03em; line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.35rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.05em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }

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

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--dark);
  color: #fff;
  padding: 12px 18px;
  z-index: 999;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; top: 0; }

/* -------------------------------------------------------------------------
   View switching
   Each nav item swaps the visible panel instead of scrolling the page.
   Without JavaScript every view stays visible, so the page still works.
   ------------------------------------------------------------------------- */

.js-views .view { display: none; }
.js-views .view.is-active {
  display: block;
  animation: viewIn 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes viewIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   Reusable bits
   ------------------------------------------------------------------------- */

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 14px;
  line-height: 1.5;
}
.on-green .eyebrow { color: var(--accent-light); }

.lede {
  font-size: clamp(1.03rem, 1.4vw, 1.16rem);
  line-height: 1.7;
  max-width: 62ch;
  color: var(--body);
}

.section { padding-block: var(--section-y); }
.section--surface { background: var(--surface); }
.section--green { background: var(--dark); color: rgba(255, 255, 255, 0.78); }
.section--green h2,
.section--green h3,
.section--green h4 { color: #fff; }

.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head .lede { margin-top: 16px; }

/* Split head — heading on the left, supporting copy on the right. Use it on
   wide sections so the text doesn't hug the left third of the screen. Put the
   eyebrow and the heading in the first child, the paragraphs in the second.
   On a page-head, wrap the two children in <div class="head-split">. */
.section-head--split { max-width: none; }
.section-head--split,
.head-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: end;
}
.section-head--split > *:first-child,
.head-split > *:first-child { align-self: start; }
.section-head--split .lede,
.head-split .lede { margin-top: 0; }
.head-split .lede p + p { margin-top: 14px; }
@media (max-width: 860px) {
  .section-head--split,
  .head-split {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* page-title band that opens each switched view */
.page-head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(34px, 5vw, 56px);
}
.page-head h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); max-width: 20ch; }
.page-head .lede { margin-top: 16px; }
/* the title band already gives breathing room, so the panel under it starts tighter */
.page-head + .section { padding-top: clamp(30px, 4vw, 52px); }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 13px 24px;
  border: 1.5px solid var(--dark);
  border-radius: var(--radius-sm);
  background: var(--dark);
  color: var(--cream);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease,
              transform 0.16s ease, box-shadow 0.16s ease;
}
.btn:hover {
  background: var(--green-deep);
  border-color: var(--green-deep);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--dark); border-color: var(--dark); color: var(--cream); }

.btn--light { background: var(--cream); border-color: var(--cream); color: var(--green); }
.btn--light:hover { background: #ffffff; border-color: #ffffff; color: var(--green); }

.btn--outline-light { background: transparent; border-color: var(--line-dark); color: #fff; }
.btn--outline-light:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }

/* text link with arrow */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.94rem;
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.16s ease, gap 0.16s ease;
}
.arrow-link::after { content: "\2192"; transition: transform 0.16s ease; }
.arrow-link:hover { border-bottom-color: var(--accent); }
.arrow-link:hover::after { transform: translateX(3px); }

/* pale info panel */
.callout {
  background: var(--accent-tint);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 20px 24px;
  color: var(--ink);
  font-size: 1rem;
  max-width: 62ch;
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(245, 243, 238, 0.97);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
/* The BRP mark — gold monogram inside a plain gold rectangle on deep green.
   Inline SVG rather than a picture, so it stays sharp at any size, costs no
   extra request, and can recolour itself for the dark footer. It matches
   favicon.svg — change one and change the other, or the browser tab and the
   header stop being the same badge. */
.brand__mark {
  width: 48px;
  height: 44px;
  flex: none;
  display: block;
}
.brand__mark-bg { fill: var(--green); }
.brand__mark-frame {
  fill: none;
  stroke: var(--gold);
  /* Heavier than a hairline on purpose: 1px would drop below a device pixel at
     this size on standard screens and disappear. */
  stroke-width: 3;
}
.brand__mark text {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 44px;
  letter-spacing: 1.5px;
  fill: var(--gold);
}
/* Small phones: the header is mark + name + Menu button on one row, and at
   320px the full-size mark pushes the button off the edge. Trim it there. */
@media (max-width: 360px) {
  .brand__mark { width: 44px; height: 40px; }
}
/* On the dark footer the green square disappears, so lift it slightly. */
.footer .brand__mark-bg { fill: rgba(255, 255, 255, 0.12); }
.brand__name {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  display: block;
}
.brand__sub {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--body);
  display: block;
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: clamp(4px, 1vw, 10px); }
.nav a {
  color: var(--body);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: color 0.16s ease, background 0.16s ease;
}
.nav a:hover { color: var(--ink); background: var(--surface); }
.nav a.is-current { color: var(--accent); background: var(--accent-tint); font-weight: 600; }

.nav__cta {
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 600 !important;
  margin-left: 6px;
}
.nav__cta:hover { background: var(--accent-deep) !important; color: #fff !important; }

.header__cta {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.header__cta:hover { color: var(--accent); }

.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  padding: 9px 14px;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 1080px) {
  .nav a { padding: 8px 9px; font-size: 0.86rem; }
  .header__cta { display: none; }
}

@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 10px var(--gutter) 20px;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 12px; font-size: 1rem; }
  .nav .nav__cta { margin-top: 10px; margin-left: 0; text-align: center; }
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.hero {
  background:
    radial-gradient(1000px 420px at 80% -15%, rgba(185, 164, 124, 0.22), transparent 62%),
    linear-gradient(180deg, var(--green) 0%, var(--green-deep) 100%);
  color: rgba(245, 243, 238, 0.8);
  padding-block: clamp(52px, 7.5vw, 92px);
}
.hero h1 { color: var(--cream); }
.hero__copy { color: rgba(245, 243, 238, 0.82); }
.hero .stat {
  background: rgba(245, 243, 238, 0.06);
  border-color: var(--line-dark);
  box-shadow: none;
}
.hero .stat:hover { background: rgba(245, 243, 238, 0.1); transform: translateY(-2px); box-shadow: none; }
.hero .stat__figure { color: var(--cream); }
.hero .stat__label { color: rgba(245, 243, 238, 0.7); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.hero h1 { max-width: 16ch; }
.hero__copy { font-size: 1.06rem; line-height: 1.72; max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(245, 243, 238, 0.08);
  border: 1px solid var(--line-dark);
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(245, 243, 238, 0.82);
  margin-bottom: 20px;
}
.hero__badge b { color: var(--gold); font-weight: 600; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: 100%; }
}

/* stat cards */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(36px, 5vw, 56px);
}
.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat__figure {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
  display: block;
}
.stat__label {
  display: block;
  margin-top: 10px;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--body);
  line-height: 1.5;
}
.section--green .stat { background: rgba(255,255,255,0.06); border-color: var(--line-dark); box-shadow: none; }
.section--green .stat__figure { color: #fff; }
.section--green .stat__label { color: rgba(255,255,255,0.7); }

@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------------------------------
   Cards, reasons, lists
   ------------------------------------------------------------------------- */

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 26px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 26px); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }

/* big figure inside a card — used for the ownership statistics */
.card__figure {
  display: block;
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.card__source { display: block; margin-top: 12px; font-size: 0.78rem; color: var(--body); opacity: 0.75; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 30px);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.card h3 { margin-bottom: 10px; }
.card p { font-size: 0.97rem; }
.card__num {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent-deep);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 14px;
}

/* bullet list with tick markers */
.marks { list-style: none; margin: 0; padding: 0; }
.marks li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 13px;
  font-size: 0.98rem;
  line-height: 1.6;
}
.marks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent-tint);
  border: 1px solid rgba(138, 117, 72, 0.38);
}
.marks li::after {
  content: "";
  position: absolute;
  left: 5.5px; top: 0.72em;
  width: 4px; height: 7px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(42deg);
}
.marks li:last-child { margin-bottom: 0; }

/* a long checklist reads better split across two columns */
.marks--cols { columns: 2; column-gap: clamp(28px, 4vw, 56px); }
.marks--cols li { break-inside: avoid; }
@media (max-width: 700px) { .marks--cols { columns: 1; } }
.on-green .marks li::before { background: rgba(255,255,255,0.1); border-color: var(--line-dark); }
.on-green .marks li::after { border-color: var(--accent-light); }

/* -------------------------------------------------------------------------
   Services
   ------------------------------------------------------------------------- */

.service {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(24px, 3vw, 34px);
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.service:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.service:last-child { margin-bottom: 0; }
.service h3 { margin-bottom: 16px; }
.service__note {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--accent-deep);
  font-weight: 500;
  font-size: 0.92rem;
  max-width: 56ch;
}
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--body);
  white-space: nowrap;
}
@media (max-width: 780px) { .service { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   Process
   ------------------------------------------------------------------------- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 14px; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 22px 24px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.step:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255,255,255,0.3); }
.step::before {
  content: "0" counter(step);
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(185, 164, 124, 0.18);
  color: var(--accent-light);
  font-size: 0.85rem;
  font-weight: 600;
}
.step h3 { margin-bottom: 7px; }
.step p { color: rgba(255, 255, 255, 0.76); max-width: 66ch; font-size: 0.96rem; }
@media (max-width: 640px) {
  .step { grid-template-columns: 1fr; gap: 12px; }
}

.pullquote {
  margin-top: clamp(30px, 4vw, 48px);
  border-left: 3px solid var(--accent);
  padding: 6px 0 6px 24px;
  font-size: clamp(1.12rem, 2vw, 1.4rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.45;
  color: var(--ink);
  max-width: 46ch;
}
.on-green .pullquote { color: #fff; border-left-color: var(--accent-light); }

/* -------------------------------------------------------------------------
   Portfolio
   ------------------------------------------------------------------------- */

.properties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 26px);
}
@media (max-width: 860px) { .properties { grid-template-columns: 1fr; } }

/* Three across, for the client-purchases row. Drops to two, then one. */
.properties--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1040px) { .properties--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .properties--3 { grid-template-columns: 1fr; } }

.property {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.property:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.property__img {
  width: 100%;
  aspect-ratio: 16 / 7;
  height: auto;
  object-fit: cover;
  object-position: center;
  background: var(--surface);
}
.property__inner { padding: 22px clamp(18px, 2.2vw, 26px) 26px; display: flex; flex-direction: column; flex: 1; }
.property__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.tag {
  background: var(--accent-tint);
  color: var(--accent-deep);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.tag--muted { background: var(--surface); color: var(--body); font-weight: 500; }
.property h3 { font-size: 1.3rem; margin-bottom: 6px; }
.property__spec { font-size: 0.88rem; color: var(--body); margin-bottom: 18px; }

.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.figures--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Two across — used where the second figure is a range, which needs the room. */
.figures--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.figures--2 .figure__value { font-size: clamp(0.94rem, 1.35vw, 1.06rem); }
.figure__label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--body);
  margin-bottom: 5px;
}
.figure__value {
  display: block;
  font-size: clamp(0.98rem, 1.5vw, 1.14rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
}
/* Growth figures use the brochure gold, same as every other accent on the
   site — no extra colour introduced just for these. Must stay AFTER the
   .figure__value rule above: same specificity, so the later one wins. */
.figure__value--up { color: var(--accent); }
.figure__delta {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
}
@media (max-width: 480px) {
  .figures, .figures--4 { grid-template-columns: repeat(2, 1fr); }
}

.property__note { font-size: 0.94rem; line-height: 1.62; margin-top: auto; }
.property__note .est { color: var(--body); opacity: 0.8; }

.disclaimer {
  margin-top: clamp(24px, 3.5vw, 36px);
  padding: 18px 20px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  line-height: 1.62;
  color: var(--body);
  max-width: 90ch;
}

/* -------------------------------------------------------------------------
   Team
   ------------------------------------------------------------------------- */

.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 26px);
}
@media (max-width: 760px) { .people { grid-template-columns: 1fr; } }

.person {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 2.8vw, 32px);
  box-shadow: var(--shadow-sm);
}
.person__avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.person h3 { margin-bottom: 4px; }
.person__role {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 16px;
}
.person p { font-size: 0.96rem; }
.person .chips { margin-top: 18px; }

/* -------------------------------------------------------------------------
   Deliverables
   ------------------------------------------------------------------------- */

.deliverables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.deliverable {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  font-size: 0.95rem;
  line-height: 1.55;
}
.deliverable strong { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: 6px; }
@media (max-width: 700px) { .deliverables { grid-template-columns: 1fr; } }

.stance {
  background: var(--dark);
  color: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius);
  margin-top: clamp(28px, 4vw, 44px);
  padding: clamp(26px, 3.6vw, 44px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3.4vw, 44px);
}
.stance h3 { color: #fff; margin-bottom: 12px; }
.stance p { font-size: 0.97rem; }
@media (max-width: 700px) { .stance { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   FAQ
   ------------------------------------------------------------------------- */

.faq { display: grid; gap: 10px; }
.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.faq details[open] { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 20px;
  position: relative;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after,
.faq summary::before {
  content: "";
  position: absolute;
  background: var(--accent);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.faq summary::after { right: 20px; top: 50%; width: 12px; height: 2px; transform: translateY(-50%); }
.faq summary::before { right: 25px; top: 50%; width: 2px; height: 12px; transform: translateY(-50%); }
.faq details[open] summary::before { opacity: 0; }
.faq__answer { padding: 0 20px 20px; }
.faq__answer p { font-size: 0.98rem; max-width: 74ch; }

/* -------------------------------------------------------------------------
   Contact
   ------------------------------------------------------------------------- */

.next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: clamp(34px, 5vw, 54px); }
.next__item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.next__num {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(185, 164, 124, 0.18);
  color: var(--accent-light);
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 12px;
}
.next__item h4 { color: #fff; margin-bottom: 8px; }
.next__item p { font-size: 0.93rem; color: rgba(255, 255, 255, 0.74); }
@media (max-width: 820px) { .next { grid-template-columns: 1fr; } }

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }

.detail { border-top: 1px solid var(--line-dark); padding: 18px 0 20px; }
.detail:first-of-type { border-top: 0; padding-top: 0; }
.detail__label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
  margin-bottom: 8px;
}
.detail__value {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
  line-height: 1.25;
  display: inline-block;
  word-break: break-word;
}
a.detail__value:hover { color: var(--accent-light); }
.detail__hint {
  font-size: 0.87rem;
  color: rgba(255, 255, 255, 0.62);
  margin-top: 6px;
  overflow-wrap: anywhere;
}

/* form */
.form {
  display: grid;
  gap: 15px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 32px);
}
.field { display: grid; gap: 6px; }
.field label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.78);
}
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 0.97rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.field textarea { min-height: 112px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent-light);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(185, 164, 124, 0.28);
  outline: none;
}
.field select option { color: var(--ink); background: var(--cream); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.form__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.form__note { font-size: 0.83rem; color: rgba(255, 255, 255, 0.55); }
.form__status { font-size: 0.9rem; color: var(--accent-light); min-height: 1.2em; }

/* -------------------------------------------------------------------------
   Home teasers
   ------------------------------------------------------------------------- */

.teaser-foot { margin-top: clamp(22px, 3vw, 32px); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

.cta-band {
  background: var(--dark);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
}
.cta-band h2 { color: #fff; margin-bottom: 10px; }
.cta-band .hero__actions { margin-top: 0; }
@media (max-width: 780px) { .cta-band { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.footer {
  background: var(--dark);
  color: rgba(255, 255, 255, 0.66);
  padding-block: clamp(40px, 5vw, 60px) 30px;
  font-size: 0.9rem;
}
.footer .brand { color: #fff; }

.footer .brand__sub { color: rgba(255,255,255,0.6); }
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px);
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line-dark);
}
.footer__blurb { max-width: 44ch; line-height: 1.65; margin-top: 16px; }
.footer h4 {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 9px; overflow-wrap: anywhere; }
.footer a { text-decoration: none; transition: color 0.16s ease; }
.footer a:hover { color: var(--accent-light); }
.footer__base {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  padding-top: 22px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.52);
}
@media (max-width: 780px) { .footer__top { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   Credibility strip — the three proof points under the hero
   ------------------------------------------------------------------------- */

.cred {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(185, 164, 124, 0.22);
  border: 1px solid rgba(185, 164, 124, 0.22);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: clamp(36px, 5vw, 56px);
}
.cred__item {
  background: rgba(245, 243, 238, 0.045);
  padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.4vw, 30px);
}
.cred__figure {
  display: block;
  font-size: clamp(1.6rem, 2.8vw, 2.15rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--gold);
}
.cred__label {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(185, 164, 124, 0.22);
  font-size: 0.86rem;
  line-height: 1.5;
  /* 0.82 keeps this above 4.5:1 on the hero green — see EDIT-GUIDE section 3 */
  color: rgba(245, 243, 238, 0.82);
}
@media (max-width: 760px) { .cred { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   Portfolio lifecycle — Acquire, Grow, Hold, Review, Reposition
   ------------------------------------------------------------------------- */

.cycle {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 16px);
  margin-top: clamp(26px, 3.5vw, 40px);
  counter-reset: cycle;
}
.cycle__step {
  counter-increment: cycle;
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent-light);
  border-radius: var(--radius);
  padding: clamp(22px, 2.4vw, 28px) clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 26px);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.cycle__step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
  border-top-color: var(--accent);
}
/* the stage number, set small above the name */
.cycle__step::before {
  content: "0" counter(cycle);
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 12px;
}
/* the connecting rule between stages */
.cycle__step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(clamp(10px, 1.4vw, 16px) * -1);
  width: clamp(10px, 1.4vw, 16px);
  height: 1px;
  background: var(--line-strong);
}
.cycle__step:last-child::after { display: none; }
.cycle__name {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 9px;
}
.cycle__step p { font-size: 0.89rem; line-height: 1.55; }
@media (max-width: 1000px) {
  .cycle { grid-template-columns: repeat(3, 1fr); }
  .cycle__step::after { display: none; }
}
@media (max-width: 640px) { .cycle { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .cycle { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------------
   Client reviews
   ------------------------------------------------------------------------- */

.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 26px); }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } }

.review {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 2.8vw, 32px);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.review__mark {
  font-size: 2.4rem;
  line-height: 0.7;
  color: var(--accent);
  opacity: 0.5;
  margin-bottom: 14px;
}
/* pre-line keeps the paragraph breaks people actually typed. Without it a
   long review collapses into one unreadable block, which is worst on a
   phone. Runs of spaces still collapse, so it can't be used to stretch
   the layout. */
.review__text {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 20px;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* A long review is clamped to a readable height with a "Read more" toggle,
   so one essay doesn't push every other review off the screen. main.js
   adds .is-clamped only when the text actually overflows. */
.review__text.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* "optional" marker beside a form label. */
.field__opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.62;
  margin-left: 4px;
}
.review__more {
  align-self: flex-start;
  margin: -8px 0 18px;
  /* 44px tall so it is comfortably tappable on a phone. */
  min-height: 44px;
  padding: 6px 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.review__more:hover { color: var(--accent-deep); }
.review__who { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.review__name { display: block; font-weight: 600; color: var(--ink); font-size: 0.95rem; }
.review__meta { display: block; font-size: 0.83rem; color: var(--body); margin-top: 3px; }

/* Text for screen readers only — off screen, but still announced. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   Star rating — the five-star picker in the review form
   ------------------------------------------------------------------------- */

.rating { border: 0; padding: 0; margin: 0 0 var(--field-gap, 18px); min-inline-size: 0; }
.rating legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
}
/* Five 44px targets plus the wording is wider than a 320px phone, so the
   label is allowed to wrap onto its own line rather than push the row out. */
.rating__stars { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* The radios stay in the DOM for the keyboard and screen readers; the stars
   people click are the labels. Hiding with opacity rather than display:none
   keeps them focusable. */
.rating__stars input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
/* 44px minimum so the stars are comfortably tappable with a thumb — the
   glyph is smaller than the hit area, which is the point. */
.rating__stars label {
  cursor: pointer;
  font-size: 1.75rem;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  color: rgba(255, 255, 255, 0.25);
  transition: color var(--ease), transform var(--ease);
}
.on-green .rating__stars label { color: rgba(255, 255, 255, 0.25); }
.rating__stars label:hover { transform: scale(1.08); }

/* Fill every star up to the chosen one. main.js sets data-rating. */
.rating__stars[data-rating="1"] label:nth-of-type(-n + 1),
.rating__stars[data-rating="2"] label:nth-of-type(-n + 2),
.rating__stars[data-rating="3"] label:nth-of-type(-n + 3),
.rating__stars[data-rating="4"] label:nth-of-type(-n + 4),
.rating__stars[data-rating="5"] label:nth-of-type(-n + 5) {
  color: var(--gold);
}

/* Keyboard users need to see where they are. */
.rating__stars input:focus-visible + label {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 3px;
}

.rating__word {
  margin-left: 10px;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--gold);
}
@media (max-width: 380px) {
  .rating__word { margin-left: 0; flex-basis: 100%; }
}

/* -------------------------------------------------------------------------
   Stars on a published review, and the average across all of them
   ------------------------------------------------------------------------- */

/* A review that has been shown on the page but not yet confirmed saved.
   It fades in and pulses gently so it reads as "landing", not as finished. */
.review.is-pending {
  opacity: 0.65;
  border-color: var(--accent-light);
  animation: review-pending 1.4s ease-in-out infinite alternate;
}
@keyframes review-pending {
  from { opacity: 0.55; }
  to   { opacity: 0.8; }
}

.review__stars { display: flex; gap: 2px; margin-bottom: 14px; }
.review__star { font-size: 1rem; line-height: 1; color: var(--line-strong); }
.review__star.is-on { color: var(--accent-light); }

.reviews-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3vw, 34px);
  padding-bottom: clamp(20px, 2.6vw, 28px);
  border-bottom: 1px solid var(--line);
}
.reviews-summary__score {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.reviews-summary .review__stars { margin-bottom: 0; }
.reviews-summary .review__star { font-size: 1.15rem; }
.reviews-summary__count { font-size: 0.9rem; color: var(--body); }

/* The invitation shown while we are still collecting reviews. It hides
   itself as soon as the sheet has a published review in it. */
.review-invite {
  background: var(--accent-tint);
  border: 1px solid rgba(138, 117, 72, 0.28);
  border-top: 3px solid var(--accent-light);
  border-radius: var(--radius);
  padding: clamp(30px, 4vw, 48px) clamp(24px, 3.4vw, 44px);
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.review-invite h3 { margin-bottom: 12px; font-size: clamp(1.15rem, 1.9vw, 1.4rem); }
.review-invite p { margin-inline: auto; max-width: 52ch; }
.review-invite .btn { margin-top: 24px; }

/* -------------------------------------------------------------------------
   Motion
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}