/* Dgani Group - design tokens + shared layout
   Palette verified against the approved mockup by two independent reads
   (own read + GPT-5.6 Sol vision review): navy, cream, antique gold, serif+sans pairing. */
:root{
  --navy:#0b1a24;
  --navy-2:#0f232f;
  --navy-3:#122c3a;
  --cream:#f6f1e7;
  --cream-2:#efe7d8;
  --gold:#c9a227;
  --gold-dark:#a8841c;
  --ink:#20262b;
  --ink-muted:#5c6670;
  --cream-text:#f3efe6;
  --cream-text-muted:#c7bfae;
  --footer-text:#d9d2c2;
  --line-gold:rgba(201,162,39,.35);
  --radius:2px;
  --maxw:1240px;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --shadow:0 18px 40px rgba(11,26,36,.18);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* height:auto is the fix for a sitewide stretched/distorted-photo bug (QA fix pass,
   2026-09-10): Chrome maps an <img width height> HTML attribute pair to a low-priority
   "aspect-ratio" AND separate width/height presentational hints. Author CSS here only
   ever capped max-width, never declared height, so the hint's literal height (e.g.
   750px) stayed fixed even after max-width shrank the rendered width for a narrower
   column - squishing every plain <img> that isn't inside a component with its own
   explicit height + object-fit (prop-card, testi-who, split .media all keep their own
   rules below, unaffected). Declaring height:auto here lets the browser's automatic
   aspect-ratio (from the same width/height attributes) drive proportional scaling
   instead, fixing every .two-col body photo (buy/sell/lease + all 14 city pages + all
   6 renovation pages) and the gallery-1 masonry grid in one shared rule. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.5rem)}
h3{font-size:1.3rem}
p{margin:0 0 1em}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
/* QA round 7 fix, HIGH hard check (h): default .eyebrow color was --gold (#c9a227),
   which measures 2.15:1 on the cream body background (#f6f1e7) - well under the
   4.5:1 floor for 12.48px text (114 elements on 30 pages). #7D5F12 clears 5.30:1 on
   cream. Scoped by section background, not by page: .section-navy .eyebrow below
   restores the brighter --gold (7.62:1 on navy #0b1a24), so every eyebrow reads
   correctly against whichever background it actually sits on. */
.eyebrow{display:inline-block;font-family:var(--sans);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7D5F12;font-size:.78rem;margin-bottom:14px;text-wrap:balance}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:var(--radius);font-family:var(--sans);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;cursor:pointer;border:2px solid transparent;transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;min-height:44px}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-dark)}
.btn-outline{border-color:var(--gold);color:var(--cream-text)}
.btn-outline:hover{background:var(--gold);color:var(--navy)}
.btn-outline-dark{border-color:var(--gold);color:var(--navy)}
.btn-outline-dark:hover{background:var(--gold);color:var(--navy)}
.section{padding:88px 0}
@media (max-width:768px){.section{padding:56px 0}}
.section-navy{background:var(--navy);color:var(--cream-text)}
.section-navy .eyebrow{color:var(--gold)}
.section-navy h2{color:#fff}
.section-cream{background:var(--cream)}
.center{text-align:center}
.lead{color:var(--ink-muted);font-size:1.05rem;max-width:640px}
.center .lead{margin-left:auto;margin-right:auto}
/* --ink-muted (#5c6670) is a dark slate meant for the cream background; on a navy
   section it renders at ~3:1 contrast, below the 4.5:1 body-text minimum. Overriding
   to the existing lighter cream-text-muted token fixes the How We Help intro, the
   Featured Properties intro and the About page "Our Approach" paragraph, all of which
   use .lead inside .section-navy (QA punch list item 7, 2026-09-10 fix pass). */
.section-navy .lead{color:var(--cream-text-muted)}

/* ---------- Header / Nav ---------- */
.site-header{position:sticky;top:0;z-index:60;background:rgba(11,26,36,.97);backdrop-filter:blur(6px);border-bottom:1px solid var(--line-gold)}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:94px;gap:20px}
/* Logo consolidated to ONE treatment (QA fix pass, 2026-09-10): the header used to
   render the real logo image at an illegible 52x24px AND a duplicate plain-text
   ".brand-text" span with the same brand name right next to it - "two kinds of logo"
   per client feedback. The text span is removed; the real logo image (which already
   contains "DGANI GROUP / PREMIER REAL ESTATE" as part of its artwork) is sized up to
   190px wide (native ~2.2:1 aspect, so ~86px tall) so the wordmark is actually legible
   against the navy header. Row height bumped 84->94px to give the taller mark room. */
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{width:190px;height:auto}
nav.primary{display:flex;align-items:center;gap:2px}
nav.primary>ul{display:flex;list-style:none;margin:0;padding:0;gap:10px}
nav.primary>ul>li{position:relative}
nav.primary>ul>li>a{display:block;padding:10px 14px 13px;font-size:.82rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--cream-text-muted);border-bottom:2px solid transparent}
nav.primary>ul>li>a:hover,nav.primary>ul>li.active>a{color:#fff;border-color:var(--gold)}
nav.primary .dropdown{position:absolute;top:100%;left:0;min-width:250px;background:var(--navy-2);border:1px solid var(--line-gold);padding:10px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s ease;box-shadow:var(--shadow);max-height:60vh;overflow-y:auto}
nav.primary li:hover .dropdown,nav.primary li:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
nav.primary .dropdown a{display:block;padding:9px 12px;font-size:.78rem;text-transform:none;letter-spacing:0;font-weight:500;color:var(--cream-text-muted);border-radius:2px}
nav.primary .dropdown a:hover{background:var(--navy-3);color:var(--gold)}
.header-cta{display:flex;align-items:center;gap:14px;flex-shrink:0}
.phone-pill{display:flex;align-items:center;gap:8px;border:1.5px solid var(--gold);color:var(--gold);padding:9px 16px;border-radius:20px;font-size:.82rem;font-weight:700;white-space:nowrap}
.phone-pill svg{width:15px;height:15px}
.burger{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:8px}
.burger svg{width:26px;height:26px}
.mobile-panel{display:none;position:fixed;inset:0;z-index:80;background:var(--navy);padding:24px;overflow-y:auto}
.mobile-panel.open{display:block}
.mobile-panel .close-x{background:none;border:0;color:#fff;float:right;padding:8px;cursor:pointer}
.mobile-panel ul{list-style:none;margin:60px 0 0;padding:0}
.mobile-panel details{border-bottom:1px solid var(--line-gold)}
.mobile-panel summary{padding:16px 4px;font-family:var(--sans);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;font-size:1rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.mobile-panel summary::-webkit-details-marker{display:none}
.mobile-panel .sub-links{padding:0 4px 16px 14px;display:flex;flex-direction:column;gap:10px}
.mobile-panel .sub-links a{color:var(--cream-text-muted);font-size:.92rem}
.mobile-panel>ul>li>a{display:block;padding:16px 4px;color:#fff;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:1rem;border-bottom:1px solid var(--line-gold)}
.mobile-panel .phone-pill{margin-top:24px;justify-content:center}
/* QA round 6 fix, HIGH #1: the desktop header (logo 190px + nav + gap 20px +
   phone pill) needs ~1122px to fit without wrapping/overflow. The old
   max-width:1080px breakpoint left an 1081-1120px gap where the full desktop
   nav+pill tried to render in less room than it needs, pushing the phone pill
   off the right edge and causing sideways scroll (pill cut at x=1122). Raised
   to 1140px so the burger takes over before that gap starts. */
@media (max-width:1140px){
  nav.primary{display:none}
  .header-cta .phone-pill{display:none}
  .burger{display:inline-flex}
}

/* HERO-LAYOUT-V2 */
/* ---------- Hero ---------- */
/* 2026-09-10 REBUILD (feedback_image_ratio_regenerate_dont_create /
   feedback_hero_ratio_must_match_subject_before_cropping): every hero photo on the
   site is now GENERATED at the exact ratio of the slot it renders in (Nano Banana
   Pro image-to-image from the real photo), so background-size:cover is never asked
   to crop a mismatched image - center/center is a no-op. One unified aspect-ratio
   system applies to EVERY hero, every page (home/about/inner pages alike); only the
   background-image URL differs per page and per breakpoint band. This replaces the
   old min-height + magic-number background-position tuning per class
   (.hero.small/.hero.portrait/.hero-sell), which is what produced the squeeze
   artifacts (sign fragments, a stranger's head between the CTAs) Adir flagged. */
.hero{position:relative;display:flex;align-items:center;color:#fff;background-size:cover;background-position:center center;background-repeat:no-repeat;background-color:#060e14}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,14,20,.92) 0%,rgba(6,14,20,.72) 38%,rgba(6,14,20,.15) 68%,rgba(6,14,20,.05) 100%)}
.hero:not(.hero-about):not(.hero-split)>.container{width:100%}
.hero-inner{position:relative;z-index:2;max-width:min(640px,46%);padding:48px 0 36px}
.hero h1{color:#fff;margin-bottom:16px;text-wrap:balance}
.hero .sub{font-size:1.15rem;color:var(--cream-text-muted);margin-bottom:26px;text-wrap:pretty}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}
/* Equal-width stacked CTAs on mobile (QA fix pass, hero rebuild 2026-09-10): two
   pill buttons of different intrinsic width read as mismatched once they wrap; a
   full-width column reads as one deliberate pair instead. */
@media (max-width:640px){
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%;justify-content:center}
}
/* .hero-crumbs sits on the cream body background below the hero image, not on
   the dark hero gradient - the light --cream-text-muted / --gold tokens used
   elsewhere for dark navy/hero backgrounds fail WCAG here (2.15:1 / 1.62:1).
   Dedicated darker values below clear 4.5:1 against cream #f6f1e7 while
   staying in the gold/tan family (QA fix pass, 2026-09-10). */
.hero-crumbs{position:relative;z-index:2;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:#655f52;padding-top:26px;text-wrap:balance}
.hero-crumbs a{color:#7a5e15}

/* Desktop / large tablet (>=1024px): every hero on every page shares ONE ratio,
   21:9 - taller than the old 4.6:1-5.5:1 "small" bands (Adir: "you can make it a
   little bit higher"), generated to match exactly so cover never crops. */
@media (min-width:1024px){
  .hero{aspect-ratio:21/9}
  .hero-inner{padding:56px 0 40px}
}
/* Small tablet (641-1023px): measured 2026-09-10 - the 21:9 box goes too short at
   these widths for a 2-line H1 + subhead + stacked CTAs on the longest-copy pages,
   so this band gets its own 16:9 image variant rather than letting cover crop the
   21:9 desktop file (>23% ratio mismatch, well past the 5% tolerance). */
@media (min-width:641px) and (max-width:1023px){
  .hero{aspect-ratio:16/9}
  .hero-inner{padding:64px 0 48px;max-width:46%}
  .hero-home .hero-inner{max-width:46%}
}
/* Mobile (<=640px): one tall portrait ratio for every inner-page hero, sized to the
   tallest hero content on the site (gallery-1 / renovation-remodeling / the 2-CTA
   city pages), measured at both 360 and 390px before picking. Home keeps its own
   dedicated ~9:16 mobile ratio (its own portrait crop already existed and reads
   correctly at that ratio). */
@media (max-width:767px){
  .hero{aspect-ratio:3/4;min-height:0}
  .hero-inner{padding:40px 0 28px}
  /* Stacked mobile hero (coordinator fix, 2026-09-10): every inner-page hero
     (home keeps its own working portrait layout below) becomes a full-width
     16:9 photo band with NO text and NO dark overlay on top, and the
     breadcrumb/headline/subhead/buttons flow BELOW it on a solid navy
     background - so copy can never sit on top of a face/sign on a phone. Range extended 641-767 (coordinator fix, 2026-09-10): a 3-line H1 + subhead + CTA row was taller than the fixed 16:9 tablet-overlay box at these widths and clipped the CALL button (oakland-park-fl, medley-fl-1); the stacked, auto-height band has no fixed box to clip. */
  .hero:not(.hero-home){
    display:flex;flex-direction:column;align-items:stretch;
    aspect-ratio:auto;min-height:0;
    background-size:100% auto;background-position:top center;
    background-color:#060e14;
  }
  .hero:not(.hero-home)::before{
    content:"";position:static;display:block;width:100%;
    padding-top:56.25%;background:none;inset:auto;
  }
  .hero:not(.hero-home) .hero-inner{padding:28px 0 32px;max-width:none}
}
/* Home hero: the H1 is long (72 chars) and deliberately confined to a narrow column
   so the agent's portrait has room on the right (Adir: "move the person to the
   right side of the text") - measured 2026-09-10, that column needs its own H1 cap
   and a touch more width to fit inside a 21:9 box at 1024-1440px without the extra
   vertical space the generic 3.4rem H1 would need. Hero-only tuning, no copy change. */
.hero-home{background-image:url('/images/hero-shalom-dgani-agent-white-mercedes-luxury-home-davie-fl-desktop.jpg?v=20260914a')}
@media (max-width:1023px){.hero-home{background-image:url('/images/hero-shalom-dgani-agent-white-mercedes-luxury-home-davie-fl-tablet.jpg?v=20260914a')}}
.hero-home .hero-inner{max-width:min(540px,46%)}
.hero-home h1{font-size:clamp(1.9rem,4.1vw,2.85rem)}
@media (max-width:640px){
  .hero-home .hero-inner{max-width:440px}
  .hero-home h1{font-size:clamp(1.8rem,7vw,2.4rem)}
}
/* Home at 767px and below (QA round 3, 2026-09-10): the 9:16 overlay put the
   headline across his face at 360-640px, so home now uses the same stacked
   layout as every other page - the 16:9 tablet photo as a clean band on top,
   the headline and buttons below it on navy. */
@media (max-width:767px){
  .hero-home{
    display:flex;flex-direction:column;align-items:stretch;
    aspect-ratio:auto;min-height:0;
    background-size:100% auto;background-position:top center;
    background-color:#060e14;
  }
  .hero-home::before{
    content:"";position:static;display:block;width:100%;
    padding-top:56.25%;background:none;inset:auto;
  }
  .hero-home .hero-inner{padding:28px 0 32px;max-width:none}
}

/* ---------- Bio / split section ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0}
.split .media{position:relative;min-height:420px;background-size:cover;background-position:center}
.split .media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.split .copy{display:flex;flex-direction:column;justify-content:center;padding:64px 56px}
.split.reverse{grid-template-columns:1fr 1fr}
.split.reverse .media{order:2}
.split.reverse .copy{order:1}
@media (max-width:900px){
  .split,.split.reverse{grid-template-columns:1fr}
  .split .media{order:1;min-height:280px}
  .split .copy{order:2;padding:40px 24px}
}
.stat-row{display:flex;gap:28px;flex-wrap:wrap;margin:26px 0 30px}
.stat-item{display:flex;align-items:center;gap:12px;min-width:150px}
.stat-item .ic{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gold)}
.stat-item b{display:block;font-size:.86rem;color:var(--ink);text-wrap:balance}
.stat-item span{display:block;font-size:.75rem;color:var(--ink-muted);text-wrap:balance}

/* ---------- Card grid (How We Help) ---------- */
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:48px}
@media (max-width:1024px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.card-grid{grid-template-columns:1fr}}
.svc-card{background:var(--navy-2);border:1px solid var(--line-gold);position:relative;padding-bottom:26px}
.svc-card .thumb{height:150px;background-size:cover;background-position:center;position:relative}
.svc-card .icon-badge{position:absolute;left:24px;top:122px;width:56px;height:56px;border-radius:50%;background:var(--navy-2);border:2px solid var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center}
.svc-card .icon-badge svg{width:24px;height:24px}
.svc-card .body{padding:40px 24px 0}
.svc-card h3{color:#fff;font-size:1.05rem;text-transform:uppercase;letter-spacing:.03em;font-family:var(--sans);font-weight:700}
.svc-card p{color:var(--cream-text-muted);font-size:.9rem}
.svc-card .more{color:var(--gold);font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase}

/* ---------- Featured properties ---------- */
.prop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:44px}
@media (max-width:1024px){.prop-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.prop-grid{grid-template-columns:1fr}}
.prop-card{position:relative;overflow:hidden;border:1px solid var(--line-gold)}
.prop-card img{height:230px;width:100%;object-fit:cover;transition:transform .4s ease}
.prop-card:hover img{transform:scale(1.06)}
/* QA round 7 fix, HIGH hard check (h): the gold tag text measured 2.2-4.2:1 mean
   against the actual photo pixels behind it (worst case 1.2:1) - a 2-stop gradient
   confined to a 70px box was not reliably dark enough behind the tag on every
   photo. Fix is both halves of the suggested fix, not either/or: the scrim now
   covers ~65% of the card's own 230px photo height (min-height:150px) with a
   3-stop gradient that is fully opaque through the text zone, AND the tag text
   itself moved off gold onto white so it clears 4.5:1 even on a bright sky pixel.
   MEDIUM ask 5: tag and label were flex siblings sharing one row
   (justify-content:space-between), so the label's available width shrank to
   whatever was left after the tag ("BROWARD COUNTY"), which is what produced
   the uneven wraps ("Single- / Family Home", "BROWARD / COUNTY") and, at
   1440px, a genuine widow ("New Construction, / Pool"). Stacking tag above
   label (flex-direction:column) gives the label the card's FULL text width
   instead of a shrunk leftover, so every label now fits on one line at every
   card width this site uses. */
.prop-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:linear-gradient(to top,rgba(6,14,20,.95) 0%,rgba(6,14,20,.88) 40%,rgba(6,14,20,.55) 75%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;font-size:.82rem;font-weight:700;color:#fff;min-height:150px;gap:6px}
.prop-cap span.tag{color:#fff;text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;white-space:nowrap}
.prop-cap span:not(.tag){text-wrap:balance;hyphens:none}

/* ---------- Form fields (contact form) ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--sans);font-weight:700;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}

/* ---------- Contact section ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr 1fr;gap:0}
@media (max-width:980px){.contact-grid{grid-template-columns:1fr}}
.contact-grid .media{min-height:320px;background-size:cover;background-position:center}
.contact-grid .copy{padding:60px 44px;background:var(--cream)}
.contact-list{list-style:none;margin:24px 0 30px;padding:0;display:flex;flex-direction:column;gap:18px}
.contact-list li{display:flex;gap:14px;align-items:flex-start;font-size:.94rem}
.contact-list .ic{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-grid .map{min-height:320px}
.contact-grid .map iframe{width:100%;height:100%;min-height:320px;border:0;display:block}

/* ---------- FAQ accordion ---------- */
.faq-list{max-width:820px;margin:44px auto 0}
.faq-item{border-bottom:1px solid var(--line-gold)}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:20px 6px;cursor:pointer;font-weight:600;font-size:1rem;color:var(--cream-text)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .plus{color:var(--gold);font-size:1.3rem;font-weight:300;flex-shrink:0;margin-left:16px;transition:transform .2s}
.faq-item[open] .plus{transform:rotate(45deg)}
.faq-item .a{padding:0 6px 22px;color:var(--cream-text-muted);font-size:.95rem;max-width:700px;text-wrap:pretty}

/* ---------- Testimonials ---------- */
.testi-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
@media (max-width:900px){.testi-strip{grid-template-columns:1fr}}
.testi-card{background:#fff;border:1px solid var(--line-gold);padding:28px 26px;box-shadow:var(--shadow)}
.testi-card p{font-style:italic;color:var(--ink);font-size:.94rem}
.testi-who{display:flex;align-items:center;gap:12px;margin-top:16px}
.testi-who img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.testi-who b{display:block;font-size:.88rem}
.testi-who span{display:block;font-size:.76rem;color:var(--ink-muted)}
.stars{color:var(--gold);font-size:.9rem;letter-spacing:2px;margin-bottom:10px}

/* ---------- Areas pill row ---------- */
.area-pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.area-pills a{border:1px solid var(--line-gold);color:var(--cream-text-muted);padding:9px 18px;border-radius:20px;font-size:.84rem}
.area-pills a:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- Process steps (horizontal) ---------- */
.step-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px;counter-reset:step}
@media (max-width:900px){.step-row{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.step-row{grid-template-columns:1fr}}
.step{position:relative;padding-top:52px}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:1.1rem}
.step h3{font-size:1.02rem}
.step p{color:var(--ink-muted);font-size:.9rem}

/* ---------- Gallery grid ---------- */
.gallery-grid{columns:4 240px;column-gap:16px;margin-top:40px}
.gallery-grid figure{margin:0 0 16px;break-inside:avoid;position:relative;overflow:hidden}
.gallery-grid img{width:100%;display:block;transition:transform .4s ease}
.gallery-grid figure:hover img{transform:scale(1.05)}
@media (max-width:640px){.gallery-grid{columns:2 160px}}

/* ---------- Footer ---------- */
/* Body copy in the footer read as low-contrast to an independent vision-model pass
   even though --cream-text-muted measures well above 4.5:1 on this background -
   nudging it a touch lighter and bumping size slightly for legibility (QA punch list
   item 7, 2026-09-10 fix pass), still inside the navy/cream/gold palette. */
footer{background:#081319;color:var(--footer-text,#d9d2c2);padding:64px 0 0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:32px}
@media (max-width:980px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-grid h4{color:var(--gold);font-family:var(--sans);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
.footer-grid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.footer-grid ul a{font-size:.92rem}
.footer-grid ul a:hover{color:var(--gold)}
.footer-brand img{width:150px;height:auto;margin-bottom:14px}
.footer-brand p{font-size:.92rem;max-width:280px}
.social-row{display:flex;gap:10px;margin-top:6px}
.social-row a{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-gold);display:flex;align-items:center;justify-content:center}
.social-row a:hover{border-color:var(--gold);color:var(--gold)}
.nl-form{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.nl-form input{padding:12px 14px;border:1px solid var(--line-gold);background:transparent;color:#fff;font-family:var(--sans);font-size:.88rem}
.nl-form input::placeholder{color:var(--cream-text-muted)}
.areas-strip{border-top:1px solid var(--line-gold);margin-top:48px;padding:26px 0}
.areas-strip h4{color:var(--gold);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.areas-strip .row{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.85rem}
.legal-bar{border-top:1px solid var(--line-gold);margin-top:26px;padding:22px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.85rem}
.legal-bar a{margin-left:16px}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* ---------- Misc page kinds ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:44px}
@media (max-width:860px){.two-col{grid-template-columns:1fr}}
/* Gap above the list + a left indent so it doesn't sit flush against the heading's
   left edge (QA fix pass, 2026-09-10, sitewide standing rule). */
.check-list{list-style:none;margin:20px 0 20px;padding:0 0 0 20px;display:flex;flex-direction:column;gap:14px}
.check-list li{display:flex;gap:12px;align-items:flex-start}
.check-list .ic{width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--navy);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}
.breadcrumb{font-size:.78rem;color:var(--ink-muted);padding:18px 0}
/* QA round 7 fix, HIGH hard check (h): --gold-dark (#a8841c) on cream = 3.12:1,
   still under 4.5:1 (privacy-policy + terms-of-use "Home" breadcrumb link, the
   only 2 pages using this plain .breadcrumb on a cream section). Same #7D5F12
   token as .eyebrow. */
.breadcrumb a{color:#7D5F12}
table.data{width:100%;border-collapse:collapse}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;padding:10px;z-index:100}
.skip-link:focus{left:10px;top:10px}


/* --- per-page hero background images (3 breakpoints each), hero rebuild 2026-09-10 --- */
/* .hero-about is intentionally absent here: it does not use a background-image at
   all any more. See the dedicated split-hero block near the end of this file. */
.hero-gallery-1{background-image:url('/images/gallery-new-construction-pool-home-south-florida-desktop.jpg?v=20260914a')}
@media (max-width:1023px){.hero-gallery-1{background-image:url('/images/gallery-new-construction-pool-home-south-florida-tablet.jpg?v=20260914a')}}
.hero-renovation-remodeling{background-image:url('/images/hero-renovation-remodeling-drywall-framing-south-florida-desktop.jpg?v=20260914a')}
@media (max-width:1023px){.hero-renovation-remodeling{background-image:url('/images/hero-renovation-remodeling-drywall-framing-south-florida-tablet.jpg?v=20260914a')}}
.hero-bathroom-renovation{background-image:url('/images/hero-bathroom-renovation-modern-vanity-south-florida-desktop.jpg?v=20260914a')}
@media (max-width:1023px){.hero-bathroom-renovation{background-image:url('/images/hero-bathroom-renovation-modern-vanity-south-florida-tablet.jpg?v=20260914a')}}
.hero-kitchen-renovation{background-image:url('/images/hero-kitchen-renovation-modern-remodel-south-florida-desktop.jpg?v=20260914a')}
@media (max-width:1023px){.hero-kitchen-renovation{background-image:url('/images/hero-kitchen-renovation-modern-remodel-south-florida-tablet.jpg?v=20260914a')}}
.hero-living-room-renovation{background-image:url('/images/hero-living-room-renovation-modern-interior-south-florida-desktop.jpg?v=20260914a')}
@media (max-width:1023px){.hero-living-room-renovation{background-image:url('/images/hero-living-room-renovation-modern-interior-south-florida-tablet.jpg?v=20260914a')}}
.hero-room-renovation{background-image:url('/images/hero-room-renovation-interior-south-florida-desktop.jpg?v=20260914a')}
@media (max-width:1023px){.hero-room-renovation{background-image:url('/images/hero-room-renovation-interior-south-florida-tablet.jpg?v=20260914a')}}
.hero-exterior-home-improvement{background-image:url('/images/hero-exterior-home-improvement-modern-two-story-home-south-florida-desktop.jpg?v=20260914a')}
@media (max-width:1023px){.hero-exterior-home-improvement{background-image:url('/images/hero-exterior-home-improvement-modern-two-story-home-south-florida-tablet.jpg?v=20260914a')}}
.hero-weston-fl{background-image:url('/images/shalom-dgani-real-estate-agent-listing-weston-fl-desktop.jpg?v=20260914a')}
@media (max-width:1023px){.hero-weston-fl{background-image:url('/images/shalom-dgani-real-estate-agent-listing-weston-fl-tablet.jpg?v=20260914a')}}
.hero-pembroke-pines-fl{background-image:url('/images/shalom-dgani-real-estate-agent-listing-pembroke-pines-fl-desktop.jpg?v=20260914a')}
@media (max-width:1023px){.hero-pembroke-pines-fl{background-image:url('/images/shalom-dgani-real-estate-agent-listing-pembroke-pines-fl-tablet.jpg?v=20260914a')}}
.hero-cooper-city-fl{background-image:url('/images/welcome-to-cooper-city-fl-sign-shalom-dgani-real-estate-agent-desktop.jpg?v=20260914a')}
@media (max-width:1023px){.hero-cooper-city-fl{background-image:url('/images/welcome-to-cooper-city-fl-sign-shalom-dgani-real-estate-agent-tablet.jpg?v=20260914a')}}
.hero-tamarac-fl-1{background-image:url('/images/shalom-dgani-real-estate-agent-listing-tamarac-fl-desktop.jpg?v=20260914a')}
@media (max-width:1023px){.hero-tamarac-fl-1{background-image:url('/images/shalom-dgani-real-estate-agent-listing-tamarac-fl-tablet.jpg?v=20260914a')}}
.hero-lauderhill-fl{background-image:url('/images/shalom-dgani-real-estate-agent-listing-lauderhill-fl-desktop.jpg?v=20260914a')}
@media (max-width:1023px){.hero-lauderhill-fl{background-image:url('/images/shalom-dgani-real-estate-agent-listing-lauderhill-fl-tablet.jpg?v=20260914a')}}
.hero-lauderdale-lakes-fl{background-image:url('/images/shalom-dgani-real-estate-agent-listing-lauderdale-lakes-fl-desktop.jpg?v=20260914a')}
@media (max-width:1023px){.hero-lauderdale-lakes-fl{background-image:url('/images/shalom-dgani-real-estate-agent-listing-lauderdale-lakes-fl-tablet.jpg?v=20260914a')}}
.hero-dania-beach-fl{background-image:url('/images/shalom-dgani-real-estate-agent-listing-dania-beach-fl-desktop.jpg?v=20260914a')}
@media (max-width:1023px){.hero-dania-beach-fl{background-image:url('/images/shalom-dgani-real-estate-agent-listing-dania-beach-fl-tablet.jpg?v=20260914a')}}

/* QA round 3 (2026-09-10): the hero subtitle measured 4.0:1 over the About photo
   at 1440-2560px; this lighter tone clears the 4.5:1 floor. */
.hero .sub{color:#ECE5D6}

/* ---------- About hero: real portrait, its own ratio, split layout ---------- */
/* The only real photo of Shalom for this page is a 3:4 studio-style portrait
   (client's own photo, 1200x1600). Every attempt to AI side-extend it to the
   shared 21:9 hero ratio left a duplicated house or a hard seam (Adir: "you're
   showing two pictures... you need to know what ratio you need to design it").
   Fix: the About hero stops using the shared background-image aspect-ratio
   system entirely and becomes its own two-column layout - a solid navy panel
   for the H1/sub/CTA on the left, the real <img> pinned at its native 3:4 ratio
   on the right, no AI extension, no cover-crop guessing. Coordinator fix,
   2026-09-11. */
.hero-about,.hero-split{background-image:none;align-items:stretch}
/* Two classes to beat the shared .hero:not(.hero-home)::before rule's own
   two-class specificity (that rule re-enables content:"" + a padding-top
   ghost box at <=767px for the old background-image photo band - with a
   real <img> instead, that ghost box was adding a ~219px blank navy gap
   between the photo and the headline on mobile). */
.hero.hero-about::before,.hero.hero-split::before{content:none}
/* REBALANCE (coordinator fix, 2026-09-11, QA round 5): the photo used to sit
   OUTSIDE .container as a section-level flex sibling, with the container set
   to flex:1 1 0;max-width:none - that let the container swallow the full
   viewport width, capped the text at 50 percent, and left the leftover
   container space as dead navy between the text and a photo pinned to the
   far right. Fix: the photo now lives INSIDE .container in the HTML (text
   then photo, both real flex children of one row), and .container is left
   to inherit the site own max-width:var(--maxw);margin:0 auto;padding:0 24px
   from the base .container rule - the same box the header logo and
   breadcrumb use - so the whole text+photo composition sits inside the
   1240px column while the navy background on the section stays full-bleed. */
/* QA round 6 fix, MEDIUM #6: this row was a flex item of the OUTER .hero (which
   is itself display:flex), sized by flex-basis:auto (content width) instead of
   the full hero width. Combined with the base .container rule's margin:0 auto,
   flexbox auto-margins then centered the whole text+photo row as a unit inside
   the hero, pulling the H1 in from the left edge (off the breadcrumb/logo grid
   by 11-143px). width:100% forces this row back to the hero's full width so
   flex-start (default) lands the text flush with the container's own padding,
   matching the breadcrumb below it. */
.hero-about>.container,.hero-split>.container{display:flex;align-items:center;gap:clamp(32px,4vw,64px);width:100%}
.hero-about .hero-inner,.hero-split .hero-inner{flex:1 1 0;min-width:0;max-width:none}
.hero-about-photo,.hero-split-photo{position:relative;overflow:hidden;flex:0 0 auto;background:#0a1621;border:1px solid var(--line-gold)}
.hero-about-photo img,.hero-split-photo img{display:block;width:100%;height:100%;object-fit:cover}

/* .hero-split (added 2026-09-11): same two-column pattern as .hero-about, reused
   for every page whose only real photo of Shalom is a portrait crop that cannot
   be safely AI side-extended to the shared 21:9 band (Adir: a stranger's head
   behind the headlines / you're showing two pictures). Unlike .hero-about, the
   photo's own ratio is NOT hardcoded here - each page pins its own real ratio
   with an inline aspect-ratio style on .hero-split-photo (ratios differ: 3:4
   portraits vs plantation's ~2:3 crop and davie's ~0.59:1 crop), so this shared
   CSS never forces a crop. object-fit:cover is a no-op once the box matches the
   image's own ratio. */
@media (min-width:1024px){
  /* Height rebalanced 2026-09-11 (QA round 5): 520-720px let the section grow
     tall enough that even a full-ratio photo left large empty navy margins
     above/below the text; 460-640px keeps the photo readable while shrinking
     that margin. .container now inherits the site's own centered 1240px box
     (see the base rule above) so no padding-left hack is needed here any more
     - removing it also deletes the seam between this hero and the breadcrumb
     container it used to fight with. */
  .hero-about{aspect-ratio:auto;height:clamp(460px,36vw,640px)}
  .hero-about-photo{height:100%;aspect-ratio:3/4}
  .hero-about-photo img{object-position:center top}
  /* .hero-split gets the same treatment, height:auto and own-ratio driven by
     the inline aspect-ratio on .hero-split-photo (never a hardcoded 3/4). */
  .hero-split{aspect-ratio:auto;height:clamp(460px,36vw,640px)}
  .hero-split-photo{height:100%}
  .hero-split-photo img{object-position:center top}
}
@media (min-width:768px) and (max-width:1023px){
  .hero-about{aspect-ratio:auto;height:clamp(420px,46vw,460px)}
  .hero-about-photo{height:100%;width:auto;aspect-ratio:3/4}
  .hero-about-photo img{object-position:center top}
  /* .hero-split stays at its own ratio at tablet too (task requirement: own
     ratio, never cropped, on desktop AND tablet) - width:auto lets the browser
     compute width from height + the inline aspect-ratio instead of a fixed
     cover-crop column. .hero-about now matches (coordinator fix 2026-09-11):
     the old 42%-width cover-crop column cropped the portrait at this
     breakpoint too. */
  .hero-split{aspect-ratio:auto;height:clamp(420px,46vw,460px)}
  .hero-split-photo{height:100%;width:auto}
  .hero-split-photo img{object-position:center top}
}
@media (max-width:767px){
  .hero-about{display:flex;flex-direction:column;align-items:stretch;height:auto;aspect-ratio:auto;min-height:0}
  /* container keeps its default padding:0 24px (base .container rule) so the
     text lines up at the same 24px inset every other page uses - it is left
     unset here on purpose, do not re-zero it. Now display:flex;column so the
     photo (order:-1) still reorders above the text now that it lives INSIDE
     this container instead of as a section-level sibling. */
  .hero-about>.container{display:flex;flex-direction:column;flex:0 0 auto;max-width:none;margin:0}
  .hero-about-photo{order:-1;width:100%;height:auto;aspect-ratio:3/4;flex:0 0 auto}
  .hero-about-photo img{object-position:center top}
  .hero-split{display:flex;flex-direction:column;align-items:stretch;height:auto;aspect-ratio:auto;min-height:0}
  .hero-split>.container{display:flex;flex-direction:column;flex:0 0 auto;max-width:none;margin:0}
  .hero-split-photo{order:-1;width:100%;height:auto;flex:0 0 auto}
  .hero-split-photo img{object-position:center top}
}

/* HERO-RATIO-FIT (2026-09-11): keep every hero box at its photo's ratio. Measured
   across all 29 photo heroes: at 768-1100px the 5vw headline ran to 3-4 lines and
   pushed the box taller than 16:9 (tablet photo) or 21:9 (desktop photo), so cover
   cropped up to 26% of the photo (slot 1.40-1.93 vs image 1.79 / 2.36). Tighter
   headline and padding in those two bands only; 1280px+ and phones are unchanged. */
@media (min-width:768px) and (max-width:1023px){
  .hero .hero-inner{padding:36px 0 28px}
  .hero:not(.hero-home) h1{font-size:clamp(1.75rem,3.9vw,2.4rem)}
  .hero .sub{font-size:1rem;margin-bottom:20px}
}
@media (min-width:1024px) and (max-width:1279px){
  .hero .hero-inner{padding:40px 0 32px}
  .hero:not(.hero-home) h1{font-size:clamp(2.2rem,3.9vw,3rem)}
  .hero .sub{margin-bottom:22px}
}

/* About page "Meet Shalom Dgani" section: QA round 6 (2026-09-11) - the round-5
   aspect-ratio:1.6 + align-self:start fix (see git history) left the photo
   pinned top-right with 272-526px of empty cream below it at 1024-1440,
   because the box no longer matched the taller copy column's height. Reverted:
   .about-meet-media now falls back to the base .split .media behaviour
   (stretch to the row's full height, min-height 420px, object-fit:cover,
   object-position center) - Shalom sits near the centre of this 1.6 photo, so
   the default center crop keeps his whole figure with no overflow and no cut
   head at 1024-1920. */

/* ---------- Properties page (/properties, added 2026-09-11) ---------- */
/* Plain navy header band - no photo (task requirement: this page has no matching
   real hero photo, so it reuses the site's hero typography on a solid navy field
   instead of forcing a mismatched image into the shared .hero aspect-ratio system). */
.hero-plain{background:var(--navy);padding:72px 0 44px;text-align:center}
/* QA round 7 fix: /properties' "Featured Homes" eyebrow lives in .hero-plain, a
   navy section that isn't .section-navy, so it was about to inherit the new
   darker cream-only .eyebrow color (#7D5F12) onto a navy background - unreadable.
   Scoped back to the bright --gold token, same as .section-navy .eyebrow. */
.hero-plain .eyebrow{color:var(--gold)}
.hero-plain .hero-inner{max-width:680px;margin:0 auto;padding:0}
.hero-plain h1{color:#fff;margin-bottom:16px}
.hero-plain .sub{font-size:1.15rem;color:var(--cream-text-muted);margin:0 auto 26px;max-width:600px}
.hero-plain .hero-actions{justify-content:center}
@media (min-width:1024px){.hero-plain{padding:104px 0 56px}}

/* Property cards: EACH photo keeps its own real ratio (4:3 or 1.6:1 across this
   set) via an inline aspect-ratio on .props-photo that matches the source file
   exactly, so object-fit:cover is a no-op and nothing is cropped or stretched
   (feedback_image_ratio_regenerate_dont_create). Deliberately a separate class
   from the homepage's fixed-height .prop-card so that component is untouched. */
/* Masonry via CSS columns (coordinator fix, 2026-09-11): mixed photo ratios
   made a CSS Grid row stretch every card to the tallest one, so h3/link ended
   up at different heights across a row - it read as accidental. Columns give
   each card its own auto height (no row to stretch to), so the title/link
   always sit directly under that card's own photo. break-inside:avoid keeps a
   card from splitting across a column break; margin-bottom on the card is the
   vertical gap (multicol column-gap is horizontal-only). */
.props-grid{column-count:3;column-gap:26px;margin-top:44px}
@media (max-width:1024px){.props-grid{column-count:2}}
@media (max-width:640px){.props-grid{column-count:1}}
.props-card{border:1px solid var(--line-gold);background:var(--navy-2);overflow:hidden;display:flex;flex-direction:column;scroll-margin-top:120px;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;margin:0 0 26px}
.props-card .props-photo{position:relative;overflow:hidden;background:#0a1621}
.props-card .props-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.props-card:hover .props-photo img{transform:scale(1.05)}
.props-card .props-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.props-card .props-tag{color:var(--gold);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:700}
.props-card h3{color:#fff;font-size:1.02rem;margin:0}
.props-card .props-link{margin-top:auto;padding-top:8px;color:var(--gold);font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase}
.props-card .props-link:hover{color:#fff}

/* Homepage Featured Properties cards become real links (2026-09-11): grid items
   are blockified by the parent's display:grid regardless of the <a> tag's default
   inline display, so no extra display rule is required for layout - this rule
   only restores the pointer + focus affordance an <a> needs as an interactive card. */
a.prop-card{cursor:pointer}
a.prop-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* QA round 5's align-self:start override removed in round 6 (see the reverted
   .about-meet-media block above) - this class no longer carries any CSS of its
   own, it just falls back to the base .split .media rules. */
/* QA round 5: address/phone/hours list indented like every other list (18-24px). */
.contact-list{padding-left:20px}

/* ---------- QA round 6 fixes (2026-09-11) ---------- */

/* HIGH #2: home "Meet Shalom" photo (4:5 portrait) at stacked widths - the old
   fixed 280px band with object-position 50% 50% only showed his mouth/chin.
   50% 20% keeps his face+shoulders in frame; aspect-ratio:4/3 replaces the flat
   280px band with a taller box so less of the portrait is cropped away.
   Desktop full-section-height (no cream inset) comes from the section's own
   style="padding:0" in the HTML (same pattern the Local Knowledge section
   already used) plus the existing .split .media stretch/min-height:420px
   behaviour - no CSS override needed for >=901px, this class is untouched
   there and simply inherits the base full-height stretch. */
.split .home-meet-media img{object-position:50% 20%}
@media (max-width:900px){
  .split .home-meet-media{min-height:0;aspect-ratio:4/3}
}

/* HIGH #3: home "Local Knowledge" photo (925x832 = 1.11:1) - the image column
   was stretching to match the tall copy column's height, so object-fit:cover
   sliced Shalom and the Davie sign at every width from 768 to 1920. Pinning
   the box to the photo's own ratio makes cover a no-op (nothing cropped);
   align-self:center keeps it vertically centred against the copy column
   instead of pinned to the top (which would leave empty cream below, same
   defect as the about-page Meet photo above). */
.split .home-lk-media{align-self:center;min-height:0;aspect-ratio:925/832}

/* MEDIUM #8: section CTAs directly inside a .split .copy column were flex
   children of a column flex parent (default align-items:stretch), so they
   filled the whole column width (~880px @1920) instead of hugging their own
   text like the mockup's compact pill buttons. */
.split .copy>.btn{align-self:flex-start}

/* HIGH #4: Meet Shalom stat row widows ("Broward and / Miami-Dade", "One
   dedicated / contact" @1024/1440) plus one-word-per-line titles @1024. A
   real container query lets the 4-across icon-over-label row (matches the
   mockup) fall back to 2x2 the moment its own column drops under ~700px,
   instead of guessing a viewport width that varies by which split section it
   sits in. container-type:inline-size on .split .copy makes it the query
   context for the stat-row inside it. The @container rule that actually sets
   grid-template-columns moved to the end of this file in QA round 7 (see
   "HIGH #4 cascade fix" below) - it used to sit right here, ABOVE the later
   unscoped .stat-row{grid-template-columns:repeat(4,...)} rule in the
   MOCKUP-FIT block, so at equal specificity the later rule always won and the
   2x2 fallback never actually applied. */
.split .copy{container-type:inline-size}

/* MINOR: Featured Properties card 4's longer 2-line label vs the other cards'
   1-line labels is fixed directly on the base .prop-cap rule above
   (min-height:70px;gap:10px) so every card's caption band is the same height
   regardless of how many lines its label wraps to. */

/* MOCKUP-FIT (2026-09-11, QA round 5 ask-1 items): match the approved mockup -
   service-card icon and copy centred on the card, and the four Meet Shalom stats
   in one row with the icon above each label (2 x 2 on phones). */
.svc-card .icon-badge{left:50%;transform:translateX(-50%)}
.svc-card .body{text-align:center}
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;flex-wrap:nowrap}
.stat-item{flex-direction:column;align-items:center;text-align:center;min-width:0;gap:8px}
@media (max-width:480px){.stat-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}}

/* ---------- QA round 7 fixes (2026-09-11) ---------- */

/* HIGH #4 cascade fix: this @container rule must be the LAST .stat-row
   grid-template-columns declaration in the file so it actually wins at
   1024-1140px column widths (~400-608px @1024/1440) where the 4-across row
   forced one-word-per-line titles and split "Miami-Dade" itself across two
   lines. Same specificity as the plain .stat-row rules above (one class), so
   source order alone decides - moving it here instead of raising specificity,
   per the fix note. */
@container (max-width:700px){
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* MEDIUM ask 4 (about page): the Meet photo (1.6:1 real listing-8 photo) sat in
   a flat 280px band at 768-900px (2.74-3.21:1), showing only the head and a
   sliver of upper body. Pin the box to the photo's own ratio so cover is a
   no-op - the section is stacked to a single column at this breakpoint (see
   the base .split max-width:900px rule above), so there is no row to stretch
   to and no risk of reintroducing the sliced-photo bug HIGH #2/#3 fixed for
   the home page's own media blocks. */
@media (max-width:900px){
  .split .about-meet-media{min-height:0;aspect-ratio:1.6}
}
/* At >=1024px this photo still uses the default .split .media full-row-height
   stretch (min-height:420px, object-fit:cover, center center), which crops a
   1.6:1 photo into a much taller box. Shalom sits low-centre in this photo
   with foliage filling the top third, so biasing the crop down (instead of
   dead-center) keeps his whole figure in frame instead of cutting into his
   head while showing excess foliage above him. */
@media (min-width:901px){
  .about-meet-media img{object-position:center 78%}
}

/* MOCKUP-FIT ask 5: FAQ accordion was capped at 820px inside the 1240px
   container, reading much narrower than every other section (property cards,
   service cards) above it and than the mockup's own accordion, which spans
   the same column as everything else on the page. */
.faq-list{max-width:none}

/* QA round 8 (2026-09-11): the nowrap "Miami-Dade" span inside a stat sub-label was
   picked up by .stat-item span{display:block} and forced onto its own line - keep it inline. */
.stat-item span span{display:inline}
/* QA round 8: the Featured caption scrim darkened most of each photo - keep the dark band
   to the caption area (bottom ~40%), tags and labels still sit on >=.8 navy. */
.prop-cap{min-height:0;padding-top:34px;background:linear-gradient(to top,rgba(6,14,20,.94) 0%,rgba(6,14,20,.84) 55%,rgba(6,14,20,0) 100%)}

/* QA round 8: About "Meet Shalom" now uses the full-length original (not the landscape
   crop), framed on him at every width; square band when stacked. */
.split .about-meet-media img{object-position:50% 35%}
@media (max-width:900px){.split .about-meet-media{aspect-ratio:1/1}}
/* QA round 9 (2026-09-11) blocker: from 1367px the full-bleed 50/50 split made the About Meet box
   landscape (960x585 at 1920, 1280x513 at 2560) and cut Shalom at the thighs and hips. There the
   split sits in the 1240px container and the photo box takes the photo's own ratio, so the whole
   portrait shows at every wide width. */
@media (min-width:1367px){.split.about-meet{max-width:1240px;margin-inline:auto}.split .about-meet-media{min-height:0;aspect-ratio:1000/1154;align-self:center}}
/* QA round 9 blocker: at 360-375 the 2x2 stat grid put a one-line label beside a two-line one.
   Up to 400px the stats are one indented list, icon left, so every label gets the full width. */
@media (max-width:400px){.stat-row{grid-template-columns:1fr;row-gap:14px;padding-left:20px}.stat-item{flex-direction:row;align-items:center;text-align:left;gap:12px}}
/* QA round 9 medium: Featured captions are one row (the property type) in a thin band like the
   mockup; the county tag that repeated on all four cards is gone. */
.prop-cap{min-height:0;padding:24px 16px 12px;background:linear-gradient(to top,rgba(6,14,20,.92) 0%,rgba(6,14,20,.8) 50%,rgba(6,14,20,0) 100%)}

/* QA round 10 (2026-09-11) blocker: the home Meet portrait (2700x3375) sat in a landscape box from 1367px
   (960x641 at 1920 showed 53%, cut mid-chest; 2560 showed 36%). Same treatment as About: the split
   sits in the 1240px container and the photo box takes the photo's own ratio. */
@media (min-width:1367px){.split.home-meet{max-width:1240px;margin-inline:auto}.split .home-meet-media{min-height:0;aspect-ratio:2700/3375;align-self:center}}
/* QA round 10 medium: at 900px and below the 4:3 box showed 60% of the portrait (cut at the chest). */
@media (max-width:900px){.split .home-meet-media{aspect-ratio:1/1}}
/* QA round 10 medium: at 901-960px "Buyers, sellers and investors" needed 162.6px in a 161-162px
   column and wrapped beside a one-line label. */
@media (min-width:901px) and (max-width:960px){.stat-row{column-gap:10px}}
/* QA round 10 medium: up to 400px the stat list sat 42px under its paragraph (flex column, so the
   paragraph's 16px and the row's 26px margins added up). */
@media (max-width:400px){.stat-row{margin-top:0}}

/* QA round 11 (2026-09-11) blockers, from the first sweep of every content photo on every page. */
/* Meet photos 901-1366: the photo box keeps the photo's own ratio (it showed under 70% at 901-994). */
@media (min-width:901px){.split.about-meet,.split.home-meet{max-width:1240px;margin-inline:auto}.split .about-meet-media{min-height:0;aspect-ratio:1000/1154;align-self:center}.split .home-meet-media{min-height:0;aspect-ratio:2700/3375;align-self:center}}
/* Service-card thumbnails take the photos' 1000x625 ratio instead of a fixed 150px strip (the
   renovation page's 4:3 photos set their own ratio inline). The icon badge now sits on the
   thumbnail's bottom edge in the flow, so it can never land on a face. */
.svc-card .thumb{height:auto;aspect-ratio:1000/625}
.svc-card .icon-badge{position:relative;top:auto;left:auto;transform:none;margin:-28px auto 0;z-index:1}
.svc-card .body{padding-top:14px}
/* Contact band: the 4:5 photo is never squeezed under 70% shown. Up to 980px the band stacks and the
   photo keeps its own ratio (capped at 480px wide); 981-1359 is photo + copy with the map full width
   below; from 1360 the three columns return; above 1920 the band stops growing. */
@media (max-width:980px){.contact-grid .media{min-height:0;aspect-ratio:4/5;width:100%;max-width:480px;margin-inline:auto}}
@media (min-width:981px) and (max-width:1359px){.contact-grid{grid-template-columns:.8fr 1.2fr}.contact-grid .map{grid-column:1/-1}}
@media (min-width:1921px){.contact-grid{max-width:1920px;margin-inline:auto}}

/* QA round 12 (2026-09-11) blockers on the service cards. */
/* Equal columns: plain 1fr let a card with a non-breaking heading grow wider, so its photo and badge sat lower. */
.card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1024px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.card-grid{grid-template-columns:minmax(0,1fr)}}
/* The six-card grids (Real Estate Services, Renovation) use 3 columns from 1025px instead of 4 + 2. */
@media (min-width:1025px){.card-grid:has(> .svc-card:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}}
/* The icon badge sits below the photo, so it never covers the agent or the sign. */
.svc-card .icon-badge{margin:14px auto 0}
/* "Learn more" lines up at the bottom of every card in a row. */
.svc-card{display:flex;flex-direction:column}
.svc-card .thumb,.svc-card .icon-badge{flex-shrink:0}
.svc-card .body{flex:1;display:flex;flex-direction:column}
.svc-card .body .more{margin-top:auto;align-self:center}
/* Contact band: the full-length photo is anchored at the bottom, so his feet stay in when the box is wider than the photo. */
.contact-grid .media{background-position:50% 100%}

/* QA round 13 (2026-09-11): in the narrow 2-column card band the glued last word pairs
   ("Your Property", "Relocation Support", "Placement Services") need a little more line width. */
@media (min-width:561px) and (max-width:640px){.svc-card .body{padding-inline:16px}}
/* QA round 13 minor: in the two narrow card bands two-word titles ("Renovation Services",
   "Property Management", "Bathroom Renovation") split one word per line beside one-line
   neighbours. A touch smaller title and 16px side padding keep them on one line. */
@media (min-width:561px) and (max-width:640px){.svc-card h3{font-size:.95rem}}
@media (min-width:1025px) and (max-width:1151px){.svc-card .body{padding-inline:16px}.svc-card h3{font-size:.95rem}}