/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  color-scheme: dark;
  --bg: #0a0b0d;
  --bg-raised: #111317;
  --bg-sunken: #07080a;
  --line: #22252c;
  --line-strong: #343842;
  --text: #edeef0;
  --muted: #8a8f9a;
  --accent: #c6ff3d;        /* acid lime */
  --accent-ink: #0a0b0d;    /* text on accent */
  --accent-2: #7c5cff;      /* ultraviolet */

  --nav-bg: rgba(10, 11, 13, .82);
  --page-bg: #0a0b0d;       /* the page colour itself; stays light inside dark-palette areas in light mode */
  --fs: 1;                  /* text-size multiplier, set from the header slider */
  --head-h: clamp(440px, 58vw, 660px);  /* height of a photo page heading */

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 4px;
  --section: clamp(72px, 10vw, 136px);
}

/* Light theme (header switch). Lime is unreadable as text on white, so the accent goes dark green. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f7f4;
  --bg-raised: #ffffff;
  --bg-sunken: #eeeeea;
  --line: #dfdfd9;
  --line-strong: #c6c6bd;
  --text: #14161a;
  --muted: #5b606a;
  --accent: #3d7a0a;
  --accent-ink: #ffffff;
  --nav-bg: rgba(247, 247, 244, .86);
  --page-bg: #f7f7f4;
}
/* Areas that sit on a photo or video keep the dark palette so their text stays readable. */
[data-theme="light"] .hero:not(.is-fading),
[data-theme="light"] .placeholder,
[data-theme="light"] .has-backdrop main,
[data-theme="light"] #contact,
[data-theme="light"] .page-head--photo,
[data-theme="light"] .about__portrait {
  color-scheme: dark;
  --bg: #0a0b0d;
  --bg-raised: #111317;
  --bg-sunken: #07080a;
  --line: #22252c;
  --line-strong: #343842;
  --text: #edeef0;
  --muted: #8a8f9a;
  --accent: #c6ff3d;
  --accent-ink: #0a0b0d;
  color: var(--text);
}
/* Light mode: the video fades into the white page on scroll. Once the fade is under way
   (main.js adds .is-fading) the hero drops the dark palette, so its text turns dark with it. */
[data-theme="light"] .hero { background: #f7f7f4; }
[data-theme="light"] .hero__video::after {
  background:
    linear-gradient(90deg, rgba(10, 11, 13, .78) 0%, rgba(10, 11, 13, .35) 55%, rgba(10, 11, 13, .15) 100%),
    linear-gradient(180deg, rgba(10, 11, 13, .55) 0%, rgba(10, 11, 13, .2) 45%, #0a0b0d 100%);
}
[data-theme="light"] .hero h1, [data-theme="light"] .hero .mono, [data-theme="light"] .hero__title { transition: color .3s, -webkit-text-stroke-color .3s, text-shadow .3s; }
/* a soft shadow keeps the white text readable while the background is part-way to white */
[data-theme="light"] .hero:not(.is-fading) h1, [data-theme="light"] .hero:not(.is-fading) > .hero__inner > div:first-child .mono, [data-theme="light"] .hero:not(.is-fading) .hero__title { text-shadow: 0 1px 14px rgba(10, 11, 13, .55); }
[data-theme="light"] .hero.is-fading .valuation { border-color: var(--line); }
/* ...and the hero's "Book an intro call" button, which takes the light theme's green. */
[data-theme="light"] .hero__cta .btn { background: #3d7a0a; border-color: #3d7a0a; color: #fff; }
[data-theme="light"] .hero__cta .btn:hover { background: #336a08; border-color: #336a08; color: #fff; }
/* ...except the valuation box, which goes back to the light palette on top of the dark hero. */
[data-theme="light"] .has-backdrop .guide__card,
[data-theme="light"] #contact .form,
[data-theme="light"] .valuation {
  color-scheme: light;
  --bg: #f7f7f4;
  --bg-raised: #ffffff;
  --bg-sunken: #eeeeea;
  --line: #dfdfd9;
  --line-strong: #c6c6bd;
  --text: #14161a;
  --muted: #5b606a;
  --accent: #3d7a0a;
  --accent-ink: #ffffff;
  color: var(--text);
  background: rgba(255, 255, 255, .95);
  border-color: transparent;
}
[data-theme="light"] .broker img { filter: invert(1); }

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: calc(16px * var(--fs));
  line-height: 1.4;
  letter-spacing: -0.04em;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

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

.mono {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: calc(12px * var(--fs));
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}

.accent { color: var(--accent); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--accent-ink); padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 0; }

/* ==========================================================================
   Buttons, chips
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: calc(13px * var(--fs));
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: transparent; color: var(--accent); }
.btn[disabled] { opacity: .5; cursor: wait; }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(4px); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: var(--font-body); letter-spacing: -0.02em; font-size: calc(12px * var(--fs));
  padding: 3px 8px;
  border: 1px solid var(--line-strong); border-radius: 99px;
  color: var(--muted);
}

/* ==========================================================================
   Top bar + nav
   ========================================================================== */
.topbar { border-bottom: 1px solid var(--line); background: var(--bg-sunken); }
/* header rows run edge to edge, so the name and phone sit at the left of the screen */
.topbar .wrap, .nav .wrap { max-width: none; }
.topbar .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 20px; min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
.topbar__group { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }
.topbar__group > a { white-space: nowrap; }
.topbar a:hover { color: var(--accent); }
/* social links in the top bar are brand logos; each takes its brand colour on hover */
.topbar__group--social { gap: 16px; }
.social { display: inline-flex; padding: 2px; transition: color .2s; }
.topbar .social--linkedin:hover { color: #0a66c2; }
.topbar .social--instagram:hover { color: #e4405f; }
.topbar .social--facebook:hover { color: #0866ff; }
/* realtor.com: their house mark used as a mask, so it takes the same grey / hover colour as the others */
.social--realtor i {
  /* assets/img/realtor-com-mark.png, inlined so the mask also works when the page is opened as a file */
  --realtor-mark: url("data:image/png;base64,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");
  display: block; width: 17px; height: 16px; background: currentColor;
  -webkit-mask: var(--realtor-mark) center / contain no-repeat;
  mask: var(--realtor-mark) center / contain no-repeat;
}
.topbar .social--realtor:hover { color: #d92228; }
.topbar .social--zillow:hover { color: #006aff; }
.topbar, .nav { --fs: 1; }  /* the header keeps its size so the menu never outgrows its row */

/* display settings: text-size slider and light/dark switch (built by main.js) */
.prefs { margin-left: auto; gap: 18px; }
.prefs label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.prefs__size span:last-child { font-size: 16px; }
.prefs input[type="range"] { width: 84px; accent-color: var(--accent); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch i { position: relative; width: 34px; height: 18px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--bg); transition: background .2s, border-color .2s; }
.switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s; }
.switch input:checked + i { border-color: var(--accent); }
.switch input:checked + i::after { transform: translateX(16px); background: var(--accent); }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 3px; }

.status-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-right: 8px;
  box-shadow: 0 0 0 0 rgba(198, 255, 61, .6);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 8px rgba(198, 255, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(198, 255, 61, 0); }
}

.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 24px; }

.logo { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: calc(18px * var(--fs)); letter-spacing: -0.02em; }
.nav .logo { font-weight: 700; }
.logo__mark {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-mono); letter-spacing: 0; font-weight: 700; font-size: calc(13px * var(--fs));
  border-radius: var(--radius);
}
.logo small { display: block; white-space: nowrap; font-family: var(--font-body); font-weight: 600; letter-spacing: 1px; font-size: calc(10px * var(--fs)); color: var(--muted); text-transform: uppercase; }

/* brokerage logo */
.broker { display: inline-flex; align-items: center; margin-right: auto; padding-left: 24px; border-left: 1px solid var(--line-strong); opacity: .85; transition: opacity .2s; }
.broker:hover { opacity: 1; }
.broker img { height: 26px; width: auto; }
.broker--footer { display: flex; margin: 0 0 14px; padding: 0; border: 0; }
.broker--footer img { height: 34px; }

.nav__menu { display: flex; align-items: center; gap: 32px; }
.nav__menu a:not(.btn) { font-size: calc(16px * var(--fs)); white-space: nowrap; color: var(--muted); transition: color .2s; }
.nav__menu a:not(.btn):hover,
.nav__menu a[aria-current="page"] { color: var(--text); }
.nav__menu .btn { padding: 10px 16px; }

.nav__toggle {
  display: none;
  background: none; border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--text); font-family: var(--font-body); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; font-size: calc(12px * var(--fs)); padding: 8px 12px; cursor: pointer;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; overflow: hidden; }

/* blueprint grid + glow */
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 70% 30%, #000 0%, transparent 75%);
  opacity: .7;
}
.hero::after {
  content: ''; position: absolute; pointer-events: none;
  width: 640px; height: 640px; right: -160px; top: -220px;
  background: radial-gradient(circle, rgba(124, 92, 255, .28), transparent 65%);
  filter: blur(20px);
}

/* looping video; opacity is driven by scroll position in main.js */
.hero__video { position: absolute; inset: 0; pointer-events: none; will-change: opacity; }
.hero__video video { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero__video::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 11, 13, .78) 0%, rgba(10, 11, 13, .35) 55%, rgba(10, 11, 13, .15) 100%),
    linear-gradient(180deg, rgba(10, 11, 13, .55) 0%, rgba(10, 11, 13, .2) 45%, var(--bg) 100%);
}

.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 80px);
  align-items: center;
  padding-top: clamp(64px, 9vw, 128px);
  padding-bottom: clamp(56px, 8vw, 104px);
}

.hero h1 { font-size: clamp(52px, 9.2vw, 132px); margin: 24px 0 0; }
.hero h1 span { display: block; }
.hero h1 .outline { color: transparent; -webkit-text-stroke: 1px var(--text); }

/* nudged right to line up with the optical edge of the big letters above */
.hero__title { margin-top: 18px; margin-left: clamp(3px, .5vw, 7px); font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 32px); letter-spacing: .02em; color: var(--muted); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* valuation box */
.valuation {
  display: grid; gap: 16px; min-width: 0;
  padding: clamp(20px, 3vw, 32px);
  background: rgba(7, 8, 10, .88);
  border: 1px solid var(--line-strong); border-radius: 8px;
  box-shadow: 0 30px 80px -30px rgba(124, 92, 255, .45), 0 0 0 1px rgba(255, 255, 255, .02) inset;
}
.valuation h2 { font-size: clamp(26px, 2.6vw, 34px); }
.valuation__lead { color: var(--muted); }
.valuation .btn { justify-content: center; }

/* terminal */
.terminal {
  background: rgba(7, 8, 10, .88);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-family: var(--font-mono); letter-spacing: 0; font-size: calc(13px * var(--fs)); line-height: 1.75;
  box-shadow: 0 30px 80px -30px rgba(124, 92, 255, .45), 0 0 0 1px rgba(255, 255, 255, .02) inset;
  min-width: 0;
}
.terminal__bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.terminal__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.terminal__bar span { margin-left: auto; color: var(--muted); font-size: calc(11px * var(--fs)); }
.terminal__body { padding: 18px 18px 20px; display: grid; gap: 10px; }
.terminal .prompt { color: var(--accent); }
.terminal .dim { color: var(--muted); }
.terminal__arg { display: grid; grid-template-columns: 12ch 1fr; align-items: center; gap: 12px; padding-left: 2ch; }
.terminal__arg label { color: #a892ff; white-space: nowrap; }
.terminal select {
  width: 100%; min-width: 0;
  appearance: none; -webkit-appearance: none;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23c6ff3d' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 10px;
  color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 9px 34px 9px 12px;
  font: inherit;
  cursor: pointer;
  transition: border-color .2s;
}
.terminal select:hover, .terminal select:focus { outline: none; border-color: var(--accent); }
.terminal__run {
  margin-top: 8px; padding: 12px 14px;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent); border-radius: var(--radius);
  font: inherit; font-weight: 500; text-align: left;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.terminal__run .prompt { color: inherit; margin-right: 6px; }
.terminal__run:hover { background: transparent; color: var(--accent); }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding: var(--section) 0; border-bottom: 1px solid var(--line); }
.section--raised { background: var(--bg-raised); }
/* Reviews: no hard lines; the raised background eases in and out of the page colour */
#about, #testimonials { border-bottom: 0; }
#testimonials { background: linear-gradient(180deg, var(--bg) 0, var(--bg-raised) 220px, var(--bg-raised) calc(100% - 220px), var(--bg) 100%); }

.section__head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  margin-bottom: clamp(32px, 5vw, 64px);
}
.section__head h2 { font-size: clamp(34px, 5vw, 64px); margin-top: 14px; }
.section__head p { color: var(--muted); max-width: 44ch; margin-top: 16px; }

.link-arrow { font-family: var(--font-body); font-weight: 500; font-size: calc(15px * var(--fs)); color: var(--muted); white-space: nowrap; border-bottom: 1px solid var(--line-strong); padding-bottom: 4px; transition: color .2s, border-color .2s; }
.link-arrow:hover { color: var(--accent); border-color: var(--accent); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   Listings
   ========================================================================== */
.listing {
  display: block;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-raised);
  overflow: hidden;
  transition: border-color .25s, transform .25s, opacity .6s ease;
}
.listing:hover { border-color: var(--accent); transform: translateY(-3px); }
.listing__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-sunken); }
.listing__media img { width: 100%; height: 100%; object-fit: cover; }
.listing__status, .listing__id {
  position: absolute; top: 12px;
  font-family: var(--font-body); font-weight: 600; letter-spacing: 1px; font-size: calc(11px * var(--fs)); text-transform: uppercase;
  padding: 4px 8px; border-radius: 2px;
}
.listing__status { left: 12px; background: var(--accent); color: var(--accent-ink); }
.listing__id { right: 12px; color: var(--muted); background: rgba(7, 8, 10, .7); }
.listing__body { padding: 20px; }
.listing__price { font-family: var(--font-display); font-size: calc(30px * var(--fs)); letter-spacing: -0.03em; line-height: 1.1; }
.listing__addr { margin-top: 10px; }
.listing__city { color: var(--muted); font-size: calc(14px * var(--fs)); }
.listing__specs {
  display: flex; gap: 18px;
  margin: 16px 0; padding: 12px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: var(--font-body); font-size: calc(14px * var(--fs)); color: var(--muted);
}
.listing__specs b { color: var(--text); font-weight: 500; }

/* image placeholders: blueprint house on gradient */
.placeholder {
  background-color: var(--bg-sunken);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150' fill='none' stroke='%23edeef0' stroke-opacity='.35' stroke-width='1'%3E%3Cpath d='M40 120V72l60-40 60 40v48z'/%3E%3Cpath d='M88 120V92h24v28M56 84h20v16H56zM124 84h20v16h-20zM20 120h160'/%3E%3Cpath stroke-dasharray='3 3' d='M100 32V12M40 72H16M160 72h24'/%3E%3C/svg%3E"),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    radial-gradient(circle at 30% 20%, rgba(124, 92, 255, .35), transparent 60%);
  background-size: 62% auto, 24px 24px, 24px 24px, cover;
  background-position: center, 0 0, 0 0, center;
  background-repeat: no-repeat, repeat, repeat, no-repeat;
}
.placeholder--1 { background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150' fill='none' stroke='%23edeef0' stroke-opacity='.35' stroke-width='1'%3E%3Cpath d='M30 120V60h90v60M120 120V80h50v40M30 60l45-26 45 26'/%3E%3Cpath d='M48 76h22v18H48zM84 76h22v18H84zM134 94h22v26h-22zM14 120h172'/%3E%3C/svg%3E"),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    radial-gradient(circle at 75% 25%, rgba(198, 255, 61, .2), transparent 60%); }
.placeholder--2 { background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150' fill='none' stroke='%23edeef0' stroke-opacity='.35' stroke-width='1'%3E%3Cpath d='M36 120V56h128v64M28 56h144M36 56l12-18h104l12 18'/%3E%3Cpath d='M52 72h40v30H52zM108 72h40v48h-40zM128 72v48M16 120h168'/%3E%3C/svg%3E"),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    radial-gradient(circle at 50% 90%, rgba(124, 92, 255, .3), transparent 60%); }

/* ==========================================================================
   About
   ========================================================================== */
.about { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.about__portrait { position: relative; aspect-ratio: 4 / 5; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.about__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.about__portrait.placeholder { background-size: 0, 24px 24px, 24px 24px, cover; display: grid; place-items: center; }
.about__tag {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: 14px 16px; background: rgba(7, 8, 10, .82); border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 12px;
}
.about h2 { font-size: clamp(34px, 4.6vw, 58px); margin: 14px 0 28px; }
.about__copy p { color: var(--muted); font-size: calc(17px * var(--fs)); max-width: 60ch; }
.about__copy p + p { margin-top: 18px; }
.about__copy p b { color: var(--text); font-weight: 500; }

.seg { display: inline-flex; margin-top: 44px; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.seg button {
  padding: 9px 18px; border: 0; border-radius: 2px; background: none; color: var(--muted); cursor: pointer;
  font-family: var(--font-body); font-size: calc(12px * var(--fs)); font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  transition: background .2s, color .2s;
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.tips { margin-top: 20px; }
.tips-page { max-width: 820px; }
.tips-page .seg { margin-top: 0; }
.tips__intro { color: var(--muted); font-size: calc(17px * var(--fs)); margin-bottom: 24px; }
.tips__heading { font-size: calc(22px * var(--fs)); margin: 36px 0 16px; }
.tips > .tip:first-of-type, .tips__heading + .tip { border-top: 1px solid var(--line); }
.tip { border-bottom: 1px solid var(--line); }
.tip summary {
  display: flex; align-items: baseline; gap: 18px; padding: 18px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: calc(19px * var(--fs)); letter-spacing: -0.01em; line-height: 1.3;
  transition: color .2s;
}
.tip summary::-webkit-details-marker { display: none; }
.tip summary::after { content: '+'; margin-left: auto; font-family: var(--font-mono); font-size: calc(20px * var(--fs)); letter-spacing: 0; color: var(--accent); }
.tip[open] summary::after { content: '−'; }
.tip summary:hover { color: var(--accent); }
.tip__body { max-width: 70ch; padding: 0 28px 22px 0; color: var(--muted); font-size: calc(15px * var(--fs)); }
.tip__body p + p, .tip__body ul + p, .tip__body p + ul { margin-top: 12px; }
.tip__body li { position: relative; padding-left: 16px; }
.tip__body li + li { margin-top: 10px; }
.tip__body li::before { content: ''; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 1px; background: var(--line-strong); }

.contact-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.quote {
  display: flex; flex-direction: column; gap: 24px;
  padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
}
.quote blockquote { margin: 0; font-family: var(--font-display); font-size: calc(21px * var(--fs)); line-height: 1.35; letter-spacing: -0.015em; }
.quote blockquote::before { content: '// '; color: var(--accent); font-family: var(--font-mono); letter-spacing: 0; font-size: calc(14px * var(--fs)); }
.quote footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.quote footer b { display: block; font-weight: 500; font-size: calc(15px * var(--fs)); }

/* ==========================================================================
   Contact
   ========================================================================== */
/* street photo as the section's backdrop, under the same dark tint as the other photos */
#contact { position: relative; background: #0a0b0d url("../img/contact-street.jpg") center / cover no-repeat; }
#contact::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 11, 13, .82) 0%, rgba(10, 11, 13, .6) 55%, rgba(10, 11, 13, .5) 100%); }
#contact .form { background: rgba(7, 8, 10, .88); }
[data-theme="light"] #contact .form { background: rgba(255, 255, 255, .95); border-color: transparent; }
.contact { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.contact h2 { font-size: clamp(40px, 6vw, 84px); margin: 14px 0 24px; }
.contact__direct { margin-top: 40px; display: grid; gap: 14px; }
.contact__direct a { font-family: var(--font-display); font-size: calc(24px * var(--fs)); letter-spacing: -0.02em; }
.contact__direct a:hover { color: var(--accent); }

.form { display: grid; gap: 18px; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-sunken); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 8px; }
.field label { font-family: var(--font-body); font-weight: 600; letter-spacing: 1px; font-size: calc(11px * var(--fs)); text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 13px 14px;
  font: inherit; font-size: calc(15px * var(--fs));
  transition: border-color .2s;
}
/* address lookup: suggestions under the field, and a one-line result */
.field--address { position: relative; }
.addr-suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5; margin-top: -4px;
  background: var(--bg-raised); border: 1px solid var(--accent); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6);
}
.field--address .addr-hint:empty { display: none; }
.addr-suggest li { padding: 11px 14px; font-size: calc(15px * var(--fs)); color: var(--text); cursor: pointer; }
.addr-suggest li + li { border-top: 1px solid var(--line); }
.addr-suggest li:hover, .addr-suggest li.is-active { background: var(--accent); color: var(--accent-ink); }
.addr-hint { font-size: calc(12px * var(--fs)); color: var(--muted); }
.addr-hint.is-ok { color: var(--accent); }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.form__consent a { color: var(--text); border-bottom: 1px solid var(--line-strong); }
.form__consent a:hover { color: var(--accent); border-color: var(--accent); }
.form__consent { font-size: calc(12px * var(--fs)); color: var(--muted); line-height: 1.5; }
.form__status { font-family: var(--font-mono); letter-spacing: 0; font-size: calc(12px * var(--fs)); color: var(--accent); min-height: 18px; }
.hp { position: absolute; left: -9999px; }

/* ==========================================================================
   Search page / IDX slot
   ========================================================================== */
.page-head { padding: clamp(48px, 7vw, 96px) 0 clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(40px, 7vw, 88px); margin-top: 14px; }
/* photo behind a page title; it dissolves into the page so the content follows without a hard edge */
.page-head--photo {
  --fade: clamp(70px, 9vw, 120px);
  position: relative; height: var(--head-h); padding: 0;
  background-color: #0a0b0d; background-size: cover; background-position: center; border-bottom: 0;
}
.page-head--photo::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 11, 13, 0) calc(100% - var(--fade)), var(--page-bg) 100%),
    linear-gradient(180deg, rgba(10, 11, 13, .12) 0%, rgba(10, 11, 13, .42) 50%, rgba(10, 11, 13, .3) 100%);
}
/* the title sits large, half-way down the photo */
.page-head--photo .wrap { position: relative; height: 100%; }
.page-head--photo h1 {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 50%; margin: 0;
  font-size: clamp(44px, 8.4vw, 116px); line-height: 1; color: #edeef0;
  text-shadow: 0 2px 28px rgba(10, 11, 13, .6);
}
.page-head--photo + .section { padding-top: clamp(8px, 2vw, 24px); }
.page-head--photo .wrap { position: relative; }
.idx-slot { padding: clamp(32px, 5vw, 64px) 0 var(--section); min-height: 50vh; }
.idx-empty {
  border: 1px dashed var(--line-strong); border-radius: 8px;
  padding: clamp(28px, 5vw, 64px);
  font-family: var(--font-mono); letter-spacing: 0; font-size: calc(13px * var(--fs)); color: var(--muted); line-height: 1.9;
}
.idx-empty b { color: var(--text); font-weight: 400; }
.idx-empty .btn { margin-top: 24px; }

/* ==========================================================================
   Neighborhood guides
   ========================================================================== */
.community {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 250px; padding: 22px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
  transition: border-color .25s, background .25s, opacity .6s ease, transform .6s ease;
}
.community::before {
  content: attr(data-idx);
  position: absolute; top: 14px; right: 18px;
  font-family: var(--font-display); font-size: 84px; line-height: 1; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1px var(--line-strong);
  transition: -webkit-text-stroke-color .25s;
}
.community:hover { border-color: var(--accent); background-color: var(--bg-sunken); }
.community:hover::before { -webkit-text-stroke-color: var(--accent); }
.community h3 { font-size: calc(28px * var(--fs)); margin: 8px 0 14px; }
.community .go { position: absolute; top: 22px; left: 22px; }
/* the whole photo, scaled to the card's width; the gradient hides where it ends */
.community--photo { background-size: 100% auto; background-position: top center; background-repeat: no-repeat; }
/* wash over the photo so the text stays readable; follows the theme */
.community--photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 11, 13, .2) 0%, rgba(10, 11, 13, .55) 45%, var(--bg) 78%); }
.community--photo > *, .community--photo::before { z-index: 1; }
.community--photo > :not(.go) { position: relative; }
.community--photo::before { -webkit-text-stroke-color: rgba(237, 238, 240, .45); }
.community--photo .mono, .community--photo .chip { color: var(--text); }
.community--photo:hover::after { background: linear-gradient(180deg, rgba(10, 11, 13, .2) 0%, rgba(10, 11, 13, .55) 45%, var(--bg-sunken) 78%); }
/* light mode: the photo keeps its dark tint, and the text sits in a light box under it */
[data-theme="light"] .community--photo::after { background: linear-gradient(180deg, rgba(10, 11, 13, .2) 0%, rgba(10, 11, 13, .5) 46%, var(--bg-raised) 46%); }
[data-theme="light"] .community--photo:hover::after { background: linear-gradient(180deg, rgba(10, 11, 13, .2) 0%, rgba(10, 11, 13, .5) 46%, var(--bg-sunken) 46%); }
[data-theme="light"] .community--photo .go { color: #edeef0; }

/* guide page: fixed photo backdrop, one layer per guide with a data-photo */
/* translateZ gives the backdrop its own GPU layer, so scrolling the page over it doesn't repaint it */
.guide-backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: #0a0b0d; transform: translateZ(0); }
.guide-backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; }
/* the incoming photo fades in on top of the outgoing one, which stays solid until the fade ends */
.guide-backdrop img.is-active { opacity: 1; z-index: 2; transition: opacity .9s ease; will-change: opacity; }
.guide-backdrop img.is-prev { opacity: 1; z-index: 1; }
.guide-backdrop::after { content: ''; position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, rgba(10, 11, 13, .55), rgba(10, 11, 13, .8)); }
/* blurring a full-screen photo behind the sticky header on every frame is what stutters on large Retina displays */
.has-backdrop .nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
.has-backdrop .guide { background: transparent; border-bottom: 0; }
.has-backdrop .page-head { border-bottom: 0; }
.has-backdrop .guide__card { background: rgba(7, 8, 10, .86); }
[data-theme="light"] .has-backdrop .guide__card { background: rgba(255, 255, 255, .94); border-color: transparent; }
.has-backdrop .guide__head > p:last-child, .has-backdrop .page-head__lead { color: var(--text); }

.page-head__lead { color: var(--muted); font-size: calc(18px * var(--fs)); max-width: 60ch; margin-top: 20px; }
.guide__jump { margin-top: 28px; gap: 10px; }
/* city links sit on a photo: solid pill, bright text */
.guide__jump .chip {
  font-size: calc(15px * var(--fs)); font-weight: 600; padding: 9px 18px;
  color: #fff; background: rgba(7, 8, 10, .72); border-color: rgba(255, 255, 255, .45);
  transition: color .2s, border-color .2s, background .2s;
}
.guide__jump .chip:hover { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.guide__head { margin-bottom: clamp(28px, 4vw, 48px); }
.guide__head h2 { font-size: clamp(34px, 5vw, 64px); margin-top: 14px; }
.guide__head > p:last-child { color: var(--muted); font-size: calc(18px * var(--fs)); max-width: 60ch; margin-top: 16px; }
.guide__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.guide__card { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-sunken); }
.guide__card--wide { grid-column: 1 / -1; }
.guide__card b { color: var(--text); font-weight: 500; }
.guide__card--events { grid-column: 1 / -1; border-color: var(--line-strong); }
.guide__card h3 { font-size: calc(20px * var(--fs)); letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 14px; }
.guide__card li { position: relative; padding-left: 16px; color: var(--muted); font-size: calc(15px * var(--fs)); }
.guide__card li + li { margin-top: 8px; }
.guide__card li::before { content: ''; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 1px; background: var(--line-strong); }
.guide__card a { color: var(--text); border-bottom: 1px solid var(--line-strong); transition: color .2s, border-color .2s; }
.guide__card a:hover { color: var(--accent); border-color: var(--accent); }
.guide__card--parks a { border-bottom: 0; }
.guide__note { margin-top: 14px; font-size: calc(12px * var(--fs)); color: var(--muted); line-height: 1.5; }
.guide__links { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px 28px; }
.guide__card .guide__links li { padding-left: 0; margin-top: 0; }
.guide__card .guide__links li::before { content: none; }
.guide__links a { font-weight: 500; font-size: calc(16px * var(--fs)); }
.guide__links span { display: block; margin-top: 6px; font-size: calc(14px * var(--fs)); }

/* ==========================================================================
   Mortgage calculator
   ========================================================================== */
.calc { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.calc__result { padding: clamp(20px, 3vw, 36px); border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-raised); }
.calc__total { font-family: var(--font-display); font-size: clamp(44px, 6vw, 72px); line-height: 1; letter-spacing: -0.04em; margin: 12px 0 28px; font-variant-numeric: tabular-nums; }
.calc__total small { font-size: .3em; letter-spacing: -0.01em; color: var(--muted); margin-left: 6px; }
.calc__bar { display: flex; gap: 3px; height: 10px; }
.calc__bar i { flex: 0 1 0; min-width: 0; border-radius: 2px; transition: flex-grow .3s; }
.calc__bar i:nth-child(1), .calc__rows div:nth-child(1) dt i { background: var(--accent); }
.calc__bar i:nth-child(2), .calc__rows div:nth-child(2) dt i { background: var(--accent-2); }
.calc__bar i:nth-child(3), .calc__rows div:nth-child(3) dt i { background: var(--text); }
.calc__bar i:nth-child(4), .calc__rows div:nth-child(4) dt i { background: var(--muted); }
.calc__rows { margin: 20px 0 0; }
.calc__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.calc__rows dt { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.calc__rows dt i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.calc__rows dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.calc__rows--totals { margin-top: 8px; }
.calc__rows--totals div:last-child { border-bottom: 0; }
.calc__fine { margin-top: 16px; font-size: calc(12px * var(--fs)); color: var(--muted); line-height: 1.5; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { padding: 64px 0 32px; background: var(--bg-sunken); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer h4 { font-family: var(--font-body); font-weight: 600; letter-spacing: 1px; font-size: calc(12px * var(--fs)); text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.footer li { margin-bottom: 8px; font-size: calc(14px * var(--fs)); }
.footer a:hover { color: var(--accent); }
.footer address a { color: var(--text); }
.footer__links { margin-top: 14px; }
.footer__links li { font-size: calc(12px * var(--fs)); margin-bottom: 6px; }
.footer address { font-style: normal; font-size: calc(14px * var(--fs)); color: var(--muted); margin-top: 18px; line-height: 1.7; }
.footer__legal {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: calc(12px * var(--fs)); color: var(--muted); line-height: 1.7;
}
.footer__legal p + p { margin-top: 10px; }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; }
.footer__marks { display: flex; align-items: flex-end; gap: 28px; margin-top: 28px; color: var(--text); }
.footer__marks svg { height: 60px; width: auto; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* nav collapses to the Menu button before its links run out of room */
@media (max-width: 1340px) {
  .nav__toggle { display: block; }
  .nav__menu {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 18px;
    padding: 24px var(--gutter) 28px;
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .nav__menu.is-open { display: flex; }
}

@media (max-width: 960px) {
  .hero__inner, .about, .contact, .calc { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .about__portrait { max-width: 420px; }
}

@media (max-width: 720px) {
  .topbar__group--social { display: none; }
  .broker { padding-left: 14px; }
  .broker img { height: 20px; }
  .nav .logo small { display: none; }
  .nav .wrap { gap: 12px; }
  .nav .logo { white-space: nowrap; gap: 10px; }
  .grid-3, .form__row, .guide__grid { grid-template-columns: 1fr; }
  .section__head { flex-direction: column; align-items: flex-start; }
  .footer__grid { grid-template-columns: 1fr; }
  .terminal { font-size: calc(12px * var(--fs)); }
  .terminal select { font-size: calc(16px * var(--fs)); } /* below 16px iOS zooms the page on focus */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}