/* ══════════════════════════════════════════════════════════════
   MEFA Property Management
   Design notes:
   - Monochrome palette: near-black #141414 and white, with neutral grays.
     The old gold accent role is now filled by white on dark surfaces and
     near-black on light ones (--gold / --gold-deep kept as names so the
     whole stylesheet didn't need rewiring).
   - Body weight is 400. Only large display type drops to 300.
   - Recurring motif: the "property file" — letterspaced small-caps
     labels, hairline rules, numbered rows. Property management runs
     on records, so the site is built to look like a well-kept one.
   ══════════════════════════════════════════════════════════════ */

/* ─── Tokens ─────────────────────────────────────────────── */
:root {
  /* Surfaces — neutral, no warm tint */
  --ink:        #141414;   /* near-black (softer than pure #000) */
  --ink-2:      #1F1F1F;   /* raised dark surface */
  --paper:      #FFFFFF;   /* white */
  --paper-2:    #F2F2F2;   /* recessed light surface */

  /* Text */
  --text:       #141414;
  --text-muted: #595959;   /* 7.0:1 on white */
  --on-ink:     #FFFFFF;   /* 17.4:1 on ink */
  --on-ink-mut: #B8B8B8;   /* 9.2:1 on ink */

  /* Accent role — no colour, so it resolves to white on dark, black on light.
     Names kept as --gold / --gold-deep so every existing rule still works. */
  --gold:       #FFFFFF;   /* accent on dark surfaces */
  --gold-deep:  #141414;   /* accent on light surfaces */
  --gold-soft:  rgba(255,255,255,.12);

  /* Lines */
  --rule:       rgba(0,0,0,.14);
  --rule-ink:   rgba(255,255,255,.18);

  /* Type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:    "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing scale (8px rhythm) */
  --s1: .5rem; --s2: 1rem;  --s3: 1.5rem; --s4: 2rem;
  --s5: 3rem;  --s6: 4rem;  --s7: 6rem;   --s8: 8rem;

  --wrap: 1200px;
  --radius: 2px;           /* near-square: documents, not app chrome */

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

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  /* 400, not 300. Jost Light is elegant at display sizes but its thin
     strokes make body copy and nav look faint. Large display type sets
     300 explicitly where the delicacy is wanted. */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1,h2,h3 { margin: 0; font-weight: 400; }
p { margin: 0 0 var(--s2); }
ul, ol { margin: 0; padding: 0; list-style: none; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

@media (min-width: 768px) {
  .wrap { width: min(100% - 4rem, var(--wrap)); }
}

/* ─── Accessibility ──────────────────────────────────────── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: var(--ink);
  padding: .75rem 1.25rem; font-weight: 500;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
}
.section-ink :focus-visible, .hero :focus-visible, .site-header :focus-visible,
.site-footer :focus-visible { outline-color: var(--gold); }

/* ─── Shared type ────────────────────────────────────────── */
/* ── Centred alignment ──────────────────────────────────────
   Every heading and paragraph is centred at every breakpoint.
   Two things are needed for this, not one: `text-align: center`
   centres the text inside its box, and `margin-inline: auto`
   centres the box itself. Without the second, a max-width block
   sits left and only looks centred at narrow widths.        */
.eyebrow {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  /* `auto` inline margins, not 0 — the shorthand outranks the global
     p{margin-inline:auto} and would strand the box on the left. */
  margin: 0 auto var(--s2);
  text-align: center;
  max-width: none;
}
.eyebrow-onDark { color: var(--gold); }

.h2 {
  font-family: var(--display);
  font-size: clamp(1.85rem, 1.1rem + 2.6vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  font-weight: 400;
  margin: 0 auto var(--s3);
  max-width: 20ch;
  text-align: center;
}
.h2-wide { max-width: 24ch; }
.h2-onDark { color: var(--on-ink); }

.lede {
  font-size: clamp(1.06rem, 1rem + .35vw, 1.25rem);
  line-height: 1.6;
  color: var(--text);
  max-width: 58ch;
  margin: 0 auto var(--s3);
  text-align: center;
}
.lede-onDark { color: var(--on-ink-mut); }
.lede-center { margin-inline: auto; text-align: center; }

p {
  max-width: 66ch;
  margin-inline: auto;
  color: var(--text-muted);
  text-align: center;
}
h1, h2, h3 { text-align: center; }
.section-ink p { color: var(--on-ink-mut); }

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Ink text on gold — white on gold fails at 2.36:1 */
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: #EBEBEB; }
.btn-gold:active { transform: translateY(1px); }

.btn-ghost { background: transparent; color: var(--on-ink); border-color: var(--rule-ink); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }

.btn-sm { min-height: 42px; padding: .6rem 1.1rem; font-size: .875rem; }
.btn-block { width: 100%; }

.ico { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* ─── Header ─────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(20,20,20,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-ink);
}
.header-inner {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 76px;
}

.wordmark {
  text-decoration: none; margin-right: auto; line-height: 1;
  display: flex; flex-direction: row; align-items: center; gap: .7rem;
  min-height: 48px;
}
.wordmark-mark {
  height: 30px; width: auto;
  flex: none;
}
.wordmark-text { display: flex; flex-direction: column; }
.wordmark-name {
  display: block;
  font-family: "Bodoni Moda", var(--display), serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: 1.45rem;
  letter-spacing: .16em;
  color: var(--gold);
}
.wordmark-sub {
  display: block;
  font-size: .75rem;          /* 12px — the readability floor */
  letter-spacing: .24em;      /* trimmed so it doesn't outrun "MEFA" */
  text-transform: uppercase;
  color: var(--on-ink-mut);
  margin-top: .32rem;
}

.nav { display: none; gap: var(--s3); }
.nav a {
  text-decoration: none;
  font-size: .95rem;
  color: var(--on-ink-mut);
  display: inline-flex; align-items: center;
  min-height: 44px;
  position: relative;
  transition: color var(--dur) var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav a:hover { color: var(--on-ink); }
.nav a:hover::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: var(--s2); }
.header-actions .btn-gold { display: none; }

.nav-toggle {
  width: 48px; height: 48px;
  display: grid; place-content: center; gap: 6px;
  background: none; border: 1px solid var(--rule-ink); border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle-bar {
  display: block; width: 20px; height: 1.5px; background: var(--on-ink);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child  { transform: translateY(-3.75px) rotate(-45deg); }

@media (min-width: 1024px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .header-actions .btn-gold { display: inline-flex; }
}

/* Mobile drawer */
@media (max-width: 1023px) {
  .nav {
    position: fixed; inset: 76px 0 auto 0;
    display: flex; flex-direction: column; gap: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--rule-ink);
    padding: var(--s2) 1.25rem var(--s4);
    transform: translateY(-120%);
    transition: transform 320ms var(--ease);
    visibility: hidden;
  }
  .nav.is-open { transform: translateY(0); visibility: visible; }
  .nav a {
    padding: 1rem 0;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--rule-ink);
    color: var(--on-ink);
  }
  .nav a::after { display: none; }
}

/* ─── Hero ───────────────────────────────────────────────── */
.hero { position: relative; background: var(--ink); isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }

/* ── Hero drift ─────────────────────────────────────────────
   A single photo on a very slow zoom: 1.03 -> 1.14 over 60s, then
   the same journey back. `alternate` is what makes it work — a
   looping zoom would snap back to the start every cycle, which is
   precisely the jump we're avoiding. Full round trip is two minutes,
   about 0.18% of scale per second: felt rather than watched.
   Starts at 1.03 rather than 1 so no hairline edge can appear from
   subpixel rounding.                                              */
.hero-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .5;
  transform: scale(1.03);
  will-change: transform;
  animation: heroDrift 60s ease-in-out infinite alternate;
}

@keyframes heroDrift {
  from { transform: scale(1.03); }
  to   { transform: scale(1.14); }
}

/* Paused via the hero control, and while off-screen or backgrounded */
/* Paused via the hero control, and while off-screen or backgrounded.
   The headline plays once and settles, so only the looping photo drift
   needs pausing. */
.hero.is-paused .hero-photo { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hero-photo { animation: none; transform: scale(1.03); }
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,20,20,.86) 0%, rgba(20,20,20,.62) 40%, rgba(20,20,20,.94) 100%),
    radial-gradient(120% 90% at 78% 22%, rgba(255,255,255,.05), transparent 62%);
}

.hero-inner {
  position: relative;   /* anchors the video pause control */
  padding: clamp(4rem, 3rem + 9vw, 9rem) 0 clamp(3rem, 2rem + 5vw, 5rem);
}

.hero-title {
  font-family: var(--display);
  font-size: clamp(2.9rem, 1.4rem + 7.4vw, 6.5rem);
  line-height: .98;
  letter-spacing: -.03em;
  font-weight: 300;
  color: var(--on-ink);
  margin: 0 auto var(--s3);
  max-width: 14ch;
  text-align: center;
}

/* ── Hero entrance ──────────────────────────────────────────
   Masked line reveal: each line rises from behind its own clipped
   edge. Deliberately CSS-only — if this depended on JavaScript, a
   script error would leave the headline permanently invisible.
   The padding/negative-margin pair stops overflow:hidden from
   shearing the descenders off "Property" and the italic "Priority".  */
.hero-line {
  display: block;
  overflow: hidden;
  /* Deep enough to clear both the italic descenders and the swash that
     sits below "Priority" — the negative margin cancels the extra height
     so the two lines still sit at their intended spacing. */
  padding-bottom: .30em;
  margin-bottom: -.30em;
}
.hero-line > span {
  display: block;
  transform: translateY(110%);
  animation: heroLineUp 1.15s cubic-bezier(.16, 1, .3, 1) forwards;
}
.hero-line:nth-child(1) > span { animation-delay: .15s; }
.hero-line:nth-child(2) > span { animation-delay: .30s; }

@keyframes heroLineUp {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  /* Reset the start state, don't merely cancel the animation — the headline
     would otherwise stay parked below its own baseline. */
  .hero-line > span {
    animation: none;
    transform: none;
  }
}
.hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}

/* ── About page intro entrance ──────────────────────────────
   Reuses the hero's masked line-reveal (.hero-line) so the About
   page opens with the same signature motion as the homepage,
   instead of appearing as a static band. The eyebrow and lede
   fade up around the rising headline. CSS-only, fires on load. */
.section-head--intro .intro-title { display: block; }
.intro-el { animation: introFade .9s cubic-bezier(.16, 1, .3, 1) .05s backwards; }
.intro-el--late { animation-delay: .5s; }
@keyframes introFade {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-el { animation: none; }
}

.hero-lede {
  font-size: clamp(1.06rem, 1rem + .45vw, 1.3rem);
  line-height: 1.6;
  color: var(--on-ink-mut);
  max-width: 48ch;
  margin: 0 auto var(--s4);
  text-align: center;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; }

/* ─── Hero video pause control ───────────────────────────── */
/* Hidden until keyboard-focused — the same pattern as the skip link.
   WCAG 2.2.2 asks that a way to stop the motion exist; it doesn't ask
   for a permanently visible button. At this speed the control was more
   visual noise than help, so it steps out of the way and reappears the
   moment anyone tabs to it. Delete the .hero-motion-toggle markup and
   this block entirely if you'd rather it were simply gone. */
.hero-motion-toggle {
  /* Anchored to .hero-inner, so it lands in the hero's bottom padding —
     clear of the CTA buttons above and the ledger strip below. */
  position: absolute;
  right: 0;
  bottom: var(--s1);
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .5rem .9rem;
  background: rgba(20,20,20,.62);
  backdrop-filter: blur(6px);
  border: 1px solid var(--rule-ink);
  border-radius: 999px;
  color: var(--on-ink);
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Reappears for anyone navigating by keyboard */
.hero-motion-toggle:focus-visible,
.hero-motion-toggle:focus { opacity: 1; pointer-events: auto; }
/* Stays put once someone has actually paused, so they can start it again */
.hero-motion-toggle[data-paused="true"] { opacity: 1; pointer-events: auto; }

.hero-motion-toggle:hover { background: rgba(20,20,20,.85); border-color: var(--gold); }
.hero-motion-toggle svg { width: 15px; height: 15px; fill: var(--gold); flex: none; }
/* Show whichever icon matches the next action */
.hero-motion-toggle .ico-play  { display: none; }
.hero-motion-toggle[data-paused="true"] .ico-pause { display: none; }
.hero-motion-toggle[data-paused="true"] .ico-play  { display: block; }

@media (max-width: 600px) {
  .hero-motion-text { position: absolute; width: 1px; height: 1px; overflow: hidden;
                      clip: rect(0 0 0 0); white-space: nowrap; }
  .hero-motion-toggle { padding: .5rem; min-width: 44px; justify-content: center; }
}

/* Ledger strip */
.ledger-strip {
  border-top: 1px solid var(--rule-ink);
  background: rgba(20,20,20,.55);
  backdrop-filter: blur(6px);
}
.ledger-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.ledger-cell {
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule-ink);
  text-align: center;
}
.ledger-cell:last-child { border-bottom: none; }
.ledger-label {
  display: block;
  font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .3rem;
}
.ledger-value { display: block; font-size: 1rem; color: var(--on-ink); }
/* "We manage" as a centred, wrapping bulleted list */
.manage-list {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .1rem .8rem;
}
.manage-list li { white-space: nowrap; }
.manage-list li::before { content: "\2022"; margin-right: .4rem; }

@media (min-width: 768px) {
  .ledger-grid { grid-template-columns: repeat(4, 1fr); }
  .ledger-cell {
    padding: var(--s3);
    border-bottom: none;
    border-left: 1px solid var(--rule-ink);
  }
  .ledger-cell:first-child { border-left: none; }
}

/* ─── Sections ───────────────────────────────────────────── */
.section { padding: clamp(3.5rem, 2rem + 8vw, var(--s8)) 0; }
.section-paper2 { background: var(--paper-2); }
.section-ink { background: var(--ink); color: var(--on-ink); }

.section-head { margin-bottom: var(--s6); }
.section-head .lede-center { text-align: center; }
.section-head:has(.lede-center) { text-align: center; }
.section-head:has(.lede-center) .h2 { margin-inline: auto; }

/* Split: the label used to hang in a left column. Centred, it stacks
   above the body so the whole block shares one vertical centre line. */
.split { display: grid; gap: var(--s2); justify-items: center; }
.split-aside .eyebrow { margin-bottom: 0; }
.split-body { width: 100%; }

.pull {
  /* Rules moved from the left edge to top and bottom — a left border
     on centred text reads as a broken indent. */
  margin: var(--s4) auto 0;
  padding: var(--s3) 0;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  font-family: var(--display);
  font-size: clamp(1.3rem, 1rem + 1.1vw, 1.75rem);
  line-height: 1.32;
  font-style: italic;
  color: var(--text);
  max-width: 34ch;
  text-align: center;
}

/* ─── Ledger list (what we handle) ───────────────────────── */
.ledger-list { border-top: 1px solid var(--rule); }
.ledger-row {
  /* Single centred column at every width. The number sits above the
     title rather than beside it, keeping one shared centre axis. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.ledger-num {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  line-height: 1;
  color: var(--gold-deep);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}
.ledger-row-title {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem);
  line-height: 1.2;
  margin-bottom: .6rem;
}
.ledger-row-body { width: 100%; }
.ledger-row-body p { margin-bottom: 0; }

/* ─── Property type grid ─────────────────────────────────── */
.type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s3);
}
.type-card { }
.type-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-2);
  margin-bottom: var(--s2);
}
.type-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease);
}
.type-card:hover .type-media img { transform: scale(1.04); }
.type-title {
  font-family: var(--display);
  font-size: 1.3rem;
  margin-bottom: .35rem;
}
.type-copy { font-size: 1rem; margin-bottom: 0; }

/* ─── Mission ────────────────────────────────────────────── */
.mission { text-align: center; }
.mission-statement {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.6rem);
  line-height: 1.24;
  font-weight: 300;
  color: var(--on-ink);
  max-width: 26ch;
  margin: 0 auto var(--s7);
  letter-spacing: -.015em;
}

.mission-marks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s4);
  text-align: center;
  border-top: 1px solid var(--rule-ink);
  padding-top: var(--s4);
}
.mark-ico {
  width: 26px; height: 26px; fill: var(--gold);
  margin: 0 auto var(--s2);   /* icon shares the text's centre axis */
}
.mark-title {
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--on-ink);
  margin-bottom: .4rem;
}
.mark-copy { font-size: 1rem; margin-bottom: 0; }

/* ─── Chips ──────────────────────────────────────────────── */
.chips {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: center;
  margin-top: var(--s3);
}
.chips li {
  font-size: .9rem;
  padding: .4rem .85rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--text-muted);
  background: rgba(255,255,255,.4);
}

/* ─── Team ───────────────────────────────────────────────── */
.team-grid {
  display: grid;
  /* Two founder cards, capped so the portrait photos don't become huge. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 400px));
  gap: var(--s4);
  justify-content: center;
}
.person {
  padding: var(--s4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.person-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-2);
  margin-bottom: var(--s3);
}
.person-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 15%;   /* keep faces in frame on a 4:5 crop */
  /* Grayscale keeps the photos consistent with the monochrome palette.
     Delete this line for full-colour headshots. */
  filter: grayscale(1) contrast(1.03);
}
.person-role {
  font-size: .75rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold-deep); margin-bottom: .6rem;
}
.person-name {
  font-family: var(--display);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  margin-bottom: var(--s2);
}
.person-bio {
  font-size: .98rem;
  line-height: 1.62;
  color: var(--text-muted);
  margin: 0 auto var(--s2);
  max-width: 40ch;
}

/* "Read full bio" native disclosure — no JS needed */
.person-more { width: 100%; margin: 0 0 var(--s3); }
.person-more summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep);
}
.person-more summary::-webkit-details-marker { display: none; }
.person-more summary::after {
  content: "+";
  font-size: 1.1rem; line-height: 1;
  transition: transform var(--dur) var(--ease);
}
.person-more[open] summary::after { content: "\2212"; }  /* minus sign */
.person-more summary:hover { color: var(--text); }

/* Long-form bio: left-aligned for readability (the rest of the site is
   centred, but 5–6 centred paragraphs are hard to read). */
.person-fullbio {
  text-align: left;
  max-width: 58ch;
  margin: var(--s2) auto 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
}
.person-fullbio p {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0 auto var(--s2);
  max-width: none;
  text-align: left;
}
.person-quote {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--text);
  margin: var(--s3) 0 0;
  padding-left: var(--s2);
  border-left: 2px solid var(--text);
  text-align: left;
}

.person-phone {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px;
  text-decoration: none;
  color: var(--text);
  font-size: 1.05rem;
  border-bottom: 1px solid var(--gold-deep);
  transition: color var(--dur) var(--ease);
  margin-top: auto;   /* pin the call link to the bottom so cards align */
}
.person-phone:hover { color: var(--gold-deep); }

/* Link from the homepage team grid through to the full About bios */
.team-more { text-align: center; margin: var(--s5) 0 0; }
.team-more a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  color: var(--gold-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-deep);
  padding-bottom: 2px;
  font-size: .95rem; letter-spacing: .04em;
  transition: opacity var(--dur) var(--ease);
}
.team-more a:hover { opacity: .7; }

/* ─── About page: founder biography ───────────────────────── */
.bio {
  display: grid;
  gap: var(--s4);
  align-items: start;
  text-align: left;
  max-width: 980px;
  margin-inline: auto;
}
@media (min-width: 820px) {
  .bio { grid-template-columns: 320px 1fr; gap: var(--s6); }
  .bio--reverse { grid-template-columns: 1fr 320px; }
  .bio--reverse .bio-photo { grid-column: 2; grid-row: 1; }
  .bio--reverse .bio-body  { grid-column: 1; grid-row: 1; }
}
.bio-photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper);
}
.bio-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 15%;
  /* Grayscale to match the palette — delete for a colour photo. */
  filter: grayscale(1) contrast(1.03);
}
.bio-body .person-role { text-align: left; margin-bottom: var(--s3); }
.bio-text p {
  text-align: left;
  max-width: 62ch;
  margin: 0 0 var(--s3);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.bio-text .person-quote { margin-top: var(--s4); }
.bio-team-link { text-align: left; margin: var(--s4) 0 0; }
.bio-team-link a {
  color: var(--gold-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-deep);
  padding-bottom: 2px;
  font-size: .95rem; letter-spacing: .04em;
}

/* aria-current highlight for the active nav item (About page) */
.nav a[aria-current="page"] { color: var(--on-ink); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ─── Legal pages (Privacy Policy) ────────────────────────── */
/* Long-form legal text is left-aligned for readability, overriding the
   site-wide centring. */
.legal {
  max-width: 68ch;
  margin-inline: auto;
  text-align: left;
}
.legal p {
  text-align: left;
  max-width: none;
  margin: 0 0 var(--s3);
  color: var(--text-muted);
  line-height: 1.7;
}
.legal-updated {
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
.legal-h {
  font-family: var(--display);
  font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem);
  text-align: left;
  margin: var(--s5) 0 var(--s2);
  color: var(--text);
}
.legal-list {
  list-style: disc;
  margin: 0 0 var(--s3);
  padding-left: 1.4em;
  color: var(--text-muted);
}
.legal-list li { margin-bottom: .4rem; line-height: 1.6; }
.legal a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }
.legal-cta {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}
.legal-cta a { font-size: 1.05rem; }

/* Footer privacy link */
.footer-base a { color: var(--on-ink-mut); text-decoration: underline; text-underline-offset: 2px; }
.footer-base a:hover { color: var(--on-ink); }

/* ─── FAQ accordion ───────────────────────────────────────── */
.faq-list {
  max-width: 760px;
  margin-inline: auto;
  border-top: 1px solid var(--rule);
}
.faq-item {
  border-bottom: 1px solid var(--rule);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: var(--s3) 0;
  min-height: 44px;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem);
  color: var(--text);
  text-align: left;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  font-family: var(--sans);
  font-size: 1.4rem; line-height: 1;
  color: var(--gold-deep);
  transition: transform var(--dur) var(--ease);
}
.faq-item[open] summary::after { content: "\2212"; }  /* minus */
.faq-item summary:hover { color: var(--gold-deep); }
.faq-a {
  padding: 0 0 var(--s3);
}
.faq-a p {
  text-align: left;
  max-width: 64ch;
  margin: 0;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ─── Testimonials ───────────────────────────────────────── */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s4);
}
.testimonial {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--s4) var(--s3) 0;
  /* Hairline separators between columns echo the "property file" motif.
     Removed on the first item and whenever the grid wraps to one column. */
  border-left: 1px solid var(--rule);
}
.testimonial:first-child { border-left: none; }

.testimonial-mark {
  font-family: var(--display);
  font-size: 3rem;
  line-height: .6;
  color: var(--text);
  opacity: .22;
  margin-bottom: var(--s2);
}
.testimonial-quote {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1rem + .55vw, 1.35rem);
  line-height: 1.42;
  font-style: italic;
  color: var(--text);
  margin: 0 0 var(--s3);
  max-width: 34ch;
}
.testimonial-by {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  width: 100%;
  max-width: 22ch;
}

/* One column: drop the vertical rules, add spacing between stacked quotes */
@media (max-width: 719px) {
  .testimonial { border-left: none; padding-top: var(--s2); }
  .testimonial + .testimonial { border-top: 1px solid var(--rule); padding-top: var(--s5); }
}

/* ─── Contact + form ─────────────────────────────────────── */
/* Stacked rather than side-by-side, so the intro and the form share the
   page's centre line instead of each centring inside its own column. */
.contact-grid { display: grid; gap: var(--s6); justify-items: center; }
.contact-intro { width: 100%; }

/* Single item since the phone moved out — a fixed two-column grid would
   strand the address in the left half. auto-fit keeps it centred now and
   still splits cleanly if a second item (email, hours) is added later. */
.contact-details {
  margin: var(--s5) auto 0;
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(200px, auto));
  justify-content: center;
  border-top: 1px solid var(--rule-ink);
  padding-top: var(--s4);
  max-width: 640px;
  text-align: center;
}
.contact-item dt {
  font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .5rem;
}
.contact-item dd { margin: 0; color: var(--on-ink-mut); font-size: 1rem; line-height: 1.7; }
.contact-item a {
  color: var(--on-ink); text-decoration: none;
  border-bottom: 1px solid var(--rule-ink);
  /* Tap target: pad the line box out to 44px without disturbing the text baseline */
  display: inline-block; padding-block: .6rem;
}
.contact-item a:hover { color: var(--gold); border-color: var(--gold); }

.form {
  background: var(--ink-2);
  border: 1px solid var(--rule-ink);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}
.field { margin-bottom: var(--s3); }
/* Labels stay left-aligned. Centring a label above a full-width input
   detaches it from the field it names and slows the form down. */
.field label {
  display: block;
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-ink-mut);
  margin-bottom: .5rem;
  text-align: left;
}
.field .hint, .field .err { text-align: left; }
.req { color: var(--gold); }

.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: .75rem .9rem;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--rule-ink);
  border-radius: var(--radius);
  color: var(--on-ink);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field textarea { min-height: auto; resize: vertical; }
.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='%23B8B8B8'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 20px;
  padding-right: 2.4rem;
}
.field select option { background: var(--ink-2); color: var(--on-ink); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold);
  background: rgba(255,255,255,.08);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(184,184,184,.55); }

.hint { font-size: .875rem; color: var(--on-ink-mut); margin: .45rem 0 0; }
.err {
  font-size: .875rem; color: #F0A38A; margin: .45rem 0 0;
  display: flex; align-items: center; gap: .35rem;
}
.field.has-error input, .field.has-error select { border-color: #F0A38A; }

.form-note { font-size: .875rem; color: var(--on-ink-mut); margin: var(--s2) auto 0; text-align: center; }
.form-note a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur) var(--ease);
}
.form-note a:hover { color: var(--on-ink-mut); }
.form-status { font-size: .92rem; margin: var(--s2) auto 0; text-align: center; color: var(--gold); }
.form-status:empty { margin: 0; }               /* no gap when there's no message */
.form-status[data-kind="error"] { color: #F0A38A; }   /* matches field-error tone */

/* ─── Footer ─────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: var(--on-ink); border-top: 1px solid var(--rule-ink); }
.footer-inner {
  display: grid; gap: var(--s5);
  padding: var(--s6) 0 var(--s5);
  justify-items: center;
  text-align: center;
}

.footer-brand { display: flex; flex-direction: column; align-items: center; }
/* The original artwork, glow and all. Sized against its own glow rather
   than the letterforms, so it needs to run wider than a tight-cropped
   mark would to read at the same optical size. */
.footer-logo { width: 240px; height: auto; }

.footer-tag {
  font-family: var(--display);
  font-style: italic;
  color: var(--gold);
  font-size: 1.02rem;
  /* No border here — the artwork carries its own divider rule above. */
  margin: .35rem auto 0;
}

.footer-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4);
  text-align: center; width: 100%; max-width: 620px;
}
.footer-col { display: flex; flex-direction: column; align-items: center; }
.footer-h {
  font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 var(--s2); font-weight: 500;
}
.footer-col li { font-size: 1rem; color: var(--on-ink-mut); }
.footer-col li:not(:has(a)) { padding-block: .6rem; }
.footer-col a {
  text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color var(--dur) var(--ease);
}
.footer-col a:hover { color: var(--gold); }

.footer-base {
  display: flex; flex-direction: column; align-items: center;
  gap: .5rem;
  padding: var(--s3) 0;
  border-top: 1px solid var(--rule-ink);
  text-align: center;
}
.footer-base p { margin: 0; font-size: .875rem; color: var(--on-ink-mut); max-width: none; }

/* ─── Motion ─────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ── Between-page transition ────────────────────────────────
   When you click through to another page (e.g. About), the page
   content lifts and fades out; the destination then plays its own
   entrance. The header/nav stay put, so navigation reads as a
   continuous hand-off rather than a hard reload. Enhancement only:
   main.js adds .is-leaving; without JS pages just load normally. */
body.is-leaving #main {
  animation: pageLeave 260ms var(--ease) forwards;
}
@keyframes pageLeave {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}

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

/* ─── Print ──────────────────────────────────────────────── */
@media print {
  .site-header, .nav-toggle, .hero-media, .form { display: none; }
  body { background: #fff; color: #000; }
  .section-ink, .hero { background: #fff; color: #000; }
}