/* ══════════════════════════════════════════════════════════════════
   WAHL GROUP REAL ESTATE — shared stylesheet
   Palette + type from the client brand guide (Idaho Websites, 2026).
   Edit colors here once and every page updates.
   ══════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Cormorant"; font-weight: 300; font-display: swap; src: url("fonts/cormorant-300.woff2") format("woff2"); }
@font-face { font-family: "Cormorant"; font-weight: 400; font-display: swap; src: url("fonts/cormorant-400.woff2") format("woff2"); }

:root {
  /* ── brand colors (from the guide) ───────────────────────────── */
  --umber:      #2B2118;   /* primary dark: text on light, ground on dark bands */
  --umber-deep: #1B140E;   /* pressed/hover state for umber surfaces */
  --gold:       #987853;   /* accent ONLY: eyebrows, rules, small marks */
  --ivory:      #EEE8DB;   /* primary page ground */
  --white:      #FFFFFF;   /* card + panel surfaces */

  /* ── composed tones (warm, mixed from umber — NOT the guide's cool tints) ── */
  --ivory-deep: #E5DDCC;   /* alternate section ground */
  --muted:      #6E6052;   /* secondary text on light */
  --line:       #D9CFBC;   /* hairlines on light */
  --on-dark:    #CFC5B4;   /* secondary text on umber grounds */
  --line-dark:  #463A2C;   /* hairlines on umber grounds */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--ivory);
  color: var(--umber);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;                       /* guide: body line-height 1.6 */
  -webkit-font-smoothing: antialiased;
}
/* height:auto MUST ship with the width/height attributes in the HTML.
   Without it the height attribute wins and every width-constrained
   image stretches. Do not remove one without removing the other. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--umber); }

/* Display face. Guide sets Caslon at letterspacing −50; Cormorant is the
   licensed-free stand-in, so the same −0.05em tracking carries over. */
h1, h2, h3 {
  font-family: "Cormorant", Georgia, "Times New Roman", serif;
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h3 { font-weight: 400; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 44px; }
.wrap.narrow { max-width: 860px; }
@media (max-width: 700px) { .wrap { padding: 0 22px; } }

/* Guide: Helvetica Bold, ALL CAPS for accent headings and labels. */
.eyebrow {
  font-weight: 700; font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold);
}
.on-umber .eyebrow { color: #C0A078; }   /* gold lifted for contrast on dark */

/* ── Header — transparent, floats over the hero ─────────────────── */
header.site {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  padding: 26px 0;
}
header.site.solid {                       /* interior pages: no hero photo behind */
  position: static; background: var(--ivory);
  border-bottom: 1px solid var(--line);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; }

/* Lockup runs 64–87px tall. Below ~30px the "REAL ESTATE" line collapses. */
.lockup { display: block; flex: none; }
.lockup img { height: 87px; width: auto; }
@media (max-width: 700px) { .lockup img { height: 64px; } }

nav.main { display: flex; align-items: center; gap: 34px; }
nav.main a {
  color: var(--ivory); text-decoration: none;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
}
nav.main a:hover, nav.main a:focus-visible { border-bottom-color: currentColor; }
nav.main a[aria-current="page"] { border-bottom-color: currentColor; }
header.site.solid nav.main a { color: var(--umber); }

/* ── Mobile navigation ──────────────────────────────────────────────
   Below the breakpoint the inline nav is replaced by a button that
   opens a full-screen umber panel. The panel markup lives in the
   header on every page; the toggle script sits at the end of the body.
   ─────────────────────────────────────────────────────────────────── */
.nav-toggle { display: none; }

@media (max-width: 900px) {
  nav.main { display: none; }

  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -10px;   /* optical edge alignment */
    background: none; border: 0; cursor: pointer; color: var(--ivory);
  }
  header.site.solid .nav-toggle { color: var(--umber); }
  .nav-toggle svg { width: 22px; height: 22px; display: block; }
  .nav-toggle .bar {
    stroke: currentColor; stroke-width: 1.5; stroke-linecap: round;
    transition: transform 0.3s ease, opacity 0.2s ease;
    transform-origin: center;
  }

  /* open state: the three rules become a cross */
  .nav-open .nav-toggle .bar-1 { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle .bar-2 { opacity: 0; }
  .nav-open .nav-toggle .bar-3 { transform: translateY(-7px) rotate(-45deg); }
  .nav-open .nav-toggle { color: var(--ivory); }

  .mobile-nav {
    position: fixed; inset: 0; z-index: 40;
    background: var(--umber);
    display: flex; flex-direction: column; justify-content: center;
    padding: 96px 30px 40px;
    opacity: 0; visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
  }
  .nav-open .mobile-nav { opacity: 1; visibility: visible; }

  .mobile-nav ul { list-style: none; }
  .mobile-nav li { border-bottom: 1px solid var(--line-dark); }
  .mobile-nav li:first-child { border-top: 1px solid var(--line-dark); }
  .mobile-nav a {
    display: block; padding: 20px 2px;
    font-family: "Cormorant", Georgia, serif; font-weight: 400;
    font-size: 34px; letter-spacing: -0.01em; line-height: 1.1;
    color: var(--ivory); text-decoration: none;
  }
  .mobile-nav a[aria-current="page"] { color: var(--gold); }
  .mobile-nav .m-contact {
    margin-top: 36px; display: flex; flex-direction: column; gap: 2px;
    font-size: 15.5px; color: var(--on-dark);
  }
  /* these are tapped with the menu open, so they need a real target height */
  .mobile-nav .m-contact a {
    font-family: inherit; font-size: 15.5px; color: var(--ivory);
    display: inline-block; padding: 8px 0;
  }
  .mobile-nav .m-label {
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em;
    text-transform: uppercase; color: #A98F6C; margin-bottom: 4px;
  }
  /* the page behind must not scroll while the panel is open */
  body.nav-open { overflow: hidden; }

  /* The panel sits at z-index 40 and the header at 20, so while open the
     header has to be lifted above it or the close button is buried and
     the only way out is Escape. Fixed positioning also keeps the button
     pinned on interior pages, where the header is static. */
  .nav-open header.site {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    background: transparent; border-bottom: 0;
  }
  .nav-open header.site .lockup { visibility: hidden; }
  /* The panel is a child of the header, so lifting the header alone just
     moves the whole stacking context. The toggle has to out-rank the
     panel inside it, or the close button is unclickable. */
  .nav-open .nav-toggle { position: relative; z-index: 60; }
}

/* Above the breakpoint the panel must never be reachable, including by
   keyboard, so it is fully removed rather than just visually hidden. */
@media (min-width: 901px) { .mobile-nav { display: none; } }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1.2;                       /* inline-block would sit the label low */
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 16px 32px; text-decoration: none;
  border: 1px solid var(--umber); background: var(--umber); color: var(--ivory);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn:hover { background: var(--umber-deep); border-color: var(--umber-deep); }
.btn.ghost { background: transparent; color: var(--umber); }
.btn.ghost:hover { background: var(--umber); color: var(--ivory); }
.btn.on-photo { background: transparent; border-color: rgba(238,232,219,0.55); color: var(--ivory); }
.btn.on-photo:hover { background: var(--ivory); border-color: var(--ivory); color: var(--umber); }
/* a .btn inside the nav must beat `nav.main a` on specificity */
nav.main a.btn { color: var(--ivory); padding-bottom: 16px; border: 1px solid rgba(238,232,219,0.55); }
nav.main a.btn:hover { border-color: var(--ivory); background: var(--ivory); color: var(--umber); }
header.site.solid nav.main a.btn { color: var(--ivory); background: var(--umber); border-color: var(--umber); }

/* ── Hero ───────────────────────────────────────────────────────────
   Solid umber panel left, photograph right, gradient seam between them
   so the join is soft. Sized to sit tight — the photo is pre-cropped
   close on Mitch and Kellie, so the section does not need to be tall.
   NOTE: the shoot is portrait (116 of 122 frames are EXIF-rotated), so
   the photo lives in its own column. Swap it and keep it portrait-ish,
   cropped tight, or the fade will cover them.
   ──────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 0;                 /* beats the generic `section` padding — that
                                 208px is what left umber above and below
                                 the photo and stretched the section */
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  min-height: 580px;
  background: var(--umber);
  overflow: hidden;
}
.hero-photo { position: relative; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; }
/* the soft seam: umber dissolves into the photo */
.hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right,
    #2B2118 0%,
    rgba(43,33,24,0.80) 8%,
    rgba(43,33,24,0.34) 18%,
    rgba(43,33,24,0.08) 26%,
    rgba(43,33,24,0.00) 34%);
}
/* separate top scrim so the ivory nav reads over the photo without the
   header needing a background of its own */
.hero-photo::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 190px; z-index: 1;
  background: linear-gradient(to bottom, rgba(27,20,14,0.55) 0%, rgba(27,20,14,0.00) 100%);
}
.hero-panel { display: flex; align-items: center; }
.hero-panel .inner { margin-left: auto; width: 100%; padding: 116px 52px 56px 0; }
.hero-copy { color: var(--ivory); }
.hero h1 { font-size: clamp(40px, 4.2vw, 60px); margin: 18px 0 0; }
.hero .lede { margin: 20px 0 0; max-width: 36ch; color: rgba(238,232,219,0.80); font-size: 16.5px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

/* line the panel copy up with the page gutter used by every section below */
@media (min-width: 901px) {
  .hero-panel .inner { padding-left: 44px; max-width: calc((1240px / 2) + 56px); }
}

/* Stacked below the split threshold. Photo first, copy under it, so
   nothing ever sits over them. */
@media (max-width: 900px) {
  /* top padding = header height, so the logo sits on umber, not on their faces */
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 139px; }
  .hero-photo { grid-row: 1; aspect-ratio: 5 / 4; }
  .hero-photo img { object-position: 55% 46%; }
  .hero-photo::before {
    background: linear-gradient(to bottom,
      rgba(43,33,24,0.00) 55%,
      rgba(43,33,24,0.45) 82%,
      #2B2118 100%);
  }
  .hero-photo::after { height: 150px; }
  .hero-panel { grid-row: 2; }
  .hero-panel .inner { padding: 32px 22px 60px; margin-left: 0; max-width: none; }
  .hero .lede { max-width: none; color: rgba(238,232,219,0.86); }
}
@media (max-width: 700px) { .hero { padding-top: 116px; } }

/* ── Sections ───────────────────────────────────────────────────── */
section { padding: 104px 0; }
section.tight { padding: 68px 0; }
.on-deep  { background: var(--ivory-deep); }
.on-umber { background: var(--umber); color: var(--ivory); }
.on-umber h1, .on-umber h2, .on-umber h3 { color: var(--ivory); }
.on-umber p { color: var(--on-dark); }
.on-umber a { color: var(--ivory); }

.section-head { max-width: 660px; margin-bottom: 52px; }
.section-head h2 { font-size: clamp(32px, 4vw, 46px); margin: 16px 0 18px; }
.section-head p { color: var(--muted); }
.on-umber .section-head p { color: var(--on-dark); }

/* ── Split band: copy beside a photo ────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split.wide-photo { grid-template-columns: 1.15fr 1fr; }
.split .copy h2 { font-size: clamp(30px, 3.6vw, 42px); margin: 16px 0 20px; }
.split .copy p + p { margin-top: 16px; }
.split .copy p { color: var(--muted); }
.on-umber .split .copy p { color: var(--on-dark); }
@media (max-width: 900px) { .split, .split.wide-photo { grid-template-columns: 1fr; gap: 40px; } }

/* ── Cards & grids ──────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

.card { background: var(--white); border: 1px solid var(--line); overflow: hidden;
        display: flex; flex-direction: column; }
.card .body { padding: 26px 28px 30px; display: flex; flex-direction: column; flex: 1; }
/* pins the CTA to the bottom of the card so buttons align across a row
   even when the paragraphs above are different lengths */
.card .body .cta { margin-top: auto; padding-top: 22px; }
.grid-2, .grid-3 { align-items: stretch; }
.card h3 { font-size: 25px; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 15.5px; }

/* Property card: photo + spec sheet */
.prop img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.prop dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 18px; margin-top: 16px; font-size: 14.5px; }
.prop dt { font-weight: 700; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.prop dd { font-variant-numeric: tabular-nums; }
.prop .status {
  display: inline-flex; align-items: center; line-height: 1.2;
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 12px; border: 1px solid var(--gold); color: var(--gold); margin-bottom: 14px;
}

/* ── Photo helpers ──────────────────────────────────────────────── */
.ph { width: 100%; height: 100%; object-fit: cover; }
.photo-4x5 img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.photo-3x2 img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }

/* ── Pull quote ─────────────────────────────────────────────────────
   Umber ground with the brand pattern behind it. The guide says use the
   pattern sparingly as texture, never as the focal point, so it sits at
   low opacity behind the type. */
.pullquote { position: relative; overflow: hidden; background: var(--umber); }
.pullquote::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url("logo/pattern.svg");
  background-repeat: repeat;
  background-size: 190px auto;
  opacity: 0.22;
}
.pullquote::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(43,33,24,0.82) 0%, rgba(43,33,24,0.42) 55%, rgba(43,33,24,0.82) 100%);
}
.pullquote .wrap { position: relative; z-index: 2; }
/* hairline rule above the quote, gold, short — a mark rather than a box */
.pullquote .rule { width: 54px; height: 1px; background: var(--gold); margin-bottom: 30px; }
.pullquote blockquote {
  font-family: "Cormorant", Georgia, serif; font-weight: 300;
  font-size: clamp(27px, 3.6vw, 44px); line-height: 1.22; letter-spacing: -0.02em;
  color: var(--ivory); max-width: 24ch; text-wrap: balance;
}
.pullquote cite {
  display: block; margin-top: 30px; font-style: normal;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(238,232,219,0.66);
}

/* ── Conversion band ────────────────────────────────────────────── */
.band { background: var(--ivory-deep); color: var(--umber); padding: 96px 0; text-align: center; }
.band h2 { font-size: clamp(32px, 4.4vw, 50px); color: var(--umber); }
.band p { color: var(--muted); max-width: 50ch; margin: 20px auto 34px; }
.band .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ── Footer ─────────────────────────────────────────────────────── */
footer.site { background: var(--umber); color: var(--on-dark); padding: 78px 0 40px; font-size: 15.5px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 1.3fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr; gap: 44px; } }
footer.site img.f-logo { height: 87px; width: auto; margin-bottom: 22px; }
.foot-brand p { max-width: 30ch; color: var(--on-dark); }
footer.site .f-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: #A98F6C; margin-bottom: 18px;
}
footer.site ul { list-style: none; }
footer.site li { margin-bottom: 11px; }
footer.site a { color: var(--ivory); text-decoration: none; border-bottom: 1px solid transparent; }
footer.site a:hover { border-bottom-color: var(--gold); }

/* label/value pairs so the address and email read as information rather
   than as a row of links with "Email" standing in for the address */
.nap { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin-bottom: 26px; }
.nap dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8E7B62; padding-top: 4px;
}
.nap dd { color: var(--ivory); overflow-wrap: anywhere; }
footer.site address { font-style: normal; color: var(--on-dark); line-height: 1.7; }
footer.site .legal {
  color: #8A7A66; font-size: 13px; margin-top: 56px; padding-top: 26px;
  border-top: 1px solid var(--line-dark);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}

/* ── Interior page hero (no photo) ──────────────────────────────── */
.page-hero { padding: 86px 0 64px; border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(40px, 6vw, 68px); margin: 18px 0 22px; }
.page-hero .lede { max-width: 60ch; color: var(--muted); font-size: 18.5px; }
.page-hero .lede + .lede { margin-top: 18px; }

/* ── Focus ──────────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }


/* ── Full-bleed feature photo (interior pages) ───────────────────── */
.feature-photo { margin: 0; }
.feature-photo img { width: 100%; height: clamp(300px, 46vw, 560px); object-fit: cover; object-position: 50% 32%; }

/* ── Full-bleed photo band ──────────────────────────────────────────
   Used edge to edge with no copy over it. The --tall variant opens a
   page, so it carries a scrim at the top for the transparent header
   to sit on. */
.photo-band { margin: 0; position: relative; }
.photo-band img { width: 100%; height: clamp(240px, 30vw, 400px); object-fit: cover; display: block; }
.photo-band--tall img { height: clamp(380px, 46vw, 620px); object-position: 50% 58%; }
.photo-band--tall::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 190px;
  background: linear-gradient(to bottom, rgba(27,20,14,0.58) 0%, rgba(27,20,14,0.00) 100%);
  pointer-events: none;
}
/* the intro sits directly under the opener, so it needs less top air */
.page-hero--under-photo { padding-top: 64px; }
@media (max-width: 700px) {
  .photo-band--tall img { height: clamp(320px, 62vw, 420px); }
  .page-hero--under-photo { padding-top: 44px; }
}

/* ── Person cards (About) ───────────────────────────────────────── */
.person { display: flex; flex-direction: column; }
.person .person-body { padding-top: 26px; }
.person h3 { font-size: 30px; margin-bottom: 4px; }
.person .role {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
}
.person p { color: var(--muted); }
.person p + p { margin-top: 14px; }

/* ══════════════════════════════════════════════════════════════════
   INTERACTIVE AREA MAP (boise.html)
   Ported from socaltoboise.com/areas and retokenised to this brand.
   The SVG's coordinates belong to the basemap (viewBox 0 0 2185 1489),
   so dot and label positions are edited in the markup, not here.
   ══════════════════════════════════════════════════════════════════ */
.maplay { max-width: 1060px; margin: 0 auto; padding: 8px 0 24px; }
/* The basemap is a deliberately near-monochrome canvas map in almost exactly
   this brand's ivory, so on an ivory page it vanishes and the map reads as an
   empty box. The frame gives it an edge, and the filter lifts the geography
   just enough to read without turning it into a loud Google-Maps slab. */
.mapbox { position: relative; border: 1px solid var(--line); background: #EFE9DC; }
.mapscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
svg.tvmap { width: 100%; height: auto; display: block; min-width: 680px; }
svg.tvmap image { filter: contrast(1.32) saturate(0.72) brightness(0.965); }

.area { cursor: pointer; outline: none; }
.area .hit { fill: transparent; }
.area .dot {
  fill: var(--umber); stroke: var(--ivory); stroke-width: 2.5;
  transition: r 0.15s ease, fill 0.15s ease;
}
.area:hover .dot, .area:focus-visible .dot { r: 10; fill: var(--gold); }

/* Cormorant for the area labels, with an ivory halo so they stay legible
   wherever they fall on the satellite basemap */
.mlbl {
  font-family: "Cormorant", Georgia, serif; font-weight: 400;
  font-size: 30px; letter-spacing: 0.02em;
  fill: var(--umber);
  paint-order: stroke; stroke: rgba(238,232,219,0.88); stroke-width: 6px;
  transform-box: fill-box; transition: transform 0.18s ease, fill 0.18s ease;
}
.area:hover .mlbl, .area:focus-visible .mlbl { transform: scale(1.18); fill: var(--gold); }
.area:focus-visible .dot { stroke: var(--gold); }

.citylbl {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700;
  font-size: 38px; letter-spacing: 0.34em; text-transform: uppercase;
  fill: var(--umber); opacity: 0.26; text-anchor: middle; pointer-events: none;
}

.scrollhint { display: none; position: absolute; right: 8px; top: 8px; z-index: 5; pointer-events: none; }
@media (max-width: 900px) { .scrollhint { display: block; } }

/* ── Area lightbox ─────────────────────────────────────────────── */
.lightbox { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 24px; }
.lightbox.open { display: flex; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(27,20,14,0.62); }
.lb-card {
  position: relative; background: var(--ivory); border: 1px solid var(--line);
  max-width: 620px; width: 100%; max-height: 84vh; overflow-y: auto;
  padding: 40px 44px 34px; box-shadow: 0 24px 70px rgba(27,20,14,0.42);
}
.lb-close {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  font-size: 28px; line-height: 1; color: var(--muted); cursor: pointer; padding: 8px;
}
.lb-close:hover { color: var(--umber); }
.lb-card h3 {
  font-family: "Cormorant", Georgia, serif; font-weight: 400;
  font-size: 38px; letter-spacing: -0.02em; margin: 0 0 8px;
}
.lb-card .oneline {
  font-size: 16.5px; line-height: 1.5; color: var(--muted);
  margin: 0 0 4px; padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.lb-card h4 {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin: 24px 0 6px;
}
.lb-card p { margin: 0; font-size: 15.5px; line-height: 1.62; color: #4A4036; }
@media (max-width: 700px) {
  .lb-card { padding: 32px 22px 26px; max-height: 88vh; }
  .lb-card h3 { font-size: 31px; }
}

/* ── Homepage teaser for the area map ───────────────────────────── */
.map-teaser {
  display: block; position: relative; overflow: hidden;
  border: 1px solid var(--line-dark); text-decoration: none;
}
.map-teaser img {
  width: 100%; height: clamp(220px, 26vw, 340px); object-fit: cover; object-position: 62% 50%;
  filter: contrast(1.24) saturate(0.5) brightness(0.62) sepia(0.12);
  transition: filter 0.35s ease, transform 0.35s ease;
}
.map-teaser:hover img { filter: contrast(1.28) saturate(0.6) brightness(0.72) sepia(0.1); transform: scale(1.02); }
.map-teaser-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ivory); text-align: center; padding: 0 20px;
}
.map-teaser:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ══════════════════════════════════════════════════════════════════
   PROCESS STEPS (buy.html, sell.html)
   Numbered because the content genuinely is a sequence — the order
   carries information the reader needs.
   ══════════════════════════════════════════════════════════════════ */
.steps { list-style: none; counter-reset: step; }
.steps > li {
  counter-increment: step;
  display: grid; grid-template-columns: 68px 1fr; gap: 0 28px;
  padding: 30px 0; border-top: 1px solid var(--line);
}
.steps > li:last-child { border-bottom: 1px solid var(--line); }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: "Cormorant", Georgia, serif; font-weight: 300;
  font-size: 34px; line-height: 1; color: var(--gold);
  font-variant-numeric: tabular-nums; padding-top: 4px;
}
.steps h3 { font-size: 25px; margin-bottom: 8px; }
.steps p { color: var(--muted); max-width: 62ch; }
.on-umber .steps > li { border-color: var(--line-dark); }
.on-umber .steps p { color: var(--on-dark); }
@media (max-width: 700px) {
  .steps > li { grid-template-columns: 46px 1fr; gap: 0 16px; padding: 24px 0; }
  .steps > li::before { font-size: 26px; }
  .steps h3 { font-size: 22px; }
}

/* ── Plain feature list (no sequence implied) ───────────────────── */
.facts { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
.facts li { background: var(--white); border: 1px solid var(--line); padding: 26px 28px 28px; }
.facts h3 { font-size: 22px; margin-bottom: 8px; }
.facts p { color: var(--muted); font-size: 15.5px; }
@media (max-width: 800px) { .facts { grid-template-columns: 1fr; } }

/* ── Contact detail lines ───────────────────────────────────────── */
.contact-lines { display: grid; grid-template-columns: auto 1fr; gap: 9px 20px; margin-top: 4px; }
.contact-lines dt {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); padding-top: 4px;
}
.contact-lines dd { overflow-wrap: anywhere; }
.contact-lines a { color: var(--umber); text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-lines a:hover { border-bottom-color: var(--gold); }
.office-address {
  font-style: normal; font-size: 18px; line-height: 1.65;
  margin: 0 0 18px; color: var(--umber);
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE REFINEMENTS
   Two real problems on a phone that are invisible on a desktop:
   the 10.5px uppercase micro-labels get genuinely hard to read, and
   list links end up around 24px tall against a ~44px touch target.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .eyebrow { font-size: 12px; letter-spacing: 0.22em; }
  .contact-lines dt,
  footer.site .f-label,
  .nap dt,
  .person .role,
  .prop dt { font-size: 11.5px; letter-spacing: 0.14em; }

  /* tap targets */
  footer.site .foot-nav li { margin-bottom: 0; }
  footer.site .foot-nav a { display: block; padding: 11px 0; }
  .contact-lines { gap: 4px 18px; }
  .contact-lines dd a { display: inline-block; padding: 7px 0; }
  .nap dd a { display: inline-block; padding: 6px 0; }
  .nap { gap: 4px 18px; }
  footer.site address { padding-top: 8px; }

  /* long email addresses need room to break rather than crowd the label */
  .contact-lines { grid-template-columns: 62px 1fr; }

  /* button labels are uppercase and letterspaced, which costs legibility
     at 11px on a phone even though the tap target is generous */
  .btn { font-size: 12px; padding: 17px 30px; }
  .map-teaser-label { font-size: 12px; }
}


/* ══════════════════════════════════════════════════════════════════
   TRAVEL GRID (about.html)
   Their own phone photographs from the ten years abroad. They are
   snapshots, not a shoot, so they run small and square in a grid —
   that reads as a real record rather than as weak photography.
   ══════════════════════════════════════════════════════════════════ */
.travel { margin-top: 56px; }
.travel-head {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 26px; border-bottom: 1px solid var(--line);
}
.travel-head p { color: var(--muted); font-size: 15px; margin: 0; }
.travel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; }
.travel-grid figure { margin: 0; }
.travel-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.travel-grid figcaption {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); padding-top: 10px;
}
@media (max-width: 900px) { .travel-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (max-width: 700px) {
  .travel { margin-top: 40px; }
  .travel-grid figcaption { font-size: 11.5px; letter-spacing: 0.14em; }
}


/* ══════════════════════════════════════════════════════════════════
   MOBILE SPACING
   The section rhythm is tuned for a 1440 canvas. Carried unchanged to
   a 390 screen it leaves 208px of empty ground at every section
   boundary, which reads as the page being broken rather than airy.
   Everything below is the same rhythm, scaled to the viewport.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  section { padding: 76px 0; }
  section.tight { padding: 52px 0; }
  .band { padding: 76px 0; }
  .section-head { margin-bottom: 38px; }
  .split, .split.wide-photo { gap: 32px; }
  .grid-2 { gap: 26px; }
  .grid-3 { gap: 22px; }
  .page-hero { padding: 72px 0 52px; }
  .page-hero h1 { margin: 14px 0 18px; }
}

@media (max-width: 700px) {
  section { padding: 60px 0; }
  section.tight { padding: 42px 0; }
  .band { padding: 62px 0; }
  .section-head { margin-bottom: 30px; }
  .split, .split.wide-photo { gap: 26px; }
  .grid-2 { gap: 22px; }
  .page-hero { padding: 58px 0 44px; }
  .split .copy h2 { margin: 12px 0 16px; }
  .card .body { padding: 22px 22px 26px; }
  .person .person-body { padding-top: 20px; }
  footer.site { padding: 60px 0 36px; }
  footer.site .legal { margin-top: 38px; }
}

/* CTA under a pull quote — the quote alone has no context, so it needs a
   way through to the story behind it. */
.pullquote .pq-cta { margin-top: 30px; }
@media (max-width: 700px) { .pullquote .pq-cta { margin-top: 24px; } }