/* PinoyHomes Calgary. Design notes and the reasons behind them: DESIGN.md */

@font-face { font-family: "Brygada 1918"; src: url("/static/fonts/brygada-1918-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Brygada 1918"; src: url("/static/fonts/brygada-1918-var-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/static/fonts/schibsted-grotesk-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }

:root {
  --paper: #ffffff;
  --ink: #1d1c1a;
  --stone: #5e5a55;
  --line: #e2e6ed;
  --line-soft: #d3dce8;
  --field: #8a8f99;

  --sky: #dce9f5;          /* Calgary's big sky */
  --sky-2: #c3d5ea;        /* far mountains */
  --sky-3: #a9c0dc;        /* foothills */
  --sky-soft: #eef4fa;     /* the light band */
  --city: #2b3b72;         /* downtown */
  --night: #1a2652;        /* the houses, the voices band, the footer */
  --indigo: #1f2d5a;
  --indigo-hover: #2c3e78;
  --on-night: #eef1f8;
  --on-night-muted: #b4bedb;
  --sun: #f2b43c;          /* the eight-ray sun */
  --sun-soft: #fcebc2;
  --gold: #c8952c;         /* the logo */
  --gold-ink: #8a6416;
  --gold-light: #e9c771;
  --ok: #23613a;
  --error: #a12b1f;

  --serif: "Brygada 1918", Georgia, "Times New Roman", serif;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(64px, 8.5vw, 124px);
  --h2: clamp(2rem, 3.6vw, 3.25rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
a:hover { color: var(--indigo); }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }
.voices :focus-visible, .site-footer :focus-visible, .panel-3:focus-visible { outline-color: var(--sun); }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--indigo); color: #fff; padding: 10px 16px; border-radius: 4px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; color: #fff; }

.review-note p { margin: 0; }
.review-note {
  margin: 0; padding: 9px var(--gutter);
  background: var(--sun-soft); color: #5b4a1c;
  font: 500 0.8125rem/1.4 var(--sans); text-align: center;
}

/* ---------- buttons and links ---------- */
.button {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 28px;
  background: var(--night); color: #fff;
  font: 600 1rem/1.2 var(--sans); text-align: center; text-decoration: none;
  border: 0; border-radius: 999px; cursor: pointer;
  transition: color .3s var(--ease);
}
.button::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--sun); border-radius: inherit;
  translate: -101% 0; transition: translate .4s var(--ease);
}
.button:hover, .button:focus-visible { color: var(--night); }
.button:hover::before, .button:focus-visible::before { translate: 0 0; }
.call .button::before { background: #fff; }

.textlink, .path-link a, .where-more a, .voices-more a, .panel-cta {
  font: 600 1rem/1.4 var(--sans); color: var(--ink); text-decoration: none;
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 2px no-repeat;
  padding-bottom: 3px; transition: background-size .35s var(--ease), color .2s;
}
.textlink:hover, .path-link a:hover, .where-more a:hover, .voices-more a:hover { color: var(--indigo); background-size: 40% 2px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--sky);
  transition: background-color .35s ease, box-shadow .35s ease;
  view-transition-name: site-header;
}
.is-scrolled .site-header { background: #fff; box-shadow: 0 1px 0 var(--line), 0 12px 30px -20px rgba(26, 38, 82, .45); }
.header-bar { display: flex; align-items: center; gap: 28px; min-height: clamp(64px, 9vh, 78px); transition: min-height .35s ease; }
.is-scrolled .header-bar { min-height: 66px; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; color: var(--night); text-decoration: none; }
.brand:hover { color: var(--night); }
.brand-mark { width: 52px; height: 31px; flex: none; transition: rotate .6s var(--ease); }
.brand:hover .brand-mark { rotate: -6deg; }
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-name { font: 650 1.125rem/1.1 var(--sans); letter-spacing: -0.01em; white-space: nowrap; }
.brand-sub { font: 400 0.8125rem/1.25 var(--sans); color: var(--stone); }
.brand-agent { display: block; }                    /* "Rafael “Rene” Asprer, REALTOR®", then "with MaxWell Gold" below */

.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav ul { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.site-nav ul a {
  display: block; padding: 8px 10px; border-radius: 999px;
  font: 500 0.96875rem/1.2 var(--sans); color: var(--night); text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.site-nav ul a:hover { background: rgba(26, 38, 82, .08); color: var(--night); }
.site-nav ul a[aria-current] { background: var(--night); color: #fff; }
.nav-phone {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  background: var(--sun); color: var(--night); font: 650 0.96875rem/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease;
}
.nav-phone:hover { background: var(--gold-light); color: var(--night); }
.nav-toggle { display: none; }

/* ---------- home: hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--sky); --scene-h: max(clamp(140px, min(19vw, 27vh), 270px), 18.06vw); }
.hero-clouds { position: absolute; inset: 0; pointer-events: none; }
.cloud { position: absolute; left: -260px; fill: #fff; }
.cloud.c1 { width: 230px; top: 9%; opacity: .9; }
.cloud.c2 { width: 150px; top: 27%; opacity: .7; }
.cloud.c3 { width: 120px; top: 3%; opacity: .6; }

.hero-grid {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "name portrait" "copy portrait" "rest portrait";
  column-gap: clamp(24px, 4vw, 64px);
  min-height: min(calc(100svh - 110px), 840px);
}
.hero-scene { grid-area: 1 / 1 / -1 / -1; align-self: end; justify-self: center; width: 100vw; height: var(--scene-h); z-index: 1; pointer-events: none; }
.scene, .houses { display: block; width: 100%; height: 100%; overflow: hidden; }
.hero .scene { overflow: visible; }
.scene-sun circle, .scene-rays path { fill: var(--sun); }
.scene-far path { fill: var(--sky-2); }
.scene-near path { fill: var(--sky-3); }
.scene-city path { fill: var(--city); }
.scene-homes path, .scene-homes rect { fill: var(--night); }
.scene-mid path { fill: #8094bd; }                     /* things further off: downtown from the suburbs, the Big Rock */
.scene-rock-light path { fill: #a3b4d4; }
.scene-snow path { fill: #fff; }
.scene-water path { fill: #b4cae4; }
.scene-shimmer path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .85; }
.scene-boat path { fill: var(--night); }
.scene-sail path { fill: var(--sun); }
.scene-plane path { fill: var(--city); }
.scene-trail path { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 14; }
.win { fill: #f6c95c; }
.win.off { opacity: .2; }
.scene-sun { transform: translateY(calc(var(--p, 0) * 90px)); }
.scene-far { transform: translateY(calc(var(--p, 0) * 52px)); }
.scene-near { transform: translateY(calc(var(--p, 0) * 30px)); }
.scene-city { transform: translateY(calc(var(--p, 0) * 14px)); }

.hero-name { grid-area: name; position: relative; z-index: 2; margin: 0; padding-top: clamp(16px, min(5vw, 4.2vh), 72px); font-weight: 400; }
/* "Rafael “Rene”" is about 5.84em wide: the size keeps it on one line in the name column (8.4vw) and the hero
   on one screen (11.6vh). Check with a long name before changing it. */
.hero-name .name { display: block; font: 500 clamp(3.25rem, min(8.4vw, 11.6vh), 6.6rem)/0.9 var(--serif); letter-spacing: -0.035em; color: var(--night); }
.hero-name .line { display: inline-block; vertical-align: top; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.hero-name .line-last { display: block; }                 /* "Rafael “Rene”" on one line, "Asprer" below; three lines on phones */
.hero-name .line > span { display: inline-block; }
.hero-name .q { color: var(--gold); }
.hero-name .role { display: block; margin-top: clamp(12px, 2.2vh, 26px); font: 600 1.125rem/1.4 var(--sans); letter-spacing: 0; color: var(--night); }
.hero-name .role-brokerage { display: block; font-weight: 400; color: var(--stone); }
.hero-copy { grid-area: copy; position: relative; z-index: 2; padding-bottom: calc(var(--scene-h) * .86 + 22px); }
.hero-lead { margin: clamp(10px, 1.8vh, 18px) 0 0; max-width: 31em; font: 400 clamp(1.125rem, min(1.42vw, 2.6vh), 1.4375rem)/1.5 var(--serif); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(16px, 2.8vh, 32px); }
.hero-phone { margin: 0; color: var(--stone); }
.hero-phone a { color: var(--night); font-weight: 650; white-space: nowrap; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hero-call { grid-area: call; display: none; position: relative; z-index: 2; margin: 18px 0 0; }
.hero-call a { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--sun); color: var(--night); font: 500 1rem/1.1 var(--sans); text-decoration: none; box-shadow: 0 12px 26px -18px rgba(26, 38, 82, .7); }
.hero-call strong { font-weight: 700; letter-spacing: .01em; }
.hero-portrait { grid-area: portrait; position: relative; z-index: 3; align-self: end; justify-self: end; width: 100%; max-width: 640px; margin: 0 -24px 0 0; }
.hero-portrait img { display: block; width: 100%; height: auto; }

/* ---------- home: Rene on video ---------- */
.talk { padding-block: var(--section) calc(var(--section) * .55); background: var(--night); color: var(--on-night); }
.talk-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "player text"; gap: 32px clamp(36px, 5vw, 88px); align-items: center; }
.talk-text { grid-area: text; }
.talk-label { margin: 0 0 22px; font: 500 1.375rem/1.25 var(--sans); letter-spacing: -0.01em; color: var(--on-night-muted); }
.talk-label::before { content: ""; display: inline-block; width: 22px; height: 22px; margin-right: 12px; vertical-align: -3px; background: var(--sun); border-radius: 50%; box-shadow: 0 0 0 6px rgba(242, 180, 60, .18); }
.talk h2 { margin: 0; font: 500 clamp(2.125rem, 3.8vw, 3.5rem)/1.06 var(--serif); letter-spacing: -0.025em; color: #fff; text-wrap: balance; }
.talk-text p:not(.talk-label) { margin: 20px 0 0; max-width: 30em; font: 400 1.1875rem/1.55 var(--serif); color: var(--on-night); }
.talk-text p.talk-meta { margin-top: 16px; font: 500 0.9375rem/1.45 var(--sans); color: var(--on-night-muted); }
.talk-player { grid-area: player; position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0d1430; box-shadow: 0 40px 80px -44px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .08); }
.talk-player video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0d1430; }
.talk-play {   /* the button sits left of centre, over the bookshelf, so it never covers Rene's face */
  position: absolute; inset: 0; display: grid; align-items: center; justify-items: start; padding: 0 0 0 clamp(20px, 20%, 170px); border: 0; cursor: pointer;
  background: linear-gradient(to top, rgba(13, 20, 48, .55), rgba(13, 20, 48, 0) 46%);
}
.talk-play[hidden] { display: none; }
.talk-disc { display: grid; place-items: center; width: clamp(72px, 8.5vw, 104px); aspect-ratio: 1; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 10px rgba(242, 180, 60, .28), 0 18px 40px -16px rgba(0, 0, 0, .6); transition: scale .35s var(--ease), box-shadow .35s var(--ease); }
.talk-disc::before { content: ""; width: 34%; aspect-ratio: 1; margin-left: 9%; background: var(--night); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.talk-play:hover .talk-disc, .talk-play:focus-visible .talk-disc { scale: 1.08; box-shadow: 0 0 0 16px rgba(242, 180, 60, .22), 0 18px 40px -16px rgba(0, 0, 0, .6); }
.talk-play:focus-visible { outline: 3px solid var(--sun); outline-offset: -6px; }
.talk-dur { position: absolute; right: 16px; bottom: 14px; padding: 5px 11px; border-radius: 999px; background: rgba(13, 20, 48, .82); color: #fff; font: 600 0.875rem/1.2 var(--sans); }
.talk + .voices { padding-top: calc(var(--section) * .45); }
.talk + .voices .voices-grid { padding-top: calc(var(--section) * .55); border-top: 1px solid rgba(255, 255, 255, .14); }
video::cue { font: 500 1.05rem/1.4 var(--sans); background: rgba(13, 20, 48, .82); color: #fff; }

/* ---------- client voices ---------- */
.voices { padding-block: var(--section); background: var(--night); color: var(--on-night); }
.voices-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "lead title" "lead more" "lead link"; grid-template-rows: auto auto 1fr; gap: 0 clamp(36px, 6vw, 104px); }
.voices-grid.single { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "lead" "link"; grid-template-rows: auto; }
.voices-title { grid-area: title; margin: 0 0 32px; font: 500 1.375rem/1.25 var(--sans); letter-spacing: -0.01em; color: var(--on-night-muted); }
.voices-title::before { content: ""; display: inline-block; width: 22px; height: 22px; margin-right: 12px; vertical-align: -3px; background: var(--sun); border-radius: 50%; box-shadow: 0 0 0 6px rgba(242, 180, 60, .18); }
.voice { margin: 0; }
.voice blockquote { margin: 0; }
.voice blockquote p { margin: 0; color: #fff; }
.voice blockquote p::before { content: "\201C"; }
.voice blockquote p::after { content: "\201D"; }
.voice-lead { grid-area: lead; align-self: start; position: sticky; top: 120px; padding-top: 6px; }
.voices-grid.single .voice-lead { position: static; }
.voice-lead blockquote p { max-width: 15em; font: italic 400 clamp(2.125rem, 4.6vw, 3.75rem)/1.12 var(--serif); letter-spacing: -0.02em; }
.voice-lead blockquote p::before { margin-left: -0.4em; color: var(--sun); }
.voice-lead blockquote p::after { color: var(--sun); }
.voice figcaption { margin-top: 14px; font: 600 1rem/1.4 var(--sans); color: #fff; }
.voice figcaption span { display: block; font-weight: 400; color: var(--on-night-muted); }
.voice-lead figcaption { margin-top: 28px; }
.voice-more { grid-area: more; display: flex; flex-direction: column; gap: 30px; }
.voice-more .voice { padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .16); }
.voice-more blockquote p { font: italic 400 1.3125rem/1.42 var(--serif); }
.voices-more { grid-area: link; margin: 36px 0 0; }
.voices .voices-more a { color: #fff; background-image: linear-gradient(var(--sun), var(--sun)); }
.voices .voices-more a:hover { color: var(--sun); }
/* a photo of a client family under the lead quote: the lead stops being sticky so the two stay together */
.voice-side { grid-area: lead; align-self: start; display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.has-photo .voice-lead { position: static; }
.voice-photo, .steps-photo { margin: 0; }
.voice-photo { width: min(100%, 440px); margin-left: clamp(0px, 3vw, 40px); }
.voice-photo img, .steps-photo img { display: block; width: 100%; height: auto; border-radius: 14px; transition: rotate .6s var(--ease); }
.voice-photo img { rotate: -1.5deg; box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .75); }
.voice-photo:hover img, .steps-photo:hover img { rotate: 0deg; }
.voice-photo figcaption { margin-top: 18px; font: 400 0.9375rem/1.5 var(--sans); color: var(--on-night-muted); }

/* ---------- section basics ---------- */
.sec { padding-block: var(--section); }
/* two sections on the same background read as one: don't stack their padding */
.sec:not(.tinted) + .sec:not(.tinted), .sec.tinted + .sec.tinted { padding-top: 0; }
.sec h2 { margin: 0; font: 500 var(--h2)/1.06 var(--serif); letter-spacing: -0.025em; color: var(--night); }
.tinted { background: var(--sky-soft); }

/* home: ways Rene helps, three coloured panels with a small drawing each */
.paths h2 { margin-bottom: clamp(28px, 4vw, 48px); }
.panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.panel {
  position: relative; min-width: 0;
  display: grid; grid-template-rows: auto 1fr; align-content: start; gap: clamp(26px, 3.4vw, 48px);
  padding: clamp(24px, 2.4vw, 34px); border-radius: 14px; overflow: hidden;
  color: var(--ink); text-decoration: none;
  transition: translate .45s var(--ease), box-shadow .45s var(--ease);
}
.panel:hover { color: var(--ink); }
.panel-1 { background: var(--sky); }
.panel-2 { background: var(--sun-soft); }
.panel-3 { background: var(--night); color: var(--on-night); }
.panel-3:hover { color: var(--on-night); }
.panel-art { display: block; width: clamp(150px, 15vw, 210px); transition: translate .6s var(--ease), rotate .6s var(--ease); transform-origin: 30% 100%; }
.art { display: block; width: 100%; height: auto; overflow: visible; }
.art-main { fill: var(--night); stroke: var(--night); stroke-width: 0; }
.art-lit { fill: var(--sun); }
.art-cut { fill: var(--sky); }
.panel-2 .art-cut { fill: var(--sun-soft); }
.art-board { fill: #fff; stroke: var(--night); stroke-width: 4; }
.art-text { font: 700 14px/1 var(--sans); fill: var(--night); letter-spacing: 0.5px; }
.art-sold { font-size: 19px; letter-spacing: 1.5px; }
.art-sun { fill: var(--night); }
.panel-3 .art-main { fill: #fff; stroke: #fff; }
.panel-3 .art-cut { fill: var(--night); }
.panel-body { display: flex; flex-direction: column; align-items: flex-start; }
.panel-title { display: block; margin: 0 0 10px; font: 500 clamp(1.75rem, 2.5vw, 2.375rem)/1.08 var(--serif); letter-spacing: -0.02em; color: var(--night); }
.panel-3 .panel-title { color: #fff; }
.panel-tl { display: block; margin: 0 0 8px; font: italic 400 1.0625rem/1.4 var(--serif); color: var(--on-night-muted); }
.panel-text { display: block; max-width: 25em; font: 400 1.0625rem/1.55 var(--serif); }
.panel-cta { display: inline-block; margin-top: auto; padding-top: 22px; color: inherit; background-position: 0 100%; }
.panel-3 .panel-cta { color: #fff; background-image: linear-gradient(var(--sun), var(--sun)); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .panel:hover { translate: 0 -6px; box-shadow: 0 26px 44px -30px rgba(26, 38, 82, .55); }
  .panel:hover .panel-art { translate: 0 -8px; rotate: -4deg; }
}
.panel:hover .panel-cta { background-size: 40% 2px; }

/* home: where Rene works */
.where { background: var(--sky-soft); overflow: hidden; }
.marquee { padding: clamp(26px, 3.6vw, 40px) 0; border-bottom: 1px solid var(--line-soft); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; width: max-content; }
.marquee-set { display: flex; align-items: center; flex: none; }
.marquee-set span { padding: 0 0.5em; font: italic 400 clamp(2rem, 4vw, 3.25rem)/1.1 var(--serif); letter-spacing: -0.01em; color: var(--city); white-space: nowrap; }
.sun-glyph { width: 34px; height: 34px; flex: none; fill: var(--sun); }
.where-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px clamp(32px, 5vw, 80px); }
.where-head p { margin: 18px 0 0; max-width: 22em; font: 400 1.1875rem/1.55 var(--serif); color: var(--stone); }
.where-head .where-more { margin-top: 24px; }
.directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(28px, 4vw, 56px); }
.dir-group .dir-title { margin: 0 0 6px; font: 600 0.9375rem/1.3 var(--sans); color: var(--stone); }
.dir-group ul { margin: 0; padding: 0; list-style: none; }
.dir-group li { padding: 18px 0 20px; border-top: 1px solid var(--line-soft); }
.dir-group a { display: inline-block; font: 500 1.625rem/1.2 var(--serif); letter-spacing: -0.01em; color: var(--night); text-decoration: none; transition: translate .3s var(--ease), color .2s; }
.dir-group a:hover { translate: 6px 0; color: var(--indigo); }
.dir-group span { display: block; margin-top: 6px; font: 400 0.9375rem/1.5 var(--sans); color: var(--stone); }

/* home: reading list */
.reading-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 48px; margin-bottom: clamp(32px, 4vw, 52px); }
.reading-head p { margin: 0; max-width: 30em; font: 400 1.1875rem/1.55 var(--serif); color: var(--stone); }
.reading-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(32px, 6vw, 104px); }
.reading-lead { position: relative; align-self: start; min-height: 380px; padding: clamp(28px, 3vw, 40px); border-radius: 14px; background: var(--sky); overflow: hidden; }
.reading-lead::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; background: var(--sun); opacity: .9; transition: scale .6s var(--ease); }
.reading-lead:hover::after { scale: 1.12; }
.reading-lead > * { position: relative; z-index: 1; }
.reading-lead h3 { margin: 0; max-width: 12em; font: 500 clamp(2rem, 3.4vw, 3rem)/1.06 var(--serif); letter-spacing: -0.02em; }
.reading-lead h3 a { color: var(--night); text-decoration: none; }
.reading-lead h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.reading-lead > p { max-width: 27em; margin: 20px 0 0; font: 400 1.1875rem/1.6 var(--serif); }
.reading-list { margin: 0; padding: 0; list-style: none; }
.reading-list li { padding: 16px 0 18px; border-top: 1px solid var(--line); }
.reading-list a { display: block; font: 500 1.25rem/1.25 var(--serif); letter-spacing: -0.01em; color: var(--night); text-decoration: none; text-wrap: balance; transition: translate .3s var(--ease); }
.reading-list a:hover { translate: 6px 0; color: var(--indigo); }
.reading-list p { margin: 8px 0 0; font: 400 0.96875rem/1.55 var(--sans); color: var(--stone); }

/* closing band: the phone number on the sun */
.call { position: relative; background: var(--sun); color: var(--ink); }
.call > .wrap { padding-top: var(--section); padding-bottom: clamp(40px, 5vw, 64px); }
.call-title { margin: 0; font: 500 clamp(1.75rem, 2.6vw, 2.375rem)/1.2 var(--serif); letter-spacing: -0.01em; color: var(--night); }
.call-en { display: block; max-width: 30em; margin-top: 10px; font: 400 1.1875rem/1.55 var(--serif); letter-spacing: 0; color: rgba(29, 28, 26, .8); }
.call-number { margin: clamp(22px, 3vw, 34px) 0 0; font: 500 clamp(3rem, 10.4vw, 8.75rem)/1 var(--serif); letter-spacing: -0.035em; }
@media (max-width: 480px) { .call-number { font-size: min(3rem, 12.2vw); } }
.call-number a { display: inline-block; color: var(--night); white-space: nowrap; text-decoration: none; border-bottom: 0.045em solid var(--night); padding-bottom: 0.05em; }
.call-number a:hover { color: var(--indigo); }
.odo { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
[data-odometer] [aria-hidden="true"] { user-select: none; -webkit-user-select: none; }   /* copying the number gives the number */
.odo-strip { display: flex; flex-direction: column; transition: translate 1.6s cubic-bezier(.16, .8, .2, 1); transition-delay: calc(var(--k) * 70ms); }
.odo-strip > span { display: block; height: 1em; line-height: 1; }
.rolled .odo-strip { translate: 0 calc(var(--n) * -1em); }
.call-note { margin: 22px 0 0; font: 500 1.0625rem/1.5 var(--sans); color: rgba(29, 28, 26, .82); }
.call-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 30px 0 0; }
.call .textlink { color: var(--night); background-image: linear-gradient(var(--night), var(--night)); }
.call-houses { height: clamp(48px, 5.2vw, 74px); margin-top: clamp(8px, 2vw, 24px); overflow: hidden; }
.call-houses .win { fill: var(--sun); }

/* ---------- inner pages ---------- */
.page-head { position: relative; overflow: hidden; background: var(--sky); --strip-h: max(110px, 18.06vw); padding: clamp(28px, 4vw, 52px) 0 calc(var(--strip-h) * .34 + 24px); }
.page-head > .wrap { position: relative; z-index: 2; }
.page-strip { position: absolute; left: 0; right: 0; bottom: 0; height: var(--strip-h); z-index: 1; pointer-events: none; }
.page-strip .scene { overflow: hidden; }
.page-head .page-title { max-width: 13em; }
@media (min-width: 1101px) {
  /* keep the words left of downtown: the towers start at about 58% of the width */
  .page-head { --text-room: calc(57vw - max(var(--gutter), (100vw - var(--wrap)) / 2 + var(--gutter))); }
  .page-head .page-title { max-width: min(13em, var(--text-room)); }
  .page-head .page-summary, .page-head .byline, .page-head .page-tl { max-width: min(34em, var(--text-room)); }
}
.crumbs { margin-bottom: clamp(22px, 3vw, 36px); font: 400 0.875rem/1.4 var(--sans); color: var(--stone); }
.crumbs a { display: inline-block; padding: 12px 6px; margin: -12px -6px; color: var(--stone); text-decoration-color: rgba(26, 38, 82, .25); text-underline-offset: 3px; }   /* a bigger target for thumbs, same layout */
.crumbs a:hover { color: var(--indigo); }
.crumbs .sep { margin: 0 6px; color: #8f9bb3; }
.page-title { max-width: 15em; margin: 0; font: 500 clamp(2.5rem, 5.4vw, 4.5rem)/1.03 var(--serif); letter-spacing: -0.03em; color: var(--night); }
.page-tl { margin: 16px 0 0; font: italic 400 1.3125rem/1.4 var(--serif); color: var(--stone); }
.page-summary { max-width: 34em; margin: 22px 0 0; font: 400 clamp(1.1875rem, 1.5vw, 1.375rem)/1.55 var(--serif); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 30px 0 0; }
.page-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px clamp(32px, 6vw, 96px); align-items: end; }
.head-contact { display: flex; align-items: center; gap: 16px; align-self: start; margin-top: clamp(6px, 1.2vw, 18px); padding: 16px 24px 16px 16px; border-radius: 999px; background: #fff; box-shadow: 0 18px 40px -26px rgba(26, 38, 82, .55); }
.head-contact img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; flex: none; }
.head-contact p { margin: 0; }
.head-contact-label { font: 500 0.9375rem/1.3 var(--sans); color: var(--stone); }
.head-contact-phone { margin-top: 2px !important; font: 500 1.75rem/1.1 var(--serif); letter-spacing: -0.015em; }
.head-contact-phone a { color: var(--night); white-space: nowrap; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }

.byline { display: flex; align-items: center; gap: 12px; margin: 26px 0 0; font: 400 0.9375rem/1.45 var(--sans); color: var(--stone); }
.byline img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid #fff; }

/* prose */
.prose { font: 400 1.1875rem/1.65 var(--serif); }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.05em; }
.prose h2 { margin: 2.1em 0 0.55em; font: 500 clamp(1.75rem, 2.5vw, 2.125rem)/1.18 var(--serif); letter-spacing: -0.015em; color: var(--night); }
.prose h3 { margin: 1.7em 0 0.4em; font: 600 1.25rem/1.35 var(--serif); color: var(--night); }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.25em; }
.prose li { margin: 0 0 0.45em; padding-left: 0.15em; }
.prose li::marker { color: var(--gold-ink); }
.prose a { color: var(--ink); text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose a:hover { color: var(--indigo); }
.prose strong { font-weight: 650; }
.prose blockquote { margin: 1.4em 0; padding-left: 1.1em; border-left: 3px solid var(--sun); font-style: italic; }
.prose table { width: 100%; margin: 1.6em 0; border-collapse: collapse; font: 400 0.96875rem/1.45 var(--sans); }
.prose th { padding: 10px 14px 10px 0; border-bottom: 1.5px solid var(--night); text-align: left; font-weight: 600; vertical-align: bottom; }
.prose td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-scroll { overflow-x: auto; margin: 1.6em 0; }
.table-scroll table { margin: 0; }
.measure { max-width: 38em; }

/* articles and guides */
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(40px, 7vw, 112px); align-items: start; }
.article { max-width: 38em; }
.article-aside { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 28px; }
.aside-block { padding: 24px; border-radius: 14px; background: var(--sky-soft); }
.aside-title, .aside-block .aside-title { margin: 0 0 10px; font: 600 1rem/1.35 var(--sans); color: var(--night); }
.aside-block p { margin: 0 0 14px; font: 400 0.96875rem/1.55 var(--sans); color: var(--stone); }
.aside-block p:last-child { margin-bottom: 0; }
.aside-block .aside-phone { margin: 4px 0 8px; font: 500 1.75rem/1.1 var(--serif); letter-spacing: -0.01em; color: var(--night); }
.aside-phone a { color: var(--night); white-space: nowrap; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.aside-block ul { margin: 0; padding: 0; list-style: none; }
.aside-block li { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.aside-block li:last-child { border-bottom: 0; }
.aside-block li a { font: 500 1.0625rem/1.35 var(--serif); color: var(--night); text-decoration: none; }
.aside-block li a:hover { color: var(--indigo); text-decoration: underline; text-decoration-color: var(--gold); }

.key-points { margin: 0 0 2.4em; padding: 26px 30px 12px; border-radius: 14px; background: var(--sun-soft); }
.prose .key-points h2 { margin: 0 0 12px; font: 600 1rem/1.3 var(--sans); letter-spacing: 0; }
.key-points ul { margin-bottom: 0.8em; }
.key-points li { font-size: 1.0625rem; }

.sources { margin-top: 3.4em; padding-top: 1.3em; border-top: 1px solid var(--line); font: 400 0.9375rem/1.55 var(--sans); color: var(--stone); }
.prose .sources h2 { margin: 0 0 10px; font: 600 1rem/1.3 var(--sans); letter-spacing: 0; color: var(--ink); }
.sources ul { padding-left: 1.1em; }
.sources a { color: var(--stone); }

.toc { margin: 0 0 2.6em; padding: 22px 26px; border-radius: 14px; background: var(--sky-soft); }
.toc-title { margin: 0 0 8px !important; font: 600 1rem/1.3 var(--sans); }
.toc ol { margin: 0; padding-left: 1.3em; font: 400 1.0625rem/1.5 var(--serif); }
.toc li { margin: 0 0 4px; }

.nc-part { scroll-margin-top: 96px; }
.tl-summary { margin: 1.5em 0 0; padding: 16px 20px; border-radius: 12px; background: var(--sun-soft); }
.prose .tl-label { margin: 0 0 4px; font: 600 0.9375rem/1.3 var(--sans); color: var(--gold-ink); }
.tl-summary p { font-style: italic; color: #3a3733; }
.tl-summary p:last-child { margin-bottom: 0; }

/* facts, communities */
.community-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(40px, 7vw, 112px); align-items: start; }
.facts { margin: 0; }
.facts div { padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.facts div:last-child { border-bottom: 0; }
.facts dt { margin: 0 0 3px; font: 600 0.8125rem/1.3 var(--sans); color: var(--stone); }
.facts dd { margin: 0; font: 400 1rem/1.5 var(--sans); }
.facts dd a { color: var(--ink); font-weight: 600; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.facts-cta { margin-top: 18px; }
.facts-cta p { margin: 0 0 14px; font: 400 0.96875rem/1.55 var(--sans); color: var(--stone); }
.hood-list { margin: 0; }
.hood-list div { padding: 16px 0 18px; border-top: 1px solid var(--line); }
.hood-list dt { font: 600 1.25rem/1.3 var(--serif); color: var(--night); }
.hood-list dd { margin: 4px 0 0; }
.inline-list { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.inline-list a { display: inline-block; padding: 10px 20px; border-radius: 999px; background: #fff; font: 500 1.25rem/1.2 var(--serif); color: var(--night); text-decoration: none; transition: background-color .2s, color .2s, translate .3s var(--ease); }
.inline-list a:hover { background: var(--night); color: #fff; translate: 0 -2px; }

/* index pages */
.listing { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.listing li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px clamp(24px, 4vw, 56px); padding: 28px 0 30px; border-bottom: 1px solid var(--line); }
.listing h2 { margin: 0; font: 500 clamp(1.5rem, 2.2vw, 1.875rem)/1.2 var(--serif); letter-spacing: -0.015em; }
.listing h2 a { color: var(--night); text-decoration: none; display: inline-block; transition: translate .3s var(--ease); }
.listing h2 a:hover { translate: 6px 0; color: var(--indigo); }
.listing p { margin: 0; max-width: 36em; font: 400 1.0625rem/1.55 var(--serif); color: var(--stone); }
.listing .meta { margin-top: 10px; font: 400 0.875rem/1.4 var(--sans); }
.listing-intro { margin-bottom: clamp(32px, 4vw, 52px); }

/* seller services and steps */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 5vw, 80px); }
.split-head h2, .steps-head h2, .faq-head h2 { font-size: clamp(2rem, 3vw, 2.75rem); }
.split-head p { margin: 18px 0 0; max-width: 22em; font: 400 1.1875rem/1.55 var(--serif); color: var(--stone); }
.services-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 32px; margin-bottom: clamp(26px, 4vw, 44px); }
.services-head p { margin: 0; font: 400 1.1875rem/1.55 var(--serif); color: var(--stone); }
.service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 72px); margin: 0; padding: 0; list-style: none; }
.service-grid li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px 16px; padding: 22px 0 24px; border-top: 1px solid var(--line-soft); }
.service-grid .sun-glyph { grid-row: 1 / span 2; width: 28px; height: 28px; margin-top: 1px; }
.service-grid h3 { margin: 0; font: 500 1.375rem/1.25 var(--serif); letter-spacing: -0.01em; color: var(--night); }
.service-grid p { margin: 0; font: 400 1.0625rem/1.55 var(--serif); color: var(--stone); }

.steps-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 5vw, 80px); }
.steps-head p { margin: 18px 0 0; max-width: 22em; font: 400 1.1875rem/1.55 var(--serif); color: var(--stone); }
.step-list { position: relative; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step-list::before, .step-list::after { content: ""; position: absolute; left: 21px; top: 26px; width: 2px; }
.step-list::before { bottom: 30px; background: var(--line-soft); }
.step-list::after { height: calc((100% - 56px) * var(--progress, 0)); background: var(--sun); }
.step-list li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 20px; padding: 0 0 30px; counter-increment: step; }
.step-list li:last-child { padding-bottom: 0; }
.step-list li::before {
  content: counter(step); grid-row: 1 / span 2; position: relative; z-index: 1;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line-soft); color: var(--stone);
  font: 650 1rem/1 var(--sans);
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), scale .4s var(--ease);
}
.tinted .step-list li::before { background: var(--sky-soft); }
.step-list li.reached::before { background: var(--sun); border-color: var(--sun); color: var(--night); scale: 1.06; }
.step-list h3 { grid-column: 2; margin: 9px 0 6px; font: 500 1.375rem/1.25 var(--serif); color: var(--night); }
.step-list p { grid-column: 2; margin: 0; max-width: 36em; font: 400 1.0625rem/1.55 var(--serif); color: var(--stone); }

/* questions */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 5vw, 80px); }
.faq-head p { margin: 18px 0 0; max-width: 22em; font: 400 1.1875rem/1.55 var(--serif); color: var(--stone); }
.faq-items { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { margin: 0; font: 500 1.3125rem/1.35 var(--serif); color: var(--night); transition: color .2s; }
.faq-item summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--sky-soft); color: var(--night); font: 400 1.5rem/1 var(--sans);
  transition: rotate .35s var(--ease), background-color .25s;
}
.faq-item[open] summary::after { rotate: 45deg; background: var(--sun); }
.faq-item summary:hover h3 { color: var(--indigo); }
.faq-a { max-width: 38em; padding: 0 0 26px; }
.faq-a.prose { font-size: 1.0625rem; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq-item::details-content { height: 0; overflow: clip; transition: height .4s var(--ease), content-visibility .4s allow-discrete; }
  .faq-item[open]::details-content { height: auto; }
}

/* about */
.about-photo { width: 100%; max-width: 330px; margin: 0 0 32px; }
.about-photo img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 30px 60px -36px rgba(26, 38, 82, .6); rotate: 2deg; transition: rotate .6s var(--ease); }
.about-photo:hover img { rotate: 0deg; }
.about-main { padding-block: var(--section); }
.about-body { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(40px, 7vw, 112px); align-items: start; }
.about-main .aside-block { background: #fff; }

/* reviews */
.review-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 64px) clamp(32px, 6vw, 96px); }
.review blockquote p { font: italic 400 clamp(1.25rem, 1.8vw, 1.5rem)/1.45 var(--serif); color: var(--night); }
.review figcaption { color: var(--ink); }
.review figcaption span { color: var(--stone); }
.reviews-note { margin-top: clamp(48px, 6vw, 80px); }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 7vw, 112px); align-items: start; }
.contact-direct { display: flex; flex-direction: column; gap: 24px; }
.contact-ways .aside-phone { margin: 6px 0 4px; font: 500 clamp(2.25rem, 4vw, 3rem)/1.05 var(--serif); letter-spacing: -0.02em; }
.contact-ways p { margin: 0 0 10px; font: 400 0.96875rem/1.55 var(--sans); color: var(--stone); }
.next-steps ol { margin: 0; padding-left: 1.2em; font: 400 1.0625rem/1.55 var(--serif); }
.next-steps li { margin: 0 0 10px; }
.next-steps li::marker { color: var(--gold-ink); font-family: var(--serif); }

/* buying steps: a photo under the heading */
.steps-photo { width: min(100%, 320px); margin-top: clamp(32px, 4vw, 52px); }
.steps-photo img { rotate: 1.5deg; box-shadow: 0 30px 60px -36px rgba(26, 38, 82, .6); }
.steps-photo figcaption { margin-top: 16px; font: 400 0.9375rem/1.5 var(--sans); color: var(--stone); }

/* ---------- homes for sale ---------- */
/* Rene's own listing: a photo and the facts. On the home page in a tinted band, in full on /listings/. */
.sec .for-sale-title { margin-bottom: clamp(28px, 3.5vw, 44px); }
.own { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px clamp(32px, 5vw, 72px); align-items: start; }
.own-media { min-width: 0; }
.own-photo { margin: 0; }
.own-photo img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 30px 60px -38px rgba(26, 38, 82, .55); }
.own-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0 0; padding: 0; list-style: none; }
.own-thumb { display: block; border-radius: 10px; outline-offset: 2px; }
.own-thumbs img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; opacity: .72; transition: opacity .2s ease; }
.own-thumb:hover img, .own-thumb[aria-current="true"] img { opacity: 1; }
.own-thumb[aria-current="true"] { box-shadow: 0 0 0 3px var(--sun); }
.own-art { display: grid; place-items: center; aspect-ratio: 3 / 2; border-radius: 14px; background: var(--sky); }
.own-art .art { width: 46%; }
.own-label { margin: 0 0 10px; font: 600 0.9375rem/1.3 var(--sans); color: var(--gold-ink); }
.own-address { margin: 0; font: 500 clamp(1.875rem, 3vw, 2.625rem)/1.08 var(--serif); letter-spacing: -0.02em; color: var(--night); }
.own-where { margin: 10px 0 0; font: 400 1.0625rem/1.5 var(--sans); color: var(--stone); }
.own-price { margin: 18px 0 0; font: 600 clamp(1.75rem, 2.4vw, 2.125rem)/1.1 var(--sans); letter-spacing: -0.01em; color: var(--night); }
.own-facts { display: flex; flex-wrap: wrap; gap: 0; margin: 20px 0 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.own-facts div { flex: 1 1 auto; padding: 12px 18px 12px 0; }
.own-facts div + div { padding-left: 18px; border-left: 1px solid var(--line-soft); }
.own-facts dt { font: 600 0.8125rem/1.3 var(--sans); color: var(--stone); }
.own-facts dd { margin: 2px 0 0; font: 500 1.25rem/1.3 var(--serif); color: var(--ink); white-space: nowrap; }
.own-summary { margin: 20px 0 0; max-width: 34em; font: 400 1.125rem/1.55 var(--serif); }
.own-features { margin: 18px 0 0; padding: 0; list-style: none; columns: 2 15em; column-gap: 28px; }
.own-features li { position: relative; margin: 0 0 8px; padding-left: 20px; font: 400 1rem/1.45 var(--sans); break-inside: avoid; }
.own-features li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); }
.own-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 26px 0 0; }
.own-meta { margin: 18px 0 0; font: 400 0.875rem/1.5 var(--sans); color: var(--stone); }
.own-stale, .office-expired { display: none; }
.own.is-expired .own-stale { display: block; margin: 14px 0 0; padding: 12px 16px; border-radius: 10px; background: var(--sun-soft); font: 500 0.9375rem/1.45 var(--sans); }
.for-sale.is-expired { display: none; }
.own-full { scroll-margin-top: 110px; }
.own-full .own-address { font-size: clamp(2.125rem, 3.6vw, 3rem); }

/* everything else MaxWell Gold has for sale, by area */
.office-head { max-width: 46em; }
.office-note { margin: 16px 0 0; font: 400 1.0625rem/1.55 var(--serif); color: var(--stone); }
.office.is-expired .office-note, .office.is-expired .office-groups, .office.is-expired .office-live { display: none; }
.office.is-expired .office-expired { display: block; margin: 16px 0 0; font: 500 1.0625rem/1.55 var(--sans); }
.office-groups { columns: 2 24em; column-gap: clamp(32px, 5vw, 72px); margin-top: clamp(36px, 4vw, 56px); }   /* columns, not a grid: NE's long list doesn't leave a hole beside it */
.office-group { break-inside: avoid; padding-bottom: clamp(36px, 4vw, 56px); }
.office-area { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding-bottom: 12px; border-bottom: 2px solid var(--night); font: 500 1.5rem/1.2 var(--serif); color: var(--night); }
.office-area span { font: 500 0.875rem/1.3 var(--sans); color: var(--stone); }
.office-homes { margin: 0; padding: 0; list-style: none; }
.office-homes li { border-bottom: 1px solid var(--line-soft); }
.office-home { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "address price" "where where" "facts facts"; column-gap: 16px; padding: 14px 0; text-decoration: none; color: var(--ink); }
.oh-address { grid-area: address; font: 500 1.125rem/1.35 var(--serif); color: var(--night); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .2s ease; }
.office-home:hover .oh-address, .office-home:focus-visible .oh-address { text-decoration-color: var(--gold); }
.oh-price { grid-area: price; font: 600 1.0625rem/1.35 var(--sans); color: var(--night); }   /* no tabular-nums: this font sets the comma a digit wide */
.oh-where { grid-area: where; margin-top: 2px; font: 400 0.9375rem/1.45 var(--sans); color: var(--stone); }
.oh-facts { grid-area: facts; font: 400 0.9375rem/1.45 var(--sans); color: var(--stone); }
.office-guide { margin: 14px 0 0; font-size: 0.9375rem; }
.office-live { margin: 0; }
.listings-note { font: 400 1.1875rem/1.6 var(--serif); }
.listings-note p { margin: 0; }

/* ---------- forms ---------- */
.lead-form { max-width: 640px; }
.split .lead-form { max-width: none; }
.field { margin: 0 0 20px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.field label, .field legend { display: block; margin: 0 0 8px; padding: 0; font: 600 0.9375rem/1.3 var(--sans); color: var(--night); }
.optional { font-weight: 400; color: var(--stone); }
input[type="text"], input[type="tel"], input[type="email"], input[type="number"], select, textarea {
  display: block; width: 100%; min-height: 52px; padding: 12px 16px;
  background: #fff; color: var(--ink);
  font: 400 1.0625rem/1.4 var(--sans);
  border: 1px solid var(--field); border-radius: 10px;
  transition: border-color .15s ease, box-shadow .2s ease;
}
textarea { min-height: 120px; resize: vertical; }
select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231a2652' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo), 0 0 0 5px rgba(242, 180, 60, .55);
}
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }
fieldset.field { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.lang label, .amort label { display: inline-flex; align-items: center; gap: 8px; margin: 0 22px 8px 0; font: 400 1rem/1.3 var(--sans); }
input[type="radio"], input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--night); flex: none; }
.consent { margin: 6px 0 24px; }
.check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font: 400 0.9375rem/1.5 var(--sans); color: var(--stone); cursor: pointer; }
.check input { margin-top: 2px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form-note { margin: 0; font: 400 0.9375rem/1.45 var(--sans); color: var(--stone); }
.form-status { margin: 16px 0 0; padding: 14px 18px; border-radius: 10px; font: 500 1rem/1.5 var(--sans); }
.form-status:empty { display: none; }
.form-status.ok { color: var(--ok); background: #e5f3ea; }
.form-status.error { color: var(--error); background: #fbe9e6; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--error); }
.consent.invalid .check { color: var(--error); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- calculator ---------- */
.calc-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 5vw, 72px); padding: 40px 0 48px; border-top: 1px solid var(--line); }
.calc-inputs { min-width: 0; margin: 0; padding: 0; border: 0; }
.calc-inputs > legend { margin: 0 0 22px; padding: 0; font: 500 1.75rem/1.2 var(--serif); letter-spacing: -0.01em; color: var(--night); }
.affix { display: flex; align-items: center; background: #fff; border: 1px solid var(--field); border-radius: 10px; }
.affix:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo), 0 0 0 5px rgba(242, 180, 60, .55); }
.affix span { padding: 0 0 0 16px; font: 500 1.0625rem/1 var(--sans); color: var(--stone); }
.affix.suffix span { padding: 0 16px 0 0; }
.affix input { min-height: 50px; border: 0; box-shadow: none !important; padding-left: 8px; }
.affix.suffix input { padding-left: 16px; }
.field.narrow { max-width: 150px; }
.field-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hint { margin: 6px 0 0; font: 400 0.875rem/1.5 var(--sans); color: var(--stone); }
.more-costs { margin-top: 8px; }
.more-costs summary { display: inline-flex; align-items: center; gap: 12px; padding: 8px 0; list-style: none; font: 600 0.9375rem/1.3 var(--sans); color: var(--night); cursor: pointer; }
.more-costs summary::-webkit-details-marker { display: none; }
.more-costs summary::before {
  content: "+"; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--sky-soft); font: 400 1.25rem/1 var(--sans); transition: rotate .3s var(--ease), background-color .2s;
}
.more-costs[open] summary::before { rotate: 45deg; background: var(--sun); }
.more-costs[open] summary { margin-bottom: 14px; }
.calc-results { align-self: start; padding: 28px; border-radius: 14px; background: var(--night); color: var(--on-night); position: sticky; top: 92px; }
.result-main { margin: 0 0 20px; }
.result-label { display: block; margin-bottom: 4px; font: 600 0.9375rem/1.3 var(--sans); color: var(--on-night-muted); }
.result-main output { font: 500 clamp(2.5rem, 4.2vw, 3.5rem)/1.05 var(--serif); letter-spacing: -0.02em; color: var(--sun); }
.result-main .per { font: 400 1rem/1 var(--sans); color: var(--on-night-muted); }
.result-list { margin: 0; }
.result-list div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.result-list dt { font: 400 0.9375rem/1.4 var(--sans); color: var(--on-night-muted); }
.result-list dd { margin: 0; font: 600 1rem/1.4 var(--sans); white-space: nowrap; color: #fff; }
.calc-results .hint { color: var(--on-night-muted); }
.calc-warning { margin: 0 0 20px; padding: 2px 0 2px 14px; border-left: 3px solid var(--sun); font: 500 0.9375rem/1.5 var(--sans); color: #fff; }
.calc-results.is-invalid .result-main output { color: var(--on-night-muted); }
.calc-results.is-invalid .result-main .per { display: none; }
.calc-peek { display: none; }
.calc-after { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.calc-after p { margin: 0; max-width: 36em; font: 400 1.0625rem/1.55 var(--serif); color: var(--stone); }
.notice { padding: 14px 18px; border-radius: 10px; background: var(--sun-soft); font: 500 0.9375rem/1.5 var(--sans); }

/* ---------- footer ---------- */
.site-footer { padding: clamp(40px, 5vw, 64px) 0 40px; background: var(--night); color: var(--on-night); }
.footer-top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px clamp(32px, 5vw, 72px); }
.footer-card { display: flex; align-items: flex-start; gap: 24px; }
.footer-logo { width: 104px; height: 104px; flex: none; transition: rotate .8s var(--ease); }
.footer-card:hover .footer-logo { rotate: -8deg; }
.footer-name { margin: 0; font: 500 1.5rem/1.2 var(--serif); color: #fff; }
.footer-brokerage { margin: 4px 0 18px; font: 400 0.9375rem/1.5 var(--sans); color: var(--on-night-muted); }
.footer-phone { margin: 0; font: 500 1.875rem/1.1 var(--serif); letter-spacing: -0.01em; }
.footer-phone a { color: #fff; white-space: nowrap; text-decoration-color: var(--sun); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.footer-hours { margin: 10px 0 0; font: 400 0.9375rem/1.5 var(--sans); color: var(--on-night-muted); }
.footer-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
.footer-title { margin: 0 0 12px; font: 600 0.9375rem/1.3 var(--sans); color: var(--sun); }
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li { margin: 0 0 9px; }
.footer-col a { font: 400 0.9375rem/1.4 var(--sans); color: var(--on-night); text-decoration: none; transition: color .2s, padding-left .25s var(--ease); }
.footer-col a:hover { color: #fff; padding-left: 4px; }
.footer-legal { margin-top: clamp(48px, 6vw, 72px); padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .14); font: 400 0.8125rem/1.6 var(--sans); color: var(--on-night-muted); }
.footer-legal p { max-width: 74em; margin: 0 0 10px; }
.footer-legal a { color: var(--on-night); }

.action-bar { display: none; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* the hero: one sunrise when the page opens */
  .scene-far { animation: rise-in 1.3s var(--ease) both .05s; }
  .scene-near { animation: rise-in 1.3s var(--ease) both .15s; }
  .scene-city { animation: rise-in 1.4s var(--ease) both .3s; }
  .scene-homes, .scene-wins { animation: rise-in 1.1s var(--ease) both .45s; }
  .scene-sun { animation: sunrise 2.2s var(--ease) both .2s; }
  .scene-rays { animation: rays-in 2.6s var(--ease) both .2s; transform: rotate(calc(var(--p, 0) * 80deg)); }
  .win { transition: opacity .8s ease; }
  .hero-name .line > span { animation: line-up 1s var(--ease) both; animation-delay: calc(.2s + var(--i) * .12s); }
  .hero-name .role { animation: fade-up .8s var(--ease) both .55s; }
  .hero-lead { animation: fade-up .8s var(--ease) both .65s; }
  .hero-actions { animation: fade-up .8s var(--ease) both .75s; }
  .hero-portrait img { animation: portrait-in 1.2s var(--ease) both .4s; }
  .cloud.c1 { animation: drift 110s linear infinite -10s; }
  .cloud.c2 { animation: drift 150s linear infinite -70s; }
  .cloud.c3 { animation: drift 90s linear infinite -45s; }
  .marquee-track { animation: marquee 80s linear infinite; }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  .hero.is-away .cloud, .marquee.is-away .marquee-track { animation-play-state: paused; }

  /* content arriving as you scroll (classes added by site.js) */
  .can-reveal .rv { opacity: 0; translate: 0 26px; transition: opacity .8s ease, translate .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
  .can-reveal .rv.in { opacity: 1; translate: 0 0; }
  .can-reveal .rv-pop { opacity: 0; scale: .96; translate: 0 30px; transition: opacity .8s ease, scale .9s var(--ease), translate .9s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
  .can-reveal .rv-pop.in { opacity: 1; scale: 1; translate: 0 0; }
  .can-reveal .voice-lead .w { opacity: .14; transition: opacity .6s ease; transition-delay: calc(var(--i) * 55ms); }
  .can-reveal .voice-lead.in .w { opacity: 1; }

  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .2s ease both; }
  ::view-transition-new(root) { animation: vt-in .35s var(--ease) both; }
}
@keyframes rise-in { from { opacity: 0; translate: 0 44px; } }
@keyframes sunrise { from { translate: 0 110px; } }
@keyframes rays-in { from { rotate: -60deg; } }
@keyframes line-up { from { translate: 0 108%; } }
@keyframes fade-up { from { opacity: 0; translate: 0 16px; } }
@keyframes portrait-in { from { opacity: 0; translate: 0 36px; } }
@keyframes drift { to { transform: translateX(calc(100vw + 520px)); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; translate: 0 12px; } }
@media (prefers-reduced-motion: reduce) {
  .cloud { display: none; }
  .scene-sun, .scene-far, .scene-near, .scene-city { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .header-bar { gap: 16px; }
  .site-nav { gap: 12px; }
  .site-nav ul { gap: 2px; }
  .site-nav ul a { padding: 8px 8px; }
}
@media (max-width: 1120px) {
  .brand-agent { display: none; }   /* the brokerage stays: "with MaxWell Gold" */
}

@media (max-width: 1100px) {
  .page-head { padding-bottom: calc(var(--strip-h) * .86 + 20px); }
}

@media (max-width: 1040px) {
  .header-bar { min-height: 66px; }
  .brand-agent { display: block; }
  .nav-toggle {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
    background: var(--night); color: #fff; border: 0; border-radius: 999px;
    font: 600 0.9375rem/1 var(--sans); cursor: pointer;
  }
  .site-nav { display: none; }
  .site-nav.open {
    position: absolute; top: 100%; left: 0; right: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 24px; background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 24px -16px rgba(26, 38, 82, .3);
  }
  .site-nav.open ul { flex-direction: column; gap: 0; }
  .site-nav.open ul a { padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--line); font: 500 1.25rem/1.2 var(--serif); }
  .site-nav.open ul a[aria-current] { background: none; color: var(--night); text-decoration: underline; text-decoration-color: var(--sun); text-decoration-thickness: 3px; text-underline-offset: 6px; }
  .site-nav.open .nav-phone { align-self: flex-start; margin-top: 18px; padding: 14px 22px; font: 500 1.5rem/1.1 var(--serif); }
  .js .site-nav:not(.open) { display: none; }
  /* without JavaScript the menu can't open, so show the links as a wrapped row instead */
  html:not(.js) .header-bar { flex-wrap: wrap; padding-bottom: 10px; }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .site-nav { display: flex; flex-wrap: wrap; width: 100%; gap: 8px 12px; }
  html:not(.js) .site-nav ul { flex-wrap: wrap; }

}

@media (max-width: 960px) {
  .own { grid-template-columns: minmax(0, 1fr); }
  .panels { grid-template-columns: minmax(0, 1fr); }
  .panel { grid-template-columns: minmax(0, 1fr) 150px; grid-template-rows: auto; gap: 18px; align-items: end; }
  .panel-art { grid-column: 2; grid-row: 1; width: 150px; }
  .panel-body { grid-column: 1; grid-row: 1; }

  .article-grid, .community-grid, .about-body { grid-template-columns: minmax(0, 1fr); }
  .about-side { display: contents; }
  .about-photo { order: -1; max-width: 260px; margin: 0 0 8px; }
  .article-aside { position: static; }
  .calc-results { position: static; }
  /* results sit below the inputs here, so keep the payment in view while typing */
  .calc-peek {
    position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin: 22px 0 0; padding: 14px 20px; border-radius: 14px; background: var(--night); color: var(--on-night-muted);
    font: 600 0.9375rem/1.2 var(--sans); box-shadow: 0 14px 30px -18px rgba(26, 38, 82, .8);
  }
  .calc-peek b { font: 500 1.5rem/1 var(--serif); color: var(--sun); white-space: nowrap; }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  :root { --section: 64px; }
  .brand-mark { width: 44px; height: 26px; }
  .brand-name { font-size: 1rem; }
  .brand-sub { font-size: 0.75rem; }

  .hero { --scene-h: 150px; }
  .page-head { padding-bottom: calc(var(--strip-h) + 20px); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; grid-template-areas: "name" "call" "portrait" "copy"; min-height: 0; }
  .hero-scene { grid-area: 1 / 1 / 4 / 2; }
  .hero-call { display: block; }
  .hero-phone { display: none; }
  .hero-name { padding-top: 26px; }
  .hero-name .name { font-size: min(calc((100vw - 2 * var(--gutter)) / 6), 4.75rem); }
  .hero-name .role { margin-top: 14px; font-size: 1rem; }
  .hero-portrait { justify-self: center; width: min(360px, 90vw); margin: 18px 0 0; }
  .hero-copy { margin-inline: calc(-1 * var(--gutter)); padding: 26px var(--gutter) 44px; background: var(--paper); }
  .hero-lead { margin-top: 0; font-size: 1.1875rem; }
  .hero-actions { margin-top: 24px; }
  .hero-actions .button { width: 100%; }

  .talk-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "player"; gap: 26px; }
  .voice-photo { width: min(100%, 380px); margin-left: 0; }
  .steps-photo { width: min(100%, 260px); }
  .own-thumbs { gap: 8px; margin-top: 8px; }
  .own-facts div { padding-right: 12px; }
  .own-facts div + div { padding-left: 12px; }
  .own-actions .button { width: 100%; }
  .talk-player { margin-inline: calc(-1 * var(--gutter) / 2); border-radius: 12px; }
  .voices-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "lead" "more" "link"; }
  .voice-lead { position: static; padding-top: 0; }
  .voices-title { margin-bottom: 20px; }
  .voice-more { margin-top: 36px; }
  .sec h2 { font-size: 2.25rem; }
  .panel { grid-template-columns: minmax(0, 1fr); }
  .panel-art { grid-column: 1; grid-row: auto; width: 130px; }
  .panel-body { grid-row: auto; }
  .reading-grid { grid-template-columns: minmax(0, 1fr); }
  .reading-lead { min-height: 0; padding-bottom: 120px; }
  .reading-lead::after { width: 150px; height: 150px; right: -40px; bottom: -60px; }
  .page-head-grid { grid-template-columns: minmax(0, 1fr); }
  .head-contact { justify-self: start; padding: 12px 20px 12px 12px; gap: 12px; }
  .head-contact img { width: 54px; height: 54px; }
  .head-contact-phone { font-size: 1.5rem; }
  .service-grid { grid-template-columns: minmax(0, 1fr); }
  .about-photo { max-width: 220px; }
  .marquee-set span { font-size: 2rem; }

  .where-grid, .reading-grid, .split, .steps-grid, .faq-grid, .contact-grid, .calc-grid { grid-template-columns: minmax(0, 1fr); }
  .directory, .reading-list, .review-list { grid-template-columns: minmax(0, 1fr); }
  .listing li { grid-template-columns: minmax(0, 1fr); }
  .field-row, .field-row.three { grid-template-columns: minmax(0, 1fr); }
  .field.narrow { max-width: none; }
  .calc-results { padding: 22px; }
  .calc-peek { bottom: calc(80px + env(safe-area-inset-bottom)); }
  .call-actions .button, .page-actions .button { width: 100%; }

  .footer-card { flex-direction: column; }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

  .action-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px -20px rgba(26, 38, 82, .45);
  }
  .action-bar a {
    display: flex; align-items: center; justify-content: center; min-height: 48px;
    font: 600 1rem/1 var(--sans); color: var(--night); text-decoration: none;
    border: 1px solid var(--line-soft); border-radius: 999px; background: var(--sky-soft);
  }
  .action-bar a.primary { background: var(--sun); border-color: var(--sun); color: var(--night); }
  .action-bar.two { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 359px) {
  .brand-mark { display: none; }
  .nav-toggle { padding: 0 14px; }
}

@media print {
  .site-header, .action-bar, .review-note, .call, .article-aside, .hero-scene, .page-strip, .marquee, .hero-clouds, .hero-call, .calc-peek { display: none !important; }
  /* content that would have arrived on scroll is simply there on paper */
  .rv, .rv-pop, .voice-lead .w { opacity: 1 !important; translate: none !important; scale: none !important; transition: none !important; }
  details::details-content { content-visibility: visible !important; height: auto !important; }
  .faq-item summary::after { display: none; }
  .site-footer { background: none; color: #000; }
  body { padding: 0; }
}