/* ============================================================
   components-v2.css — user-picked component redesigns
   HS3 hero search · D1 developers band · C2 photo CTA ·
   M1 mortgage studio + M5 donut · F3 split FAQ ·
   Rena-style contact · big-wordmark footer
   Loads AFTER site.css + header-glass.css.
   (2026-07-15: the old global monochrome !important rule is gone —
   dark-band text is now plain scoped rules, no prefixes needed.)
   ============================================================ */

/* stop the decorative .wash parallax bleed from enabling sideways scroll
   (body already hides overflow-x; html needed the same treatment) */
html{overflow-x:clip;}

/* ---------- HS3 · Concierge hero search ---------- */
.hero-inner{max-width:1060px;} /* widened so the search card breathes (site.css caps at 960) */
/* the .ent entrance animation gives #heroSearch a permanent stacking context (fill-mode holds the
   animated opacity), so the later .trust sibling painted OVER its open dropdowns. Lift the form. */
.hero form#heroSearch{position:relative;z-index:20;}
.hero .trust{position:relative;z-index:1;}
.hs3{position:relative;z-index:30;width:100%;max-width:1020px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 22px 18px;box-shadow:0 30px 70px -24px rgba(0,0,0,.5);text-align:left;}
.hs3 .row{display:grid;grid-template-columns:1.7fr 1fr 1fr auto;gap:12px;}
.hs3 .f{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 16px;min-width:0;}
.hs3 .f label{display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deeper);font-weight:600;margin-bottom:3px;}
.hs3 .f input,.hs3 .f select{border:none;outline:none;background:none;font-family:inherit;font-size:14.5px;width:100%;color:var(--ink);}
.hs3 .f select option{color:var(--ink);}

.hs3 .go{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--ink);color:#fff;border:none;border-radius:var(--r-md);padding:13px 30px;font-size:13.5px;font-weight:700;letter-spacing:.06em;cursor:pointer;font-family:inherit;transition:background var(--dur-fast);}
.hs3 .go:hover{background:var(--ink-hover);}
.hs3 .go svg{width:16px;height:16px;}
.hs3 .go #hsCount{white-space:nowrap;font-weight:500;}
.hs3 .go #hsCount b{font-weight:700;}
.hs3 .hs3-foot{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:14px;margin-top:13px;font-size:12.5px;flex-wrap:wrap;text-align:center;} /* always under open dropdowns (z60) */
.hs3 .hs3-foot,.hs3 .hs3-foot *{color:rgba(12,26,46,.66);}
.hs3 .hs3-foot .count b{color:var(--gold-deep);font-weight:700;font-size:13.5px;}
.hs3 .hs3-foot a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--champagne);padding-bottom:2px;text-decoration:none;}
.hs3 .hs3-foot a:hover{color:var(--gold-deep);}
@media (max-width:860px){
  .hs3 .row{grid-template-columns:1fr 1fr;}
  .hs3 .row .f:first-child{grid-column:1/-1;}
  .hs3 .go{grid-column:1/-1;}
  .hs3 .hs3-foot{justify-content:center;text-align:center;}
}
@media (max-width:480px){
  .hs3 .row{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .scrollcue{display:none;} /* it sat on top of the trust stats on phones */
  .hero .trust{gap:10px 18px;}

  /* ── Phone hero-search compaction (owner 2026-07-30) ──────────────────────────
     The card was taking ~40% of a 430x932 screen: 22px padding all round, three
     stacked field boxes at 11/16 padding each carrying their own label line, a
     30px-padded submit, and a two-link "Prefer to talk?" footer. Every reference
     the owner supplied (haus & haus, fam, Allsopp, Betterhomes) keeps the phone
     hero to one or two controls and no secondary text, so the compaction is:
       - drop the "Prefer to talk?" footer entirely. It is NOT lost: the same
         WhatsApp and phone links are in the header utility strip and the footer,
         and there is a floating WhatsApp button, so removing it costs no contact
         route. This is the single biggest saving in the card.
       - halve the card padding and tighten each field box
       - shrink the labels rather than delete them: they are the only thing naming
         the two <select>s, whose closed state just reads "Any" / "Any price", so
         hiding them would leave two unlabelled dropdowns.
     Kept deliberately: all three fields. Location+Type+Budget IS the search, and
     dropping one would push work onto the results page. */
  .hs3{padding:12px 12px 12px;border-radius:14px;}
  .hs3 .row{gap:8px;}
  .hs3 .f{padding:7px 12px;border-radius:10px;}
  .hs3 .f label{font-size:9px;letter-spacing:.12em;margin-bottom:1px;}
  .hs3 .go{padding:12px 20px;font-size:13px;}
  .hs3 .hs3-foot{display:none;}

  /* iOS Safari force-zooms the page when a text field under 16px is focused, and
     never zooms back out. Applies to text inputs and selects, not ranges. */
  .hs3 .f input,.hs3 .f select{font-size:16px;}
}
.hs3 .hs3-foot a{white-space:nowrap;} /* never break the phone number mid-digits */

/* ---------- Developers band: navy, centered title, full-size white logo cards (pre-redesign design, owner pick 2026-07-16) ---------- */

/* ---------- C2 · Photo banner CTA ---------- */
.cta2{position:relative;border-radius:18px;overflow:hidden;background:var(--ink);margin-top:38px;}
.cta2 .bg{position:absolute;inset:0;background:url('../img/communities/dubai-marina.webp') center/cover;opacity:.28;}
.cta2 .in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:clamp(30px,4vw,44px) clamp(26px,4vw,46px);flex-wrap:wrap;}
.cta2 h3{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.6vw,31px);max-width:22ch;line-height:1.2;margin:0;color:#fff;}
.cta2 p{font-size:14px;margin-top:8px;font-weight:300;color:rgba(255,255,255,.66);}
.cta2 .acts{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.cta2 .phone{font-size:17px;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:9px;color:var(--champagne);}
.cta2 .phone svg{width:17px;height:17px;}
.cta2 .btn-gold2{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--gold-deep);border:none;border-radius:var(--r-pill);padding:13px 26px;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;font-family:inherit;text-decoration:none;transition:background var(--dur-fast);}
.cta2 .btn-gold2:hover{background:var(--gold-deeper);}

/* ---------- M1 · Mortgage studio (+ M5 donut) ---------- */
.mcalc{border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow-lg);display:grid;grid-template-columns:1.05fr .95fr;}
.mcalc[hidden]{display:none;} /* author display:grid beats the UA [hidden] rule - keep the tabs honest */
.calc-wrap{padding:16px 60px 80px;margin:-16px -60px -80px;} /* shadow room inside the morph clip on ALL sides - the glide must never shave the card shadow */
@keyframes calcIn{from{opacity:0;}to{opacity:1;}}
.mcalc.cin .m-left > *,.mcalc.cin .m-right > *:not(.m-lowmsg),.mcalc.cin .m-up > *{animation:calcIn .55s var(--ease);} /* shell stays put; content cross-fades only - no movement */
@media (prefers-reduced-motion: reduce){ .mcalc.cin .m-left > *,.mcalc.cin .m-right > *,.mcalc.cin .m-up > *{animation:none;} }
.mcalc .m-left{padding:clamp(26px,3.4vw,38px) clamp(24px,3.4vw,42px);}
.mcalc .m-left,.mcalc .m-right,.mcalc .m-up{min-width:0;} /* grid items must be shrinkable on phones */
.mcalc .m-sub{font-size:12.5px;color:var(--muted);margin-bottom:20px;}
.mcalc .m-resident{display:flex;gap:6px;background:var(--paper2);border-radius:var(--r-pill);padding:4px;margin-bottom:20px;width:fit-content;max-width:100%;flex-wrap:wrap;} /* fit-content: max-content forced the grid track wider than the phone */
.mcalc .m-resident button{border:none;background:none;border-radius:var(--r-pill);padding:8px 15px;font-size:12px;font-weight:600;color:rgba(12,26,46,.66);cursor:pointer;font-family:inherit;transition:background var(--dur-fast);}
.mcalc .m-resident button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow);}
.mcalc .m-row{margin-bottom:17px;}
.mcalc .m-row .top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;gap:10px;}
.mcalc .m-row label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;}
.mcalc .m-row .val{font-size:15px;font-weight:600;}
.mcalc input[type=range]{width:100%;accent-color:var(--gold);}
.mcalc .m-presets{display:flex;gap:8px;margin:2px 0 18px;flex-wrap:wrap;}
.mcalc .m-presets button{border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);padding:8px 13px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:background var(--dur-fast),color var(--dur-fast);}
.mcalc .m-presets button.on{background:var(--ink);border-color:var(--ink);color:#fff;}
.mcalc .m-right{position:relative;background:var(--ink);padding:clamp(26px,3.4vw,36px) clamp(24px,3.4vw,42px);display:flex;flex-direction:column;}
.mcalc .a-big,.mcalc .m-per,.mcalc .m-rows{transition:filter var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);}
.mcalc.low .a-big,.mcalc.low .m-per,.mcalc.low .m-rows{filter:blur(9px);opacity:.55;pointer-events:none;user-select:none;}
.mcalc.low .m-up-body .in{filter:blur(7px);pointer-events:none;user-select:none;}
.m-lowmsg{position:absolute;left:clamp(24px,3.4vw,42px);right:clamp(24px,3.4vw,42px);top:44%;transform:translateY(-50%);z-index:2;text-align:center;font-size:15px;font-weight:600;color:#fff;opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease);}
.m-lowmsg span{color:var(--champagne);}
.mcalc.low .m-lowmsg{opacity:1;}
.mcalc .m-right .rl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.mcalc .m-per{font-size:12px;color:rgba(255,255,255,.55);margin-top:2px;}
.mcalc .m-rows{margin-top:22px;border-top:1px solid rgba(255,255,255,.14);}
.mcalc .m-kv{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:13px 2px;border-bottom:1px solid rgba(255,255,255,.12);}
.mcalc .m-kv > span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);font-weight:600;} /* direct child only - the .pv currency span inside <b> must inherit the value styling, not the label's */
.mcalc .m-kv b{font-size:16px;font-weight:600;color:#fff;white-space:nowrap;}
.mcalc .m-up{padding:18px clamp(24px,3.4vw,42px);background:#fff;border-top:1px solid var(--line);grid-column:1/-1;}
.mcalc .m-up-t{display:flex;align-items:center;gap:9px;width:100%;border:none;background:none;padding:4px 0;font-family:inherit;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;cursor:pointer;}
.mcalc .m-up-t svg{width:15px;height:15px;transition:transform var(--dur-base) var(--ease);}
.mcalc .m-up-t[aria-expanded="true"] svg{transform:rotate(180deg);}
.mcalc .m-up-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease);}
.mcalc .m-up-body.open{grid-template-rows:1fr;}
.mcalc .m-up-body > .in{overflow:hidden;min-height:0;}
.mcalc .m-up-body .rows{padding-top:18px;}
.mcalc .m-up .rows{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.mcalc .m-upitem b{display:block;font-size:15.5px;font-weight:600;}
.mcalc .m-upitem > span{font-size:11.5px;color:var(--muted);}
.mcalc .m-up .fine{font-size:11px;color:var(--muted);margin-top:12px;line-height:1.6;}
@media (max-width:900px){
  .mcalc{grid-template-columns:1fr;}
  .mcalc .m-up .rows{grid-template-columns:1fr 1fr;}
}

/* ---------- F3 · Split FAQ + advisor chip ---------- */
.faqsplit{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,54px);align-items:start;}
.faqsplit .fside p{font-size:13.5px;color:rgba(12,26,46,.66);margin-top:12px;font-weight:300;line-height:1.7;max-width:36ch;}
.faqsplit .fchip{margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px 20px;box-shadow:var(--shadow);}
.faqsplit .fchip b{font-size:14px;font-weight:600;display:block;}
.faqsplit .fchip span{font-size:12px;color:var(--muted);}
.faqsplit .fchip a{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border-bottom:1.5px solid var(--champagne);padding-bottom:4px;text-decoration:none;}
.faqsplit .fchip a:hover{color:var(--gold-deep);}
.faqsplit .faq{max-width:none;margin:0;}
@media (max-width:860px){
  .faqsplit{grid-template-columns:1fr;}
  .faqsplit .fside p{max-width:none;}
}

/* ---------- Contact v2 · Rena-inspired card + map ---------- */
.contact-v2{background:var(--ink);padding:clamp(50px,5.6vw,78px) 0;position:relative;overflow:hidden;}
.cv2-sky{position:absolute;left:0;bottom:0;width:100%;height:auto;opacity:.09;pointer-events:none;user-select:none;}
.cv2-card{position:relative;max-width:940px;margin:0 auto;border-radius:4px;overflow:hidden;background:#fff;box-shadow:0 40px 90px -40px rgba(0,0,0,.65);padding:clamp(36px,5.4vw,72px) clamp(24px,6vw,86px) clamp(40px,5.6vw,68px);}
/* TODO: replace contact-wash.svg with Higgsfield-generated watercolor artwork (soft sage/champagne wash, portrait ribbon) */
.cv2-card::before{content:"";position:absolute;inset:0;background:rgba(251,250,247,.42);pointer-events:none;}
.cv2-card > *{position:relative;}
.cv2-head{text-align:center;margin-bottom:clamp(28px,4vw,46px);}
.cv2-wm{font-family:var(--serif);font-weight:500;font-size:clamp(15px,1.8vw,20px);letter-spacing:.12em;text-indent:.12em;color:var(--ink);} /* BRAND WORDMARK SPEC = header lockup: serif 500, tracking .12em. Never restyle per-component. */
.cv2-kick{font-size:11px;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:clamp(18px,2.6vw,30px);}
.cv2-title{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,44px);letter-spacing:.01em;color:var(--ink);margin-top:12px;}
.cv2-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.4vw,40px) clamp(28px,5vw,64px);}
.cv2-f label{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:9px;}
.cv2-f input,.cv2-f select,.cv2-f textarea{width:100%;border:none;border-bottom:1px solid rgba(12,26,46,.38);background:none;outline:none;font-family:inherit;font-size:14.5px;color:var(--ink);padding:6px 0 9px;border-radius:0;transition:border-color var(--dur-fast);resize:none;}
.cv2-f textarea{min-height:38px;}
.cv2-f input::placeholder,.cv2-f textarea::placeholder{letter-spacing:.04em;}
.cv2-f input:focus,.cv2-f select:focus,.cv2-f textarea:focus{border-color:var(--gold);}
.cv2-f.wide{grid-column:1/-1;}
.cv2-send{margin-top:clamp(26px,3.6vw,38px);display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.cv2-send .btn-gold2{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--gold-deep);border:none;border-radius:var(--r-pill);padding:13px 30px;font-size:13px;font-weight:700;letter-spacing:.06em;cursor:pointer;font-family:inherit;transition:background var(--dur-fast);}
.cv2-send .btn-gold2:hover{background:var(--gold-deeper);}
.cv2-send .form-status{margin:0;}
.cv2-map{position:relative;max-width:940px;margin:clamp(18px,2.6vw,28px) auto 0;border-radius:4px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(0,0,0,.65);min-height:420px;}
/* Contact-page office map. Previously grayscale(.45) with NO hover reset at all,
   so unlike the footer and listing maps this one was permanently desaturated.
   Owner rejected the grey map treatment site-wide 2026-07-30. */
.cv2-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.cv2-office{position:absolute;left:clamp(14px,2.6vw,26px);top:clamp(14px,2.6vw,26px);bottom:clamp(14px,2.6vw,26px);width:min(330px,calc(100% - 28px));background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;}
.cv2-office h3{font-family:var(--serif);font-weight:500;font-size:21px;margin:0 0 6px;}
.cv2-office .rowi{display:flex;gap:11px;padding:10px 0;font-size:13px;align-items:flex-start;border-bottom:1px dashed var(--line);line-height:1.55;}
.cv2-office .rowi svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--gold);}
.cv2-office .rowi span{color:rgba(12,26,46,.66);}
.cv2-office .rowi a{color:var(--ink);text-decoration:none;}
.cv2-office .dir{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--gold-deep);border:none;border-radius:var(--r-pill);padding:13px 26px;font-size:13px;font-weight:700;letter-spacing:.06em;cursor:pointer;font-family:inherit;text-decoration:none;transition:background var(--dur-fast);}
.cv2-office .dir:hover{background:var(--gold-deep);}
@media (max-width:760px){
  .cv2-grid{grid-template-columns:1fr;gap:22px;}
  .cv2-map{min-height:0;}
  .cv2-map iframe{position:static;display:block;height:300px;}
  .cv2-office{position:static;width:auto;margin:0;border-radius:0;box-shadow:none;border-top:1px solid var(--line);}
}

/* gold CTAs: backgrounds set per-component (all var(--gold), pill, gold-deep hover); text always white */
:is(.btn-gold,.hs3 .go,.btn-gold2,.cv2-office .dir),
:is(.btn-gold,.hs3 .go,.btn-gold2,.cv2-office .dir) *{color:#fff;}

/* ---------- Footer · giant wordmark ---------- */

/* ---------- Index hero video (moved from the index.html head block) ---------- */
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
@media (min-width:861px){
  .hero-vid{top:88px;height:calc(100% - 88px);} /* film starts below the opaque header (~94px since the util strip slimmed) */
  .hero .hero-scrim{top:88px;} /* scrim tracks the film, not the white strip above it */
  .hero{background:#fff;} /* strip above the film blends with the header while loading */
}
.hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(7,14,26,.52) 0%,rgba(7,14,26,.30) 40%,rgba(7,14,26,.66) 100%);}
/* dark footage -> white hero text (the white search card keeps its own dark text) */
.hero h1,.hero h1 *,.hero .sub,.hero .trust,.hero .trust *,.hero .scrollcue,.hero .scrollcue *{color:#fff;}
.hero .trust b{color:#fff;}
.hero .trust .dot{background:rgba(255,255,255,.45);}
@media (prefers-reduced-motion:reduce){
  .hero-vid{display:none;}
  .hero{background:#0a1220 url('../img/hero-downtown-poster.webp') center/cover;}
}

/* ---------- Contact form status ---------- */
#contactStatus{margin-top:14px;font-size:14px;font-weight:600;min-height:1.2em;line-height:1.4;}
#contactStatus.ok{color:var(--ok);}
#contactStatus.err{color:var(--err);}

/* ---------- Subpage hero + breadcrumb (was forked per page with drifting values) ---------- */
.phero{padding:150px 0 clamp(30px,5vw,48px);}
.phero h1{font-weight:500;font-size:clamp(32px,5.2vw,60px);letter-spacing:-.018em;line-height:1.02;max-width:16ch;}
.phero .sub{margin-top:18px;color:var(--body);font-size:16px;font-weight:300;max-width:56ch;line-height:1.75;}
.crumb{font-size:12px;letter-spacing:.04em;color:var(--muted);margin-bottom:16px;}
.crumb a:hover{color:var(--gold-deep);}
@media (max-width:560px){ .phero{padding:130px 0 26px;} }

/* ---------- Contact consent + legal-page prose ---------- */
.cv2-consent{margin-top:18px;font-size:12.5px;color:rgba(12,26,46,.66);}
.cv2-consent label{display:flex;gap:9px;align-items:flex-start;cursor:pointer;line-height:1.55;}
.cv2-consent input{accent-color:var(--gold);margin-top:2px;flex:none;width:15px;height:15px;}
.cv2-consent a{text-decoration:underline;}
/* Owner 2026-07-30: "the agree to privacy policy line doesnt fit in 1 line either."
   It cannot fit one line and should not try - the sentence is ~75 characters and would need
   about a 5px font on a 390px phone. What was actually wrong is that it wrapped BADLY:
   "Privacy Policy" could break across lines, and with align-items:flex-start the checkbox
   floated beside a two-line block with no visual grouping.
   So: keep the two lines, make them deliberate. The link never breaks mid-phrase, the text
   is a touch tighter, and the checkbox gets a 44px tap target (it was 15px, well under the
   WCAG minimum, and it is a REQUIRED field - the form refuses to submit without it). */
@media (max-width:640px){
  .cv2-consent{font-size:12px;margin-top:14px;}
  .cv2-consent label{gap:11px;line-height:1.5;align-items:center;}
  .cv2-consent input{width:20px;height:20px;margin-top:0;
    /* 20px box, 44px hit area, no layout shift */
    outline-offset:2px;position:relative;}
  .cv2-consent input::after{content:"";position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);width:44px;height:44px;}
  .cv2-consent a{white-space:nowrap;}
}
.legal{max-width:760px;margin:0 auto;padding-bottom:clamp(44px,5.4vw,68px);}
.legal h2{font-size:clamp(19px,2.2vw,24px);font-weight:500;margin:34px 0 10px;}
.legal p,.legal li{font-size:15px;font-weight:300;line-height:1.75;color:var(--body);}
.legal ul{padding-left:22px;margin:10px 0;}
.legal .updated{font-size:12.5px;color:var(--muted);letter-spacing:.04em;margin-top:10px;}

/* ---------- CTA band (shared; was inline on services.html) ---------- */
.svc-band{background:var(--ink);color:#fff;border-radius:16px;padding:clamp(34px,5vw,60px);text-align:center;}
.svc-band h3{font-size:clamp(24px,3.4vw,40px);font-weight:500;letter-spacing:-.015em;line-height:1.1;max-width:20ch;margin:0 auto 14px;color:#fff;}
.svc-band p{font-size:15.5px;font-weight:300;color:rgba(255,255,255,.7);max-width:48ch;margin:0 auto 28px;line-height:1.7;}
.svc-band .acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.svc-band .btn-ink{background:#fff;color:var(--ink);}
.svc-band .btn-ink:hover{background:rgba(255,255,255,.88);}

/* ---------- Themed dropdown (enhances select[data-dd]) ---------- */
.dd{position:relative;min-width:0;}
.dd.open{z-index:45;}
.dd-native{display:none;}
.dd-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:none;border:none;font-family:inherit;font-size:14.5px;color:var(--ink);padding:1px 0;cursor:pointer;text-align:left;}
.dd-btn svg{width:15px;height:15px;color:var(--muted);flex:none;transition:transform var(--dur-fast) var(--ease);}
.dd.open .dd-btn svg{transform:rotate(180deg);}
.dd-list{position:absolute;left:-17px;right:-17px;top:calc(100% + 15px);background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:6px;margin:0;list-style:none;z-index:60;max-height:290px;overflow:auto;display:none;}
.dd.open .dd-list{display:block;}
.f.loc{position:relative;}
.loc.open .dd-list{display:block;}
.loc .dd-list{z-index:60;}
.loc-list .lh{padding:9px 14px 5px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;cursor:default;}
.loc-list .lh:hover{background:none;}
.loc-list li[data-v]{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.loc-list li em{font-style:normal;color:var(--muted);font-size:11.5px;font-weight:600;background:var(--paper2);border-radius:99px;padding:2px 9px;}
.loc-list li.act{background:var(--paper2);}
.dd-list li{padding:11px 14px;border-radius:8px;font-size:14px;color:var(--ink);cursor:pointer;transition:background var(--dur-fast);}
.dd-list li:hover{background:var(--paper2);}
/* dropdown.js moves real focus onto the li - paper2 on white is ~1.1:1, invisible on its own */
.dd-list li:focus-visible{background:var(--paper2);outline:2px solid var(--gold-deep);outline-offset:-2px;}
.dd-list li[aria-selected="true"]{color:var(--gold-deep);font-weight:600;}

/* ---------- MD leadership card (about) ---------- */
.md-card{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,48px);align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:clamp(26px,4vw,48px);}
.md-avatar{width:clamp(96px,12vw,140px);aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--champagne);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:clamp(30px,4vw,44px);letter-spacing:.04em;}
.md-body h2{font-size:clamp(24px,3vw,34px);font-weight:500;letter-spacing:-.01em;}
.md-role{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin:6px 0 12px;}
.md-facts{display:flex;gap:10px 26px;flex-wrap:wrap;font-size:13.5px;color:var(--body);margin-bottom:14px;}
.md-facts b{color:var(--ink);font-weight:600;}
.md-body p{font-size:15px;font-weight:300;line-height:1.75;color:var(--body);max-width:64ch;}
@media (max-width:640px){ .md-card{grid-template-columns:1fr;} }

/* ---------- Calculator tabs + affordability panel ---------- */
.calc-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px;}
.m-tabs{display:inline-flex;gap:6px;background:var(--paper2);border-radius:var(--r-pill);padding:4px;}
.curr-calc .curr-b{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 17px;font-size:12.5px;font-weight:600;color:var(--ink);transition:border-color var(--dur-fast) var(--ease);}
.curr-calc .curr-b:hover{border-color:rgba(201,168,106,.55);}
.m-tabs button{border:none;background:none;font-family:inherit;padding:10px 26px;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast);}
.m-tabs button.on{background:var(--ink);color:#fff;}
.m-right .a-big{font-family:var(--serif);font-size:clamp(34px,4vw,50px);color:#fff;line-height:1.05;margin:10px 0 0;}
.m-right .a-note{font-size:11.5px;color:rgba(255,255,255,.55);margin-top:14px;}
.m-right .a-ctas{display:flex;gap:16px;align-items:center;margin-top:auto;padding-top:24px;flex-wrap:wrap;}
.m-right .a-ctas .alink{color:rgba(255,255,255,.75);font-size:13px;text-decoration:underline;}
.m-right .a-ctas .alink:hover{color:#fff;}

/* ---------- Reviews carousel (paced stepper) ---------- */
.rev-car{overflow:hidden;margin:8px -28px 0;padding:16px 28px 44px;-webkit-mask:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);} /* shadow room + soft edge fade - nothing gets shaved abruptly */
.rev-track{display:flex;gap:24px;transition:transform .7s var(--ease);will-change:transform;}
.rev{flex:0 0 calc((100% - 48px)/3);background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 30px 26px;box-shadow:0 3px 6px -3px rgba(12,26,46,.06),0 28px 56px -30px rgba(12,26,46,.4);margin:0;display:flex;flex-direction:column;}
.rev .rev-h{margin-bottom:13px;}
.rev .who{display:block;font-weight:600;font-size:14.5px;color:var(--ink);}
.rev .stars{color:var(--gold-deep);letter-spacing:.2em;font-size:13px;margin-top:5px;} /* matches .starfill: same star glyphs should not be two different golds */
.rev blockquote{margin:0;font-size:16px;font-weight:400;line-height:1.7;color:var(--ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:9;overflow:hidden;} /* real Google reviews vary from 1 line to 12 - clamp so cards stay even (full text stays in the DOM) */
.rev figcaption{margin-top:auto;padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.rev .date{font-size:11.5px;color:var(--muted);}
.rev .src{font-size:11.5px;color:rgba(12,26,46,.62);letter-spacing:.04em;}
.rev-zone{position:relative;}
.rn{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);}
.rn:hover{border-color:rgba(201,168,106,.6);color:var(--gold);}
.rn svg{width:19px;height:19px;}
.rn-prev{left:-14px;}
.rn-next{right:-14px;}
@media (max-width:740px){
  .rev-zone{display:block;text-align:center;}
  .rn{position:static;transform:none;display:inline-flex;margin:12px 6px 0;}
}
@media (max-width:1024px){ .rev{flex-basis:calc((100% - 24px)/2);} }
@media (max-width:640px){ .rev{flex-basis:100%;} }

/* ---------- Footer: compact office map (replaces the full-width map section on index) ---------- */

/* ---------- Section rhythm: checkerboard (owner pick 2026-07-20, prototype C) ----------
   The white run after the awards band alternates: reviews (white) > services (navy)
   > insights (white) > FAQ (navy) > contact (navy w/ white card) > footer. */
#services{background:var(--ink);}
#services .h2{color:#fff;}
#services .lead{color:rgba(255,255,255,.62);}
#services .srv{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);box-shadow:none;}
#services .srv:hover{background:rgba(255,255,255,.09);border-color:rgba(201,168,106,.45);}
#services .srv-name{color:#fff;}
#services .srv-desc{color:rgba(255,255,255,.58);}
#services .srv-n{color:var(--champagne);}
#services .srv .ar svg{color:var(--champagne);}
#services .services{border-color:rgba(255,255,255,.14);}
#services .srv::after{background:rgba(255,255,255,.08);box-shadow:none;} /* the white hover sheet turned cards blank on navy */
#services .srv-cta{background:rgba(255,255,255,.09);}
#services .srv-cta::after{background:rgba(255,255,255,.15);}
#faq{background:var(--ink);}
#faq .h2{color:#fff;}
#faq .fside p{color:rgba(255,255,255,.62);}
#faq .fchip{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);box-shadow:none;}
#faq .fchip b{color:#fff;}
#faq .fchip span{color:rgba(255,255,255,.58);}
#faq .fchip a{color:var(--champagne);}
#faq .faq details{border-color:rgba(255,255,255,.15);}
#faq summary{color:#fff;}
#faq .faq-b p{color:rgba(255,255,255,.62);}
#faq .pm::before,#faq .pm::after{background:var(--champagne);}

/* Fields whose outline:none reset outranks the global ring - restore the focus ring
   at matching specificity (keyboard only, no mouse-visual change). */
.hs3 .f input:focus-visible,.hs3 .f select:focus-visible,
.cv2-f input:focus-visible,.cv2-f select:focus-visible,.cv2-f textarea:focus-visible,
input[type=range]:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;}
.lm-f input:focus-visible,.lm-f select:focus-visible,.lm-f textarea:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px;} /* lead popups - site.css .lm-f resets outline */