/* ============================================================
   NICOLE JAMES · DOWNTOWN AUSTIN CONDO SPECIALIST
   Design system + components
   ============================================================ */

/* -- TOKENS -- */
:root {
  /* Palette */
  --bone: #F4EFE7;
  --bone-2: #EDE6DA;
  --ink: #12100E;
  --ink-2: #2B2722;
  --terra: #9C7E66;
  --terra-deep: #7C5F4D;
  --limestone: #D8CFC0;
  --smoke: #6B6460;
  --line: rgba(18, 16, 14, 0.1);
  --line-dark: rgba(244, 239, 231, 0.1);

  /* Type */
  --font-serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', sans-serif;

  /* Scale */
  --shell-max: 1280px;
  --shell-pad: clamp(20px, 4vw, 56px);
  --section-y: clamp(72px, 9vw, 128px);

  /* Motion */
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 560ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* -- RESET -- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Match the body background so the area behind the iOS Safari URL-bar
     pill bleeds the page bone, not a stray system color. min-height
     keeps short pages (privacy, fair-housing) from leaving a strip
     where the body ends before the viewport bottom. */
  background: var(--bone);
  min-height: 100%;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv02";
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, p, ul, ol, blockquote, figure {
  margin: 0;
  padding: 0;
}
ul { list-style: none; }

/* -- TYPOGRAPHY -- */
.serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
}
.serif-italic {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  color: var(--terra);
  letter-spacing: -0.005em;
}

h1.display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(44px, 7vw, 88px);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

h2.display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

h3.title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(22px, 2.5vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  font-weight: 500;
}

.lede {
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 52ch;
}

.body-text {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
}

.meta {
  font-size: 12.5px;
  color: var(--smoke);
  letter-spacing: 0.01em;
}

/* -- SHELL + GRID -- */
.shell {
  max-width: var(--shell-max);
  margin: 0 auto;
  /* env(safe-area-inset-*) adds the notched iPhone landscape inset on
     top of the standard horizontal padding so content can't slide
     under the notch or home-indicator pill. Falls back to 0 on
     non-notched browsers. */
  padding-left: max(var(--shell-pad), env(safe-area-inset-left));
  padding-right: max(var(--shell-pad), env(safe-area-inset-right));
}

section {
  padding: var(--section-y) 0;
  position: relative;
}

section + section {
  border-top: 1px solid var(--line);
}
/* No divider between sibling sections inside a sticky stage —
   they overlap visually, so a top border on the covering section
   would read as a stray line at rest. */
.sticky-stage > section + section { border-top: 0; }

.s-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: clamp(40px, 5vw, 72px);
}

/* -- NAV -- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(140%) blur(12px);
  background: rgba(244, 239, 231, 0.82);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.nav.scrolled {
  border-bottom-color: var(--line);
  background: rgba(244, 239, 231, 0.95);
}
/* On mobile, use a fully opaque nav so the sticky hero going behind it
   during momentum scroll is hidden cleanly — no blurred text visibly
   creeping through the bar before sticky snaps. */
@media (max-width: 820px) {
  .nav, .nav.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bone);
  }
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--shell-pad);
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  line-height: 0;
}
.nav-logo img {
  height: 76px;
  width: auto;
  display: block;
  transform: translateY(8px); /* sit closer to nav bottom line */
}
@media (max-width: 720px) {
  .nav-logo img { height: 56px; transform: translateY(6px); }
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  position: relative;
  display: inline-block;
  transform-origin: center;
  transition: color var(--dur-fast), transform var(--dur-base) var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }
@media (hover: hover) and (min-width: 721px) {
  .nav-links a:hover { transform: scale(1.12); color: var(--ink); }
}
.nav-links a.nav-inquire {
  background: var(--ink);
  color: var(--bone);
  padding: 10px 20px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  transition: background var(--dur-fast);
}
.nav-links a.nav-inquire:hover { background: var(--ink-2); color: var(--bone); }

/* -- NAV: hamburger toggle (mobile only) -- */
.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.nav-toggle-lines {
  display: block;
  width: 20px;
  height: 14px;
  position: relative;
}
.nav-toggle-lines span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out), top var(--dur-base) var(--ease-out);
}
.nav-toggle-lines span:nth-child(1) { top: 0; }
.nav-toggle-lines span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle-lines span:nth-child(3) { top: calc(100% - 1.5px); }

/* -- NAV: overlay -- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bone);
  backdrop-filter: saturate(140%) blur(8px);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  pointer-events: none;
  overflow-y: auto;
}
.nav-overlay[hidden] { display: none; }
.nav-overlay.open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.nav-overlay-inner {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 18px var(--shell-pad) clamp(32px, 6vw, 56px);
}
.nav-overlay-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}
.nav-overlay-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--smoke);
}
.nav-close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-close:hover { color: var(--terra); }
.nav-overlay-stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: clamp(40px, 10vh, 80px) 0 clamp(24px, 4vh, 40px);
}
.nav-overlay-link {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(32px, 8vw, 40px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-overlay-link:hover,
.nav-overlay-link:active,
.nav-overlay-link:focus-visible { color: var(--terra); }
.nav-overlay-link.is-active { color: var(--terra); }

/* -- NAV: overlay contact block (phone + email) -- */
.nav-overlay-contact {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.nav-overlay-contact-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 0;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav-overlay-contact-item + .nav-overlay-contact-item {
  border-top: 1px solid var(--line);
}
.nav-overlay-contact-item:active,
.nav-overlay-contact-item:hover { color: var(--terra); }
.nav-overlay-contact-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  font-weight: 500;
}
.nav-overlay-contact-value {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
}
.nav-overlay-contact-item[data-chooser="email"] .nav-overlay-contact-value {
  font-size: 14px;
  word-break: break-all;
}

/* -- CONTACT CHOOSER (phone / email action sheet) -- */
.chooser {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.chooser[hidden] { display: none; }
.chooser.open {
  opacity: 1;
  pointer-events: auto;
}
.chooser-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 16, 14, 0.45);
  backdrop-filter: blur(4px);
}
.chooser-panel {
  position: relative;
  background: var(--bone);
  border-radius: 14px;
  margin: 0 12px 12px;
  padding: 20px 16px 16px;
  width: calc(100% - 24px);
  max-width: 440px;
  transform: translateY(24px);
  transition: transform var(--dur-base) var(--ease-out);
}
.chooser.open .chooser-panel { transform: translateY(0); }
.chooser-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0 18px;
}
.chooser-title {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  font-weight: 500;
}
.chooser-sub {
  font-size: 15.5px;
  color: var(--ink);
  letter-spacing: 0;
}
.chooser-row {
  display: flex;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.chooser-stack {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 2px;
}
.chooser-action {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 14px;
  font-size: 15px;
  color: var(--ink);
  background: var(--bone-2);
  border-radius: 10px;
  font-weight: 500;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chooser-stack .chooser-action {
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
  justify-content: flex-start;
  padding: 15px 18px;
}
.chooser-stack .chooser-action:last-child { border-bottom: 0; }
.chooser-action:active { background: var(--ink); color: var(--bone); }
.chooser-stack .chooser-action:active { background: var(--ink); color: var(--bone); }
.chooser-cancel {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 16px;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--smoke);
  background: transparent;
  border-radius: 10px;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.chooser-cancel:active { background: var(--bone-2); color: var(--ink); }

body.chooser-open { overflow: hidden; }
.nav-overlay-inquire {
  margin-top: 16px;
  background: var(--ink);
  color: var(--bone);
  padding: 14px 28px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  transition: background var(--dur-fast) var(--ease-out);
}
.nav-overlay-inquire:hover,
.nav-overlay-inquire:active { background: var(--ink-2); color: var(--bone); }

/* Body scroll lock when overlay is open */
/* nav-open scroll lock is now applied via position:fixed in JS
   (lockBody/unlockBody) — body { overflow: hidden } made iOS Safari
   pop the URL bar into expanded mode while the menu was opening. */

@media (max-width: 720px) {
  .nav-links { gap: 20px; }
  .nav-links a:not(.nav-inquire) { display: none; }
  /* Hide the desktop inquire pill on mobile; overlay provides it */
  .nav-links a.nav-inquire { display: none; }
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* -- SECTION WATERMARK --
   Oversized NJ logo as a faint background. div + background-image so
   `background-size: contain` always aspect-locks and fits the box. */
.section-watermark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  background-image: url('assets/nj-logo.png');
  background-repeat: no-repeat;
  background-size: contain;
}
section .shell { position: relative; z-index: 1; }

.hero { overflow: hidden; }
.hero-watermark {
  top: 4%;
  right: 2%;
  bottom: 4%;
  width: 58%;
  background-position: right center;
  opacity: 0.06;
}
/* On mobile, the portrait inside .hero is sticky. Drop the overflow
   clip on .hero (it was just for the watermark, which we hide here),
   and let the shell be static so the portrait's containing block is
   the sticky-stage — otherwise its pin zone would be the shell's tiny
   height and the portrait would barely stick at all. */
@media (max-width: 820px) {
  .hero { overflow: visible; }
  .hero .shell { position: static; }
  .hero-watermark { display: none; }
}

.record-section { overflow: hidden; }
.record-watermark {
  top: 6%;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  width: 48%;
  background-image: url('assets/nj-buildings.png');
  background-position: center;
  opacity: 0.05;
}
@media (max-width: 820px) {
  .record-watermark {
    width: 72%;
    opacity: 0.04;
  }
}

.credentials-section { overflow: hidden; }
.credentials-watermark {
  top: 20%;
  right: 8%;
  bottom: 20%;
  width: 16%;
  background-image: url('assets/nj-logo.png');
  background-position: right center;
  opacity: 0.035;
}
@media (max-width: 820px) {
  .credentials-watermark {
    top: auto;
    bottom: 4%;
    right: 8%;
    width: 28%;
    height: 22%;
    background-position: right bottom;
    opacity: 0.028;
  }
}

/* -- HERO -- */
.hero {
  padding-top: clamp(8px, 1.5vw, 20px);
  padding-bottom: clamp(24px, 4vw, 56px);
}
/* Hero + About sticky stage: hero pins immediately below the sticky nav
   (no pre-sticky scroll), about slides up over it as the user scrolls. */
.hero.hero-stuck {
  position: sticky;
  top: 113px; /* matches desktop nav height (76px logo + 36px padding + 1px border) */
  z-index: 1;
  background: var(--bone);
  /* Force a new stacking context + GPU layer so the sticky hero and
     #about (z-index 2) repaint reliably during the slide-up transition.
     Without this, browsers occasionally paint #about's text on top of
     the hero without repainting its bone background, so the hero text
     bleeds through (intermittent — depends on scroll timing and GPU). */
  isolation: isolate;
  will-change: transform;
}
/* On mobile, don't sticky the full hero — it's taller than the viewport,
   which forces a negative `top` and hits a documented iOS WebKit bug
   where the scrolling thread uses stale sticky constraints during
   momentum scroll (produces the visible downward jerk). The hero
   scrolls normally; we sticky only the portrait (which fits inside the
   viewport — that's the code path iOS handles correctly). See the
   mobile `.hero-portrait` rule further down. */
@media (max-width: 820px) {
  .hero.hero-stuck {
    position: static;
    top: auto;
    z-index: auto;
  }
}
#about {
  position: relative;
  z-index: 2;
  background: var(--bone);
  /* See .hero.hero-stuck note above — both siblings need their own
     compositing layers so the bone background paints over the sticky
     hero reliably as #about scrolls up. */
  isolation: isolate;
  will-change: transform;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.hero-eyebrow { margin-bottom: 28px; }
.hero h1 { margin-bottom: 36px; }
.hero p.lede { margin-bottom: 40px; }
.hero-ctas { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero-portrait {
  aspect-ratio: 4 / 5;
  background: var(--bone-2);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.hero-portrait-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--smoke);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  height: 100%;
}
.hero-caption {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-caption .n { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); font-weight: 600; }
.hero-caption .r { font-size: 12.5px; color: var(--smoke); }

@media (max-width: 820px) {
  /* Use block flow on mobile so the sticky portrait isn't trapped in a
     grid track (which has only its own height — no pin room). */
  .hero-grid { display: block; }
  .hero-copy { margin-bottom: 36px; }
  /* The scroll-reveal animation applies `transform: translateY(0)` which
     breaks `position: sticky` on the element. Suppress it here. */
  .hero-portrait[data-animate],
  .hero-portrait[data-animate].in { transform: none; }
  /* Portrait pins below the sticky nav; the hero itself is static here
     (see above) so the text reads, scrolls up, and the portrait arrives
     + pins at the nav before about slides over. Positive-top sticky on
     an element that fits in viewport — the code path iOS handles well.
     Position is gated by --portrait-pos (set to `sticky` by JS on first
     scroll). At first paint it's `static` so iOS Safari collapses the
     URL bar into the floating pill instead of holding it expanded
     because of an in-body sticky element. The pin behavior is identical
     once the user scrolls, which is also when it would visually engage. */
  .hero-portrait {
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
    position: var(--portrait-pos, static);
    top: 92px;
    z-index: 1;
  }
  .hero-ctas { gap: 18px; }
}

@media (max-width: 600px) {
  .hero { padding-top: clamp(32px, 6vw, 56px); padding-bottom: clamp(48px, 7vw, 72px); }
  .hero-grid { gap: 28px; }
  .hero-eyebrow { margin-bottom: 20px; }
  .hero h1 { margin-bottom: 24px; }
  .hero p.lede { margin-bottom: 28px; font-size: 15.5px; }
  .hero-portrait { max-width: clamp(260px, 80vw, 340px); }
}

@media (max-width: 420px) {
  h1.display { font-size: clamp(38px, 11.2vw, 44px); letter-spacing: -0.028em; }
  .hero-ctas {
    gap: 14px;
    flex-direction: column;
    align-items: stretch;
  }
  .hero-ctas .btn-primary { justify-content: center; }
  .hero-ctas .btn-ghost {
    align-self: flex-start;
    padding: 10px 0;
  }
}

/* -- BUTTONS -- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.btn-primary {
  background: var(--ink);
  color: var(--bone);
}
.btn-primary:hover { background: var(--ink-2); transform: translateY(-1px); }
.btn-ghost {
  color: var(--ink);
  padding: 14px 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
}
.btn-ghost:hover { color: var(--terra); border-bottom-color: var(--terra); }
.btn-outline {
  color: var(--ink);
  border: 1px solid var(--ink);
}
.btn-outline:hover { background: var(--ink); color: var(--bone); }

/* -- SPLIT SECTIONS -- */
.split {
  display: grid;
  grid-template-columns: 1fr 1px 1.5fr;
  gap: 0;
  align-items: start;
}
.split > .divider { background: var(--line); align-self: stretch; }
.split-left, .split-right { padding: 0 clamp(24px, 4vw, 56px); }
.split-left { padding-left: 0; }
.split-right { padding-right: 0; }

@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: 48px; }
  .split > .divider { display: none; }
  .split-left, .split-right { padding: 0; }
  /* On mobile, Inquire (right) comes before Credentials (left) */
  .credentials-section .split-right { order: 1; }
  .credentials-section .split-left { order: 2; }
}

/* -- ABOUT -- sticky left, scrolling right (desktop). Larger editorial type. */
/* align-items stays `start` (inherited from .split) so the sticky element
   has natural height and can actually stick as the right column scrolls past. */

.about-head {
  position: sticky;
  top: 140px; /* clears sticky nav (~112px logo + bottom nudge) + breathing room */
  align-self: start;
}
.about-head .hh { display: flex; flex-direction: column; gap: 4px; }
.about-head h2.display {
  font-size: clamp(40px, 4.8vw, 68px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.about-body { display: flex; flex-direction: column; gap: 40px; max-width: 62ch; }
.about-body .lede-line {
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.45;
}
.about-body .body-text {
  font-size: clamp(15.5px, 1.1vw, 17px);
  line-height: 1.75;
  color: var(--ink-2);
}

@media (max-width: 820px) {
  .about-head { position: static; top: auto; }
  .about-head h2.display { font-size: clamp(36px, 9vw, 56px); }
  .about-body { gap: 28px; }
  .about-body .body-text { font-size: 15.5px; line-height: 1.7; }
  .about-body .lede-line { font-size: 16px; }
}

@media (max-width: 600px) {
  .split { gap: 36px; }
  .about-body { gap: 22px; }
  .about-head h2.display { font-size: clamp(32px, 10vw, 44px); }
}

/* -- EVERYTHING I DO -- */
.svc-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  transition: grid-template-columns var(--dur-base) var(--ease-in-out);
}
.svc-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 32px 28px;
  background: var(--bone-2);
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 220px;
  position: relative;
}
.svc-card:hover { border-color: var(--ink); }
.svc-card .num { font-size: 11px; letter-spacing: 0.22em; color: var(--smoke); font-weight: 500; }
.svc-card h3 { font-size: 22px; }
.svc-card .teaser { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; }
.svc-card .plus {
  position: absolute;
  right: 28px;
  bottom: 28px;
  font-size: 22px;
  color: var(--smoke);
  transition: color var(--dur-fast), transform var(--dur-fast);
}
.svc-card:hover .plus { color: var(--ink); transform: rotate(90deg); }
.svc-card .expanded-content { display: none; }

.svc-row[data-expanded="0"] .svc-card:nth-child(1),
.svc-row[data-expanded="1"] .svc-card:nth-child(2),
.svc-row[data-expanded="2"] .svc-card:nth-child(3) {
  grid-column: 1 / -1;
  padding: 48px;
  min-height: 360px;
  background: var(--bone);
  border-color: var(--ink);
}

.svc-row[data-expanded="0"] .svc-card:nth-child(1) .plus,
.svc-row[data-expanded="1"] .svc-card:nth-child(2) .plus,
.svc-row[data-expanded="2"] .svc-card:nth-child(3) .plus {
  content: '×';
  transform: rotate(45deg);
}

.svc-row[data-expanded="0"] .svc-card:nth-child(1) .expanded-content,
.svc-row[data-expanded="1"] .svc-card:nth-child(2) .expanded-content,
.svc-row[data-expanded="2"] .svc-card:nth-child(3) .expanded-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 12px;
}

.svc-row[data-expanded="0"] .svc-card:nth-child(1) h3,
.svc-row[data-expanded="1"] .svc-card:nth-child(2) h3,
.svc-row[data-expanded="2"] .svc-card:nth-child(3) h3 {
  font-size: 30px;
}

.expanded-content .tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  color: var(--terra);
  font-size: 17px;
}
.expanded-content .bullets {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.expanded-content .bullets li {
  padding-left: 16px;
  position: relative;
  font-size: 14.5px;
  color: var(--ink);
}
.expanded-content .bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
}

/* Staging callout inside seller card */
.staging-callout {
  margin-top: 8px;
  padding: 20px 24px;
  background: var(--bone-2);
  border-left: 3px solid var(--terra);
  border-radius: 0 6px 6px 0;
}
.staging-callout .tl {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 600;
  margin-bottom: 10px;
}
.staging-callout h4 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 6px;
}
.staging-callout h4 em {
  color: var(--terra);
  font-weight: 300;
}
.staging-callout p {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}

/* Row when one is expanded: other two collapse below */
.svc-row[data-expanded]:not([data-expanded=""]) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
}
.svc-row[data-expanded="0"] .svc-card:nth-child(1) { grid-row: 1; grid-column: 1 / -1; }
.svc-row[data-expanded="0"] .svc-card:nth-child(2) { grid-row: 2; grid-column: 1; min-height: 160px; padding: 28px; }
.svc-row[data-expanded="0"] .svc-card:nth-child(3) { grid-row: 2; grid-column: 2; min-height: 160px; padding: 28px; }

.svc-row[data-expanded="1"] .svc-card:nth-child(2) { grid-row: 1; grid-column: 1 / -1; }
.svc-row[data-expanded="1"] .svc-card:nth-child(1) { grid-row: 2; grid-column: 1; min-height: 160px; padding: 28px; }
.svc-row[data-expanded="1"] .svc-card:nth-child(3) { grid-row: 2; grid-column: 2; min-height: 160px; padding: 28px; }

.svc-row[data-expanded="2"] .svc-card:nth-child(3) { grid-row: 1; grid-column: 1 / -1; }
.svc-row[data-expanded="2"] .svc-card:nth-child(1) { grid-row: 2; grid-column: 1; min-height: 160px; padding: 28px; }
.svc-row[data-expanded="2"] .svc-card:nth-child(2) { grid-row: 2; grid-column: 2; min-height: 160px; padding: 28px; }

@media (max-width: 820px) {
  .svc-row,
  .svc-row[data-expanded]:not([data-expanded=""]) {
    grid-template-columns: 1fr !important;
  }
  .svc-row[data-expanded] .svc-card { grid-column: 1 !important; grid-row: auto !important; }

  /* Expanded card: trim padding, keep room for the tap target */
  .svc-row[data-expanded="0"] .svc-card:nth-child(1),
  .svc-row[data-expanded="1"] .svc-card:nth-child(2),
  .svc-row[data-expanded="2"] .svc-card:nth-child(3) {
    padding: 28px 24px 64px;
    min-height: 0;
  }
  .svc-row[data-expanded="0"] .svc-card:nth-child(2),
  .svc-row[data-expanded="0"] .svc-card:nth-child(3),
  .svc-row[data-expanded="1"] .svc-card:nth-child(1),
  .svc-row[data-expanded="1"] .svc-card:nth-child(3),
  .svc-row[data-expanded="2"] .svc-card:nth-child(1),
  .svc-row[data-expanded="2"] .svc-card:nth-child(2) {
    min-height: 180px !important;
    padding: 28px 24px !important;
  }

  /* Collapsed cards default padding */
  .svc-card { padding: 28px 24px; min-height: 180px; }

  /* Expanded title tighter on mobile */
  .svc-row[data-expanded="0"] .svc-card:nth-child(1) h3,
  .svc-row[data-expanded="1"] .svc-card:nth-child(2) h3,
  .svc-row[data-expanded="2"] .svc-card:nth-child(3) h3 {
    font-size: 26px;
  }

  /* +/× tap target: min 44x44 */
  .svc-card .plus {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 1;
  }

  /* Staging callout: full-width feel, comfortable padding */
  .staging-callout {
    padding: 18px 18px;
    margin-left: -4px;
    margin-right: -4px;
  }
  .staging-callout h4 { font-size: 17px; }
}

@media (max-width: 420px) {
  .svc-row[data-expanded="0"] .svc-card:nth-child(1),
  .svc-row[data-expanded="1"] .svc-card:nth-child(2),
  .svc-row[data-expanded="2"] .svc-card:nth-child(3) {
    padding: 24px 20px 60px;
  }
  .svc-card { padding: 24px 20px; }
  .expanded-content .tag { font-size: 16px; }
  .expanded-content .bullets li { font-size: 14px; }
}

/* -- RECORD + PERSON -- */
.record-list { display: flex; flex-direction: column; gap: 48px; }
.record-item .v {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(44px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.record-item .l {
  margin-top: 10px;
  font-size: 13px;
  color: var(--smoke);
  letter-spacing: 0.02em;
}

.person-list { display: flex; flex-direction: column; gap: 32px; }
.person-item h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.person-item h3 em { color: var(--terra); font-weight: 300; }
.person-item p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 42ch;
}

@media (max-width: 600px) {
  .record-list { gap: 32px; }
  .record-item .v { font-size: clamp(40px, 11vw, 52px); }
  .record-item .l { font-size: 12.5px; margin-top: 8px; }
  .person-list { gap: 24px; }
  .person-item h3 { font-size: 20px; }
  .person-item p { font-size: 13.5px; }
}

/* -- TESTIMONIALS -- */
/* Editorial two-column layout: big quote mark anchors the left,
   testimonial rides the right column. Topbar holds eyebrow + arrows,
   footer holds dots. Tighter rhythm, less empty air. */
/* Sticky stage: testimonials pins while blog slides up over it,
   then both release together at the stage's bottom. */
.sticky-stage { position: relative; }

.testimonials-section {
  padding: clamp(56px, 7vw, 96px) 0;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bone);
}
/* Pull the testimonials section in tighter than the rest of the page —
   narrower hairlines, arrow buttons closer to center, quote lands more
   centered on the page. Mobile keeps the full shell. */
.testimonials-section > .shell {
  max-width: 960px;
}

.blog-section {
  position: relative;
  z-index: 2;
  background: var(--bone);
}
/* Higher specificity to beat `.sticky-stage > section + section
   { border-top: 0 }` which strips borders between siblings inside a
   sticky stage. We want a hairline at the top edge of the blog section
   to separate it from the testimonials above. */
.sticky-stage > .blog-section {
  border-top: 1px solid var(--line);
}

.t-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.testimonial-meta {
  display: flex;
  align-items: center;
  gap: 18px;
}
.testimonial-counter {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--terra);
  letter-spacing: 0.08em;
  font-weight: 500;
}

.testimonial-wrap {
  position: relative;
  display: grid;
  grid-template-columns: clamp(80px, 12vw, 160px) 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
  min-height: 240px;
}
@media (max-width: 720px) {
  .testimonial-wrap {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 180px;
  }
}

.t-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(120px, 16vw, 200px);
  line-height: 0.7;
  color: var(--terra);
  opacity: 0.85;
  user-select: none;
  margin-top: -12px;
}
@media (max-width: 720px) {
  .t-mark { font-size: 72px; margin-bottom: 4px; margin-top: -4px; line-height: 0.65; }
}
@media (max-width: 480px) {
  .t-mark { font-size: 64px; }
}

.t-stage {
  position: relative;
  min-height: 220px;
  overflow: hidden; /* clip testimonials sliding in/out of frame */
}
.testimonial {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 40ch;
  opacity: 0;
  transform: translateX(0);
  pointer-events: none;
  will-change: transform, opacity;
  transition: opacity 380ms var(--ease-out), transform 520ms var(--ease-out);
}
.testimonial.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
/* Directional exit/enter classes — JS toggles these on transitions. */
.testimonial.exit-left {
  opacity: 0;
  transform: translateX(-72px);
}
.testimonial.exit-right {
  opacity: 0;
  transform: translateX(72px);
}
/* Pre-enter state: no transition, off-screen, ready to animate in. */
.testimonial.pre-enter-right {
  opacity: 0;
  transform: translateX(72px);
  transition: none;
}
.testimonial.pre-enter-left {
  opacity: 0;
  transform: translateX(-72px);
  transition: none;
}
.testimonial blockquote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.testimonial blockquote em {
  font-weight: 300;
  font-style: italic;
  color: var(--terra);
}
.testimonial .attrib { display: flex; flex-direction: column; gap: 4px; }
.testimonial .attrib::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--ink);
  margin-bottom: 14px;
}
.testimonial .attrib .name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.testimonial .attrib .context {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--smoke);
}

.testimonial-footer {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 20px;
  display: flex;
  justify-content: center;
}
.testimonial-dots {
  display: flex;
  gap: 10px;
}
.testimonial-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--smoke);
  opacity: 0.3;
  transition: opacity var(--dur-fast), background var(--dur-fast);
  cursor: pointer;
  position: relative;
}
/* Invisible 44×44 hit target around each dot so they're tappable on
   mobile without enlarging the visible dot. */
.testimonial-dot::after {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
}
.testimonial-dot.active { opacity: 1; background: var(--ink); }
.testimonial-arrows { display: flex; gap: 6px; }
.testimonial-arrows button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
  font-size: 13px;
  color: var(--ink);
}
.testimonial-arrows button:hover { border-color: var(--ink); background: var(--ink); color: var(--bone); }

/* Mobile: bump arrows to 44x44 tap target, tighten topbar gap */
@media (max-width: 720px) {
  .t-topbar { gap: 12px; }
  .testimonial-meta { gap: 12px; }
  .testimonial-arrows { gap: 8px; }
  .testimonial-arrows button { width: 44px; height: 44px; font-size: 15px; }
  .testimonial-counter { font-size: 12px; }
}
/* 375px: allow topbar to wrap so counter+arrows drop below eyebrow if needed */
@media (max-width: 480px) {
  .t-topbar { flex-wrap: wrap; row-gap: 14px; }
  .testimonial-meta { width: 100%; justify-content: space-between; gap: 16px; }
}

/* -- BLOG WINDOW -- */
/* The metaphor: a framed window looking INTO the blog entry.
   Scrollable pane + bottom fade + CTA footer.
   On click, grows to fullscreen as transition into the entry page. */
.blog-window {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bone);
  border: 1px solid var(--ink);
  border-radius: 10px;
  overflow: hidden;
  color: var(--ink);
  max-width: 820px;
  margin: 0 auto 48px;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  box-shadow: 0 1px 0 var(--line);
}
.blog-window:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -18px rgba(18,16,14,0.35), 0 1px 0 var(--ink);
}
.blog-window:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 4px;
}

/* Expansion transition — JS adds .jw-expanding + sets fixed coords, then
   inline transition runs the grow. .jw-open fades the window contents to
   bone just before navigation to hide the browser load flash. */
.blog-window.jw-expanding {
  will-change: top, left, width, height, border-radius;
  z-index: 200;
  cursor: default;
  box-shadow: 0 24px 80px -20px rgba(18,16,14,0.45);
}
.blog-window.jw-expanding:hover { transform: none; }
.blog-window.jw-fading .jw-pane,
.blog-window.jw-fading .jw-footer,
.blog-window.jw-fading .jw-fade {
  opacity: 0;
  transition: opacity 180ms ease;
}

/* Corner ticks removed */
.jw-corners { display: none; }

/* The 'pane' — scrollable viewport into the entry. Sized short on
   purpose so the inline preview content always overflows by ~100px,
   keeping the .jw-fade gradient over real text instead of empty bone. */
.jw-pane {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: auto;
  max-height: clamp(320px, 36vw, 440px);
  background: var(--bone-lift, var(--bone));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(18,16,14,0.15) transparent;
}
.jw-pane::-webkit-scrollbar { width: 6px; }
.jw-pane::-webkit-scrollbar-track { background: transparent; }
.jw-pane::-webkit-scrollbar-thumb {
  background: rgba(18,16,14,0.12);
  border-radius: 3px;
}
.jw-pane::-webkit-scrollbar-thumb:hover { background: rgba(18,16,14,0.25); }

.jw-pane-inner {
  padding: clamp(32px, 4.5vw, 64px) clamp(28px, 4vw, 64px) 0;
}
/* Last paragraph in the preview body: zero its bottom margin so when
   you scroll to the bottom of the pane the actual text touches the
   bottom edge of the scroll area, not 40–60px of empty bone. That
   keeps the .jw-fade gradient over real text. */
.jw-body p:last-child { margin-bottom: 0; }

/* Meta row at top of pane — mimics the real entry page */
.jw-head {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  font-weight: 500;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.jw-no {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--terra);
  font-weight: 500;
  text-transform: none;
}
.jw-sep { width: 20px; height: 1px; background: var(--smoke); opacity: 0.4; }
.jw-date { color: var(--smoke); }
.jw-tag {
  margin-left: auto;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
}

/* Big title inside the window — styled like an entry hero */
.jw-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 24px;
  max-width: 18ch;
}
.jw-title em { color: var(--terra); font-weight: 300; }

.jw-lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 56ch;
  margin-bottom: 28px;
}

.jw-body p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 58ch;
  margin-bottom: 16px;
}

/* The fade — sits above the footer, fades the bottom of the
   visible (overflowing) text into bone so "READ FULL ENTRY" reads
   as the natural next step. */
.jw-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 56px; /* clears the footer bar */
  height: 120px;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(250, 246, 239, 0) 0%,
    rgba(250, 246, 239, 0.85) 60%,
    var(--bone-lift, var(--bone)) 100%
  );
  pointer-events: none;
}
@media (max-width: 720px) { .jw-fade { bottom: 48px; height: 90px; } }

/* Bottom bar — the 'threshold' of the window */
.jw-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px clamp(28px, 4vw, 64px);
  background: var(--bone);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  min-height: 56px;
}
@media (max-width: 720px) { .jw-footer { min-height: 48px; padding: 14px 24px; } }
.jw-cta { transition: color var(--dur-fast); }
.jw-arrow {
  font-size: 18px;
  transition: transform var(--dur-fast), color var(--dur-fast);
}
.blog-window:hover .jw-cta { color: var(--terra); }
.blog-window:hover .jw-arrow { color: var(--terra); transform: translateX(6px); }

/* Mobile refinements for the blog window */
@media (max-width: 720px) {
  .blog-window { border-radius: 8px; margin-bottom: 32px; }
  .jw-pane { max-height: clamp(380px, 76vw, 460px); }
  .jw-head {
    gap: 10px;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    margin-bottom: 22px;
    padding-bottom: 14px;
  }
  .jw-sep { width: 14px; }
  .jw-title {
    font-size: clamp(26px, 7.4vw, 34px);
    line-height: 1.04;
    margin-bottom: 18px;
    max-width: 16ch;
  }
  .jw-lede { font-size: 15.5px; margin-bottom: 20px; }
  .jw-body p { font-size: 14.5px; line-height: 1.6; }
  .jw-fade { height: 140px; }
}
/* 375px: hide decorative ENTRY tag so the meta row doesn't wrap,
   tighten CTA letter-spacing so "READ THE ENTRY →" doesn't squeeze. */
@media (max-width: 480px) {
  .jw-tag { display: none; }
  .jw-title { font-size: 26px; letter-spacing: -0.015em; max-width: none; }
  .jw-footer {
    padding: 13px 18px;
    letter-spacing: 0.16em;
    font-size: 10.5px;
    min-height: 46px;
  }
  .jw-arrow { font-size: 16px; }
}

/* -- EARLIER ENTRIES LIST -- */
.blog-earlier { margin-top: clamp(32px, 4vw, 56px); }
.je-label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  font-weight: 500;
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
}
.je-list { display: flex; flex-direction: column; }
.je-list li { border-bottom: 1px solid var(--line); }
.je-list a {
  display: grid;
  grid-template-columns: 70px 140px 1fr 40px;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  color: var(--ink);
  transition: opacity var(--dur-fast);
}
.je-list a:hover { opacity: 0.65; }
.je-no {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--terra);
  letter-spacing: 0.08em;
  font-weight: 500;
}
.je-date {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--smoke);
  font-weight: 500;
}
.je-title {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.75vw, 22px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.je-title em { color: var(--terra); font-weight: 300; }
.je-arr { font-size: 15px; color: var(--smoke); text-align: right; transition: color var(--dur-fast), transform var(--dur-fast); }
.je-list a:hover .je-arr { color: var(--terra); transform: translateX(4px); }

.je-all {
  display: inline-block;
  margin-top: 28px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--ink);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.je-all:hover { color: var(--terra); border-color: var(--terra); }

@media (max-width: 720px) {
  .je-list a {
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
    padding: 18px 0;
  }
  .je-no { grid-row: 1; grid-column: 1; }
  .je-date { grid-row: 1; grid-column: 2; text-align: right; }
  .je-title { grid-row: 2; grid-column: 1 / -1; margin-top: 4px; font-size: 17px; line-height: 1.3; }
  .je-arr { display: none; }
  .je-all { margin-top: 22px; font-size: 10.5px; letter-spacing: 0.18em; }
}
@media (max-width: 480px) {
  .je-list a { padding: 16px 0; }
  .je-date { font-size: 10.5px; letter-spacing: 0.16em; }
}

/* -- CREDENTIALS + INQUIRE -- */
.creds-list { display: flex; flex-direction: column; gap: 32px; }
.cred-item .lb {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  font-weight: 500;
  margin-bottom: 8px;
}
.cred-item .v1 {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}
.cred-item .v2 {
  font-size: 13px;
  color: var(--smoke);
  margin-top: 2px;
}

.inquire-cta h3 {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin-bottom: 24px;
}
.inquire-cta h3 em { color: var(--terra); font-weight: 300; }
.inquire-cta p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 42ch;
  margin-bottom: 28px;
}

/* Mobile: tighten cred items + inquire CTA so they don't feel orphaned */
@media (max-width: 720px) {
  .creds-list { gap: 24px; }
  .cred-item .lb { font-size: 10.5px; margin-bottom: 6px; letter-spacing: 0.2em; }
  .cred-item .v1 { font-size: 14.5px; }
  .cred-item .v2 { font-size: 12.5px; }
  .inquire-cta { margin-top: 8px; }
  .inquire-cta h3 { font-size: 26px; margin-bottom: 18px; }
  .inquire-cta p { font-size: 14px; margin-bottom: 36px; }
  /* Tighten gap between section heading and inquire body on mobile */
  .credentials-section .s-head { margin-bottom: 24px; }
}
@media (max-width: 480px) {
  .inquire-cta h3 { font-size: 24px; }
  .inquire-cta .btn { width: 100%; text-align: center; }
}

/* -- FOOTER -- */
footer {
  background: var(--ink);
  color: var(--limestone);
  /* Bottom padding extends into the iOS Safari safe area so the dark
     footer reaches behind the URL-bar pill at the bottom of every page
     (no bone strip between footer and URL bar). */
  padding: 80px 0 calc(32px + env(safe-area-inset-bottom));
  margin-top: 0;
}
.f-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.3fr 1fr;
  gap: 48px;
}
.f-brand .mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 26px;
  color: var(--bone);
  /* Swap to <img src="/assets/logo-dark.png"> when Claude Code wires real logo */
}
.f-brand .tag {
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--smoke);
}
.f-brand .pair {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line-dark);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--limestone);
}
footer h5 {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone);
  font-weight: 600;
  margin-bottom: 20px;
}
footer ul { display: flex; flex-direction: column; gap: 10px; }
footer ul a, footer address a {
  color: var(--limestone);
  font-size: 13px;
  transition: color var(--dur-fast);
}
footer ul a:hover, footer address a:hover { color: var(--bone); }
footer address { font-style: normal; font-size: 13px; line-height: 1.7; color: var(--limestone); }

.f-bottom {
  max-width: var(--shell-max);
  margin: 64px auto 0;
  padding: 24px var(--shell-pad) 0;
  border-top: 1px solid var(--line-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: var(--smoke);
}

@media (max-width: 900px) {
  .f-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .f-brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  footer { padding: 56px 0 calc(24px + env(safe-area-inset-bottom)); }
  .f-grid { grid-template-columns: 1fr; gap: 32px; }
  .f-brand .mark { font-size: 24px; }
  .f-brand .pair { margin-top: 20px; padding-top: 20px; font-size: 12px; }
  footer h5 { margin-bottom: 14px; }
  footer ul { gap: 4px; }
  /* Long emails/URLs wrap cleanly rather than overflow the 1-col track */
  footer address,
  footer address a,
  footer ul a { word-break: break-word; overflow-wrap: anywhere; }
  /* Lift legal/util link contrast on the dark footer for smaller sizes */
  footer ul a, footer address a { color: var(--bone-2, var(--limestone)); }
  /* Hit-target padding on each footer link — meets Apple HIG 44×44
     minimum without affecting visual rhythm. */
  footer ul a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
  }
  footer address a {
    display: inline-block;
    padding: 8px 0;
    min-height: 32px;
  }
  .f-bottom {
    margin-top: 40px;
    padding-top: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: 10.5px;
    line-height: 1.5;
  }
}

/* -- FORMS -- */
.form-field { margin-bottom: 24px; }
.form-field label {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 8px;
  font-weight: 500;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  font-size: 15px;
  color: var(--ink);
  transition: border-color var(--dur-fast);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
}
.form-field textarea { resize: none; min-height: 80px; overflow: hidden; }

/* Honeypot — invisible to humans, irresistible to bots. Server rejects
   any submission where the "website" field is non-empty. */
.form-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submit-status line under the button (validation errors, server errors). */
.form-status {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  min-height: 1em;
}
.form-status[data-kind="error"] {
  color: #b04a3b;
  font-style: italic;
}

/* Success panel that replaces the form on a successful submit. */
.form-success {
  padding: 8px 0;
}
.form-success-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 16px;
}
.form-success-line {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 14px;
}
.form-success-sub {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

/* -- FORM OPT-IN CHECKBOXES -- */
.form-optins {
  display: flex;
  flex-direction: column;
  margin: 28px 0 8px;
}
.form-optin {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
  cursor: pointer;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.form-optin + .form-optin { border-top: 1px solid var(--line); }
.form-optin:last-child { border-bottom: 1px solid var(--line); }
.form-optin input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.form-optin-box {
  width: 18px;
  height: 18px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  position: relative;
  display: inline-block;
  margin-top: 2px;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.form-optin input:checked ~ .form-optin-box {
  background: var(--ink);
}
.form-optin input:checked ~ .form-optin-box::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--bone);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.form-optin input:focus-visible ~ .form-optin-box {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
}
.form-optin-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.form-optin-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.form-optin-note {
  font-size: 12.5px;
  color: var(--smoke);
  line-height: 1.45;
}
.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%238A8178' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
}

/* -- BLOG PAGE -- */
.blog-hero {
  padding-top: 72px;
  padding-bottom: 48px;
}
.blog-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 40px;
}
.blog-hero-eyebrow .line { width: 40px; height: 1px; background: var(--smoke); }

.blog-hero-latest { margin-top: 16px; }
.blog-hero-latest .e-meta {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  font-weight: 500;
  margin-bottom: 24px;
}
.blog-hero-latest h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(36px, 5.5vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 32px;
  max-width: 18ch;
}
.blog-hero-latest h1 em { color: var(--terra); font-weight: 300; }
.blog-hero-latest .e-excerpt {
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 58ch;
  margin-bottom: 36px;
}

.blog-list {
  border-top: 1px solid var(--line);
  padding-top: 40px;
}
.blog-list .label {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 32px;
}
.blog-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr auto;
  gap: 32px;
  align-items: baseline;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  transition: opacity var(--dur-fast);
  color: var(--ink);
}
.blog-row:hover { opacity: 0.7; }
.blog-row .no { font-size: 11px; letter-spacing: 0.18em; color: var(--smoke); font-weight: 500; }
.blog-row .ttl {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.blog-row .ttl em { color: var(--terra); font-weight: 300; }
.blog-row .date { font-size: 12px; letter-spacing: 0.08em; color: var(--smoke); text-transform: uppercase; }
.blog-row .arr { font-size: 14px; color: var(--ink); }

@media (max-width: 720px) {
  .blog-row { grid-template-columns: 1fr auto; gap: 12px; padding: 20px 0; }
  .blog-row .no, .blog-row .date { display: none; }
}

/* FAQ block */
.faq-block { margin-top: clamp(80px, 10vw, 128px); }
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  border-top: 1px solid var(--line);
  padding: 24px 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  /* Apple HIG min 44px tap target — without this the button itself is
     just text height, leaving the row hard to tap precisely on mobile. */
  padding: 14px 0;
  min-height: 44px;
}
.faq-q .mark { font-size: 16px; color: var(--smoke); transition: transform var(--dur-fast); margin-left: 20px; flex-shrink: 0; }
.faq-item.open .faq-q .mark { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-base) var(--ease-in-out), padding var(--dur-base);
  padding-top: 0;
}
.faq-item.open .faq-a {
  max-height: 600px;
  padding-top: 16px;
}
.faq-a p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 64ch;
}

/* -- BLOG ENTRY PAGE -- */
.entry-hero {
  padding-top: 72px;
  padding-bottom: 40px;
  max-width: 760px;
  margin: 0 auto;
}
.entry-hero .breadcrumb {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 32px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.entry-hero .breadcrumb a { color: var(--smoke); transition: color var(--dur-fast); }
.entry-hero .breadcrumb a:hover { color: var(--ink); }
.entry-hero .e-no {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 16px;
}
.entry-hero h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.entry-hero h1 em { color: var(--terra); font-weight: 300; }
.entry-hero .e-lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 24px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
}
.entry-hero .byline {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--smoke);
  display: flex;
  gap: 12px;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.entry-body {
  max-width: 680px;
  margin: 0 auto;
  /* Top/bottom only — left/right padding is supplied by the .shell
     class on the same element (the shorthand `padding: x 0 y` was
     overriding .shell's horizontal padding and pinning text to the
     screen edge on mobile). */
  padding-top: 40px;
  padding-bottom: 72px;
}
.entry-body p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 24px;
}
.entry-body h2 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 48px 0 20px;
}
.entry-body h2 em { color: var(--terra); font-weight: 300; }
.entry-body ul { padding-left: 24px; margin-bottom: 24px; }
.entry-body ul li {
  list-style: disc;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 10px;
}

.entry-next {
  max-width: 760px;
  margin: 0 auto;
  /* Top/bottom only — see .entry-body note above. */
  padding-top: 48px;
  padding-bottom: 48px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.entry-next a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--smoke);
  letter-spacing: 0.02em;
}
.entry-next a .ttl {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* -- CONTACT PAGE -- */
.contact-hero {
  padding-top: 72px;
  padding-bottom: 40px;
}
.contact-hero h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin-bottom: 32px;
  max-width: 14ch;
}
.contact-hero h1 em { color: var(--terra); font-weight: 300; }
.contact-hero .lede { font-size: 17px; }

.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(48px, 8vw, 120px);
  padding-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--line);
  margin-top: clamp(40px, 5vw, 72px);
}
.contact-direct h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 32px;
}
.contact-item { margin-bottom: 28px; }
.contact-item .lb {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 8px;
}
.contact-item .v {
  font-size: 18px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}
.contact-item .v a:hover { color: var(--terra); }
/* Chooser-trigger buttons (phone/email) look like the previous tel:/
   mailto: links but open the same call/text + mail-app sheet that the
   nav overlay uses, so users can pick instead of being shoved into one
   handler. */
.contact-item-trigger {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-fast);
}
.contact-item-trigger:hover,
.contact-item-trigger:focus-visible { color: var(--terra); }

.contact-map {
  margin-top: 48px;
  aspect-ratio: 16 / 9;
  background: var(--bone-2);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--smoke);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* -- HOME: ABOUT "READ MORE" LINK -- */
.about-readmore {
  margin-top: 24px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  letter-spacing: -0.005em;
}
.about-readmore a {
  color: var(--terra);
  border-bottom: 1px solid var(--terra);
  padding-bottom: 2px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.about-readmore a:hover {
  color: var(--terra-deep);
  border-bottom-color: var(--terra-deep);
}

/* -- HOME: FEATURED BUILDINGS GRID --
   3-column grid of building cards. Mirrors the svc-mini pattern but
   each card has an image area on top and meta below. */
.bldg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
}
.bldg-item {
  display: flex;
  flex-direction: column;
  background: #FAF6EF;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(18, 16, 14, 0.08), 0 2px 4px rgba(18, 16, 14, 0.04);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
/* Doubled selector beats [data-animate].in's transform: translateY(0) */
@media (hover: hover) and (pointer: fine) {
  .bldg-item.bldg-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 44px rgba(18, 16, 14, 0.14), 0 6px 12px rgba(18, 16, 14, 0.08);
  }
}
@media (hover: none), (pointer: coarse) {
  .bldg-item.bldg-item:active {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 44px rgba(18, 16, 14, 0.14), 0 6px 12px rgba(18, 16, 14, 0.08);
  }
}
.bldg-img {
  aspect-ratio: 3 / 4;
  background: var(--bone-2);
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
}
.bldg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bldg-img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--smoke);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.bldg-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 20px 24px;
}
.bldg-meta .title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
}
.bldg-meta .teaser {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 32ch;
}
@media (max-width: 820px) {
  .bldg-grid {
    grid-template-columns: 1fr;
    gap: clamp(28px, 5vw, 40px);
  }
  .bldg-img { aspect-ratio: 5 / 4; }
}
/* When the buildings grid sits directly above .svc-mini in the same
   section (no separate heading between), put a comfortable gap between
   the two row sets. */
.bldg-grid + .svc-mini {
  margin-top: clamp(40px, 5vw, 72px);
}
/* "See more buildings →" link sitting between the bldg grid and the
   svc-mini cards, to break up the visual stretch. */
.bldg-more {
  margin-top: clamp(48px, 5vw, 72px);
  text-align: center;
}
.bldg-more a {
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--terra);
  border-bottom: 1px solid var(--terra);
  padding-bottom: 3px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.bldg-more a:hover {
  color: var(--terra-deep);
  border-bottom-color: var(--terra-deep);
}
.bldg-more + .svc-mini {
  margin-top: clamp(56px, 6.5vw, 96px);
}

/* -- HOME: CONDENSED SERVICES PREVIEW -- */
.svc-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.svc-mini-item {
  background: var(--bone);
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: background var(--dur-base) var(--ease-out);
}
.svc-mini-item:hover { background: var(--bone-2); }
.svc-mini-item .num {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--smoke);
  font-weight: 500;
  text-transform: uppercase;
}
.svc-mini-item .title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
}
.svc-mini-item .teaser {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 28ch;
}
.svc-mini-item .arrow {
  margin-top: auto;
  font-size: 18px;
  color: var(--smoke);
  align-self: flex-start;
  transition: color var(--dur-fast), transform var(--dur-base) var(--ease-out);
}
.svc-mini-item:hover .arrow { color: var(--terra); transform: translateX(6px); }
.svc-mini-cta {
  margin-top: clamp(32px, 4vw, 48px);
  display: flex;
  justify-content: center;
}
@media (max-width: 820px) {
  .svc-mini { grid-template-columns: 1fr; }
  .svc-mini-item {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 24px;
    row-gap: 6px;
    align-items: center;
    padding: 28px 24px;
  }
  .svc-mini-item .title { grid-column: 1; grid-row: 1; }
  .svc-mini-item .teaser { grid-column: 1; grid-row: 2; }
  .svc-mini-item .arrow {
    grid-column: 2;
    grid-row: 1 / 3;
    margin: 0;
    align-self: center;
    font-size: 22px;
  }
}

/* -- SERVICES PAGE: per-service blocks -- */
.svc-page {
  padding: clamp(56px, 8vw, 96px) 0;
}
.svc-page + .svc-page { border-top: 1px solid var(--line); }
.svc-page-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}
.svc-page-head .num {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  font-weight: 500;
  margin-bottom: 24px;
}
.svc-page-head h2.display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
}
.svc-page-head .lede {
  font-size: 16px;
  color: var(--ink-2);
  max-width: 32ch;
}
.svc-page-body .body-text {
  margin-bottom: 24px;
  font-size: 15.5px;
  line-height: 1.65;
}
.svc-page-body .body-text strong {
  color: var(--ink);
  font-weight: 600;
}
.svc-page-body .bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
.svc-page-body .bullets li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.svc-page-body .bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 12px;
  height: 1px;
  background: var(--terra);
}
.svc-page-body .staging-callout {
  margin-top: 32px;
  padding: 28px;
  background: var(--bone-2);
  border-left: 3px solid var(--terra);
}
.svc-page-body .staging-callout .tl {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  font-weight: 500;
  margin-bottom: 12px;
}
.svc-page-body .staging-callout h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  margin-bottom: 8px;
}
.svc-page-body .staging-callout h4 em {
  color: var(--terra);
  font-weight: 300;
}
.svc-page-body .staging-callout p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
}
@media (max-width: 820px) {
  .svc-page-grid { grid-template-columns: 1fr; }
}

/* -- SHARED PAGE CTA (services + about) -- */
.svc-page-cta {
  padding: clamp(72px, 9vw, 128px) 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.svc-page-cta h2.display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
}
.svc-page-cta h2.display em { color: var(--terra); font-weight: 300; }
.svc-page-cta .lede {
  margin: 0 auto 32px;
  max-width: 52ch;
  font-size: 17px;
}

/* -- ABOUT PAGE: video hero --
   The about page's hero is a full-bleed video section (.about-hero-video)
   that fills the viewport below the nav. On mobile it sticks under the
   nav while the next section (#about) snaps up over it. */
:root { --nav-h: 113px; }
@media (max-width: 720px) { :root { --nav-h: 93px; } }

.about-hero-video {
  padding: 0;
  overflow: hidden;
  background: var(--ink);
  height: calc(100vh - var(--nav-h));
  height: calc(100lvh - var(--nav-h));
}
/* Inner wrapper inside .about-hero-video — gives the overlay a stable
   positioned ancestor regardless of whether the section itself is
   static or sticky (the var-based sticky-deferred CSS toggles between
   them). Using an explicit height (not just height:100%) so the
   containing block is always sized correctly on first paint, before
   any JS runs, even when the parent section is position:static. */
.about-hero-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.about-hero-video-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Animated overlay (e.g. signature/logo GIF) over the video.
   Centered horizontally; vertical anchor and width tuned per breakpoint.
   Hidden until JS reveals it after the video begins playing, so the
   GIF animation doesn't start (and finish silently) before the video
   has even rendered. */
.about-hero-overlay {
  position: absolute;
  left: 50%;
  /* Anchor with viewport units instead of percentage so positioning
     doesn't depend on the wrapper having a definite resolved height
     (the percentage chain through 100%-on-static-parent is fragile
     at first paint). The hero section is sized to ~viewport height,
     so vh ≈ % of the visible hero — same visual result, but stable. */
  top: 30vh;
  transform: translate(-50%, -50%);
  width: min(60vw, 720px);
  height: auto;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}
.about-hero-overlay.is-ready {
  opacity: 1;
}

/* Scroll cue at the bottom of the hero — small "Scroll" label with a
   thin vertical line that gently pulses downward, signaling there's
   more page below the video. Sits above the iOS URL-bar pill area so
   it's visible from first paint. */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  /* env(safe-area-inset-bottom) clears the home indicator on iPhones,
     +110px clears the URL-bar pill above it. On desktop env() = 0 so
     the cue sits 110px from screen bottom. */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 110px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 3;
  pointer-events: none;
}
.hero-scroll-cue-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(244, 239, 231, 0.88);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.hero-scroll-cue-line {
  display: block;
  width: 1px;
  height: 44px;
  background: rgba(244, 239, 231, 0.85);
  transform-origin: top;
  animation: heroScrollCuePulse 2.4s ease-in-out infinite;
}
@keyframes heroScrollCuePulse {
  0%, 100% { transform: scaleY(0.55); opacity: 0.55; }
  50%      { transform: scaleY(1);    opacity: 1;    }
}
@media (max-width: 720px) {
  .about-hero-overlay {
    top: 32vh;
    width: min(92vw, 640px);
  }
}
/* About page: override the mobile sticky-disable from .hero-stuck. The
   video section is exactly viewport-sized, so the iOS sticky bug doesn't
   apply, and we want the video to pin while #about slides up over it.
   Position is gated by --hero-pos (set to `sticky` by JS on first
   scroll). At first paint it's `static` so iOS Safari collapses the
   URL bar into the floating pill instead of holding it expanded because
   of an in-body sticky element. */
@media (max-width: 820px) {
  body.page-about .hero.hero-stuck {
    position: var(--hero-pos, static);
    top: var(--nav-h);
    z-index: 1;
  }
}

/* No scroll-snap on body — mandatory scroll-snap on body is a known
   iOS Safari trigger that keeps the URL bar in expanded mode (an opaque
   tab bar covers the bottom of the viewport). The about page reads
   fine without it. */

/* -- ABOUT PAGE -- editorial portrait + body spread (refined) */
.about-page {
  padding-top: var(--section-y);
  padding-bottom: clamp(72px, 9vw, 128px);
}
.about-page-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
  padding-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--line);
}
/* Portrait: subtle inset hairline frame + caption below */
.about-page-portrait {
  aspect-ratio: 4 / 5;
  background: var(--bone-2);
  overflow: visible;
  position: sticky;
  top: 100px;
  margin: 0;
  padding: 0;
}
.about-page-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.about-page-portrait-placeholder {
  width: 100%;
  aspect-ratio: 4 / 5;
  align-items: center;
  justify-content: center;
  color: var(--smoke);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  outline: 1px solid var(--line);
  outline-offset: -1px;
}
.about-page-portrait-caption {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
/* Body: hierarchy + section marker */
.about-page-body {
  position: relative;
  padding-top: 4px;
}
.about-page-body .lede-line {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: clamp(28px, 3vw, 40px);
  max-width: 34ch;
}
.about-page-body .body-text {
  font-family: var(--font-sans);
  font-size: clamp(15.5px, 1.2vw, 16px);
  line-height: 1.75;
  color: var(--ink-2);
  max-width: 58ch;
  margin-bottom: clamp(20px, 2.2vw, 28px);
}
/* Inline italic accents inside about body text — Cormorant at the same
   point size reads visually smaller than Manrope, so bump it slightly. */
.about-page-body .body-text .serif-italic {
  font-size: 1.18em;
  line-height: 1;
  letter-spacing: -0.01em;
}
/* ============================================================
   § 02 · The reach (Christie's distribution section, about page)
   ============================================================ */
.reach-section {
  padding: clamp(72px, 9vw, 128px) 0;
}
.reach-section .s-head { margin-bottom: clamp(48px, 5vw, 72px); }
.reach-section .stat-row { margin-bottom: clamp(48px, 6vw, 80px); }
/* Mobile-only line break utility. Renders a hard break only on narrow widths. */
.br-mobile { display: none; }
@media (max-width: 720px) { .br-mobile { display: block; } }

/* Three equal-column variant — used for services § 01 (For sellers) where
   we have three offer tiles instead of the default two. Doubled selector
   so it beats the base .svc-offer-grid rule that comes later in the file. */
.svc-offer-grid.svc-offer-grid--three {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 820px) {
  .svc-offer-grid.svc-offer-grid--three { grid-template-columns: 1fr; }
}
/* Services § 03 For buyers: 2-column layout — prose + testimonial on left,
   FAQ push-link aside on the right, vertically centered with the left. */
.buyers-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.buyers-split-aside { margin: 0; }
/* The FAQ push-link in the buyers aside reads slightly bigger than the
   default editorial push-link sizing — gives the standalone aside more
   visual presence next to the buyers prose. */
.buyers-split-aside .push-link { font-size: clamp(17px, 1.6vw, 21px); }
@media (max-width: 820px) {
  .buyers-split { grid-template-columns: 1fr; gap: clamp(40px, 6vw, 64px); }
}

/* Closing CTA lede — sub-line under the H2, above the button. */
.svc-page-cta-lede {
  max-width: 56ch;
  margin: clamp(20px, 2vw, 28px) auto clamp(28px, 3vw, 40px);
  text-align: center;
  color: var(--ink-2);
}
/* Asymmetric "magazine spread" — one feature card spans both rows on the
   left, two regular cards stack on the right. */
.svc-offer-grid.svc-offer-grid--feature {
  grid-template-columns: 1.45fr 1fr;
  grid-template-rows: auto auto;
}
.svc-offer-grid.svc-offer-grid--feature > :first-child {
  grid-row: 1 / span 2;
}
.svc-offer--feature .svc-offer-title {
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
}
.svc-offer--feature .svc-offer-body {
  font-size: clamp(15px, 1.15vw, 17px);
  max-width: 38ch;
}
/* Feature card pins its link to the bottom-right corner via absolute
   positioning — flex-based alignment was producing inconsistent results
   between browsers / cached CSS, so this guarantees flush-right. */
.svc-offer--feature {
  position: relative;
  padding-bottom: clamp(96px, 11vw, 144px);
}
.svc-offer--feature .svc-offer-link {
  position: absolute;
  left: clamp(28px, 3vw, 48px);
  bottom: clamp(32px, 3.5vw, 52px);
  margin: 0;
  padding: 0;
  align-items: flex-start;
}
@media (max-width: 820px) {
  .svc-offer-grid.svc-offer-grid--feature {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .svc-offer-grid.svc-offer-grid--feature > :first-child {
    grid-row: auto;
  }
}
@media (max-width: 720px) {
  .reach-section .stat-row {
    grid-template-columns: 1fr;
  }
  /* Feature card link absolute-positioning works on desktop where the
     body text is short and the card has fixed padding-bottom to clear
     it. On mobile the body wraps to many lines and the absolutely-
     positioned link overlaps the closing paragraph. Switch to static
     flow, right-aligned below the body. */
  .svc-offer--feature {
    padding-bottom: clamp(28px, 4vw, 44px);
  }
  .svc-offer--feature .svc-offer-link {
    position: static;
    margin-top: clamp(20px, 4vw, 32px);
    align-items: flex-end;
  }
}

.about-page-body-marker {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-top: clamp(32px, 4vw, 52px);
  padding-top: 12px;
  border-top: 1px solid var(--line);
  display: inline-block;
}
.about-placeholder {
  padding: clamp(56px, 8vw, 96px) 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 820px) {
  .about-page-grid { grid-template-columns: 1fr; }
  .about-page-portrait { position: static; aspect-ratio: 5 / 4; }
  .about-page-portrait img { height: 100%; }
}

/* -- SCROLL REVEAL -- */
[data-animate] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-animate].in {
  opacity: 1;
  transform: translateY(0);
}

/* HOME HERO targeted animations — perceptibly noticeable on first paint:
   - .hero-copy text slides in from the LEFT, longer distance + longer
     duration + staggered delays per element so the eye reads the cascade
   - .hero-portrait rises in from the BOTTOM, big distance + slight delay
   End states use `transform: none` (not translateY/X 0) so the mobile
   sticky portrait — which JS later promotes to position:sticky — has
   no lingering transform that would break sticky pinning. */
.hero-copy [data-animate] {
  transform: translateX(-90px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.hero-copy [data-animate].in {
  transform: none;
}
/* Stagger the four text elements: eyebrow first, then h1, then lede,
   then CTAs. ~120ms gaps so the cascade is readable but not slow. */
.hero-copy .hero-eyebrow[data-animate] { transition-delay: 0ms; }
.hero-copy h1[data-animate]            { transition-delay: 120ms; }
.hero-copy .lede[data-animate]         { transition-delay: 240ms; }
/* CTAs need a longer, gentler opacity curve — the dark "Begin a
   conversation" button against the bone background reads as a sudden
   "pop" with the standard ease-out. Slower duration + ease-in-out
   ramps brightness in evenly so it doesn't jolt. */
.hero-copy .hero-ctas[data-animate] {
  transition: opacity 1400ms ease-in-out, transform 900ms var(--ease-out);
  transition-delay: 360ms;
}

.hero-portrait[data-animate] {
  transform: translateY(120px);
  transition: opacity 1000ms var(--ease-out), transform 1000ms var(--ease-out);
  transition-delay: 200ms;
}
.hero-portrait[data-animate].in {
  transform: none;
}

/* ============================================================
   ABOUT page · § 01 IN PARTNERSHIP — editorial logo pairing + pillars
   ============================================================ */
.partner-logos {
  padding: clamp(40px, 5vw, 72px) 0 clamp(20px, 2.5vw, 32px);
  border-top: 1px solid var(--line);
  margin-bottom: clamp(12px, 1.5vw, 20px);
}
.partner-pairing {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(16px, 2.5vw, 32px);
  max-width: 720px;
  margin: 0 auto;
}
.partner-logo {
  padding: 0;
  min-height: 56px;
  display: flex;
  align-items: center;
  flex: 0 1 auto;
}
.partner-logo--brokerage { justify-content: flex-end; }
.partner-logo--agent { justify-content: flex-start; }
.partner-logo img {
  max-height: clamp(40px, 5vw, 64px);
  width: auto;
  display: block;
}
/* Per-logo sizing — the Christie's lockup is wide and short, Nicole's mark is
   close to square, so equal max-heights make Nicole's logo read tiny. Bump it. */
.partner-logo--brokerage img { max-height: clamp(56px, 6vw, 80px); }
.partner-logo--agent img { max-height: clamp(120px, 13vw, 168px); }
.partner-logo-placeholder {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  font-style: normal;
}
.partner-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 0;
}
.partner-sep-line {
  flex: 0 0 32px;
  height: 1px;
  background: var(--line);
  display: block;
}
@media (max-width: 560px) {
  .partner-pairing { grid-template-columns: 1fr; gap: 16px; }
  .partner-sep-line { flex: 0 0 48px; }
  /* When the pairing collapses to a single column, the brokerage and
     agent rows inherit their desktop justification (right-aligned and
     left-aligned respectively against the auto-column seam). Center
     both so the stack reads as one tidy column. */
  .partner-logo--brokerage,
  .partner-logo--agent {
    justify-content: center;
  }
  .partner-sep { justify-content: center; }
}
.partner-sep-glyph {
  font-size: clamp(14px, 1.5vw, 18px);
  color: var(--terra);
  font-style: italic;
  line-height: 1;
}

.partner-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.partner-pillar {
  padding: clamp(20px, 2.5vw, 32px) 0;
  padding-right: clamp(20px, 3vw, 40px);
}
.partner-pillar + .partner-pillar {
  padding-left: clamp(20px, 3vw, 40px);
  border-left: 1px solid var(--line);
  padding-right: 0;
}
.partner-pillar:last-child { padding-right: 0; }
.partner-pillar .v {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}
.partner-pillar .lb {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--smoke);
}

/* ============================================================
   ABOUT page · § 02 BY THE NUMBERS — editorial stat row (bone-2 bg)
   ============================================================ */
.stats-section {
  padding: clamp(72px, 9vw, 128px) 0;
  background: var(--bone-2);
}
.stat-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  border-top: 1px solid var(--line);
  margin-top: clamp(40px, 5vw, 64px);
}
.stat-cell {
  padding: clamp(28px, 3.5vw, 48px) clamp(24px, 2.5vw, 40px) clamp(28px, 3.5vw, 48px) 0;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.stat-cell:last-child { border-right: none; }
.stat-cell + .stat-cell { padding-left: clamp(24px, 2.5vw, 40px); }
.stat-index {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--smoke);
  margin-bottom: clamp(16px, 2vw, 28px);
  display: block;
}
.stat-v {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(52px, 6.5vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.stat-cell--featured .stat-v {
  font-size: clamp(64px, 8vw, 108px);
}
.stat-l {
  font-family: var(--font-sans);
  font-size: clamp(12px, 1vw, 13px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-top: 14px;
}

/* ============================================================
   PUSH transition cues — refined editorial dividers (no chip)
   ============================================================ */
.push-link {
  margin-top: clamp(32px, 4vw, 56px);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--terra);
}
.push-link--right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.push-link--right::before {
  content: '';
  display: block;
  width: clamp(60px, 12vw, 120px);
  height: 1px;
  background: var(--terra);
  opacity: 0.35;
}
.push-link--center {
  margin-top: clamp(48px, 6vw, 72px);
  text-align: center;
  display: flex;
  align-items: center;
  gap: 20px;
}
.push-link--center::before,
.push-link--center::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--terra);
  opacity: 0.25;
}
.push-link a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast), opacity var(--dur-fast);
  white-space: nowrap;
  /* Generous mobile hit target — push-links are the editorial nav
     between sections; we want them comfortable to tap. */
  display: inline-block;
  padding: 8px 4px;
  min-height: 44px;
}
.push-link a:hover { color: var(--terra-deep); }
.push-link a:active { color: var(--terra-deep); opacity: 0.7; }

/* ============================================================
   SERVICES page · HERO building carousel — polished
   ============================================================ */
.bldg-carousel-section {
  padding: clamp(20px, 2.5vw, 36px) 0 clamp(20px, 2vw, 32px);
}
/* Kill the auto sibling-border between carousel and the next svc-page */
.bldg-carousel-section + .svc-page { border-top: 0 !important; padding-top: clamp(20px, 2vw, 32px) !important; }
.bldg-carousel-topbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 24px;
}
.bldg-carousel-cue {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
}
.bldg-carousel-viewport {
  position: relative;
  overflow: hidden;
}
.bldg-carousel-viewport::after {
  content: '';
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(60px, 8vw, 120px);
  height: 100%;
  background: linear-gradient(to right, transparent, var(--bone));
  z-index: 2;
}
.bldg-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 30vw, 340px);
  gap: clamp(16px, 1.5vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--shell-pad);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Tell the browser horizontal panning is the primary gesture so swipe
     reliably scrolls the carousel instead of being eaten by the <a>
     children's tap target. */
  touch-action: pan-x;
  scrollbar-width: none;
  padding: 8px var(--shell-pad);
  padding-right: clamp(80px, 12vw, 160px);
}
.bldg-carousel::-webkit-scrollbar { display: none; }
.bldg-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transform-origin: center bottom;
  transition: transform 0.4s var(--ease-out);
  /* iOS Safari: prevent the long-press link preview + image drag from
     stealing touchmove events away from the carousel scroll. */
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  touch-action: pan-x;
}
.bldg-card img { -webkit-user-drag: none; }
.bldg-card-img {
  aspect-ratio: 4 / 5;
  background: var(--bone-2);
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
  background-image: linear-gradient(
    105deg,
    var(--bone-2) 40%,
    #EAE1D4 55%,
    var(--bone-2) 70%
  );
  background-size: 200% 100%;
  animation: bldg-shimmer 1.6s ease-in-out infinite;
}
.bldg-card-img:has(img) {
  animation: none;
  background-image: none;
}
/* Photo-pending placeholder for buildings without a photo yet */
.bldg-card-img--coming {
  animation: none;
  background-image: none;
  background-color: var(--bone-2);
  display: grid;
  place-items: center;
}
.bldg-card-img--coming::after {
  content: 'Photo coming';
  font-family: var(--font-sans);
  font-size: 9.5px;
  color: var(--smoke);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}
.bldg-card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes bldg-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Hover states scoped to true pointing devices only — iOS Safari can
   report `hover: hover` on touch, leaving the scale "frozen" on the
   last-tapped card. `pointer: fine` excludes touch. */
@media (hover: hover) and (pointer: fine) {
  .bldg-card:hover { transform: scale(1.045); }
  .bldg-card:hover .bldg-card-meta strong { color: var(--terra); }
}
/* Belt-and-suspenders: explicitly clear any stuck transform on touch */
@media (hover: none), (pointer: coarse) {
  .bldg-card,
  .bldg-card:hover,
  .bldg-card:focus,
  .bldg-card:active {
    transform: none;
  }
}
.bldg-card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-family: var(--font-sans);
  padding: 0 2px;
}
.bldg-card-meta span {
  font-size: 9.5px;
  color: var(--smoke);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  font-weight: 500;
}
.bldg-card-meta strong {
  font-weight: 400;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.005em;
  transition: color 0.2s ease;
  font-family: var(--font-serif);
}
.bldg-carousel-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 28px;
}
.bldg-carousel-counter {
  font-family: 'Courier New', Courier, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--smoke);
  min-width: 9ch;
  text-align: center;
}
.bldg-carousel-track {
  display: block;
  width: clamp(80px, 10vw, 140px);
  height: 1px;
  background: var(--line);
  position: relative;
  align-self: center;
}
.bldg-carousel-track-fill {
  position: absolute;
  left: 0;
  top: -1px;
  height: 2px;
  width: 25%;
  background: var(--ink);
  transition: left var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out);
}
/* ============================================================
   SERVICES page · VIEW SWITCH (carousel ↔ map)
   ============================================================ */
.bldg-view-toggle {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(14px, 1.6vw, 22px);
}
.bldg-view-switch {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  font-family: var(--font-sans);
  transition: color var(--dur-fast);
}
.bldg-view-switch-label {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.bldg-view-switch-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
}
.bldg-view-switch-state {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  min-width: 70px;
  text-align: left;
  transition: color var(--dur-fast);
}
.bldg-view-switch-state [data-state="on"] { display: none; }
.bldg-view-switch[aria-pressed="true"] .bldg-view-switch-state [data-state="off"] { display: none; }
.bldg-view-switch[aria-pressed="true"] .bldg-view-switch-state [data-state="on"] { display: inline; }
.bldg-view-switch:hover .bldg-view-switch-state,
.bldg-view-switch:focus-visible .bldg-view-switch-state { color: var(--terra); }
.bldg-view-switch-track {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
  border-radius: 999px;
  background: var(--bone-2);
  border: 1px solid var(--line);
  transition: background var(--dur-fast), border-color var(--dur-fast);
  flex-shrink: 0;
}
.bldg-view-switch-thumb {
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--smoke);
  transition: left var(--dur-fast), background var(--dur-fast);
}
.bldg-view-switch[aria-pressed="true"] .bldg-view-switch-track {
  background: var(--terra);
  border-color: var(--terra);
}
.bldg-view-switch[aria-pressed="true"] .bldg-view-switch-thumb {
  left: calc(100% - 18px);
  background: var(--bone);
}

/* Map view — Leaflet container + brand-styled pins/popups */
.bldg-view--map { margin-top: clamp(8px, 1vw, 12px); }
.bldg-map {
  width: 100%;
  height: clamp(420px, 56vh, 640px);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bone-2);
}
.leaflet-container { background: var(--bone-2) !important; font-family: var(--font-sans) !important; }
/* Pin: small terra dot with subtle ring; grows on hover */
.bldg-map-pin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--terra);
  border: 2px solid var(--bone);
  box-shadow: 0 1px 6px rgba(0,0,0,0.18), 0 0 0 1px rgba(156,126,102,0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}
.bldg-map-pin:hover {
  transform: scale(1.35);
  box-shadow: 0 2px 10px rgba(0,0,0,0.25), 0 0 0 2px rgba(156,126,102,0.35);
}
/* Popup styling — match the editorial palette */
.leaflet-popup-content-wrapper {
  background: var(--bone) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}
.leaflet-popup-tip {
  background: var(--bone) !important;
  border: 1px solid var(--line) !important;
}
.leaflet-popup-content {
  margin: 14px 16px !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  min-width: 200px;
}
.bldg-popup-name {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 2px;
}
.bldg-popup-district {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 12px;
}
.bldg-popup-link {
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--terra);
  text-decoration: none;
  border-bottom: 1px solid rgba(156,126,102,0.35);
  padding-bottom: 1px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.bldg-popup-link:hover {
  color: var(--terra-deep);
  border-bottom-color: var(--terra-deep);
}
.leaflet-popup-close-button {
  color: var(--smoke) !important;
  padding: 6px 8px 0 0 !important;
}
.leaflet-popup-close-button:hover { color: var(--ink) !important; }
/* Zoom controls */
.leaflet-control-zoom a {
  background: var(--bone) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  font-family: var(--font-serif) !important;
  font-weight: 400 !important;
}
.leaflet-control-zoom a:hover {
  background: var(--bone-2) !important;
  color: var(--terra) !important;
}
.leaflet-control-attribution {
  background: rgba(244,239,231,0.85) !important;
  font-size: 10px !important;
  color: var(--smoke) !important;
}
.leaflet-control-attribution a { color: var(--terra) !important; }

.bldg-carousel-arrow {
  appearance: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
@media (hover: hover) {
  .bldg-carousel-arrow:hover {
    border-color: var(--ink);
    color: var(--terra);
  }
}
.bldg-carousel-arrow:disabled {
  opacity: 0.25;
  pointer-events: none;
}

/* Floating arrow buttons — sit on top of the carousel viewport,
   vertically centered on the cards' image area. */
.bldg-carousel-arrow--floating {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bone);
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 18px rgba(0,0,0,0.06);
  font-size: 15px;
  /* Nudge above center so they sit on the image, not the meta line */
  margin-top: calc(-1 * (clamp(12px, 1vw, 14px) + 14px) / 2);
}
.bldg-carousel-arrow--floating.bldg-carousel-arrow--prev { left: clamp(8px, 2vw, 24px); }
.bldg-carousel-arrow--floating.bldg-carousel-arrow--next { right: clamp(8px, 2vw, 24px); }
@media (hover: hover) {
  .bldg-carousel-arrow--floating:hover {
    background: var(--ink);
    color: var(--bone);
    border-color: var(--ink);
  }
}

/* ============================================================
   SERVICES page · § 01 connector + tighter prose
   ============================================================ */
.svc-01-connector {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 20px;
  opacity: 0.7;
}
.svc-page:first-of-type .svc-prose .body-text {
  max-width: 62ch;
  line-height: 1.75;
  margin-bottom: 28px;
  font-size: 15.5px;
}

/* ============================================================
   SERVICES page · § 02 sellers — paired offerings (no boxes)
   ============================================================ */
.svc-offer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(40px, 5vw, 64px);
}
.svc-offer {
  padding: clamp(32px, 3.5vw, 52px) clamp(28px, 3vw, 48px);
  background: var(--bone-2);
}
.svc-offer + .svc-offer {
  border-left: 1px solid var(--line);
}
.svc-offer-numeral {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--terra);
  margin-bottom: clamp(20px, 2vw, 28px);
}
.svc-offer-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  color: var(--ink);
}
.svc-offer-body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.65;
  color: var(--smoke);
  max-width: 38ch;
  margin: 0;
}

/* ============================================================
   SERVICES page · § 03 off-market split (prose | hairlined list)
   ============================================================ */
.svc-prose-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  align-items: start;
  position: relative;
}
.svc-prose-grid > .svc-prose {
  padding-right: clamp(32px, 4vw, 64px);
}
.svc-prose-grid > .advisory-bullets {
  border-left: 1px solid var(--line);
  padding-left: clamp(32px, 4vw, 64px);
}
.svc-prose .body-text {
  max-width: 60ch;
  line-height: 1.72;
}
.advisory-bullets {
  list-style: none;
  padding-top: 4px;
  margin: 0;
}
.advisory-bullets li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.advisory-bullets li:first-child {
  border-top: 1px solid var(--line);
}
.ab-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--terra);
  min-width: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}
.ab-label {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.4;
}

/* ============================================================
   SERVICES page · § 04 closing thought (pull-quote) + CTA
   ============================================================ */
.closing-thought {
  position: relative;
  margin-top: clamp(48px, 6vw, 80px);
  padding: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px);
  max-width: 54ch;
  border: 0;
}
.closing-thought::before {
  content: '\201C';
  position: absolute;
  top: -0.1em;
  left: 0;
  font-family: var(--font-serif);
  font-size: clamp(72px, 9vw, 112px);
  line-height: 1;
  color: var(--terra);
  opacity: 0.18;
  pointer-events: none;
}
.closing-thought p {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.closing-thought cite {
  display: block;
  margin-top: 16px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--smoke);
}

/* CTA refinement — chapter-close treatment */
.svc-page-cta {
  padding: clamp(96px, 11vw, 160px) 0;
  border-top: 1px solid var(--line);
  text-align: center;
}
.svc-page-cta h2.display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 40px;
}
.svc-page-cta h2.display em { color: var(--terra); font-weight: 300; }

/* ============================================================
   COHESION — s-head animation cascade + svc-page rhythm
   ============================================================ */
.svc-page { padding: clamp(64px, 8vw, 96px) 0; }
.s-head .eyebrow[data-animate]      { transition-delay: 0ms; }
.s-head h2[data-animate],
.s-head h1[data-animate]             { transition-delay: 100ms; }
.s-head .body-text[data-animate],
.s-head .lede[data-animate]          { transition-delay: 200ms; }

/* ============================================================
   MOBILE DESIGN PASS for the new sections
   ============================================================ */
@media (max-width: 720px) {
  /* § 01 partnership — compact stack + vertical pillar list */
  .partner-pairing { max-width: 100%; }
  .partner-sep-line { flex: 0 0 32px; }
  /* Pillars stack vertically on mobile, almost-touching, each one
     a single text row with value left + label right (was a horizontal
     scrollable carousel of pills, which read as a side-quest on a
     phone). */
  .partner-pillars {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: none;
    padding: 0;
    margin: 0;
    overflow: visible;
  }
  .partner-pillar {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    background: var(--bone-2);
    border-radius: 4px;
    min-width: 0;
    margin: 0;
  }
  /* Override the desktop sibling rule that adds a left border + padding
     when pillars are arranged horizontally. */
  .partner-pillar + .partner-pillar {
    padding-left: 18px;
    border-left: 1px solid var(--line);
  }
  .partner-pillar .v {
    font-size: 16px;
    line-height: 1.2;
    margin: 0;
    /* Long URL ("christiesrealestate.com") shouldn't shove the label
       off the row — let it shrink first. */
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .partner-pillar .lb {
    font-size: 10px;
    letter-spacing: 0.2em;
    flex-shrink: 0;
  }
  /* Pipe divider between value and label, both visually left-aligned
     in a single text line: "~50 countries | GLOBAL NETWORK". */
  .partner-pillar .lb::before {
    content: '|';
    display: inline-block;
    margin-right: 10px;
    color: var(--smoke);
    opacity: 0.45;
    letter-spacing: 0;
    font-weight: 400;
  }

  /* § 02 stats — keep 2x2, never 1-col */
  .stat-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  .stat-cell {
    padding: 22px 18px;
  }
  .stat-cell:nth-child(2) { border-right: none; }
  .stat-cell:nth-child(3),
  .stat-cell:nth-child(4) {
    border-top: 1px solid var(--line);
  }
  .stat-cell:nth-child(3) { padding-left: 0; }
  .stat-cell:nth-child(4) { padding-left: 18px; }
  .stat-cell .stat-v { font-size: clamp(40px, 11vw, 56px); }
  .stat-cell--featured .stat-v { font-size: clamp(48px, 13vw, 68px); }

  /* Carousel — 1.4 visible cards + edge fade via mask */
  .bldg-carousel-topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 16px;
  }
  /* MOBILE CAROUSEL — native scroll + JS auto-drift + invisible wrap.
     The mobile JS path (scripts.js → "MOBILE CAROUSEL") clones the
     originals twice so the DOM is [SET-A | SET-B | SET-C], then drifts
     scrollLeft and silently jumps by ±setWidth at the boundaries.
     The !important rules below are belt-and-suspenders: if any inline
     style somehow leaked from the desktop marquee path (e.g. a wide
     window resized down), they snap the layout back so finger-swipe
     and the wrap-around math keep working. */
  .bldg-carousel {
    display: grid !important;
    grid-auto-flow: column !important;
    /* 68vw → on a 390px iPhone that's ~265px: premium-sized, with the
       next card peeking ~117px so it's obvious there's more. Tweak
       this number to taste — bigger = fewer cards visible. */
    grid-auto-columns: 68vw !important;
    gap: clamp(14px, 3.5vw, 20px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    /* Proximity (not mandatory) so iOS inertia + auto-drift coexist. */
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
    padding: 8px var(--shell-pad) !important;
    /* No huge right-padding needed: the wrap loops infinitely, so the
       last card never has to be the visual end. */
    padding-right: var(--shell-pad) !important;
  }
  .bldg-card {
    flex: unset !important;
    scroll-snap-align: start !important;
    transform: none !important;
  }
  /* Marquee track wrapper (desktop-only DOM). On the off-chance it
     exists at this breakpoint after a window resize, neutralize it. */
  .bldg-marquee-track {
    display: contents !important;
    transform: none !important;
  }

  /* Drop the right-edge fade gradient so the parent viewport doesn't
     visually compete with the finger-scroll. */
  .bldg-carousel-viewport { overflow: visible; }
  .bldg-carousel-viewport::after { display: none; }
  .bldg-carousel-arrow { display: none; }
  .bldg-carousel-track { width: clamp(80px, 28vw, 140px); }
  .bldg-carousel-counter { font-size: 10px; }

  /* § 02 sellers — stack with horizontal divider */
  .svc-offer-grid { grid-template-columns: 1fr; }
  .svc-offer + .svc-offer {
    border-left: none;
    border-top: 1px solid var(--line);
  }

  /* § 04 closing thought */
  .closing-thought {
    max-width: none;
    margin-top: clamp(24px, 5vw, 40px);
  }
  .closing-thought p { font-size: clamp(18px, 4.5vw, 24px); }

  /* Push links — center on narrow screens */
  .push-link--right {
    align-items: center;
  }
  .push-link--right::before { width: 48px; }
}
@media (max-width: 820px) {
  /* § 03 off-market — stack prose then bullets, hairline divider */
  .svc-prose-grid {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 32px);
  }
  .svc-prose-grid > .svc-prose { padding-right: 0; }
  .svc-prose-grid > .advisory-bullets {
    border-left: none;
    padding-left: 0;
    margin-top: 36px;
  }
}
@media (max-width: 480px) {
  /* Tighter section padding on the smallest phones */
  .svc-page { padding: clamp(48px, 10vw, 72px) 0; }
  .stats-section { padding: clamp(48px, 10vw, 72px) 0; }
  .stat-cell--featured .stat-v { font-size: clamp(48px, 14vw, 64px); }
}

/* ============================================================
   BUILDING placeholder pages — coming-soon profile
   ============================================================ */
.building-page {
  padding: clamp(40px, 5vw, 64px) 0 clamp(96px, 11vw, 160px);
}
.building-back {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: clamp(40px, 5vw, 72px);
  transition: color var(--dur-fast);
}
.building-back:hover { color: var(--ink); }
.building-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}
/* No fixed aspect-ratio: let the photo display in its native shape
   (landscape stays landscape, portrait stays portrait). The hairline
   frame still gives the image presence; sizes align via the grid's
   align-items:start so taller images don't stretch the row. */
.building-hero-img {
  background: var(--bone-2);
  overflow: hidden;
  outline: 1px solid var(--line);
  outline-offset: -1px;
  align-self: start;
}
.building-hero-img img {
  width: 100%;
  height: auto;
  display: block;
}
/* Photo-pending placeholder for building hero */
.building-hero-img--coming {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
}
.building-hero-img--coming::after {
  content: 'Photo coming';
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--smoke);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}
.building-hero-meta {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 1.8vw, 24px);
}
.building-hero-meta .display {
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
}
.building-coming-soon {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--ink-2);
  margin: 0;
}
.building-hero-meta .lede {
  margin: 0;
  max-width: 50ch;
}
.building-hero-meta .btn {
  margin-top: 16px;
}
@media (max-width: 820px) {
  .building-hero {
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 48px);
  }
}

/* ============================================================
   404 page
   ============================================================ */
.error-404 {
  padding: clamp(96px, 13vw, 176px) 0 clamp(112px, 14vw, 192px);
}
.error-404-inner {
  max-width: 52ch;
}
.error-404-inner .eyebrow {
  color: var(--smoke);
  margin-bottom: clamp(20px, 2.5vw, 32px);
}
.error-404-inner .display {
  margin-bottom: clamp(20px, 2.5vw, 32px);
}
.error-404-inner .lede {
  margin-bottom: clamp(40px, 5vw, 64px);
}
.error-404-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.error-404-link {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.error-404-link:hover {
  color: var(--smoke);
  border-color: transparent;
}

/* ============================================================
   ACCESSIBILITY — skip link, focus rings, reduced motion
   ============================================================ */

/* Skip-to-main-content link, hidden until focused */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}

/* Visible focus rings on every interactive surface that lacks one */
.btn:focus-visible,
.bldg-carousel-arrow:focus-visible,
.chooser-action:focus-visible,
.nav-toggle:focus-visible,
.bldg-card:focus-visible,
.testimonial-dot:focus-visible,
footer a:focus-visible,
.nav-links a:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Form fields keep border-bottom but also get a proper keyboard ring */
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}

/* Prevent iOS Safari auto-zoom on focused inputs (any <16px input zooms) */
@media (max-width: 820px) {
  .form-field input,
  .form-field select,
  .form-field textarea { font-size: 16px; }
}

/* ============================================================
   prefers-reduced-motion — respect OS setting
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Disable hero video + animated overlay entirely for vestibular safety */
  .about-hero-video-el,
  .about-hero-overlay,
  .hero-scroll-cue-line { animation: none !important; }
  /* Static fallback colors instead of shimmering placeholders */
  .bldg-card-img { animation: none !important; background-image: none !important; }
}