/* ======================================================================================================================
   mattmarcus.co — one stylesheet for every page
   @map
     tokens        colors, type, spacing — change a look here, never in a component
     fonts         Compass brand @font-face (WOFF2 in /assets/fonts)
     base          reset, page ground, type scale, focus, reduced motion, containers, grids
     opening       the branded page opening (black layer + M mark)
     header        sticky header, nav, mobile menu
     buttons       .btn variants, .oneliner section-ending links, .eyebrow labels
     hero          home hero + inner-page heroes + dark (no-photo) hero
     section       section rhythm, section heads, columns/steps, bands, FAQ
     cards         pathway cards, listing (closed-sale) cards, pager, area tiles, article cards
     reel          the Buy a Home / List Your Property card reels (four timed steps inside the card photo)
     marquee       "Featured in" moving logo band
     widgets       Elfsight slots, sales map, calculator note, the Calendly scheduler card + the floating "Schedule time
                   with me" pill (.book-pill — dark over light sections, cream over dark ones)
     forms         inputs, notes, the not-connected notice
     footer        shared footer
     legal         long-form policy pages (privacy, dmca, accessibility)
     v2            Oct 9, 2026 — the guide pages: source lines, tables, the closings lists, breadcrumb trail, YouTube facade, quiz
     guides        Oct 9, 2026 (evening) — the Field Guide framework: answer box, updated line, match + commute tables, the eight zones, author box
     reveal        reveal-on-scroll states (motion-reveal-on-scroll.md)
     responsive    the few breakpoints (1320 header phone / 1200 menu panel / 1023 / 699 / 420)
   ====================================================================================================================== */

/* @section:tokens */
:root {
  --ink: #141413;        /* text, buttons */
  --muted: #6b6560;      /* eyebrows, captions */
  --body: #3d3935;       /* paragraphs */
  --ivory: #f6f3ee;      /* page ground */
  --ivory-2: #f5f2ed;    /* alternate section ground */
  --hair: #e3ddd3;       /* hairlines, card borders */
  --white: #ffffff;
  --black: #000000;      /* brand / bands (Compass black) */
  --opening-scrim: rgba(0, 0, 0, 0.85);  /* page-load opening, top curtain: 85 % black (Matt, Oct 7, 2026; was solid --black) */
  --opening-under: var(--ivory-2);       /* page-load opening, bottom curtain: solid taupe beneath the black (Matt, Oct 7 evening) */
  --opening-stagger: 180ms;              /* how far the taupe curtain trails the black one when they lift; 0ms = lift together */
  --dark: #0b0f0e;       /* photo-hero and footer ground */
  --star: #f2b705;

  --serif: 'Compass Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Compass Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'GT Pressura Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --display: 'Compass Display', Georgia, serif;

  --container: 1240px;
  --gutter: clamp(20px, 6.9vw, 100px);         /* 100px at 1440, 20px on a phone */
  --section-pad: clamp(64px, 7.5vw, 108px);    /* ~96-120px at 1440 */
  --header-h: 96px;

  --h1: clamp(40px, 5vw, 72px);
  --h2: clamp(34px, 4vw, 58px);
  --h3: clamp(22px, 1.8vw, 26px);
  --lead: clamp(16px, 1.2vw, 17px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-wipe: cubic-bezier(0.76, 0, 0.24, 1);
}
/* @end:tokens */

/* @section:fonts */
@font-face{font-family:'Compass Serif';src:url(/assets/fonts/CompassSerif-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Compass Serif';src:url(/assets/fonts/CompassSerif-SemiBold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Compass Serif';src:url(/assets/fonts/CompassSerif-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Compass Display';src:url(/assets/fonts/CompassDisplay-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Compass Display';src:url(/assets/fonts/CompassDisplay-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Compass Sans';src:url(/assets/fonts/CompassSans-Light.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Compass Sans';src:url(/assets/fonts/CompassSans-LightItalic.woff2) format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Compass Sans';src:url(/assets/fonts/CompassSans-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Compass Sans';src:url(/assets/fonts/CompassSans-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Compass Sans';src:url(/assets/fonts/CompassSans-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Compass Sans';src:url(/assets/fonts/CompassSans-MediumItalic.woff2) format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Compass Sans';src:url(/assets/fonts/CompassSans-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Compass Sans';src:url(/assets/fonts/CompassSans-BoldItalic.woff2) format('woff2');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'GT Pressura Mono';src:url(/assets/fonts/GT-Pressura-Mono-Light.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'GT Pressura Mono';src:url(/assets/fonts/GT-Pressura-Mono-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'GT Pressura Mono';src:url(/assets/fonts/GT-Pressura-Mono-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
/* @end:fonts */

/* @section:base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ivory); color: var(--ink);
  font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; color: var(--ink); line-height: 1.08; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.15; }
p { margin: 0; }
p + p { margin-top: 1em; }
a { color: inherit; text-decoration: none; }
img, picture, svg { display: block; max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.theme-dark :focus-visible, .site-footer :focus-visible, .hero :focus-visible, .band :focus-visible { outline-color: var(--white); }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 10px 14px; background: var(--white); color: var(--ink); }
.skip-link:focus { left: 8px; }
.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.lead { font-size: var(--lead); line-height: 1.7; color: var(--body); }
.measure { max-width: 760px; }
.grid { display: grid; gap: 40px 32px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.center { text-align: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* @end:base */

/* @section:opening */
/* Two curtains (Matt, Oct 7, 2026 evening). Timeline: the taupe under-curtain covers the page from first paint; the 85 %
   black top curtain (with the M mark) fades in over it (300 ms) and holds; at 1400 ms the black wipes up (700 ms) showing
   the taupe, which wipes up --opening-stagger later. Early dismissal (site.js) slides the whole container up instead. */
.opening { position: fixed; inset: 0; z-index: 60; }
.opening__under, .opening__top { position: absolute; inset: 0; will-change: transform; }
.opening__under { background: var(--opening-under); animation: opening-out-under 700ms var(--ease-wipe) calc(1400ms + var(--opening-stagger)) forwards; }
.opening__top {
  background: var(--opening-scrim);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; animation: opening-in 300ms ease-in-out forwards, opening-out 700ms var(--ease-wipe) 1400ms forwards;
  will-change: transform, opacity;
}
.opening__mark { width: clamp(104px, 11.7vw, 168px); height: auto; }
.opening.is-dismissed { transform: translateY(-100%); visibility: hidden; transition: transform 500ms var(--ease-wipe), visibility 0s 500ms; }
@keyframes opening-in { to { opacity: 1; } }
@keyframes opening-out { from { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(-100%); visibility: hidden; } }
@keyframes opening-out-under { from { transform: translateY(0); } to { transform: translateY(-100%); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .opening { display: none; } }
/* @end:opening */

/* @section:header */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--header-h);
  color: var(--white); transition: background-color 300ms ease, box-shadow 300ms ease;
}
.site-header__inner { height: 100%; padding: 0 clamp(20px, 4.4vw, 64px); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header.is-scrolled, .site-header.is-sub-open { background: rgba(0, 0, 0, 0.92); backdrop-filter: saturate(140%) blur(6px); -webkit-backdrop-filter: saturate(140%) blur(6px); }   /* is-sub-open: a drop-down is showing (site.js) */
.site-header--light { color: var(--ink); }
.site-header--light.is-scrolled, .site-header--light.is-sub-open { background: rgba(246, 243, 238, 0.94); color: var(--ink); }
.site-header :focus-visible { outline-color: currentColor; }   /* the ring follows the header's text: white over photos, ink on the light pages */
.site-header .site-nav__group:focus-visible { outline-color: var(--white); }   /* the open tab's own text is ink on cream; its ring sits outside it, on the bar */
.site-header--light .site-nav__group:focus-visible { outline-color: var(--ink); }
/* The brand lockup, every width (Matt's pick "2b", Oct 8, 2026 — chosen for phones in the morning, extended to desktop at
   12:20 PM: "we haven't updated the navigation logo setup"): the M mark spanning two lines; his name leads; the Compass
   wordmark under it as a small, lighter, left-aligned sub-line — about half the name's height, so it reads as secondary
   (the Chad Wohlers header was the reference). Compass lives in the lockup now, so the separate wordmark that sat on the
   right beside the phone number is gone (docs/launch-checks/2026-10-08-desktop-header.md). The white/black swap of the
   sub-line mirrors the M mark's: white on the dark header, black on the light pages. */
.brand { display: inline-flex; align-items: center; gap: 14px; font-size: 14px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: inherit; white-space: nowrap; }
.brand__mark { width: 36px; height: 36px; }
.brand__mark--black { display: none; }
.site-header--light .brand__mark--black { display: block; }
.site-header--light .brand__mark--white { display: none; }
.brand__stack { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; line-height: 1; }
.brand__compass { display: block; line-height: 0; }
.brand__compass-img { height: 7px; width: auto; opacity: 0.78; }   /* 7 px under the 14 px name; 6.5 px under the 13.5 px name on phones (699 px block) */
.brand__compass-img--black { display: none; }
.site-header--light .brand__compass-img--black { display: block; }
.site-header--light .brand__compass-img--white { display: none; }
.site-nav__list { display: flex; align-items: center; gap: 28px; }
.site-nav__list a, .site-nav__group { font-size: 12px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; opacity: 0.86; transition: opacity 200ms; }
.site-nav__list a:hover, .site-nav__list a[aria-current="page"] { opacity: 1; }
.site-nav__contact, .site-nav__meta { display: none; }
/* Drop-down group (Properties ▾ — Matt, Oct 8, 2026). The button is the trigger AND the tab: while the panel shows, it takes
   the panel's colour and the panel hangs straight off the tab's bottom edge — one shape, so the panel plainly belongs to
   the item (Matt, 9:01 AM: the first cut looked like it floated without context). The panel starts at the tab, not at
   the header's bottom edge: that left ~47 px of empty cream under the word (Matt, 9:17 AM: "properties is in outer
   space compared to the rest of the drop-down"), so it overlaps the bar's lower 24 px instead.
   Tone: the opposite of the header — a cream tab + panel on the dark header, ink ones on the light pages — and the
   header takes its scrolled fill while the panel shows (site.js adds is-sub-open), so the tab sits in a bar.
   A pointer opens it (hover: hover devices only — a tap would otherwise fight the click toggle), a click or Enter/Space
   toggles it, Escape / a click elsewhere / tabbing out closes it (site.js → header). Its links are real <a>s in the HTML
   whether open or not, so crawlers see them. */
.site-header { --sub-bg: var(--ivory); --sub-fg: var(--ink); }
.site-header--light { --sub-bg: var(--ink); --sub-fg: var(--white); }
.site-nav__item--group { position: relative; }
.site-nav__group { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 12px 16px; margin: -12px -16px; border: 0; background: transparent; color: inherit;
  font-family: inherit; line-height: inherit; cursor: pointer; transition: background-color 180ms ease, color 180ms ease, opacity 200ms; }
.site-nav__group:hover, .site-nav__item--group.is-current .site-nav__group { opacity: 1; }
.site-nav__item--group.is-open .site-nav__group { background: var(--sub-bg); color: var(--sub-fg); opacity: 1; }
.site-nav__chev { display: inline-block; width: 6px; height: 6px; margin-top: -3px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform 200ms; }
.site-nav__item--group.is-open .site-nav__chev { transform: translateY(2px) rotate(225deg); }
.site-nav__sub { position: absolute; top: 100%; left: -16px; padding-top: 12px; opacity: 0; visibility: hidden;   /* 12px = the tab's bottom padding: the panel starts where the tab ends */
  transition: opacity 160ms ease, visibility 0s 160ms; }
.site-nav__item--group.is-open .site-nav__sub { opacity: 1; visibility: visible; transition: opacity 160ms ease; }
@media (hover: hover) {
  .site-nav__item--group:hover .site-nav__group { background: var(--sub-bg); color: var(--sub-fg); opacity: 1; }
  .site-nav__item--group:hover .site-nav__sub { opacity: 1; visibility: visible; transition: opacity 160ms ease; }
}
.site-nav__sublist { display: flex; flex-direction: column; gap: 16px; min-width: 232px; padding: 20px 28px 24px 16px; background: var(--sub-bg); color: var(--sub-fg);
  box-shadow: 0 22px 40px -14px rgba(0, 0, 0, 0.45); }   /* the shadow lifts the cream panel off an ivory section when the page is scrolled */
.site-nav__sublist a { white-space: nowrap; }
/* A group with a landing page (Field Guide, Oct 9, 2026): the landing link is for the phone panel only; on desktop the
   drop-down lists the landing page first ("Field Guide: start here"), set off from the chapters by a rule. */
.site-nav__group-link { display: none; }
.site-nav__sub-landing { padding-bottom: 14px; border-bottom: 1px solid rgba(20, 20, 19, 0.18); border-bottom-color: color-mix(in srgb, var(--sub-fg) 22%, transparent); }
.site-header__right { display: flex; align-items: center; gap: 26px; }
.site-header__phone { font-size: 12px; letter-spacing: 0.12em; opacity: 0.86; white-space: nowrap; }
/* color: inherit matters — a <button> does not take the header's text colour on its own (browsers give buttons their own
   default, black), so without it the three bars were black on the dark header over every photo (Matt, Oct 7, 2026). */
.menu-toggle { display: none; flex-shrink: 0; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: transparent; color: inherit; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
/* flex-shrink: 0 — the X is the way out of the menu; whatever else crowds the header, it keeps its 44 px and stays on screen. */
.menu-toggle__bar { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform 300ms, opacity 300ms; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
body.nav-open { overflow: hidden; }
.site-header--simple .site-nav, .site-header--simple .menu-toggle { display: none; }   /* campaign pages: brand + one button */
/* @end:header */

/* @section:buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 220px; height: 56px; padding: 0 32px;
  border: 1px solid rgba(255, 255, 255, 0.9); background: transparent; color: var(--white);
  font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; text-align: center;
  transition: background-color 200ms, color 200ms, border-color 200ms;
}
.btn:hover { background: var(--white); color: var(--dark); }
.btn--fill { background: var(--white); color: var(--dark); border-color: var(--white); }
.btn--fill:hover { background: transparent; color: var(--white); }
.btn--dark { border-color: var(--ink); color: var(--ink); }
.btn--dark:hover { background: var(--ink); color: var(--white); }
.btn--dark.btn--fill { background: var(--ink); color: var(--white); }
.btn--dark.btn--fill:hover { background: transparent; color: var(--ink); }
.btn--small { min-width: 0; height: 44px; padding: 0 26px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; border-color: rgba(255, 255, 255, 0.8); }
.site-header--light .btn--small { border-color: var(--ink); color: var(--ink); }
.site-header--light .btn--small:hover { background: var(--ink); color: var(--white); }
.btn--hero { min-width: 250px; height: 58px; padding: 0 36px; font-size: 13px; }
.actions { display: flex; flex-wrap: wrap; gap: 20px; }
.oneliner { display: inline-block; padding: 8px 0; margin: -8px 0; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid transparent; transition: border-color 200ms; }
/* .oneliner padding/negative margin: a 35px tap area on a 19px link, no layout change (phone audit, Oct 6, 2026) */
.oneliner:hover { border-bottom-color: currentColor; }
.oneliner--light { color: rgba(255, 255, 255, 0.85); }
.eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
.eyebrow--light { color: rgba(255, 255, 255, 0.75); }
.tracked { font-size: 12px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
/* @end:buttons */

/* @section:hero */
.hero { position: relative; overflow: hidden; background: var(--dark); color: var(--white); }
.hero__media { position: absolute; inset: 0; }
.hero__media picture { height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, center); }
/* The home hero video (Oct 7, 2026): sits over the still, invisible until site.js hears it play, then fades up in 1 s.
   object-fit: cover lets each file fill the box whatever the screen shape (the phone cut is 9:16, the others 16:9). */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity 1000ms ease; pointer-events: none; }
.hero__video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
/* The fallback still (Broadway at night): built by site.js only when the video will not play, on top of the poster and the
   video, faded in once its file has arrived. Same cover-fit as the poster. */
.hero__fallback { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease; pointer-events: none; }
.hero__fallback img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__fallback.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__fallback { transition: none; } }
/* The dark overlay. Until Oct 7, 2026 (late) it was one top-to-bottom gradient, 62% at the edges and 32% in the middle — fine
   over the dusk still, too thin over the video's white interiors (measured: white text fell to 2.65:1 on the porch shot;
   3:1 is the floor for big type, 4.5:1 the bar for the tagline and button labels). Now two layers: the gradient, a little
   stronger in the middle (45%), plus a soft dark "pool" centred on the text block, so the picture's edges stay bright and
   the words always sit on ~70% dark. Measured after: every frame ≥ 4.5:1 on the zone average, ≥ 3:1 on its brightest
   patches, before the text shadow and button fill below add their own margin. Proof: docs/launch-checks/2026-10-07-hero-video.md §8.
   body.hero-scrim-before (sandbox review only, ?scrim=before) puts the old overlay back for a side-by-side. */
.hero__scrim { position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 62% 42% at var(--pool-x, 50%) var(--pool-y, 52%), rgba(5, 10, 9, 0.55) 0%, rgba(5, 10, 9, 0.40) 40%, rgba(5, 10, 9, 0) 100%),
    linear-gradient(180deg, rgba(5, 10, 9, 0.62) 0%, rgba(5, 10, 9, 0.45) 48%, rgba(5, 10, 9, 0.64) 100%); }
body.hero-scrim-before .hero__scrim { background: linear-gradient(180deg, rgba(5, 10, 9, 0.62) 0%, rgba(5, 10, 9, 0.32) 48%, rgba(5, 10, 9, 0.62) 100%); }
/* Letters get a soft shadow so a blown-out white wall right behind one word still reads (the overlay math is an average
   over the text block; the shadow handles the local patch). Buttons get a translucent dark fill with a blur behind it
   (Matt, Oct 7: "add a background to the buttons with transparency") — the outline look stays, the label never loses its ground. */
.hero--home h1, .hero--home .hero__sub { text-shadow: 0 2px 22px rgba(5, 10, 9, 0.6), 0 1px 3px rgba(5, 10, 9, 0.35); }
.hero--home .btn--hero { background: rgba(5, 10, 9, 0.38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero--home .btn--hero:hover { background: var(--white); }
body.hero-scrim-before .hero--home h1, body.hero-scrim-before .hero--home .hero__sub { text-shadow: none; }
body.hero-scrim-before .hero--home .btn--hero { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero-review-note { position: fixed; left: 12px; bottom: 12px; z-index: 60; padding: 8px 12px; background: #c8102e; color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; }   /* sandbox review only (?t=) */
.hero--home { height: 100svh; min-height: 560px; max-height: 1000px; }
.hero--home .hero__content {
  position: relative; height: 100%; padding: calc(var(--header-h) + 14px) var(--gutter) 90px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 30px;
}
.hero--home h1 { font-family: var(--sans); font-weight: 400; font-size: clamp(34px, 5vw, 72px); line-height: 1.08; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); max-width: 1240px; }
.hero__sub { font-size: clamp(11px, 1.05vw, 15px); font-weight: 300; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); }
.hero--home .actions { justify-content: center; gap: clamp(12px, 2.8vw, 40px); margin-top: 26px; }
.hero__scroll { position: absolute; left: 0; right: 0; bottom: 34px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.72); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; pointer-events: none; }
.hero__scroll::after { content: ""; width: 1px; height: 40px; background: rgba(255, 255, 255, 0.55); }
.hero--page { min-height: clamp(460px, 42vw, 600px); display: flex; align-items: flex-end; }
.hero--page .hero__content { position: relative; padding: calc(var(--header-h) + 40px) 0 64px; display: flex; flex-direction: column; gap: 20px; }
.hero--page h1 { max-width: 1000px; font-size: var(--h1); line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; color: var(--white); }
.hero__line { max-width: 760px; font-size: var(--lead); line-height: 1.6; color: rgba(255, 255, 255, 0.9); }
.hero--page .actions { margin-top: 8px; }
.hero--thanks { min-height: clamp(520px, 52vw, 720px); }   /* /thank-you (Oct 8, 2026): a taller page hero so the farmhouse reads as the picture it is, not a strip */
.hero--dark { background: var(--ink); min-height: clamp(460px, 44vw, 640px); }
/* A solid band only as tall as its words (About, Oct 8, 2026 — Matt: "a smaller section 1 and solid color"): no photo, no
   scrim, no minimum height; the eyebrow, title, line and buttons on ink, then the page starts. */
.hero--compact { min-height: 0; }
.hero--compact .hero__content { padding: calc(var(--header-h) + 36px) 0 56px; gap: 16px; }
/* The Coming Soon hero. In the photo the three people fill x 32-75% and the lower half (heads from 54% down). Oct 8, 2026:
   on desktop the band was a 2:1 window anchored at the photo's TOP, the words top-left in the tree canopy and the three of them
   cut at the waist along the bottom edge. Oct 9 (Matt, with a screenshot: "This photo needs to sit a bit higher — centered on
   the people not 3 ft above us"): the photo is now anchored at its BOTTOM, so the frame is on the people — and that leaves no
   canopy for the words, so the words sit on a solid ink band ABOVE the photo at every width (the layout the page already used
   under 1280 px). The photo block is 21:9 on desktop and tablets: the top 36% of the picture is cropped away, the heads land
   about 28% down the frame and the big branch still arches over them. On phones a 21:9 strip would make the faces ~20 px
   tall, so the block is square and shows its OWN cut of the picture (hero-sidewalk-walk-phone.jpg, served by the page's
   <picture> under 700 px — Oct 9, 12:10 PM, Matt: the first phone version "doesn't seem to match the desktop"): the same
   window as desktop, the bottom 64% of the picture centred on the three of them, heads about 28% down. Measured in
   tools/smoke.py (coming-soon framing). */
.hero--soon { min-height: 0; display: flex; flex-direction: column; background: var(--ink); }
.hero--soon .hero__media { position: relative; inset: auto; order: 2; width: 100%; aspect-ratio: 21 / 9; overflow: hidden; }
.hero--soon .hero__content { order: 1; padding: calc(var(--header-h) + 36px) 0 52px; }
.hero--soon .hero__col { max-width: 640px; display: flex; flex-direction: column; gap: 20px; }
.hero--soon h1 { font-size: clamp(36px, 4vw, 60px); max-width: 9.5em; }   /* 9.5em: always "This page is" / "Coming soon", never a one-word last line */
.hero--soon .hero__line { max-width: 560px; }
.hero--soon .actions { margin-top: 8px; }
.hero__after { margin-top: 6px; }
.light-top { height: var(--header-h); background: var(--ivory); }
/* @end:hero */

/* @section:section */
.section { padding: var(--section-pad) 0; background: var(--ivory); }
.section--white { background: var(--white); }
.section--ivory2 { background: var(--ivory-2); }
.section--tight { padding-top: calc(var(--section-pad) * 0.6); }
.section .container > * + * { margin-top: 40px; }
.section-head { display: flex; flex-direction: column; gap: 14px; }
.section-head--center { align-items: center; text-align: center; }
.section-head .lead { max-width: 760px; }
.section-head + .section-head { margin-top: 56px; }
.columns .column { display: flex; flex-direction: column; gap: 12px; }
.column__title { font-size: var(--h3); }
.column p { font-size: 15px; line-height: 1.6; color: var(--body); }
.column__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.steps .step, .labeled .cell { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1px solid var(--ink); }
.step__num, .cell__label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.cell__label { font-size: 11px; letter-spacing: 0.22em; }
.step__title, .cell__title { font-family: var(--serif); font-size: var(--h3); line-height: 1.15; }
.step p, .cell p { font-size: 15px; line-height: 1.6; color: var(--body); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.stat { display: flex; flex-direction: column; gap: 8px; padding-top: 22px; border-top: 1px solid var(--ink); }
.stat__num { font-family: var(--serif); font-size: clamp(44px, 5vw, 72px); line-height: 1; }
.stat__cap { font-size: 15px; font-weight: 400; line-height: 1.4; }
.fine { font-size: 11px; font-weight: 300; line-height: 1.55; color: var(--muted); }
.quote { padding-left: 22px; border-left: 1px solid var(--ink); font-family: var(--display); font-style: italic; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.35; color: var(--ink); }
.band { padding: clamp(72px, 8vw, 110px) 0; background: var(--black); color: var(--white); text-align: center; }
.band .container { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 1040px; }
.band h2 { color: var(--white); font-size: clamp(36px, 4.4vw, 64px); line-height: 1.05; }
.band p { max-width: 700px; font-size: var(--lead); line-height: 1.65; color: rgba(255, 255, 255, 0.86); }
.band .btn { margin-top: 10px; }
.band .oneliner { color: rgba(255, 255, 255, 0.8); font-weight: 400; }
.faq .faq__item { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 40px; padding: 26px 0; border-top: 1px solid var(--hair); }
.faq__q { font-family: var(--serif); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; }
.faq__a { font-size: 15px; line-height: 1.65; color: var(--body); }
.faq { border-bottom: 1px solid var(--hair); }
.split { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: clamp(32px, 6.6vw, 96px); align-items: start; }
.split--portrait { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); align-items: start; }
.split--meet { grid-template-columns: minmax(0, 520px) minmax(0, 560px); justify-content: space-between; align-items: center; }
.portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }
.copy { display: flex; flex-direction: column; gap: 22px; }
.copy .oneliner { align-self: flex-start; margin-top: 4px; }
.author { display: flex; gap: 32px; align-items: center; padding: 32px; border: 1px solid var(--hair); background: var(--white); }
.author img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: center 20%; flex-shrink: 0; }
.author__name { font-family: var(--serif); font-size: 24px; }
.author p { font-size: 15px; line-height: 1.6; color: var(--body); margin: 8px 0; }
.article-body { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 22px; }
.article-body h2 { font-size: clamp(26px, 2.2vw, 30px); margin-top: 12px; }
.article-title { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; max-width: 900px; margin-inline: auto; }
.article-cover img { width: 100%; aspect-ratio: 1240 / 520; object-fit: cover; object-position: center 60%; }
.feature { display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 1fr); gap: 48px; align-items: center; color: var(--ink); }
.feature img { width: 100%; aspect-ratio: 720 / 440; object-fit: cover; }
.feature__title { font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); line-height: 1.12; }
.feature__text { display: flex; flex-direction: column; gap: 16px; }
.feature__excerpt { font-size: 16px; line-height: 1.65; color: var(--body); }
.guide-box { display: flex; gap: 48px; align-items: center; padding: 40px; border: 1px solid var(--hair); background: var(--white); }
.guide-box__cover { width: 200px; height: 260px; flex-shrink: 0; background: var(--ink); color: var(--white); display: flex; align-items: flex-end; padding: 20px; font-family: var(--serif); font-size: 22px; line-height: 1.2; }
.guide-box__text { display: flex; flex-direction: column; gap: 14px; }
.guide-box__title { font-family: var(--serif); font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; }
.proof { padding: 40px; border: 1px solid var(--hair); background: var(--white); display: flex; flex-direction: column; gap: 16px; }
.proof__quote { font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.3; }
.proof__who { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
/* Reviews as readable text under the Google Reviews widget (Oct 8, 2026): the rating line, then the quoted excerpts */
.reviews-summary { margin-top: 28px; font-size: 15px; line-height: 1.6; color: var(--body); }
.reviews-summary a { text-decoration: underline; text-underline-offset: 3px; }
.reviews-quotes { margin-top: 24px; margin-bottom: 36px; gap: 24px; }
.proof--review { margin: 0; padding: 28px; gap: 14px; }
.proof--review .proof__quote { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.45; font-style: normal; }
.proof--review .proof__who { font-size: 11px; letter-spacing: 0.14em; }
.proof--review .proof__who a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* Credentials block on About (Oct 8, 2026): licence class, designations, degree */
.creds { display: grid; grid-template-columns: 120px minmax(0, 1fr); row-gap: 10px; column-gap: 20px; margin: 4px 0 2px; padding-top: 22px; border-top: 1px solid var(--hair); font-size: 14px; line-height: 1.55; }
.creds > div { display: contents; }
.creds dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); padding-top: 4px; }
.creds dd { margin: 0; color: var(--body); }
.placeholder { color: var(--muted); }
/* @end:section */

/* @section:cards */
.card { display: flex; flex-direction: column; gap: 14px; color: var(--ink); }
.card__img { width: 100%; aspect-ratio: 392 / 260; object-fit: cover; transition: transform 500ms var(--ease-out); }
.card picture { overflow: hidden; }
.card:hover .card__img { transform: scale(1.03); }
.card__title { font-family: var(--serif); font-size: clamp(24px, 2.1vw, 30px); line-height: 1.1; }
.card__text { font-size: 15px; line-height: 1.55; color: var(--body); }
.card__link { margin-top: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }
.card__title--small { font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: 0.02em; }
.card__sub { margin-top: -6px; font-size: 13px; color: var(--muted); }
.card--listing { gap: 12px; }
.card__media { position: relative; overflow: hidden; }
.card--listing .card__img { aspect-ratio: 4 / 3; }
.card__badge { position: absolute; top: 14px; left: 14px; height: 26px; padding: 0 10px; display: inline-flex; align-items: center; background: var(--ink); color: var(--white); font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; }
.card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card__price { font-size: 22px; font-weight: 500; letter-spacing: 0.01em; }
.card__side { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.card__stats { margin-top: -4px; font-size: 13px; color: var(--muted); }
.card__area { margin-top: -2px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }   /* neighborhood · part of town (Oct 8, 2026) */
.card__address { margin-top: -2px; font-size: 14px; font-weight: 400; line-height: 1.4; }
html.js .sold-page:not(.is-active) { display: none; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 32px !important; }
.pager__controls { display: flex; align-items: center; gap: 10px; }
.pager__num { width: 44px; height: 44px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font-size: 13px; letter-spacing: 0.06em; padding: 0; }
.pager__num.is-current { background: var(--ink); color: var(--white); }
.pager__nav { height: 44px; padding: 0 18px; border: 0; background: transparent; color: var(--ink); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }
.pager__nav[disabled] { opacity: 0.35; cursor: default; }
html.no-js .pager { display: none; }
.tile { position: relative; display: block; aspect-ratio: 392 / 420; overflow: hidden; background: var(--dark); color: var(--white); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.tile:hover img { transform: scale(1.04); }
.tile__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 10, 9, 0.35) 0%, rgba(5, 10, 9, 0.55) 55%, rgba(5, 10, 9, 0.8) 100%); }
.tile__text { position: absolute; inset: 0; padding: 40px 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; }
.tile__name { font-family: var(--serif); font-size: clamp(24px, 2.1vw, 30px); line-height: 1.1; }
.tile__rule { width: 36px; height: 1px; background: rgba(255, 255, 255, 0.7); }
.tile__traits { font-size: 12px; line-height: 1.7; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.9); }
.tile__cta { margin-top: 6px; font-size: 10px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.card--area .card__img { aspect-ratio: 292 / 220; }
/* Press cards (the Publications page, Oct 7, 2026): a black panel with the outlet's logo in place of a photo, then the
   outlet + date in mono, the piece's title in serif, one line on it, and the link straight to the piece. */
.card--press .card__media--press { display: flex; align-items: center; justify-content: center; aspect-ratio: 392 / 220; background: var(--black); }
.card--press .card__media--press:hover .press__logo { opacity: 1; }
.press__logo { width: auto; opacity: 0.92; transition: opacity 200ms; }
.press__logo--adtv { height: 48px; } .press__logo--hgtv { height: 56px; } .press__logo--dwell { height: 42px; }
.card__meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.card--press .card__title { font-size: clamp(20px, 1.6vw, 24px); }
.card__img--press { aspect-ratio: 16 / 9; height: auto; }   /* height: auto so a <video> with a height attribute still follows the ratio */
.card--press .card__media--neon { background: #000; }
.card--press .card__media--neon video { display: block; }
.card--press .card__media--poster { background: var(--black); display: flex; justify-content: center; }
.card__img--poster { width: auto; height: auto; max-height: 100%; aspect-ratio: 16 / 9; object-fit: contain; }   /* the key art is portrait: shown whole, letterboxed on black */
.card--press .card__badge { background: var(--white); color: var(--ink); }
.card--press .card__meta { display: flex; flex-direction: column; gap: 3px; }   /* outlet on one line, date or episode on the next — four cards across, the titles line up (Oct 8, 2026) */
/* "Where to watch" on the Publications page's show band: the platforms' white logos in a row that wraps on phones */
.band--show .container { max-width: 1100px; }
.band__media { width: min(560px, 100%); margin: -10px auto 6px; }   /* the network's neon logo loop, over the show's description */
.band__media video { display: block; width: 100%; height: auto; }
.watch { width: 100%; margin-top: 18px; padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, 0.14); display: flex; flex-direction: column; align-items: center; gap: 24px; }
.watch__label, .watch__cable { font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.watch__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 44px; }
.watch__logo { height: 40px; width: auto; opacity: 0.92; }
.watch__logo--tall { height: 48px; }
@media (max-width: 699px) {
  .stats--record, .stats--market { grid-template-columns: 1fr; gap: 22px; }
  .quiz { padding: 22px; }
  .table th, .table td { padding: 12px 12px 12px 0; } .watch__logos { gap: 22px 28px; } .watch__logo { height: 30px; } .watch__logo--tall { height: 36px; } }
.card--article .card__img { aspect-ratio: 392 / 220; }
/* @end:cards */

/* @section:reel */
/* Buy a Home / List Your Property card reels (packet reference/buy-card-scene.md + sell-card-scene.md, Oct 7, 2026).
   The frame keeps the card photo's 392:260 shape; everything inside scales from the CARD's width (container units), so the
   same markup fits the 392 px desktop card, a 470 px tablet card and a full-width phone card. Before scripts run — or with
   JavaScript off — only the resting photo shows, exactly like a plain card. The reel's own JavaScript is site.js @reel. */
.card--reel { container-type: inline-size; }
.card--reel .card__title, .card--reel .card__link { color: inherit; text-decoration: none; }
.card--reel .card__link { display: inline-block; }
.reel { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 392 / 260; background: var(--dark); color: var(--white); }
.reel__bg { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 1.6s ease; }
.reel__bg.is-on { opacity: 1; }
.reel__bg picture { position: absolute; inset: 0; display: block; overflow: hidden; }
.reel__bg .card__img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover;
  transform-origin: var(--ox, 50%) var(--oy, 50%); transition: none; }
.card--reel:hover .reel__bg .card__img { transform: none; }                          /* the card hover zoom stays off inside the reel */
.reel.is-playing .reel__bg.is-on .card__img { animation: reel-drift 9.7s ease-out both; }
@keyframes reel-drift { from { transform: scale(1.06); } to { transform: scale(1.2); } }
.reel__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(10, 9, 8, 0.5), rgba(10, 9, 8, 0.68)); opacity: 0; transition: opacity 1.5s ease; }
.reel.is-playing .reel__scrim { opacity: 1; }
.reel__box { position: absolute; z-index: 2; inset: 10% 4% 11%; border: 1px solid rgba(255, 255, 255, 0.7); opacity: 0; transition: opacity 0.9s ease; }
.reel__box.is-on { opacity: 1; }
.reel__tag { position: absolute; z-index: 3; left: 4%; top: calc(10% - 1px); display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  background: var(--white); color: var(--ink); font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
  opacity: 0; transition: opacity 0.8s ease; }
.reel__tag.is-on { opacity: 1; transition-delay: 0.8s; }
.reel__beat { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 12% 8% 12%; pointer-events: none; }
.reel__beat.is-on { pointer-events: auto; }
.reel__text { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.12; letter-spacing: -0.01em; text-shadow: 0 1px 18px rgba(0, 0, 0, 0.25); }
.reel__ln { display: block; overflow: hidden; padding-bottom: 0.1em; }
.reel__ln > span { display: block; transform: translateY(112%); transition: transform 1.25s var(--ease-out); transition-delay: calc(var(--d, 0) * 150ms); }
.reel__beat.is-on .reel__ln > span { transform: translateY(0); transition-delay: calc(var(--d, 0) * 150ms + 800ms); }
.reel__beat.is-past .reel__ln > span { transform: translateY(-112%); }
.reel__cta { display: inline-block; margin-top: 14px; padding: 12px 18px; background: var(--white); color: var(--ink); text-decoration: none;
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0; transition: opacity 0.9s ease, background 200ms ease; }
.reel__beat.is-on .reel__cta { opacity: 1; transition-delay: 2.1s; }
.reel__cta:hover { background: var(--ivory); }
.reel__ctrl { position: absolute; z-index: 4; left: 0; right: 0; bottom: 2%; display: none; justify-content: center; align-items: center; gap: 2px; }
.reel.is-ready .reel__ctrl { display: flex; }
.reel__ctrl button { height: 30px; min-width: 30px; padding: 0; border: 0; background: none; color: var(--white); cursor: pointer; display: grid; place-items: center; }
.reel__dot::after { content: ""; width: 26px; height: 2px; background: rgba(255, 255, 255, 0.35); }
.reel__dot[aria-current="true"]::after { background: linear-gradient(90deg, #fff var(--p, 0%), rgba(255, 255, 255, 0.35) var(--p, 0%)); }
.reel__pp { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; padding: 0 8px !important; opacity: 0.85; }
.reel :focus-visible { outline-color: var(--white); }
/* sizes that follow the card's own width (container query units); the px values above are the fallback for older browsers */
@supports (width: 1cqw) {
  .reel__text { font-size: clamp(18px, 6.6cqw, 34px); }
  .reel__tag { font-size: clamp(8px, 2.3cqw, 10px); height: clamp(20px, 5.6cqw, 26px); }
  .reel__cta { margin-top: clamp(10px, 3.2cqw, 18px); padding: clamp(10px, 2.8cqw, 13px) clamp(14px, 4.6cqw, 22px); font-size: clamp(10px, 2.6cqw, 11px); }
}
@media (prefers-reduced-motion: reduce) {
  .reel.is-playing .reel__bg.is-on .card__img { animation: none; }
  .reel__bg, .reel__scrim, .reel__box, .reel__tag, .reel__ln > span, .reel__cta { transition: none; }
}
/* @end:reel */

/* @section:marquee */
.marquee { position: relative; height: 260px; background: var(--black); color: var(--white); overflow: hidden; }
.marquee__label { position: absolute; top: 40px; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); }
.marquee__window { position: absolute; top: 0; bottom: 16px; left: 50%; width: min(1240px, 100% - 2 * var(--gutter)); transform: translateX(-50%); overflow: hidden; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 140px, #000 calc(100% - 140px), transparent); mask-image: linear-gradient(90deg, transparent, #000 140px, #000 calc(100% - 140px), transparent); }
.marquee__track { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.marquee__window:hover .marquee__track, .marquee__window:focus-within .marquee__track { animation-play-state: paused; }   /* so a logo link can be clicked (Oct 7, 2026) */
.marquee__cell--link { cursor: pointer; }
.marquee__cell--link:hover .marquee__logo { opacity: 1; }
.marquee__set { display: flex; align-items: center; }
.marquee__cell { width: 300px; height: 120px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.marquee__logo { width: auto; opacity: 0.92; margin-inline: auto; }
.marquee__logo--adtv { height: 52px; }
.marquee__logo--hgtv { height: 60px; }
.marquee__logo--dwell { height: 46px; }
.marquee__link { position: absolute; bottom: 30px; left: 0; right: 0; text-align: center; }
@keyframes marquee { to { transform: translateX(-25%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }
/* @end:marquee */

/* @section:widgets */
.widget { min-height: 320px; }
.widget--reviews { min-height: 420px; }
.widget--instagram { min-height: 380px; }
.widget--video { min-height: 420px; }
.widget--slider { min-height: 480px; }
.widget--calculator { min-height: 560px; }
.widget--map { min-height: 420px; }
.widget-note { font-size: 11px; color: var(--muted); }
/* Calendly scheduler (Matt, Oct 6, 2026). A dark card, the same #1a1a1a Matt chose for the embed's background, so the
   calendar reads as one designed block on an ivory or white section. Built by build.py -> {{calendly_inline}}. */
.scheduler { background: #1a1a1a; color: var(--white); padding: clamp(28px, 4vw, 48px) clamp(20px, 3.4vw, 44px); display: flex; flex-direction: column; gap: 28px; }
.scheduler__head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.scheduler__head h2, .scheduler__head h3 { color: var(--white); }
.scheduler__head p { font-size: var(--lead); line-height: 1.65; color: rgba(255, 255, 255, 0.86); }
.scheduler .calendly-inline-widget { width: 100%; background: #1a1a1a; }
.scheduler__fallback a { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
/* The floating "Let's talk" button (Matt, Oct 7, 2026; text "Schedule time with me" until 11:30 PM that night): a pill in the bottom-right corner of every page that opens
   Matt's Calendly pop-up. Since Oct 7 (late evening) it is the site's own link (build.py → calendly_badge_html, in every
   page's HTML) rather than Calendly's badge, because Matt wants it to wear the OPPOSITE of the section behind it: a dark
   pill with cream text over the ivory / white sections, the snippet's cream pill with dark text over the dark ones (photo
   heroes, black bands, the logo marquee, the footer, the dark calendar card, photo tiles and reels). build.py stamps every
   section data-tone="light|dark"; site.js → pill looks at what is under the pill's centre and sets data-under on it; the
   four colours arrive as CSS variables on the element (from site.config.json → calendly.badge.on_dark / on_light).
   The pill wears the site's button typography (Compass Sans, letter-spaced caps, like .btn), sits below the header (50),
   the phone menu (40) and the page opening (60), and clears the iPhone home bar. It stays `hidden` until site.js lifts
   the attribute (so the phone hide rule below is in place before it can show); without scripts the <noscript> rule shows it. */
.book-pill { position: fixed; right: 22px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 30;
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 28px; border-radius: 999px;
  --pill-bg: var(--pill-bg-on-light, var(--ink)); --pill-fg: var(--pill-fg-on-light, var(--white));   /* until site.js has looked: the dark pill (most of every page is light) */
  background: var(--pill-bg); color: var(--pill-fg); text-decoration: none;
  font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
  transition: background-color 250ms ease, color 250ms ease, box-shadow 200ms ease, transform 250ms ease, opacity 250ms ease, visibility 0s 0s;
  animation: pill-in 450ms var(--ease-out) backwards; }   /* `backwards`, not `both`: once the rise-in ends the animation lets go, so the hide/show rules below can fade the opacity (a `both` fill pins opacity at 1 for good — found on the sandbox, Oct 7) */
.book-pill[data-under="dark"] { --pill-bg: var(--pill-bg-on-dark, var(--ivory-2)); --pill-fg: var(--pill-fg-on-dark, var(--ink)); }   /* over a dark section: the cream pill */
.book-pill[data-under="light"] { --pill-bg: var(--pill-bg-on-light, var(--ink)); --pill-fg: var(--pill-fg-on-light, var(--white)); } /* over a light section: the dark pill */
.book-pill:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); transform: translateY(-1px); color: var(--pill-fg); }
.book-pill:focus-visible { outline: 2px solid var(--pill-bg); outline-offset: 3px; }   /* the ring is the pill's own colour, so it shows on both tones */
.book-pill[hidden] { display: none; }
.no-js .book-pill[hidden] { display: inline-flex; }                                    /* no scripts: the link shows anyway (it opens the booking page) */
@keyframes pill-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* hidden while the phone menu is open, or while an inline calendar is on screen (it would only cover the calendar) */
body.nav-open .book-pill, body.scheduler-in-view .book-pill { opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
  transition: background-color 250ms ease, color 250ms ease, opacity 250ms ease, visibility 0s 250ms, transform 250ms ease; }
/* with the pill in the corner, the footer's last line gets room to scroll clear of it */
body.has-book-pill .site-footer { padding-bottom: calc(32px + 56px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce) { .book-pill { animation: none; } .book-pill:hover { transform: none; } }
@media print { .book-pill { display: none; } }
.sales-map { position: relative; width: 100%; aspect-ratio: 2 / 1; min-height: 360px; background: #e6e2da; overflow: hidden; }
.sales-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sales-map__legend { position: absolute; top: 24px; left: 24px; width: min(320px, calc(100% - 48px)); padding: 20px 22px; background: var(--white); display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--body); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
.sales-map__legend strong { font-weight: 500; color: var(--ink); }
.sales-map__note { position: absolute; bottom: 14px; right: 18px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.sales-map .gm-style .gm-style-iw-d { font-family: var(--sans); }
.pin-tip { position: absolute; transform: translate(-50%, calc(-100% - 14px)); padding: 10px 12px; background: var(--ink); color: var(--white); font-size: 12px; line-height: 1.4; white-space: nowrap; pointer-events: none; }
.pin-tip::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: var(--ink); transform: translateX(-50%) rotate(45deg); }
/* @end:widgets */

/* @section:talk — the "Let's talk" card that replaced the forms (Matt, Oct 8, 2026). It is a .scheduler (same dark card as
   the inline calendar) with two buttons: "Let's talk" (opens the Calendly pop-up) and the written route — "Send me an email"
   (white outline, like the pill's cream pair) or, once Matt's Elfsight message form is in site.config.json, that form under
   the buttons. The card starts in the first screen on Contact (390 px: button at ~700 px of 844, checked by smoke.py). */
.talk { gap: 24px; }
.talk .scheduler__head { gap: 10px; }
.talk .scheduler__head h2 { font-size: clamp(28px, 2.6vw, 40px); }   /* an h2 for the outline (Contact: h1 then this card), drawn a size down so the buttons stay in the first screen */
.talk__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.talk__actions .btn { min-width: 0; flex: 1 1 200px; height: 54px; padding: 0 24px; }
.talk__write { border-color: rgba(255, 255, 255, 0.55); }
.talk__form { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.talk .widget--message { min-height: 420px; background: transparent; }
/* @end:talk */

.contact-lines { display: flex; flex-direction: column; gap: 18px; font-size: var(--lead); line-height: 1.5; color: var(--body); }
.contact-lines .eyebrow { margin-bottom: 4px; }
.contact-lines a { color: var(--ink); font-size: clamp(18px, 1.6vw, 22px); }
.contact-lines a:hover { text-decoration: underline; text-underline-offset: 4px; }
.contact-lines a, .legal a, .column__title a, .lead a { display: inline-block; padding: 4px 0; margin: -4px 0; }  /* tap area >= 24px on 19–22px links (phone audit, Oct 6, 2026) */
/* @end:forms */

/* @section:footer */
.site-footer { padding: 56px 0 32px; background: var(--dark); color: rgba(255, 255, 255, 0.72); font-size: 13px; }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; align-items: start; }
.site-footer__name { font-size: 14px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--white); margin-bottom: 14px; }
.site-footer__lines { line-height: 1.7; }
.site-footer a:hover { color: var(--white); }
.site-footer__nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 48px; }
.site-footer__nav a { display: inline-block; padding: 6px 0; margin: -6px 0; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.site-footer__social { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 18px; font-size: 11px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.85); transition: border-color 200ms, color 200ms; }
.pill:hover { border-color: var(--white); color: var(--white); }
.pills--dark .pill { border-color: var(--ink); color: var(--ink); height: 40px; padding: 0 16px; border-radius: 20px; }
.pills--dark .pill:hover { background: var(--ink); color: var(--white); }
.site-footer__legal { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); display: flex; flex-direction: column; gap: 14px; }
.site-footer__legal-row { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.site-footer__copy { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; font-size: 11px; letter-spacing: 0.04em; }
.site-footer__copy a { display: inline-block; padding: 6px 0; margin: -6px 0; color: rgba(255, 255, 255, 0.85); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__compass { height: 13px; width: auto; opacity: 0.9; }
.site-footer__badges { display: flex; align-items: center; gap: 22px; font-size: 11px; letter-spacing: 0.04em; }
.site-footer__badges a, .site-footer__lines a, .site-footer__fine a { display: inline-block; padding: 6px 0; margin: -6px 0; }  /* tap area >= 24px (phone audit, Oct 6, 2026) */
.site-footer__badge { height: 36px; width: auto; opacity: 0.9; }
.site-footer__fine { font-size: 11px; line-height: 1.6; color: rgba(255, 255, 255, 0.55); }
.site-footer__fine a { color: rgba(255, 255, 255, 0.75); text-decoration: underline; text-underline-offset: 3px; }
/* @end:footer */

/* @section:legal */
.legal { max-width: 820px; }
.legal .container > * + * { margin-top: 0; }
.legal__meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 36px; }
.legal h2 { font-size: clamp(24px, 2.2vw, 30px); margin: 44px 0 14px; }
.legal p, .legal li { font-size: 16px; line-height: 1.75; color: var(--body); }
.legal p + p { margin-top: 14px; }
.legal ol, .legal ul { margin: 14px 0 14px 22px; padding: 0; }
.legal ol { list-style: decimal; }
.legal ul { list-style: disc; }
.legal li + li { margin-top: 8px; }
.legal address { font-style: normal; line-height: 1.75; color: var(--body); }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal strong { font-weight: 500; color: var(--ink); }
/* @end:legal */

/* @section:v2 — Oct 9, 2026: the V2 content pages (East Nashville guides, the guides, /market, the sold table). Same tokens,
   nothing new in the palette. */
.source-line { margin-top: 18px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.source-line a { text-decoration: underline; text-underline-offset: 3px; }
.stats--record .stat__sub, .stats--market .stat__sub { font-size: 13px; color: var(--muted); line-height: 1.5; }
.stats--record .stat__num, .stats--market .stat__num { font-size: clamp(40px, 4.4vw, 64px); }

/* Market numbers from Matt's RealTracs downloads (Oct 9, 2026) — {{market_snapshot}} on an area page whose
   data/market.json entry names a data/realtracs/<area>/ folder. Text first (figures, table, sentence) so search
   engines and AI tools can read every number; the chart is drawn at build time, two layouts (wide / narrow). */
.market { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 28px; }
.market > * { min-width: 0; }
.market__head { display: grid; gap: 10px; }
.market__title { font-family: var(--serif); font-size: var(--h3); font-weight: 400; line-height: 1.2; color: var(--ink); text-wrap: balance; }
.market__scope { color: var(--body); font-size: var(--lead); line-height: 1.6; max-width: 65ch; }
.market .stats--market .stat__cap { max-width: 30ch; }
.market__table { border-top: 0; max-width: 760px; }
.market .table--market caption { caption-side: top; text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); padding: 0 0 12px; }
.market .table--market thead th { border-top: 1px solid var(--ink); }
.market .table--market td, .market .table--market thead th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 16px; padding-right: 0; }
.market .table--market tbody th { min-width: 210px; }
@media (max-width: 600px) {   /* phones: each measure becomes a small card — its name, then the three values labelled */
  .market .table--market thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .market .table--market, .market .table--market tbody, .market .table--market caption { display: block; }
  .market .table--market tbody { border-top: 1px solid var(--ink); }
  .market .table--market tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
  .market .table--market tbody th { grid-column: 1 / -1; min-width: 0; padding: 0; border: 0; }
  .market .table--market td { padding: 0; border: 0; text-align: left; white-space: normal; color: var(--ink); }
  .market .table--market td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
}
.market-chart { margin: 8px 0 0; max-width: 760px; }
.market-chart__title { font-family: var(--serif); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.3; color: var(--ink); }
.market-chart__sub { display: block; margin-top: 4px; font-family: var(--sans); font-size: 13px; color: var(--muted); }
.market-chart__legend { list-style: none; margin: 14px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; color: var(--body); font-variant-numeric: tabular-nums; }
.market-chart__legend li { display: inline-flex; align-items: center; gap: 10px; }
.mc-key { display: inline-block; width: 28px; height: 0; border-top: 2.5px solid var(--ink); }
.mc-key--1 { border-top: 2.5px dashed var(--muted); }
.market-chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.market-chart__svg--narrow { display: none; }
@media (max-width: 600px) { .market-chart__svg--wide { display: none; } .market-chart__svg--narrow { display: block; } }
.mc-grid { stroke: var(--hair); stroke-width: 1; }
.mc-axis, .mc-tick { stroke: var(--ink); stroke-width: 1; }
.mc-label { fill: var(--muted); font-family: var(--mono); letter-spacing: 0.02em; }
.mc-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.mc-line--0 { stroke: var(--ink); }
.mc-line--1 { stroke: var(--muted); stroke-dasharray: 7 5; }
.mc-dot--0 { fill: var(--ink); }
.mc-dot--1 { fill: var(--muted); }
.market__history { color: var(--body); font-size: var(--lead); line-height: 1.7; max-width: 70ch; }
.market .source-line { margin-top: 0; max-width: 90ch; }
/* Oct 10, 2026 — one-area RealTracs blocks: the small-numbers note, the notes under a table, the year-over-year table
   (two months + RealTracs' change) and the five-years-apart table (two columns). */
.market__note { max-width: 70ch; padding: 2px 0 2px 16px; border-left: 2px solid var(--ink); color: var(--body); font-size: 15px; line-height: 1.6; }
.market__foot { margin-top: -12px; max-width: 76ch; color: var(--muted); font-size: 13px; line-height: 1.55; }
.market .table--yoy td.is-change { color: var(--muted); }
@media (max-width: 600px) {   /* same breakpoint as the cards above */
  .market .table--fiveyear tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; }
.crumbs a { color: var(--muted); border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--ink); border-bottom-color: currentColor; }
.crumbs [aria-current="page"] { color: var(--ink); }
.crumbs__sep { color: var(--hair); }
.hero .crumbs { margin: 0 0 6px; color: rgba(255,255,255,0.72); }
.hero .crumbs a { color: rgba(255,255,255,0.72); }
.hero .crumbs a:hover, .hero .crumbs [aria-current="page"] { color: var(--white); }
.hero .crumbs__sep { color: rgba(255,255,255,0.35); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--ink); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.table th, .table td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--hair); }
.table thead th { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.table tbody th { font-weight: 500; color: var(--ink); }
.table td { color: var(--body); }
.table a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.table__when { white-space: nowrap; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.table--compare th:first-child, .table--compare td:first-child { min-width: 180px; }
.table--compare thead th { color: var(--ink); font-family: var(--serif); font-size: 20px; letter-spacing: 0; text-transform: none; }
.table--compare td { min-width: 170px; }
.closings { margin-top: 8px; }
.closings__title { font-size: var(--h3); margin-bottom: 16px; }
.closings__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.closings__list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 15px; line-height: 1.5; }
.closings__year { font-family: var(--mono); font-size: 13px; color: var(--muted); padding-top: 2px; }
.closings__meta { grid-column: 2; font-size: 13px; color: var(--muted); }
.closings__list a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.plain { list-style: disc; margin: 12px 0 0 22px; padding: 0; }
.plain li { font-size: 16px; line-height: 1.7; color: var(--body); }
.plain li + li { margin-top: 8px; }
.pending { padding: 32px; border: 1px solid var(--hair); background: var(--white); }
.yt { position: relative; aspect-ratio: 16 / 9; background: var(--black); overflow: hidden; }
.yt__link { display: block; width: 100%; height: 100%; color: var(--white); }
.yt__thumb { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.yt__play { position: absolute; left: 50%; top: 50%; width: 76px; height: 54px; transform: translate(-50%, -50%); background: rgba(0,0,0,0.72); border-radius: 12px; }
.yt__play::after { content: ""; position: absolute; left: 31px; top: 16px; border-style: solid; border-width: 11px 0 11px 20px; border-color: transparent transparent transparent #fff; }
.yt__title { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px; font-size: 14px; background: linear-gradient(transparent, rgba(0,0,0,0.75)); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.article-body ul, .article-body ol { margin: 0 0 0 22px; padding: 0; }
.article-body li { font-size: 16px; line-height: 1.75; color: var(--body); }
.article-body li + li { margin-top: 8px; }
.article-body p { font-size: 16px; line-height: 1.75; color: var(--body); }
.article-body p.lead { font-size: var(--lead); }
.article-body h3 { font-size: clamp(20px, 1.7vw, 24px); margin-top: 6px; }
.article-body .table { font-size: 14.5px; }
.article-body a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.article-body .note { padding: 18px 22px; border-left: 2px solid var(--ink); background: var(--white); }
.toc { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.toc a { color: var(--muted); border-bottom: 1px solid transparent; }
.toc a:hover { color: var(--ink); border-bottom-color: currentColor; }
.quiz { display: flex; flex-direction: column; gap: 28px; padding: 36px; border: 1px solid var(--hair); background: var(--white); }
.quiz__q { display: flex; flex-direction: column; gap: 12px; }
.quiz fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }   /* the browser's default fieldset box is not the design */
.quiz legend { padding: 0; }
.quiz__q legend, .quiz__q .quiz__label { font-family: var(--serif); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; }
.quiz__opts { display: flex; flex-wrap: wrap; gap: 10px; }
.quiz__opt { position: relative; }
.quiz__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.quiz__opt span { display: inline-block; padding: 10px 16px; border: 1px solid var(--ink); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.quiz__opt input:checked + span { background: var(--ink); color: var(--white); }
.quiz__opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.quiz__result { padding: 22px 0 0; border-top: 1px solid var(--ink); display: flex; flex-direction: column; gap: 14px; }
.quiz__result[hidden] { display: none; }   /* display:flex would otherwise override the hidden attribute (the rule drew a bare line under the button) */
.quiz__result h3 { font-size: var(--h3); }
.quiz__result p { font-size: 15px; line-height: 1.65; color: var(--body); }
.quiz__fine { font-size: 13px; color: var(--muted); line-height: 1.5; }
.reach { display: flex; flex-wrap: wrap; gap: 10px; }
/* @end:v2 */

/* @section:guides — Oct 9, 2026 (evening): the Field Guide framework — the blocks every relocation, profession and
   comparison guide shares (build.py → zone_map / zone_price / zone_commute / commute_table / guide_meta / author_box).
   Same tokens, nothing new in the palette. The order on a page: answer box → updated line → match table → the eight
   zones → cost table → commute table → what you'll miss → FAQ → video → Let's talk → author + sources. */
.answer { padding: 26px 30px 28px; border-top: 2px solid var(--ink); background: var(--white); }
.answer p { font-family: var(--serif); font-size: clamp(19px, 1.55vw, 23px); line-height: 1.42; color: var(--ink); }
.answer p + p { margin-top: 12px; }
.answer__label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.guide-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.guide-meta a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.guide-meta__sep { color: var(--hair); }
.table--match th:first-child, .table--match td:first-child { min-width: 170px; }
.table--match td { min-width: 150px; }
.table--match .is-draft { color: var(--muted); }
.table--commute th:first-child { min-width: 190px; }
.table--commute td { white-space: nowrap; }
.table--commute abbr { text-decoration: none; }
.pending-num { font-family: var(--mono); color: var(--muted); }
.pending-note { padding: 12px 16px; border: 1px dashed var(--hair); background: var(--white); font-family: var(--mono); font-size: 12px; line-height: 1.6; letter-spacing: 0.04em; color: var(--muted); margin-top: 14px; }
.zones { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
.zones__item { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--ink); }
.zones__name { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; margin: 0; }
.zones__line { font-size: 15px; line-height: 1.6; color: var(--body); }
.zones__parts { font-size: 13px; line-height: 1.55; color: var(--muted); }
.zones__links { font-size: 13px; }
.zones__links a { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.miss, .article-body .miss { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.miss li { padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 16px; line-height: 1.65; color: var(--body); }
.miss strong { color: var(--ink); font-weight: 500; }
.sources { margin: 0 0 0 22px; padding: 0; font-size: 14px; line-height: 1.65; color: var(--muted); }
.sources li + li { margin-top: 6px; }
.sources a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.author--guide { align-items: flex-start; gap: 28px; }
.author__img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: center 20%; flex-shrink: 0; }
.author--guide picture { flex-shrink: 0; }
.author__role { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-top: 6px; line-height: 1.7; }
.author__links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 12px; }
/* Matt, Oct 9 (12:41 PM): "a high-level breakdown at the beginning, and a way for them to dive deeper into each point,
   where it then brings them to that section" — the brass-tacks block: one line per section, the takeaway in ink, the
   section's name as the jump link. Replaces the bare table of contents on the guides. */
.brass { border-top: 2px solid var(--ink); }
.brass__label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); padding: 14px 0 6px; }
.brass__list { list-style: none; margin: 0; padding: 0; counter-reset: brass; }
.brass__list li { border-bottom: 1px solid var(--hair); counter-increment: brass; }
.brass__list a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 6px 14px; align-items: baseline; padding: 14px 0; color: var(--ink); text-decoration: none; }
.brass__list a::before { content: counter(brass, decimal-leading-zero); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--muted); }
.brass__point { font-size: 16px; line-height: 1.55; color: var(--ink); font-weight: 400; }
.brass__more { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); white-space: nowrap; border-bottom: 1px solid transparent; transition: border-color 200ms, color 200ms; }
.brass__list a:hover .brass__more, .brass__list a:focus-visible .brass__more { color: var(--ink); border-bottom-color: currentColor; }
.article-body .brass__list, .article-body .brass__list li { margin: 0; }
.photo { margin: 0; }
.photo img { width: 100%; aspect-ratio: 1240 / 560; object-fit: cover; object-position: center 55%; }
.photo figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.draft-flag { display: inline-block; padding: 6px 10px; border: 1px solid var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); }
/* @end:guides */

/* @section:reveal */
/* Pieces are hidden by site.js at init (inline styles), then revealed once as their section is 15% in view — 450 ms,
   soft landing, 110 ms stagger. Before scripts run, nothing is hidden; reduced motion disables it entirely. */
html.js.rv-ready [data-rv] { will-change: transform, opacity; }
[data-rv="mask"] { clip-path: inset(0 0 100% 0); transform: translateY(100%); }
[data-rv="fade"] { opacity: 0; transform: translateY(24px); }
[data-rv].is-in { clip-path: inset(0 0 0 0); opacity: 1; transform: none;
  transition: transform 450ms var(--ease-out), opacity 450ms var(--ease-out), clip-path 450ms var(--ease-out); transition-delay: var(--rv-delay, 0ms); }
@media (prefers-reduced-motion: reduce) { [data-rv] { clip-path: none; opacity: 1; transform: none; transition: none; } }
@media print { [data-rv] { clip-path: none; opacity: 1; transform: none; transition: none; } }   /* a printed page shows every piece, revealed or not (Oct 10, 2026) */
/* @end:reveal */

/* @section:responsive */
/* The header phone number used to step out below 1320 px: the row with In the Press + Blog needed ~1300 px with it while the
   Compass wordmark sat on the right. With the wordmark folded into the brand lockup (Oct 8, 2026, 12:20 PM) the row needs
   about 1130 px, so the number stays until the row itself gives way to the menu panel at 1200 px (the number is also in the
   footer, on Contact and behind the Let's talk pill). Measured in docs/launch-checks/2026-10-08-desktop-header.md. */
@media (max-width: 1200px) {
  .site-nav { position: fixed; inset: 0; z-index: 40; padding: calc(var(--header-h) + 24px) var(--gutter) 40px; background: rgba(0, 0, 0, 0.96); color: var(--white);
    display: flex; flex-direction: column; justify-content: space-between; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 250ms ease, transform 250ms ease, visibility 0s 250ms; }
  body.nav-open .site-nav { opacity: 1; visibility: visible; transform: none; transition: opacity 250ms ease, transform 250ms ease; }
  .site-nav__list { flex-direction: column; align-items: flex-start; gap: 18px; }
  .site-nav__list a { font-family: var(--serif); font-size: clamp(28px, 6vw, 40px); letter-spacing: 0.02em; text-transform: none; opacity: 1; }
  /* The Properties group, expanded: its label is a small tracked heading, its three links sit under it a step smaller.
     The panel scrolls if a short screen cannot fit the list (iPhone SE: it just fits). */
  .site-nav { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
  .site-nav__item--group { position: static; }
  .site-nav__group { display: block; padding: 2px 0 0; margin: 0; background: transparent !important; color: inherit !important; font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; opacity: 0.6; cursor: default; pointer-events: none; }
  .site-nav__chev { display: none; }
  .site-nav__sub { position: static; padding-top: 14px; opacity: 1; visibility: visible; transform: none; transition: none; }
  .site-nav__sublist { gap: 12px; min-width: 0; padding: 0 0 0 22px; border-left: 1px solid rgba(255, 255, 255, 0.22); background: transparent; color: inherit; box-shadow: none; }
  .site-nav__sublist a { font-size: clamp(22px, 4.6vw, 30px); white-space: normal; }
  /* Matt, Oct 9, 2026: on a phone the Field Guide is ONE link to its landing page, not eight — the heading and the list
     are hidden here; the desktop drop-down keeps them. Properties (no landing page) stays expanded as before. */
  .site-nav__item--landing .site-nav__group, .site-nav__item--landing .site-nav__sub { display: none; }
  .site-nav__item--landing .site-nav__group-link { display: inline; }
  .site-nav__contact { display: block; }
  .site-nav__meta { display: flex; flex-direction: column; gap: 10px; font-size: 14px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.8); }
  .site-header__phone, .site-header__cta { display: none; }
  .menu-toggle { display: flex; }
  /* The menu panel is position:fixed INSIDE the header. A backdrop-filter (the scrolled header's blur) makes the header the
     panel's containing block, so "inset: 0" meant the header's own 72 px strip, not the screen: the panel came out as a
     black band at the top, the links spilled down over the hero, and the X sat under the panel at 4% brightness — no way
     out (Matt's screenshot, Oct 7, 2026, 11:16 PM). So at the widths that use the panel: no blur on the header (its 92%
     fill reads the same), no fill at all while the menu is open (the panel is the backdrop — and a cream strip over the
     black panel on the light pages), and the brand + X lifted above the panel (its z-index 40 is ordered among the header's
     children; the unpositioned brand and button painted beneath it). */
  .site-header.is-scrolled, .site-header.is-sub-open { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .brand, .site-header__right { position: relative; z-index: 41; }
  body.nav-open .site-header { color: var(--white); background: transparent; }
  body.nav-open .site-header--light .brand__mark--black, body.nav-open .site-header--light .brand__compass-img--black { display: none; }
  body.nav-open .site-header--light .brand__mark--white, body.nav-open .site-header--light .brand__compass-img--white { display: block; }
  .split--meet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 1023px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .split, .split--portrait, .split--meet { grid-template-columns: minmax(0, 1fr); }
  .split--meet .portrait { max-width: 520px; }
  .feature { grid-template-columns: minmax(0, 1fr); }
  .faq .faq__item { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .site-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer__social { grid-column: 1 / -1; align-items: flex-start; }
  .guide-box { flex-direction: column; align-items: flex-start; }
  .author { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 699px) {
  :root { --header-h: 72px; }
  /* phone brand lockup — Matt's pick "2b" (Oct 8, 2026): the header-section lockup a touch tighter — gap 12 px, the name at
     13.5 px, the Compass sub-line 6.5 px; the M mark stays 36 px. Measured at 390 px: the lockup ends at x=232, 104 px clear
     of the menu button; at 360 px, 74 px clear (docs/launch-checks/2026-10-08-phone-header.md). */
  .brand { gap: 12px; font-size: 13.5px; letter-spacing: 0.26em; }
  .brand__compass-img { height: 6.5px; }
  .btn { letter-spacing: 0.18em; font-size: 11px; }
  .grid, .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .zones { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* Field Guide match tables on a phone (Oct 9, 2026): a six-column table does not fit 390 px, so each row becomes a card —
     the first cell (the origin area) as its title, every other cell under its column heading (data-label, written by
     build.py from the <thead>). The markup stays a real <table>: Google and the AI assistants read the columns, a visitor
     reads a card. The commute table keeps its grid (eight rows × six numbers) and scrolls sideways instead. */
  .table--match thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--match, .table--match tbody, .table--match tr, .table--match th, .table--match td { display: block; }
  .table--match tr { padding: 18px 0 14px; border-bottom: 1px solid var(--hair); }
  .table--match th, .table--match td { padding: 0; border: 0; min-width: 0; }
  .table--match tbody th { font-family: var(--serif); font-size: 20px; line-height: 1.2; margin-bottom: 8px; }
  .table--match td { padding: 8px 0 0; }
  .table--match td::before { content: attr(data-label); display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
  .author--guide { flex-direction: column; }
  .brass__list a { grid-template-columns: 30px minmax(0, 1fr); }
  .brass__list a .brass__more { grid-column: 2; white-space: normal; }
  .photo img { aspect-ratio: 4 / 3; }
  .hero--home { height: 100svh; min-height: 620px; }
  .hero--home .hero__scrim { --pool-y: 74%; }   /* the text block sits at the bottom on phones: the pool follows it */
  .hero--home .hero__content { justify-content: flex-end; padding-bottom: 72px; gap: 16px; }
  .hero--home h1 { font-size: 36px; line-height: 1.12; }
  .hero--home .actions { flex-direction: column; width: 100%; max-width: 338px; gap: 12px; margin-top: 10px; }
  .hero--home .actions .btn { width: 100%; min-width: 0; height: 54px; }
  .hero__scroll { display: none; }
  .hero--page .hero__content { padding-bottom: 40px; }
  .hero--thanks { min-height: 740px; }   /* /thank-you: the portrait shows head to knees at this height, so his face sits above the headline instead of under it (Oct 8, 2026, 10:50 PM) */
  /* Coming Soon on a phone: the photo block goes square; the page's <picture> serves the square cut of the picture here
     (hero-sidewalk-walk-phone.jpg — see the .hero--soon note above), so no zoom or offset is needed: the file IS the frame. */
  .hero--soon .hero__media { aspect-ratio: 1 / 1; }
  .hero--soon .hero__content { padding: calc(var(--header-h) + 36px) 0 44px; }
  .hero--soon .hero__col { gap: 16px; }
  .hero--soon h1 { font-size: 36px; }
  .actions .btn { width: 100%; min-width: 0; }
  .talk__actions .btn { flex-basis: 100%; }
  .marquee { height: 220px; }
  .marquee__cell { width: 220px; height: 100px; }
  .site-footer__top { grid-template-columns: minmax(0, 1fr); }
  .site-footer__legal-row { flex-direction: column; align-items: flex-start; }
  .pager { justify-content: center; }
  .pager__label { width: 100%; text-align: center; }
  .creds { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .creds dt { padding-top: 10px; }
  .proof--review { padding: 22px; }
  .pager__nav { padding: 0 10px; }
  .section-head + .section-head { margin-top: 40px; }
  .tile__text { padding: 28px 22px; }
  /* phone: the card runs edge to edge so the calendar keeps its 320px minimum on a 390px screen; on anything narrower
     the widget may shrink below Calendly's minimum rather than cause sideways scroll */
  .scheduler { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding-left: 14px; padding-right: 14px; }
  .scheduler .calendly-inline-widget { min-width: 0 !important; }
  /* phone: a slightly tighter pill (~215px wide) so it covers less of the screen; and while the home hero's two buttons
     are on the first screen (they end 8px above where the pill lands) the pill waits — it appears as soon as they scroll off */
  .book-pill { right: 16px; height: 46px; padding: 0 22px; font-size: 11px; letter-spacing: 0.16em; }
  body.hero-cta-in-view .book-pill { opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
    transition: background-color 250ms ease, color 250ms ease, opacity 250ms ease, visibility 0s 250ms, transform 250ms ease; }
}
@media (max-width: 420px) {
  .pager__num { width: 40px; height: 40px; }
  .pager__controls { flex-wrap: wrap; justify-content: center; row-gap: 8px; }   /* 320px phones: Prev/Next drop to a second row instead of running off the edge */
  h1, h2, h3 { overflow-wrap: anywhere; }                                        /* e.g. "@matthewmarcus.re" in the About Instagram heading was 334px wide on a 320px screen */
  .section-head > * { min-width: 0; }
  .section-head h2 { font-size: clamp(26px, 9.2vw, 34px); }                      /* 34px at 390 (unchanged); ~29px at 320 so the handle fits on one line */
}
@media (max-width: 359px) {
  .brand__stack { display: none; }   /* the smallest phones: the M mark alone (the name and the Compass sub-line go together) */
  .brand { gap: 0; }
}
/* @end:responsive */