/* ====================================================================
   DESIGN SYSTEM
   ====================================================================
   Colors + Fonts: live in Elementor's native Global Colors / Global Fonts
   (Site Settings → Global Colors / Global Fonts), NOT here — that's the
   native, wp-admin-editable layer. The --ink/--gold/--ff-display/etc.
   tokens below still exist because Elementor Free has no CSS-variable
   export of its Global Colors/Fonts, so component CSS (buttons, cards,
   contextual heading overrides) needs its own copies that match the Kit
   values exactly. Change a brand color/font in BOTH places if it ever
   changes: Site Settings (source of truth, affects every Elementor
   heading/text/button widget) and the matching token below (keeps this
   file's component layer in sync).

   Spacing scale: Elementor Free has no native global-spacing mechanism,
   so this is the CSS-native equivalent — 8/16/24/32/48/64/96px steps.
   Applied only where a container's existing value already equalled one of
   these steps exactly (zero visual change). Every other padding/gap/margin
   in this file is bespoke, intentional spacing carried over unchanged from
   the approved prototype design — close-but-not-exact values (e.g. 26px,
   30px, 56px, 88px) were deliberately left as literal px rather than
   snapped to the nearest step, since that would shift already-approved
   pixel measurements with no functional benefit.

   Radius/shadow/container-width: already a single global token each
   (--radius/--radius-sm, --shadow, --maxw) — no native Elementor
   equivalent without Pro, kept as-is.

   Buttons/cards: documented, reusable component classes further down
   this file (.btn/.btn-primary/.btn-secondary/.btn-light and
   .benefit-card/.service-card/.listing-card/.partner-card/.testimonial-
   card/.contact-form/.contact-info-card) — Elementor Free has no Global
   Widget templates to replace these with, so this is the recognized
   "card" and "button" system for the site.

   Icon sizing: two intentional tiers — 16px for inline label icons next
   to text (location/specs/contact rows), 22-26px for feature icons inside
   a dedicated badge (benefit/service cards). Minor drift within the 16px
   tier (14/15/16/17px across different rows) was harmonized to a single
   16px during the Phase 4 consistency pass; the 22-26px tier is a
   deliberate size difference between benefit-card (26px) and service-card
   (22px) icons, not drift, since those two card types read at slightly
   different visual weights on Home vs Services.

   Card radius: all cards use --radius (18px) uniformly. hero-badge
   previously used a bespoke 16px, harmonized to --radius during the same
   pass — the two were too close to read as an intentional size tier.

   Card padding: the three 3-column grid cards (benefit/service/testimonial)
   share identical padding (30px 26px) so they read as one consistent card
   family across Home and Services; other cards (partner/contact-form/
   contact-info/listing-cta/mission-box) intentionally use their own
   padding since they're full-width or single-instance components in a
   different context, not part of that grid-card family.
   ==================================================================== */
  :root{
    --ink:#14213D;
    --ink-2:#0E1830;
    --sand:#F1E9D8;
    --paper:#FBF7EE;
    --white:#FFFFFF;
    --gold:#C89B3C;
    --gold-dark:#AB8433;
    --clay:#A8462F;
    --teal:#1F6F5C;
    --charcoal:#21201C;
    --muted:#6B6558;
    --line:rgba(20,33,61,0.14);
    --line-soft:rgba(20,33,61,0.08);
    --shadow:0 20px 50px -25px rgba(20,33,61,0.35);
    --radius:18px;
    --radius-sm:10px;
    --maxw:1320px;

    /* Spacing scale (design system) — 8/16/24/32/48/64/96px steps. */
    --space-1:8px;
    --space-2:16px;
    --space-3:24px;
    --space-4:32px;
    --space-5:48px;
    --space-6:64px;
    --space-7:96px;

    --ff-display:'Fraunces', serif;
    --ff-body:'Manrope', sans-serif;
    --ff-mono:'IBM Plex Mono', monospace;
  }

  /* Root font-size drives every rem-based size in this file (nearly all of
     them) — a single, proportional "make everything a bit bigger" bump
     (16px browser default → 17px, ~6%) rather than editing dozens of
     individual component font-size rules one at a time. */
  html{font-size:17px;}

  body.wins-hub{
    font-family:var(--ff-body);
    font-weight:500;
    color:var(--charcoal);
    background:var(--sand);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .wins-hub img{max-width:100%;display:block;}
  .wins-hub a{color:inherit;text-decoration:none;}
  .wins-hub button{font-family:inherit;cursor:pointer;}
  .wins-hub h1,.wins-hub h2,.wins-hub h3,.wins-hub h4{font-family:var(--ff-display);color:var(--ink);margin:0 0 .5em;line-height:1.12;font-weight:700;}
  /* Elementor injects its own inline <style> tag with .e-con{max-width:100%
     !important;width:100% !important;} — !important always beats a non-
     important declaration regardless of specificity, so this was silently
     stretching EVERY .container on every page (header included) to full
     viewport width instead of the intended 1180px centered column. This is
     the actual root cause of the header-width issue — and every other
     section was quietly affected the same way. */
  .wins-hub .container{max-width:var(--maxw) !important;margin:0 auto !important;padding:0 var(--space-3) !important;}

  .icon{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em;}
  .icon-fill{fill:currentColor;stroke:none;}

  .eyebrow{
    font-family:var(--ff-mono);
    font-size:.72rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--clay);
    font-weight:500;
    display:inline-flex;
    align-items:center;
    gap:.5em;
    margin-bottom:1em;
  }
  .eyebrow::before{content:"";width:22px;height:1px;background:var(--clay);display:inline-block;}

  .mono{font-family:var(--ff-mono);}

  /* Buttons */
  .btn{
    display:inline-flex;align-items:center;gap:.55em;
    padding:.85em 1.5em;
    border-radius:100px;
    font-weight:700;
    font-size:.95rem;
    border:1.5px solid transparent;
    transition:transform .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
    white-space:nowrap;
  }
  .btn .icon,.btn i{width:1.05em;height:1.05em;}
  .btn-primary{background:var(--gold);color:var(--ink);border-color:var(--gold);}
  .btn-primary:hover{background:var(--gold-dark);border-color:var(--gold-dark);color:var(--ink);transform:translateY(-2px);}
  .btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink);}
  .btn-secondary:hover{background:var(--ink);color:var(--sand);transform:translateY(-2px);}
  .btn-light{background:transparent;color:var(--paper);border-color:rgba(251,247,238,.5);}
  .btn-light:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);transform:translateY(-2px);}
  .btn-sm{padding:.6em 1.1em;font-size:.82rem;}
  .btn-block{width:100%;justify-content:center;}

  /* Header */
  .site-header{
    position:sticky;top:0;z-index:60;
    background:rgba(241,233,216,.86);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-soft);
  }
  /* header-row / brand / header-actions layout (flex-direction, align-items,
     justify-content, gap, padding) now live as native Elementor Container
     settings (Layout tab), not CSS — see the Phase 2 migration notes near
     the bottom of this file for what used to compensate for this and why
     it was removed. */
  .brand-mark{width:34px;height:34px;flex:none;}
  .brand-text{display:flex;flex-direction:column;line-height:1.05;}
  .brand-name{font-family:var(--ff-mono);font-weight:600;letter-spacing:.04em;font-size:.95rem;color:var(--ink);margin:0;}
  .brand-sub{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}

  .main-nav{display:flex;align-items:center;gap:6px;}
  .main-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px;}
  .main-nav a,.main-nav .elementor-item{
    padding:.6em 1em;border-radius:100px;font-weight:600;font-size:.92rem;color:var(--ink);
    position:relative;transition:background .2s ease,color .2s ease;display:inline-block;
  }
  .main-nav a:hover{background:rgba(20,33,61,.06);}
  .main-nav a.is-active,.main-nav .elementor-item-active{background:var(--ink);color:var(--sand);}

  /* .header-actions itself (not just its button) must be hidden below
     900px — leaving the (now-empty) Container in the flex row meant
     .main-nav-wrap's justify-content:space-between partner was an invisible
     zero-width box pinned to the true right edge, which pushed the actual
     nav/menu-toggle button away from the edge toward the middle of the
     header instead of flush-right. */
  @media (max-width:900px){
    .main-nav{display:none;}
    .header-actions{display:none;}
  }
  /* Same header-fit reasoning as the nav-link font-size fix above — this
     button sits in the same tight header row and needs to stay at its
     original size for the row to keep fitting without wrapping. */
  .header-actions .btn{font-size:15.2px;}

  /* Hero */
  .hero{
    background:radial-gradient(120% 140% at 15% 0%, #1b2c52 0%, var(--ink) 45%, var(--ink-2) 100%);
    color:var(--paper);
    padding:var(--space-6) 0 90px;
    position:relative;
    overflow:hidden;
  }
  .hero::after{
    content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;
    border-radius:50%;border:1px dashed rgba(200,155,60,.28);
  }
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
  .hero h1{font-size:clamp(2.3rem,4.3vw,3.5rem);letter-spacing:-.01em;}
  /* Elementor's own heading-widget CSS (.elementor-widget-heading
     .elementor-heading-title{color:var(--e-global-color-primary)}) is 2
     classes, which now that Global Colors are configured (Phase 1) beats a
     plain "element h1" selector like .hero h1 outright. Matching its own
     2-class specificity (rather than reaching for !important) and relying on
     source order — this stylesheet loads after Elementor's own generated
     CSS — correctly restores the paper-on-dark heading color here. */
  .hero .elementor-heading-title{color:var(--paper);}
  .hero .eyebrow{color:var(--gold);}
  .hero .eyebrow::before{background:var(--gold);}
  .hero-lead{font-size:1.12rem;font-weight:500;color:rgba(251,247,238,.82);max-width:46ch;}
  /* hero-ctas: flex-direction/wrap/gap now native Container settings
     (previously had stale/wrong native values — nowrap+20px — left over
     from an earlier build attempt, masked by this !important CSS; both are
     now corrected at the source instead). Only margin stays here since
     Elementor Containers have no native margin control. */
  .hero-ctas{margin:1.6em 0 2.2em;}
  .hero-media{position:relative;}
  .hero-media img{
    border-radius:26px;height:420px;width:100%;object-fit:cover;
    box-shadow:0 40px 70px -30px rgba(0,0,0,.55);
  }
  /* hero-badge: flex-direction/align-items/gap now native Container settings. */
  .hero-badge{
    position:absolute;left:-22px;bottom:-26px;
    background:var(--paper);color:var(--ink);
    border-radius:var(--radius);padding:var(--space-2) 20px;
    box-shadow:var(--shadow);
    max-width:270px;
  }
  .hero-badge .hub-mini{width:40px;height:40px;flex:none;}
  /* Real bug found in the Phase 4 accessibility pass: this headline was
     built as an Elementor Heading widget (not the prototype's <strong> tag,
     so .hero-badge strong below never matched it), and its widget-widget
     wrapper sits inside .hero, so .hero .elementor-heading-title{color:
     var(--paper)} (correct for the DARK hero background) was also applying
     here — making the text render in the exact same color as this LIGHT
     badge's own background (100% invisible, not just low-contrast). Also
     converted the widget from h3 to a plain span (Elementor's native
     "HTML Tag" control) to fix a heading-order skip (H1 straight to H3)
     this decorative badge was causing — it isn't a real content section. */
  .hero-badge .elementor-heading-title{
    display:block;color:var(--ink);font-family:var(--ff-display);font-size:1.05rem;
  }
  /* Same dead-selector pattern as the headline above — this sub-label
     ("market with The Wins Hub") is a Text Editor widget's own <div>, never
     a <span>, so this rule never matched and the text was rendering at the
     site's default 16px/charcoal body-text size inside a 270px-wide badge
     instead of the intended small/muted caption treatment. */
  .hero-badge .elementor-widget-text-editor{font-size:.8rem;color:var(--muted);}
  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr;gap:40px;}
    .hero-media img{height:300px;}
    .hero-badge{left:12px;bottom:-22px;max-width:220px;padding:12px 16px;}
  }

  /* Trust strip */
  .trust-strip{background:var(--ink-2);color:var(--paper);padding:26px 0;}
  .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
  .trust-grid .num{font-family:var(--ff-mono);font-size:1.5rem;color:var(--gold);font-weight:600;}
  .trust-grid .lbl{font-size:.78rem;color:rgba(251,247,238,.7);margin-top:2px;}
  @media (max-width:760px){.trust-grid{grid-template-columns:repeat(2,1fr);row-gap:26px;}}

  /* Sections generic */
  .section-pad{padding:88px 0;}
  .section-pad-tight{padding:var(--space-6) 0;}
  .section-alt{background:var(--paper);}
  .section-head{max-width:640px;margin-bottom:var(--space-5);}
  .section-head h2{font-size:clamp(1.7rem,3vw,2.35rem);}
  .section-head p{color:var(--muted);font-size:1.02rem;}
  .section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
  .section-head.center .eyebrow::before{display:none;}

  /* ---- CSS Grid vs boxed-container root cause (Phase 4 finding) ----
     Every ".../*-grid" class below sets display:grid directly, but each of
     these containers is a "boxed" Elementor Container, meaning its actual
     children render one level deeper inside an auto-generated .e-con-inner
     div (see the header-row notes earlier in this file for the general
     mechanism). display:grid on the OUTER element never reaches that inner
     wrapper — CSS display/grid-template-columns/gap are not inherited
     properties — so the inner wrapper was silently falling back to
     Elementor's own default (flex, column direction), stacking every card
     in a single column instead of laying them out in the intended grid.
     This affected every multi-card grid section site-wide (Home's benefit/
     service-preview/testimonial cards and about-preview, About's story-grid
     and diff-notes, Services' services-grid and steps-row, Listings'
     listing-grid, and the Footer's 4-column layout) and was never caught
     previously because verification focused on individual card contents
     (icon alignment, spacing) rather than the overall grid arrangement.
     Fixed by explicitly forwarding the outer's grid declaration to the
     inner wrapper via the CSS `inherit` keyword (not duplicating literal
     values) so it also respects the outer's own responsive breakpoints
     automatically. */
  .benefits-grid>.e-con-inner,
  .services-grid>.e-con-inner,
  .testimonial-grid>.e-con-inner,
  .story-grid>.e-con-inner,
  .diff-notes>.e-con-inner,
  .steps-row>.e-con-inner,
  .listing-grid>.e-con-inner,
  .footer-grid>.e-con-inner{
    display:grid;grid-template-columns:inherit;gap:inherit;
  }
  .about-preview>.e-con-inner{
    display:grid;grid-template-columns:inherit;gap:inherit;align-items:inherit;
  }

  /* Benefits */
  .benefits-grid{grid-template-columns:repeat(3,1fr);gap:26px;}
  .benefit-card{
    background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);
    padding:30px 26px;transition:transform .25s ease, box-shadow .25s ease;
  }
  .benefit-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
  /* benefit-icon: align-items/justify-content now native Container settings;
     width/height stay CSS (the confirmed Elementor width!important exception,
     documented further down near .services-grid .service-icon). */
  .benefit-icon{
    width:52px;height:52px;border-radius:14px;
    background:rgba(200,155,60,.14);color:var(--gold-dark);margin-bottom:18px;
  }
  .benefit-icon.teal{background:rgba(31,111,92,.14);color:var(--teal);}
  .benefit-icon.clay{background:rgba(168,70,47,.14);color:var(--clay);}
  .benefit-icon .icon,.benefit-icon i{width:26px;height:26px;font-size:26px;}
  .benefit-card h3{font-size:1.15rem;font-weight:700;}
  /* Same Elementor heading-widget specificity fight as .hero above — this
     card heading wants the body font (Manrope), not the global display font. */
  .benefit-card .elementor-heading-title{font-family:var(--ff-body);}
  .benefit-card p{color:var(--muted);font-size:.96rem;margin:0;}
  @media (max-width:860px){.benefits-grid{grid-template-columns:1fr;}}

  /* Services */
  .services-grid{grid-template-columns:repeat(3,1fr);gap:var(--space-3);}
  .service-card{
    background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);
    padding:30px 26px;display:flex;flex-direction:column;gap:14px;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent;}
  /* service-icon: align-items/justify-content now native Container settings
     (applies to all 6 instances — Home preview cards + Services page). */
  .service-icon{
    width:46px;height:46px;border-radius:12px;background:var(--ink);color:var(--gold);
  }
  .service-icon .icon,.service-icon i{width:22px;height:22px;font-size:22px;}
  .service-card h3{font-size:1.08rem;font-weight:700;margin-bottom:0;}
  /* Same Elementor heading-widget specificity fight as .hero above. */
  .service-card .elementor-heading-title{font-family:var(--ff-body);}
  .service-card p{color:var(--muted);font-size:.94rem;margin:0;flex:1;}
  /* .service-link (0 DOM matches — no "Learn more" link/icon is currently
     built into service cards, though the CSS anticipated one) removed as
     dead code. Flagged separately as a conversion recommendation rather
     than silently adding a new CTA, since that needs a real destination
     decided by the site owner (Services has no per-service detail pages). */
  @media (max-width:960px){.services-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:640px){.services-grid{grid-template-columns:1fr;}}
  .services-more{margin-top:36px;text-align:center;}

  /* Testimonials */
  .testimonial-grid{grid-template-columns:repeat(3,1fr);gap:var(--space-3);}
@media (max-width:900px){.testimonial-grid{grid-template-columns:1fr;}}

  /* About preview / home */
  .about-preview{grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center;}
  .about-preview img{border-radius:var(--radius);height:340px;width:100%;object-fit:cover;}
  @media (max-width:900px){
    .about-preview{grid-template-columns:1fr;}
    .about-preview img{height:260px;}
    .about-preview .img-col{order:2;}
  }

  /* Final CTA band */
  .cta-band{
    background:linear-gradient(120deg, var(--ink) 0%, var(--ink-2) 100%);
    color:var(--paper);border-radius:26px;padding:56px var(--space-5);
  }
  .cta-band h2{font-size:clamp(1.5rem,2.6vw,2.1rem);max-width:22ch;margin:0;}
  /* Same Elementor heading-widget specificity fight as .hero above. */
  .cta-band .elementor-heading-title{color:var(--paper);}
  @media (max-width:700px){.cta-band{padding:40px 26px;}}

  /* Footer */
  .site-footer{background:var(--ink-2);color:rgba(251,247,238,.78);padding:var(--space-6) 0 26px;}
  .footer-grid{padding-bottom:40px;border-bottom:1px solid rgba(251,247,238,.12);}
  .footer-brand p{color:rgba(251,247,238,.62);font-size:.92rem;max-width:32ch;}
  .footer-col h4{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.1em;}
  /* Same Elementor heading-widget specificity fight as .hero above — both
     the mono label font and the paper-on-dark-footer color are lost to the
     global heading default (Fraunces/ink) without this. */
  .footer-col .elementor-heading-title{font-family:var(--ff-mono);color:var(--paper);}
  .footer-col a{display:block;color:rgba(251,247,238,.68);font-size:.92rem;margin-bottom:.85em;transition:color .2s ease;}
  .footer-col a:hover{color:var(--gold);}
  /* .footer-contact (no matches on the live page — superseded by
     .footer-contact-col, which uses Elementor's native icon-list widget)
     removed as dead CSS, same pattern as .footer-socials/.social-btn. */
  /* .footer-socials / .social-btn were leftover selectors from an earlier
     hand-built social row that no longer exists in the live markup (0
     matches on the rendered page) — the footer now uses Elementor's native
     Social Icons widget instead (.footer-follow-col .elementor-social-icon
     / .elementor-social-icons-wrapper below). Removed as dead CSS rather
     than migrated. footer-bottom's own flex-direction/align-items/justify-
     content/gap now live as native Container settings (Layout tab); only
     the typography/color/padding-top stay here as this component's own
     visual styling. */
  .footer-bottom{padding-top:24px;font-size:.82rem;color:rgba(251,247,238,.5);}

  /* About page */
  .page-hero{padding:56px 0 40px;border-bottom:1px solid var(--line-soft);}
  .page-hero h1{font-size:clamp(2rem,4vw,2.9rem);}
  .page-hero p{color:var(--muted);max-width:60ch;font-size:1.05rem;}

  .lead-text{font-size:1.06rem;}
  .mission-box{
    background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:30px;
    font-family:var(--ff-display);font-size:1.2rem;line-height:1.5;
  }
  .mission-box .eyebrow{color:var(--gold);margin-bottom:.6em;}

  /* diagram-wrap: flex-direction/justify-content now native Container
     settings. NOTE: the previous CSS here ("justify-content:center", plus
     an !important duplicate further down) never actually worked — it
     targeted the outer boxed wrapper, but justify-content isn't inherited
     by CSS and Elementor only propagates it to the inner .e-con-inner via
     its own custom-property mechanism when set through the native control.
     The diagram had been rendering flush-left instead of centered; this
     migration is what actually fixes it, not just a refactor. */
  .diagram-wrap{margin:40px 0;}
  .diagram-wrap img,.diagram-wrap svg{width:100%;max-width:460px;height:auto;}
  .diff-notes{grid-template-columns:repeat(3,1fr);gap:20px;margin-top:10px;}
  .diff-note{text-align:center;padding:0 8px;}
  .diff-note .dot{width:10px;height:10px;border-radius:50%;margin:0 auto 10px;}
  .diff-note.gold .dot{background:var(--gold);}
  .diff-note.teal .dot{background:var(--teal);}
  .diff-note.clay .dot{background:var(--clay);}
  /* h3, not h4 — fixed a heading-level skip (H2 section heading straight
     to H4 with no H3) found during the Phase 4 accessibility pass. Visual
     size unchanged, only the semantic tag. */
  .diff-note h3{font-size:.98rem;margin-bottom:.35em;}
  /* Same Elementor heading-widget specificity fight as .hero above. */
  .diff-note .elementor-heading-title{font-family:var(--ff-body);}
  .diff-note p{font-size:.88rem;color:var(--muted);margin:0;}
  @media (max-width:760px){.diff-notes{grid-template-columns:1fr;gap:26px;}}

  /* Services page */
  .steps-row{grid-template-columns:repeat(4,1fr);gap:22px;}
  .step-card{position:relative;padding-top:10px;}
  /* step-num: flex-direction/align-items/gap now native Container settings. */
  .step-num{
    font-family:var(--ff-mono);font-size:.85rem;color:var(--gold-dark);
    margin-bottom:14px;font-weight:600;
  }
  /* step-circle is a <span> hand-written into a Text Editor widget's HTML
     ("<span class=\"step-circle\">1</span>"), not an Elementor Container —
     there is no native control that can apply flex layout to arbitrary
     inline HTML inside a widget, so centering the digit requires this CSS.
     Genuine "functionality Elementor cannot provide" exception. */
  .step-circle{
    width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--paper);
    display:flex;align-items:center;justify-content:center;font-size:.85rem;
  }
  .step-card h3{font-size:1rem;font-weight:700;}
  /* Same Elementor heading-widget specificity fight as .hero above. */
  .step-card .elementor-heading-title{font-family:var(--ff-body);}
  .step-card p{font-size:.9rem;color:var(--muted);margin:0;}
  @media (max-width:900px){.steps-row{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.steps-row{grid-template-columns:1fr;}}

  .faq-list{max-width:820px;}

  /* Listings */
  /* filter-bar: flex-direction/wrap/gap now native Container settings. */
  .filter-bar{margin-bottom:36px;}
  .filter-btn{
    padding:.6em 1.2em;border-radius:100px;border:1.5px solid var(--line);
    background:var(--white);font-weight:600;font-size:.86rem;color:var(--ink);
    transition:background .2s ease,color .2s ease,border-color .2s ease;cursor:pointer;
  }
  .filter-btn.active,.filter-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--sand);}

  .listing-grid{grid-template-columns:repeat(3,1fr);gap:26px;}
  .listing-card{
    background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);
    overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease, box-shadow .25s ease;
  }
  .listing-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
  .listing-media{position:relative;height:190px;}
  .listing-media img{width:100%;height:100%;object-fit:cover;}
  .listing-tags{position:absolute;top:12px;left:12px;display:flex;gap:6px;}
  .chip{
    font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;
    padding:.35em .75em;border-radius:100px;font-weight:600;
  }
  .chip-house{background:rgba(168,70,47,.9);color:#fff;}
  .chip-apartment{background:rgba(31,111,92,.9);color:#fff;}
  .chip-commercial{background:rgba(20,33,61,.9);color:#fff;}
  .chip-offplan{background:rgba(200,155,60,.92);color:var(--ink);}
  .chip-land{background:rgba(200,155,60,.92);color:var(--ink);}
  .chip-status{background:rgba(251,247,238,.94);color:var(--ink);}
  .listing-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1;}
  .listing-body h3{font-size:1.08rem;font-weight:700;margin:0;}
  /* Same Elementor heading-widget specificity fight as .hero above. */
  .listing-body .elementor-heading-title{font-family:var(--ff-body);}
  /* .listing-loc is a raw <div class="listing-loc"> hand-written into a
     Text Editor widget's HTML, not an Elementor Container — same
     "functionality Elementor cannot provide" exception as .step-circle
     (Services page). No native control can apply flex layout to arbitrary
     inline HTML inside a widget. */
  .listing-loc{display:flex;align-items:center;gap:.4em;color:var(--muted);font-size:.86rem;}
  .listing-loc .icon,.listing-loc i{width:16px;height:16px;font-size:16px;color:var(--clay);}
  /* listing-specs: flex-direction/wrap/gap now native Container settings. */
  .listing-specs{
    font-family:var(--ff-mono);font-size:.78rem;color:var(--muted);
    padding:10px 0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);
  }
  /* .listing-specs span: same raw-HTML exception as .listing-loc above —
     each spec ("700 sqm", icon+label pairs) is a <span> inside a Text
     Editor widget, not a Container. */
  .listing-specs span{display:flex;align-items:center;gap:.4em;}
  .listing-specs .icon,.listing-specs i{width:16px;height:16px;font-size:16px;color:var(--ink);}
  .listing-price{font-family:var(--ff-mono);font-weight:600;color:var(--ink);font-size:1.02rem;}
  .listing-price small{display:block;font-size:.68rem;color:var(--muted);font-weight:400;letter-spacing:.05em;text-transform:uppercase;}
  /* listing-actions: flex-direction/gap now native Container settings;
     margin-top:auto stays (no native margin control). */
  .listing-actions{margin-top:auto;}

  /* listing-cta-card: flex-direction/align-items/justify-content/gap now
     native Container settings. */
  .listing-cta-card{
    border:1.5px dashed var(--clay);border-radius:var(--radius);
    padding:34px 26px;background:rgba(168,70,47,.05);
  }
  .listing-cta-card .hub-mini{width:44px;height:44px;}
  .listing-cta-card h3{font-family:var(--ff-display);font-size:1.25rem;margin:0;}
  .listing-cta-card p{color:var(--muted);font-size:.92rem;margin:0;}

  @media (max-width:980px){.listing-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:640px){.listing-grid{grid-template-columns:1fr;}}

  /* Contact */
  .contact-form{
    background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);padding:var(--space-4);
  }
  .contact-form label{display:block;font-weight:700;font-size:.86rem;margin-bottom:.5em;color:var(--ink);}
  .contact-form input[type=text],.contact-form input[type=email],.contact-form input[type=tel],.contact-form textarea,.contact-form select{
    width:100%;padding:.85em 1em;border-radius:var(--radius-sm);border:1.5px solid var(--line);
    background:var(--paper);font-family:var(--ff-body);font-size:.96rem;color:var(--charcoal);
    transition:border-color .2s ease;
  }
  .contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{
    outline:none;border-color:var(--gold-dark);box-shadow:0 0 0 3px rgba(200,155,60,.35);
  }
  .contact-form textarea{min-height:130px;resize:vertical;}
  .contact-form button[type=submit]{width:100%;justify-content:center;}

  /* WPForms renders each field as its own wpforms-field div rather than the
     prototype's .form-row/.form-two wrappers, so name+phone stacked full
     width instead of sitting side by side and field spacing didn't match.
     Restoring the original 20px field spacing + 2-col name/phone row via
     WPForms' own data-field-id attributes, with no change to its markup. */
  .contact-form .wpforms-field{margin-bottom:20px;grid-column:1 / -1;}
  .contact-form .wpforms-field-container{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;}
  .contact-form .wpforms-field[data-field-id="1"],
  .contact-form .wpforms-field[data-field-id="2"]{grid-column:auto;}
  @media (max-width:560px){
    .contact-form .wpforms-field-container{grid-template-columns:1fr;}
    .contact-form .wpforms-field[data-field-id="1"],
    .contact-form .wpforms-field[data-field-id="2"]{grid-column:1 / -1;}
  }

  .contact-info-card{
    background:var(--ink);color:var(--paper);border-radius:var(--radius);padding:30px;margin-bottom:22px;
  }
  /* h2, not h3 — fixed a heading-level skip (H1 "Contact" straight to H3
     "Reach us directly" with no H2 anywhere on the page). Visual size is
     preserved via this same explicit font-size, only the semantic tag
     changed (Elementor widget's own "header_size" setting). */
  .contact-info-card h2{font-size:1.1rem;margin-bottom:1em;}
  /* Same Elementor heading-widget specificity fight as .hero above — both
     the paper-on-dark-card color and the body font are lost without this. */
  .contact-info-card .elementor-heading-title{color:var(--paper);font-family:var(--ff-body);}
  /* Removed (Phase 4 audit): a duplicate "li,div{display:flex;gap:.75em;
     align-items:flex-start;margin-bottom:1em;...}" rule used to sit here,
     byte-for-byte identical to .contact-info-card .elementor-icon-list-item
     below — leftover from before this card used Elementor's native icon-
     list widget. Beyond being redundant, the ", div" part was overly broad:
     it was unintentionally matching Elementor's own structural wrapper divs
     (.e-con-inner, each widget's own wrapper) inside this card, not just
     the intended contact rows. */
  .contact-info-card .icon,.contact-info-card i{width:16px;height:16px;font-size:16px;color:var(--gold);flex:none;margin-top:.2em;}

  .map-wrap{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-soft);height:260px;}
  .map-wrap iframe{width:100%;height:100%;border:0;filter:grayscale(15%) contrast(1.02);}

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

  .skip-link{
    position:absolute;left:12px;top:-60px;z-index:100;
    background:var(--ink);color:var(--paper);
    padding:.75em 1.25em;border-radius:var(--radius-sm);
    font-weight:700;font-size:.9rem;
    transition:top .2s ease;
  }
  .skip-link:focus{top:12px;}

  /* Site-wide visible keyboard focus ring (WCAG 2.4.7). Astra/Xpro's own
     CSS sets outline-style:none on several interactive elements (nav links
     at minimum, confirmed via computed-style inspection on a genuinely-
     focused element) with no replacement indicator, meaning keyboard users
     tabbing through the site previously had no visible focus state at all
     on those elements. Using :focus-visible (not :focus) so this only
     shows for keyboard/programmatic focus, not mouse clicks. */
  .wins-hub a:focus-visible,
  .wins-hub button:focus-visible,
  .wins-hub .elementor-button:focus-visible,
  .wins-hub input:focus-visible,
  .wins-hub textarea:focus-visible,
  .wins-hub select:focus-visible{
    outline:2px solid var(--gold-dark);
    outline-offset:2px;
  }

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

  @media (prefers-reduced-motion:reduce){
    .reveal{opacity:1;transform:none;transition:none;}
    *{transition:none !important;animation:none !important;}
  }

  /* ---- Contextual overrides: this Elementor build doesn't apply widgets' own
     "CSS Classes" (advanced tab) to the rendered wrapper, only Containers do.
     So widget-level styling below is keyed to the (working) parent container
     class + Elementor's own stable output classes/tags. ---- */

  .elementor-button{
    display:inline-flex;align-items:center;gap:.55em;
    padding:.85em 1.5em;border-radius:100px;font-weight:700;font-size:.95rem;
    border:1.5px solid transparent;
    transition:transform .18s ease, background .2s ease, color .2s ease, border-color .2s ease;
    white-space:nowrap;
  }

  .hero-ctas .cta-primary-wrap .elementor-button,
  .cta-band .elementor-button,
  .listing-actions .elementor-button{background:var(--gold);color:var(--ink);border-color:var(--gold);}
  .hero-ctas .cta-primary-wrap .elementor-button:hover,
  .cta-band .elementor-button:hover,
  .listing-actions .elementor-button:hover{background:var(--gold-dark);border-color:var(--gold-dark);color:var(--ink);transform:translateY(-2px);}

  /* Header "Book a Call": this button widget's own _css_classes ("btn
     btn-primary") DOES reach its wrapper div in this Elementor version
     (contrary to the assumption behind the .header-actions .elementor-button
     rule above, which was giving the same button widget a SECOND, independent
     pill treatment on the inner <a> — gold background + padding + radius
     nested inside the wrapper's already-correct .btn.btn-primary pill,
     producing a visibly smaller button-inside-a-button). Since the wrapper's
     .btn.btn-primary styling already matches the prototype exactly, the
     inner .elementor-button here just needs to be a transparent pass-through. */
  /* Generalized: this same double-padding pattern (widget's own "btn
     btn-primary/secondary" wrapper classes correctly styling the outer div,
     while the inner <a class="elementor-button"> independently gets its own
     competing padding/background from Elementor's base .elementor-button
     rule) recurs on every button built with an explicit "btn" wrapper class
     — not just the header's. Fixing it once, for any such button, instead
     of patching each new occurrence individually. */
  .btn .elementor-button{
    padding:0 !important;background:none !important;border:none !important;border-radius:0 !important;
  }
  .btn .elementor-button:hover{background:none !important;transform:none !important;}

  .hero-ctas .cta-light-wrap .elementor-button{background:transparent;color:var(--paper);border-color:rgba(251,247,238,.5);}
  .hero-ctas .cta-light-wrap .elementor-button:hover{background:var(--paper);color:var(--ink);border-color:var(--paper);transform:translateY(-2px);}

  .services-more .elementor-button,.about-preview .elementor-button{background:transparent;color:var(--ink);border-color:var(--ink);}
  .services-more .elementor-button:hover,.about-preview .elementor-button:hover{background:var(--ink);color:var(--sand);transform:translateY(-2px);}

  .listing-cta-card .elementor-button{background:transparent;color:var(--ink);border-color:var(--ink);padding:.6em 1.1em;font-size:.82rem;}
  .listing-cta-card .elementor-button:hover{background:var(--ink);color:var(--sand);transform:translateY(-2px);}

  .listing-actions .elementor-button{padding:.6em 1.1em;font-size:.82rem;}

  .filter-bar .elementor-button{padding:.6em 1.2em;border-radius:100px;border:1.5px solid var(--line);background:var(--white);font-weight:600;font-size:.86rem;color:var(--ink);cursor:pointer;}
  .filter-bar .active .elementor-button{background:var(--ink);border-color:var(--ink);color:var(--sand);}

  .brand img,.footer-brand img{width:34px;height:34px;object-fit:contain;}
  .hero-badge img{width:40px;height:40px;object-fit:contain;}
  .listing-cta-card img{width:44px;height:44px;object-fit:contain;}

  /* Was ".brand-text h2{...}" duplicating the properties already on
     .brand-name below — consolidated there (Phase 4 accessibility fix: the
     header's brand name is now a native Elementor "span" instead of an h2,
     so it no longer appears as a heading before each page's own h1 in the
     semantic outline; margin:0 added to .brand-name to replace what the
     h2 tag used to reset). */
  /* Same Elementor heading-widget specificity fight as .hero above — color
     (ink) already matches the new global default so only font-family needs
     restating here. */
  .brand-text .elementor-heading-title{font-family:var(--ff-mono);}
  .brand-name a{color:inherit;}
  .brand-text > div{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
  /* Same Elementor heading-widget specificity fight as .hero above — color
     moved to the 2-class .elementor-heading-title selector below. */
  .footer-brand h3{font-weight:600;letter-spacing:.04em;font-size:.95rem;margin:14px 0 0;}
  .footer-brand .elementor-heading-title{color:#F1E9D8;font-family:var(--ff-mono);}

  .main-nav-wrap ul{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0;}
  /* Fixed px (not rem): the global root font-size bump makes nav links a
     functional exception — with 7 menu items, the header row is already
     tight on horizontal space (was overflowing again at 1440px width after
     the bump), and nav is primarily a compact wayfinding control, not
     reading copy. Keeping it at its original 14.72px (.92rem × the old
     16px root) instead of scaling with everything else. */
  .main-nav-wrap a{padding:.6em 1em;border-radius:100px;font-weight:600;font-size:14.72px;color:var(--ink);display:inline-block;}
  .main-nav-wrap a:hover{background:rgba(20,33,61,.06);}
  .main-nav-wrap li.current-menu-item > a{background:var(--ink);color:var(--sand);}
  /* NOTE: unlike the classic wp_nav_menu widget this replaced, Xpro's
     Horizontal Menu widget manages its OWN mobile/tablet visibility
     internally (its toggle button + drawer live inside this same
     .main-nav-wrap container, switching via position:fixed + transform
     at its own <=1024px breakpoint, not display:none). A blanket
     `.main-nav-wrap{display:none}` at <=900px — left over from the old
     widget, which had no toggle button of its own to preserve — hid the
     toggle button too, silently breaking navigation again on every real
     phone width. Removed; Xpro's own breakpoint now fully owns this. */

  /* Xpro's Horizontal Menu widget ships its own base link styling at higher
     specificity (.xpro-elementor-horizontal-navbar-nav > li > a) than the
     .main-nav-wrap a rule above, so padding/font-size/font-weight fell back
     to the plugin's defaults instead of the prototype's compact pill sizing.
     !important matches the pattern already used elsewhere on this site for
     this exact class of Elementor/plugin-vs-custom-CSS specificity fight. */
  /* font-size fixed px, not rem: same header-fit reasoning as the
     .main-nav-wrap a rule above — this is the selector Xpro's Horizontal
     Menu widget actually renders desktop nav links with. */
  .main-nav-wrap .xpro-elementor-horizontal-navbar-nav>li>a{
    padding:.6em 1em !important;font-weight:600 !important;font-size:14.72px !important;
    min-height:0 !important;
  }

  .footer-links-col ul{list-style:none;margin:0;padding:0;}
  .footer-links-col a{display:block;color:rgba(251,247,238,.68);font-size:.92rem;margin-bottom:.85em;}
  .footer-links-col a:hover{color:var(--gold);}

  .footer-contact-col .elementor-icon-list-items{list-style:none;margin:0;padding:0;}
  .footer-contact-col .elementor-icon-list-item{display:flex;gap:.6em;align-items:flex-start;color:rgba(251,247,238,.68);font-size:.9rem;margin-bottom:.85em;}
  .footer-contact-col .elementor-icon-list-icon{width:16px;color:var(--gold);margin-top:.2em;}

  /* gap now lives natively on the Social Icons widget (Style tab →
     Spacing = 10px, generates --grid-column-gap on the widget's own
     wrapper) — only "display:flex" (not covered by that control) stays CSS. */
  .footer-follow-col .elementor-social-icons-wrapper{display:flex;}
  .footer-follow-col .elementor-social-icon{width:38px;height:38px;border-radius:50%;border:1px solid rgba(251,247,238,.22);color:var(--paper);display:flex;align-items:center;justify-content:center;}
  .footer-follow-col .elementor-social-icon:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);}

  .contact-info-card .elementor-icon-list-items{list-style:none;margin:0;padding:0;}
  .contact-info-card .elementor-icon-list-item{display:flex;gap:.75em;align-items:flex-start;margin-bottom:1em;font-size:.92rem;color:rgba(251,247,238,.85);}
  .contact-info-card .elementor-icon-list-icon{width:16px;color:var(--gold);margin-top:.2em;}
  .contact-info-card .elementor-social-icons-wrapper{display:flex;gap:10px;margin-top:6px;}
  .contact-info-card .elementor-social-icon{width:38px;height:38px;border-radius:50%;color:var(--paper);display:flex;align-items:center;justify-content:center;}

  .faq-list .elementor-accordion-item{border-bottom:1px solid var(--line);}
  .faq-list .elementor-tab-title{padding:20px 4px;font-weight:700;font-size:1rem;color:var(--ink);cursor:pointer;}
  .faq-list .elementor-tab-content{padding:0 4px 22px;color:var(--muted);font-size:.96rem;max-width:70ch;}

  .listing-body .elementor-accordion-item{border:none;}
  .listing-body .elementor-tab-title{font-family:var(--ff-mono);font-size:.75rem;color:var(--clay);font-weight:600;padding:0;cursor:pointer;}
  .listing-body .elementor-tab-content{font-size:.86rem;color:var(--muted);margin:.6em 0 0;padding:0;}

  /* ---- Icon alignment fixes (visual audit pass) ---- */

  /* 1. .form-alt was missing entirely from the ported stylesheet, so the
     Contact page's "Email us directly" / "Chat on WhatsApp" icon-links had
     no flex/alignment rules at all — restoring the original prototype rule. */
  .form-alt{display:flex;gap:16px;margin-top:20px;flex-wrap:wrap;}
  .form-alt a{font-size:.86rem;font-weight:600;color:var(--clay);display:inline-flex;align-items:center;gap:.4em;}
  .form-alt a i{font-size:1.05em;}

  /* 2. Elementor core CSS sets .elementor-button-content-wrapper to
     display:flex;justify-content:center but never sets align-items, so it
     defaults to "stretch" — icon and text inside every button on the site
     don't vertically align with each other. This is the single biggest
     cause of "misaligned button icons" site-wide (header CTA, hero CTAs,
     services, listings, contact submit, footer CTAs). */
  .elementor-button-content-wrapper{align-items:center;}

  /* 3. Elementor's icon-list widget forces the TEXT to align-self:center
     but leaves the ICON on whatever align-items the parent row uses. Our
     footer/contact-info rows were set to align-items:flex-start (to keep
     the multi-line "business hours" row anchored to its first line), which
     left every single-line row (address, phone, email) with a centered
     label next to a top-pinned icon. Centering both keeps them aligned. */
  .footer-contact-col .elementor-icon-list-item,
  .contact-info-card .elementor-icon-list-item{align-items:center;}
  .footer-contact-col .elementor-icon-list-icon,
  .contact-info-card .elementor-icon-list-icon{margin-top:0;}

  /* Raw <i> icons dropped straight into text-editor widget HTML (form-alt,
     any other inline icon+text pairs) default to baseline vertical-align,
     which sits visibly low next to the surrounding text. */
  .wins-hub .elementor-widget-text-editor i.fas,
  .wins-hub .elementor-widget-text-editor i.fab,
  .wins-hub .elementor-widget-text-editor i.far{vertical-align:middle;}

  /* ---- Root cause: Elementor's own core CSS forces every "boxed" flex
     container to flex-direction:column and resets justify-content/
     align-items/flex-wrap to "initial" (see .e-con-boxed.e-flex in
     elementor/assets/css/frontend.css) at a higher specificity (2 classes)
     than our single-class rules above. That's why brand/header/footer/
     icon-badge rows were stacking vertically instead of laying out inline
     — not an icon problem specifically, but the reason so many icons ended
     up displaced. Re-asserting the intended values with !important restores
     the original row layouts without touching spacing, colors, or markup. */
  .listing-loc,.listing-specs span,
  .service-link{
    flex-direction:row !important;
  }
  /* partner-feature img / partner-feature-body: width-family !important
     exceptions (Elementor's inline .e-con{width:100%!important} — see the
     documented root cause near .header-row below — no native alternative). */
  .partner-feature img{width:140px !important;flex:0 0 auto !important;}
  .partner-feature-body{width:auto !important;flex:1 1 auto !important;}

  /* Every Elementor Container defaults to width:100% of its flex parent via
     Elementor's own runtime-injected inline stylesheet (.e-con{width:100%
     !important}) — a literal !important with global reach that no native
     per-container "Width"/"Size" setting can ever beat (confirmed: native
     Width writes --width, and native Flex Size writes --flex-grow/--flex-
     shrink, but flex-basis stays "auto" so the browser still defers to the
     !important width for sizing). This is a hard framework constraint, not
     a workaround of convenience — CSS !important remains genuinely required
     here. With three containers (brand / main-nav-wrap / header-actions)
     all forced to 100% inside the same row, flexbox shrinks each to an
     equal third (~380px) instead of their own natural content width —
     squeezing the nav's 5 links below the ~470px they need, forcing a wrap
     onto a second line and inflating the header's height. Sizing each to
     its own content restores the single-row, content-hugging layout. */
  .header-row>.e-con-inner>.brand,
  .header-row>.e-con-inner>.main-nav-wrap,
  .header-row>.e-con-inner>.header-actions{
    width:auto !important;flex:0 0 auto !important;
  }

  /* Services page icons (and the identical Home page "benefit" icons) were
     overlapping/misaligned for two independent, compounding reasons:
     1. Same root cause as the header buttons above — .service-icon and
        .benefit-icon are Elementor Containers, which default to width:100%
        of their flex parent, stretching a meant-to-be 46x46/52x52 square
        icon badge into a ~300px-wide bar.
     2. Elementor's native Icon widget (used here, not the prototype's inline
        SVG sprite) renders each icon as <svg class="e-font-icon-svg ...">,
        which never matched the prototype's ".icon"-class selectors below
        (written for <svg class="icon">) — so the icon rendered at
        Elementor's own default size (50px) instead of the intended 22-26px,
        overflowing its own badge. Fixing both root causes, not the symptom. */
  /* Elementor also injects its own inline <style> tag with .e-con{width:100%
     !important} (equal specificity to a plain single-class rule, and later
     in source order, so it silently won a plain "!important" fight here) —
     scoping to the known parent grid raises specificity above it regardless
     of source order, rather than relying on cascade position. */
  .services-grid .service-icon,.benefits-grid .benefit-icon{width:46px !important;height:46px !important;flex:0 0 auto !important;}
  .benefits-grid .benefit-icon{width:52px !important;height:52px !important;}
  /* Elementor renders some icon widgets as inline <svg> and others as a
     classic <i class="fas ..."> tag (depends on the icon's own saved data,
     not something we control here) — sizing both so neither mode overflows. */
  .services-grid .service-icon svg,.benefits-grid .benefit-icon svg,
  .services-grid .service-icon i,.benefits-grid .benefit-icon i{width:22px !important;height:22px !important;font-size:22px !important;}
  .benefits-grid .benefit-icon svg,.benefits-grid .benefit-icon i{width:26px !important;height:26px !important;font-size:26px !important;}
  .listing-loc,.listing-specs span,.service-link{
    align-items:center !important;
  }
  /* Same width:100%-per-child default as the header's brand/nav/actions —
     with two children each wanting 100% width inside a wrapping flex row,
     they can never fit on one line together, so "Book a Free Call" and
     "View Listings" were stacking as two rows instead of sitting side by
     side. Sizing each to its own content restores the intended single row
     (still wrapping naturally on narrow screens via flex-wrap:wrap above). */
  .hero-ctas>.cta-primary-wrap,.hero-ctas>.cta-light-wrap{
    width:auto !important;flex:0 0 auto !important;
  }
  .avatar-dot{
    align-items:center !important;justify-content:center !important;
  }

  /* ---- Missing base rules from the original stylesheet (confirmed absent
     during this audit — restoring verbatim, no redesign) ---- */
  /* cta-band: flex-direction/align-items/justify-content/wrap/gap now native
     Container settings (Phase 4 audit finding — the CSS version below never
     actually reached the real children for the same outer-vs-.e-con-inner
     reason documented throughout this file; the heading and button were
     stacking instead of sitting on one row on all 4 pages that use this
     class: Home, About, Services, Our Partners). */
  .cta-band{position:relative;overflow:hidden;}
  .story-grid{grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
  @media (max-width:900px){.story-grid{grid-template-columns:1fr;}}
  /* contact-grid: same boxed-container CSS Grid root cause as the *-grid
     classes documented above (Phase 4 audit finding) — the form and info
     card were stacking in a single column instead of the intended 2-column
     layout. Elementor Free has no native asymmetric-column grid type, so
     this stays CSS, fixed the same way: display:grid removed from the
     outer, added as a companion rule on .e-con-inner below. */
  .contact-grid{grid-template-columns:1.15fr .85fr;gap:50px;align-items:start;}
  .contact-grid>.e-con-inner{display:grid;grid-template-columns:inherit;gap:inherit;align-items:inherit;}
  @media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:36px;}}
  .footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;}
  @media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}

  /* Our Partners page — no existing card class fit a full partner profile
     (overview + partnership note + featured property + trust list), so this
     is genuinely new, but every value reuses existing design tokens
     (--white/--line-soft/--radius/--paper) rather than inventing new ones,
     matching the card conventions already used for services/benefits/listings. */
  .partner-card{
    background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius);
    padding:40px;display:flex;flex-direction:column;gap:var(--space-1);
  }
  /* partner-card-header: flex-direction/align-items/justify-content/wrap/
     gap now native Container settings. NOTE: the previous "gap:12px" here
     never actually reached the visible layer for the same reason as
     diagram-wrap's justify-content (targeted the outer boxed wrapper, not
     the .e-con-inner that renders the real children) — it was silently
     falling back to Elementor's 20px default gap. Fixed at the source. */
  .partner-card-header{margin-bottom:var(--space-1);}
  .partner-card-header h3{margin:0;}
  .partner-card h4{font-size:1rem;margin:1em 0 .3em;}
  /* partner-feature: flex-direction/align-items/wrap/gap now native
     Container settings. */
  .partner-feature{
    background:var(--paper);border-radius:var(--radius-sm);padding:20px;
    margin-bottom:var(--space-1);
  }
  /* Elementor's native flex_wrap:"wrap" setting on this container correctly
     computes the --flex-wrap custom property to "wrap" (confirmed via
     getComputedStyle), but no rule in Elementor's own compiled CSS actually
     consumes that variable into the real flex-wrap property for this
     container's specific class combination — it silently falls back to the
     browser default (nowrap), so on narrow screens the two photos and the
     body were squeezed side by side into ~130-165px slivers instead of
     wrapping. This is a gap in Elementor's own property pipeline, not
     something a native setting can fix — restoring the real property. */
  .partner-feature{flex-wrap:wrap;}
  .partner-feature img{width:140px;height:100px;object-fit:cover;border-radius:var(--radius-sm);flex:none;}
  /* partner-feature-body: gap/padding now native Container settings. */
  .partner-feature-body{flex:1;min-width:200px;}
  .partner-feature-body h4{margin-top:0;}
  @media (max-width:600px){
    /* Root cause: .partner-feature's flex children are the Elementor WIDGET
       WRAPPER divs (.elementor-widget-image), not the <img> tags themselves
       — the img-targeted width:100% below only fills however wide its
       already-flex-shrunk wrapper ended up (competing against the body's
       own min-width:200px), so it was rendering ~128px instead of full
       width. Sizing the actual flex-item wrapper fixes it at the real
       layer; the img rule stays as a safety net for the tag itself. */
    .partner-feature .elementor-widget-image{width:100% !important;flex:1 1 100% !important;}
    .partner-feature img{width:100% !important;height:160px;}
    /* min-width:200px is a row-layout-era guard (kept the text column from
       losing a flex-shrink race against the image) that now fights the
       stacked column layout below 600px, forcing the text block ~35px wider
       than the photos above it. Neutralized only at this breakpoint. */
    .partner-feature-body{width:100% !important;min-width:0 !important;}
  }

  /* ---- The Hidden Opportunity page — new components built from existing
     tokens only (colors/radius/shadow/spacing scale), reusing the same
     visual language as .hero/.testimonial-card/.chip/.story-grid rather
     than inventing new patterns. ---- */

  .badge-soon{
    display:inline-flex;align-items:center;gap:.5em;
    font-family:var(--ff-mono);font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    background:var(--gold);color:var(--ink);padding:.45em 1em;border-radius:100px;
  }

  .book-cover-placeholder{
    position:relative;border-radius:var(--radius);height:420px;width:100%;
    background:linear-gradient(150deg, var(--ink-2) 0%, var(--ink) 60%, #1b2c52 100%);
    display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;
    box-shadow:0 40px 70px -30px rgba(0,0,0,.55);
    border:1px solid rgba(200,155,60,.28);
  }
  .book-cover-placeholder .icon,.book-cover-placeholder i{color:var(--gold);font-size:56px;width:56px;height:56px;}
  .book-cover-placeholder span{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,247,238,.6);}
  @media (max-width:900px){.book-cover-placeholder{height:300px;}}

  .interview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
  @media (max-width:960px){.interview-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:640px){.interview-grid{grid-template-columns:1fr;}}

  .interview-card{
    background:var(--ink);color:var(--paper);border-radius:var(--radius);
    padding:36px 30px;display:flex;flex-direction:column;gap:16px;text-align:center;
  }
  /* width/height !important, scoped to the parent card: same documented
     Elementor constraint as .benefit-icon/.service-icon elsewhere in this
     file — this is a Container, and Elementor's own runtime-injected
     .e-con{width:100%!important} otherwise stretches it to its flex
     parent's full width. A bare ".avatar-photo{width:96px!important}" is
     NOT enough: both rules are equal 1-class specificity and !important,
     so it comes down to source order — Elementor's inline style tag loads
     AFTER this stylesheet on this page, so it was winning the tie (verified:
     rendered at ~293px instead of 96px). Scoping to the parent card raises
     specificity above .e-con regardless of source order. */
  .interview-card .avatar-photo{
    width:96px !important;height:96px !important;flex:0 0 auto !important;border-radius:50%;margin:0 auto;
    background:rgba(251,247,238,.08);border:1px solid rgba(251,247,238,.22);
    display:flex;align-items:center;justify-content:center;color:rgba(251,247,238,.4);
  }
  .avatar-photo .icon,.avatar-photo i{width:34px;height:34px;font-size:34px;}
  .interview-card .quote-mark{font-family:var(--ff-display);font-size:2.6rem;color:var(--gold);line-height:.3;}
  .interview-card .quote{color:rgba(251,247,238,.9);font-size:.98rem;margin:0;flex:1;}
  /* Explicit color (not relying on inheritance from .interview-card) —
     found during verification that some other rule (not isolated via flat
     CSSOM inspection, likely nested in a @media block) sets a default
     color on <strong> tags matching the site's body-text charcoal, which
     otherwise beat inheritance here and rendered this name illegible
     against the card's dark background. */
  .interview-card .who strong{display:block;font-size:.98rem;color:var(--paper);}
  .interview-card .who span{display:block;font-size:.8rem;color:rgba(251,247,238,.6);margin-top:2px;}

  .achievement-list .elementor-icon-list-items{list-style:none;margin:0;padding:0;}
  .achievement-list .elementor-icon-list-item{display:flex;gap:.75em;align-items:flex-start;margin-bottom:1em;font-size:.94rem;color:var(--charcoal);}
  .achievement-list .elementor-icon-list-icon{width:18px;color:var(--gold-dark);margin-top:.2em;}

  .btn-disabled{opacity:.5;cursor:default;}
  .hop-quote-mark{font-family:var(--ff-display);font-size:2.2rem;color:var(--gold);line-height:.3;}

/* ====================================================================
   MOTION SYSTEM
   ====================================================================
   Every element the motion system will animate must be FULLY VISIBLE by
   default (no JS = no animation, not no content). motion.js adds
   .js-ready to <html> once it has run; only then do the .motion-* classes
   defined in later tasks switch these elements into their pre-animation
   (hidden/offset) starting state for GSAP to animate FROM. This order is
   deliberate: if motion.js fails to load for any reason, nothing here
   ever applies, and the page reads exactly as it does today. */
.motion-reveal,.motion-hero-word,.motion-counter{opacity:1;transform:none;}
html.js-ready:not(.motion-reduced) .motion-reveal{opacity:0;transform:translateY(24px);}
html.js-ready:not(.motion-reduced) .motion-hero-word{opacity:0;transform:translateY(0.4em);}
.benefit-card,.service-card,.testimonial-card,.listing-card,.partner-card{
  transition:transform .25s ease,box-shadow .25s ease;
}
html.js-ready .benefit-card:hover,html.js-ready .service-card:hover,
html.js-ready .testimonial-card:hover,html.js-ready .listing-card:hover,
html.js-ready .partner-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px -8px rgba(171,132,51,.28),0 4px 12px -4px rgba(26,26,26,.12);
}
.motion-marquee-viewport{overflow:hidden;}
.motion-marquee-track{display:flex;flex-direction:row !important;gap:var(--space-4, 32px);}
.motion-marquee-viewport .motion-marquee-track{width:max-content !important;flex:0 0 auto !important;}
html:not(.js-ready):not(.motion-reduced) .motion-marquee-track,
html.motion-reduced .motion-marquee-track{transform:none !important;}
html.motion-reduced .motion-marquee-track [aria-hidden="true"]{display:none;}
/* Elementor's own auto-generated per-post CSS (from the Global Colors
   feature) sets .elementor-widget-text-editor{color:var(--e-global-color-
   text)} -- same 1-class specificity as .footer-bottom{color:...} below,
   and its post-specific stylesheet can win the tie regardless of source
   order (same root cause documented throughout this file for other
   equal-specificity fights). Any "naked" text-editor widget with no own
   class, sitting in a dark section relying on inherited color, is exposed
   to this -- confirmed on 3 footer widgets (about-blurb, copyright,
   address) silently rendering in ink instead of paper. Scoping to the
   parent class raises specificity to 2, winning regardless of order. */
.footer-bottom .elementor-widget-text-editor{color:rgba(251,247,238,.5);}
.footer-brand .elementor-widget-text-editor{color:rgba(251,247,238,.62);}
/* Same equal-specificity cascade fight as the footer fix above: Elementor's
   own .elementor-widget-text-editor{color:var(--e-global-color-text)} rule
   was silently defeating .mission-box{color:var(--paper)} on the About
   page's mission statement. Scoping to the parent class wins regardless
   of source order. */
.mission-box .elementor-widget-text-editor{color:var(--paper);}
/* interview-card .who: built with <p><strong>Name</strong></p><p>Role</p>,
   not the <strong>+<span> pattern .who span assumed (same "selector
   written for the wrong tag" root cause documented elsewhere in this
   file) -- the role paragraph had no color rule at all and fell back to
   an ambient muted default, ~2.4:1 on the card's dark navy background. */
.interview-card .who p{color:rgba(251,247,238,.6);margin:0;}

/* achievement-list: Elementor's own generated CSS sets color directly on
   the actual text span (.elementor-widget-icon-list .elementor-icon-list-
   text{color:var(--e-global-color-secondary)}, gold) -- a direct match on
   that exact element beats .achievement-list .elementor-icon-list-item's
   inherited color regardless of specificity, since the parent rule never
   targets the text span itself. Matching Elementor's own target element
   directly, at higher specificity, fixes it regardless of source order. */
.achievement-list .elementor-icon-list-item .elementor-icon-list-text{color:var(--charcoal);}
/* Astra theme's own customizer-generated inline CSS set the scroll-to-top
   button's font-size to 63px (with width:2.1em, i.e. a 132x132px button) --
   a pre-existing theme customizer misconfiguration unrelated to any of this
   engagement's work, confirmed via a hardcoded absolute px value in Astra's
   own inline style, not something derived from the site's root font-size.
   Overriding to a standard ~42px circular button size. Matches the ID
   selector's specificity with !important since Astra's own rule is also an
   ID selector and would otherwise tie on source order. */
#ast-scroll-top{font-size:20px !important;}
.motion-gradient-blob{
  position:absolute;pointer-events:none;z-index:0;border-radius:50%;
  filter:blur(60px);opacity:.35;
  background:radial-gradient(circle,var(--gold) 0%,transparent 70%);
  width:420px;height:420px;
}
@keyframes motion-float-a{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(40px,-30px);}
}
@keyframes motion-float-b{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(-30px,40px);}
}
html.js-ready:not(.motion-reduced) .motion-gradient-active.a{animation:motion-float-a 18s ease-in-out infinite;}
html.js-ready:not(.motion-reduced) .motion-gradient-active.b{animation:motion-float-b 22s ease-in-out infinite;}
.motion-magnetic{will-change:transform;}
.site-header{transition:transform .3s ease;}
.motion-header-hidden{transform:translateY(-100%);}
html.js-ready:not(.motion-reduced) body{opacity:0;transition:opacity .25s ease;}
html.js-ready.motion-page-visible:not(.motion-reduced) body{opacity:1;}
html.js-ready.motion-page-leaving:not(.motion-reduced) body{opacity:0;}
/* Home page property gallery (replaces the old generic testimonials, per
   explicit client feedback) -- reuses the .motion-marquee-* mechanism
   already built for testimonials/interview cards. */
.gallery-photo{width:280px;height:210px;object-fit:cover;border-radius:var(--radius-sm);flex:0 0 auto;box-shadow:var(--shadow);}

/* Book callout: reuses .partner-card (already the site's "featured content
   card" component) rather than inventing a new visual style. */
.book-callout{max-width:74ch;margin:0 auto;text-align:center;}
.book-callout .eyebrow{display:block;margin-bottom:.75em;}
.book-callout .quote-mark{font-family:var(--ff-display);font-size:2.2rem;color:var(--gold);line-height:.3;margin-bottom:.3em;}
.book-callout .quote{font-family:var(--ff-display);font-size:1.1rem;line-height:1.6;color:var(--ink);margin:0 0 .8em;}
.book-callout .book-callout-who{color:var(--muted);font-size:.92rem;margin:0 0 1.2em;}
/* Legacy Court 2's real photo carousel: portrait-orientation phone photos
   (581x1024) rendered at their natural aspect ratio inside .listing-media,
   which is a fixed 190px-tall slot on every other listing card. Elementor's
   Swiper-based carousel sets its own height from the slide content, so it
   was rendering ~660px tall -- overflowing .listing-media (190px) and, since
   .listing-card has overflow:hidden, visually clipping everything below it
   (the listing-body: heading, price, partner-realtor line, Book button). */
.listing-media{overflow:hidden;}
.listing-media .swiper,.listing-media .swiper-wrapper,.listing-media .swiper-slide{height:190px !important;}
.listing-media .swiper img{width:100% !important;height:190px !important;object-fit:cover !important;}