/* Saguaro Retreat — rebuilt to SAGUARO RETREAT WEBSITE.docx (July 2026).
   Palette and type carried over from the original build so the two read as one house. */

:root{
  /* Warm light grounds from the original build (index.html body.theme-light),
     replacing the cooler #f5f5f7 grey. See DESIGN-PLAN.md for the full rhythm. */
  --bg:            #f5f2ec;
  --bg-alt:        #ffffff;
  --bg-dark:       #0a0a0a;
  --bg-darkest:    #000;
  --bg-feature:    #1a1410;
  --ink:           #1a1a1a;
  --ink-muted:     #5a5a5e;
  --ink-dark:      #f5f5f7;
  --ink-dark-mut:  #a1a1a6;
  --accent:        #c68f5e;
  --accent-bright: #e4a370;
  --line-dark:     rgba(255,255,255,.10);
  --line-light:    rgba(0,0,0,.08);
  --line-firm:     rgba(0,0,0,.16);

  --max:      1320px;
  --gutter:   clamp(20px, 4vw, 64px);
  /* Sized to the original build: hero topped out at 76px, sections well below that.
     The earlier 132px hero was overpowering the photography. */
  --title-xl: clamp(34px, 5.2vw, 72px);
  --title-lg: clamp(27px, 3.5vw, 52px);
  --radius:   18px;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg-dark); color:var(--ink-dark);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',Roboto,Arial,sans-serif;
  font-feature-settings:'cv02','cv03','cv04','ss01';
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit}

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; gap:24px;
  padding:18px var(--gutter);
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav.is-stuck{background:rgba(10,10,10,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-dark)}
.nav__brand{
  text-decoration:none; font-size:13px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; white-space:nowrap;
}
.nav__brand span{
  display:block; font-size:10px; font-weight:400; letter-spacing:.16em;
  color:var(--ink-dark-mut); margin-top:3px; text-transform:none;
}
.nav__links{display:flex; gap:26px; margin-left:auto}
.nav__links a{
  text-decoration:none; font-size:12.5px; letter-spacing:.09em;
  color:var(--ink-dark-mut); transition:color .25s var(--ease);
}
.nav__links a:hover{color:var(--ink-dark)}
.nav__cta{
  text-decoration:none; font-size:12.5px; letter-spacing:.08em;
  border:1px solid var(--line-dark); border-radius:999px; padding:9px 20px;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.nav__cta:hover{border-color:var(--accent); background:rgba(198,143,94,.12)}
@media(max-width:860px){ .nav__links{display:none} }

/* ---------- hero ----------
   Carried over from the original build: no flat scrim across the frame. A
   bottom-anchored vignette that stays fully transparent through the top ~38%
   keeps the footage visible, then ramps to solid #000 so it bleeds into the
   section below. Copy sits centred at the bottom, out of the picture. */
.hero{position:relative; height:100svh; overflow:hidden; isolation:isolate}
.hero__media{position:absolute; inset:0; z-index:-1; overflow:hidden}
.hero__video,.hero__poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.04); filter:brightness(.9) saturate(108%);
}
.hero__poster{z-index:0}
.hero__video{z-index:1}
.hero__vignette{
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg,
    rgba(0,0,0,.52) 0%,
    rgba(0,0,0,.20) 9%,
    transparent 20%,
    transparent 38%,
    rgba(0,0,0,.25) 55%,
    rgba(0,0,0,.65) 75%,
    rgba(0,0,0,.92) 92%,
    #000 100%);
}
.hero__bottom{
  position:absolute; left:0; right:0; bottom:clamp(44px,6vh,80px); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:0 var(--gutter); text-align:center;
  text-shadow:0 2px 20px rgba(0,0,0,.55);
  opacity:0; animation:fadeIn 1.2s var(--ease) .3s forwards;
}
@keyframes fadeIn{to{opacity:1}}
.hero__title{
  /* Deliberately a step below --title-xl: the hero headline is long, and at the
     full token size it crowded the frame edge to edge. */
  font-size:clamp(30px, 4.2vw, 58px); font-weight:600; letter-spacing:-.035em;
  line-height:1.02; margin:0; text-wrap:balance;
}
/* Balanced like the headline above it. The lede is two statements separated by
   a line break, and each is right on the edge of the measure — left to wrap
   naturally, the second one put "land." alone on a line of its own. Balance
   spreads each statement evenly instead of filling one line and orphaning the
   remainder. */
.hero__lede{max-width:700px; margin:0; font-size:clamp(15px,1.15vw,18px);
  line-height:1.5; color:rgba(255,255,255,.92); text-wrap:balance}
/* Price lockup. The label is tracked wide and set small so it reads as a
   caption to the figure rather than as another line of copy; the figure itself
   carries the weight. Sized a step under .hero__title so it never competes with
   the headline. Tabular numerals keep the digits from shifting if the price
   ever changes. */
.hero__price{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  margin:clamp(10px,1.4vw,18px) 0 0;
}
.hero__price-label{
  font-size:clamp(10px,.72vw,11.5px); text-transform:uppercase;
  letter-spacing:.34em; text-indent:.34em;   /* indent offsets the trailing track */
  color:rgba(255,255,255,.72);
}
.hero__price-amount{
  font-size:clamp(17px,1.8vw,24px); font-weight:400; letter-spacing:0;
  line-height:1.05; color:#fff; font-variant-numeric:tabular-nums;
}
.hero__actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:8px}
.hero__scroll{position:absolute; left:50%; bottom:16px; z-index:3; transform:translateX(-50%);
  text-decoration:none; font-size:18px; color:rgba(245,245,247,.55); animation:bob 2.4s infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
@media(max-width:640px){ .hero__title{line-height:1.05} }

.btn{display:inline-block; text-decoration:none; font-size:14px; letter-spacing:.02em;
  padding:14px 30px; border-radius:999px; transition:all .28s var(--ease); border:1px solid transparent}
.btn--solid{background:var(--ink-dark); color:#111}
.btn--solid:hover{background:#fff; transform:translateY(-1px)}
.btn--ghost{border-color:rgba(245,245,247,.4); color:var(--ink-dark)}
.btn--ghost:hover{border-color:var(--ink-dark); background:rgba(255,255,255,.08)}

/* ---------- responsive image plumbing (added with the CDN/AVIF pass) ----------
   1) <picture> must not participate in layout, or rules written for `figure img`
      and the grid/flex parents start measuring the wrapper instead of the image.
   2) The width/height attributes exist ONLY to reserve space against layout
      shift. CSS still owns the rendered box, so height must resolve to auto or
      the literal attribute height wins and the image distorts (this stretched
      the site plan and the tunnel slider). */
picture{display:contents}
img[width][height]{height:auto}
/* the one place that intentionally fills its container's height */
.split__media--single img[width][height]{height:100%}

/* ---------- chapter shell ---------- */
.chapter{position:relative; padding:clamp(80px,13vh,168px) 0; background:var(--bg-dark)}
.chapter--darkest{background:var(--bg-darkest)}
.chapter--feature{background:var(--bg-feature)}
.chapter--light{background:var(--bg); color:var(--ink)}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
.wrap--narrow{max-width:980px}

.eyebrow{font-size:11.5px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--accent); margin:0 0 20px}
.chapter--light .eyebrow{color:#9a5a2b}
.eyebrow--center{text-align:center}
.title{font-size:var(--title-lg); font-weight:600; letter-spacing:-.03em;
  line-height:.98; margin:0 0 26px; text-wrap:balance}
.title--center{text-align:center}
.lede{font-size:clamp(17px,1.25vw,21px); line-height:1.45; margin:0 0 20px;
  max-width:640px; color:var(--ink-dark); font-weight:500}
.lede--center{margin-left:auto; margin-right:auto; text-align:center}
.chapter--light .lede{color:var(--ink)}
.chapter--light .pull{color:var(--ink)}
.body{font-size:clamp(15px,1vw,17px); line-height:1.65; color:var(--ink-dark-mut);
  max-width:620px; margin:0 0 20px}
.chapter--light .body{color:var(--ink-muted)}
.body--center{margin-left:auto; margin-right:auto; text-align:center}
.pull{font-size:clamp(18px,1.5vw,24px); line-height:1.34; letter-spacing:-.015em;
  margin:32px 0 0; max-width:700px; color:var(--ink-dark); font-weight:500}
.pull--center{margin-left:auto; margin-right:auto; text-align:center}
.note{font-size:13.5px; color:var(--ink-dark-mut); text-align:center; margin:26px 0 0;
  letter-spacing:.03em}

/* ---------- stats ---------- */
.stats{list-style:none; padding:0; margin:52px 0 0; display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 22px}
/* 4 headline figures. Four across, then two — never an odd one hanging alone.
   The rest of the specification lives in .feat below. */
@media (max-width:560px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stats li{font-size:12px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-dark-mut); padding-top:16px; border-top:1px solid var(--line-dark)}
.stats li span{display:block; font-size:clamp(26px,2.6vw,38px); font-weight:600;
  letter-spacing:-.025em; color:var(--ink-dark); margin-bottom:6px; text-transform:none}
.chapter--light .stats li{color:var(--ink-muted); border-top-color:var(--line-firm)}
.chapter--light .stats li span{color:var(--ink)}

/* ---------- specification columns ----------
   Each of the property's headline figures heads a column, with what belongs to
   it listed beneath a hairline. Three across on desktop, stacked on a phone. */
.spec{margin:clamp(44px,6vw,64px) 0 0; display:grid; gap:36px 56px}
@media(min-width:820px){ .spec{grid-template-columns:repeat(3,1fr)} }
.spec__h{margin:0; font-size:clamp(20px,2.1vw,25px); font-weight:600; letter-spacing:-.02em;
  color:var(--ink); line-height:1.2}
.spec__h em{font-style:normal; font-size:.62em; font-weight:500; letter-spacing:.02em;
  color:var(--ink-muted); display:inline-block; margin-left:.35em}
.spec__rule{margin:16px 0 18px; border:0; border-top:1px solid var(--line-firm)}
.spec__list{list-style:none; margin:0; padding:0; display:grid; gap:13px}
.spec__list li{font-size:15px; line-height:1.45; color:var(--ink-muted)}
.chapter--dark .spec__h{color:var(--ink-dark)}
.chapter--dark .spec__h em,.chapter--dark .spec__list li{color:var(--ink-dark-mut)}
.chapter--dark .spec__rule{border-top-color:var(--line-dark)}

/* ---------- amenity groups ----------
   Sits under the figures. The stats row carries the numbers a buyer scans for;
   this carries the things that have no number and would otherwise be lost in a
   bulleted run. Two columns on desktop, stacked on a phone. */
.feat{margin:clamp(38px,5vw,52px) 0 0; display:grid; gap:32px 56px}
@media(min-width:760px){ .feat{grid-template-columns:1fr 1fr} }
.feat__title{margin:0 0 12px; font-size:11px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--accent)}
.feat__list{list-style:none; margin:0; padding:0}
.feat__list li{font-size:15px; line-height:1.5; color:var(--ink-muted);
  padding:11px 0; border-top:1px solid var(--line-light)}
.feat__list li:first-child{border-top:0; padding-top:0}
.chapter--dark .feat__list li{color:var(--ink-dark-mut); border-top-color:var(--line-dark)}

/* ---------- full-width snap gallery (carried over from the original build) ----------
   One slide per viewport, native scroll-snap so trackpad and touch work without
   JS, with buttons and a counter layered on top. */
.gallery{margin:clamp(52px,7vw,90px) 0 0; overflow:hidden}
.gallery__viewer{position:relative; width:100%; padding:0 clamp(0px,2vw,28px)}
.gallery__track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  border-radius:var(--radius); gap:0;
}
.gallery__track::-webkit-scrollbar{display:none}
.gallery__track:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.gallery__slide{flex:0 0 100%; margin:0; position:relative; scroll-snap-align:start}
.gallery__slide img,
.gallery__slide video{width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:#000}
.gallery__slide figcaption{
  position:absolute; left:clamp(18px,3vw,44px); bottom:clamp(18px,3vw,36px);
  font-size:clamp(12px,.95vw,14px); font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:#fff;
  background:rgba(0,0,0,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:9px 17px; border-radius:999px;
}
.gallery__btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:54px; height:54px; border-radius:50%; border:0;
  background:rgba(255,255,255,.92); color:#1a1a1a; font-size:27px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 6px 24px rgba(0,0,0,.28); z-index:2;
  transition:background .2s var(--ease), transform .2s var(--ease), opacity .2s var(--ease);
}
.gallery__btn:hover:not(:disabled){background:#fff; transform:translateY(-50%) scale(1.05)}
/* Disabled state dimmed via color, not opacity, to keep the render gate clean. */
.gallery__btn:disabled{background:rgba(255,255,255,.4); color:rgba(26,26,26,.35);
  box-shadow:none; cursor:not-allowed}
.gallery__btn--prev{left:clamp(14px,2.4vw,42px)}
.gallery__btn--next{right:clamp(14px,2.4vw,42px)}
.gallery__btn span{line-height:1; transform:translateY(-2px)}
.gallery__counter{
  position:absolute; right:clamp(18px,3vw,44px); top:clamp(18px,3vw,36px);
  font-size:12px; font-weight:500; letter-spacing:.15em; color:#fff;
  background:rgba(0,0,0,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:8px 14px; border-radius:999px; z-index:2;
}
@media(max-width:600px){
  .gallery__btn{width:42px; height:42px; font-size:21px}
  .gallery__slide img,
  .gallery__slide video{aspect-ratio:4/3}
  .gallery__slide figcaption{font-size:11px; padding:7px 13px}
  .gallery__counter{font-size:11px; padding:6px 12px}
}

/* ---------- media blocks ---------- */
.bleed{margin:clamp(52px,7vw,90px) 0 0; padding:0 var(--gutter)}
.bleed__main{margin:0; border-radius:var(--radius); overflow:hidden}
.bleed__main img{width:100%; aspect-ratio:16/9; object-fit:cover}
.bleed__pair{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,26px);
  margin-top:clamp(14px,2vw,26px)}
.bleed__pair figure{margin:0; border-radius:var(--radius); overflow:hidden}
.bleed__pair img{width:100%; aspect-ratio:4/3; object-fit:cover}
@media(max-width:760px){ .bleed__pair{grid-template-columns:1fr} }

.tiles{display:grid; gap:clamp(16px,2.2vw,30px); margin-top:clamp(48px,6vw,80px)}
.tiles--3{grid-template-columns:repeat(3,1fr)}
.tiles figure{margin:0}
.tiles img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius)}
.tiles figcaption{font-size:12.5px; letter-spacing:.05em; color:var(--ink-dark-mut);
  margin-top:12px}
@media(max-width:760px){ .tiles--3{grid-template-columns:1fr} }

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,96px); align-items:center}
/* Gives the photograph the larger share when it is carrying the section. */
.split--wide{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.split__media--single figure{height:100%}
.split__media--single img{aspect-ratio:5/4; height:100%; object-fit:cover}
@media(max-width:900px){
  .split--wide{grid-template-columns:1fr}
  .split__media--single img{aspect-ratio:4/3}
}
.split--reverse .split__copy{order:2}
.split--reverse .split__media{order:1}
.split__media{display:grid; gap:clamp(14px,2vw,24px)}
.split__media figure{margin:0; border-radius:var(--radius); overflow:hidden}
.split__media img{width:100%; aspect-ratio:4/3; object-fit:cover}
@media(max-width:900px){
  .split{grid-template-columns:1fr}
  .split--reverse .split__copy,.split--reverse .split__media{order:initial}
}

.mosaic{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px);
  margin-top:clamp(52px,6vw,84px)}
.mosaic figure{margin:0; border-radius:var(--radius); overflow:hidden}
.mosaic img{width:100%; height:100%; aspect-ratio:4/3; object-fit:cover}
.mosaic__wide{grid-column:span 2}
.mosaic__wide img{aspect-ratio:16/9}
.mosaic figcaption{font-size:12.5px; letter-spacing:.05em; color:var(--ink-dark-mut); margin-top:12px}
@media(max-width:820px){
  .mosaic{grid-template-columns:1fr}
  .mosaic__wide{grid-column:span 1}
}

/* ---------- bento gallery (Gather) ----------
   Pattern ported from styles.css .gather__grid / .g-tile, renamed
   .bento / .b-tile and adapted to this file's tokens. Unlike the original,
   captions stay always visible rather than fading in on hover — a hover-only
   reveal starts them below full opacity, which the no-scroll-reveal rule for
   this rebuild disallows. Only the image zoom is hover-driven. */
.bento{
  max-width:var(--max); margin:clamp(52px,7vw,90px) auto 0;
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(130px,12vw,200px); grid-auto-flow:dense;
  gap:clamp(10px,1vw,16px);
}
.b-tile{position:relative; margin:0; grid-column:span 4; grid-row:span 2;
  border-radius:var(--radius); overflow:hidden; background:#0a0a0a; isolation:isolate}
.b-tile img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--ease)}
.b-tile::after{content:""; position:absolute; inset:auto 0 0 0; height:45%;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.8) 100%);
  pointer-events:none}
.b-tile:hover img{transform:scale(1.04)}
.b-tile figcaption{position:absolute; left:20px; bottom:18px; z-index:2;
  font-size:13.5px; font-weight:500; letter-spacing:-.005em; color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.6)}
.b-tile--hero{grid-column:span 7; grid-row:span 3}
.b-tile--tall{grid-column:span 5; grid-row:span 3}
.b-tile--wide{grid-column:span 8; grid-row:span 2}
.b-tile--tall-sm{grid-column:span 4; grid-row:span 2}
@media(max-width:1000px){
  .bento{grid-template-columns:repeat(6,1fr)}
  .b-tile{grid-column:span 3; grid-row:span 2}
  .b-tile--hero,.b-tile--tall,.b-tile--wide{grid-column:span 6; grid-row:span 2}
  .b-tile--tall-sm{grid-column:span 3; grid-row:span 2}
}
@media(max-width:600px){
  .bento{
    display:flex; grid-template-columns:none; grid-auto-rows:auto; grid-auto-flow:row;
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-left:var(--gutter);
    gap:12px; padding:4px 0 8px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .bento::-webkit-scrollbar{display:none}
  .b-tile,.b-tile--hero,.b-tile--tall,.b-tile--wide,.b-tile--tall-sm{
    flex:0 0 80vw; grid-column:auto; grid-row:auto; aspect-ratio:4/5; scroll-snap-align:start}
}

/* ---------- standalone snap strip (kitchen) ----------
   Same feel as the tab tracks: horizontal scroll-snap cards, so an image-heavy
   section stays short. Reuses .tcard for the cards; 16/10 crop reads more
   cinematic for the film grabs. */
.strip{display:flex; gap:clamp(14px,1.4vw,24px); overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-padding-left:var(--gutter);
  padding:6px var(--gutter); margin-top:clamp(40px,5vw,64px);
  scrollbar-width:none; -webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{display:none}
.strip:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* Kitchen cards run about three quarters of the viewport (Mike, 2026-07-21). */
.strip .tcard{flex:0 0 clamp(320px,74vw,1180px)}
.strip .tcard img{aspect-ratio:16/10}

.factline{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin:34px 0 0}
.factline--center{text-align:center}
.chapter--light .factline{color:#9a5a2b}

/* ---------- award line ----------
   .is-todo is the visible-placeholder treatment: any claim we cannot yet
   verify renders as a dashed box so the page cannot ship with a blank in
   it. The kitchen award was filled in 2026-08-07; the style stays for the
   next unverified claim. */
/* Promoted 2026-08-13 from a line of type under the carousel to a band across
   the top of the Kitchen stage. It is the only third-party proof on the page,
   and buried at the end of a photo strip most people never reached it. The
   award NAME leads at heading scale; the awarding body and year sit under it in
   the quiet tone, which is the order a reader actually wants them in. */
.award{
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  gap:6px; margin:0 0 clamp(26px,3.4vw,44px);
  /* No horizontal padding: the band sits flush left so the award name starts on
     the same line as the kicker and the heading above it. The two hairlines
     still run the full content width, which is what makes it read as a band
     rather than as another paragraph. No tint — the rules do the work. */
  padding:clamp(20px,2.6vw,30px) 0;
  border-top:1px solid rgba(154,90,43,.22);
  border-bottom:1px solid rgba(154,90,43,.22);
  color:var(--ink);
}
.award__title{
  margin:0; font-size:clamp(21px,2.4vw,33px); font-weight:600;
  letter-spacing:-.02em; line-height:1.15; text-wrap:balance;
}
.award__meta{
  margin:0; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:#9a5a2b;
}
/* At phone width the tracking pushes the attribution 24px past the column and
   it wraps, leaving the year orphaned on its own line. Tighten it rather than
   let a one-word second line sit under the award name. */
@media(max-width:560px){
  .award__meta{font-size:10.5px; letter-spacing:.14em}
}
.award em{font-style:normal; color:var(--accent-bright)}
/* The medal. Inline SVG so it takes the accent colour and never becomes another
   request. Sized in px rather than em now that it leads the band instead of
   sitting inline in a sentence. */
.award__mark{width:clamp(28px,3.2vw,38px); height:clamp(28px,3.2vw,38px);
  margin-bottom:4px; color:var(--accent); flex:0 0 auto}
.stage--dark .award{border-color:rgba(198,143,94,.26); color:var(--ink-dark)}
.stage--dark .award__meta{color:var(--accent)}
.chapter--light .award__mark{color:#9a5a2b}
.award.is-todo{border:1px dashed var(--accent); border-radius:var(--radius);
  padding:26px 28px; background:rgba(198,143,94,.06)}
.award.is-todo{border-top-color:var(--accent); border-bottom-color:var(--accent)}
.award__flag{display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px}
.chapter--light .award{color:var(--ink)}
.chapter--light .award.is-todo{background:rgba(198,143,94,.08)}
/* Smaller award box nested inside a tour tcard (Property Tour, Kitchen tab). */
.tcard .award{margin-top:14px; text-align:left; padding:18px 20px; font-size:14.5px}
.tcard .award__flag{margin-bottom:8px}

/* Split/tiles captions read muted-ink on light grounds, matching the body copy. */
.chapter--light .tiles figcaption,
.chapter--light .split__media figcaption{color:var(--ink-muted)}

/* ---------- primary wing cards ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,36px);
  margin-top:clamp(56px,6vw,88px)}
.card{margin:0}
.card img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius);
  margin-bottom:20px}
.card h3{font-size:19px; font-weight:600; letter-spacing:-.01em; margin:0 0 10px}
.card p{font-size:14.5px; line-height:1.6; color:var(--ink-dark-mut); margin:0}
@media(max-width:900px){ .cards{grid-template-columns:1fr 1fr} }
@media(max-width:640px){ .cards{grid-template-columns:1fr} }

/* ---------- site plan (Living Spaces) ----------
   Aerial photo with clickable numbered pins layered on top. Pins are dimmed
   via color, never opacity, and never start hidden. */
.plan{margin-top:clamp(48px,6vw,76px); padding:0 var(--gutter)}
.plan__figure{
  position:relative; max-width:1100px; margin:0 auto; border-radius:var(--radius);
  overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.12);
}
.plan__figure img{width:100%; display:block}
.plan__pin{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:8px;
  border:0; background:none; padding:0; cursor:pointer; font:inherit;
  color:#fff;
}
.plan__num{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:30px; height:30px; min-width:30px; min-height:30px; border-radius:50%;
  background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.7);
  font-size:13px; font-weight:600; letter-spacing:0;
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.plan__label{
  font-size:12.5px; font-weight:500; letter-spacing:.02em; white-space:nowrap;
  background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.35);
  border-radius:999px; padding:7px 14px;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.plan__pin:hover .plan__num,
.plan__pin:focus-visible .plan__num,
.plan__pin.is-active .plan__num{
  background:var(--accent); border-color:var(--accent-bright);
}
.plan__pin:hover .plan__label,
.plan__pin:focus-visible .plan__label,
.plan__pin.is-active .plan__label{
  background:var(--accent); border-color:var(--accent-bright);
}
.plan__pin:focus-visible{outline:2px solid #fff; outline-offset:3px}
.plan__note{font-size:13px; color:var(--ink-muted); text-align:center; margin:18px 0 0; letter-spacing:.02em}
@media(max-width:860px){
  /* On small screens the aerial is too narrow to hold six labels without them
     overlapping, so the pins drop out of the overlay and become a centred
     cluster of labelled buttons below the image. Same buttons, same deep
     links; just laid out where they stay readable and tappable. */
  .plan__figure{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
    gap:8px; overflow:visible; box-shadow:none; background:none;
  }
  .plan__figure img{
    flex:0 0 100%; border-radius:var(--radius); margin:0 0 12px;
    box-shadow:0 18px 50px rgba(0,0,0,.12);
  }
  .plan__pin{position:static; transform:none}
  .plan__label{font-size:12.5px; padding:8px 15px; letter-spacing:.01em}
}

/* Unnumbered "dot" pins for the two satellite markers (guest wing, cottage):
   same family as the numbered pins, just a small marker instead of a number.
   Dimmed/highlighted via colour, never opacity, same as the numbered pins. */
.plan__dot{
  display:block; width:14px; height:14px; border-radius:50%;
  background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.7);
  box-shadow:0 4px 14px rgba(0,0,0,.35);
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.plan__pin--dot:hover .plan__dot,
.plan__pin--dot:focus-visible .plan__dot,
.plan__pin--dot.is-active .plan__dot{
  background:var(--accent); border-color:var(--accent-bright);
}

/* ---------- spec chips (tcard captions) ----------
   Small rounded pills that work on both dark and light grounds. */
.chips{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:7px}
.chips li{
  font-size:11.5px; letter-spacing:.04em; padding:6px 12px; border-radius:999px;
  border:1px solid var(--line-dark); color:var(--ink-dark-mut);
}
.chapter--light .chips li{border-color:var(--line-firm); color:var(--ink-muted)}

/* ==========================================================================
   THE STAGES (Living Spaces rebuild, 2026-07-23)
   Four stacked dark "explore" panels (Apple-explore style) on the cream
   #spaces ground. Each stage has a vertical pill menu on the left (the
   subspaces) and a large swipable photo strip on the right; clicking a pill
   swaps which strip shows, plus its caption/chips/counter. See retreat.js
   for the widget. Breakpoint stays at 860px, matching the rest of the page.
   Nothing here is hidden via opacity: hidden strips use the `hidden`
   attribute (display:none), and every disabled/dim state is colour-only.
   ========================================================================== */
/* Full-width bands. Each stage spans the viewport edge to edge and the grounds
   alternate dark / light down the page. Content is centred to --max WITHOUT a
   wrapper element: the side padding grows to (100% - --max)/2 once the viewport
   is wider than --max, and falls back to the gutter below that. Bands abut with
   no gap so the alternation reads as a crisp light/dark rhythm. */
.stages{margin-top:clamp(48px,6vw,76px)}
.stage{
  padding-block:clamp(36px,4vw,72px);
  padding-inline:max(var(--gutter), calc((100% - var(--max)) / 2));
}
.stage--dark{background:var(--bg-feature); color:var(--ink-dark)}
.stage--light{background:var(--bg); color:var(--ink)}

.stage__kicker{
  font-size:11.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); margin:0 0 12px;
}
.stage--light .stage__kicker{color:#9a5a2b}
.stage__heading{
  font-size:clamp(21px,2.1vw,32px); font-weight:600; letter-spacing:-.02em;
  line-height:1.15; margin:0 0 clamp(22px,3vw,36px); max-width:26ch; color:inherit;
}
/* The Kitchen stage carries a longer, lede-style sentence (the copy-doc line)
   rather than a short headline; let it run wider so it reads as one thought. */
#stage-kitchen .stage__heading{max-width:44ch}

/* Mobile default is a single flex column so the pills can be ordered above the
   media; desktop switches to the two-column grid below. */
.stage__body{display:flex; flex-direction:column}
@media(min-width:861px){
  .stage__body{
    display:grid; grid-template-columns:minmax(200px,236px) minmax(0,1fr);
    gap:clamp(22px,3vw,44px); align-items:start;
  }
  .stage__pills{grid-column:1; grid-row:1}
  .stage__main{grid-column:2; grid-row:1}
  /* Flip the pills to the right, image to the left, on reversed stages. */
  .stage--reverse .stage__body{grid-template-columns:minmax(0,1fr) minmax(200px,236px)}
  .stage--reverse .stage__pills{grid-column:2; grid-row:1}
  .stage--reverse .stage__main{grid-column:1; grid-row:1}
}
.stage__main{min-width:0}

.stage__pills{display:flex; flex-direction:column; gap:8px}
@media(max-width:860px){
  /* On mobile the pills move ABOVE the image and become a single sliding row
     (a tab bar), so any number of subspaces stays one tidy line instead of
     stacking. order:-1 lifts them above the media within the flex column;
     overflow-x lets them scroll, with edge pills peeking to hint the swipe. */
  .stage__pills{
    order:-1; min-width:0;
    flex-direction:row; flex-wrap:nowrap;
    gap:8px; margin:0 0 clamp(14px,3.5vw,22px);
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .stage__pills::-webkit-scrollbar{display:none}
  .stage__pills .pill{width:auto; flex:0 0 auto; white-space:nowrap; scroll-snap-align:start}
}

.pill{
  display:inline-flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:12px 16px; border-radius:999px; border:1px solid transparent;
  background:rgba(255,255,255,.08); color:var(--ink-dark);
  font:inherit; font-size:14px; font-weight:500; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.pill:hover{background:rgba(255,255,255,.14)}
.pill.is-active{background:#f5f2ec; color:#1a1a1a}
.pill:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.pill__glyph{
  width:7px; height:7px; border-radius:50%; background:var(--accent); flex:0 0 auto;
  transition:background .2s var(--ease);
}
.pill.is-active .pill__glyph{background:#9a5a2b}

/* Light-ground pills: dark ink on translucent black, and the active pill
   inverts to the dark ink fill (mirroring the dark stages, which invert to
   cream). All dim states stay colour-based. */
.stage--light .pill{background:rgba(0,0,0,.05); color:var(--ink)}
.stage--light .pill:hover{background:rgba(0,0,0,.09)}
.stage--light .pill.is-active{background:var(--ink); color:#fff}
.stage--light .pill__glyph{background:#9a5a2b}
.stage--light .pill.is-active .pill__glyph{background:var(--accent-bright)}

.stage__frame{position:relative; border-radius:14px; overflow:hidden}
.stripe[hidden]{display:none}
.stripe__track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.stripe__track::-webkit-scrollbar{display:none}
.stripe__track:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.slide{flex:0 0 100%; margin:0; scroll-snap-align:start}
.slide img,
.slide video,
.slide img[width][height]{width:100%; aspect-ratio:16/10; object-fit:cover; display:block; background:#000}

/* Video slides: a badge naming what the tour covers, so the slide does not read
   as a still photograph. pointer-events:none keeps it clear of the play button;
   it fades out once playback starts (class toggled in retreat.js). */
.slide--video{position:relative}
.slide__tour{
  position:absolute; left:16px; top:16px; z-index:2; pointer-events:none;
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 15px 9px 13px; border-radius:999px;
  background:rgba(10,10,10,.62); backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.16);
  color:#f5f5f7; font-size:12px; font-weight:500;
  letter-spacing:.10em; text-transform:uppercase; white-space:nowrap;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.slide__tourGlyph{
  width:0; height:0; flex:0 0 auto;
  border-left:8px solid var(--accent-bright);
  border-top:5px solid transparent; border-bottom:5px solid transparent;
}
.slide--video.is-playing .slide__tour{opacity:0; transform:translateY(-4px)}
@media(max-width:560px){
  .slide__tour{left:10px; top:10px; font-size:10.5px; padding:7px 12px 7px 10px; letter-spacing:.08em}
}
@media(min-width:861px){
  /* Contain each stage to roughly one screen: cap the media height against the
     viewport so the caption, arrows and chips stay in view without scrolling
     inside the band. object-fit:cover keeps the crop clean at any width. */
  .slide img,
  .slide video,
  .slide img[width][height]{aspect-ratio:auto; height:clamp(300px, 44vh, 540px)}
}

/* Grid, not flex: the controls hold one row directly under the media and the
   caption always sits on its own row beneath them. With flex-wrap, a caption
   long enough to fill the line pushed the next arrow down on its own, which
   broke the control row. Areas are used so this does not depend on the source
   order of prev / counter / caption / next. */
.stage__bar{
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  grid-template-areas:
    "prev counter . next"
    "cap  cap     cap cap";
  align-items:center; gap:12px 14px;
  margin-top:clamp(16px,2vw,22px);
}
.stage__arrow[data-prev]{grid-area:prev}
.stage__arrow[data-next]{grid-area:next}
.stage__caption{
  grid-area:cap; margin:0; font-size:14.5px; line-height:1.45;
  color:var(--ink-dark-mut); max-width:78ch;
}
/* An empty caption must not leave a gap under the controls. */
.stage__caption:empty{display:none}
.stage__counter{grid-area:counter; font-size:12px; letter-spacing:.14em; color:var(--ink-dark-mut); white-space:nowrap}
.stage__arrow{
  width:44px; height:44px; flex:0 0 auto; border-radius:50%;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06);
  color:var(--ink-dark); font-size:22px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.stage__arrow:hover:not(:disabled){background:rgba(255,255,255,.16); border-color:var(--accent)}
/* Disabled state dimmed via colour, not opacity, to keep the render gate clean. */
.stage__arrow:disabled{color:rgba(245,245,247,.3); border-color:rgba(255,255,255,.08); cursor:not-allowed}
.stage__arrow:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* Light-ground caption, counter and arrows. */
.stage--light .stage__caption{color:var(--ink-muted)}
.stage--light .stage__counter{color:var(--ink-muted)}
.stage--light .stage__arrow{border-color:rgba(0,0,0,.18); background:rgba(0,0,0,.04); color:var(--ink)}
.stage--light .stage__arrow:hover:not(:disabled){background:rgba(0,0,0,.09); border-color:var(--accent)}
.stage--light .stage__arrow:disabled{color:rgba(26,26,26,.28); border-color:rgba(0,0,0,.08)}
/* The caption already sits on its own row at every width (see .stage__bar
   above), so narrow screens only need slightly tighter spacing. */
@media(max-width:860px){
  .stage__bar{gap:10px 12px}
  .stage__caption{font-size:14px}
}

.stage .chips{margin-top:clamp(12px,1.6vw,16px)}
/* Dark stages sit inside .chapter--light, so the .chapter--light .chips li rule
   (dark border/text, meant for the cream ground) would bleed onto the dark band
   and kill contrast. Override back to light-on-dark. Light stages match the
   cream ground and keep the chapter's dark-on-light chips. */
.chapter--light .stage--dark .chips li{border-color:var(--line-dark); color:var(--ink-dark-mut)}
.chapter--light .stage--light .chips li{border-color:var(--line-firm); color:var(--ink-muted)}

/* Award (Kitchen stage). A per-ground colour pass so it reads on whichever
   ground its stage carries.

   There was a `.stage .award` layout override here setting
   `margin:clamp(12px,1.6vw,18px) 0 0` and `font-size:15px`, from when the award
   was a line of small type at the foot of the stage. Being more specific than
   `.award` it silently won once the award became a band, forcing margin-bottom
   to 0: the band's bottom hairline then sat flush on the photograph and carried
   on across the gutter as a rule with nothing beneath it. Removed 2026-08-13.
   Layout now lives in ONE place, on `.award`. */
/* The dashed placeholder still wants to be compact here — Kitchen is the
   tallest stage — and that is a state-only rule, so it stays. */
.stage .award.is-todo{padding:16px 20px}
.stage .award__flag{margin-bottom:7px}
.chapter--light .stage--dark .award{color:var(--ink-dark)}
.chapter--light .stage--dark .award.is-todo{background:rgba(198,143,94,.10); border-color:var(--accent)}
.chapter--light .stage--light .award{color:var(--ink)}
.chapter--light .stage--light .award.is-todo{background:rgba(198,143,94,.08); border-color:var(--accent)}
.stage--light .award em{color:#9a5a2b}

/* ---------- tabbed explorer (pattern carried over from the original tour) ----------
   Pill tabs above, and each panel carries its own lede plus a snap-scrolling
   track of cards, so the copy shifts with the tab. */
.tabs{margin-top:clamp(48px,6vw,76px)}
.tabs__row{display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(6px,1vw,14px);
  padding:0 var(--gutter); margin-bottom:clamp(26px,4vh,40px)}
.tab{
  display:inline-flex; align-items:center; gap:10px; padding:12px 22px;
  border-radius:999px; border:1px solid var(--line-dark);
  background:rgba(255,255,255,.04); color:rgba(255,255,255,.75);
  font:inherit; font-size:14px; font-weight:500; cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.tab:hover{color:var(--ink-dark); background:rgba(255,255,255,.09)}
.tab.is-active{background:var(--ink-dark); color:var(--bg-darkest); border-color:var(--ink-dark)}
.tab:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
/* Dimmed via color, not opacity, so the render-verification gate
   (nothing under opacity .99) stays clean. */
.tab__num{font-size:11px; letter-spacing:.1em; color:rgba(255,255,255,.5)}
.tab.is-active .tab__num{color:var(--accent)}

.tabs__panel[hidden]{display:none}
.tabs__panel{animation:fadeIn .45s var(--ease)}
.tabs__lede{max-width:700px; margin:0 auto clamp(24px,3.5vh,36px); padding:0 var(--gutter);
  text-align:center; font-size:clamp(15px,1vw,17px); line-height:1.6; color:var(--ink-dark-mut)}

.tabs__track{
  display:flex; gap:clamp(14px,1.4vw,24px); overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-padding-left:var(--gutter);
  padding:6px var(--gutter); scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.tabs__track::-webkit-scrollbar{display:none}
.tabs__track:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.tcard{flex:0 0 clamp(280px,46vw,660px); margin:0; scroll-snap-align:start}
.tcard img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); display:block}
.tcard figcaption{padding:18px 4px 0}
.tcard figcaption h3{font-size:clamp(16px,1.1vw,19px); font-weight:600; letter-spacing:-.01em;
  margin:0 0 6px; color:var(--ink-dark)}
.tcard figcaption p{font-size:14px; line-height:1.5; color:var(--ink-dark-mut); margin:0; max-width:52ch}

@media(max-width:600px){
  .tabs__row{flex-direction:column; align-items:stretch; max-width:360px;
    margin-left:auto; margin-right:auto; gap:8px}
  .tab{width:100%; justify-content:flex-start; padding:14px 18px}
}

/* Light-ground tab styling (Property Tour), ported from styles.css
   body.theme-light .compound-tab block and adapted to this file's tokens. */
.chapter--light .tab{
  background:rgba(0,0,0,.04);
  border-color:var(--line-light);
  color:var(--ink-muted);
}
.chapter--light .tab:hover{
  background:rgba(0,0,0,.08);
  color:var(--ink);
}
.chapter--light .tab.is-active{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}
.chapter--light .tab__num{color:var(--ink-muted)}
.chapter--light .tab.is-active .tab__num{color:var(--accent-bright)}
.chapter--light .tabs__lede{color:var(--ink-muted)}
.chapter--light .tcard figcaption h3{color:var(--ink)}
.chapter--light .tcard figcaption p{color:var(--ink-muted)}

/* ---------- card groups (subgroups within a tabs__panel) ----------
   Used to break the Home and Outdoor panels into labeled clusters, each with
   its own snap-scrolling track, without introducing more tabs. */
.group + .group{margin-top:clamp(28px,3.5vw,48px)}
.group__title{
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin:0 0 14px; padding:0 var(--gutter);
}
.chapter--light .group__title{color:#9a5a2b}

/* ---------- film ----------
   Movie-theater inset: the section itself stays black edge to edge, but the
   video and its overlay sit inside a centered "screen" (.film__stage) with
   dark space around it, rather than filling the whole viewport. */
.film{position:relative; background:#000;
  padding:clamp(64px,9vh,120px) var(--gutter)}
.film__stage{
  position:relative; max-width:var(--max); margin:0 auto; aspect-ratio:16/9;
  border-radius:var(--radius); overflow:hidden; background:#000;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.film__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.film.is-playing .film__video{object-fit:contain; background:#000}

.film__overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(24px,4vh,44px); padding:0 var(--gutter); text-align:center;
  background:linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.34) 45%, rgba(0,0,0,.72) 100%);
  transition:opacity .55s var(--ease), visibility .55s var(--ease);
}
.film.is-playing .film__overlay{opacity:0; visibility:hidden; pointer-events:none}
.film__copy{max-width:760px; text-shadow:0 2px 24px rgba(0,0,0,.6)}
.film__copy .title{margin-bottom:20px}
.film__copy .body{margin:0 auto; color:rgba(245,245,247,.9); max-width:640px}

.film__play{
  width:clamp(76px,8vw,104px); height:clamp(76px,8vw,104px);
  border-radius:50%; border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:background .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.film__play svg{width:38%; height:38%; fill:currentColor; margin-left:8%}
.film__play:hover{background:rgba(255,255,255,.26); border-color:#fff; transform:scale(1.06)}
.film__play:focus-visible{outline:2px solid var(--accent); outline-offset:4px}

/* Controls only appear once it is actually running. */
.film__video{pointer-events:none}
.film.is-playing .film__video{pointer-events:auto}

/* ---------- pills ---------- */
.pills{list-style:none; padding:0; margin:30px 0 0; display:flex; flex-wrap:wrap; gap:10px 12px}
.pills li{border:1px solid var(--line-dark); border-radius:999px; padding:9px 17px;
  font-size:13px; color:var(--ink-dark)}

/* ---------- inquire ---------- */
/* Copper radial from the original's light inquire treatment. */
.inquire.chapter--light{
  background:
    radial-gradient(ellipse at 12% 0%, rgba(198,143,94,.10), transparent 55%),
    var(--bg);
}
.inquire .title{margin-bottom:18px}
.form{max-width:620px; margin:44px auto 0; display:grid; gap:18px}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.form label{display:grid; gap:8px; font-size:12px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-muted)}
.form input,.form textarea{
  font:inherit; font-size:16px; text-transform:none; letter-spacing:0; color:var(--ink);
  background:#fff; border:1px solid var(--line-light); border-radius:10px; padding:13px 15px;
}
.form input:focus,.form textarea:focus{outline:2px solid var(--accent); outline-offset:1px}
.form .btn--solid{background:var(--ink); color:var(--bg); justify-self:start; cursor:pointer}
.form .btn--solid:hover{background:#000}
.form__trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
/* Submit feedback. Sits under the button and says only what is true: sending,
   sent, or failed. It never reads "thank you" unless the lead was stored. */
.form__status{margin:0; font-size:15px; line-height:1.5; max-width:52ch; color:var(--ink-muted)}
.form__status.is-ok{color:#3c6b4c}
.form__status.is-error{color:#9a3524}
@media(max-width:620px){ .form__row{grid-template-columns:1fr} }

/* ---------- footer ---------- */
/* ---------- inline gallery (inside a split column, e.g. the tunnel) ----------
   The full-bleed gallery assumes it owns the page width. Inside a column it
   needs no leading margin, no side padding, and smaller controls. */
.gallery--inline{margin:0; overflow:visible}
.gallery--inline .gallery__viewer{padding:0}
.gallery--inline .gallery__slide img{aspect-ratio:4/3}
.gallery--inline .gallery__btn{width:40px; height:40px; font-size:20px}
.gallery--inline .gallery__btn--prev{left:12px}
.gallery--inline .gallery__btn--next{right:12px}
.gallery--inline .gallery__slide figcaption{
  left:14px; bottom:14px; font-size:11px; padding:7px 13px;
}
.gallery--inline .gallery__counter{top:14px; right:14px}
@media(max-width:860px){
  .gallery--inline .gallery__slide img{aspect-ratio:16/10}
}

.foot{background:var(--bg-darkest); padding:clamp(44px,6vw,64px) var(--gutter); text-align:center}
.foot p{margin:0 0 10px; font-size:12.5px; letter-spacing:.1em; color:var(--ink-dark-mut)}
/* Selector must out-rank `.foot p` above (0,1,1), or its `margin:0 0 10px`
   beats `margin:0 auto` and the capped-width fine print hangs off to the left
   instead of centring under the address. */
.foot p.foot__fine{
  font-size:11px; letter-spacing:.03em; line-height:1.65; color:#5a5a60;
  max-width:62ch; margin:18px auto 0;
}
.foot p:last-child{margin-bottom:0}

/* Social profiles. Sized to a 44px target because this sits at the very bottom
   of a long page on a phone, where a 24px icon is a miss as often as a hit. The
   ring is what makes a lone icon read as a deliberate element rather than a
   stray glyph, and it keeps working when a second and third profile arrive. */
.foot__social{
  list-style:none; margin:22px 0 0; padding:0;
  display:flex; justify-content:center; gap:14px;
}
.foot__social a{
  display:grid; place-items:center; width:44px; height:44px;
  color:var(--ink-dark-mut); border:1px solid var(--line-dark); border-radius:50%;
  transition:color .22s ease, border-color .22s ease;
}
.foot__social a:hover,
.foot__social a:focus-visible{color:var(--accent); border-color:var(--accent)}
.foot__social svg{width:19px; height:19px; display:block}

/* ---------- motion ---------- */
/* No scroll-reveal: see the note in retreat.js. Content is never hidden. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__scroll{animation:none}
}


/* ================= MOBILE FIXES (2026-08-08) ================= */

/* The CLS guard `img[width][height]{height:auto}` above outranks
   `.hero__poster{height:100%}` (0,2,1 beats 0,1,0), so on phones the hero image
   collapsed to its intrinsic height: a band across the top with the headline
   stranded on black underneath. Same shape of fix as .split__media--single. */
.hero__poster[width][height]{height:100%}

@media(max-width:900px){
  /* Phones get a still of the house from above rather than the tunnel: there is
     no video on mobile (retreat.js only assigns it on wider viewports), and the
     tunnel reads as a dark hole without the push-in that gives it meaning.
     56% keeps the house centred once cover crops the sides. */
  .hero__poster{object-position:56% 50%}
}

@media(max-width:760px){
  /* aspect-ratio:16/9 leaves roughly 200px of stage on a phone, and the overlay
     has to hold an eyebrow, a title, a paragraph and a 76px play button. The
     content simply overflowed the video. Give the poster state a portrait stage,
     then hand it straight back to 16/9 on play so the film itself is never
     letterboxed into a tall box. */
  .film{padding:clamp(40px,6vh,72px) var(--gutter)}
  .film__stage{aspect-ratio:3/4}
  .film.is-playing .film__stage{aspect-ratio:16/9}
  .film__overlay{gap:20px; padding:28px 20px}
  .film__copy .title{margin-bottom:12px}
  .film__copy .body{font-size:15px; line-height:1.55}
  .film__play{width:66px; height:66px}
  /* The poster frame has bright areas (a lit doorway) exactly where the body
     copy lands, and the desktop scrim thins to .34 through the middle. The text
     is much larger relative to the frame on a phone, so it needs more behind it. */
  .film__overlay{background:linear-gradient(180deg,
    rgba(0,0,0,.72) 0%, rgba(0,0,0,.58) 45%, rgba(0,0,0,.80) 100%)}
}

/* Spec entries that carry a descriptor: the room name leads, the description sits
   under it in the quieter tone. Replaces an em dash separator, which wrapped badly
   on the longer lines and read as prose inside what is a specification. */
.spec__name{display:block; font-weight:600; color:var(--ink)}
.spec__note{display:block; margin-top:2px; font-size:13.5px; line-height:1.4; color:var(--ink-muted)}
.chapter--dark .spec__name{color:var(--ink-dark)}
.chapter--dark .spec__note{color:var(--ink-dark-mut)}

/* ---------- the surroundings: the map (#nearby) ----------
   A real map of the valley, to scale, with the house at the middle. The SVG
   carries the basemap and the driving routes and its viewBox is what moves;
   pins and place names are positioned HTML over the top, so type stays in CSS
   pixels and is still readable at phone width. See nearby.js. */
.nearby__head{max-width:820px; margin:0 0 clamp(40px,5vw,64px)}
.nearby__grid{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(36px,5vw,72px); align-items:start;
}
/* The list runs longer than the map is tall, so the map rides along rather than
   stranding itself at the top of a column you have scrolled past. Sticky only
   where there are two columns; stacked, it would cover the list. */
@media(min-width:901px){
  .nearby__mapcol{position:sticky; top:96px; align-self:start}
}
.nearby.is-listonly .nearby__grid{grid-template-columns:1fr; max-width:760px}

/* --- the frame --- */
.nmap{
  position:relative; width:100%; aspect-ratio:5/4; overflow:hidden;
  border:1px solid var(--line-dark); border-radius:var(--radius);
  background:
    radial-gradient(120% 100% at 50% 42%, #14110d 0%, #0b0a09 62%, #070706 100%);
}
.nmap__base{position:absolute; inset:0; width:100%; height:100%}

/* Terrain. Two families only: high ground and protected desert. Enough to read
   the valley you are in without pretending to be a survey. */
.nmap__area{stroke-width:1; vector-effect:non-scaling-stroke}
.nmap__area--mtn{fill:#241d15; stroke:rgba(198,143,94,.16)}
.nmap__area--park{fill:#17211a; stroke:rgba(150,190,150,.13)}

.nmap__road{fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round;
  stroke-linejoin:round}
.nmap__road--motorway{stroke:rgba(255,255,255,.24); stroke-width:2.4}
.nmap__road--trunk{stroke:rgba(255,255,255,.16); stroke-width:1.7}
.nmap__road--arterial{stroke:rgba(255,255,255,.09); stroke-width:1}

/* The route draws itself in when its category is chosen. pathLength is set to 1
   in JS so one dash rule works for a two-mile run and a thirty-mile one. */
.nmap__route{
  fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linecap:round;
  stroke-linejoin:round; vector-effect:non-scaling-stroke;
  stroke-dasharray:1; stroke-dashoffset:1; opacity:0;
  /* The draw has to finish before the map stops moving, not after. The viewBox
     tween in nearby.js is 620ms; at .9s the lines were still growing for a
     beat once everything else had settled, which reads as a route that stops
     short of its pin rather than as an animation still running. */
  transition:opacity .35s var(--ease), stroke-dashoffset .55s var(--ease),
             stroke .25s var(--ease);
}
.nmap__route.is-live{opacity:1; stroke-dashoffset:0}
.nmap__route.is-on{stroke:var(--accent-bright); stroke-width:3.4}
.nmap__route.is-hidden{opacity:0}

/* The tunnel itself. It is 642 feet long, so at anything wider than a few miles
   it is sub-pixel — the whole layer only earns its place close in. */
.nmap__tunnel{
  fill:none; stroke:var(--accent-bright); stroke-width:5; stroke-linecap:round;
  vector-effect:non-scaling-stroke; opacity:0;
  transition:opacity .35s var(--ease);
}
.nmap.is-close .nmap__tunnel{opacity:.9}

/* The two marks that explain why every route leaves by the same road. */
.nmark{
  position:absolute; display:flex; align-items:center; gap:5px; white-space:nowrap;
  pointer-events:none; opacity:0; transition:opacity .35s var(--ease);
}
/* The gate and the tunnel are 600 feet apart, so on the close view their labels
   land on each other and one of them loses the collision pass. The glyph stays
   on its own point and the words run in opposite directions, which separates
   them without moving either mark off the spot it marks. */
.nmark--tunnel{flex-direction:row-reverse; transform:translate(calc(-100% + 6px),-50%)}
.nmark--gate{transform:translate(-5px,-50%)}
.nmark.is-on{opacity:1}
.nmark.is-hidden{opacity:0}
.nmark__glyph{width:12px; height:10px; flex:none; fill:none;
  stroke:var(--accent-bright); stroke-width:1.6}
.nmark--gate .nmark__glyph{fill:var(--accent-bright); stroke:none}
.nmark__text{
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-bright); text-shadow:0 1px 6px rgba(0,0,0,.95);
}
.nmark--gate .nmark__text{color:rgba(255,255,255,.5)}
.nmark--gate .nmark__glyph{width:9px; height:8px}

.nmap__layer{position:absolute; inset:0; pointer-events:none}
.nmap__layer .npin{pointer-events:auto}

/* --- place names --- */
.nplace{
  position:absolute; transform:translate(-50%,-50%); white-space:nowrap;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.30);
  opacity:0; transition:opacity .35s var(--ease);
}
.nplace.is-on{opacity:1}
.nplace.is-hidden{opacity:0}
.nplace--range{color:rgba(198,143,94,.42); letter-spacing:.2em; font-size:10px}
.nplace--city{color:rgba(255,255,255,.42); font-size:12px; letter-spacing:.2em}
.nplace--road{color:rgba(255,255,255,.36); font-size:9.5px; letter-spacing:.1em;
  background:rgba(8,8,8,.66); padding:2px 6px; border-radius:3px}
.nplace--road-minor{color:rgba(255,255,255,.30); text-transform:none; letter-spacing:.04em}

/* --- the house --- */
.nmap__home{
  position:absolute; transform:translate(-50%,-50%); z-index:5;
  display:grid; justify-items:center; gap:6px; pointer-events:none;
}
.nmap__star{
  width:26px; height:26px; display:block;
  fill:var(--accent-bright);
  filter:drop-shadow(0 0 10px rgba(228,163,112,.75)) drop-shadow(0 0 22px rgba(228,163,112,.35));
}
.nmap__homelabel{
  font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-bright); white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}

.nmap__hint{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  margin:0; padding:7px 15px; border-radius:999px;
  background:rgba(10,10,10,.72); border:1px solid var(--line-dark);
  backdrop-filter:blur(6px);
  font-size:11.5px; letter-spacing:.06em; color:var(--ink-dark-mut); white-space:nowrap;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.nmap__hint.is-on{opacity:1; visibility:visible}

/* --- pins --- */
.npin{
  position:absolute; transform:translate(-50%,-50%);
  appearance:none; background:none; border:0; padding:0; margin:0;
  cursor:pointer; z-index:2; line-height:1;
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.npin.is-live{opacity:1; visibility:visible}
.npin__dot{
  display:block; width:11px; height:11px; border-radius:50%;
  background:var(--accent); border:1.5px solid #0b0a09;
  box-shadow:0 0 0 1px rgba(228,163,112,.35);
  transition:background .25s var(--ease), transform .25s var(--ease),
             box-shadow .25s var(--ease);
}
.npin:hover .npin__dot,.npin:focus-visible .npin__dot{
  background:var(--accent-bright); transform:scale(1.25);
}
.npin.is-on{z-index:4}
.npin.is-on .npin__dot{
  background:var(--accent-bright); transform:scale(1.4);
  box-shadow:0 0 0 6px rgba(198,143,94,.22), 0 0 16px rgba(228,163,112,.55);
}
.npin:focus{outline:none}
.npin:focus-visible{outline:2px solid var(--accent-bright); outline-offset:8px; border-radius:50%}

/* An off-frame place: a chevron on the edge pointing the way, rather than
   zooming the whole valley out to nothing to fit Phoenix in. */
.npin.is-edge .npin__dot{
  width:0; height:0; border-radius:0; background:none; box-shadow:none;
  border:7px solid transparent; border-left:11px solid var(--accent-bright);
  transform:rotate(var(--a,0deg)) translateX(2px);
}
.npin.is-edge:hover .npin__dot,
.npin.is-edge.is-on .npin__dot{transform:rotate(var(--a,0deg)) translateX(4px)}
.npin.is-edge .npin__stem{display:none}

.npin__label{
  position:absolute; top:50%; left:calc(100% + 11px);
  transform:translateY(calc(-50% + var(--dy,0px)));
  display:block; white-space:nowrap; text-align:left;
  font-size:12px; color:var(--ink-dark);
  background:rgba(10,10,10,.86); border:1px solid var(--line-dark);
  border-radius:999px; padding:5px 12px; backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s var(--ease), visibility .25s var(--ease);
}
.npin__label em{font-style:normal; color:var(--accent-bright)}
.npin__name{display:none; margin-right:9px}
.npin.is-on .npin__name{display:inline}
.npin[data-side="left"] .npin__label{left:auto; right:calc(100% + 11px)}
.npin.is-labelled .npin__label,
.npin.is-edge.is-live .npin__label{opacity:1; visibility:visible}
.npin.is-edge .npin__name{display:inline}
.npin.is-on .npin__label{border-color:rgba(198,143,94,.5); background:rgba(20,14,9,.94)}

/* Leader line: a label that had to shift to clear its neighbours is no longer
   beside its own dot, so the stem carries the eye back. Height comes from the
   same layout pass that set --dy, so the two cannot disagree. */
.npin__stem{
  position:absolute; left:50%; top:50%; width:1px; height:var(--stem,0px);
  transform:translateX(-50%);
  background:linear-gradient(to bottom, rgba(198,143,94,.55), rgba(198,143,94,.18));
  opacity:0; transition:opacity .25s var(--ease);
}
.npin.is-stemup .npin__stem{transform:translateX(-50%) translateY(-100%)}
.npin.is-labelled .npin__stem{opacity:1}

.nmap__note{
  max-width:560px; margin:clamp(16px,2.2vw,24px) auto 0;
  font-size:12.5px; line-height:1.6; color:rgba(255,255,255,.34); text-align:center;
}

/* --- filters --- */
.nearby__filters{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px}
.nfilter{
  appearance:none; cursor:pointer; font:inherit;
  font-size:12.5px; letter-spacing:.05em; color:var(--ink-dark-mut);
  background:transparent; border:1px solid var(--line-dark); border-radius:999px;
  padding:8px 16px;
  transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.nfilter:hover{color:var(--ink-dark); border-color:rgba(255,255,255,.24)}
.nfilter.is-on{color:#0a0a0a; background:var(--accent-bright); border-color:var(--accent-bright)}
.nfilter:focus-visible{outline:2px solid var(--accent-bright); outline-offset:3px}

/* --- list --- */
.ngroup{margin:0 0 26px}
.ngroup[hidden]{display:none}
.ngroup__h{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px;
  margin:0 0 6px; padding-bottom:9px; border-bottom:1px solid var(--line-dark);
  font-size:11.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-dark);
}
.ngroup__h em{
  font-style:normal; font-weight:400; letter-spacing:.09em; text-transform:none;
  font-size:12px; color:var(--accent);
}
.nrow{
  appearance:none; cursor:pointer; font:inherit; text-align:left;
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:4px 18px;
  width:100%; background:none; border:0; border-bottom:1px solid rgba(255,255,255,.05);
  padding:13px 14px 13px 12px; margin:0 0 0 -12px; border-radius:10px;
  transition:background .25s var(--ease);
}
.nrow[hidden]{display:none}
.nrow:hover,.nrow.is-on{background:rgba(198,143,94,.09)}
.nrow:focus-visible{outline:2px solid var(--accent-bright); outline-offset:-2px}
.nrow__name{font-size:15.5px; color:var(--ink-dark); transition:color .25s var(--ease)}
.nrow.is-on .nrow__name{color:var(--accent-bright)}
.nrow__time{font-size:12.5px; letter-spacing:.05em; color:var(--accent);
  white-space:nowrap; font-variant-numeric:tabular-nums}
.nrow__chips{grid-column:1 / -1; font-size:12.5px; line-height:1.55; color:var(--ink-dark-mut)}

/* A note row has no route and never becomes a pin, so it must not offer the
   pointer affordance that says "this moves the map". Everything else about the
   row is unchanged, so the two kinds still read as one list. */
.nrow--note{cursor:default}
.nrow--note:hover{background:none}
.nrow--note .nrow__time{color:var(--ink-dark-mut)}

@media(max-width:900px){
  .nearby__grid{grid-template-columns:1fr; gap:clamp(28px,6vw,44px)}
  .nmap{aspect-ratio:1}
  .npin__label{font-size:11px; padding:4px 10px}
}
@media(max-width:560px){
  /* Time chips still fit at this width; a full name does not, and there is no
     gutter left to bleed into. The list is right underneath, so the map keeps
     the number and the list keeps the name. */
  .npin.is-on .npin__name{display:none}
  .nmap__homelabel{font-size:9px}
  .nmap__star{width:22px; height:22px}
}
@media(prefers-reduced-motion:reduce){
  .npin,.npin__dot,.npin__label,.nrow,.nrow__name,.nfilter,.nplace,
  .nmap__route,.nmap__hint{transition:none}
  .nmap__route{stroke-dashoffset:0}
}

/* ---------------------------------------------------------------- lightbox
   Tap a photograph to see it full screen. The affordance was the missing half
   of the bug: without cursor:pointer a desktop visitor has no signal the photo
   is interactive at all, and on mobile the tap simply died. */
.slide picture, .gallery__slide picture, .slide img, .gallery__slide img{cursor:zoom-in}

html.sglb-open{overflow:hidden}
.sglb{position:fixed; inset:0; z-index:2000; display:none;
  background:rgba(0,0,0,.975); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.sglb.is-open{display:block}
.sglb__track{position:absolute; inset:0; display:flex; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.sglb__track::-webkit-scrollbar{display:none}
.sglb__cell{flex:0 0 100%; scroll-snap-align:center; display:flex;
  align-items:center; justify-content:center; padding:max(14px, env(safe-area-inset-top)) 10px 76px}
/* display:contents so the <img> becomes a direct flex child of the cell.
   max-height:100% on the img otherwise resolves against the <picture>
   wrapper, whose height is auto, so a tall photo overflowed the viewport
   on desktop (1260x840 inside a 630px box). */
.sglb__cell picture{display:contents}
.sglb__cell img{max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; cursor:default; border-radius:2px}
/* 48px target: the close control has to be unmissable inside an in-app browser,
   where getting stuck means closing the whole WebView. */
.sglb__close{position:absolute; top:max(10px, env(safe-area-inset-top)); right:10px; z-index:2;
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  font-size:30px; line-height:1; color:var(--ink-dark); background:rgba(0,0,0,.45);
  border:0; border-radius:50%; cursor:pointer; -webkit-tap-highlight-color:transparent}
.sglb__close:hover{background:rgba(0,0,0,.7)}
.sglb__bar{position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0));
  pointer-events:none}
.sglb__cap{color:var(--ink-dark); font-size:14px; line-height:1.4; max-width:75%}
.sglb__count{color:var(--accent); font-size:12px; letter-spacing:.16em; white-space:nowrap}

/* ---------- listing agent (in #inquire, above the form) ---------- */
/* Same measure as the form and the same hairline-band language as the kitchen
   award, so it reads as part of the page, not a pasted-in business card. The
   Agency's logotype is inline SVG in their Dark Red (#CF262D, sampled from
   their own TA_Logotype_DarkRed file); the brighter primary red shouts on cream. */
.agent{max-width:620px; margin:40px auto 0; padding:26px 0;
  border-top:1px solid var(--line-firm); border-bottom:1px solid var(--line-firm);
  display:grid; grid-template-columns:auto auto; justify-content:center; gap:30px; align-items:center}
/* Photo + details are centred as one group under the centred headline; the
   text inside stays left-aligned. */
.agent picture{display:block}
.agent__photo{display:block; width:160px; height:160px; border-radius:50%; object-fit:cover}
.agent__info p{margin:0}
/* The logo sits directly under his name (Mike's call), so name and brokerage
   read as one line of identity before the title and contact details. */
.agent__label{font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:#9a5a2b;
  margin-bottom:10px!important}
.agent__brand{display:inline-block; vertical-align:top; color:#cf262d; margin:8px 0 2px}
.agent__logo{display:block; width:84px; height:auto}
.agent__name{font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.1; color:var(--ink)}
.agent__role{font-size:15px; color:var(--ink-muted); margin-top:5px!important}
.agent__contact{font-size:15px; margin-top:10px!important; display:flex; flex-wrap:wrap; gap:4px 10px}
.agent__contact span{color:var(--ink-muted)}
.agent__contact a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-firm)}
.agent__contact a:hover{border-color:var(--accent)}
.foot p a{color:inherit; text-decoration:none}
.foot p a:hover{color:var(--accent)}
@media(max-width:620px){
  .agent{gap:18px; padding:22px 0}
  .agent__photo{width:80px; height:80px}
  .agent__label{margin-bottom:6px!important}
  .agent__brand{margin:6px 0 0}
  .agent__logo{width:66px}
  /* No separator dot on phones: on a narrow screen the site link wraps and
     the dot would dangle at the end of the phone number. Space does the job. */
  .agent__contact{gap:4px 16px}
  .agent__contact span{display:none}
  .agent__name{font-size:21px}
  .agent__role,.agent__contact{font-size:14.5px}
}