/* Gaggi Group
   Built to look like the @gaggigroup Instagram feed: white and paper grey, heavy condensed
   headlines (Anton, like the JUST SOLD posts), black type, and the GG red for bars and buttons.
   Body text is Montserrat, which matches the GAGGI GROUP wordmark.
   The one signature moment: on the home page the two halves of the GG monogram slide together
   behind Sara and Lucas. */

/* ------------------------------------------------------------------ tokens */
:root {
  --white: #ffffff;
  --paper: #f2f2f3;          /* the light grey in the brand files */
  --paper-2: #e7e7e9;
  --ink: #10100f;            /* the brand's black */
  --ink-2: #1d1d1c;
  --text: #10100f;
  --text-soft: #4a4a4e;
  --line: #d6d6d9;
  --red: #e02f2e;            /* GG red: 5.8:1 on white, so it's safe for text and white-on-red */
  --red-deep: #b8201f;
  --on-ink: #f2f2f3;
  --on-ink-soft: #a9a9ad;

  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(3.3rem, 1.7rem + 5.2vw, 6.3rem);
  --fs-h1: clamp(3rem, 1.8rem + 4.6vw, 6rem);
  --fs-h2: clamp(2.4rem, 1.55rem + 3.1vw, 4.4rem);
  --fs-h3: clamp(1.65rem, 1.35rem + 0.9vw, 2.15rem);
  --fs-lead: clamp(1.08rem, 1rem + 0.35vw, 1.28rem);

  --gutter: clamp(16px, 4.6vw, 64px);
  --section: clamp(64px, 7.6vw, 120px);
  --topbar-h: 36px;
  --bar-h: 76px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 20px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
figure, blockquote { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--red); color: var(--white); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--gutter); top: -100px; z-index: 100; padding: 0.8rem 1.2rem; background: var(--ink); color: var(--white); font-weight: 600; font-size: 0.9rem; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--paper { background: var(--paper); }
.section--ink { background: var(--ink); color: var(--on-ink); }

/* The poster face. Anton is all-caps by design in the brand's posts. */
.display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.006em;
  line-height: 0.96;
  font-size: var(--fs-h2);
  text-wrap: balance;
}
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--text-soft); max-width: 40em; }
.small { font-size: 0.9rem; color: var(--text-soft); }

.link {
  display: inline-block;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.link:hover { color: var(--red-deep); }
.link--button { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
.section--ink .link:hover, .cta-split__half--red .link:hover { color: var(--white); text-decoration-color: currentColor; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0.8rem 1.45rem;
  border: 2px solid transparent; border-radius: 2px;
  font: 600 0.98rem/1.2 var(--sans); text-decoration: none; text-align: center;
  cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.btn--red { background: var(--red); color: var(--white); }
.btn--red:hover { background: var(--red-deep); }
.btn--line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--line:hover { background: var(--ink); color: var(--white); }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: var(--red); }
.btn--white { background: var(--white); color: var(--ink); }
.btn--white:hover { background: var(--ink); color: var(--white); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2rem; }

/* ------------------------------------------------------------------ header */
/* The brokerage strip scrolls away; the white bar sticks. Solid backgrounds only: a filter or
   backdrop-filter here would trap the fixed menu panel inside the header. */
.site-header { position: sticky; top: calc(-1 * var(--topbar-h)); z-index: 50; background: var(--white); }
.topbar { background: var(--ink); color: var(--on-ink); font-size: 0.8rem; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--topbar-h); }
.topbar p { margin: 0; }
.topbar__brokerage { font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__phones { display: flex; gap: 22px; white-space: nowrap; }
.topbar__phones a { text-decoration: none; color: var(--on-ink-soft); }
.topbar__phones a span { color: var(--white); font-weight: 600; }
.topbar__phones a:hover span { text-decoration: underline; }

.site-header__bar { display: flex; align-items: center; gap: 28px; min-height: var(--bar-h); }
.site-header { border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.is-scrolled .site-header { border-bottom-color: var(--line); }
.brand { flex: none; margin-right: auto; }
.brand img { width: 190px; height: auto; }
.nav__list { display: flex; gap: 4px; }
.nav__list a { display: block; padding: 0.55rem 0.7rem; font-weight: 600; font-size: 0.95rem; text-decoration: none; border-bottom: 3px solid transparent; }
.nav__list a:hover { color: var(--red-deep); }
.nav__list a[aria-current="page"] { border-bottom-color: var(--red); }
.header-cta { min-height: 46px; padding-inline: 1.1rem; font-size: 0.92rem; }
.header-cta[aria-current="page"] { background: var(--ink); }

.menu-toggle { display: none; align-items: center; gap: 10px; padding: 0.6rem 0.2rem; background: none; border: 0; cursor: pointer; font-weight: 600; }
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after { display: block; width: 22px; height: 2px; background: currentColor; transition: transform 0.2s, background-color 0.2s; }
.menu-toggle__bars { position: relative; }
.menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bars::before { top: -7px; }
.menu-toggle__bars::after { top: 7px; }
.menu-open .menu-toggle__bars { background: transparent; }
.menu-open .menu-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.menu-open .menu-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

.menu { display: none; }

@media (max-width: 1120px) {
  .nav, .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .menu {
    display: block; position: fixed; inset: var(--bar-h) 0 0 0; z-index: 49;
    background: var(--white); overflow-y: auto; border-top: 1px solid var(--line);
    visibility: hidden; opacity: 0; transition: opacity 0.2s, visibility 0s 0.2s;
  }
  .menu-open .menu { visibility: visible; opacity: 1; transition: opacity 0.2s; }
  .menu__inner { padding-block: 24px 40px; }
  .menu__list a { display: block; padding: 0.35rem 0; font: 400 clamp(2.2rem, 8vw, 3rem)/1.1 var(--display); text-transform: uppercase; text-decoration: none; }
  .menu__list a[aria-current="page"] { color: var(--red); }
  .menu__foot { display: grid; gap: 6px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-weight: 600; }
  .menu__foot a { text-decoration: none; }
}
@media (max-width: 600px) {
  :root { --bar-h: 64px; }
  .brand img { width: 158px; }
  .topbar__brokerage { font-size: 0.74rem; }
  .topbar__phones { display: none; }
}

/* ------------------------------------------------------------------ hero (home) */
.hero { overflow: hidden; background: var(--white); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); min-height: min(760px, calc(100svh - var(--bar-h) - var(--topbar-h))); }
.hero__text { padding-block: clamp(40px, 6vw, 88px); }
.hero__title { font-size: var(--fs-hero); line-height: 0.93; margin-bottom: 1.6rem; }
.hero__title span { display: block; }
.hero__title span:last-child { color: var(--red); }

/* The stage: the big GG behind Sara (left half) and Lucas (right half). The cut-outs fade out
   at the bottom (it's in the image), so the stage just ends at the hero's bottom edge. */
.hero__stage { position: relative; align-self: center; aspect-ratio: 1 / 1.04; width: 100%; max-width: 640px; justify-self: end; }
.gg { fill: currentColor; overflow: visible; }
.gg--hero { position: absolute; left: 3%; top: 2%; width: 94%; color: var(--red); }
.person { position: absolute; margin: 0; }
.person img { width: 100%; }
.person--sara { left: 4%; top: 13%; width: 54%; z-index: 2; }
.person--lucas { right: 7%; top: 9.5%; width: 35%; z-index: 1; }
.person figcaption {
  position: absolute; bottom: 22%; padding: 0.45rem 0.7rem;
  background: var(--white); font-size: 0.8rem; line-height: 1.3; white-space: nowrap; box-shadow: 0 0 0 1px var(--line);
}
.person figcaption strong { display: block; font-size: 0.92rem; }
.person--sara figcaption { left: 6%; }
.person--lucas figcaption { right: -8%; bottom: 14%; }

@media (prefers-reduced-motion: no-preference) {
  .js .page-home .gg--hero .gg__half { animation: gg-meet 1.15s var(--ease-out) 0.35s both; }
  .js .page-home .gg--hero .gg__half--l { --from: -86px; }
  .js .page-home .gg--hero .gg__half--r { --from: 86px; }
  .js .page-home .person { animation: rise 0.7s var(--ease-out) both; }
  .js .page-home .person--lucas { animation-delay: 0.08s; }
}
@keyframes gg-meet { from { transform: translateX(var(--from)); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; gap: 0; }
  .hero__text { padding-block: 36px 8px; }
  .hero__stage { justify-self: center; max-width: 520px; margin-top: 8px; }
}
@media (max-width: 600px) {
  .actions .btn { flex: 1 1 100%; }
  .person figcaption { font-size: 0.72rem; padding: 0.35rem 0.55rem; }
  .person figcaption strong { font-size: 0.82rem; }
  .person--lucas figcaption { right: -4%; }
}

/* ------------------------------------------------------------------ section heads */
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 48px; margin-bottom: clamp(28px, 3.6vw, 48px); }
.section-head .display { max-width: 12ch; }
.section-head p { max-width: 30em; color: var(--text-soft); margin: 0; }
.section-head p .link { color: var(--text); margin-top: 0.4rem; }

/* ------------------------------------------------------------------ deal cards (like the Instagram posts) */
.deals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
/* position: relative keeps the visually-hidden link text inside the card; without it, those
   absolutely positioned spans escape the phone swipe row and widen the whole page. */
.deal { position: relative; display: flex; flex-direction: column; background: var(--paper); }
.deal__label { order: 0; margin: 0; padding: 18px 20px 12px; font: 400 clamp(2.6rem, 2rem + 1.6vw, 3.4rem)/0.9 var(--display); text-transform: uppercase; }
.deal--listed .deal__label { color: var(--red); }
.deal__photo { order: 1; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.deal__photo img { width: 100%; height: 100%; object-fit: cover; }
.deal__address {
  order: 2; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 11px 20px;
  background: var(--red); color: var(--white);
  font: 600 0.8rem/1.35 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
}
.deal__area { font-weight: 500; letter-spacing: 0.12em; opacity: 0.86; }
.deal__body { order: 3; display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 18px 20px 20px; }
.deal__facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-weight: 600; font-size: 0.92rem; }
.deal__facts li { position: relative; padding-left: 13px; }
.deal__facts li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; background: var(--red); border-radius: 50%; }
.deal__story { margin: 0; color: var(--text-soft); font-size: 0.95rem; }
.deal__meta { margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--text-soft); }
.deal__meta a { display: table; margin-top: 4px; color: var(--text); font-weight: 600; }
.deal__meta a:hover { color: var(--red-deep); }

/* Type-only card: when the photo isn't Gaggi Group's to show (see showPhoto in tools/build.mjs). */
.deal--type .deal__photo { position: relative; display: grid; place-items: center; background: var(--paper); }
.gg--pattern { width: 46%; color: var(--paper-2); }

@media (max-width: 1000px) { .deals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* On phones a short set of cards (home, buy, sell) is a swipeable row, like a feed; /results stacks. */
@media (max-width: 700px) {
  .deals { grid-template-columns: 1fr; }
  .deals:not([data-deals="all"]) {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    padding-bottom: 8px; scrollbar-width: thin;
  }
  .deals:not([data-deals="all"]) .deal { flex: 0 0 84%; scroll-snap-align: start; }
}

/* ------------------------------------------------------------------ life stages */
.stages .display { margin-bottom: clamp(32px, 4vw, 56px); max-width: 14ch; }
.stages__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 2.6vw, 40px); border-top: 8px solid var(--red); }
.stage { position: relative; padding-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.stage::before { content: ""; position: absolute; left: 0; top: -8px; width: 8px; height: 26px; background: var(--red); }
.stage h3 { font: 400 var(--fs-h3)/1 var(--display); text-transform: uppercase; }
.stage p { color: var(--text-soft); margin: 0; }
.stage .link { margin-top: auto; padding-top: 6px; }
@media (max-width: 1000px) { .stages__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; border-top: 0; } .stage { border-top: 8px solid var(--red); } .stage::before { display: none; } }
@media (max-width: 600px) { .stages__list { grid-template-columns: 1fr; row-gap: 32px; } }

/* ------------------------------------------------------------------ builder's eye */
.builder__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.builder__photo { padding-left: 18px; }
.builder__photo img { width: 100%; aspect-ratio: 663 / 462; object-fit: cover; box-shadow: -18px 18px 0 var(--red); }
.builder__photo figcaption { margin-top: 32px; font-size: 0.88rem; color: var(--text-soft); max-width: 34em; }
.builder__text .display { margin-bottom: 1.2rem; max-width: 12ch; }
.builder__text .lead { color: var(--text); font-weight: 500; }
.builder__text p { color: var(--text-soft); }
.builder__text .link { margin-top: 0.8rem; }
@media (max-width: 860px) { .builder__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ moving team */
.network__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.network__intro .display { margin-bottom: 1.3rem; max-width: 11ch; }
.network__intro p { color: var(--on-ink-soft); max-width: 32em; }
.network__note { font-size: 0.88rem; padding-top: 14px; border-top: 1px solid #333; }
.network__list { display: flex; flex-wrap: wrap; font: 400 clamp(1.7rem, 1.2rem + 1.7vw, 2.7rem)/1.18 var(--display); text-transform: uppercase; }
.network__list li { white-space: nowrap; }
.network__list li:not(:last-child)::after { content: "/"; color: var(--red); margin-inline: 0.32em; }
@media (max-width: 860px) { .network__grid { grid-template-columns: 1fr; } .network__list li { white-space: normal; } }

/* ------------------------------------------------------------------ team */
.team__head { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 4.5vw, 64px); }
.team .display { max-width: 12ch; }
.team__quote { margin: 0; max-width: 36em; padding-left: clamp(16px, 2vw, 28px); border-left: 8px solid var(--red); }
.team__quote p { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.9rem); line-height: 1.35; font-weight: 500; font-style: italic; }
.team__quote footer { margin-top: 0.8rem; font-weight: 600; color: var(--text-soft); }
.team__people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-bottom: 2rem; max-width: 980px; }
.team__person h3 { font: 400 var(--fs-h3)/1 var(--display); text-transform: uppercase; }
.team__role { margin: 0.4rem 0 0.8rem; font-weight: 600; color: var(--red-deep); }
.team__person p { color: var(--text-soft); }
.team__person a { font-weight: 600; color: var(--text); }
@media (max-width: 860px) { .team__head { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .team__people { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ closing split */
.cta-split { display: grid; grid-template-columns: 1fr 1fr; }
.cta-split__half { padding: var(--section) var(--gutter); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.cta-split__half p { max-width: 30em; margin: 0; }
.cta-split__half--red { background: var(--red); color: var(--white); }
.cta-split__half--red .display { max-width: 9ch; }
.cta-split__half--paper { background: var(--paper); }
.cta-split__half--paper p { color: var(--text-soft); }
.lets-talk { width: clamp(190px, 18vw, 250px); margin: -6px 0 -4px -6px; }
@media (max-width: 800px) { .cta-split { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ inner pages */
.page-hero { position: relative; padding-block: clamp(44px, 6vw, 88px) clamp(40px, 5vw, 72px); border-bottom: 14px solid var(--red); }
.page-hero h1 { font-size: var(--fs-h1); max-width: 14ch; margin-bottom: 1.2rem; }
.page-hero .lead { max-width: 38em; }
.page-hero .actions { margin-top: 1.6rem; }
.page-hero--split .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
@media (max-width: 860px) { .page-hero--split .wrap { grid-template-columns: 1fr; } }
.page-hero__aside { padding: 20px 22px; background: var(--paper); font-size: 0.95rem; }
.page-hero__aside p { color: var(--text-soft); }
.page-hero__aside strong { color: var(--text); }

.split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.split > .display { position: sticky; top: calc(var(--bar-h) + 24px); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split > .display { position: static; } }
.prose { max-width: 40em; }
.prose h3 { font: 700 1.15rem/1.3 var(--sans); margin: 1.8em 0 0.5em; }
.prose h3:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--text-soft); }
.prose ul { margin: 0 0 1em; }
.prose ul li { position: relative; padding-left: 20px; margin-bottom: 0.55em; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; background: var(--red); }
.prose strong { color: var(--text); }
.section--ink .prose p, .section--ink .prose li { color: var(--on-ink-soft); }
.section--ink .prose strong { color: var(--white); }

/* Numbered steps: only for content that really is a sequence. */
.steps { counter-reset: step; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.steps li { counter-increment: step; display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 4px 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(step); grid-row: span 2; font: 400 3.2rem/0.9 var(--display); color: var(--red); }
.steps h3 { font: 700 1.15rem/1.3 var(--sans); }
.steps p { margin: 0; color: var(--text-soft); }
.section--paper .steps li { border-bottom-color: var(--paper-2); }

/* Short items (services, considerations): a rule on top of each, no boxes. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 28px clamp(20px, 2.4vw, 36px); }
.tile { padding-top: 16px; border-top: 4px solid var(--ink); }
.tile h3 { font: 700 1.08rem/1.3 var(--sans); margin-bottom: 6px; }
.tile p { margin: 0; color: var(--text-soft); }

.band { padding-block: clamp(48px, 6vw, 88px); }
.band--red { background: var(--red); color: var(--white); }
.band--red .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 48px; }
.band--red .display { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem); max-width: 16ch; }
.band--red p { max-width: 32em; margin: 0.8rem 0 0; }

/* ------------------------------------------------------------------ results filter */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filters button { min-height: 44px; padding: 0.5rem 1.1rem; border: 2px solid var(--ink); border-radius: 2px; background: var(--white); font-weight: 600; cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.filters button:hover { border-color: var(--red); }
.deal[hidden] { display: none; }
.results-empty { padding: 32px; background: var(--paper); }

/* ------------------------------------------------------------------ about */
.bio { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.bio + .bio { margin-top: var(--section); }
.bio__photo { position: sticky; top: calc(var(--bar-h) + 24px); background: var(--paper); overflow: hidden; }
.bio__photo .gg { position: absolute; inset: 6% -12% auto auto; width: 90%; color: var(--white); }
.bio__photo img { position: relative; width: 100%; }
.bio h2 { font-size: var(--fs-h2); }
.bio__role { margin: 0.6rem 0 1.4rem; font-weight: 600; color: var(--red-deep); font-size: 1.05rem; }
.bio__contact { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 1.6rem 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-weight: 600; }
.bio__contact a { text-decoration: none; }
.bio__contact a:hover { color: var(--red-deep); text-decoration: underline; }
.values { display: grid; gap: 18px; margin-top: 1.6rem; }
.values h3 { font: 700 1.05rem/1.3 var(--sans); margin-bottom: 4px; }
.values p { margin: 0; color: var(--text-soft); }
@media (max-width: 860px) {
  .bio { grid-template-columns: 1fr; }
  .bio__photo { position: relative; top: 0; width: min(320px, 78%); }
}

/* ------------------------------------------------------------------ market conditions */
.markets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.market { background: var(--white); padding: 26px 24px 28px; border-top: 8px solid var(--ink); }
.market--sellers { border-top-color: var(--red); }
.market h2 { font: 400 var(--fs-h3)/1 var(--display); text-transform: uppercase; margin-bottom: 14px; }
.market dl { margin: 0; }
.market dt { font-weight: 700; margin-top: 16px; }
.market dd { margin: 4px 0 0; color: var(--text-soft); }
@media (max-width: 960px) { .markets { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ moving road map (checklist) */
.roadmap { display: grid; gap: clamp(28px, 4vw, 48px); }
.phase { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 12px clamp(24px, 4vw, 64px); padding-top: 22px; border-top: 2px solid var(--ink); }
.phase h2 { font: 400 var(--fs-h3)/1 var(--display); text-transform: uppercase; }
.phase__when { margin-top: 8px; color: var(--text-soft); font-size: 0.95rem; }
.checklist { display: grid; gap: 4px; }
.checklist label { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px; margin-inline: -12px; cursor: pointer; border-radius: 2px; }
.checklist label:hover { background: var(--paper); }
.checklist input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--red); cursor: pointer; }
.checklist input:checked + span { color: var(--text-soft); text-decoration: line-through; text-decoration-color: var(--red); }
.checklist .tip { display: block; margin-top: 2px; font-size: 0.88rem; color: var(--text-soft); text-decoration: none; }
.roadmap-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.roadmap-tools p { margin: 0; color: var(--text-soft); font-size: 0.95rem; }
@media (max-width: 760px) { .phase { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ forms */
.form-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
@media (max-width: 900px) { .form-grid { grid-template-columns: 1fr; } }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; padding: clamp(20px, 3vw, 36px); background: var(--paper); }
.form fieldset { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; margin: 0; padding: 0; border: 0; min-width: 0; }
.form legend { grid-column: 1 / -1; padding: 0; margin-bottom: 4px; font: 400 1.6rem/1 var(--display); text-transform: uppercase; }
.form fieldset + fieldset { margin-top: 10px; padding-top: 22px; border-top: 1px solid var(--paper-2); }
.field { display: grid; gap: 6px; align-content: start; }
.field--full { grid-column: 1 / -1; }
.field label, .field .label { font-weight: 600; font-size: 0.92rem; }
.field .hint { font-weight: 400; color: var(--text-soft); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 0.7rem 0.85rem;
  background: var(--white); border: 2px solid #bdbdc2; border-radius: 2px; font-size: 1rem;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(224, 47, 46, 0.35); }
.field [aria-invalid="true"] { border-color: var(--red-deep); }
.field__error { min-height: 0; color: var(--red-deep); font-size: 0.86rem; font-weight: 600; }
.field__error:empty { display: none; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices label { position: relative; display: inline-flex; }
.choices input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choices span { display: inline-flex; align-items: center; min-height: 44px; padding: 0.5rem 0.95rem; border: 2px solid #bdbdc2; border-radius: 2px; background: var(--white); font-weight: 500; font-size: 0.95rem; }
.choices input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--white); }
.choices input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.form__foot p { margin: 0; font-size: 0.85rem; color: var(--text-soft); max-width: 34em; }
.form__status { grid-column: 1 / -1; padding: 16px 18px; background: var(--white); border-left: 6px solid var(--red); font-weight: 500; }
.form__status:focus { outline: none; }
@media (max-width: 600px) { .form, .form fieldset { grid-template-columns: 1fr; } }

.contact-list { display: grid; gap: 22px; margin-top: 1.6rem; }
.contact-list h2, .contact-list h3 { font: 700 1.05rem/1.3 var(--sans); }
.contact-list p { margin: 4px 0 0; color: var(--text-soft); }
.contact-list a { color: var(--text); font-weight: 600; }

/* ------------------------------------------------------------------ footer */
.site-footer { background: var(--ink); color: var(--on-ink-soft); font-size: 0.95rem; }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 36px clamp(24px, 3vw, 48px); padding-block: clamp(56px, 6vw, 88px) 40px; }
.footer__brand img { width: 210px; margin-bottom: 18px; }
.footer__brand p { max-width: 26em; }
.footer__social { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; }
.site-footer a { color: var(--on-ink); text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 0.25em; }
.footer__col h2 { margin-bottom: 14px; color: var(--white); font: 400 1.35rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.footer__col li { margin-bottom: 8px; }
.footer__people p { margin-bottom: 14px; }
.footer__people strong { display: block; color: var(--white); }
.footer__brokerage { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 22px 0; border-top: 1px solid #2c2c2b; }
.footer__brokerage img { width: 150px; padding: 10px 14px; background: var(--white); border-radius: 2px; box-sizing: content-box; }
.footer__brokerage p { margin: 0; }
.footer__brokerage strong { display: block; color: var(--white); font-size: 1.05rem; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; padding: 20px 0 32px; border-top: 1px solid #2c2c2b; font-size: 0.82rem; }
.footer__bottom p { margin: 0; max-width: 62em; }
@media (max-width: 1000px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ 404 */
.notfound { padding-block: clamp(56px, 8vw, 120px); }
.notfound .display { font-size: var(--fs-h1); max-width: 12ch; margin-bottom: 1.2rem; }

/* ------------------------------------------------------------------ print (the moving road map) */
@media print {
  .site-header, .site-footer, .roadmap-tools, .band, .cta-split { display: none !important; }
  body { font-size: 11pt; }
  .page-hero { border-bottom-width: 4px; padding-block: 0 12pt; }
  .page-hero h1 { font-size: 30pt; }
  .phase { break-inside: avoid; }
  .checklist label { padding: 3pt 0; margin: 0; }
}