/* ==========================================================================
   property-polish — tokens + components
   Drop in wholesale. Pick ONE mood on <html data-mood="…">, then overwrite the
   6 brand variables at the top of that mood with values sampled from YOUR hero
   photo (scripts/palette_probe.py). Every pair here was measured ≥ 4.5:1.

   Moods (full rationale: playbook.md §1):
     twilight   dusk house, lit windows      navy ground · window-gold accent
     portal     listings / rent / buy        white · near-black · search is the hero
     builder    builders, developers, archs  sage ground · charcoal bands · thin/bold type
     lifestyle  agents-as-people, interiors  cream · marigold fill · thin display + serif
     trade      roofing, construction, reno  slate · safety-orange · heavy sans

   Fonts — load only the one for your mood:
     twilight  https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;800&display=swap
     portal    https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;800&family=Red+Hat+Text:wght@400;500;600&display=swap
     builder   https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,200;0,300;0,400;0,600;0,700;1,700&display=swap
     lifestyle https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500&display=swap
     trade     https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;800&display=swap
   ========================================================================== */

/* ---------- structure (mood-independent) ---------- */
:root {
  --pp-max: 1240px;
  --pp-gutter: clamp(16px, 4vw, 48px);
  --pp-section: clamp(64px, 9vw, 128px);
  --pp-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --pp-t-display: clamp(40px, 6.2vw, 88px);
  --pp-t-h2: clamp(30px, 3.6vw, 48px);
  --pp-t-h3: clamp(19px, 1.6vw, 22px);
  --pp-t-lede: clamp(16px, 1.3vw, 18px);
  --pp-t-body: 16px;
  --pp-t-small: 14px;
  --pp-t-label: 12px;
}

/* ---------- moods ----------
   Every mood defines the same variables. Brand-sampled ones come first.
   --pp-accent-text is the accent darkened until it passes AA as TEXT on the
   light surfaces of that mood; the raw accent is for fills and dark grounds. */

[data-mood="twilight"] {
  /* brand — sample from the photo: ground = the blue-hour sky, accent = the window glow */
  --pp-ground: #0e1828;
  --pp-accent: #dcb56c;
  --pp-on-accent: #1b1407;          /* gold takes DARK ink: 9.45:1. White on it is 1.93:1. */
  --pp-accent-text: #dcb56c;        /* gold on navy as type: 9.21:1 */
  --pp-ink: #f4efe4;
  --pp-ink-2: #b8c1cf;              /* 9.80:1 on ground — muted, but solid, never alpha */

  --pp-ground-2: #152238;
  --pp-surface: #1a2a42;
  --pp-line: #2c3d58;
  --pp-line-strong: #58698a;
  --pp-photo-ink: #f7f3ea;
  --pp-scrim: linear-gradient(90deg, rgba(8,14,26,.86) 0%, rgba(8,14,26,.62) 48%, rgba(8,14,26,0) 82%),
              linear-gradient(0deg, rgba(8,14,26,.9) 0%, rgba(8,14,26,0) 38%);
  --pp-band-surface: #ffffff; --pp-band-2: #ede7da;
  --pp-band: #f6f2ea; --pp-band-ink: #121c2c; --pp-band-ink-2: #4a5466;
  --pp-band-line: #ddd6c8; --pp-band-accent-text: #8b6621;

  --pp-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --pp-font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --pp-display-weight: 800; --pp-display-case: none; --pp-display-track: -0.03em;
  --pp-em-color: var(--pp-accent-text); --pp-em-weight: 800;
  --pp-r-btn: 8px; --pp-r-card: 18px; --pp-r-media: 14px;
}

[data-mood="portal"] {
  /* monochrome: the accent IS the ink. The photos carry all the colour. */
  --pp-ground: #ffffff;
  --pp-accent: #1e1e1b;
  --pp-on-accent: #ffffff;
  --pp-accent-text: #1e1e1b;
  --pp-ink: #1e1e1b;
  --pp-ink-2: #5c5c56;              /* 6.73:1 */

  --pp-ground-2: #f4f4f1;
  --pp-surface: #ffffff;
  --pp-line: #d9d9d3;
  --pp-line-strong: #1e1e1b;
  --pp-photo-ink: #ffffff;
  --pp-scrim: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,0) 45%);
  --pp-band-surface: #2a2a26; --pp-band-2: #262622;
  --pp-band: #1e1e1b; --pp-band-ink: #f4f4f1; --pp-band-ink-2: #b9b9b2;
  --pp-band-line: #3a3a36; --pp-band-accent-text: #f4f4f1;

  --pp-font-display: "Red Hat Display", system-ui, sans-serif;
  --pp-font-body: "Red Hat Text", system-ui, sans-serif;
  --pp-display-weight: 700; --pp-display-case: uppercase; --pp-display-track: -0.01em;
  --pp-em-color: inherit; --pp-em-weight: 700;
  --pp-r-btn: 4px; --pp-r-card: 4px; --pp-r-media: 4px;
}

[data-mood="builder"] {
  /* sage sampled from the garden/lawn; no chroma accent — emphasis is WEIGHT (200 vs 700) */
  --pp-ground: #e2edd6;
  --pp-accent: #1b1e19;
  --pp-on-accent: #e2edd6;
  --pp-accent-text: #1b1e19;
  --pp-ink: #1b1e19;
  --pp-ink-2: #454c40;              /* 7.34:1 */

  --pp-ground-2: #d6e3c8;
  --pp-surface: #e2edd6;
  --pp-line: #1b1e19;               /* builder hairlines are ink, 1px — they read as drafting lines */
  --pp-line-strong: #1b1e19;
  --pp-photo-ink: #e8f2dc;          /* mint display type set INSIDE the photo */
  --pp-scrim: linear-gradient(30deg, rgba(18,22,16,.62) 0%, rgba(18,22,16,.18) 45%, rgba(18,22,16,0) 65%);
  --pp-band-surface: #2e302e; --pp-band-2: #1f211f;
  --pp-band: #262826; --pp-band-ink: #e2edd6; --pp-band-ink-2: #b3bcab;   /* 12.25 / 7.57 */
  --pp-band-line: #4a4e48; --pp-band-accent-text: #e2edd6;

  --pp-font-display: "Inter Tight", system-ui, sans-serif;
  --pp-font-body: "Inter Tight", system-ui, sans-serif;
  --pp-display-weight: 700; --pp-display-case: uppercase; --pp-display-track: -0.035em;
  --pp-em-color: inherit; --pp-em-weight: 700;
  --pp-thin-weight: 200;
  --pp-r-btn: 0px; --pp-r-card: 0px; --pp-r-media: 0px;
}

[data-mood="lifestyle"] {
  /* cream wall + one marigold. Marigold is FILL ONLY: as text on cream it is 1.34:1. */
  --pp-ground: #ebe8dd;
  --pp-accent: #f5c25a;
  --pp-on-accent: #151513;          /* 11.10:1 */
  --pp-accent-text: #8a5f08;        /* the only marigold allowed as type: 4.60:1 on cream */
  --pp-ink: #151513;
  --pp-ink-2: #4b4943;              /* 7.34:1 */

  --pp-ground-2: #f6f4ee;
  --pp-surface: #f6f4ee;
  --pp-line: #cfcabb;
  --pp-line-strong: #151513;
  --pp-photo-ink: #ffffff;
  --pp-scrim: linear-gradient(0deg, rgba(24,18,10,.34), rgba(24,18,10,.34));
  --pp-band-surface: #22221f; --pp-band-2: #1c1c19;
  --pp-band: #151513; --pp-band-ink: #ebe8dd; --pp-band-ink-2: #bdb9ad;
  --pp-band-line: #3a3935; --pp-band-accent-text: #f5c25a;

  --pp-font-display: "Raleway", system-ui, sans-serif;
  --pp-font-body: "Source Serif 4", Georgia, serif;
  --pp-display-weight: 400; --pp-display-case: none; --pp-display-track: -0.02em;
  --pp-em-color: inherit; --pp-em-weight: 400;
  --pp-r-btn: 0px; --pp-r-card: 0px; --pp-r-media: 0px;
}

[data-mood="trade"] {
  /* slate from the overcast sky/steel; orange from the hi-vis vest */
  --pp-ground: #1d252c;
  --pp-accent: #f47b20;
  --pp-on-accent: #17100a;          /* 6.91:1. White on this orange is 2.73:1 — the reference got it wrong. */
  --pp-accent-text: #f47b20;        /* orange on slate: 5.69:1 */
  --pp-ink: #f5f2ec;
  --pp-ink-2: #c2c9d0;              /* 9.28:1 */

  --pp-ground-2: #26313a;
  --pp-surface: #26313a;
  --pp-line: #35424d;
  --pp-line-strong: #6b7a87;
  --pp-photo-ink: #f7f5f0;
  --pp-scrim: linear-gradient(90deg, rgba(17,23,28,.92) 0%, rgba(17,23,28,.7) 40%, rgba(17,23,28,.08) 78%);
  --pp-band-surface: #ffffff; --pp-band-2: #e9e5dc;
  --pp-band: #f3f0ea; --pp-band-ink: #1d252c; --pp-band-ink-2: #4d5761;
  --pp-band-line: #d8d3c9; --pp-band-accent-text: #b05009;   /* orange as text on the light band: 4.62:1 */

  --pp-font-display: "Archivo", system-ui, sans-serif;
  --pp-font-body: "Archivo", system-ui, sans-serif;
  --pp-display-weight: 800; --pp-display-case: none; --pp-display-track: -0.025em;
  --pp-em-color: var(--pp-accent-text); --pp-em-weight: 800;
  --pp-r-btn: 6px; --pp-r-card: 8px; --pp-r-media: 6px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pp-ground);
  color: var(--pp-ink);
  font: 400 var(--pp-t-body)/1.6 var(--pp-font-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--pp-accent); outline-offset: 3px; }
[data-mood="portal"] :focus-visible,
[data-mood="builder"] :focus-visible { outline-color: var(--pp-ink); }

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

/* A band flips the WHOLE set — grounds and surfaces too, not just inks. Components use
   --pp-ground as their "opposite ink" (tags, pressed segments, ink buttons) and --pp-surface
   for cards; flip only the inks and those go dark-on-dark. (Found on the first demo render.) */
.pp-band {
  background: var(--pp-band);
  --pp-ground: var(--pp-band);
  --pp-ground-2: var(--pp-band-2);
  --pp-surface: var(--pp-band-surface);
  --pp-line-strong: var(--pp-band-ink-2);
  --pp-ink: var(--pp-band-ink);
  --pp-ink-2: var(--pp-band-ink-2);
  --pp-line: var(--pp-band-line);
  --pp-accent-text: var(--pp-band-accent-text);
  color: var(--pp-ink);
}
.pp-alt { background: var(--pp-ground-2); }

/* ---------- type ---------- */
.pp-display {
  margin: 0;
  font-family: var(--pp-font-display);
  font-size: var(--pp-t-display);
  font-weight: var(--pp-display-weight);
  line-height: 1.02;
  letter-spacing: var(--pp-display-track);
  text-transform: var(--pp-display-case);
  text-wrap: balance;
}
.pp-display .pp-em { color: var(--pp-em-color); font-weight: var(--pp-em-weight); }
.pp-display .pp-line { display: block; }
.pp-thin { font-weight: var(--pp-thin-weight, 200); }
.pp-bold { font-weight: 700; }
.pp-h2 {
  margin: 0; font-family: var(--pp-font-display); font-size: var(--pp-t-h2);
  font-weight: var(--pp-display-weight); line-height: 1.08; letter-spacing: var(--pp-display-track);
  text-transform: var(--pp-display-case); text-wrap: balance;
}
[data-mood="lifestyle"] .pp-h2 { font-weight: 400; }
.pp-h3 { margin: 0; font-family: var(--pp-font-display); font-size: var(--pp-t-h3); font-weight: 700; line-height: 1.25; }
[data-mood="lifestyle"] .pp-h3 { font-weight: 500; }
.pp-lede { margin: 0; font-size: var(--pp-t-lede); line-height: 1.6; color: var(--pp-ink-2); max-width: 46ch; }
.pp-label {
  font-family: var(--pp-font-display); font-size: var(--pp-t-label); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--pp-ink-2);
}
.pp-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--pp-font-display); font-size: var(--pp-t-label); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
}
.pp-eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.pp-eyebrow--center::after { content: ""; width: 34px; height: 1px; background: currentColor; }

/* Hand-drawn marker under ONE word (lifestyle). Decoration, so it may be the raw accent. */
.pp-marker { position: relative; white-space: nowrap; }
.pp-marker::after {
  content: ""; position: absolute; left: -3%; right: -3%; bottom: -0.1em; height: 0.24em;
  background: var(--pp-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 40 6, 90 4, 197 9' stroke='black' stroke-width='6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 40 6, 90 4, 197 9' stroke='black' stroke-width='6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ---------- nav ---------- */
.pp-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.pp-nav--over { position: absolute; inset: 0 0 auto 0; z-index: 3; color: var(--pp-photo-ink); }
.pp-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--pp-font-display); }
.pp-logo svg { width: 34px; height: 34px; flex: none; }
.pp-logo b { display: block; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; }
.pp-logo small { display: block; margin-top: 4px; font-size: 10px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; line-height: 1; }
.pp-nav__links { display: flex; gap: clamp(18px, 2.4vw, 36px); list-style: none; margin: 0; padding: 0; font-size: var(--pp-t-small); font-weight: 500; }
.pp-nav__links a { text-decoration: none; padding-block: 8px; border-bottom: 2px solid transparent; }
.pp-nav__links a[aria-current="page"] { border-bottom-color: var(--pp-accent); }
[data-mood="portal"] .pp-nav__links a[aria-current="page"] { border-bottom-width: 1px; border-bottom-color: currentColor; }
.pp-nav__links--caps { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pp-nav__actions { display: flex; align-items: center; gap: 12px; }
.pp-nav__menu { display: none; }
@media (max-width: 900px) {
  .pp-nav__links, .pp-nav__actions .pp-hide-sm { display: none; }
  .pp-nav__menu { display: inline-flex; }
}

/* ---------- buttons & links ---------- */
.pp-btn {
  --h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 24px; border: 1.5px solid transparent; border-radius: var(--pp-r-btn);
  font: 600 15px/1 var(--pp-font-display); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .25s var(--pp-ease), background-color .25s, color .25s;
}
.pp-btn:hover { transform: translateY(-2px); }
.pp-btn svg { width: 16px; height: 16px; flex: none; }
.pp-btn--sm { --h: 42px; padding: 0 18px; font-size: 14px; }
.pp-btn--solid { background: var(--pp-accent); color: var(--pp-on-accent); }
.pp-btn--ink { background: var(--pp-ink); color: var(--pp-ground); }
.pp-btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
[data-mood="lifestyle"] .pp-btn { font-family: "Raleway", sans-serif; font-weight: 500; letter-spacing: .02em; min-width: 150px; }

.pp-link {
  display: inline-flex; align-items: center; gap: 22px; padding-bottom: 8px;
  border-bottom: 1px solid currentColor; text-decoration: none; font-size: var(--pp-t-small);
}
.pp-link svg { width: 14px; height: 14px; transition: transform .25s var(--pp-ease); }
.pp-link:hover svg { transform: translateX(4px); }

.pp-tag {
  display: inline-flex; align-items: center; min-height: 30px; padding: 0 14px; border-radius: 999px;
  background: var(--pp-ink); color: var(--pp-ground);
  font: 600 11px/1 var(--pp-font-display); letter-spacing: .14em; text-transform: uppercase;
}
.pp-tag--on-photo { background: #1d1f1c; color: #f2f5ee; }

.pp-iconbtn {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 999px;
  border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer;
}
.pp-iconbtn svg { width: 18px; height: 18px; }

/* ---------- heroes (one archetype per site) ---------- */
.pp-hero { position: relative; isolation: isolate; }
.pp-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.pp-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.pp-hero__media::after { content: ""; position: absolute; inset: 0; background: var(--pp-scrim); }

/* immersive — the house IS the page (twilight, trade) */
.pp-hero--immersive {
  min-height: clamp(600px, 92vh, 900px); display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--pp-photo-ink); --pp-ink: var(--pp-photo-ink); --pp-ink-2: var(--pp-photo-ink);
}
.pp-hero--immersive .pp-hero__body { padding-block: 132px 48px; }
.pp-hero--immersive .pp-lede { color: var(--pp-photo-ink); }

/* center — thin display centred over a warm scene (lifestyle) */
.pp-hero--center { min-height: clamp(560px, 84vh, 820px); display: grid; place-items: center; text-align: center; color: var(--pp-photo-ink); }
.pp-hero--center .pp-hero__body { padding-block: 120px 64px; display: grid; justify-items: center; gap: 36px; }
.pp-hero--center .pp-display { font-weight: 300; font-size: clamp(44px, 7vw, 96px); line-height: 1.04; }

/* split — headline left, lede + search right, photo below (portal) */
.pp-hero--split .pp-hero__top {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: end;
  padding-block: clamp(40px, 6vw, 88px) clamp(24px, 3vw, 36px);
}
/* the headline only gets ~55% of the row here, so the full display size wraps to 3 lines */
.pp-hero--split .pp-display { font-size: clamp(38px, 5.2vw, 76px); }
.pp-hero--split .pp-hero__photo { aspect-ratio: 16 / 7; border-radius: var(--pp-r-media); overflow: hidden; }
.pp-hero--split .pp-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .pp-hero--split .pp-hero__top { grid-template-columns: 1fr; }
  .pp-hero--split .pp-hero__photo { aspect-ratio: 4 / 3; }
}

/* inset — nav on the ground, air, then a framed photo with the headline set inside it (builder) */
.pp-hero--inset .pp-hero__photo { position: relative; aspect-ratio: 2 / 1; overflow: hidden; margin-top: clamp(40px, 7vw, 96px); }
.pp-hero--inset .pp-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.pp-hero--inset .pp-hero__photo::after { content: ""; position: absolute; inset: 0; background: var(--pp-scrim); }
.pp-hero--inset .pp-display {
  position: absolute; left: clamp(20px, 4vw, 56px); bottom: clamp(18px, 3vw, 40px); z-index: 1;
  color: var(--pp-photo-ink); font-size: clamp(40px, 7.4vw, 104px); line-height: .92;
}
@media (max-width: 700px) { .pp-hero--inset .pp-hero__photo { aspect-ratio: 4 / 5; } }

/* Phones: text spans the full width, so a left-to-right scrim no longer sits under it.
   Switch immersive heroes to a bottom-up scrim, and drop centred headlines to the lower
   third — faces live in the upper third of lifestyle photos. (Both found at 390px.) */
@media (max-width: 700px) {
  .pp-hero--immersive .pp-hero__media::after {
    background: linear-gradient(0deg,
      color-mix(in srgb, var(--pp-ground) 94%, transparent) 0%,
      color-mix(in srgb, var(--pp-ground) 80%, transparent) 55%,
      color-mix(in srgb, var(--pp-ground) 50%, transparent) 100%);
  }
  .pp-hero--center { place-items: end center; }
  .pp-hero--center .pp-hero__body { padding-block: 120px 56px; gap: 28px; }
  /* the lower third is where the pale stuff is (blankets, sofas, sheets) — darken it harder */
  .pp-hero--center .pp-hero__media::after {
    background: linear-gradient(0deg, rgba(24,18,10,.66) 0%, rgba(24,18,10,.5) 45%, rgba(24,18,10,.18) 75%);
  }
}

/* ---------- proof: stats ---------- */
.pp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pp-stat { display: flex; align-items: center; gap: 16px; padding: 8px 28px; border-left: 1px solid var(--pp-line-strong); }
.pp-stat:first-child { border-left: 0; padding-left: 0; }
.pp-stat svg { width: 34px; height: 34px; flex: none; color: var(--pp-accent); }
.pp-stat b { display: block; font: 700 28px/1.05 var(--pp-font-display); letter-spacing: -0.02em; }
.pp-stat span { display: block; margin-top: 4px; font-size: 13px; }
.pp-stats--glass {
  padding: 22px 28px; border-radius: var(--pp-r-card); border: 1px solid var(--pp-line);
  background: color-mix(in srgb, var(--pp-ground) 84%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
}
.pp-stats--glass .pp-stat:first-child { padding-left: 0; }
@media (max-width: 700px) {
  .pp-stats { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .pp-stat { border-left: 0; padding: 0; }
}

/* ---------- search ---------- */
.pp-search {
  display: flex; align-items: stretch; min-height: 64px; border: 1px solid var(--pp-line);
  border-radius: var(--pp-r-btn); background: var(--pp-surface); overflow: hidden;
}
.pp-search__field { flex: 1; display: flex; align-items: center; gap: 12px; padding-inline: 20px; min-width: 0; }
.pp-search__field svg { width: 20px; height: 20px; flex: none; color: var(--pp-ink); }
.pp-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--pp-ink);
  font: 400 16px var(--pp-font-body);
}
.pp-search input::placeholder { color: var(--pp-ink-2); opacity: 1; }
.pp-search__go {
  flex: none; width: 70px; border: 0; background: var(--pp-accent); color: var(--pp-on-accent);
  display: grid; place-items: center; cursor: pointer;
}
.pp-search__go svg { width: 20px; height: 20px; }
.pp-search:focus-within { border-color: var(--pp-line-strong); }

/* multi-field bar: location / type / price / beds + go (twilight luxury, portal) */
.pp-finder {
  display: grid; grid-template-columns: repeat(4, 1fr) auto; align-items: stretch;
  border-radius: var(--pp-r-card); background: var(--pp-surface); border: 1px solid var(--pp-line);
  color: var(--pp-ink); overflow: hidden;
}
.pp-finder label { display: grid; gap: 4px; padding: 14px 22px; border-left: 1px solid var(--pp-line); cursor: pointer; }
.pp-finder label:first-child { border-left: 0; }
.pp-finder label span { font: 600 11px/1 var(--pp-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--pp-ink-2); }
.pp-finder select {
  appearance: none; border: 0; background: transparent; color: var(--pp-ink); padding: 0; cursor: pointer;
  font: 600 15px/1.4 var(--pp-font-body);
}
.pp-finder select option { color: #111; }
.pp-finder .pp-btn { border-radius: 0; min-height: 100%; padding-inline: 30px; }
@media (max-width: 860px) {
  .pp-finder { grid-template-columns: 1fr 1fr; }
  .pp-finder label:nth-child(3) { border-left: 0; }
  .pp-finder label { border-top: 1px solid var(--pp-line); }
  .pp-finder label:nth-child(-n+2) { border-top: 0; }
  .pp-finder .pp-btn { grid-column: 1 / -1; min-height: 56px; }
}

/* ---------- filters ---------- */
.pp-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border: 1px solid var(--pp-line); border-radius: var(--pp-r-btn); }
.pp-seg button, .pp-choices button {
  min-height: 40px; border: 0; border-radius: calc(var(--pp-r-btn) - 1px); background: transparent; color: var(--pp-ink);
  font: 500 15px var(--pp-font-body); cursor: pointer;
}
.pp-seg button[aria-pressed="true"] { background: var(--pp-ink); color: var(--pp-ground); }
.pp-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pp-choices button { min-height: 46px; border: 1px solid var(--pp-line); }
.pp-choices button[aria-pressed="true"] { background: var(--pp-ink); color: var(--pp-ground); border-color: var(--pp-ink); }
.pp-check { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; cursor: pointer; }
.pp-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--pp-ink); }
.pp-filter { display: grid; gap: 14px; padding-block: 16px; }
.pp-filter > h3 { margin: 0; font: 600 17px var(--pp-font-display); }

.pp-range { position: relative; height: 24px; }
.pp-range::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--pp-line); }
.pp-range__fill { position: absolute; top: 11px; height: 2px; background: var(--pp-ink); }
.pp-range input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.pp-range input::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--pp-ground); border: 6px solid var(--pp-ink); cursor: grab;
}
.pp-range input::-moz-range-thumb { pointer-events: auto; width: 12px; height: 12px; border-radius: 50%; background: var(--pp-ground); border: 6px solid var(--pp-ink); cursor: grab; }
.pp-range input::-webkit-slider-runnable-track, .pp-range input::-moz-range-track { background: none; }

/* ---------- listing card (sells a listing) ---------- */
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.pp-card { display: grid; gap: 6px; text-decoration: none; }
.pp-card__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--pp-r-media); overflow: hidden; margin-bottom: 12px; background: var(--pp-ground-2); }
.pp-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--pp-ease); }
.pp-card:hover .pp-card__media img { transform: scale(1.04); }
.pp-card__media .pp-tag { position: absolute; top: 14px; left: 14px; }
.pp-card__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pp-price { font: 700 26px/1.1 var(--pp-font-display); letter-spacing: -0.02em; }
.pp-price small { font: 400 15px var(--pp-font-body); letter-spacing: 0; color: var(--pp-ink-2); margin-left: 4px; }
.pp-card__addr { font-size: 17px; line-height: 1.35; }
.pp-meta { display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 14px; color: var(--pp-ink-2); list-style: none; margin: 0; padding: 0; }
.pp-meta li + li::before { content: "•"; margin-right: 10px; }
.pp-save { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; color: var(--pp-ink); cursor: pointer; }
.pp-save svg { width: 26px; height: 26px; }
.pp-save[aria-pressed="true"] svg { fill: currentColor; }
.pp-card--panel { padding: 14px 14px 20px; border-radius: var(--pp-r-card); background: var(--pp-surface); border: 1px solid var(--pp-line); }

/* ---------- project card + rail (sells a build) ---------- */
.pp-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.pp-rail-nav { display: flex; gap: 14px; }
.pp-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 31.5%); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-right: calc(-1 * var(--pp-gutter)); padding-right: var(--pp-gutter);   /* last card bleeds: it tells you it scrolls */
}
.pp-rail::-webkit-scrollbar { display: none; }
.pp-rail > * { scroll-snap-align: start; }
@media (max-width: 700px) { .pp-rail { grid-auto-columns: 80%; } }
.pp-project { text-decoration: none; }
.pp-project__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--pp-r-media); }
.pp-project__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--pp-ease); }
.pp-project:hover .pp-project__media img { transform: scale(1.03); }
.pp-project__media .pp-tag { position: absolute; top: 16px; right: 16px; }
.pp-project__title { margin: 18px 0 6px; font: 300 21px/1.2 var(--pp-font-display); text-transform: uppercase; letter-spacing: -0.01em; }
.pp-project__title b { font-weight: 600; }
.pp-project__meta { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--pp-ink-2); }

/* ---------- numbered services list ---------- */
.pp-numlist { list-style: none; margin: 0; padding: 0; counter-reset: pp; border-bottom: 1px solid var(--pp-line); }
.pp-numlist li { counter-increment: pp; display: flex; gap: 22px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--pp-line); font: 400 clamp(19px, 1.8vw, 24px)/1.25 var(--pp-font-display); letter-spacing: -0.01em; }
.pp-numlist li::before { content: counter(pp); font-size: 12px; min-width: 14px; transform: translateY(-0.5em); }

/* ---------- services bar overlapping the hero (trade, twilight feature cards) ---------- */
.pp-servicebar {
  position: relative; z-index: 2; margin-top: -72px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  background: var(--pp-band); color: var(--pp-band-ink); border-radius: var(--pp-r-card);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.45);
  --pp-ink: var(--pp-band-ink); --pp-ink-2: var(--pp-band-ink-2); --pp-line: var(--pp-band-line);
  --pp-ground: var(--pp-band); --pp-surface: var(--pp-band-surface);
}
.pp-service { display: flex; gap: 18px; align-items: flex-start; padding: 28px 30px; border-left: 1px solid var(--pp-line); }
.pp-service:first-child { border-left: 0; }
.pp-service svg { width: 44px; height: 44px; flex: none; color: var(--pp-band-accent-text); }
.pp-service p { margin: 4px 0 0; font-size: 15px; color: var(--pp-ink-2); line-height: 1.5; }
@media (max-width: 760px) { .pp-service { border-left: 0; border-top: 1px solid var(--pp-line); } .pp-service:first-child { border-top: 0; } }

/* ---------- listing detail: gallery mosaic ---------- */
.pp-mosaic { display: grid; grid-template-columns: 2.2fr 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 8px; aspect-ratio: 2.4 / 1; }
.pp-mosaic > * { position: relative; overflow: hidden; border-radius: var(--pp-r-media); }
.pp-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.pp-mosaic > :first-child { grid-row: 1 / 3; }
.pp-mosaic > :last-child { grid-row: 1 / 3; grid-column: 3; }
.pp-mosaic__back {
  position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px;
  border-radius: var(--pp-r-btn); background: rgba(255,255,255,.92); color: #1e1e1b; text-decoration: none; font-size: 15px;
}
@media (max-width: 760px) {
  .pp-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; aspect-ratio: auto; }
  .pp-mosaic > :first-child { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .pp-mosaic > :not(:first-child) { aspect-ratio: 1; grid-row: auto; grid-column: auto; }
  .pp-mosaic > :last-child { display: none; }
}

/* ---------- map with price pins ---------- */
/* aspect-ratio only — never pair it with min-height: the two together create a hidden
   min-WIDTH (320px tall × 2:1 = 640px) that blew a 390px phone layout out to 656px. */
.pp-map { position: relative; overflow: hidden; border-radius: var(--pp-r-media); background: #e9ecee; aspect-ratio: 16 / 9; min-width: 0; }
@media (max-width: 700px) { .pp-map { aspect-ratio: 4 / 3; } }
.pp-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pp-pin {
  position: absolute; transform: translate(-50%, -100%); padding: 9px 15px; border-radius: 8px;
  background: #1e1e1b; color: #fff; font: 600 16px/1 var(--pp-font-display); white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); border: 0; cursor: pointer;
}
.pp-pin::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: inherit; transform: translateX(-50%) rotate(45deg); border-radius: 2px; z-index: -1; }
.pp-pin[aria-pressed="true"] { background: #fff; color: #1e1e1b; outline: 2px solid #1e1e1b; }

/* ---------- quote over photo ---------- */
.pp-quote { position: relative; isolation: isolate; color: #f3f5f0; padding-block: clamp(80px, 12vw, 160px); }
.pp-quote__media { position: absolute; inset: 0; z-index: -1; }
.pp-quote__media img { width: 100%; height: 100%; object-fit: cover; }
.pp-quote__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,18,15,.84), rgba(16,18,15,.62)); }
.pp-quote blockquote { margin: 0; max-width: 40ch; font: 400 clamp(20px, 2.3vw, 28px)/1.4 var(--pp-font-display); letter-spacing: -0.01em; }
.pp-quote cite { display: block; margin-top: 28px; font-style: normal; font-size: 17px; }

/* ---------- split (photo + copy) ---------- */
.pp-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.pp-split__media { aspect-ratio: 5 / 6; overflow: hidden; border-radius: var(--pp-r-media); }
.pp-split__media img { width: 100%; height: 100%; object-fit: cover; }
.pp-split__copy { display: grid; gap: 28px; justify-items: start; }
@media (max-width: 800px) { .pp-split { grid-template-columns: 1fr; } }

.pp-cols { display: grid; grid-template-columns: 1fr 1.4fr 1.4fr; gap: clamp(20px, 4vw, 64px); }
@media (max-width: 800px) { .pp-cols { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.pp-footer { padding-block: 64px 32px; }
.pp-footer__top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; padding-bottom: 48px; }
.pp-footer__mark { font: 700 clamp(28px, 3vw, 40px)/.95 var(--pp-font-display); letter-spacing: -0.03em; text-transform: var(--pp-display-case); }
.pp-footer h4 { margin: 0 0 12px; font: 600 12px var(--pp-font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--pp-ink-2); }
.pp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.pp-footer a { text-decoration: none; }
.pp-footer a:hover { text-decoration: underline; }
.pp-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 22px; border-top: 1px solid var(--pp-line); font-size: 13px; color: var(--pp-ink-2); }
@media (max-width: 800px) { .pp-footer__top { grid-template-columns: 1fr 1fr; } .pp-footer__top > :first-child { grid-column: 1 / -1; } }

/* ---------- motion: one entrance, hover lifts, nothing ambient ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pp-rise { opacity: 0; transform: translateY(14px); animation: pp-rise .9s var(--pp-ease) forwards; }
  .pp-rise:nth-child(2) { animation-delay: .08s; }
  .pp-rise:nth-child(3) { animation-delay: .16s; }
  .pp-rise:nth-child(4) { animation-delay: .24s; }
  @keyframes pp-rise { to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.pp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }