/* Self-hosted. No third-party font CDN: faster first paint, no external
   dependency, and nothing leaks to another domain on page load.

   Fraunces ships pinned rather than fully variable. The file used to carry the
   whole 100–900 weight axis; every rule below asks for 600 and nothing else,
   so 60 KB of it could never render. wght is instanced to 600 and the two axes
   the design does animate are kept — SOFT 0→8 for the headline settle, WONK
   for the quirky forms — with opsz still live up to 72px, past the largest
   heading (4rem). 121 KB → 46 KB, rendering identical at every size.
   Regenerate with fontTools if a new weight is ever needed:
     instantiateVariableFont(f, {wght:600, SOFT:(0,10), opsz:(9,72)})           */
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-latin-w600-normal.woff2") format("woff2-variations");
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Karla";src:url("/assets/fonts/karla-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url("/assets/fonts/karla-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url("/assets/fonts/karla-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Karla";src:url("/assets/fonts/karla-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ============================================================
   Sell Home As Is — Matthew Mai, CIR Realty
   Design notes:
   - Warm palette on purpose. Every competitor in this market
     uses corporate blue; brick + sage + cream reads as a person,
     not a portal.
   - Base font size is 18px. The people reading this are often
     in their seventies. Contrast targets AAA, not AA.
   - Layouts are deliberately asymmetric. Symmetrical card grids
     are what template sites look like.
   ============================================================ */

:root{
  --ink:#191714;
  --ink-soft:#3a352e;
  --paper:#faf7f2;
  --paper-2:#f3ede3;
  --line:#ddd4c6;
  --brick:#a4482c;
  --brick-dk:#7f3520;
  --sage:#2f4a3c;
  --sage-lt:#e7ede8;
  --grey:#6f675d;
  --white:#fff;

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --wrap:1180px;
  --gut:clamp(1.15rem,4vw,2.5rem);
  --bar:58px;

  --shadow:0 1px 2px rgba(25,23,20,.05),0 8px 26px -12px rgba(25,23,20,.22);
  --shadow-lg:0 2px 4px rgba(25,23,20,.06),0 22px 60px -22px rgba(25,23,20,.32);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

body{
  margin:0;
  padding-top:var(--bar);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--brick-dk);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--brick)}
:focus-visible{outline:3px solid var(--brick);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1.1rem;z-index:200}
.skip:focus{left:.5rem;top:calc(var(--bar) + .5rem)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.narrow{max-width:730px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.1;margin:0;
  font-variation-settings:"SOFT" 0,"WONK" 1;letter-spacing:-.012em}
h1{font-size:clamp(2.3rem,6vw,4rem);letter-spacing:-.022em}
h2{font-size:clamp(1.8rem,3.9vw,2.85rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.6rem)}
h4,.h4{font-size:1.1rem;font-family:var(--sans);font-weight:700;letter-spacing:.01em;
  line-height:1.35}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.13rem,2.1vw,1.36rem);line-height:1.55;color:var(--ink-soft)}
.small{font-size:.92rem;color:var(--grey)}
.tiny{font-size:.82rem;line-height:1.5;color:var(--grey)}

.eyebrow{
  font-family:var(--sans);font-size:.79rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--brick);
  display:flex;align-items:center;gap:.7rem;margin:0 0 1.1rem
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:160px}
.eyebrow.center{justify-content:center}
.eyebrow.center::after,.eyebrow.center::before{content:"";flex:0 0 44px;height:1px;background:var(--line)}

/* hand-drawn underline — a designer's tic, not a template's */
.mark{position:relative;display:inline-block;white-space:nowrap}
/* keep the stroke tight to the baseline — at h1 line-height it will otherwise
   bleed into the line below on narrow screens */
.mark svg{position:absolute;left:-1.5%;bottom:.02em;width:103%;height:.22em;overflow:visible;pointer-events:none}
.mark svg path{fill:none;stroke:#e08a5f;stroke-width:6;stroke-linecap:round;opacity:.85;
  vector-effect:non-scaling-stroke}

/* ---------- staging notice (only while STAGING = True in build.py) ---------- */
.stagebar{
  position:fixed;inset:0 0 auto;z-index:110;height:var(--stage);
  background:var(--sage);color:#dfeae3;font-family:var(--sans);
  font-size:.8rem;font-weight:600;letter-spacing:.03em;
  display:flex;align-items:center;justify-content:center;
  padding-inline:1rem;text-align:center;line-height:1.2
}
.is-staging{--stage:30px;padding-top:calc(var(--bar) + var(--stage))}
.is-staging .bar{top:var(--stage)}
.is-staging .skip:focus{top:calc(var(--bar) + var(--stage) + .5rem)}

/* the one optional tick left on the form. No longer required, so it must not
   look like a gate — lighter weight, no bold. */
.consent.opt span{font-weight:400;color:var(--ink-soft)}
.formnote a{color:var(--brick-dk);font-weight:600}
.formnote+.formnote{margin-top:-.4rem}

/* what the form says back after you press the button */
.form-result{
  margin:1rem 0 0;padding:.95rem 1.1rem;border-radius:4px;
  background:var(--sage-lt);border:1px solid #c3d4c9;color:#22392e;
  font-size:1rem;line-height:1.55
}
.form-result strong{display:block;margin-bottom:.2rem;font-size:1.06rem}
.form-result a{color:var(--sage);font-weight:700}
.form-result.bad{background:#fbeeea;border-color:#e2bdb0;color:#6b2a17}
.form-result.bad a{color:var(--brick-dk)}
/* honeypot: off-screen rather than display:none, which some bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- top bar ---------- */
.bar{
  position:fixed;inset:0 0 auto;height:var(--bar);z-index:100;
  background:var(--ink);color:#f4efe7;display:flex;align-items:center;
  box-shadow:0 1px 0 rgba(255,255,255,.07)
}
.bar .wrap{display:flex;align-items:center;gap:1rem;width:100%}
/* the lockup: mark, then wordmark. `min-width:0` on the flex child is what
   stops the name being clipped to "Direct Home B…" when the phone plate is
   wide — without it the anchor refuses to shrink and the text loses. */
.bar .id{display:flex;align-items:center;gap:.55rem;min-width:0;
  color:#f4efe7;text-decoration:none;transition:color .15s}
.bar .id .logo{flex:none}
.bar .id .wm{font-family:var(--serif);font-size:1.05rem;font-weight:600;
  letter-spacing:-.018em;line-height:1.15;white-space:nowrap}
.bar .id .wm b{font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:#a79d8e;display:block;
  line-height:1.3;margin-top:.1rem}
.bar a.id:hover{color:#fff}
.bar a.id:hover .wm b{color:#c9c0b2}
.logo{display:block}
/* footer brand line sits beside the mark */
footer .fh-brand{display:flex;align-items:center;gap:.5rem;text-transform:none;
  font-family:var(--serif);font-size:1.08rem;letter-spacing:-.015em;color:#f2ece2}
.bar .sp{flex:1}
.tel{
  display:inline-flex;align-items:center;gap:.5rem;background:var(--brick);color:#fff;
  font-weight:700;font-size:1.05rem;letter-spacing:.01em;padding:.5rem 1.05rem;border-radius:3px;
  text-decoration:none;white-space:nowrap;transition:background .15s
}
.tel:hover{background:#b8532f;color:#fff}
.tel svg{width:17px;height:17px;flex:none}
@media(max-width:620px){
  /* the tagline goes, the name stays whole. On a 390px screen the plate is
     ~132px, the mark 26px — that leaves the wordmark the ~150px it needs. */
  .bar .id .wm b{display:none}
  .bar .id .wm{font-size:1.02rem}
  .bar .id{gap:.45rem}
  .bar .id .logo{width:26px;height:26px}
  .tel{font-size:.98rem;padding:.5rem .8rem;gap:.4rem}
  .tel svg{width:16px;height:16px}
}
@media(max-width:359px){
  .bar .id .wm{font-size:.95rem}
  .tel span{display:none}
  .tel{padding:.55rem .75rem}
}

/* ---------- nav ---------- */
.nav{border-bottom:1px solid var(--line);background:var(--paper);position:relative;z-index:60}
.nav .wrap{display:flex;align-items:center;gap:clamp(.9rem,2.4vw,1.9rem);
  min-height:62px;flex-wrap:wrap}
/* Phone: two tidy rows instead of a ragged three-row wrap. Flex, not a fixed
   grid — a four-column grid gave every label a 77px cell and broke "How It
   Works" across two lines, which looked worse than the wrap it replaced.
   `nowrap` on the link is what guarantees a label never splits. */
@media(max-width:640px){
  .nav .wrap{gap:.2rem .85rem;min-height:0;padding-block:.3rem}
  .nav a{font-size:16px;white-space:nowrap;line-height:1.2;
    min-height:44px;display:flex;align-items:center;padding:0;
    border-bottom:2px solid transparent}
}
@media(max-width:359px){
  .nav .wrap{gap:.15rem .65rem}
  .nav a{font-size:15px}
}
.nav a{font-size:.96rem;font-weight:600;color:var(--ink-soft);text-decoration:none;
  padding:.45rem 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--brick);border-bottom-color:var(--brick)}
.nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--sans);font-weight:700;font-size:1.03rem;
  padding:.92rem 1.6rem;border-radius:3px;border:2px solid var(--brick);
  background:var(--brick);color:#fff;text-decoration:none;cursor:pointer;
  transition:transform .12s,background .15s,box-shadow .15s;box-shadow:var(--shadow)
}
.btn:hover{background:#b8532f;border-color:#b8532f;color:#fff;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
/* on dark grounds the default ghost is black-on-black — invert it */
.hero .btn.ghost,.sec-ink .btn.ghost,.door .btn.ghost{
  color:#fff;border-color:rgba(255,255,255,.55);background:transparent}
.hero .btn.ghost:hover,.sec-ink .btn.ghost:hover,.door .btn.ghost:hover{
  background:#fff;border-color:#fff;color:var(--ink)}
.btn svg{width:18px;height:18px;flex:none}
.btn.wide{width:100%}
.btn.lg{font-size:1.12rem;padding:1.05rem 1.9rem}

/* ---------- sections ---------- */
section{padding-block:clamp(3.2rem,7.5vw,6rem)}
.sec-tint{background:var(--paper-2)}
.sec-ink{background:var(--ink);color:#efe9df}
.sec-ink h2,.sec-ink h3{color:#fff}
.sec-ink .lede{color:#c9c0b2}
.sec-ink .eyebrow{color:#d99570}
.sec-ink .eyebrow::after{background:#413a31}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- hero ---------- */
.hero{position:relative;padding:0;background:var(--ink);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.55}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(103deg,rgba(20,18,15,.94) 0%,rgba(20,18,15,.84) 40%,rgba(20,18,15,.5) 100%)}
.hero-in{position:relative;z-index:2;padding-block:clamp(2.7rem,6vw,4.5rem);color:#fff}
.hero h1{color:#fff;max-width:16ch;font-size:clamp(2.15rem,5vw,3.45rem)}
.hero .lede{color:#ded5c7;max-width:52ch;margin-top:1.4rem}
.hero-cred{
  margin-top:2rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.17);
  font-size:.94rem;color:#c0b6a6;max-width:60ch
}
.hero-cred strong{color:#fff;font-weight:700}

/* ---------- hero video ----------
   Two columns of roughly equal mass: everything textual on the left, the
   explainer on the right. The doors live INSIDE the left column — when they
   spanned the full width the text block floated in 141px of dead space and
   the hero grew to 1142px, taller than a laptop screen.

   Since the explainer went horizontal the two columns carry roughly the same
   weight, so the split is near even and the video takes the slightly larger
   half — a 16:9 frame needs the width or it reads as a thumbnail. The two
   promises moved under the video for the same reason: they were making the
   left column 200px taller than the right and the hero looked lopsided. */
.hero-split{display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:start;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}
/* One column below 900px, and the video moves UP: headline → video → the three
   ways in. `display:contents` dissolves the left wrapper so the video can be
   ordered between the copy and the doors without duplicating the markup. */
@media(max-width:900px){
  /* gap:0 — the copy keeps its own margins, or every heading gains a flex gap
     on top of them and the hero grows by 80px for nothing */
  .hero-split{display:flex;flex-direction:column;gap:0}
  .hero-split > div:first-child{display:contents}
  /* every child of the dissolved wrapper needs an explicit order — anything
     without one defaults to 0 and jumps above the headline. That is exactly
     what the two promises did the first time they were added here. */
  /* On a handset the video has to be ON the first screen — a video that
     autoplays below the fold is a video nobody knows is playing. Headline,
     one line of what we do, then the film. The pull-quote drops below it and
     reads as the closing line before the two ways in, which is where it was
     always heading anyway. */
  .hero-split .eyebrow,.hero-split h1{order:1}
  .hero-split .lede{order:2}
  /* the column is a flex column down here, where align-self:center would
     shrink-wrap the video instead of centring it */
  .hero-split .herovid{order:3;margin-top:1.55rem;align-self:stretch}
  .hero-split .hero-plain{order:4;margin-top:1.55rem}
  .hero-split .doors{order:5;margin-top:1.6rem}
}
/* The text column always runs taller than the video column — four blocks of
   copy against one picture — so top-aligning the two left a hole under the
   promises. Centring the video against the text is what evens it up: the
   frame lands level with the cap-height of the headline rather than its
   leading, and the two columns read as one balanced spread instead of a long
   one and a short one. */
.herovid{margin:0;position:relative;width:100%;align-self:center}

/* ---- the hero explainer -------------------------------------------------
   A screen, not a snapshot: square-ish corners, a hairline so the picture
   has an edge against the dark hero, and the shadow doing the lifting. The
   old paper mount and the degree of rotation were drawn for a vertical clip
   held in the hand; at 16:9 the same treatment reads as a stock template. */
.hvid-shell{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;
  background:#17140f;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 34px 66px -26px rgba(0,0,0,.85),0 3px 10px -4px rgba(0,0,0,.5)}
.hvid-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block}
.hvid-shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:1}

/* Sits above Vimeo's own control bar rather than on top of it — the bar is
   48px and shows itself again on every mouse move. A word, not a crossed-out
   speaker: the people this is written for are not fluent in icon. */
.hvid-sound{
  position:absolute;left:50%;bottom:3.7rem;transform:translateX(-50%);z-index:3;
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:48px;padding:.55rem 1.15rem;border:0;border-radius:100px;cursor:pointer;
  background:rgba(250,247,242,.95);color:#191714;
  font-family:var(--sans);font-size:.97rem;font-weight:700;letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.7);backdrop-filter:blur(6px);
  transition:background .18s ease,transform .18s ease,opacity .3s ease
}
.hvid-sound[hidden]{display:none}
.hvid-sound svg{width:19px;height:19px;flex:none}
.hvid-sound:hover,.hvid-sound:focus-visible{background:#fff;
  transform:translateX(-50%) translateY(-2px)}
@media(prefers-reduced-motion:no-preference){
  .hvid-sound{animation:soundnudge 3.4s ease-out 1.2s 3}
}
@keyframes soundnudge{
  0%,68%,100%{box-shadow:0 8px 24px -6px rgba(0,0,0,.7),0 0 0 0 rgba(224,138,95,0)}
  80%{box-shadow:0 8px 24px -6px rgba(0,0,0,.7),0 0 0 12px rgba(224,138,95,.32)}
}
.is-unmuted .hvid-sound{opacity:0;pointer-events:none;visibility:hidden}

/* A printed card, not a cut-out rectangle: warm paper mount, the caption set
   inside the frame the way a photograph is captioned, and a degree and a half
   of rotation so it reads as placed by hand rather than pasted by a template. */
.vidframe{
  background:linear-gradient(168deg,#fdfaf5,#f1e9dc);
  padding:.6rem .6rem .1rem;border-radius:7px;
  transform:rotate(-1.4deg);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,
             0 30px 60px -24px rgba(0,0,0,.75),
             0 3px 10px -4px rgba(0,0,0,.5);
  transition:transform .5s cubic-bezier(.22,.7,.3,1),box-shadow .5s ease
}
.vidframe:hover,.vidframe:focus-within{transform:rotate(0deg) translateY(-4px);
  box-shadow:0 38px 74px -26px rgba(0,0,0,.8),0 4px 12px -4px rgba(0,0,0,.5)}
.vidshell{position:relative;border-radius:4px;overflow:hidden;background:#17140f;
  aspect-ratio:9/16}
.vidshell video{width:100%;height:100%;display:block;object-fit:cover;background:#17140f}

/* `display:grid` / `inline-flex` below beat the browser's own
   `[hidden]{display:none}`, so the buttons stayed in the layout and kept
   swallowing clicks meant for the video. This has to come first. */
.vidplay[hidden],.vidstop[hidden],.vidsound[hidden]{display:none}

/* big brick play button — 76px, because the person tapping it is 74 */
.vidplay{
  position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:100px;
  border:0;padding:0;cursor:pointer;display:grid;place-items:center;
  background:var(--brick);color:#fff;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.7),0 0 0 0 rgba(164,72,44,.5);
  transition:transform .25s cubic-bezier(.3,1.4,.5,1),background .2s ease
}
.vidplay svg{width:34px;height:34px;fill:currentColor;margin-left:4px}
.vidplay:hover,.vidplay:focus-visible{background:#b8532f;transform:scale(1.07)}
@media(prefers-reduced-motion:no-preference){
  .vidplay{animation:vidpulse 2.8s ease-out infinite}
}
@keyframes vidpulse{
  0%,72%{box-shadow:0 10px 30px -8px rgba(0,0,0,.7),0 0 0 0 rgba(224,138,95,.55)}
  100%{box-shadow:0 10px 30px -8px rgba(0,0,0,.7),0 0 0 22px rgba(224,138,95,0)}
}
.vidshell::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,8,6,.42),rgba(10,8,6,0) 42%);
  opacity:1;transition:opacity .35s ease}
.is-playing .vidshell::after,.is-playing .vidplay{opacity:0;pointer-events:none}
.is-playing .vidplay{animation:none;transform:scale(.7)}

.vidclock{
  position:absolute;left:.55rem;top:.55rem;z-index:3;
  background:rgba(12,10,8,.7);color:#fff;font-family:var(--sans);
  font-size:.8rem;font-weight:700;letter-spacing:.04em;
  padding:.22rem .5rem;border-radius:3px;backdrop-filter:blur(4px);
  transition:opacity .3s ease;pointer-events:none
}

/* ---- controls for the autoplaying clip ----
   It starts muted, because that is the only way a browser will start it at
   all. So the sound button has to be a word, not a crossed-out speaker: the
   people using this are not fluent in icon. */
.vidsound{
  position:absolute;left:50%;bottom:.7rem;transform:translateX(-50%);z-index:4;
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:46px;padding:.5rem 1.05rem;border:0;border-radius:100px;cursor:pointer;
  background:rgba(250,247,242,.94);color:#191714;
  font-family:var(--sans);font-size:.95rem;font-weight:700;letter-spacing:.01em;
  white-space:nowrap;
  box-shadow:0 6px 20px -6px rgba(0,0,0,.6);backdrop-filter:blur(6px);
  transition:background .18s ease,transform .18s ease,opacity .3s ease
}
.vidsound svg{width:19px;height:19px;flex:none}
.vidsound:hover,.vidsound:focus-visible{background:#fff;transform:translateX(-50%) translateY(-2px)}
.is-unmuted .vidsound{opacity:0;pointer-events:none;visibility:hidden}

.vidstop{
  position:absolute;right:.55rem;top:.55rem;z-index:4;
  width:46px;height:46px;border:0;border-radius:100px;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(12,10,8,.62);color:#fff;backdrop-filter:blur(5px);
  opacity:.72;transition:opacity .25s ease,background .18s ease
}
/* always present, never hover-only: WCAG 2.2.2 wants the stop control
   available, and half this audience is on a touch screen with no hover at all */
.vidshell:hover .vidstop,.vidstop:focus-visible,.is-paused .vidstop{opacity:1}
.vidstop:hover{background:rgba(12,10,8,.85)}
.vidstop svg{width:20px;height:20px;fill:currentColor}
.vidstop .i-play{display:none}
.is-paused .vidstop .i-play{display:block}
.is-paused .vidstop .i-pause{display:none}

/* The caption used to sit on a cream mount, so it was set in ink. It is on
   the dark hero now and has to be read there instead. */
.herovid figcaption{margin:.85rem 0 0;font-family:var(--sans);line-height:1.4}
.herovid figcaption b{display:block;color:#f2ece2;font-weight:700;font-size:.95rem}
.herovid figcaption span{display:block;margin-top:.15rem;color:#a99e8e;font-size:.85rem}
.herovid .pledges{margin-top:1.35rem}
@media(max-width:900px){
  /* Vimeo's control bar is shorter on a touch screen, and the frame itself is
     only about 200px tall — the button has to clear the bar without landing
     in the middle of his face. */
  .hvid-sound{bottom:2.5rem;min-height:44px;font-size:.92rem;padding:.45rem 1rem}
  .hvid-sound svg{width:18px;height:18px}
  .herovid figcaption{margin-top:.7rem}
  .herovid .pledges{margin-top:1.2rem}
}

/* three ways in, as rows: label left, action right. Rows rather than tall
   cards because three 172px cards cost half a phone screen on their own. */
.doors{display:grid;gap:.6rem;margin-top:1.5rem}
.door{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem;align-items:center;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.15);
  border-radius:4px;padding:.72rem 1rem .72rem 1.15rem;backdrop-filter:blur(3px)
}
.door.solid{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.door h3{font-size:1.08rem;margin:0;line-height:1.25}
.door.solid h3{color:var(--ink)}
.door p{font-size:.9rem;color:#c3baab;margin:.15rem 0 0;line-height:1.4}
.door.solid p{color:var(--grey)}
.door .btn{margin:0;white-space:nowrap;min-height:48px}
@media(max-width:640px){
  /* the two secondary doors lose their sub-line: the button says the same
     thing, and three subtitles cost 120px of a 844px screen */
  .door:not(.solid) p{display:none}
  .door{padding:.75rem .85rem .75rem 1rem;gap:.75rem}
  .door h3{font-size:1.05rem}
}
@media(max-width:359px){
  .door{grid-template-columns:1fr}
  .door .btn{width:100%}
}

/* ---------- before/after slider ---------- */
.ba{position:relative;border-radius:5px;overflow:hidden;background:#ddd;
  box-shadow:var(--shadow-lg);touch-action:pan-y;user-select:none;cursor:ew-resize}
.ba img{width:100%;display:block;aspect-ratio:3/2;object-fit:cover;pointer-events:none}
.ba .after-layer{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.ba .after-layer img{position:absolute;inset:0;width:100%;height:100%}
.ba-handle{
  position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;
  transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.22);pointer-events:none
}
.ba-handle::after{
  content:"";position:absolute;top:50%;left:50%;width:46px;height:46px;
  transform:translate(-50%,-50%);background:#fff;border-radius:50%;
  box-shadow:0 3px 14px rgba(0,0,0,.35)
}
.ba-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:22px;height:22px;pointer-events:none;overflow:visible}
.ba-tag{
  position:absolute;bottom:.85rem;font-size:.72rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;background:rgba(20,18,15,.82);color:#fff;
  padding:.34rem .7rem;border-radius:2px;pointer-events:none;z-index:2
}
.ba-tag.l{left:.85rem}
.ba-tag.r{right:.85rem;background:var(--brick)}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  margin:0;cursor:ew-resize;z-index:4}

.ba-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.3rem}
.ba-tab{
  font-family:var(--sans);font-size:.9rem;font-weight:700;padding:.5rem 1rem;
  border:1px solid var(--line);background:transparent;color:var(--ink-soft);
  border-radius:3px;cursor:pointer;transition:all .15s
}
.ba-tab:hover{border-color:var(--ink)}
.ba-tab[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------- editorial split ---------- */
.split{display:grid;gap:clamp(1.8rem,4.5vw,3.6rem);align-items:start;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.split.rev>*:first-child{order:2}
/* the four steps are much shorter than the form beside them; centring stops
   the column ending halfway up with a hole under it */
.split.mid{align-items:center}
@media(max-width:900px){.split.mid{align-items:stretch}}
@media(max-width:880px){
  .split{grid-template-columns:1fr}
  .split.rev>*:first-child{order:0}
}

.portrait{position:relative;max-width:420px}
/* File gốc 876x1168 — hiển thị 420px là ~2x cho màn hình retina. */
.portrait img{border-radius:4px;box-shadow:var(--shadow-lg);width:100%;display:block}
.portrait .stamp{
  position:absolute;right:-.6rem;bottom:-.9rem;background:var(--sage);color:#fff;
  padding:.75rem 1rem;border-radius:3px;max-width:74%;box-shadow:var(--shadow)
}
.portrait .stamp b{display:block;font-size:.95rem;line-height:1.3}
.portrait .stamp span{font-size:.79rem;color:#bcd3c5;letter-spacing:.03em}

/* ---------- commitments: numbered, not iconned ---------- */
.numlist{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.numlist li{display:grid;grid-template-columns:auto 1fr;gap:1.15rem;
  padding:1.35rem 0;border-top:1px solid var(--line);align-items:start}
.numlist li:last-child{border-bottom:1px solid var(--line)}
.numlist .n{font-family:var(--serif);font-size:1.5rem;font-weight:600;color:var(--brick);
  line-height:1;min-width:2ch;font-variation-settings:"WONK" 1}
.numlist h3{font-size:1.17rem;margin-bottom:.35rem}
/* headline-only version for the home page: no description under each step,
   so the heading must not keep the margin it uses to clear one */
.numlist.lite li{padding:.95rem 0;align-items:center;gap:1rem}
.numlist.lite h3{margin-bottom:0;font-size:1.22rem}
.numlist p{margin:0;color:var(--ink-soft);font-size:1rem}

/* ---------- comparison table ---------- */
.cmp{width:100%;border-collapse:collapse;font-size:.97rem;background:var(--white);
  box-shadow:var(--shadow);border-radius:4px;overflow:hidden}
.cmp th,.cmp td{padding:.85rem .95rem;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:top}
.cmp thead th{background:var(--ink);color:#fff;font-family:var(--sans);font-size:.83rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cmp thead th:last-child{background:var(--brick)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp td:first-child{font-weight:600;color:var(--ink)}
.cmp .hi{background:#fdf4f0;font-weight:700}
/* On a phone the widest column ("Sell to us") sits off-screen. A scrollbar
   alone doesn't tell a 70-year-old to swipe, so say it and fade the edge. */
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative}
.cmp-hint{display:none}
@media(max-width:760px){
  .cmp-hint{display:block;font-family:var(--sans);font-size:.92rem;font-weight:600;
    color:var(--brick);margin:0 0 .6rem}
  .cmp-scroll{
    background:
      linear-gradient(to right,var(--paper-2) 30%,rgba(243,237,227,0)) left/28px 100% no-repeat,
      linear-gradient(to left,var(--paper-2) 30%,rgba(243,237,227,0)) right/28px 100% no-repeat;
    background-attachment:local,local}
}

/* the one line that answers "wait, is he going to list my house?" */
.hero-plain{font-family:var(--serif);font-size:clamp(1.1rem,2.1vw,1.32rem);font-weight:600;
  color:#f6efe4;margin:-.35rem 0 0;padding-left:1rem;border-left:3px solid #d99570;
  font-variation-settings:"WONK" 1;max-width:44ch}

/* "you might be reading this because —" : sentences, not market segments */
.because{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.8rem}
.because li{position:relative;padding-left:1.45rem;color:#ded5c7;font-size:1.02rem;
  line-height:1.5}
.because li::before{content:"—";position:absolute;left:0;color:#d99570}

/* ---------- houses bought direct: four squares, four neighbourhoods ---------- */
.bought{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(.9rem,2.2vw,1.7rem);margin-top:clamp(2rem,4vw,2.9rem)}
.bought figure{margin:0}
.bought img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;display:block;
  box-shadow:var(--shadow)}
.bought figcaption{margin-top:.9rem}
.bought b{display:block;font-family:var(--serif);font-weight:600;font-size:1.12rem;
  line-height:1.2;font-variation-settings:"WONK" 1}
.bought span{display:block;margin-top:.2rem;font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--grey)}
.sec-ink .bought b{color:#fff}
.sec-ink .bought span{color:#9c9384}
.bought-note{margin:clamp(2rem,4vw,2.8rem) 0 0;max-width:52ch;
  padding-top:1.5rem;border-top:1px solid #3a332b;color:#c1b8aa}
@media(max-width:880px){.bought{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.bought{grid-template-columns:1fr;max-width:330px}}

/* ---------- proof: the award slide and three sold signs ---------- */
.award{margin:0}
.award img{width:100%;border-radius:4px;box-shadow:var(--shadow-lg);display:block}
.award figcaption{margin-top:.85rem;font-size:.88rem;color:var(--grey);max-width:38ch}
.soldrow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.7rem,1.8vw,1.2rem)}
.soldrow img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;display:block;
  box-shadow:var(--shadow)}
@media(max-width:860px){.soldrow{grid-template-columns:repeat(2,1fr)}}

/* the awards-gala clip: vertical, phone-shot, sits beside the record copy */
.galavid{margin:0;max-width:300px}
/* height:auto is load-bearing — the height="1280" attribute otherwise wins over
   aspect-ratio and the clip renders 1280px tall */
.galavid video{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:5px;
  background:#000;box-shadow:var(--shadow-lg);display:block}
.galavid figcaption{margin-top:.9rem;font-size:.9rem;line-height:1.5;color:var(--grey);
  max-width:34ch}
@media(max-width:860px){.galavid{max-width:290px;margin-top:2rem}}

/* ---------- pull quote ---------- */
.pull{
  border-left:4px solid var(--brick);padding:.3rem 0 .3rem 1.5rem;margin:2.2rem 0;
  font-family:var(--serif);font-size:clamp(1.24rem,2.6vw,1.66rem);line-height:1.35;
  font-variation-settings:"WONK" 1;color:var(--ink)
}
.pull cite{display:block;margin-top:.7rem;font-family:var(--sans);font-size:.9rem;
  font-style:normal;font-weight:600;color:var(--grey);letter-spacing:.02em}

/* ============================================================
   BUILT FOR A 70-YEAR-OLD HOLDING A PHONE
   Three rules behind everything below:
     1. Anything that matters is big enough to read at arm's length
        without glasses. 1.1rem is the floor for real content.
     2. Detail lives behind a tap, not on the screen. `.more` keeps
        the words in the HTML — Google indexes them — while the page
        stays short for the person actually reading it.
     3. Nothing to tap is under 48px.
   ============================================================ */

/* one big line that carries the point of a section */
.big{font-family:var(--serif);font-weight:600;line-height:1.22;
  font-size:clamp(1.5rem,4.8vw,2.1rem);letter-spacing:-.015em;
  font-variation-settings:"WONK" 1;margin:0 0 1.1rem;max-width:23ch;color:var(--ink)}
.sec-ink .big{color:#f6efe4}
.big + .big{margin-top:-.3rem}

/* three or four short facts, ticked */
.keys{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.95rem}
/* the tick is absolutely positioned, NOT a grid column: with `display:grid` on
   the <li>, every inline <strong> and every text run becomes its own grid item
   and the sentence breaks apart. */
.keys li{position:relative;padding-left:2.5rem;
  font-size:1.13rem;line-height:1.45;font-weight:500;color:var(--ink)}
.keys li::before{content:"✓";position:absolute;left:0;top:.1rem;
  display:grid;place-items:center;width:1.65rem;height:1.65rem;
  border-radius:100px;background:var(--brick);color:#fff;font-size:.88rem;font-weight:700;
  line-height:1}
.keys strong{font-weight:700}
.sec-ink .keys li{color:#ece5da}
.sec-ink .keys li::before{background:#d99570;color:#191714}

/* the home page's two tick columns.
   .tick7 rows are one line each and sit tighter than a normal .keys list —
   seven of them have to read as one block, not seven separate promises. The
   rule between the columns only exists above the breakpoint; once they stack
   there is nothing left to divide. */
.tick7{gap:.72rem;margin-top:1.4rem}
.tick7 li{font-size:1.08rem;font-weight:600;padding-left:2.3rem}
.tick7 li::before{width:1.5rem;height:1.5rem;font-size:.82rem;top:.06rem}
@media(min-width:881px){
  .tickcols>div:last-child{border-left:1px solid var(--line);
    padding-left:clamp(1.8rem,3.5vw,3.4rem)}
}

/* the town map — a real Google map, lazy-loaded, town name on the tiles.
   The card chrome matches .portrait/.formcard so the embed doesn't read as
   a foreign object dropped into the page. */
.mapcard{margin:1.8rem 0 0;background:var(--white);border:1px solid var(--line);
  border-radius:5px;overflow:hidden;box-shadow:var(--shadow)}
.mapcard iframe{display:block;width:100%;height:clamp(240px,36vw,320px);border:0}
.mapcard figcaption{font-size:1rem;color:var(--grey);line-height:1.5;
  padding:.65rem .95rem;border-top:1px solid var(--line)}

/* hub page: town cards grouped by corridor */
.hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.7rem}
.hub{display:block;background:var(--white);border:1px solid var(--line);border-radius:4px;
  padding:.85rem 1rem;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);
  transition:transform .15s ease,box-shadow .15s ease}
.hub:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);color:var(--ink)}
.hub b{display:block;font-family:var(--serif);font-size:1.12rem;font-weight:600;line-height:1.2}
.hub span{font-family:var(--sans);font-size:.85rem;color:var(--grey);letter-spacing:.02em}

/* footer: the 23 keyword anchors get their own full-width band above the
   legal line — one column of 23 would be a tower; three balanced columns
   read as an index, which is what the block is. */
.ftowns{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.09)}
.ftowns .fh a{color:inherit;text-decoration:none}
.ftowns .fh a:hover{color:#f2ece2}
.ftowns ul{list-style:none;margin:.9rem 0 0;padding:0;columns:3;column-gap:2.2rem}
.ftowns li{break-inside:avoid;margin:0 0 .6rem}
.ftowns a{color:#b6ac9c;text-decoration:none;font-size:16px;line-height:1.5}
.ftowns a:hover{color:#f2ece2}
@media(max-width:880px){.ftowns ul{columns:2}}
@media(max-width:560px){.ftowns ul{columns:1}}

/* town pages: the photo lives in the hero on phones and in the second
   section on desktop. Same URL both places, so the browser fetches it once.
   Square-cropped on phones so the form stays within reach. */
.town-mobile-photo{display:none}
@media(max-width:880px){
  .town-mobile-photo{display:block;margin:1.6rem 0 .5rem}
  /* the hero stamp on phones: name + role only, tucked inside the photo
     corner. The .portrait floor bumps stamps to 17px for reading; this one is
     a photo credit, not reading text, so it stays label-sized. Doubled class
     beats the floor rule that sits later in the file. */
  .portrait.town-mobile-photo .stamp{right:10px;bottom:10px;padding:.45rem .75rem;max-width:70%}
  .portrait.town-mobile-photo .stamp b{font-size:16px;line-height:1.25}
  .portrait.town-mobile-photo .stamp span{font-size:14px;letter-spacing:.04em}
  .town-mobile-photo img{aspect-ratio:1/1;object-fit:cover;object-position:50% 30%}
  .town-desk-photo{display:none}
}

/* the price/number callout */
.shout{background:var(--brick);color:#fff;border-radius:5px;padding:1.4rem 1.5rem;
  margin:1.6rem 0 0;font-family:var(--serif);font-weight:600;line-height:1.25;
  font-size:clamp(1.28rem,3.6vw,1.6rem);font-variation-settings:"WONK" 1}
.shout span{display:block;font-family:var(--sans);font-size:.95rem;font-weight:500;
  line-height:1.5;margin-top:.6rem;color:#f6ded4}
/* every other .shout on the site is the last thing in its box, so it never
   needed a bottom margin. The About story puts a paragraph after one, and
   without this the paragraph starts 18px inside the orange panel. */
.shout:not(:last-child){margin-bottom:1.8rem}

/* "read the detail" — words stay in the HTML, off the screen */
.more{margin:1.5rem 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.more>summary{cursor:pointer;list-style:none;padding:1rem 2.2rem 1rem 0;position:relative;
  font-family:var(--sans);font-weight:600;font-size:1.03rem;color:var(--brick-dk);
  min-height:48px;display:flex;align-items:center}
.more>summary::-webkit-details-marker{display:none}
.more>summary::after{content:"+";position:absolute;right:.25rem;top:50%;transform:translateY(-50%);
  font-size:1.6rem;font-weight:400;color:var(--brick);line-height:1}
.more[open]>summary::after{content:"–"}
.more>div{padding:0 0 1.4rem;color:var(--ink-soft);max-width:66ch}
.more>div>*:last-child{margin-bottom:0}
.more + .more{margin-top:-1px}
.sec-ink .more{border-color:#413a31}
.sec-ink .more>summary{color:#e0a184}
.sec-ink .more>div{color:#c9c0b2}



/* ---------- situation cards ---------- */
.sits{display:grid;gap:1rem;margin-top:2rem;grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.sits{grid-template-columns:1fr}}
.sit{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:4px;padding:1.35rem 1.4rem;text-decoration:none;color:inherit;
  box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease}
.sit:hover,.sit:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.sit h3{font-size:1.12rem;margin-bottom:.4rem;color:var(--ink)}
.sit p{font-size:.94rem;color:var(--ink-soft);margin:0 0 1rem;flex:1;line-height:1.5}
.sit .go{font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--brick)}
.sit:hover .go{text-decoration:underline}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:0;padding:0;list-style:none}
/* 16px, not .93rem. At the old size these rendered 14.9px on a desktop — under
   the floor the rest of the site holds to for readers in their seventies. */
.chips li{background:var(--white);border:1px solid var(--line);border-radius:100px;
  padding:.48rem 1rem;font-size:1rem;color:var(--ink-soft)}
.sec-ink .chips li{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#ded5c7}

/* ---------- forms ---------- */
.formcard{background:var(--white);border:1px solid var(--line);border-radius:5px;
  padding:clamp(1.4rem,3vw,2.1rem);box-shadow:var(--shadow-lg)}
.field{margin-bottom:1.05rem}
.field label{display:block;font-weight:700;font-size:.97rem;margin-bottom:.35rem}
.field .hint{font-size:.85rem;color:var(--grey);margin:.25rem 0 0}
.field input[type=text],.field input[type=tel],.field input[type=email],.field textarea{
  width:100%;font-family:var(--sans);font-size:1.06rem;padding:.82rem .9rem;
  border:2px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink)
}
.field input:focus,.field textarea:focus{border-color:var(--brick);background:#fff;outline:none}
.consent{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:center;
  font-size:.95rem;color:var(--ink-soft);line-height:1.45;margin-bottom:1.2rem;
  min-height:46px;cursor:pointer}
/* 26px, not the browser default 13px: this is ticked by people in their
   seventies, often one-handed on a phone. The whole label is clickable too. */
.consent input{width:26px;height:26px;margin:.05rem 0 0;accent-color:var(--brick);flex:none}
.formnote{font-size:.85rem;color:var(--grey);margin-top:.95rem;line-height:1.5}

/* ---------- video ---------- */
.videobox{position:relative;border-radius:5px;overflow:hidden;background:#000;
  box-shadow:var(--shadow-lg);aspect-ratio:16/9}
.videobox video{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- vertical reel (9:16, shot on a phone on site) ---------- */
.reel-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);
  gap:clamp(1.8rem,4.5vw,3.6rem);align-items:start}
.reel{position:relative;border-radius:6px;overflow:hidden;background:#000;
  box-shadow:var(--shadow-lg);aspect-ratio:9/16}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
.reel-copy>*:first-child{margin-top:0}
.sec-ink .pull{border-left-color:#c0623f;color:#fff}
.vid-cred{font-family:var(--sans);font-size:.92rem;font-weight:600;color:#c9c0b2;
  border-top:1px solid #3a332b;padding-top:1.05rem;margin-top:1.8rem}
.vid-cred span{display:block;margin-top:.3rem;font-weight:400;font-size:.86rem;color:#9c9384}
.transcript{margin-top:1.5rem;border-top:1px solid #3a332b}
.transcript summary{padding:1.05rem 0 .2rem;cursor:pointer;list-style:none;
  font-family:var(--sans);font-weight:600;font-size:.95rem;color:#e0a184}
.transcript summary::-webkit-details-marker{display:none}
.transcript summary::after{content:" +";color:#a4795f}
.transcript[open] summary::after{content:" –"}
.transcript>div{padding:.9rem 0 .2rem;max-width:62ch}
.transcript p{color:#c1b8aa;font-size:.98rem}
@media(max-width:860px){
  .reel-split{grid-template-columns:1fr}
  .reel{max-width:330px;margin:2.2rem auto 0}
}
.videobox .ph{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.8rem;text-align:center;padding:1.5rem;
  background:rgba(20,18,15,.62);color:#fff}
.videobox .ph svg{width:56px;height:56px;opacity:.9}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  font-family:var(--serif);font-size:clamp(1.06rem,2vw,1.24rem);font-weight:600;
  padding:1.15rem 2.5rem 1.15rem 0;cursor:pointer;position:relative;list-style:none;
  font-variation-settings:"WONK" 1
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:1.5rem;font-weight:400;color:var(--brick);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 0 1.3rem;max-width:68ch;color:var(--ink-soft)}
.faq details>div p:last-child{margin-bottom:0}

/* Nineteen identical rows in one run is a wall. These headings break it into
   six short groups you can find your own question in without reading all of
   them. The rule sits on the group, not on .faq, so the first group does not
   get a double line where its own border-top meets the heading. */
.faq-group + .faq-group{margin-top:2.6rem}
.faq-h{
  font-family:var(--sans);font-size:.79rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--brick);
  display:flex;align-items:center;gap:.7rem;margin:0 0 .55rem
}
.faq-h::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#b6ac9c;padding-block:clamp(2.6rem,5vw,4rem);font-size:.94rem}
/* footer labels, not document headings — they were <h4> after a page <h2>,
   which made every page report a heading-level skip */
footer .fh{font-family:var(--sans);font-weight:700;font-size:.79rem;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 .9rem;color:#8d8375}
footer a{color:#ded5c7;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
.fgrid{display:grid;gap:2.2rem;grid-template-columns:1.5fr 1fr 1fr}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
/* ---------- social icons ----------
   `ul.socials`, not `.socials`: `.fgrid ul` sets display:grid and would win a
   plain class selector. Keep this block after the footer rules. */
ul.socials{display:flex;gap:.55rem;margin:0;padding:0;list-style:none;flex-wrap:wrap}
ul.socials a{display:grid;place-items:center;width:44px;height:44px;border-radius:100px;
  border:1px solid rgba(255,255,255,.22);color:#ded5c7;text-decoration:none;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
ul.socials a:hover,ul.socials a:focus-visible{background:rgba(255,255,255,.11);color:#fff;
  border-color:rgba(255,255,255,.45);text-decoration:none}
ul.socials svg{width:20px;height:20px;display:block}
ul.socials.light a{border-color:var(--line);color:var(--ink-soft);background:var(--paper)}
ul.socials.light a:hover,ul.socials.light a:focus-visible{background:var(--brick);color:#fff;
  border-color:var(--brick)}

.flegal{margin-top:2.4rem;padding-top:1.5rem;border-top:1px solid #332e27;
  font-size:.83rem;line-height:1.6;color:#8d8375}
.flegal strong{color:#c9c0b2}
/* the licence line: present on every page, deliberately quiet. It is a legal
   disclosure and a trust signal, not a headline. */
.flegal .lic{display:block;margin-top:.7rem;font-size:.94em;color:#7d7466}
.flegal .lic a{color:#9d9384;text-decoration:underline}
.flegal .lic a:hover{color:#ded5c7}

/* ---------- utility ---------- */
.stack>*+*{margin-top:1.15rem}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.center{text-align:center}
.cta-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.7rem}
@media(max-width:520px){.cta-row .btn{width:100%}}
.badge{display:inline-flex;align-items:center;gap:.45rem;font-size:.83rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--sage);
  background:var(--sage-lt);padding:.36rem .8rem;border-radius:100px}
.figcap{font-size:.86rem;color:var(--grey);margin-top:.7rem;line-height:1.5}

/* ---------- small screens ----------
   No hamburger. Hiding navigation behind an icon is exactly wrong for
   an audience that is often 70+. Instead: tighter type, two rows. */
@media(max-width:560px){
  .nav .wrap{gap:.55rem .95rem;min-height:0;padding-block:.7rem}
  .nav a{font-size:.88rem;padding:.25rem 0}
  .hero h1{font-size:clamp(1.95rem,8.2vw,2.6rem);line-height:1.14}
  .doors{margin-top:1.8rem}
  section{padding-block:2.6rem}
}

/* ---------- phone ----------
   Every rule here is about one number: how many screens of thumb-scrolling the
   page costs. Bigger type AND a shorter page, by cutting dead height rather
   than content. */
@media(max-width:640px){
  body{font-size:19px;line-height:1.58}
  section{padding-block:2.6rem}
  h1{font-size:2.2rem}
  h2{font-size:1.75rem}
  h3{font-size:1.24rem}
  .lede{font-size:1.2rem;line-height:1.5}
  .keys li{font-size:1.17rem}
  .btn{min-height:54px}
  .faq summary{min-height:52px}
  .stack>*+*{margin-top:1rem}
  p{margin-bottom:1em}

  /* four owner photos: 2×2, not a 2,000px column */
  .bought{grid-template-columns:1fr 1fr;gap:.75rem}
  .bought figcaption{margin-top:.55rem}
  .bought b{font-size:1rem}

  /* the portrait is a face, not a full-length shot — crop it */
  .portrait{max-width:none}
  .portrait img{max-height:56vh;object-fit:cover;object-position:50% 22%}

  /* the three hero doors stack; tighten them so they cost one screen, not two */
  .doors{gap:.7rem;margin-top:1.8rem}
  .door{padding:1.05rem 1.15rem}
  .door p{margin-bottom:.85rem}
  .door h3{font-size:1.1rem}

  .split{gap:2rem}
  .cta-row{gap:.7rem;margin-top:1.3rem}
  .numlist li{padding:1.05rem 0}
  /* room tabs were 35px — under the 44px minimum for a thumb */
  .ba-tab{min-height:46px;padding-inline:1.15rem;font-size:1rem}

  /* ---- 16px floor ----
     An audit at 390px found 37 runs of text under 16px, including the form
     labels, the nav and the line under the send button. Below 16px is where a
     75-year-old starts pinching to zoom, and a pinch on a form is a lost lead.
     Values are in px on purpose: `rem` resolves against the 16px root, not the
     19px body, so `.95rem` here would still have rendered at 15.2px. */
  .field label{font-size:19px;font-weight:700}
  .field .hint{font-size:17px}
  .formnote{font-size:16.5px;line-height:1.55}
  .small,.figcap,.cmp-hint,.sit p,.bought span,.consent span,
  .door p,.shout span,.vid-cred,.herovid figcaption,.transcript p{font-size:17px}
  .tiny,.flegal,.flegal p,footer .fgrid li,footer .fgrid a{font-size:16px;line-height:1.6}
  /* nav size is set in the two-row block above — 16px with nowrap */
  .cmp th,.cmp td{font-size:17px;padding:.8rem .85rem}
  .form-result{font-size:18px}
  .sit .go,.faq summary,.more>summary,blockquote.pull cite,figcaption{font-size:17px}
  .stack li,.numlist p,.because li{font-size:17px}
  .eyebrow,.faq-h{font-size:15px;letter-spacing:.11em}
  .ba-tag{font-size:15px}
  .bar .id{font-size:17px}
  footer .fh{font-size:15px}
  details summary{font-size:17px}
  /* these lost to more specific selectors on the first pass */
  .cmp thead th{font-size:15.5px}
  .portrait .stamp b{font-size:17px}
  .portrait .stamp span{font-size:15px}
  .galavid figcaption,.vid-cred,.vid-cred span{font-size:17px}
  .chips li{font-size:17px}
  .transcript summary{font-size:17px}
  footer .fgrid>div>p{font-size:17px}
  /* the BBB badge, in all three coats — the specific selectors above would
     otherwise keep the footer line at 14px */
  .bbb .bbb-txt b,.bbb.ft .bbb-txt b{font-size:17px}
  .bbb .bbb-txt span,.bbb.ft .bbb-txt span{font-size:16px;line-height:1.35}
}

/* ============================================================
   MOTION
   Three rules, because the audience is seventy-plus:
     1. Nothing moves that the reader has to chase. No parallax,
        no scroll-jacking, no carousels.
     2. Content is visible with JS off. The hidden-then-revealed
        state only exists under html.js, which the inline script
        in <head> sets. A failed script must never blank a page.
     3. prefers-reduced-motion switches all of it off, including
        the play-button pulse and the hero drift.
   ============================================================ */

@media(prefers-reduced-motion:no-preference){

  /* scroll reveal — 18px and 520ms. Enough to feel alive, not enough
     to make anyone wait for the words to arrive. */
  html.js [data-rise]{opacity:0;transform:translateY(18px)}
  html.js [data-rise].is-in{opacity:1;transform:none;
    transition:opacity .52s ease,transform .52s cubic-bezier(.22,.7,.3,1)}

  /* the hand-drawn underline draws itself once, on load */
  html.js .mark svg path{stroke-dasharray:340;stroke-dashoffset:340;
    animation:draw 1.05s cubic-bezier(.5,.1,.3,1) .35s forwards}
  @keyframes draw{to{stroke-dashoffset:0}}

  /* hero photograph drifts a fraction over half a minute. You do not
     notice it happening; you notice that the page is not a slab. */
  .hero-media img{animation:drift 34s ease-in-out infinite alternate}
  @keyframes drift{from{transform:scale(1) translate3d(0,0,0)}
                   to{transform:scale(1.07) translate3d(-1.2%,-1%,0)}}

  /* the ticks pop in behind their line */
  html.js .keys li[data-rise]::before{transform:scale(.4);opacity:0}
  html.js .keys li[data-rise].is-in::before{transform:scale(1);opacity:1;
    transition:transform .4s cubic-bezier(.3,1.5,.5,1) .1s,opacity .3s ease .1s}

  /* buttons lift very slightly. 1px — a hint, not a hop. */
  .btn{transition:background .18s ease,transform .18s ease,box-shadow .18s ease,
       border-color .18s ease,color .18s ease}
  .btn:hover{transform:translateY(-1px)}
  .btn:active{transform:translateY(0)}

  /* nav: a rule that grows out from the left on hover */
  .nav a{position:relative}
  .nav a::after{content:"";position:absolute;left:0;right:100%;bottom:.15rem;
    height:2px;background:var(--brick);transition:right .25s cubic-bezier(.22,.7,.3,1)}
  .nav a:hover::after{right:0}
  .nav a[aria-current=page]::after{right:0}

  /* accordions ease open instead of snapping */
  html.js .more>div,html.js .faq details>div{animation:unfold .32s ease}
  @keyframes unfold{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}

/* the tick's resting state must not depend on the motion query */
.keys li::before{transform:scale(1);opacity:1}

/* ============================================================
   CRAFT
   Six details that only make sense on this site. Each one is a
   decision about this typeface, this photograph, this control —
   not an effect dropped in from a library.
   ============================================================ */

@media(prefers-reduced-motion:no-preference){

  /* --- 1. the type settles ---------------------------------
     Fraunces is a variable face with a WONK axis (the wonky, calligraphic
     leg on the R and the y) and a SOFT axis. Headings land at WONK 0 and
     roll into WONK 1 over three quarters of a second. Almost nobody will
     consciously see it. Everybody will feel that the type is alive. */
  html.js h1,html.js .big{
    font-variation-settings:"SOFT" 0,"WONK" 0;
    transition:font-variation-settings .75s cubic-bezier(.3,.8,.3,1)
  }
  html.js h1.is-set,html.js .big.is-set{font-variation-settings:"SOFT" 8,"WONK" 1}

  /* --- 2. the four owner photographs are laid down, not pasted ---
     Alternating tilt, settling flat. Prints dropped on a kitchen table. */
  html.js .bought figure{transition:transform .55s cubic-bezier(.22,.7,.3,1)}
  html.js .bought figure[data-rise]:not(.is-in){transform:rotate(-2.5deg) scale(.96)}
  html.js .bought figure:nth-child(even)[data-rise]:not(.is-in){transform:rotate(2.5deg) scale(.96)}
  .bought figure img{transition:transform .4s cubic-bezier(.22,.7,.3,1),
                                box-shadow .4s ease}
  .bought figure:hover img{transform:translateY(-6px) rotate(-1deg) scale(1.02);
    box-shadow:var(--shadow-lg)}

  /* --- 3. a warm light follows the pointer across the dark hero ---
     Desktop only. The hero is a photograph in a dark room; this is the
     torch you carry across it. */
  @media(hover:hover) and (min-width:901px){
    .hero-media::before{
      content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
      background:radial-gradient(420px circle at var(--mx,70%) var(--my,40%),
        rgba(224,138,95,.16),rgba(224,138,95,0) 70%);
      opacity:0;transition:opacity .6s ease
    }
    .hero:hover .hero-media::before{opacity:1}
  }

  /* --- 4. the room tabs get a sliding marker instead of a border --- */
  .ba-ink{position:absolute;bottom:0;height:2px;background:var(--brick);
    border-radius:2px;transition:transform .34s cubic-bezier(.3,.8,.25,1),
    width .34s cubic-bezier(.3,.8,.25,1);pointer-events:none}

  /* --- 5. the before/after handle nudges itself once ---
     A slider nobody realises is a slider is a photograph. This shows the
     thing working, once, when it first comes on screen — and then never
     again. Cheaper than a tooltip and it survives not being read. */
  .ba.is-peeking .after-layer,.ba.is-peeking .ba-handle{
    transition:clip-path 1.5s cubic-bezier(.4,0,.25,1),left 1.5s cubic-bezier(.4,0,.25,1)}

  /* --- 6. the bar tightens once you leave the top of the page ---
     Not a shrinking header, which makes people lose their place. Just a
     shadow, so the phone-number plate reads as pinned rather than floating. */
  .bar{transition:box-shadow .3s ease}
  .bar.is-stuck{box-shadow:0 8px 26px -12px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.09)}
  .bar.is-stuck .tel{box-shadow:0 4px 14px -6px rgba(164,72,44,.85)}
}

/* the tabs need position even without motion, or the marker has nothing to sit in.
   The selected-tab colours are set at line 399 — do not restate them here, an
   earlier draft did and painted dark text onto the dark selected pill. */
.ba-tabs{position:relative;padding-bottom:.45rem}

/* --- 6. the clock counts down while it plays --------------- */
.vidclock{font-variant-numeric:tabular-nums}

/* ---------- the two promises ----------
   Inside the hero, straight under the line that says we are the buyer — the
   first thing read after the headline, not a band you have to scroll to.
   Apricot numerals: on this dark photograph they carry further than white,
   and they are the only place that colour appears at size. */
.pledges{list-style:none;margin:1.25rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.9rem clamp(1.3rem,3vw,2.4rem)}
.pledges li{display:grid;gap:.1rem;min-width:0}
.pledges li+li{padding-left:clamp(1.3rem,3vw,2.4rem);
  border-left:1px solid rgba(255,255,255,.24)}
.pledges b{font-family:var(--serif);font-weight:600;line-height:1;
  font-size:clamp(1.8rem,4.2vw,2.2rem);letter-spacing:-.028em;
  font-variation-settings:"WONK" 1;color:#eda880}
.pledges span{font-family:var(--sans);font-size:clamp(.95rem,1.7vw,1.03rem);
  line-height:1.35;color:#e4dbcd;max-width:22ch}
@media(max-width:420px){
  .pledges{gap:.8rem}
  .pledges li{flex:1 1 100%}
  .pledges li+li{padding-left:0;padding-top:.8rem;border-left:0;
    border-top:1px solid rgba(255,255,255,.24)}
  .pledges span{max-width:none}
}

/* ---------- the BBB badge ----------
   Sits under the two promises in the hero, in the same glass as the doors
   across from it, so it reads as part of the same furniture rather than a
   sticker. Two parts on one row: BBB's seal, then the words. The seal
   carries the grade in its blue disc, so nothing else has to; the words
   repeat the name and the grade for anyone who reads faster than they look.
   The whole strip is the link.

   The seal is BBB's own artwork (navy pill, torch, rating disc, ™) and is
   not recoloured. It comes on white and stays on a white plate in every
   coat — BBB's rule for dark backgrounds, and the only way the black ™ is
   visible. On the cream pages the plate simply merges with the card. */
.bbb{
  display:flex;align-items:center;gap:.9rem;margin-top:1.15rem;
  padding:.6rem .95rem .6rem .6rem;border-radius:4px;text-decoration:none;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.17);
  backdrop-filter:blur(3px);color:#f2ece2;
  transition:border-color .15s,background .15s
}
.bbb:hover,.bbb:focus-visible{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.34);color:#fff}
.bbb-seal{flex:0 0 auto;display:block;background:#fff;border-radius:5px;padding:4px 6px;line-height:0}
.bbb-seal img{display:block;width:auto;height:44px}
.bbb-txt{display:grid;gap:.12rem;min-width:0;flex:1 1 auto;font-family:var(--sans);line-height:1.3}
.bbb-txt b{font-weight:700;font-size:1rem;color:inherit}
.bbb-txt span{font-size:.84rem;color:#b9af9f}
.bbb-txt u{text-decoration-thickness:1px;text-underline-offset:2px}
.bbb:hover .bbb-txt u{color:#fff}
/* the grade in words, set like the pledge numerals' colour so it ties to
   the two promises above it: two things we say, one thing somebody else says */
.bbb-r{font-style:normal;font-weight:700;color:#eda880}
@media(max-width:480px){
  .bbb{gap:.7rem;padding:.55rem .75rem .55rem .55rem}
  .bbb-seal{padding:3px 5px}
  .bbb-seal img{height:38px}
}
/* on cream: paper card, ink type, brick grade */
.bbb.ink{background:var(--white);border-color:var(--line);color:var(--ink);backdrop-filter:none;
  margin-top:1.6rem;max-width:34rem}
.bbb.ink:hover,.bbb.ink:focus-visible{background:var(--white);border-color:var(--ink);color:var(--ink)}
.bbb.ink .bbb-seal{padding:0 2px;border-radius:0}
.bbb.ink .bbb-txt span{color:var(--grey)}
.bbb.ink:hover .bbb-txt u{color:var(--brick-dk)}
.bbb.ink .bbb-r{color:var(--brick)}
/* footer: one quiet line, no card */
.bbb.ft{display:inline-flex;margin-top:1.1rem;padding:0;background:none;border:0;backdrop-filter:none;
  gap:.7rem;color:#ded5c7}
.bbb.ft:hover,.bbb.ft:focus-visible{background:none;color:#fff;text-decoration:none}
.bbb.ft .bbb-seal{padding:3px 5px;border-radius:4px}
.bbb.ft .bbb-seal img{height:32px}
.bbb.ft .bbb-txt{gap:0}
.bbb.ft .bbb-txt b{font-size:.9rem}
.bbb.ft .bbb-txt span{font-size:.8rem;color:#9d9384}

/* ---------- the towns line ----------
   Replaces the eyebrow at the top of the hero. It has to do two jobs at once:
   say Calgary loudly enough for a Calgary seller, and make plain that the list
   does not stop there — the headline no longer names a city, so this line is
   carrying the whole geography on its own.
   The separators are dimmed so the eye reads seven place names, not a wall. */
.towns{font-family:var(--sans);font-size:.74rem;font-weight:400;
  letter-spacing:.095em;text-transform:uppercase;color:#e8a582;
  margin:0 0 1.05rem;line-height:1.85;
  /* balance stops the last town being orphaned on a line of its own —
     [6,1] reads like a mistake, [4,3] reads like a decision */
  text-wrap:balance}
/* each name is its own box, so a wrap can only ever fall between towns —
   without this "HIGH RIVER" split across two lines */
.towns b{font-weight:700;white-space:nowrap}
.towns span{color:#7e6a5c;margin-inline:.45em;letter-spacing:0}
@media(max-width:640px){
  .towns{font-size:.75rem;letter-spacing:.085em;line-height:1.8;margin-bottom:.85rem}
  .towns span{margin-inline:.35em}
}


/* ── Referral rewards page ───────────────────────────────────────────────
   Four small pieces. Everything else on the page reuses what the rest of
   the site already has — pledges, numlist, faq, split. */

/* Section heading inside a form. The referral form asks for two different
   people's details in one go, and without a divider the person filling it
   in starts typing their own name into the owner's box. */
.fsec{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brick);margin:1.5rem 0 .8rem;
  padding-bottom:.45rem;border-bottom:1px solid var(--line)}
.formcard .fsec:first-of-type{margin-top:1.1rem}

/* The required consent box. Deliberately heavier than the optional one on
   the lead form — this one is the legal basis for holding a third party's
   details, so it should look like it matters, not like small print. */
.consent.req{align-items:start;background:#fbf7f1;border:1px solid #e6d9c8;
  border-radius:4px;padding:.9rem 1rem;color:var(--ink);font-size:.92rem}
.consent.req b{font-weight:700}
.consent.req input{margin-top:.1rem}

/* Copy-the-message block. The button swaps its own label to "Copied" via
   site.js — no toast, nothing to dismiss. */
.copybox{background:var(--white);border:1px solid var(--line);border-radius:4px;
  padding:1.15rem 1.25rem;margin:1.35rem 0}
.copytext{font-family:var(--sans);font-size:.97rem;line-height:1.6;color:var(--ink);
  background:var(--paper);border-left:3px solid var(--brick);
  padding:.85rem 1rem;margin:0 0 .9rem;border-radius:0 3px 3px 0}
.copybox .btn{margin:0}

/* Tick list, and the crossed-out variant for "what we can't use". The two
   sit side by side, so they have to read as a matched pair. */
.ticks{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.7rem}
.ticks li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;
  font-size:1.02rem;line-height:1.5}
.ticks li::before{content:"";width:20px;height:20px;margin-top:.15rem;border-radius:100px;
  background:var(--brick) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
.ticks.no li::before{background:#8d8579 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/12px no-repeat}

/* The nine conditions. Numbered, because "condition 5" is a thing a person
   can point at on the phone. */
.terms-list{margin:1.4rem 0 0;padding-left:1.4rem;display:grid;gap:.95rem}
.terms-list li{line-height:1.6;padding-left:.35rem}
.terms-list li::marker{font-family:var(--serif);font-weight:600;color:var(--brick)}
.terms-list b{font-weight:700;color:var(--ink)}

/* Referral: the two route headings. Not .numlist — that list is in the
   scroll-reveal set and starts at opacity 0, which is right for a four-step
   sequence and wrong for a heading somebody may land on via #anchor. */
.wayhead{display:flex;align-items:baseline;gap:.85rem;font-family:var(--serif);
  font-size:1.32rem;font-weight:600;line-height:1.25;color:var(--ink);
  padding-bottom:.75rem;margin:0 0 1rem;border-bottom:1px solid var(--line)}
.wayhead .n{font-size:1.5rem;font-weight:600;color:var(--brick);
  font-variation-settings:"WONK" 1;flex:none}

/* The promise row was drawn for white type on the dark hero. On paper it
   needs ink. */
.pledges.ink li+li{border-left-color:var(--line)}
.pledges.ink b{color:var(--brick)}
.pledges.ink span{color:var(--ink-soft)}
@media(max-width:420px){.pledges.ink li+li{border-top-color:var(--line)}}

/* Referral hero. The copy column runs long and the photograph is square, so
   the split is weighted to the text and the photo is pinned to the top of
   its column rather than centred — centred, it floated 200px down the page
   with nothing above it. */
.refhero{align-items:start}
@media(min-width:901px){
  .refhero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
.refshot{margin:0}
.refshot img{width:100%;aspect-ratio:1;object-fit:cover;display:block;border-radius:5px;
  box-shadow:0 24px 60px -28px rgba(25,23,20,.5)}
.refshot.wide img{aspect-ratio:3/2}
.refshot figcaption{margin-top:.9rem;font-family:var(--sans)}
.refshot figcaption b{display:block;font-family:var(--serif);font-weight:600;font-size:1.08rem;
  color:var(--ink);line-height:1.3}
.refshot figcaption span{display:block;margin-top:.25rem;font-size:.9rem;color:var(--grey);
  line-height:1.5;max-width:38ch}
@media(max-width:900px){
  /* on a phone the photo belongs under the promise row, not above the
     headline — the number is what stops the scroll, not the picture */
  .refhero{display:flex;flex-direction:column;gap:0}
  .refhero .refshot{order:2;margin-top:1.9rem}
}

/* The ninth nav item. It is an offer, not a destination, so it carries the
   brick colour the other eight don't — but the same size, weight and
   spacing, because a button in the middle of a navigation bar turns the
   whole bar into a sales strip. The dot is the only ornament, and it goes
   on the narrowest phones where every pixel of width is a label. */
.nav a.nav-cta{color:var(--brick)}
.nav a.nav-cta::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:100px;background:var(--brick);margin-right:.45rem;
  vertical-align:.12em}
.nav a.nav-cta:hover{color:#8f4126;border-bottom-color:#8f4126}
.nav a.nav-cta[aria-current=page]{color:var(--brick);border-bottom-color:var(--brick)}
@media(max-width:400px){.nav a.nav-cta::before{display:none}}
/* Two windows where the extra two words are what tips the bar onto another
   row: 741–899px (tablet, one row becomes two) and below 380px (two rows
   become three). Measured, not guessed. Everywhere else the full label
   fits and stays. "Refer" on its own still says where the link goes, and a
   row of navigation costs more than two words do. */
@media(min-width:741px) and (max-width:899px){.nav a.nav-cta .nav-x{display:none}}
@media(max-width:380px){.nav a.nav-cta .nav-x{display:none}}

/* Same measurement, same trade, for the section name that replaced "Our Work"
   in the bar on 24/08/2026: below 375px "The Real Deal" costs a third row and
   "Real Deal" does not. Measured at 320/360/375/390/414/430 — 360 is the one
   that moves, and 360 is a very ordinary Android. */
@media(max-width:374px){.nav .nav-the{display:none}}

/* ---------- The Real Deal: the index of the writing ----------
   A publication, not a card grid. One nameplate, the newest piece given the
   whole width and its photograph, then rows.

   The reason is the phone. A grid of equal cards costs a screen of thumb per
   article and refuses to say which one matters, so the reader scrolls past all
   of them; a lead plus rows costs about a third of that height and answers the
   question in the layout itself. Desktop is the same structure turned
   horizontal — deliberately not a second design, because a phone-only branch
   is the thing that rots. */

/* Nameplate. The rule under it is what stops the heading reading as just
   another page <h1> — it is a masthead, and it is the one place on the site
   where the section is allowed to say its own name in full size. */
.rd-head{border-bottom:2px solid var(--ink);padding-bottom:.9rem}
.rd-mast{font-family:var(--serif);font-size:clamp(2.7rem,11vw,5.2rem);line-height:.94;
  letter-spacing:-.035em;margin:0;color:var(--ink)}
.rd-deck{font-family:var(--sans);font-weight:600;color:var(--brick);margin:.6rem 0 0;
  font-size:clamp(1rem,2.3vw,1.22rem);line-height:1.35}
.rd-intro{max-width:60ch;margin:1.4rem 0 0}
.rd-note{max-width:52ch;margin:.8rem 0 0;font-size:.95rem;color:var(--grey)}
.rd-empty{margin-top:2.2rem}

/* The lead. One <a> around the whole tile, not just the headline: on a phone
   the headline alone is a small target and the photograph is what a thumb
   actually lands on. */
.rd-lead{display:block;margin-top:2.4rem;background:var(--white);
  border:1px solid var(--line);border-radius:8px;overflow:hidden;
  box-shadow:var(--shadow);text-decoration:none;color:inherit;
  transition:transform .18s ease,box-shadow .18s ease}
.rd-lead:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.rd-lead-pic{aspect-ratio:3/2;overflow:hidden;background:var(--paper-2)}
.rd-lead-pic img{width:100%;height:100%;object-fit:cover}
.rd-lead-b{padding:1.35rem 1.35rem 1.6rem}
.rd-lead-h{font-size:clamp(1.55rem,6vw,2.3rem);line-height:1.14;letter-spacing:-.02em;
  margin:.55rem 0 0;color:var(--ink)}
.rd-lead:hover .rd-lead-h{color:var(--brick-dk)}
.rd-go{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.15rem;
  font-family:var(--sans);font-weight:700;font-size:.95rem;color:var(--brick-dk)}
.rd-go::after{content:"→";font-size:1.05em;transition:transform .18s ease}
.rd-lead:hover .rd-go::after{transform:translateX(4px)}

/* Shared furniture: the cluster label above a headline, the date and length
   below it. Two rules, used by the lead and by every row, so the top of the
   page and the bottom cannot drift apart. */
.rd-tag{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--brick);margin:0}
.rd-dek{color:var(--ink-soft);font-size:1rem;line-height:1.5;margin:.7rem 0 0}
.rd-meta{font-family:var(--sans);font-size:.85rem;color:var(--grey);margin:.85rem 0 0;
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.rd-meta i{width:3px;height:3px;border-radius:50%;background:var(--line);flex:0 0 auto}

/* The rows. Headline flush left under the nameplate, thumbnail on the right —
   the words are read first and the picture confirms, which is the order that
   matters when every picture is of a similar-looking house. */
.rd-sec{margin:2.9rem 0 0}
/* border-bottom closes the list: with one row the top rule alone read as a
   list that had been cut off rather than one that had ended. */
.rd-list{list-style:none;margin:.2rem 0 0;padding:0;border-bottom:1px solid var(--line)}
.rd-row{border-top:1px solid var(--line)}
.rd-row-hit{display:grid;grid-template-columns:1fr 92px;gap:1.1rem;align-items:start;
  padding:1.3rem 0;text-decoration:none;color:inherit}
.rd-row-b{min-width:0}
.rd-row-pic{aspect-ratio:1/1;border-radius:6px;overflow:hidden;background:var(--paper-2)}
.rd-row-pic img{width:100%;height:100%;object-fit:cover}
.rd-row h3{font-size:1.2rem;line-height:1.25;margin:.4rem 0 0;color:var(--ink)}
.rd-row-hit:hover h3{color:var(--brick-dk)}
/* The standfirst is desktop-only on purpose: on a phone it is the line that
   turns a four-line row into a nine-line one, and the headline plus the
   cluster label already say what the piece is about. */
.rd-row .rd-dek{display:none}
.rd-row .rd-meta{margin-top:.55rem}

@media(min-width:760px){
  .rd-row-hit{grid-template-columns:1fr 230px;gap:2.2rem;padding:2rem 0}
  .rd-row-pic{aspect-ratio:16/11}
  .rd-row h3{font-size:1.6rem;letter-spacing:-.015em}
  .rd-row .rd-dek{display:block;max-width:58ch}
  .rd-row .rd-meta{margin-top:.9rem}
}

/* Laptop: the lead lies down. min-height is what keeps the photograph from
   collapsing to a letterbox when a headline happens to be short. */
@media(min-width:900px){
  .rd-lead{display:grid;grid-template-columns:1.06fr .94fr;align-items:stretch;
    min-height:380px}
  .rd-lead-pic{aspect-ratio:auto;height:100%}
  .rd-lead-b{padding:2.6rem 2.8rem;display:flex;flex-direction:column;justify-content:center}
  .rd-lead-h{font-size:clamp(2rem,3.1vw,2.6rem)}
  .rd-lead .rd-dek{font-size:1.08rem}
}

/* Phone: the site's 16px floor applies here too. These are the runs a
   seventy-year-old would otherwise pinch to read, and a pinch is a lost lead. */
@media(max-width:640px){
  .rd-deck{font-size:1.1rem}
  .rd-dek{font-size:17px}
  .rd-meta{font-size:16px}
  .rd-tag{font-size:14px;letter-spacing:.13em}
  .rd-go{font-size:17px}
  .rd-row h3{font-size:1.22rem}
  .rd-note{font-size:16px}
  .guide-by{font-size:17px}
}

/* Article: byline strip, hero photograph, and figures (the SVG diagrams are
   inlined rather than <img src=".svg">, so they inherit the page's colours and
   cost no extra request). */
.guide-by{font-family:var(--sans);font-weight:600;color:var(--ink-soft);margin:.55rem 0 0}
.guide-meta{font-family:var(--sans);font-size:.9rem;color:var(--grey);
  display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin:.2rem 0 0}
.guide-meta i{width:3px;height:3px;border-radius:50%;background:var(--line);flex:0 0 auto}
.guide-hero{margin:1.7rem 0 2.2rem;border-radius:6px;overflow:hidden;box-shadow:var(--shadow)}
.guide-hero img{width:100%;height:auto;display:block}
.guide-fig{margin:2.1rem 0}
.guide-fig svg{width:100%;height:auto;display:block}
/* A photograph set inside the argument rather than at the top. Same margins
   and same caption as a diagram, so a story and an explainer keep one rhythm. */
.guide-photo-pic{border-radius:6px;overflow:hidden;box-shadow:var(--shadow)}
.guide-photo-pic img{width:100%;height:auto;display:block}
.guide-fig figcaption{font-family:var(--sans);font-size:.87rem;color:var(--grey);
  margin-top:.65rem;line-height:1.45}
@media(max-width:640px){
  .guide-meta{font-size:16px}
}

/* Guide article copy. Headings carry margin:0 site-wide (each page sets its
   own rhythm inline), which is fine for a landing page and wrong for 1,700
   words — so the long-form rhythm is set here, scoped, instead of inline on
   every element the Markdown produces. */
.guide-copy h2{margin:2.6rem 0 .75rem;font-size:clamp(1.55rem,2.9vw,2.05rem)}
.guide-copy h3{margin:1.9rem 0 .55rem}
.guide-copy p{margin:0 0 1.15rem}
.guide-copy ul,.guide-copy ol{margin:0 0 1.3rem}
.guide-copy blockquote{margin:1.9rem 0;padding:.15rem 0 .15rem 1.4rem;
  border-left:3px solid var(--brick);font-family:var(--serif);font-size:1.14rem;
  line-height:1.5;color:var(--ink-soft)}
.guide-copy blockquote p{margin:0}
.guide-copy .cmp-hint{margin-top:1.4rem}

/* Matthew's photographs come off a phone, so some are portrait. A tall hero
   would push the opening paragraph below the fold on a laptop; cap the height
   and let the crop happen rather than the scroll. */
.guide-hero img{max-height:520px;object-fit:cover}

/* ---------- press: the strip under the hero, and the list on /press/ -----
   Six outlets carried the August announcement. This is where a stranger goes
   and checks that for himself — the same job the BBB seal does, held to the
   same rule: every mark is a link to that outlet's own page, never a picture
   of one.

   Deliberately quiet. The wordmarks sit in the body grey at three-quarters
   opacity and only take the brick when a cursor lands on one, so the band
   reads as a footnote under the headline rather than a second headline
   arguing with the first. They are inline SVG in currentColor, so all six
   recolour from one rule and not one of them costs a request. */
.pressband{padding-block:clamp(1rem,2.2vw,1.5rem);background:var(--paper);
  border-bottom:1px solid var(--line)}
.pressband .wrap{display:flex;align-items:center;flex-wrap:wrap;
  gap:.85rem clamp(1.1rem,2.6vw,2.2rem)}
.pressband .pressbar{flex:1 1 auto}

.pressbar{display:flex;align-items:center;flex-wrap:wrap;
  gap:.75rem clamp(1.1rem,2.6vw,2.2rem)}
.pb-lab{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--grey);margin:0;white-space:nowrap;flex:0 0 auto}
.pb-list{display:flex;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0;
  gap:.9rem clamp(1.2rem,3vw,2.6rem)}
.pb-list a{display:block;text-decoration:none;color:var(--grey);opacity:.75;
  transition:color .18s ease,opacity .18s ease}
.pb-list a:hover{color:var(--brick-dk);opacity:1}
.prm{display:block;width:auto;height:clamp(18px,2vw,25px)}
.pb-more{font-family:var(--sans);font-size:.8rem;font-weight:600;
  color:var(--brick-dk);text-decoration:none;white-space:nowrap;flex:0 0 auto}
.pb-more:hover{text-decoration:underline}

/* On /about/ the same row closes the "checking up on me" section, so it gets
   a rule above it and room to breathe: there it is part of the argument, not
   a footnote to it. */
.prseen{border-top:1px solid var(--line);margin-top:clamp(2.2rem,4.5vw,3.4rem);
  padding-top:clamp(1.9rem,4vw,3rem)}
.prseen .pressbar{margin-top:1.6rem}
.prseen .prm{height:clamp(20px,2.4vw,28px)}
.prseen .pb-list a{opacity:.8}

/* /press/: one row per outlet, hairline between. Six cards in a grid would
   look like the press kit of a company with a press office; this is one
   announcement carried six times, and a list says that honestly. */
.prlist{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--line);border-block:1px solid var(--line)}
.prcard{display:grid;grid-template-columns:160px minmax(0,1fr) auto;align-items:center;
  gap:clamp(.9rem,2.5vw,2rem);background:var(--paper);text-decoration:none;color:inherit;
  padding:1.3rem clamp(.5rem,2vw,1.4rem)}
.prcard:hover{background:var(--white)}
.prcard .prm{height:23px;color:var(--ink-soft);opacity:.85}
.prcard:hover .prm{color:var(--brick-dk);opacity:1}
.prcard-h{display:block;font-family:var(--serif);font-weight:600;font-size:1.1rem;
  line-height:1.3;color:var(--ink)}
.prcard:hover .prcard-h{color:var(--brick-dk)}
.prcard-m{display:block;font-size:.85rem;color:var(--grey);margin-top:.3rem}
.prcard-go{font-family:var(--sans);font-size:.9rem;font-weight:600;
  color:var(--brick-dk);white-space:nowrap}
@media(max-width:820px){
  .prcard{grid-template-columns:1fr;gap:.75rem;padding:1.25rem clamp(.4rem,2vw,1rem)}
  .prcard-go{display:none}
  .prcard .prm{height:21px}
}
/* On a phone the band was four rows deep — label, two rows of marks, and the
   link — which is a lot of screen to spend on a footnote directly under the
   hero. The label and the link share row one instead; display:contents lifts
   the two halves of .pressbar into the same grid, and a browser too old for it
   simply gets the stacked version back. */
@media(max-width:560px){
  .pressband{padding-block:.95rem}
  .pressband .wrap{display:grid;grid-template-columns:1fr auto;row-gap:.8rem;
    align-items:center}
  .pressband .pressbar{display:contents}
  .pressband .pb-lab{grid-column:1;grid-row:1}
  .pressband .pb-more{grid-column:2;grid-row:1;justify-self:end}
  .pressband .pb-list{grid-column:1/-1;grid-row:2;gap:.75rem 1.15rem}
}