/* ============================================================
   JK WEBSITE — styles.css
   Design authority: F6 brief (locked). Matches portal system.

   Fonts — sanctioned fallbacks (same policy as portals):
     The Seasons   -> Cormorant Garamond (display serif, Google)
     Proxima Nova  -> Helvetica Neue / Arial (body sans)
     Accent serif  -> Libre Baskerville (labels, dates, Google)

   Locked rules: brand red #A92D2F · footer #000000 · ground #FFF
   body #1A1A1A · no border-radius · no shadows · no gradients ·
   no background photography behind text · only animation is
   button hover opacity 0.85 / 150ms ease ·
   section padding 80px desktop / 56px mobile ·
   viewports 375 / 390 / 768 / 1280 / 1440.

   W1 (July 16 2026) retired the 960px desktop lock and replaced every
   hardcoded column width with the --content-max / --gutter tokens below.
   The content column is now 720 / 960 / 1200 across the three tiers.
   ============================================================ */

:root {
  --brand-red:  #A92D2F;
  --ink:        #1A1A1A;
  --ground:     #FFFFFF;
  --footer-bg:  #000000;
  --cream:      #F5F0E8;
  --hairline:   rgba(26, 26, 26, 0.10);
  --input-line: rgba(26, 26, 26, 0.5);
  --muted:      rgba(26, 26, 26, 0.6);

  --display: 'Cormorant Garamond', 'Playfair Display', serif;
  --accent:  'Libre Baskerville', Georgia, serif;
  --sans:    'Helvetica Neue', Arial, sans-serif;

  /* ---- W1 three-tier breakpoint system -------------------------------
     Mobile  <768px   : 720 max / 20px gutter
     Tablet  768-1199 : 960 max / 36px gutter
     Desktop 1200+    : 1200 max / 48px gutter   (960px lock retired)

     Every content column on the site — .wrap, the footer, hero content,
     the green band, and the Sell/Buy bands — reads these two tokens, so a
     tier change moves the whole page at once and nothing drifts out of
     alignment. Full-bleed bands stay edge-to-edge at all tiers; only the
     column inside them is capped. --------------------------------------- */
  --content-max: 720px;
  --gutter: 20px;
  --section-pad: 56px;

  /* W4.12: single source of truth for the shared band height. The Home/About
     hero band and the Buy/Sell carousel (≥768px) both read this token, so they
     compute a bit-identical height at every viewport geometry — no per-tier
     numeric parity to drift. Base tier below carries the hero's original
     70vh/480/640; the ≥1200px override mirrors its 46vw/560/760. */
  --band-h: clamp(480px, 70vh, 640px);

  /* F11 (structural): single source of truth for hero h1 VERTICAL POSITION —
     same protection class as --band-h. Both hero content blocks anchor their
     h1 top edge here, so Home and About align by construction at ANY viewport
     width, not just at calibrated tiers. Retires the 37/47/66px per-tier
     offsets, which patched the gap between a centred box (Home) and a
     bottom-anchored one (About) and drifted between calibration points.

     Bottom-referenced, NOT a fraction of the band. Measured from About (the
     visual reference): its h1 top sat a near-constant distance above the band
     BOTTOM — 350.0px at every width >=1200 (incl. 1301), 351.2 at 768, 360.6
     at 390 — while the equivalent RATIO swung 0.390 -> 0.540. A ratio token
     could not have reproduced it; this does.

     Anchoring the TOP edge (not the centre) also makes first lines land level
     regardless of wrap or line count, and removes any dependency on content
     hanging below the h1 — the source of the old drift. */
  --hero-h1-top: calc(var(--band-h) - 350px);

  /* ---- W2.5 type-scale tokens -----------------------------------------
     Canonical register = the home "For Sellers" block: eyebrow (12px accent
     caps) / section heading (h2, 32px desktop / 27px mobile) / body (16px).
     Every page routes through these tokens — do not set a raw font-size on
     an eyebrow, heading, label, or body block again. Values are mobile-first;
     the 768 tier lifts the heading registers. */
  --fs-eyebrow: 12px;   /* .eyebrow + hero eyebrows (accent serif, uppercase) */
  --fs-label: 10px;     /* band labels: .about-section-label + strip placeholder [N] */
  --fs-body: 16px;      /* body copy site-wide (About ran 12px — the D1 defect) */
  --fs-subhead: 23px;   /* h3 register */
  --fs-section: 27px;   /* h2 register */
  --fs-lead: 30px;      /* .sb-display lead headings */
  --fs-display: 34px;   /* h1 page titles */
  --fs-hero: 34px;      /* hero-band h1 (Home + About share it) */
}
@media (min-width: 768px) {
  :root {
    --content-max: 960px; --gutter: 36px; --section-pad: 80px;
    --fs-section: 32px; --fs-lead: 36px; --fs-display: 44px; --fs-hero: 48px;
  }
}
@media (min-width: 1200px) {
  :root { --content-max: 1200px; --gutter: 48px; --fs-hero: 60px; --band-h: clamp(560px, 46vw, 760px); }
}

* { box-sizing: border-box; border-radius: 0; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--ground);
  line-height: 1.65;
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--brand-red); }

.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; margin: 0 0 16px; }
h1 { font-size: var(--fs-display); line-height: 1.15; }
h2 { font-size: var(--fs-section); line-height: 1.2; }
h3 { font-size: var(--fs-subhead); font-weight: 500; }

.eyebrow {
  font-family: var(--accent);
  font-size: var(--fs-eyebrow); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}

section { padding: var(--section-pad) 0; }
section + section { border-top: 1px solid var(--hairline); }

/* W4.5 (D1): the 68ch cap on .sb-block body copy made Sell/Buy read visibly
   narrower than About/Contact, whose content fills the column. Sell/Buy body
   copy now spans --content-max like every other page. The privacy policy kept
   the cap until now, but it applied to .policy p only — its ul/li were never
   capped, so paragraphs rendered at 631px against full-column bullets. Cap
   dropped: the policy column is uniform and matches the rest of the site.
   Centred CTA paragraphs keep their own 620px cap (matching About's
   .cta-strip — that cap IS the About reference). */

/* ---------- buttons (only sanctioned animation) ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  padding: 14px 28px;
  background: var(--brand-red); color: #FFFFFF;
  border: 1px solid var(--brand-red);
  transition: opacity 150ms ease;
}
.btn:hover { opacity: 0.85; }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn + .btn { margin-left: 12px; }
@media (max-width: 479px) {
  .btn { display: block; text-align: center; }
  .btn + .btn { margin-left: 0; margin-top: 12px; }
}

/* ---------- sticky top nav (site-wide) ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--ground);
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
}
.nav-identity { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.nav-idtext { display: flex; flex-direction: column; }
.nav-headshot { width: 44px; height: 44px; border-radius: 50%; /* the one sanctioned circle (photographic exception, matches portals) */ }
.nav-name { font-family: var(--display); font-size: 19px; line-height: 1.1; }
.nav-cred { font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.06em; color: var(--muted); }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a {
  font-family: var(--sans); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav-links a[aria-current="page"] { border-bottom-color: var(--brand-red); }

.nav-burger {
  display: none; background: none; border: 1px solid var(--ink);
  padding: 9px 12px; cursor: pointer; font-family: var(--sans);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
}
@media (max-width: 767px) {
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ground); border-bottom: 1px solid var(--hairline);
    flex-direction: column; gap: 0; padding: 8px 0;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 24px; width: 100%; border-bottom: none; }
  .nav-links a[aria-current="page"] { color: var(--brand-red); }
  .nav-burger { display: block; }
}
/* Nav is now in-flow (sticky), so no fixed-nav offset is needed. */
main { padding-top: 0; }

/* ---------- B1: compact sticky header (mobile + tablet) ----------
   At the top of the page the full identity block is shown. Once the user
   scrolls, site.js sets .is-compact and the nav drops to headshot + name +
   MENU, cutting its height roughly in half so it stops eating the viewport
   on every page. The title/brokerage line still exists on every page in the
   footer, so the credential is never absent — only the sticky bar shrinks.

   No transition is declared: the locked design rule allows exactly one
   animation site-wide (button hover opacity), so this snaps.

   Applied up to 1023px, not just mobile: the credential line also wraps to
   multiple lines at tablet widths (81px nav at 768px), which is the same
   defect B1 describes. From 1024px up the identity already fits on one line
   and the nav stays at its full height. */
@media (max-width: 767px) {
  .site-nav { padding: 10px 20px; }
}
@media (max-width: 1023px) {
  .site-nav.is-compact { padding: 6px var(--gutter); }
  .site-nav.is-compact .nav-cred { display: none; }
  .site-nav.is-compact .nav-headshot { width: 34px; height: 34px; }
  .site-nav.is-compact .nav-name { font-size: 17px; }
  .site-nav.is-compact .nav-burger { padding: 7px 10px; }
}

.hero-ctas { margin-top: 28px; }
/* ---------- process steps ----------
   W4.11 (Option C): step numbers, the CSS counter, and the per-item
   border-bottom dividers are all removed. Each title is now the display serif
   in brand red with a 1px hairline that runs from the end of the title to the
   right edge of the content column on the same line (the strong is a flex row;
   its ::after is the flexible rule). The description sits on its own line
   beneath, flush left. Items are separated by 2rem of vertical space. */
.steps { margin: 24px 0 0; padding: 0; list-style: none; }
.steps li { font-size: var(--fs-body); }
.steps li + li { margin-top: 2rem; }
.steps li strong {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--display); font-size: 20px; font-weight: 400;
  color: var(--brand-red);
}
.steps li strong::after {
  content: ""; flex: 1 1 auto; height: 1px; background: #e5e5e5;
}
.steps li .step-desc {
  display: block; margin-top: 8px;
  color: #555550; font-size: 15px; line-height: 1.65;
}

/* ---------- CTA strip ---------- */
.cta-strip { text-align: center; }
.cta-strip p { max-width: 620px; margin: 0 auto 24px; }

/* ---------- buy-page mortgage estimator (W2): collapsed simplified version.
   The full calculator (schedule, donut, comparison, details) renders only in
   the Buyer Portal now. The website mounts the simplified estimator inside a
   native <details>, so expand/collapse needs no JS and — per the locked
   one-animation rule — snaps rather than animates. Shared mortgage-calc.css
   stays untouched; its mc-* input/result classes are reused inside. */
.mc-collapse { border: 1px solid var(--input-line); }
.mc-collapse > summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; cursor: pointer;
}
.mc-collapse > summary::-webkit-details-marker { display: none; }
.mc-collapse > summary h2 { margin: 0; }
.mc-collapse__marker {
  flex: 0 0 auto; font-family: var(--display);
  font-size: 30px; line-height: 1; color: var(--brand-red);
}
.mc-collapse__marker::before { content: "+"; }
.mc-collapse[open] .mc-collapse__marker::before { content: "\2212"; }
.mc-collapse__body { padding: 0 24px 28px; }
@media (max-width: 767px) {
  .mc-collapse > summary { padding: 16px 18px; }
  .mc-collapse__body { padding: 0 18px 24px; }
}
/* Portal hand-off line + CTA under the estimate. */
.mcs-portal { font-size: 14px; margin: 24px 0 0; max-width: 56ch; }
.mcs-cta { margin: 20px 0 0; }

/* ---------- forms ---------- */
.form-field { display: block; margin-bottom: 18px; }
.form-label {
  display: block; font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%; padding: 12px 14px; font-size: 15px;
  font-family: var(--sans); color: var(--ink);
  background: var(--ground); border: 1px solid var(--input-line);
  appearance: none; -webkit-appearance: none;
}
input:focus, textarea:focus { outline: 2px solid var(--brand-red); outline-offset: -1px; }
textarea { min-height: 140px; resize: vertical; }
.form-status { margin-top: 16px; font-size: 14px; }
.form-status.err { color: var(--brand-red); }
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; } /* honeypot */

/* ---------- footer — two rows, content aligned to the shared page column.
   Row 1: identity/hours/social.  Row 2: contact (left) + office map (right). */
/* B4 — the footer used to add margin-top:80px on top of the last section's own
   bottom padding, so every page ended on ~144px of dead white before the black
   block. The section padding is the spacing; the extra margin was doubling it. */
.site-footer {
  background: var(--footer-bg); color: var(--cream);
  padding: 64px 0 40px; margin-top: 0;
}
.site-footer a { color: var(--cream); }
/* Footer aligns to the same content column as .wrap at every tier. */
.footer-inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.footer-row { display: flex; flex-direction: row; gap: 40px; }
.footer-row--top { align-items: flex-start; }
.footer-row--bottom {
  margin-top: 40px; padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-info-col { flex: 1; min-width: 0; }
.footer-contact-col, .footer-map { flex: 1; min-width: 0; }
.footer-name { font-family: var(--display); font-size: 26px; margin-bottom: 4px; }
.footer-cred { font-family: var(--sans); font-size: 12px; letter-spacing: 0.06em; opacity: 0.8; margin-bottom: 20px; }
.footer-h { font-family: var(--accent); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; margin: 0 0 12px; }
.site-footer p, .site-footer address { font-style: normal; font-size: 14px; margin: 0 0 8px; line-height: 1.7; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a { display: inline-flex; line-height: 0; text-decoration: none; transition: opacity 150ms ease; }
.footer-social a:hover { opacity: 0.85; }
.footer-social svg { display: block; }
.footer-map iframe { width: 100%; height: 220px; border: 0; display: block; }
.footer-map-link { margin-top: 10px; font-size: 13px; }
@media (max-width: 767px) {
  .footer-row { flex-direction: column; gap: 32px; align-items: stretch; }
}
.footer-legal {
  max-width: var(--content-max); margin: 40px auto 0; padding: 20px var(--gutter) 0;
  border-top: 1px solid rgba(245, 240, 232, 0.2);
  font-size: 12px; opacity: 0.75;
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
}
.footer-legal a { text-decoration: none; }
.ext::after { content: " \2197"; font-size: 11px; } /* external-link marker */

/* ---------- privacy policy document ---------- */
.policy h2 { font-size: 24px; margin-top: 40px; }
.policy .updated { font-family: var(--accent); font-size: 13px; color: var(--muted); margin-bottom: 32px; }
.policy ul { padding-left: 22px; }
.policy li { margin-bottom: 8px; font-size: var(--fs-body); }
.policy p { font-size: var(--fs-body); }

/* ---------- tonal section system (F6-VIS: print-guide depth) ---------- */
:root {
  --teal: #364848;                     /* brand dark teal — print guide ground */
}

/* ============================================================
   SESSION A (July 14 2026) — home photo hero, service blocks,
   About circle + moved sections. Additive; earlier rules intact.
   ============================================================ */

/* ---------- full-bleed photo hero (home) ---------- */
/* hero-home.jpg: requires dark upper-left quadrant for text legibility */
.hero-photo {
  position: relative;
  height: var(--band-h); /* W4.12: was 70vh/480/640 — same formula, now via token */
  overflow: hidden;
  /* F11: was `display:flex; align-items:center`. The content block is now
     absolutely positioned off --hero-h1-top instead of being centred, so the
     h1 lands at a known offset rather than one derived from box height. */
  background: var(--teal); /* solid fallback ground if the photo fails to load —
                              a solid colour, NOT a banned gradient placeholder;
                              keeps the white headline legible. */
}
.hero-photo__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.hero-photo__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.62) 100%);
}
/* F11: absolutely positioned so the block's TOP edge — and therefore the h1's,
   since the h1 is the first in-flow child and has margin:0 — sits exactly at
   --hero-h1-top. `top` is measured from the band's padding box, whose top edge
   is the band top (no border), so the token reads as "distance from band top".
   left/right 0 + margin:0 auto keeps the content column centred exactly as the
   previous in-flow box did. Shared by Home and About: same anchor, one rule. */
.hero-photo__content {
  position: absolute; z-index: 2;
  top: var(--hero-h1-top); left: 0; right: 0;
  width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter);
}
/* F11: the eyebrow HANGS ABOVE the anchor rather than participating in flow
   above the h1 — otherwise its height (and its 2-line wrap at 390px) would
   push the h1 down and reintroduce content-dependence. bottom:100% pins its
   bottom edge to the content block's top edge; left/right match the gutter
   because an absolute child resolves against the padding box, not the
   content box. Home-only in practice — About has no eyebrow. */
.hero-eyebrow {
  position: absolute; bottom: 100%;
  left: var(--gutter); right: var(--gutter);
  font-family: var(--accent);
  font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55); margin: 0 0 14px;
}
.hero-photo__content h1 {
  color: #FFFFFF; margin: 0; font-size: var(--fs-hero); line-height: 1.12; max-width: 15em;
}
.hero-subline {
  font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.7);
  max-width: 44em; margin: 16px 0 0;
}
.hero-photo .hero-ctas { margin-top: 28px; }
/* White-outline ghost button reads over the dark hero overlay. */
.hero-photo .btn--ghost { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }

/* W2.5 (D2): one hero-band height per breakpoint, shared by Home and About.
   Below 1200px both pages already shared the base 70vh band; the desktop tier
   is shared too (About previously carried its own 49vw/820px band). Both tiers
   now live in the --band-h token (46vw tracks the viewport so the crop
   composition is identical at every desktop width; the 760px ceiling engages
   at ~1650px), so the Buy/Sell carousel can read the exact same height. */

/* Home hero art direction. hero-home.jpg (1168x784) is a doorway shot whose
   subject sits centre-right; the headline occupies the left. Panning the crop
   left of centre on mobile keeps the doorway out from behind the text while
   the portrait-shaped crop still lands on the building, not the hedge. */
@media (max-width: 767px) {
  .hero-photo:not(.hero-photo--about) .hero-photo__img { object-position: 62% center; }
}

/* F11 structural: the 37/47/66px per-tier offsets that used to live here are
   REMOVED, not layered on — superseded by the shared --hero-h1-top anchor
   above. They were calibrated at fixed tiers and drifted between them (at
   1301px they were 31px out, in the opposite direction to the 1440px
   calibration). Do not reintroduce a numeric nudge here; if the headlines
   ever misalign, the anchor or the content structure is the thing to fix. */

/* ---------- about hero band (same component as the home hero, but content
   is bottom-left, the overlay is lighter, and a bio paragraph replaces the
   sub-line + CTAs) ---------- */
/* F11: `align-items: flex-end` removed with the flex container — About now
   shares the --hero-h1-top anchor with Home instead of bottom-anchoring its
   box. The anchor value was derived FROM this bottom-anchored behaviour
   (350px above the band bottom), so About renders where it always did at
   >=1200px; see the token comment for the small mobile/tablet deltas.
   The per-tier vertical paddings (44/40/56px) are gone too — vertical
   position is the anchor's job now. Horizontal padding collapses to
   `0 var(--gutter)`, which reproduces the old horizontal values exactly at
   every tier (20px mobile / 36px 768-1199 / 48px >=1200) and is identical to
   Home's, so the two content columns now share one rule. */
.hero-photo--about .hero-photo__overlay {
  background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.55) 100%);
}
.hero-photo--about h1 {
  font-family: var(--display);
  font-weight: 300; line-height: 1.1; color: #FFFFFF; margin: 0;
}
/* W2.5-fix: the bio ran 13px/15px — sub-line scale, wrong register for a
   full paragraph of content. It now reads the body token at every tier. */
.about-hero__bio {
  font-size: var(--fs-body); line-height: 1.65; color: rgba(255, 255, 255, 0.82);
  max-width: 520px; margin: 16px 0 0;
}
/* B3 / W2.5 (D2) — About hero art direction.
   about-hero.jpg is now 1248x832 (3:2, replaced the old 2:1 crop in W2.5).
   Jennifer stands at ~56-77% across; her head top sits at ~20% of the image
   height (the top fifth is empty wall) and her shoes at ~97%.

   Mobile   — the band is far taller than 3:2, so cover crops HORIZONTALLY and
              shows the full image height. Panning to 72% keeps her framed on
              the right; the bio text runs beneath her over the scrim.
   Tablet   — the crop is close to the source ratio; centre frames her.
   Desktop  — the band is wider than 3:2, so cover crops VERTICALLY. A
              full-bleed 3:2 image displays at 66.7vw tall; the fixed
              -10.7vw Y offset pins the top of the crop window at ~16% of the
              image (just above her head), spending the dead wall — not her
              head — regardless of band height or the 760px ceiling. At the
              shared 46vw band the window covers 16%-85% of the image: head
              to mid-shin, with the former 20% of dead space gone. The full
              figure would need a ~53vw band (taller than W1's 49vw), so feet
              stay out of frame at desktop — the W2.5 residual that replaces
              B5. Head can no longer clip at any width. */
@media (max-width: 767px) {
  .hero-photo--about .hero-photo__img { object-position: 72% center; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .hero-photo--about .hero-photo__img { object-position: center center; }
}
@media (min-width: 1200px) {
  .hero-photo--about .hero-photo__img { object-position: 50% -10.7vw; }
  .about-hero__bio { max-width: 620px; }
}

/* ---------- dark (black) button — home service CTAs ---------- */
.btn--dark { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }

/* ---------- home service blocks (Sell with strategy / Find the right home) ---------- */
/* W4.5 (D1): the 620px cap made the home content column visibly narrower than
   About/Contact; the blocks now fill --content-max like every other page. */
.home-service { max-width: none; }
/* W2.5 (D1): scoped to body paragraphs — the bare `p` selector out-ranked
   .eyebrow (0-1-1 vs 0-1-0) and silently inflated the home eyebrow to body
   size; the eyebrow now renders its designed token register like every page. */
.home-service p:not(.eyebrow) { margin: 12px 0 24px; font-size: var(--fs-body); }
.home-rule { border: 0; border-top: 1px solid rgba(26, 26, 26, 0.06); margin: 56px 0; }

/* ---------- about: section divider labels + compact approach grid ---------- */
/* W2.5-fix: the divider labels ("A Smart Approach...", "Specializations")
   ran the 10px band-label register in faint 0.28 ink — the last piece of the
   "About renders smaller" defect. They now read the same eyebrow register as
   the home "For Sellers" block (accent serif, --fs-eyebrow, --muted); only
   the hairline divider treatment is theirs. */
.about-section-label {
  font-family: var(--accent);
  font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--muted);
  border-top: 1px solid rgba(26, 26, 26, 0.07);
  padding-top: 14px; margin: 40px 0 22px;
}
/* B4 — the first label already sits below the section's own top padding; its
   40px top margin was stacking on top of that. */
.about-section-label:first-child { margin-top: 0; }
.about-approach { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 767px) { .about-approach { grid-template-columns: 1fr; } }
/* W2.5 (D1): the approach grid ran its own 18px/12px mini-scale — the "About
   renders smaller" defect. Both registers now come from the site tokens.
   W2.5-fix: the D1 pass left these on the h3/subhead register (23px), still
   one size below every other page's headings. They are the About content's
   PRIMARY headings, so they read the h2/section register (27/32) at the
   h2 weight — the target is a visual match with the home "For Sellers"
   scale, not the card-subhead scale. */
.about-approach h3 {
  font-family: var(--display); font-weight: 400;
  font-size: var(--fs-section);
  line-height: 1.2; margin: 0;
}
.about-approach h3::after {
  content: ""; display: block;
  width: 24px; height: 1.5px; background: var(--brand-red);
  margin: 8px 0;
}
.about-approach p { margin: 0; }

/* ============================================================
   SESSION B (July 14 2026) — Sell + Buy page rebuilds.
   Card cluster, 5-image strip, full-bleed green section,
   text/photo process split. Additive; earlier rules intact.

   Design-authority note: the F6 "no shadows" rule is intentionally
   overridden ONLY for the card cluster and the green-section panel,
   per the locked July 14 2026 visual-redesign brief.
   ============================================================ */

/* ---------- page wrapper: blocks own their spacing ---------- */
/* On the rebuilt Sell/Buy pages each block sets its own padding (component
   classes override the default `section { padding:80px 0 }` — class beats
   element). Suppress only the global auto-hairlines between sections. */
.sb section + section { border-top: none; }
/* W2.5 (D1): the .sb pages ran h2 at 26px — a page-local scale. Removed;
   section headings now come from the canonical --fs-section token. */
/* Large lead heading — Cormorant, light weight 300. */
.sb-display { font-size: var(--fs-lead); font-weight: 300; line-height: 1.15; }

/* Readable text block (eyebrow + heading + body + button). */
.sb-block { padding: 56px 0; }
.sb-block--flush-top { padding-top: 0; }   /* sits directly under a visual band */
.sb-cta { padding: 64px 0; text-align: center; }
.sb-cta p { max-width: 620px; margin: 0 auto 24px; }

/* ---------- W4.5 (D3): Portal access split — copy left, circle right ----------
   headshots-circle.png (W4.6) is a pre-cropped transparent circle: no CSS
   border-radius (the global border-radius:0 reset stands; the circle is
   photographic, same policy as .nav-headshot). Desktop + tablet (>=768):
   two columns, portrait vertically centred against the full copy block.
   Mobile: the circle stacks below the copy + button, centred inside the
   --content-max column via the .wrap it lives in, capped at 260px. The
   280px height matches the low end of the retired rectangle portrait's
   height window (brief-specified; smaller over larger). */
.sb-portal .wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px; align-items: center;
}
.sb-portal__portrait { height: 280px; width: auto; }
@media (max-width: 767px) {
  .sb-portal .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sb-portal__portrait {
    height: auto; width: 100%; max-width: 260px;
    justify-self: center; margin-top: 32px;
  }
}

/* Explicit hairline divider (brief "Divider" steps). */
.sb-divider {
  height: 0; border: 0; border-top: 1px solid var(--hairline);
  margin: 0 auto; max-width: var(--content-max);
}

/* ---------- 5-image vertical strip ---------- */
.photo-strip { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter) 56px; background: var(--ground); }
.photo-strip__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.photo-strip__cell { aspect-ratio: 3 / 4; overflow: hidden; background: var(--cream); }
.photo-strip__cell img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
@media (max-width: 767px) {
  /* First 3 across; remaining 2 wrap to a second row. No horizontal scroll. */
  .photo-strip { padding-bottom: 48px; }
  .photo-strip__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- W2.5 (D3a): full-bleed top strip band ----------
   The image strip moved from mid-page to the top of Sell/Buy as a hero-weight
   band. The grid runs edge-to-edge like the photo heroes; only the label keeps
   the content column. To extend the row across the full width WITHOUT
   enlarging the cells past their established ~190-270px window, the column
   count steps up per tier instead of stretching five cells — cells beyond the
   tier's count simply don't render, and one row is always exactly full.
   Images 6-7 per page are new in W2.5. Slots [7]-[9] are placeholder markup
   awaiting real photography (Buy: CREA — neighbourhood/streetscape only,
   never listings); W2.5-fix collapses them entirely — the columns are
   implicit (auto-flow), one per VISIBLE cell, so a hidden placeholder leaves
   no empty cream track behind and the row of real images always spans the
   full width. Swap a placeholder for a real <img> cell and its tier column
   comes back on its own. */
/* F10.5-F7 (parked-item close): top padding 20px -> 0. The strip's bottom
   edge sat 20px lower than the hero's despite bit-identical --band-h element
   heights — that offset was the perceived height delta. Strip now starts
   flush under the nav, exactly like the hero band. */
.photo-strip--hero { max-width: none; padding: 0 0 var(--section-pad); }
.photo-strip--hero .photo-strip__grid {
  display: flex; flex-wrap: nowrap; gap: 0;
  overflow-x: scroll; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.photo-strip--hero .photo-strip__grid::-webkit-scrollbar { display: none; }
/* All six real cells render as carousel slides at every breakpoint; each sizes
   to its image's natural ratio (see img rule below). Placeholders stay hidden
   via the higher-specificity rule that follows. */
.photo-strip--hero .photo-strip__cell {
  display: block; flex: 0 0 auto;
  scroll-snap-align: start;
  aspect-ratio: auto; overflow: visible; background: none;
}
/* Placeholder slots stay collapsed at every tier until real images land.
   Must out-rank the :nth-child display rules above (0,3,0) — hence the
   doubled class — and must stay below them in the file. */
.photo-strip--hero .photo-strip__cell.photo-strip__cell--ph { display: none; }
/* Placeholder slot: cream cell with its [N] slot number in the label register. */
.photo-strip__cell--ph span {
  display: flex; height: 100%; align-items: center; justify-content: center;
  font-family: var(--accent); font-size: var(--fs-label);
  letter-spacing: 0.15em; color: rgba(26, 26, 26, 0.3);
}

/* ---------- W4.8 (D2): carousel image sizing ----------
   Each image displays at its natural aspect ratio — width auto — so the number
   of visible frames is set by the images' own proportions, not a forced column
   count. No cover crop (box matches the image's ratio, so object-fit does
   nothing to distort). Buy and Sell are identical; the former
   .photo-strip--landscape modifier is retired.

   W4.12 (D2): mobile (<768px) keeps the confirmed-good W4.9 clamp
   — clamp(300px, 45vw, 640px), 300px on phones tracking 45vw through the
   phablet range. At ≥768px the strip reads the shared --band-h token, the very
   same value the Home/About hero band uses — so the two bands compute a
   bit-identical height at every viewport geometry (no per-tier numeric parity
   to drift). The W4.9–W4.11 per-breakpoint carousel heights are retired. */
.photo-strip--hero .photo-strip__cell img {
  width: auto; height: clamp(300px, 45vw, 640px);
  object-fit: fill; display: block;
}
@media (min-width: 768px) {
  .photo-strip--hero .photo-strip__cell img { height: var(--band-h); }
}

/* ---------- process section (former text/photo split) ----------
   W4.5 (D3): the inset portrait (and its 300/340px column + 58ch text
   measure) is retired — the portrait now lives in the Portal access section
   as the circle asset. The steps run the full content column, which also
   closes the D1 width gap this section had against About/Contact. The grid
   wrapper and the first-row alignment tweaks stay (harmless, and they keep
   the W4 head-to-steps spacing intact). */
.process-split { max-width: var(--content-max); margin: 0 auto; padding: 56px var(--gutter); }
.process-split__head { margin-bottom: 16px; }
.process-split__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.process-split__grid .steps { margin-top: 0; }
.process-split__grid .steps li:first-child { padding-top: 0; }
@media (max-width: 767px) {
  .process-split { padding: 48px var(--gutter); }
}

/* ---------- full-bleed green section (replaces teal band) ---------- */
.green-band { position: relative; overflow: hidden; min-height: 320px; padding: 0; display: flex; align-items: center; }
.green-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.green-band__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); }
/* Inner column keeps the panel's left edge aligned to the site content column. */
.green-band__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter);
}
.green-band__panel {
  background: rgba(255, 255, 255, 0.90);
  padding: 40px 44px; max-width: 420px; margin: 56px 0;
}
.green-band__panel h2 { margin-top: 0; }
/* Fallback: green-section.jpg missing -> white ground, no scrim, teal left border. */
.green-band--fallback { min-height: 0; background: var(--ground); }
.green-band--fallback .green-band__img,
.green-band--fallback .green-band__scrim { display: none; }
.green-band--fallback .green-band__panel {
  background: transparent; margin: 0; padding: 40px 0 40px 20px;
  border-left: 3px solid var(--teal); max-width: 560px;
}
@media (max-width: 767px) {
  .green-band__panel { margin: 32px 0; padding: 32px 24px; max-width: none; }
  .green-band--fallback .green-band__panel { margin: 0; }
}
@media (min-width: 1200px) {
  .green-band { min-height: 420px; }
  .green-band__panel { max-width: 480px; padding: 48px 52px; }
}