/* =========================================================================
   Vista Estates — Property Management, Cyprus
   Design language: warm minimal luxury (ref: "Housen" real-estate UI)
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* Palette lifted from the reference design */
  --ink:        #100C0B;
  --paper:      #FEFDFC;
  --stone:      #564B45;
  --slate:      #707B85;
  --mist:       #A9ABA8;
  --copper:     #985F3C;
  --marine:     #3C5B81;
  --tan:        #A58A72;

  /* Derived surfaces */
  --sand:       #F5F1EC;
  --sand-deep:  #EDE6DE;
  --copper-ink: #7C4B2E;
  --line:       rgba(16, 12, 11, 0.10);
  --line-soft:  rgba(16, 12, 11, 0.06);
  --line-light: rgba(254, 253, 252, 0.16);

  /* Type
     --font-display : tight neutral grotesque, carries the bulk of every heading
     --font-accent  : high-contrast Didone italic, used only on the accent word
     --font-body    : the same grotesque family, looser, for running copy       */
  --font-display: "Neue Montreal", "PP Neue Montreal", "Archivo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-accent:  "Playfair Display", "Didot", "Bodoni 72", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --shell:   1440px;
  --gutter:  clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);

  /* Shape */
  --r-sm:  10px;
  --r-md:  18px;
  --r-lg:  28px;
  --r-xl:  36px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(16,12,11,.05), 0 6px 16px -10px rgba(16,12,11,.14);
  --shadow-md: 0 2px 6px rgba(16,12,11,.05), 0 22px 48px -26px rgba(16,12,11,.30);
  --shadow-lg: 0 30px 70px -34px rgba(16,12,11,.42);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 1b. Neue Montreal ----------
   Neue Montreal is a commercial face from Pangram Pangram, so its files are not
   bundled here. The rules below pick it up from the machine's own font library
   if it is installed locally — which covers designing on this Mac, but NOT site
   visitors.

   To serve it to visitors: buy the webfont licence, drop the .woff2 files into
   assets/fonts/, and swap in the commented src line under each face.

   Until then the stack falls through to Archivo, the closest free grotesque.
   Nothing else needs to change — every heading reads from --font-display.       */
@font-face {
  font-family: "Neue Montreal";
  src: local("PP Neue Montreal Medium"), local("PPNeueMontreal-Medium"), local("Neue Montreal Medium");
  /* src: local("PP Neue Montreal Medium"), url("../fonts/PPNeueMontreal-Medium.woff2") format("woff2"); */
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: local("PP Neue Montreal SemiBold"), local("PPNeueMontreal-SemiBold"), local("Neue Montreal SemiBold");
  /* src: local("PP Neue Montreal SemiBold"), url("../fonts/PPNeueMontreal-SemiBold.woff2") format("woff2"); */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin: 0;
}

/* The Didone accent. Its italic runs optically smaller and tighter than the
   grotesque beside it, so it gets a little size back and near-neutral tracking. */
h1 em, h2 em, h3 em, .accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.04em;
  letter-spacing: -0.005em;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

em { font-style: italic; }

::selection { background: var(--copper); color: var(--paper); }

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

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 999;
  background: var(--ink);
  color: var(--paper);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-size: .875rem;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- 3. Layout primitives ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { max-width: 52rem; margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.25rem;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--copper);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.eyebrow--light { color: var(--tan); }
.section-head--center .eyebrow { justify-content: center; }

.section-title {
  /* Archivo sets wider than the grotesque this was originally tuned for, and a
     section title's column is a fraction of the shell — 5.2vw overran it just
     above the 1024px breakpoint. Gentler slope, same size on large screens. */
  font-size: clamp(2.125rem, 4.7vw, 3.75rem);
  margin-bottom: 1.25rem;
  text-wrap: balance;
}
.section-title em { color: var(--copper); font-style: italic; }
.section-title--light { color: var(--paper); }
.section-title--light em { color: var(--tan); }

.section-lede {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  color: var(--stone);
  max-width: 44ch;
  line-height: 1.7;
}
.section-head--center .section-lede { margin-inline: auto; }
.section-lede--light { color: rgba(254, 253, 252, .72); }

/* ---------- 4. Buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .8rem 1.4rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s var(--ease), background-color .25s var(--ease),
              border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn svg {
  width: 1.05em; height: 1.05em;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:hover svg { transform: translateX(3px); }

.btn--primary { --btn-bg: var(--copper); --btn-fg: var(--paper); --btn-bd: var(--copper); box-shadow: var(--shadow-sm); }
.btn--primary:hover { --btn-bg: var(--copper-ink); --btn-bd: var(--copper-ink); box-shadow: var(--shadow-md); }

.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink); }
.btn--dark:hover { --btn-bg: #241b18; --btn-bd: #241b18; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn--ghost:hover { --btn-bd: var(--ink); background: rgba(16,12,11,.03); }

.btn--glass {
  --btn-bg: rgba(254, 253, 252, .14);
  --btn-fg: var(--paper);
  --btn-bd: rgba(254, 253, 252, .28);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
}
.btn--glass:hover { --btn-bg: rgba(254, 253, 252, .26); --btn-bd: rgba(254, 253, 252, .42); }

.btn--lg { padding: 1rem 1.75rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* ---------- 5. Header ---------- */
/* Two states. Over the hero photograph the bar is transparent and white, with
   the links wrapped in a glass pill. Once the hero has scrolled past, .is-solid
   returns it to the light theme. Pages without a hero never get --overlay, so
   they are solid from the start with no JavaScript involved. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(254, 253, 252, .9);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              color .35s var(--ease);
}

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
  min-height: 84px;
}

/* Wordmark: "vista" in the grotesque, "estates" in the Didone italic, both
   the same colour — the contrast is typographic, not chromatic. */
.brand { display: inline-flex; align-items: center; justify-self: start; color: var(--ink); }
.brand__text {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: inherit;
}
.brand__thin {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: -0.005em;
  color: inherit;
}

/* The centred pill */
.nav {
  display: flex;
  align-items: center;
  gap: .15rem;
  justify-self: center;
  padding: .3rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
}
.nav > a:not(.btn) {
  position: relative;
  padding: .5rem .95rem;
  font-size: .9375rem;
  color: var(--stone);
  border-radius: var(--r-pill);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  transform: translateY(-50%) translateX(-999px);
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.nav > a:not(.btn):hover { color: var(--ink); background: rgba(16,12,11,.05); }
.nav > a.is-active { color: var(--ink); background: rgba(16,12,11,.06); }

.nav__cta { display: none; }

.header__cta { justify-self: end; padding: .7rem 1.25rem; }
.header__cta svg { width: .95em; height: .95em; }
.header__cta:hover svg { transform: translate(2px, -2px); }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  cursor: pointer;
  position: relative;
  justify-self: end;
  grid-column: 3;
  grid-row: 1;
}
.nav-toggle span {
  position: absolute;
  left: 13px;
  width: 20px; height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --- Overlay state: sitting on top of the hero photograph --- */
.site-header--overlay:not(.is-solid) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  color: var(--paper);
}
.site-header--overlay:not(.is-solid) .brand { color: var(--paper); }

.site-header--overlay:not(.is-solid) .nav {
  background: rgba(254, 253, 252, .12);
  border-color: rgba(254, 253, 252, .22);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow: 0 8px 32px rgba(16, 12, 11, .18);
}
.site-header--overlay:not(.is-solid) .nav > a:not(.btn) { color: rgba(254,253,252,.82); }
.site-header--overlay:not(.is-solid) .nav > a:not(.btn):hover { color: var(--paper); background: rgba(254,253,252,.14); }
.site-header--overlay:not(.is-solid) .nav > a.is-active { color: var(--paper); background: rgba(254,253,252,.20); }
.site-header--overlay:not(.is-solid) .nav-toggle { border-color: rgba(254,253,252,.35); color: var(--paper); }


/* Inner pages: the lone "back" button belongs on the right, not in the centre
   slot the landing page's nav pill occupies. */
.nav--simple { grid-column: 3; justify-self: end; }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100svh;
  padding-top: clamp(7rem, 16vh, 11rem);
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
  margin-top: -84px;               /* pull the sticky header on top of the photo */
  color: var(--paper);
  overflow: hidden;
}

.hero__bg { position: absolute; inset: 0; z-index: -1; background: var(--ink); }
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  animation: heroIn 1.6s var(--ease);
}
/* Scale only — never opacity. An animation that is paused (background tab) or
   never starts would otherwise leave the hero photograph invisible, which is
   the worst possible failure for the most important image on the page. */
@keyframes heroIn { from { transform: scale(1.06); } }

/* Legibility scrim. Heaviest bottom-left where the copy sits, plus a soft band
   under the header so the white nav never lands on a bright patch of sky. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16,12,11,.30) 0%, rgba(16,12,11,.08) 20%, transparent 34%),
    linear-gradient(96deg,  rgba(16,12,11,.62) 0%, rgba(16,12,11,.50) 26%, rgba(16,12,11,.24) 52%, rgba(16,12,11,.05) 78%, transparent 100%),
    linear-gradient(0deg,   rgba(16,12,11,.34) 0%, transparent 40%);
}

.hero__inner { position: relative; flex: 1; display: flex; align-items: center; }
.hero__copy { max-width: 40rem; }

.eyebrow--onimage { color: var(--paper); }
.eyebrow--onimage::before { background: var(--tan); opacity: 1; }

.hero__title {
  font-size: clamp(2.6rem, 6.2vw, 5rem);
  margin-bottom: 1.5rem;
  color: var(--paper);
  text-shadow: 0 2px 30px rgba(16,12,11,.35);
}
.hero__title em { color: var(--paper); }

.hero__lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: rgba(254, 253, 252, .82);
  max-width: 44ch;
  margin-bottom: 2.25rem;
  line-height: 1.72;
  text-shadow: 0 1px 18px rgba(16,12,11,.45);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Footer row of the hero: proof figures left, socials right */
.hero__foot {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.hero__proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(254, 253, 252, .22);
}
.hero__proof dt {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: .4rem;
  color: var(--paper);
}
.hero__proof dd {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.45;
  color: rgba(254, 253, 252, .68);
}

.hero__social { display: flex; gap: .5rem; }
.hero__social a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  color: var(--paper);
  background: rgba(254, 253, 252, .12);
  border: 1px solid rgba(254, 253, 252, .22);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}
.hero__social svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.hero__social a:hover { background: rgba(254, 253, 252, .26); transform: translateY(-3px); }

/* --- Glass annotation cards --- */
.glass-note {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .85rem;
  border-radius: var(--r-md);
  color: var(--paper);
  background: rgba(254, 253, 252, .13);
  border: 1px solid rgba(254, 253, 252, .24);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow: 0 10px 40px rgba(16, 12, 11, .28);
  animation: floatIn .9s var(--ease) both;
}
@keyframes floatIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.glass-note--listing { right: 4%;  top: 12%;  max-width: 20rem; animation-delay: .7s; }
.glass-note--payout  { right: 16%; bottom: 8%; animation-delay: .95s; }
.glass-note--copy    { right: 2%;  bottom: 34%; max-width: 17rem; display: block; animation-delay: 1.15s; }
.glass-note--copy p {
  margin: 0;
  font-size: .875rem;
  line-height: 1.55;
  color: rgba(254, 253, 252, .92);
}

.glass-note__thumb {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(254,253,252,.2);
}
.glass-note__thumb img { width: 100%; height: 100%; object-fit: cover; }

.glass-note__icon {
  width: 40px; height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(254, 253, 252, .18);
  color: var(--paper);
}
.glass-note__icon svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

.glass-note__body { min-width: 0; }
.glass-note__title {
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.glass-note__meta { margin: 0; font-size: .75rem; color: rgba(254, 253, 252, .72); }

.pill {
  flex: none;
  padding: .22rem .6rem;
  border-radius: var(--r-pill);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.pill--ok { background: rgba(254, 253, 252, .22); color: var(--paper); }

/* Coverage marquee */
.marquee {
  border-bottom: 1px solid var(--line-soft);
  padding-block: 1.15rem;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  width: max-content;
  animation: slide 42s linear infinite;
}
.marquee__track span {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--mist);
  white-space: nowrap;
}
.marquee__track i { color: var(--copper); font-style: normal; font-size: .7rem; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- 7. Services ----------
   A dark band. The heading takes the first cell of the grid rather than sitting
   above it, which gives the offset rhythm of the reference; the closing note
   takes the last. Cards stay to a title and one line until opened. */
.services {
  background: var(--ink);
  color: var(--paper);
}

.services .eyebrow { color: var(--paper); }
.services .eyebrow::before { background: var(--paper); }
/* The italic accent goes white here too — this band is monochrome throughout,
   so the heading's contrast is typographic rather than chromatic. */
.services .section-title em { color: var(--paper); }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

/* The heading sits above the grid rather than inside it. While it was a grid
   item, its greater height set row one's height and left the cards with slack
   below them — so the vertical gap read as 34px against a 16px column gap. */
.svc-intro {
  max-width: 34rem;
  margin-bottom: clamp(3rem, 6.5vw, 6.5rem);
}
.svc-intro .section-title { margin-bottom: 0; font-size: clamp(1.875rem, 3.1vw, 2.75rem); }

/* --- card --- */
.svc {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(254, 253, 252, .14);
  border-radius: var(--r-lg);
  background: rgba(254, 253, 252, .025);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.svc:not(.is-open) { aspect-ratio: 1 / 1; }
.svc h3 { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.svc:hover { background: rgba(254, 253, 252, .055); border-color: rgba(254, 253, 252, .26); }
.svc.is-open { background: rgba(254, 253, 252, .06); border-color: rgba(254, 253, 252, .3); }
.svc h3 { margin: 0; font-family: inherit; letter-spacing: 0; }

.svc__toggle {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "num   plus"
    ".     .   "
    "head  head";
  align-items: start;
  gap: .9rem;
  width: 100%;
  flex: 1 1 auto;
  padding: clamp(1.5rem, 2.2vw, 2rem);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}

.svc__num {
  grid-area: num;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1;
  color: var(--paper);
}

.svc__head { grid-area: head; display: grid; gap: .25rem; min-width: 0; align-self: center; }
.svc__title {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--paper);
}
/* Reserve two lines so every card's title sits on the same baseline, whether
   its summary runs to one line or two. */
.svc__summary { font-size: .875rem; line-height: 1.5; min-height: 3em; color: var(--paper); }

/* The +/− affordance */
.svc__plus {
  grid-area: plus;
  position: relative;
  width: 30px; height: 30px;
  border: 1px solid rgba(254, 253, 252, .22);
  border-radius: 50%;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), transform .35s var(--ease);
}
.svc__plus::before,
.svc__plus::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 11px; height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.svc__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.svc__toggle[aria-expanded="true"] .svc__plus {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
  transform: rotate(180deg);
}
.svc__toggle[aria-expanded="true"] .svc__plus::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }

/* --- expanding panel --- */
.svc__panel { overflow: hidden; height: 0; transition: height .38s var(--ease); }
.svc__panel-inner { padding: 0 clamp(1.5rem, 2.2vw, 2rem) clamp(1.5rem, 2.2vw, 2rem); }
.svc__panel p {
  margin: 0 0 1rem;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--paper);
}
.svc__list { display: grid; gap: .5rem; padding-top: 1rem; border-top: 1px solid rgba(254, 253, 252, .14); }
.svc__list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--paper);
}
.svc__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .5em;
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1.5px solid var(--paper);
}

/* --- closing note, occupying the last grid cell --- */
.svc-cta {
  grid-column: span 2;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
  padding-left: clamp(0rem, 2vw, 2rem);
}
.svc-cta p {
  margin: 0;
  max-width: 34ch;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--paper);
}
.svc-cta .btn svg { width: .95em; height: .95em; }
.svc-cta .btn:hover svg { transform: translate(2px, -2px); }

/* ---------- 8. About / Stats ---------- */
.about { background: var(--paper); }
.about .eyebrow { color: var(--ink); }
.about .eyebrow::before { background: var(--ink); opacity: .35; }
.about .section-title em { color: var(--ink); }
.about .section-lede { color: var(--ink); opacity: .72; }

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

.about__media { position: relative; padding-bottom: 4rem; }
.about__frame {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--sand-deep);
  box-shadow: var(--shadow-md);
}
.about__frame img { width: 100%; height: 100%; object-fit: cover; }
.about__frame--tall { aspect-ratio: 3 / 4; }
.about__frame--short {
  position: absolute;
  right: -1.5rem;
  bottom: 0;
  width: 55%;
  aspect-ratio: 4 / 3;
  border: 6px solid var(--paper);
  border-radius: var(--r-md);
}

.about__badge {
  position: absolute;
  left: -1rem;
  top: 1.75rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.1rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}
.about__badge strong {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.about__badge span { font-size: .75rem; line-height: 1.3; color: var(--ink); opacity: .6; }

.reasons { display: grid; margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line-soft); }
.reasons li { padding: 1.25rem 0; border-bottom: 1px solid var(--line-soft); }
.reasons h3 { font-size: 1.0625rem; margin-bottom: .3rem; letter-spacing: -0.02em; color: var(--ink); }
.reasons p { margin: 0; font-size: .9063rem; line-height: 1.65; color: var(--ink); opacity: .68; }

/* ---------- 9. FAQ ----------
   Monochrome, like the services and contact panels: everything is --ink and
   hierarchy comes from size, weight and opacity. The rows carry a full-bleed
   hover and open tint so a whole row reads as one target, not just its label. */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: stretch;
}
/* The column is a flex stack so the image can absorb whatever height is left
   over, which makes both columns finish on the same line instead of the photo
   trailing 150px past the last question. */
.faq__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* The accordion's first question sits below its own border plus 1.65rem of
     trigger padding. Matching that here starts both columns on the same line. */
  padding-top: 1.6rem;
}
.faq__head .section-lede { margin-bottom: 0; }
.faq__head .btn { margin-top: 1.75rem; }

.faq__media {
  /* flex-basis MUST be 0, not auto. With `auto` the image's intrinsic height
     becomes its base size, so it inflates the grid row past the accordion and
     the photo overshoots the last question. At 0 it only absorbs leftover
     space, which is what makes the two columns finish together. The min-height
     has to stay below (row height - the copy above it) or it re-inflates. */
  flex: 1 1 0;
  align-self: flex-start;
  width: 100%;
  max-width: 28rem;
  min-height: 14rem;
  /* <figure> carries a UA default of `margin: 1em 40px`. Setting only
     margin-top left those 40px side margins in place, which pushed the image
     off the heading's left edge and out of the column on narrow screens. */
  margin: clamp(2.25rem, 4vw, 3rem) 0 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--sand-deep);
}
.faq__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.faq .eyebrow { color: var(--ink); }
.faq .eyebrow::before { background: var(--ink); opacity: .35; }
.faq .section-title em { color: var(--ink); }
.faq .section-lede { color: var(--ink); opacity: .68; }

.accordion { border-top: 1px solid var(--line-soft); }

.acc {
  position: relative;
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .3s var(--ease);
}
/* Tint bleeds a little past the text column so the row feels like a surface */
.acc::before {
  content: "";
  position: absolute;
  inset: 0 -1.25rem;
  border-radius: var(--r-sm);
  background: var(--sand);
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.acc:hover::before { opacity: .55; }
.acc.is-open::before { opacity: 1; }

.acc h3 { margin: 0; font-family: inherit; letter-spacing: 0; }

.acc__trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.65rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.75vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.35;
  color: var(--ink);
  transition: transform .3s var(--ease);
}
.acc:hover .acc__trigger,
.acc.is-open .acc__trigger { transform: translateX(.35rem); }

.acc__chev {
  position: relative;
  flex: none;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease), transform .35s var(--ease);
}
.acc__chev::before,
.acc__chev::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 11px; height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.acc__chev::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc:hover .acc__chev { border-color: var(--ink); }
.acc__trigger[aria-expanded="true"] .acc__chev {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  transform: rotate(180deg);
}
.acc__trigger[aria-expanded="true"] .acc__chev::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }

.acc__panel {
  position: relative;
  overflow: hidden;
  height: 0;
  transition: height .38s var(--ease);
}
.acc__panel > p {
  padding: 0 3.5rem 1.75rem .35rem;
  margin: 0;
  max-width: 62ch;
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--ink);
  opacity: .72;
}

/* ---------- 10. Reviews ---------- */
.reviews { background: var(--paper); overflow: hidden; }

.reviews__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.reviews__head > div:first-child { max-width: 46rem; }
/* This heading shares its row with the rating and the arrows, so it gets a
   smaller step than a full-width section title — at the shared size its first
   line needed 752px against a 707px column. */
.reviews__head .section-title { font-size: clamp(1.875rem, 4vw, 3.25rem); }
.reviews__head .section-title { margin-bottom: 0; }
.reviews__aside { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }

.rating-summary {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.rating-summary p { margin: 0; font-size: .8125rem; color: var(--slate); }
.rating-summary strong { color: var(--ink); font-weight: 600; }
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 15px; height: 15px; fill: var(--copper); }

.rail-controls { display: flex; gap: .5rem; }
.rail-btn {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease), opacity .25s var(--ease);
}
.rail-btn svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.rail-btn--solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rail-btn:hover { transform: translateY(-2px); }
.rail-btn:not(.rail-btn--solid):hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rail-btn--solid:hover { background: #241b18; border-color: #241b18; }
.rail-btn[disabled] { opacity: .3; cursor: not-allowed; transform: none; }
.rail-btn[disabled]:hover { background: var(--paper); border-color: var(--line); color: var(--ink); }
.rail-btn--solid[disabled]:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Horizontal rail. The next card deliberately peeks past the shell so it reads
   as scrollable without needing a scrollbar. */
.reviews__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(100%, 47rem), 47rem);
  gap: 1.25rem;
  padding-block: .25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reviews__rail::-webkit-scrollbar { display: none; }

.review {
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 18.5rem minmax(0, 1fr);
  align-items: stretch;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
}

.review__media {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--sand-deep);
}
.review__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.review__body {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding-block: .35rem;
}

.review__mark {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  font-style: italic;
  line-height: .7;
  letter-spacing: -0.06em;
  color: var(--mist);
}

.review blockquote { margin: 0; flex: 1; }
.review blockquote p {
  margin: 0;
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: -0.012em;
  color: var(--stone);
}

.review figcaption { display: flex; align-items: center; gap: .7rem; }
.review figcaption > span:last-child { display: grid; }
.review strong { font-size: .875rem; font-weight: 600; color: var(--ink); }
.review small { font-size: .75rem; color: var(--slate); }

.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--sand-deep);
  color: var(--copper-ink);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.avatar::before { content: attr(data-initials); }

/* ---------- 11. Contact ----------
   Deliberately quiet: no icon chips, no white card, no filled inputs. The form
   sits directly on the dark panel with hairline underlines, which matches the
   services band and removes most of what made this section feel busy. */
.contact { padding-bottom: calc(var(--section) + 2rem); }

.contact__panel {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  background: var(--ink);
  border-radius: var(--r-xl);
  color: var(--paper);
  background-image:
    radial-gradient(120% 90% at 0% 0%, rgba(152, 95, 60, .18), transparent 58%),
    radial-gradient(90% 80% at 100% 100%, rgba(60, 91, 129, .14), transparent 60%);
}

/* This panel is monochrome like the services band: one colour, hierarchy from
   size and opacity rather than tint. */
.contact .eyebrow { color: var(--paper); }
.contact .eyebrow::before { background: var(--paper); }
.contact .section-title em { color: var(--paper); }
.contact .section-lede { color: var(--paper); opacity: .78; }
.contact__intro .section-lede { margin-bottom: 0; }

/* Label / value pairs, two across, separated by hairlines only */
.contact__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 2rem;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line-light);
}
.contact__details dt {
  font-size: .8125rem;
  font-weight: 400;
  color: var(--paper);
  opacity: .55;
  margin-bottom: .3rem;
}
.contact__details dd { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--paper); }
.contact__details a { transition: opacity .2s var(--ease); }
.contact__details a:hover { opacity: .7; text-decoration: underline; text-underline-offset: 3px; }

/* --- form, unboxed --- */
.contact__form-wrap { padding: 0; background: none; border-radius: 0; box-shadow: none; color: var(--paper); }

.form { display: grid; gap: 1.6rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }

.field { display: grid; gap: .35rem; min-width: 0; }
.field label, .field legend {
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper);
  padding: 0;
}
.field label span[aria-hidden] { color: var(--paper); opacity: .5; }

.field input, .field select, .field textarea {
  width: 100%;
  padding: .6rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(254, 253, 252, .22);
  border-radius: 0;
  font-size: .9375rem;
  color: var(--paper);
  transition: border-color .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 4.5rem; line-height: 1.6; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FEFDFC' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .1rem center;
  background-size: 15px;
  padding-right: 1.8rem;
  cursor: pointer;
}
.field select option { background: var(--ink); color: var(--paper); }
.field input::placeholder, .field textarea::placeholder { color: rgba(254, 253, 252, .3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--paper);
}
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-bottom-color: #E4907F; }

.field--choice { border: 0; margin: 0; padding: 0; }
.field--choice legend { margin-bottom: .55rem; }

.field__error { margin: 0; font-size: .75rem; color: #E4907F; }
.field__error:empty { display: none; }

.consent {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .8125rem;
  color: var(--paper);
  line-height: 1.55;
  cursor: pointer;
}
.consent input {
  flex: none;
  width: 17px; height: 17px;
  margin-top: .1rem;
  accent-color: var(--copper);
  cursor: pointer;
}
.consent a { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--paper); }
.form__status:empty { display: none; }
.form__status.is-ok { color: #8FD3A8; }
.form__status.is-error { color: #E4907F; }

.form__note { margin: 0; font-size: .75rem; color: var(--paper); opacity: .55; }

/* ---------- 11b. Closing CTA ----------
   One continuous surface: the photograph fades up out of the white section
   above it and down into the footer's ink, so there is no visible seam at
   either end. The two veil gradients must therefore start and finish on the
   exact --paper and --ink values, not approximations. */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(7rem, 15vw, 11rem) clamp(7rem, 15vw, 11rem);
  text-align: center;
  color: var(--paper);
}

.cta__bg { position: absolute; inset: 0; z-index: -1; background: var(--ink); }
.cta__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.cta__veil {
  position: absolute;
  inset: 0;
  background:
    /* The photograph already runs bright sky at the top into dark planting at
       the bottom, so these only need to finish the join — a short lift into
       --paper at the very top and a short settle into --ink at the very
       bottom. Long gradients here read as a grey wash over the picture. */
    linear-gradient(180deg,
      var(--paper) 0%,
      rgba(254, 253, 252, .58) 6%,
      rgba(254, 253, 252, .18) 14%,
      rgba(254, 253, 252, 0)   24%),
    linear-gradient(0deg,
      var(--ink) 0%,
      rgba(16, 12, 11, .78) 9%,
      rgba(16, 12, 11, .38) 22%,
      rgba(16, 12, 11, .22) 40%,
      rgba(16, 12, 11, .22) 100%);
}

.cta__inner { position: relative; display: grid; justify-items: center; }

.cta__title {
  font-size: clamp(2rem, 5vw, 3.75rem);
  color: var(--paper);
  margin-bottom: 1.1rem;
  text-shadow: 0 2px 30px rgba(16, 12, 11, .45);
}
.cta__title em { color: var(--paper); }

.cta__lede {
  max-width: 42ch;
  margin-bottom: 2.25rem;
  font-size: clamp(1rem, 1.5vw, 1.0625rem);
  line-height: 1.7;
  color: rgba(254, 253, 252, .82);
  text-shadow: 0 1px 18px rgba(16, 12, 11, .5);
}
.cta__inner .btn svg { width: .95em; height: .95em; }
.cta__inner .btn:hover svg { transform: translate(2px, -2px); }

/* ---------- 12. Footer ---------- */
.site-footer {
  background: var(--ink);
  color: rgba(254, 253, 252, .72);
  padding-top: clamp(2rem, 4vw, 3rem);
  padding-bottom: 2rem;
  margin-top: 0;
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.95fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: 3rem;
}

.brand--footer { color: var(--paper); }
.brand--footer .brand__text { font-size: 1.9rem; }

.footer__blurb {
  margin: 1.25rem 0 1.75rem;
  font-size: .9063rem;
  line-height: 1.65;
  max-width: 34ch;
}

.social { display: flex; gap: .55rem; }
.social a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line-light);
  border-radius: 50%;
  color: rgba(254,253,252,.8);
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.social svg {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.social a:hover {
  background: var(--copper);
  border-color: var(--copper);
  color: var(--paper);
  transform: translateY(-3px);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 1.5rem;
}
.footer__col h3 {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 1.1rem;
}
.footer__col ul { display: grid; gap: .65rem; }
.footer__col a {
  font-size: .9063rem;
  color: rgba(254,253,252,.72);
  transition: color .2s var(--ease);
}
.footer__col a:hover { color: var(--paper); }

/* Oversized closing wordmark. Scales on viewport width so it always spans the
   shell without ever forcing a horizontal scrollbar. */
.footer__wordmark {
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 2vw, 1.75rem);
  line-height: .9;
  text-align: center;
  color: var(--paper);
  overflow: hidden;
}
.footer__wordmark > span {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 13.5vw, 12rem);
  letter-spacing: -0.045em;
  white-space: nowrap;
}
.footer__wordmark .brand__thin {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: -0.01em;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-light);
  font-size: .8125rem;
  color: rgba(254,253,252,.5);
}
.footer__bottom p { margin: 0; }
.footer__reg em { font-style: normal; color: var(--tan); }

.to-top {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: rgba(254,253,252,.72);
  transition: color .2s var(--ease);
}
.to-top svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.to-top:hover { color: var(--paper); }
.to-top:hover svg { transform: translateY(-3px); }

/* ---------- 13. Legal / inner pages ---------- */
.legal { padding-block: clamp(3rem, 7vw, 6rem); }
.legal__inner { max-width: 46rem; margin-inline: auto; }
.legal h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); margin-bottom: 1rem; }
.legal .legal__updated { color: var(--slate); font-size: .875rem; margin-bottom: 2.5rem; }
.legal h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  margin: 2.5rem 0 .85rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-soft);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; }
.legal p, .legal li { color: var(--stone); line-height: 1.75; }
.legal ul { list-style: disc; padding-left: 1.25rem; display: grid; gap: .4rem; margin-bottom: 1rem; }
.legal a { color: var(--copper); text-decoration: underline; text-underline-offset: 3px; }
.legal .note {
  padding: 1.1rem 1.35rem;
  background: var(--sand);
  border-left: 3px solid var(--copper);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .9063rem;
  margin-bottom: 2.5rem;
}
.legal .back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 2rem;
  font-size: .875rem;
  color: var(--stone);
  text-decoration: none;
}
.legal .back svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.legal .back:hover { color: var(--copper); }

/* ---------- 14. Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- 15. Responsive ---------- */
@media (max-width: 1024px) {
  /* Too tight for cards floating beside the copy — drop them and let the
     photograph carry the panel on its own. */
  .glass-note--copy { display: none; }
  .glass-note--listing { right: 3%; top: 10%; }
  .glass-note--payout { right: 3%; bottom: 6%; }
  .about__grid { grid-template-columns: 1fr; }
  .about__media { max-width: 30rem; }
  .faq__grid { grid-template-columns: 1fr; align-items: start; }
  /* Stacked, a tall portrait image would push the questions far down the page */
  .faq__media { flex: 0 0 auto; aspect-ratio: 16 / 9; min-height: 0; max-width: 34rem; width: 100%; margin-inline: 0; }
  .contact__panel { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    inset: 78px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gutter) 1.75rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .nav.is-open { opacity: 1; transform: translateY(0); visibility: visible; }

  /* Inner pages carry a single "back" button and no hamburger, so they opt
     out of the drawer entirely and stay visible at every width. */
  .nav--simple {
    position: static;
    inset: auto;
    grid-column: 3;
    justify-self: end;
    flex-direction: row;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .nav > a:not(.btn) {
    padding: .95rem .25rem;
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
  }
  .nav > a:not(.btn)::after { display: none; }
  .nav__cta { display: inline-flex; margin: 1.15rem 0 0; }
  .header__cta { display: none; }

  /* The wide layout's left-to-right scrim exists to clear a column of copy on
     one side. On a narrow screen the copy spans the full width, so that same
     gradient just greys out the whole photograph — go vertical instead. */
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(16,12,11,.62) 0%,
      rgba(16,12,11,.34) 26%,
      rgba(16,12,11,.42) 58%,
      rgba(16,12,11,.74) 100%);
  }

  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews__rail { grid-auto-columns: minmax(min(100%, 34rem), 34rem); }
  .review { grid-template-columns: 14rem minmax(0, 1fr); gap: 1.25rem; }
}

@media (max-width: 620px) {
  html { scroll-padding-top: 86px; }
  .hero__proof { grid-template-columns: 1fr; gap: .9rem; text-align: left; width: 100%; }
  .hero__proof div { display: flex; align-items: baseline; gap: .7rem; }
  .hero__proof dt { font-size: 1.5rem; margin: 0; min-width: 3.5rem; }
  .hero__actions .btn { width: 100%; }
  .glass-note { display: none; }
  .hero__social { display: none; }
  .hero { min-height: 92svh; }
  .form__row { grid-template-columns: 1fr; }
  .about__frame--short { right: 0; width: 62%; }
  .about__badge { left: 0; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .acc__panel > p { padding-right: 0; }

  /* Side-by-side image and quote is too cramped on a phone — stack them. */
  .reviews__rail { grid-auto-columns: minmax(min(100%, 19rem), 19rem); }
  .review { grid-template-columns: 1fr; gap: 1.1rem; }
  .review__media { aspect-ratio: 16 / 10; }
  .reviews__head { grid-template-columns: 1fr; align-items: start; }
  .reviews__aside { width: 100%; justify-content: space-between; }
}

/* ---------- 16. Motion & print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .marquee__track { animation: none; }
}

@media print {
  .site-header, .nav-toggle, .marquee, .rail-controls, .to-top, .glass-note, .hero__social { display: none !important; }
  .hero { min-height: 0; margin-top: 0; color: var(--ink); }
  .hero__bg, .hero__scrim { display: none !important; }
  .hero__title, .hero__title em, .hero__lede, .hero__proof dt, .hero__proof dd { color: var(--ink) !important; text-shadow: none !important; }
  body { background: #fff; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .acc__panel, .svc__panel { height: auto !important; }
}