/* Property Solutions — homepage build, per DESIGN.md ("Purple plate")
   Authored mobile-first: base rules target phones; min-width queries layer
   up for tablet (768px), desktop (1024px) and the "as drawn" tier (1200px).
   See the "Mobile-first refinements" addendum at the bottom of DESIGN.md
   for what was added/changed beyond the original spec. */

:root{
  --purple-900:#1D0A63;
  --purple-950:#150747;
  --purple-700:#2E1A85;
  --gold-400:#EFC22E;
  --gold-600:#D6A424;
  --ink:#1B1830;
  --body:#565273;
  --body-strong:#3E3A55;
  --muted:#8E8AA3;
  --border:#E6E4EF;
  --tint:#F6F5FA;
  --white:#FFFFFF;
  --radius:4px;
  --mobile-bar-h:64px;
}

*, *::before, *::after{ box-sizing:border-box; }
hr{ margin:0; border:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

body{
  margin:0;
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.7;
  color:var(--body);
  background:var(--white);
  overflow-x:hidden;
  /* room for the fixed mobile call/whatsapp bar so it never covers the footer */
  padding-bottom:var(--mobile-bar-h);
}
body.nav-open{ overflow:hidden; }
@media (min-width:1024px){ body{ padding-bottom:0; } }

h1,h2,h3{ margin:0; font-family:'Montserrat', sans-serif; color:var(--ink); }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
input, select{ font-family:inherit; }

/* 16px minimum on every field — anything smaller triggers iOS Safari's
   auto-zoom-on-focus, which is jarring and hard to undo on a phone. */
input, select{ font-size:16px; }

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

/* ===== Buttons — one set, reused everywhere ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Montserrat', sans-serif; font-weight:700; font-size:14px;
  padding:17px 28px; border-radius:var(--radius); border:none;
  transition:background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  white-space:nowrap;
  min-height:48px; /* touch target */
}
.btn:focus-visible{ outline:2px solid var(--gold-400); outline-offset:2px; }

.btn-primary{ background:var(--purple-900); color:var(--white); }
.btn-primary:hover{ background:var(--purple-700); }

.btn-secondary{ background:transparent; color:var(--purple-900); border:1.5px solid var(--purple-900); }
.btn-secondary:hover{ background:var(--purple-900); color:var(--white); }

.btn-on-purple{ background:var(--gold-400); color:var(--purple-900); }
.btn-on-purple:hover{ background:#E0B424; }

.btn-ghost-purple{ background:transparent; color:var(--gold-400); border:1.5px solid var(--gold-400); }
.btn-ghost-purple:hover{ background:rgba(239,194,52,0.12); }

.field{
  width:100%; border:1px solid #D8D5E4; border-radius:var(--radius);
  padding:15px 16px; font-size:16px; color:var(--ink); background:var(--white);
  min-height:48px;
}
.field::placeholder{ color:var(--muted); }
.field:focus-visible{ outline:2px solid var(--gold-400); outline-offset:2px; }

/* ===== Layout shell ===== */
.wrap{ max-width:1440px; margin:0 auto; padding-left:20px; padding-right:20px; }
@media (min-width:768px){ .wrap{ padding-left:32px; padding-right:32px; } }
@media (min-width:1024px){ .wrap{ padding-left:64px; padding-right:64px; } }

.section{ padding:32px 0; }
@media (min-width:768px){ .section{ padding:56px 0; } }
@media (min-width:1024px){ .section{ padding:76px 0; } }

.kicker{
  font-family:'Montserrat', sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold-600);
}

.h2{ font-weight:600; font-size:28px; line-height:1.16; letter-spacing:-0.02em; color:var(--purple-900); }
@media (min-width:768px){ .h2{ font-size:40px; line-height:1.12; } }

.rule{ height:1px; background:var(--gold-600); border:0; }
.rule.on-dark{ background:var(--gold-400); }

/* ===== 1. Utility bar =====
   Mobile: a compact tap-to-call chip only — the tagline and email just eat
   vertical space above the fold on a phone and both are one tap away in
   the footer / sticky bar anyway. Full bar returns at tablet width. */
.utility-bar{ background:var(--purple-950); color:rgba(255,255,255,.72); font-family:'Inter', sans-serif; font-size:12px; }
.utility-bar .wrap{ display:flex; align-items:center; justify-content:flex-end; gap:16px; padding-top:9px; padding-bottom:9px; flex-wrap:wrap; }
.utility-bar a{ color:inherit; }
.utility-bar a:hover{ color:var(--gold-400); }
.utility-bar .u-tagline{ display:none; }
.utility-bar .u-email{ display:none; }
.utility-bar .u-right{ display:flex; gap:20px; flex-wrap:wrap; }
@media (min-width:768px){
  .utility-bar .wrap{ justify-content:space-between; }
  .utility-bar .u-tagline, .utility-bar .u-email{ display:inline; }
}

/* ===== 2. Header =====
   Sticky on phone/tablet so nav + call access are always one tap away
   during a long scroll; static on desktop where the hero is short
   relative to viewport height. */
.site-header{ background:var(--purple-900); border-bottom:1px solid rgba(255,255,255,.14); position:sticky; top:0; z-index:30; overflow:hidden; }
@media (min-width:1024px){ .site-header{ position:relative; } }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:12px; padding-bottom:12px; }
@media (min-width:768px){ .site-header .wrap{ padding-top:16px; padding-bottom:16px; } }
.logo-chip{ background:#fff; border-radius:var(--radius); padding:9px 14px; display:inline-flex; }
.logo-chip img{ height:39px; width:auto; }
@media (min-width:768px){ .logo-chip{ padding:10px 16px; } .logo-chip img{ height:47px; } }

.main-nav{ display:flex; align-items:center; gap:32px; }
.main-nav a{
  font-family:'Montserrat', sans-serif; font-weight:600; font-size:14px;
  color:rgba(255,255,255,.86); padding-bottom:6px; border-bottom:2px solid transparent;
}
.main-nav a:hover, .main-nav a.active{ color:#fff; }
.main-nav a.active{ border-bottom-color:var(--gold-400); }

.header-actions{ display:flex; align-items:center; gap:20px; }
.nav-toggle{ display:inline-flex; background:none; border:none; color:var(--gold-400); padding:10px; min-width:44px; min-height:44px; align-items:center; justify-content:center; }
.nav-toggle svg{ width:26px; height:26px; }
.nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-menu{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-close{ display:block; }
@media (min-width:1024px){ .nav-toggle{ display:none; } }

.nav-backdrop{ display:none; }

@media (max-width:1023px){
  .nav-backdrop{
    display:block; position:fixed; inset:0; background:rgba(9,3,38,.5);
    opacity:0; pointer-events:none; transition:opacity 150ms ease; z-index:19;
  }
  .nav-backdrop.open{ opacity:1; pointer-events:auto; }

  .main-nav{
    position:fixed; top:var(--header-h, 0); left:0; right:0; bottom:0;
    background:var(--purple-900); overflow-y:auto;
    flex-direction:column; align-items:flex-start; gap:0; padding:8px 20px 32px;
    border-bottom:1px solid rgba(255,255,255,.14);
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity 150ms ease, transform 150ms ease;
    z-index:20;
  }
  .main-nav.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .main-nav a{ width:100%; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:16px; min-height:48px; display:flex; align-items:center; }
  .header-actions .btn-ghost-purple{ display:none; }
}

/* ===== 3. Hero =====
   White per client request (2026-08) — navy/gold now read as accent
   colors (buttons, icons, small text) rather than a dominant section
   fill. See the "Client corrections" addendum for the full rationale. */
.hero{ background:var(--white); position:relative; overflow:hidden; border-bottom:1px solid var(--border); }
.hero-decor{ position:absolute; border-radius:50%; pointer-events:none; }
.hero-decor.c1{ width:620px; height:620px; top:-160px; right:-160px; border:1px solid rgba(29,10,99,.12); }
.hero-decor.c2{ width:440px; height:440px; top:-60px; right:-40px; border:1px solid rgba(29,10,99,.08); }

.hero .wrap{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr; align-items:end;
  padding-top:32px; padding-bottom:0; gap:24px;
}
@media (min-width:1024px){
  .hero .wrap{ grid-template-columns:1fr 540px; padding-top:72px; }
}

.hero-copy{ padding-bottom:32px; max-width:640px; }
@media (min-width:768px){ .hero-copy{ padding-bottom:56px; } }
.hero-rule{ width:34px; height:1px; background:var(--gold-600); border:0; margin-bottom:16px; }
.hero-kicker{ font-family:'Montserrat', sans-serif; font-weight:700; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.hero-kicker strong{ color:var(--gold-600); font-weight:700; }

.hero h1{ font-weight:600; font-size:35px; line-height:1.06; letter-spacing:-0.025em; color:var(--ink); margin-bottom:20px; }
.hero h1 .accent{ color:var(--gold-600); }
@media (min-width:768px){ .hero h1{ font-size:62px; line-height:1.05; letter-spacing:-0.025em; } }

.hero-sub{ font-size:16px; line-height:1.6; color:var(--body); max-width:520px; margin-bottom:24px; }
@media (min-width:768px){ .hero-sub{ font-size:17px; line-height:1.65; margin-bottom:32px; } }
.hero-sub .accent{ color:var(--gold-600); font-weight:500; }

.search-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:0; background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:14px; box-shadow:0 18px 44px rgba(10,3,40,.12); max-width:560px; width:100%;
  margin-bottom:20px;
}
.search-bar svg{ width:18px; height:18px; color:var(--gold-600); flex-shrink:0; }
.search-bar input{ border:none; outline:none; flex:1 1 100%; min-width:0; order:1; padding:8px 0 8px 10px; font-size:16px; color:var(--ink); min-height:32px; }
.search-bar input::placeholder{ color:var(--muted); }
.search-divider{ display:none; width:1px; align-self:stretch; background:var(--border); margin:0 4px; }
.search-bar select{ border:none; outline:none; background:none; color:var(--gold-600); font-weight:600; font-size:14px; padding:10px 8px 10px 0; flex:0 0 auto; order:2; min-height:44px; }
.search-bar .btn{ padding:13px 22px; flex:0 0 auto; order:3; margin-left:auto; }
@media (min-width:600px){
  .search-bar{ flex-wrap:nowrap; padding:8px 8px 8px 22px; }
  .search-bar input{ flex:1 1 auto; order:0; padding:10px 12px; }
  .search-divider{ display:block; order:0; }
  .search-bar select{ padding-left:8px; order:0; }
  .search-bar .btn{ order:0; margin-left:0; }
}

.trust-line{ display:flex; align-items:center; gap:10px; font-size:13px; font-family:'Inter', sans-serif; flex-wrap:wrap; }
.trust-rule{ width:22px; height:1px; background:var(--gold-600); border:0; margin:0; flex-shrink:0; }
.trust-line .no-obligation{ color:var(--gold-600); font-weight:500; }
.trust-line .reply-time{ color:var(--muted); }

/* Mobile/tablet (<1024): hero-figure's real box height comes from the
   img itself (a normal flex item), so it correctly reserves flow space
   below the trust line — no overlap. The arch border is a decorative
   ::before; being absolutely positioned, it's excluded from flex sizing.
   Desktop (>=1024) restores the original fixed-height + overflow:visible
   trick so the photo can intentionally poke up past the section edge
   without affecting the hero grid row's height. */
.hero-figure{ display:flex; justify-content:center; align-items:flex-end; position:relative; }
.hero-figure::before{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:280px; height:200px; border:1px solid rgba(239,194,52,.45);
  border-radius:140px 140px 0 0; pointer-events:none; z-index:0;
}
.hero-figure img{ width:300px; max-width:none; height:auto; margin-bottom:-1px; position:relative; z-index:1; }
@media (min-width:480px){
  .hero-figure::before{ width:340px; height:250px; border-radius:170px 170px 0 0; }
  .hero-figure img{ width:370px; }
}
@media (min-width:1024px){
  .hero-figure{ margin-top:0; height:300px; overflow:visible; }
  .hero-figure::before{ width:420px; height:300px; border-radius:210px 210px 0 0; }
  .hero-figure img{ width:460px; }
}

/* ===== Quick contact (mobile only) =====
   A short lead-capture teaser right after the hero, before a phone user
   has to scroll through the full page — cuts the distance to conversion. */
.quick-contact{ background:var(--white); padding:28px 0; border-bottom:1px solid var(--border); }
.quick-contact h3{ font-family:'Montserrat', sans-serif; font-weight:700; font-size:17px; color:var(--purple-900); margin-bottom:14px; }
.quick-contact form{ display:flex; flex-direction:column; gap:10px; }
@media (min-width:768px){ .quick-contact{ display:none; } }

/* ===== 5. How can we help ===== */
.help-section{ background:var(--white); }
.help-grid{ display:grid; grid-template-columns:1fr; gap:28px; }
@media (min-width:1024px){ .help-grid{ grid-template-columns:320px 1fr; gap:48px; } }

.help-intro p{ margin-top:16px; margin-bottom:20px; }
.help-rule{ width:56px; height:1px; background:var(--gold-600); border:0; }

.help-cards{ display:grid; grid-template-columns:1fr; gap:24px; }
@media (min-width:768px){ .help-cards{ grid-template-columns:repeat(2, 1fr); gap:0; } }
@media (min-width:1200px){ .help-cards{ grid-template-columns:repeat(3, 1fr); } }

.help-card{ padding:0; border-left:none; }
@media (min-width:768px){
  .help-card{ padding:0 28px 24px; border-left:1px solid var(--border); }
  .help-card:first-child{ padding-left:0; border-left:none; }
}
@media (min-width:1200px){
  .help-card{ padding:0 28px; }
}
.help-icon{
  width:46px; height:46px; border:1.5px solid var(--gold-600); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.help-icon svg{ width:22px; height:22px; color:var(--purple-900); stroke-width:1.6; }
.help-card h3{ font-weight:700; font-size:19px; line-height:1.3; color:var(--purple-900); margin-bottom:10px; }
.help-card p{ font-size:14px; margin-bottom:16px; }
.help-card .learn-more{ font-size:14px; font-weight:600; color:var(--gold-600); border-bottom:1px solid var(--gold-600); padding-bottom:2px; display:inline-block; min-height:44px; padding-top:10px; }

/* ===== 6. Meet the owners =====
   Full-bleed hero of its own (2026-08, per client reference — an
   Awwwards real estate site with a full-bleed photo + overlaid text).

   PHOTO GEOMETRY (measured off assets/owners-hero.webp, 1566x1004):
     - natural ratio 1.5598  ->  displayed height = 0.641 x displayed width
     - the wall is near-uniform #1E293D (sampled R only varies 29-35
       across the whole top half)
     - sofa/floor begins at y=0.585 of image height across the left 70%
     - the lamp intrudes higher, y=0.249, but only in the right 30%

   WHY IT'S BUILT THIS WAY (rev 2, 2026-08-12): rev 1 used a single
   background-size:cover on the section itself plus a diagonal scrim.
   cover scales the image to fill the *whole* section, and this section's
   height is driven by its text, not by a fixed hero height — so on a
   phone (~980px tall section at ~412px wide) cover blew the image up to
   ~1526px wide and discarded everything but a left sliver ("too zoomed
   in / the whole picture isn't in"), while `top` anchoring simultaneously
   pushed the sofa up into the text on mobile and chopped the sofa off the
   bottom on desktop. No scrim can fix that; the photo itself was wrong.

   rev 2 stops stretching the photo. .owners-photo is its own
   bottom-anchored layer at the image's *natural* aspect ratio, so the
   full width of the picture is always in frame, un-stretched, at every
   viewport. The section behind it is painted the exact sampled wall
   colour, so wherever the photo's top edge lands it is invisible — the
   real wall and the painted wall are the same navy, and it reads as one
   continuous room with the sofa fully visible at the bottom. That also
   means text sitting above the photo needs no scrim at all: it's on flat
   #1E293D, ~13:1 against white. The old diagonal scrim is gone (it was
   dulling the photo for no benefit).

   The clearance reserved under the text (.owners-content padding-bottom)
   is what guarantees text never lands on the sofa, and it differs by
   breakpoint because the text's *width* differs:
     - mobile: text spans nearly the full width, so it has to clear the
       lamp as well -> (1 - 0.249) x 0.641 = 48vw
     - >=768px: text is a narrow left column that never reaches the lamp
       column, so it only has to clear the sofa -> 0.415 x 0.641 = 26.7vw
   Both are ratios of viewport width, so they scale with the photo at any
   width instead of assuming a fixed composition. */
.owners-section{
  position:relative;
  overflow:hidden;
  background:#1E293D; /* sampled wall colour — see note above */
  color:#fff;
}
/* The photo, un-stretched, pinned to the bottom. aspect-ratio matches the
   file exactly, so background-size:100% auto fills it with no crop; when
   the section is shorter than this box, the overflow is off the TOP, which
   is pure wall and therefore indistinguishable from the painted section. */
.owners-photo{
  position:absolute;
  left:0; right:0; bottom:0;
  aspect-ratio:1566 / 1004;
  background:
    /* insurance against the wall's faint vignette making the photo's top
       edge visible as a hairline when it lands inside the section */
    linear-gradient(to bottom, #1E293D 0%, rgba(30,41,61,.85) 7%, rgba(30,41,61,0) 26%),
    url('../assets/owners-hero.webp') center bottom/100% auto no-repeat;
  pointer-events:none;
}
/* padding-block, NOT the padding shorthand: this element is also a .wrap, and
   .wrap sets padding-left/right as longhands. The shorthand would win at equal
   specificity and zero the horizontal gutter, flushing the copy against the
   viewport edge and misaligning this section against every other one. */
.owners-content{ position:relative; z-index:1; padding-block:48px calc(48vw + 20px); }
@media (min-width:768px){ .owners-content{ padding-block:88px calc(26.7vw + 24px); } }
@media (min-width:1024px){ .owners-content{ padding-block:110px calc(26.7vw + 24px); } }

.owners-copy{ max-width:540px; }
/* Keep the column clear of the lamp (right 30% of the photo) in the narrow
   part of the desktop range, where 540px would otherwise reach into it. */
@media (min-width:768px) and (max-width:1023px){ .owners-copy{ max-width:460px; } }
.owners-section .kicker{ color:var(--gold-400); }
.owners-section .h2{ color:#fff; }
.owners-copy p{ margin-top:12px; color:rgba(255,255,255,.86); }
@media (min-width:768px){ .owners-copy p{ margin-top:16px; } }
.owners-names{ display:flex; gap:32px; padding-top:16px; margin-top:16px; border-top:1px solid rgba(255,255,255,.25); flex-wrap:wrap; }
@media (min-width:768px){ .owners-names{ gap:40px; padding-top:24px; margin-top:24px; } }
.owner-name strong{
  display:block; font-family:'Playfair Display', serif; font-style:italic;
  font-weight:600; font-size:19px; color:#fff;
}
.owner-name span{ font-size:13px; color:rgba(255,255,255,.65); }

/* ===== 7. Home loans =====
   White per client request (2026-08) — see the hero section's note and
   the "Client corrections" addendum. */
.loans-section{ background:var(--white); position:relative; overflow:hidden; border-top:1px solid var(--border); }
.loans-decor{ position:absolute; width:360px; height:360px; left:-140px; bottom:-140px; border-radius:50%; background:radial-gradient(circle, rgba(239,194,52,.14), transparent 70%); pointer-events:none; }
.loans-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:28px; align-items:center; }
/* A grid item's default min-width:auto floors the 1fr track at the item's
   min-content width. The "WhatsApp us for quick assistance" button is nowrap,
   so at 320px that floor (305px) exceeded the track and pushed the column past
   the .wrap gutter. Let the track shrink and let that one button wrap. */
.loans-grid > *{ min-width:0; }
.loans-copy .btn{ white-space:normal; }
@media (min-width:1024px){ .loans-grid{ grid-template-columns:1fr 400px; gap:48px; } }
.loans-copy h2{ margin-top:16px; margin-bottom:16px; }
.loans-copy p:not(.kicker){ color:var(--body); font-size:16px; }
@media (min-width:768px){ .loans-copy p:not(.kicker){ font-size:17px; } }
.loans-copy .btn{ margin-top:24px; }

.loans-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:24px; box-shadow:0 4px 20px rgba(29,10,99,.08); }
@media (min-width:768px){ .loans-card{ padding:28px; } }
.loans-card h3{ font-family:'Montserrat', sans-serif; font-weight:700; font-size:19px; color:var(--purple-900); margin-bottom:18px; }
.loans-card form{ display:flex; flex-direction:column; gap:14px; }
.loans-card .btn{ margin-top:6px; }
.form-note{ font-size:12px; color:var(--muted); margin-top:12px; }

/* ===== 8. Footer ===== */
.site-footer{ background:var(--purple-950); color:rgba(255,255,255,.78); padding-top:48px; }
@media (min-width:768px){ .site-footer{ padding-top:64px; } }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:32px; padding-bottom:40px; }
@media (min-width:768px){ .footer-grid{ grid-template-columns:1fr 1fr; row-gap:32px; } }
@media (min-width:1024px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; padding-bottom:48px; } }

.footer-brand .logo-chip{ margin-bottom:16px; }
.footer-brand p{ font-size:14px; max-width:280px; color:rgba(255,255,255,.6); }

.footer-col h4{ font-family:'Montserrat', sans-serif; font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-400); margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size:14px; color:rgba(255,255,255,.78); display:inline-block; min-height:24px; }
.footer-col a:hover{ color:var(--gold-400); }

.footer-bottom{ border-top:1px solid rgba(255,255,255,.14); padding:24px 0; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:12px; color:rgba(255,255,255,.48); }
.footer-social{ display:flex; gap:16px; }

/* ===== Sticky mobile call/WhatsApp bar =====
   Always-reachable conversion path on phones — the thumb zone at the
   bottom of the screen, not the top of a page the user has scrolled past. */
.mobile-cta-bar{
  display:flex; position:fixed; left:0; right:0; bottom:0; z-index:25;
  height:var(--mobile-bar-h);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -6px 20px rgba(10,3,40,.18);
}
.mobile-cta-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Montserrat', sans-serif; font-weight:700; font-size:14px;
  min-height:56px;
}
.mobile-cta-btn svg{ width:19px; height:19px; }
.mobile-cta-btn.call{ background:var(--purple-900); color:#fff; }
.mobile-cta-btn.whatsapp{ background:var(--gold-400); color:var(--purple-900); }
@media (min-width:1024px){ .mobile-cta-bar{ display:none; } }