/* ============================================================================
   SKY BUY HOMES — Single-Page Website
   Stylesheet built strictly to the official Brand Guidelines (v1.0, 2026)
   Palette: Sky Gold / Charcoal / White · Type: Poppins (display) + Inter (body)
   ========================================================================== */

/* ---------- 1. Design tokens ---------------------------------------------- */
:root {
  /* Primary palette */
  --gold:          #C9971F;
  --gold-dark:     #9C7417;
  --gold-light:    #F3E6C6;
  --charcoal:      #1E1E1E;
  --charcoal-soft: #3A3A3C;
  --stone:         #6B6B6E;
  --white:         #FFFFFF;
  --cream:         #FAF7F1;
  --success:       #2E9E5B;
  --alert:         #D64545;
  --whatsapp:      #25D366;
  --whatsapp-dark: #128C7E;

  /* Derived surfaces */
  --line:          rgba(30,30,30,.08);
  --line-gold:     rgba(201,151,31,.35);
  --shadow-sm:     0 2px 8px rgba(30,30,30,.06);
  --shadow-md:     0 10px 30px rgba(30,30,30,.08);
  --shadow-lg:     0 24px 60px rgba(30,30,30,.14);
  --shadow-gold:   0 12px 30px rgba(201,151,31,.28);

  /* Spacing scale (brand tokens) */
  --xs: 8px;  --sm: 12px; --md: 16px; --lg: 24px; --xl: 32px;
  --xxl: 48px; --xxxl: 72px; --section: clamp(56px, 8vw, 104px);

  /* Radii (brand shape language) */
  --r-btn: 11px; --r-card: 16px; --r-input: 9px; --r-pill: 999px;

  /* Type scale */
  --f-display: "Poppins", "Arial Black", sans-serif;
  --f-body:    "Inter", Arial, Calibri, sans-serif;

  --maxw: 1280px;
  --header-h: 88px;
}

/* ---------- 2. Reset & base ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; width: 100%; }

body {
  font-family: var(--f-body);
  color: var(--charcoal-soft);
  background: var(--white);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--gold-dark); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--gold); }

h1, h2, h3, h4 { font-family: var(--f-display); color: var(--charcoal); line-height: 1.18; font-weight: 700; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

::selection { background: var(--gold-light); color: var(--charcoal); }

/* ---------- 3. Layout helpers -------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }

.section { padding-block: var(--section); position: relative; }
.section--cream { background: var(--cream); }
.section--charcoal { background: var(--charcoal); color: #E9E9E9; }

.eyebrow {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold); }

.section-title {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  margin: 14px 0 10px;
  letter-spacing: -0.01em;
}
.section-intro { max-width: 62ch; color: var(--stone); font-size: 1.02rem; }

/* Gold "key-line" divider — echoes the logo's gold rule under the wordmark */
.keyline { display: flex; align-items: center; gap: 12px; margin: 0 auto; width: min(220px, 60%); }
.keyline span { flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.keyline i { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }

/* Skip link (accessibility) */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; }
.skip-link:focus-visible { left: 12px; top: 12px; }

/* Centered section header */
.section-head { text-align: center; max-width: 720px; margin-inline: auto; }
.section-head .section-intro { margin-inline: auto; }

/* Misc utility */
.opt { font-weight: 400; color: var(--stone); }
.pf-unit { font-size: .9rem; }
.no-border { border-bottom: none !important; }

/* ---------- 4. Buttons ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--f-display); font-weight: 600; font-size: .98rem;
  padding: 13px 26px; border-radius: var(--r-btn); border: 1.5px solid transparent;
  cursor: pointer; transition: transform .18s ease, box-shadow .25s ease, background .2s ease;
  text-align: center; line-height: 1;
}
.btn svg { width: 18px; height: 18px; }
.btn--gold { background: var(--gold); color: #fff; box-shadow: var(--shadow-gold); }
.btn--gold:hover { background: var(--gold-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(201,151,31,.34); }
.btn--outline { background: transparent; color: var(--charcoal); border-color: rgba(30,30,30,.18); }
.btn--outline:hover { border-color: var(--gold); color: var(--gold-dark); transform: translateY(-2px); }
.btn--ghost-light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.22); }
.btn--ghost-light:hover { background: rgba(255,255,255,.16); color:#fff; }
.btn--wide { width: 100%; }
.btn--lg { padding: 16px 30px; font-size: 1.02rem; }
.btn--wa { background: var(--whatsapp); box-shadow: none; color: #fff; }
.btn--wa:hover { background: var(--whatsapp-dark); color: #fff; }

/* ---------- 5. Header ----------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s ease, background .3s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); background: rgba(255,255,255,.95); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); padding-block: 8px; gap: var(--lg); }
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; min-width: 0; }
.brand img { height: 50px; width: auto; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; justify-content: center; line-height: 1.18; min-width: 0; overflow: hidden; }
.brand-name {
  display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.26rem;
  color: var(--charcoal); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-tagline {
  display: block; font-family: var(--f-body); font-weight: 500; font-size: .85rem;
  color: var(--gold-dark); letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.main-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.main-nav a {
  font-family: var(--f-body); font-weight: 500; color: var(--charcoal-soft);
  padding: 8px 14px; border-radius: 8px; font-size: .95rem; position: relative;
}
.main-nav a:hover { color: var(--charcoal); background: var(--cream); }

.header-cta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.call-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-display); font-weight: 600; color: var(--charcoal);
  padding: 9px 16px; border-radius: var(--r-pill); border: 1.5px solid var(--line);
  font-size: .92rem; white-space: nowrap;
}
.call-pill:hover { border-color: var(--gold); color: var(--gold-dark); }
.call-pill svg { width: 16px; height: 16px; color: var(--gold); }
.wa-btn { background: transparent; color: var(--whatsapp); border-color: var(--whatsapp); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.wa-btn:hover { background: var(--whatsapp); color: #fff; border-color: var(--whatsapp); }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: var(--charcoal); }
.nav-toggle svg { width: 26px; height: 26px; }

/* ---------- 6. Hero ------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--charcoal);
  padding-block: clamp(40px, 6vw, 64px);
}
/* Roofline signature motif */
.hero-roofline {
  position: absolute; inset: auto 0 0 0; width: 100%; height: 220px;
  color: var(--gold); opacity: .16; pointer-events: none; z-index: 1;
}
.eyebrow--light { color: var(--gold); margin-bottom: 16px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .82rem; font-weight: 600; color: var(--charcoal-soft);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 7px 14px; box-shadow: var(--shadow-sm);
}
.chip svg { width: 14px; height: 14px; color: var(--gold); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 5b. Hero — dual slider (Fresh Launches / Resale tabs) --------- */
.hero-slider-wrap { position: relative; z-index: 2; }
.hero-slider-tabs {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 26px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-pill);
}
.hero-tab {
  font-family: var(--f-display); font-weight: 600; font-size: .92rem; color: #E9E9E9;
  background: transparent; border: none; border-radius: var(--r-pill); padding: 10px 22px; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.hero-tab.is-active { background: var(--gold); color: var(--charcoal); }
.hero-tab:not(.is-active):hover { background: rgba(255,255,255,.14); }

.hero-panel[hidden] { display: none; }
.hero-slides { position: relative; min-height: clamp(430px, 58vw, 540px); }
.hero-slide {
  position: absolute; inset: 0; display: grid; align-items: end;
  border-radius: var(--r-card); overflow: hidden;
  opacity: 0; visibility: hidden; transition: opacity .6s ease;
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; }
.hero-slide-media { position: absolute; inset: 0; z-index: 0; background: var(--charcoal); }
.hero-slide-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15,14,12,.9) 0%, rgba(15,14,12,.55) 45%, rgba(15,14,12,.22) 100%);
}
/* Brand/logo slides (builder partners with no project photo) — a real
   two-column split so the logo card sits in its own right-hand slot
   instead of floating centered on top of the headline text. */
.hero-slide--brand {
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center;
  gap: clamp(20px, 4vw, 48px);
  background: linear-gradient(135deg, var(--charcoal) 0%, #2b2620 100%);
  padding: clamp(28px, 4vw, 48px);
}
.hero-slide--brand .hero-slide-media {
  position: static; inset: auto; z-index: auto; background: none;
  display: flex; align-items: center; justify-content: center; order: 2;
}
.hero-slide--brand .hero-slide-copy { position: static; z-index: auto; padding: 0; max-width: none; order: 1; }
.hero-brand-badge {
  display: block; background: #fff; border-radius: var(--r-card); padding: clamp(16px, 2.4vw, 26px) clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow-lg); max-width: 300px; width: 100%;
}
.hero-brand-badge img { width: 100%; height: auto; object-fit: contain; display: block; }

.hero-slide-copy { position: relative; z-index: 1; padding: clamp(24px, 4vw, 44px); max-width: 640px; }
.hero-slide-copy h1, .hero-slide-title {
  color: #fff; font-size: clamp(1.8rem, 4vw, 2.9rem); letter-spacing: -0.02em; line-height: 1.12; margin: 4px 0 12px;
}
.hero-slide-copy .accent { color: var(--gold); }
.hero-slide-copy p { font-size: clamp(1rem, 1.3vw, 1.08rem); color: #DCDCDC; margin: 0 0 22px; max-width: 52ch; }

.hero-slider-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.hero-arrow {
  width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.28); color: #fff; display: grid; place-items: center;
  cursor: pointer; transition: background .2s ease; flex-shrink: 0;
}
.hero-arrow:hover { background: rgba(255,255,255,.24); }
.hero-arrow svg { width: 18px; height: 18px; }
.hero-dots { display: flex; align-items: center; gap: 8px; }
.hero-dot {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35);
  border: none; padding: 0; cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.hero-dot.is-active { background: var(--gold); transform: scale(1.35); }

@media (max-width: 700px) {
  /* Flat (not vw-scaled) height budget. Brand slides (logo + heading +
     paragraph + button, stacked) measure ~700-730px tall on narrow phones
     — MORE room is needed at the NARROWEST widths (text wraps onto more
     lines there), the opposite of what a vw-based clamp gives you. A
     fixed floor sized to the worst measured case avoids the internal
     scrollbar that a shorter/scaling height would otherwise force. */
  .hero-slides { min-height: 700px; }
  .hero-slide { align-items: center; }
  .hero-slide-copy { max-width: 100%; }
  .hero-slider-tabs { display: flex; width: 100%; }
  .hero-tab { flex: 1; text-align: center; }

  /* Brand slides stack vertically on mobile: logo badge above the copy,
     both centered, never overlapping. overflow-y:auto is kept as a
     fallback safety net for the very smallest phones (<360px) only. */
  .hero-slide--brand {
    grid-template-columns: 1fr; grid-auto-rows: min-content;
    height: auto; min-height: 100%; overflow-y: auto;
    text-align: center; padding: clamp(24px, 6vw, 40px) clamp(20px, 6vw, 28px);
    gap: 16px;
  }
  .hero-slide--brand .hero-slide-media { order: 1; }
  .hero-slide--brand .hero-slide-copy { order: 2; }
  .hero-slide--brand .hero-actions { justify-content: center; }
  .hero-slide--brand .hero-slide-copy p { margin-inline: auto; }
  .hero-brand-badge { max-width: 220px; margin-inline: auto; }
}

@media (max-width: 380px) {
  /* Extra headroom saver for the smallest common phones (iPhone SE and
     similar ~320-375px widths), where the 700px budget above is still a
     little tight — trim the badge and slide gap further rather than
     inflating min-height (and every other slide's height with it). */
  .hero-brand-badge { max-width: 168px; }
  .hero-slide--brand { gap: 12px; }
}

/* Lead form card */
.lead-card {
  background: var(--white); border-radius: var(--r-card);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 34px); position: relative;
}
.lead-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.lead-card h2 { font-size: 1.4rem; }
.lead-card .form-sub { color: var(--stone); font-size: .92rem; margin: 6px 0 20px; }

/* ---------- 6a. Lead-form section (homepage, after Resale) ----------------
   Kept white (not cream) so it stays visually distinct from the cream
   Resale section directly above it — clear section boundaries matter more
   than reusing the same surface color back-to-back. */
.section--lead { background: var(--white); }
.lead-section-grid {
  display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.lead-section-copy .eyebrow { margin-bottom: 14px; }
.lead-section-copy .section-title { margin-bottom: 12px; }
.lead-section-copy .section-intro { margin-bottom: 22px; }
.lead-points { display: grid; gap: 10px; }
.lead-points li { display: flex; align-items: flex-start; gap: 10px; font-size: .96rem; color: var(--charcoal-soft); }
.lead-points svg { width: 20px; height: 20px; color: var(--success); flex-shrink: 0; margin-top: 1px; }

/* ---------- 6b. Embedded Google Form (lead capture) -----------------------
   Google Forms lay questions out in a single column at any width — the
   form's content does NOT get shorter as the box narrows; if anything it
   gets TALLER, because long option labels (e.g. under "I'm interested in")
   wrap onto more lines once the box is tight. Scaling height down as width
   shrinks (a plain aspect-ratio) fights that and causes an inner scrollbar.
   So: width is fluid and as wide as the layout allows (capped at a sane
   reading width so the iframe doesn't just add empty side-padding on huge
   screens), and height *increases* at the narrower breakpoints instead. */
.gform-embed {
  position: relative; width: 100%; max-width: 760px; margin-inline: auto;
  border-radius: var(--r-input); overflow: hidden; background: #fff;
  border: 1px solid var(--line);
}
.gform-embed iframe { display: block; width: 100%; height: 1000px; border: 0; }
@media (max-width: 900px) {
  .gform-embed iframe { height: 1080px; }
}
@media (max-width: 640px) {
  .gform-embed iframe { height: 1220px; }
}
@media (max-width: 420px) {
  .gform-embed iframe { height: 1380px; }
}

/* ---------- 7. Forms ------------------------------------------------------ */
.lead-form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-size: .85rem; font-weight: 600; color: var(--charcoal); }
.field label .req { color: var(--gold-dark); }
.field input, .field select, .field textarea {
  font-family: var(--f-body); font-size: .98rem; color: var(--charcoal);
  padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-input);
  background: var(--cream); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: var(--stone); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); background: #fff;
  box-shadow: 0 0 0 3px rgba(201,151,31,.14);
}
.field textarea { resize: vertical; min-height: 84px; }
.field.invalid input, .field.invalid select { border-color: var(--alert); box-shadow: 0 0 0 3px rgba(214,69,69,.12); }
.field .err { color: var(--alert); font-size: .78rem; display: none; }
.field.invalid .err { display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-legal { font-size: .74rem; color: var(--stone); line-height: 1.5; }
/* Honeypot — hidden from humans, catches bots */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: .9rem; font-weight: 600; padding: 12px 14px; border-radius: var(--r-input); display: none; }
.form-status.show { display: block; }
.form-status.ok { background: rgba(46,158,91,.1); color: var(--success); border: 1px solid rgba(46,158,91,.3); }
.form-status.err { background: rgba(214,69,69,.08); color: var(--alert); border: 1px solid rgba(214,69,69,.3); }

/* ---------- 8. Trust bar -------------------------------------------------- */
.trust-bar { background: var(--charcoal); color: #fff; padding-block: clamp(34px, 5vw, 52px); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--lg); text-align: center; }
.trust-stat { position: relative; }
.trust-stat + .trust-stat::before {
  content: ""; position: absolute; left: -12px; top: 12%; height: 76%; width: 1px; background: rgba(255,255,255,.12);
}
.trust-num { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.7rem); color: var(--gold); line-height: 1; }
.trust-label { font-size: .84rem; color: #C9C9C9; margin-top: 8px; letter-spacing: .02em; }

/* ---------- 9. Fresh Units (featured project) ---------------------------- */
.project-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-md); overflow: hidden; margin-top: 40px;
}
.project-head {
  display: grid; grid-template-columns: 1fr auto; gap: var(--lg);
  padding: clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, var(--cream));
  align-items: start;
}
.project-tag {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  background: var(--gold-light); color: var(--gold-dark);
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-pill); margin-bottom: 14px;
}
.project-head h2, .project-head h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -0.01em; }
.project-meta { color: var(--stone); margin-top: 8px; font-size: .98rem; }
.project-desc { color: var(--charcoal-soft); margin-top: 14px; max-width: 60ch; }
.project-head .project-cta { display: flex; flex-direction: column; gap: 10px; min-width: 200px; }
.price-flag {
  background: var(--charcoal); color: #fff; border-radius: var(--r-card); padding: 18px 20px; text-align: center;
}
.price-flag .pf-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #B9B9B9; }
.price-flag .pf-value { font-family: var(--f-display); font-weight: 700; color: var(--gold); font-size: 1.6rem; margin-top: 4px; }
.price-flag .pf-note { font-size: .72rem; color: #9A9A9A; margin-top: 2px; }

.highlight-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.highlight-cell { background: #fff; padding: 22px 20px; text-align: center; }
.highlight-cell .hc-val { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; color: var(--charcoal); }
.highlight-cell .hc-label { font-size: .8rem; color: var(--stone); margin-top: 4px; }

.project-body { padding: clamp(24px, 3vw, 36px); display: grid; gap: 32px; }
.pb-block h4, .pb-block h3 { font-size: 1.05rem; color: var(--charcoal); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.pb-block h4 svg, .pb-block h3 svg { width: 18px; height: 18px; color: var(--gold); }

/* Data tables — refined, brochure-like */
.data-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .94rem; }
.data-table thead th {
  text-align: left; font-family: var(--f-display); font-weight: 600; font-size: .8rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--stone);
  padding: 10px 14px; border-bottom: 2px solid var(--line);
}
.data-table tbody td { padding: 13px 14px; border-bottom: 1px solid var(--line); color: var(--charcoal-soft); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--cream); }
.data-table .em { color: var(--charcoal); font-weight: 600; }
.data-table .gold { color: var(--gold-dark); font-weight: 700; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-input); }

.pricing-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pricing-tile { border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; text-align: center; }
.pricing-tile.is-launch { background: var(--cream); }
.pricing-tile .pt-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--stone); }
.pricing-tile .pt-value { font-family: var(--f-display); font-weight: 700; font-size: 1.5rem; color: var(--charcoal); margin: 8px 0 2px; }
.pricing-tile.is-prelaunch .pt-value { color: var(--gold-dark); }
.pricing-tile .pt-note { font-size: .78rem; color: var(--stone); }

.loc-list { display: grid; gap: 12px; }
.loc-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--charcoal-soft); font-size: .98rem; }
.loc-list svg { width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; margin-top: 1px; }

.channel-note {
  font-size: .84rem; color: var(--stone); background: var(--cream);
  border-left: 3px solid var(--gold); padding: 12px 16px; border-radius: 0 var(--r-input) var(--r-input) 0;
}

/* Photo placeholder — shared look for gallery + resale card photo slots */
.photo-slot {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; color: var(--gold-dark);
  background: var(--gold-light);
}
.photo-slot svg { width: 22px; height: 22px; }
.photo-slot span { font-size: .74rem; font-weight: 600; color: var(--stone); }

/* Fresh Launches — project photo gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 6px; }
.gallery-item {
  position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-input);
  overflow: hidden; border: 1px solid var(--line); background: var(--cream);
  box-shadow: var(--shadow-sm); transition: box-shadow .3s ease;
}
.gallery-item:has(img) { cursor: zoom-in; }
.gallery-item:hover { box-shadow: var(--shadow-md); }
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.gallery-item:hover img { transform: scale(1.1); }
/* Soft darkening scrim on hover so the zoom badge stays legible over bright photos */
.gallery-item::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(15,14,12,.38), transparent 55%);
  opacity: 0; transition: opacity .3s ease;
}
.gallery-item:hover::before { opacity: 1; }
.zoom-badge {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(20,18,15,.6); border: 1px solid rgba(255,255,255,.35); color: #fff;
  display: grid; place-items: center; opacity: 0; transform: scale(.8);
  transition: opacity .25s ease, transform .25s ease;
}
.zoom-badge svg { width: 17px; height: 17px; }
.gallery-item:hover .zoom-badge { opacity: 1; transform: scale(1); }

/* Photo lightbox — full-screen viewer for gallery clicks */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  background: rgba(15,14,12,.94); padding: clamp(16px, 5vw, 48px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox[hidden] { display: none; }
.lightbox-figure { max-width: min(1100px, 92vw); max-height: 88vh; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox-figure img { max-width: 100%; max-height: 76vh; width: auto; height: auto; border-radius: var(--r-card); box-shadow: var(--shadow-lg); object-fit: contain; background: #111; }
.lightbox-figure figcaption { color: #E9E9E9; font-size: .92rem; text-align: center; max-width: 60ch; }
.lightbox-close, .lightbox-nav {
  position: absolute; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); color: #fff;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,.24); }
.lightbox-close { top: 20px; right: 20px; width: 42px; height: 42px; }
.lightbox-close svg { width: 19px; height: 19px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 50px; height: 50px; }
.lightbox-nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox-nav svg { width: 22px; height: 22px; }
.lightbox-prev { left: clamp(8px, 3vw, 28px); }
.lightbox-next { right: clamp(8px, 3vw, 28px); }
.lightbox-nav[hidden] { display: none; }
html.lb-lock { overflow: hidden; }
@media (max-width: 640px) {
  .lightbox-close { width: 38px; height: 38px; top: 12px; right: 12px; }
  .lightbox-nav { width: 40px; height: 40px; }
}

/* Resale — per-project / per-sector photo cards */
.resale-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(148px, 100%), 1fr)); gap: 14px; margin-top: 12px; }
.resale-card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-input);
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.resale-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--line-gold); }
.resale-photo { position: relative; aspect-ratio: 4 / 3; background: var(--cream); border-bottom: 1px solid var(--line); overflow: hidden; flex-shrink: 0; }
.resale-photo:has(img) { cursor: zoom-in; }
.resale-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.resale-card:hover .resale-photo img { transform: scale(1.1); }
/* flex:1 + center so all cards in a row land the same height even when
   one sector's name/label runs longer and wraps to a second line */
.resale-card-body { padding: 10px 12px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; flex: 1 1 auto; min-width: 0; }
.resale-card-body h5 {
  font-family: var(--f-display); font-weight: 600; font-size: .85rem; color: var(--charcoal); line-height: 1.3;
  overflow-wrap: break-word; word-break: break-word; hyphens: auto; width: 100%;
}

/* ---------- 9b. Ace Parkway detail page (ace-parkway.html) ---------------- */
.project-banner { position: relative; overflow: hidden; color: #fff; padding-block: clamp(64px, 14vw, 140px) clamp(40px, 7vw, 72px); }
.project-banner-media { position: absolute; inset: 0; z-index: 0; }
.project-banner-media img { width: 100%; height: 100%; object-fit: cover; }
.project-banner-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,18,15,.78) 0%, rgba(20,18,15,.62) 45%, rgba(20,18,15,.88) 100%);
}
.project-banner-inner { position: relative; z-index: 1; }
.breadcrumb-back {
  display: inline-flex; align-items: center; gap: 6px; color: #E9E9E9; font-size: .88rem; font-weight: 600;
  margin-bottom: 18px; opacity: .9;
}
.breadcrumb-back:hover { color: #fff; opacity: 1; }
.project-banner h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.2rem); letter-spacing: -0.01em; margin: 4px 0 10px; }
.project-banner-meta { color: #D8D8D8; font-size: 1.02rem; margin-bottom: 26px; }
.project-banner-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.project-card--standalone { margin-top: 0; }
.lead-card--centered { max-width: 720px; margin-inline: auto; }

/* ---------- 10. Resale ---------------------------------------------------- */
.resale-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 40px; align-items: start; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-sm); overflow: hidden; }
.panel-head { padding: 20px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; background: linear-gradient(180deg,#fff,var(--cream)); }
.panel-head svg { width: 20px; height: 20px; color: var(--gold); }
.panel-head h3 { font-size: 1.2rem; }
.panel-body { padding: 12px 24px 24px; }
.sector-block { padding: 16px 0; border-bottom: 1px solid var(--line); }
.sector-block:last-child { border-bottom: none; }

/* Resale flats — grouped rows (row 1: 2 sectors, row 2: 4 sectors),
   centered. Column counts are FIXED per row and never collapse to a
   new row at any screen size — the photos inside each sector shrink
   fluidly instead (the min(148px,100%) safeguard on .resale-card-grid
   above keeps them from ever overflowing their narrow column). */
.panel-body--sectors { display: flex; flex-direction: column; }
.sector-row { display: grid; gap: 20px 16px; padding: 20px 0; }
.sector-row--2 { grid-template-columns: repeat(2, 1fr); }
.sector-row--4 { grid-template-columns: repeat(4, 1fr); }
.sector-row:first-child { padding-top: 4px; }
.sector-row + .sector-row { border-top: 1px solid var(--line); }
.panel-body--sectors .sector-block { border-bottom: none; padding: 0; text-align: center; min-width: 0; }
.panel-body--sectors .sector-name { justify-content: center; flex-wrap: wrap; }
/* Every sector's photos stay in a single row too — always 4 equal-size
   card slots per sector (matches Sector 107, now the sector with the
   most photos), regardless of how many photos that sector actually
   has. A sector with fewer listings just leaves the extra slot(s)
   blank instead of stretching its card bigger — this is what keeps
   every card the same size across the whole panel. */
.panel-body--sectors .resale-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
/* Cards are narrow here (4-up) — center the title under the photo
   instead of hugging the left edge, and let long names wrap onto
   their own lines cleanly rather than crowding one side. */
.panel-body--sectors .resale-card-body { align-items: center; text-align: center; padding: 8px 6px; }
@media (max-width: 560px) {
  .sector-row { gap: 14px 8px; padding: 16px 0; }
  .panel-body--sectors .sector-name { font-size: .88rem; }
}

.sector-name { font-family: var(--f-display); font-weight: 600; color: var(--charcoal); font-size: 1rem; margin-bottom: 10px; display: inline-flex; align-items: center; gap: 8px; }
.sector-name .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.society-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-size: .84rem; color: var(--charcoal-soft); background: var(--cream);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 13px;
}
.tag--plot { background: #fff; border-color: var(--line-gold); color: var(--gold-dark); font-weight: 500; }
.plot-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.panel-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 24px; border-top: 1px solid var(--line); background: var(--cream); font-size: .92rem; color: var(--stone);
}
.panel-foot .btn { flex-shrink: 0; }
/* Standalone foot bar (not nested inside a .panel) — needs its own border/radius */
.panel-foot--standalone { margin-top: 24px; border: 1px solid var(--line); border-radius: var(--r-card); }

/* ---------- 10c. Fresh projects / top builders ---------------------------- */
.fresh-feature {
  display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-sm); overflow: hidden; margin: 32px 0 36px;
  transition: box-shadow .25s ease, transform .25s ease; color: inherit;
}
.fresh-feature:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.fresh-feature-media { position: relative; min-height: 220px; background: var(--cream); }
.fresh-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.fresh-feature-body { padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.fresh-feature-body h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.fresh-feature-body p { color: var(--stone); font-size: .98rem; }
.fresh-feature-body .tag--plot { align-self: flex-start; }
.fresh-feature-link { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-dark); font-family: var(--f-display); font-weight: 600; font-size: .96rem; margin-top: 6px; }
.fresh-feature-link svg { width: 18px; height: 18px; transition: transform .2s ease; }
.fresh-feature:hover .fresh-feature-link { color: var(--gold); }
.fresh-feature:hover .fresh-feature-link svg { transform: translateX(3px); }
.builder-heading { font-family: var(--f-display); font-weight: 600; color: var(--charcoal); font-size: 1rem; margin: 4px 0 2px; }

/* Builder partner logo cards — the logo files already include their own
   white card chrome, so these wrappers stay minimal (just a border/hover
   lift) and use object-fit: contain so no logo is ever cropped. */
.builder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 14px; margin-top: 12px; }
.builder-card {
  aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--line); border-radius: var(--r-input);
  overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 12px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.builder-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); border-color: var(--line-gold); }
.builder-card img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 700px) {
  .fresh-feature { grid-template-columns: 1fr; }
  .fresh-feature-media { min-height: 200px; }
}

/* ---------- 11. Why choose us -------------------------------------------- */
.usp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.usp-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 28px 24px; box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.usp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-gold); }
.usp-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: var(--gold-light); color: var(--gold-dark); margin-bottom: 18px;
}
.usp-icon svg { width: 26px; height: 26px; }
.usp-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.usp-card p { font-size: .93rem; color: var(--stone); }

/* ---------- 12. Testimonials --------------------------------------------- */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; }
.testi-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 30px 28px; box-shadow: var(--shadow-sm); position: relative; }
.testi-quote-mark { font-family: var(--f-display); font-size: 3.4rem; line-height: .6; color: var(--gold-light); position: absolute; top: 22px; right: 26px; }
.testi-stars { display: flex; gap: 3px; margin-bottom: 14px; }
.testi-stars svg { width: 17px; height: 17px; color: var(--gold); }
.testi-text { color: var(--charcoal-soft); font-size: 1rem; margin-bottom: 20px; position: relative; z-index: 1; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--gold); color: #fff; display: grid; place-items: center; font-family: var(--f-display); font-weight: 600; font-size: 1rem; }
.testi-name { font-weight: 700; color: var(--charcoal); font-family: var(--f-display); font-size: .98rem; }
.testi-loc { font-size: .82rem; color: var(--stone); }

/* ---------- 13. Second lead (CTA band) ----------------------------------- */
.cta-band { background: linear-gradient(135deg, var(--charcoal) 0%, #2A2A2C 100%); color: #fff; position: relative; overflow: hidden; }
.cta-band .hero-roofline { opacity: .07; }
.cta-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 60px); align-items: center; position: relative; z-index: 1; }
.cta-copy .eyebrow { color: var(--gold); }
.cta-copy h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin: 14px 0 14px; }
.cta-copy p { color: #C9C9C9; max-width: 46ch; margin-bottom: 24px; }
.cta-contacts { display: grid; gap: 14px; }
.cta-contact { display: flex; align-items: center; gap: 14px; }
.cta-contact .ico { width: 44px; height: 44px; border-radius: 12px; background: rgba(201,151,31,.16); color: var(--gold); display: grid; place-items: center; flex-shrink: 0; }
.cta-contact .ico svg { width: 20px; height: 20px; }
.cta-contact .c-label { font-size: .78rem; color: #9A9A9A; }
.cta-contact .c-value { font-family: var(--f-display); font-weight: 600; color: #fff; font-size: 1.02rem; }
.cta-contact a.c-value:hover { color: var(--gold); }
.cta-band .lead-card { color: var(--charcoal-soft); }

/* ---------- 14. Footer ---------------------------------------------------- */
.site-footer { background: #171717; color: #B9B9B9; padding-top: var(--section); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: clamp(28px, 5vw, 56px); padding-bottom: 48px; }
.footer-brand-lockup { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-brand-lockup img { height: 44px; width: auto; flex-shrink: 0; }
.footer-brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.footer-brand-name { display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.3rem; color: #fff; letter-spacing: -0.01em; }
.footer-brand-tagline { display: block; font-family: var(--f-body); font-weight: 500; font-size: .85rem; color: var(--gold); letter-spacing: .01em; margin-top: 2px; }
.footer-brand p { font-size: .92rem; max-width: 34ch; color: #9A9A9A; }
.footer-col h4 { color: #fff; font-size: 1rem; margin-bottom: 18px; }
.footer-col ul { list-style: none; display: grid; gap: 11px; }
.footer-col a, .footer-col span { color: #B9B9B9; font-size: .93rem; }
.footer-col a:hover { color: var(--gold); }
.footer-contact li { display: flex; gap: 11px; align-items: flex-start; }
.footer-contact svg { width: 17px; height: 17px; color: var(--gold); flex-shrink: 0; margin-top: 3px; }
.footer-map { border-radius: var(--r-card); overflow: hidden; border: 1px solid rgba(255,255,255,.1); margin-top: 10px; }
.footer-map iframe { display: block; width: 100%; height: 200px; border: 0; filter: grayscale(.2) contrast(1.05); }
.footer-legal { border-top: 1px solid rgba(255,255,255,.08); padding-block: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; align-items: center; text-align: center; }
.footer-legal p { font-size: .84rem; color: #7E7E7E; }
.footer-legal .reg { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-legal .reg span { font-size: .8rem; color: #9A9A9A; }

/* ---------- 15. Floating mobile actions ---------------------------------- */
.mobile-bar { display: none; }

/* ---------- 16. Reveal-on-scroll ----------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 17. Responsive ------------------------------------------------ */
/* Header/nav collapse to hamburger. Measured against the live header:
   brand block (~373px) + nav links (~452px) + call pill/WhatsApp (~328px)
   + the two inter-group gaps (24px each) add up to ~1200px — exactly the
   content width a 1280px container gives (1280 minus 2x40px padding).
   That's a zero-slack fit, so ANY viewport narrower than --maxw (1280px)
   is a genuine overflow/wrap risk for the full desktop header, not just
   phones and small tablets. Collapse to the compact mobile-style header
   (hamburger menu, no header pills, sticky bottom call/WhatsApp bar)
   across that entire range instead of guessing a narrower cutoff. */
@media (max-width: 1279px) {
  :root { --header-h: 76px; }
  .main-nav { display: none; }
  .header-cta { gap: 8px; }
  /* The sticky bottom bar already covers Call/WhatsApp on mobile — drop
     the duplicate header pills so the brand name has room to breathe. */
  .header-cta .call-pill, .header-cta .wa-btn { display: none; }
  .nav-toggle { display: inline-flex; padding: 8px 4px; }
  .brand { gap: 9px; }
  .brand img { height: 42px; }
  .brand-name { font-size: 1.08rem; }
  .brand-tagline {
    font-size: .74rem; white-space: normal; overflow: visible;
    text-overflow: clip; line-height: 1.3;
  }

  /* Slide-in mobile menu — positioned relative to the sticky header itself
     (not a fixed pixel offset) so it always sits flush under the brand
     block even when the tagline wraps to two lines and the header grows. */
  .main-nav.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; padding: 16px clamp(18px,4vw,40px) 24px;
    box-shadow: var(--shadow-md); border-bottom: 1px solid var(--line); z-index: 99;
  }
  .main-nav.is-open a { padding: 13px 14px; border-radius: 10px; font-size: 1.02rem; }

  /* Sticky mobile call/WhatsApp bar — must appear across the same range
     the header pills disappear in, otherwise there'd be a width band
     with no visible way to call/WhatsApp at all. */
  .mobile-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    padding: 10px clamp(14px,4vw,20px) calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.94); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(30,30,30,.08);
  }
  body { padding-bottom: 72px; }
  /* The bar is fixed to the viewport, not the document end — anything that
     happens to render in that bottom strip (like the hero slider controls,
     which sit near the bottom of the very first section) gets covered.
     Give the slider nav extra clearance so it never sits under the bar. */
  .hero-slider-nav { margin-bottom: 92px; }
}

@media (max-width: 1024px) {
  .lead-card { order: -1; }
  .lead-section-grid { grid-template-columns: 1fr; }
  .resale-grid { grid-template-columns: 1fr; }
  .usp-grid { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: repeat(2, 1fr); max-width: none; }
  .testi-card:last-child { grid-column: 1 / -1; max-width: 460px; margin-inline: auto; }
  .cta-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .testi-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .testi-card:last-child { grid-column: auto; max-width: none; margin-inline: 0; }
  .project-head { grid-template-columns: 1fr; }
  .project-head .project-cta { min-width: 0; }
  .highlight-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-split { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .resale-card-grid { grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr)); }
}

@media (max-width: 560px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .trust-stat + .trust-stat::before { display: none; }
  .usp-grid { grid-template-columns: 1fr; }
  .highlight-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .panel-foot { flex-direction: column; align-items: stretch; text-align: center; }
  .panel-foot .btn { width: 100%; }
  .project-banner-cta { flex-direction: column; align-items: stretch; }
  .project-banner-cta .btn { width: 100%; }
}

@media (max-width: 400px) {
  .brand { gap: 7px; }
  .brand img { height: 36px; }
  .brand-name { font-size: .96rem; }
}

/* ---------- 18. Motion / print preferences ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .mobile-bar, .lead-card, .cta-band, .nav-toggle { display: none !important; }
  body { color: #000; }
}