/* ==========================================================================
   Josue Santos — Real Estate + Marketing
   Design system: deep navy, warm off-white, muted gold accent.
   Premium, editorial, restrained. No stock photography, no clutter.
   ========================================================================== */

:root{
  --navy: #0b1626;
  --navy-2: #101f36;
  --navy-soft: #17263e;
  --off-white: #f7f4ee;
  --bg-gray: #f0eee8;
  --paper: #fbf9f5;
  --ink: #14202f;
  --ink-soft: #4b5768;
  --line: #dedad0;
  --line-soft: #e8e5dc;
  --gold: #a9814a;
  --gold-light: #c7a468;
  --gold-pale: #e9dcbf;
  --white: #ffffff;
  --success: #3f6b4f;

  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1200px;
  --container-narrow: 820px;
  --radius: 2px;
  --radius-md: 4px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 140px;

  --shadow-sm: 0 1px 3px rgba(11,22,38,0.06), 0 1px 2px rgba(11,22,38,0.08);
  --shadow-md: 0 8px 30px rgba(11,22,38,0.10);
  --shadow-lg: 0 20px 60px rgba(11,22,38,0.16);

  --ease: cubic-bezier(.25,.7,.35,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--off-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  font-size: 16px;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 500; line-height:1.12; margin:0; color: var(--navy); letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:16px; }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--space-3); }
.container--narrow{ max-width: var(--container-narrow); }

@media (min-width:900px){
  .container{ padding: 0 var(--space-5); }
}

/* ---------- Typography scale ---------- */
.eyebrow{
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow--light{ color: var(--gold-light); }
h1.display{ font-size: clamp(2.4rem, 5.2vw, 4.4rem); }
h2.display{ font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3.display{ font-size: clamp(1.3rem, 2vw, 1.7rem); }
.lede{ font-size: clamp(1.05rem, 1.3vw, 1.25rem); color: var(--ink-soft); font-weight:400; line-height:1.65; }
.small-caps{ text-transform:uppercase; letter-spacing:0.08em; font-size:0.8rem; font-weight:600; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 16px 30px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: all .25s var(--ease);
  white-space: nowrap;
}
.btn-primary{ background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-primary:hover{ background: var(--navy); color: var(--gold-light); border-color: var(--navy); }
.btn-dark{ background: var(--navy); color: var(--off-white); border-color: var(--navy); }
.btn-dark:hover{ background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-outline{ background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover{ background: var(--navy); color: var(--off-white); }
.btn-outline-light{ background: transparent; color: var(--off-white); border-color: rgba(247,244,238,0.45); }
.btn-outline-light:hover{ background: var(--off-white); color: var(--navy); border-color: var(--off-white); }
.btn-ghost{ background: transparent; color: var(--gold); border-color: transparent; padding-left:0; padding-right:0; text-decoration: underline; text-underline-offset: 5px; }
.btn-block{ width:100%; }
.btn-sm{ padding: 12px 20px; font-size:12px; }

.btn-row{ display:flex; flex-wrap:wrap; gap: 14px; }

/* ---------- Header ---------- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  background: transparent;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
  padding: 22px 0;
}
.site-header.is-scrolled,
.site-header.is-solid{
  background: rgba(11,22,38,0.96);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
  padding: 14px 0;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap: var(--space-3); }
.brand{ display:flex; flex-direction:column; line-height:1.05; color: var(--off-white); }
.brand-name{ font-family: var(--font-display); font-size: 1.32rem; letter-spacing: 0.01em; }
.brand-tag{ font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light); margin-top:4px; }

.main-nav{ display:none; }
.main-nav ul{ display:flex; align-items:center; gap: 30px; }
.main-nav a{
  font-size: 12.5px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase;
  color: rgba(247,244,238,0.82);
  padding: 6px 0;
  position:relative;
  transition: color .2s var(--ease);
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background: var(--gold-light); transform: scaleX(0); transform-origin:left; transition: transform .25s var(--ease);
}
.main-nav a:hover, .main-nav a.is-active{ color: var(--off-white); }
.main-nav a:hover::after, .main-nav a.is-active::after{ transform: scaleX(1); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.header-actions .btn{ display:none; }
.lang-switch{
  font-size:12px; font-weight:700; letter-spacing:.05em; color: rgba(247,244,238,0.85);
  border:1px solid rgba(247,244,238,0.3); border-radius: var(--radius); padding: 7px 11px;
  transition: all .2s var(--ease);
}
.lang-switch:hover{ border-color: var(--gold-light); color: var(--gold-light); }
.mobile-lang-switch{
  display:inline-block; margin-top: var(--space-3); font-size:13px; font-weight:600; letter-spacing:.05em;
  color: var(--gold-light); text-decoration: underline; text-underline-offset: 4px;
}

.menu-toggle{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; border:1px solid rgba(247,244,238,0.35); border-radius: var(--radius);
  background: transparent;
}
.menu-toggle span{ display:block; height:1px; width:18px; background:var(--off-white); margin:0 auto; transition: all .25s var(--ease); }
.menu-toggle.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ opacity:0; }
.menu-toggle.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 980px){
  .main-nav{ display:block; }
  .header-actions .btn{ display:inline-flex; }
  .menu-toggle{ display:none; }
}

/* Mobile nav drawer */
.mobile-nav{
  position: fixed; inset:0; z-index: 600;
  background: var(--navy);
  display:flex; flex-direction:column;
  padding: 100px var(--space-3) var(--space-4);
  transform: translateY(-8px);
  opacity:0; visibility:hidden;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
  overflow-y:auto;
}
.mobile-nav.is-open{ opacity:1; visibility:visible; transform:translateY(0); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.mobile-nav ul{ display:flex; flex-direction:column; }
.mobile-nav a{
  display:block; padding: 16px 0; font-family: var(--font-display); font-size: 1.7rem; color: var(--off-white);
  border-bottom: 1px solid rgba(247,244,238,0.12);
}
.mobile-nav .btn{ margin-top: var(--space-4); }
.mobile-nav-foot{ margin-top:auto; padding-top: var(--space-4); color: rgba(247,244,238,0.55); font-size:13px; }
.mobile-nav-foot a{ color: var(--gold-light); }

@media (min-width: 980px){ .mobile-nav{ display:none; } }

body.nav-locked{ overflow:hidden; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--off-white);
  padding: 168px 0 var(--space-7);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 82% 18%, rgba(169,129,74,0.16), transparent 45%),
                     radial-gradient(circle at 8% 85%, rgba(169,129,74,0.10), transparent 40%);
  pointer-events:none;
}
.hero-grid{ position:relative; display:grid; gap: var(--space-6); align-items:center; }
.hero-map{ position:absolute; right:-40px; top:50%; transform:translateY(-50%); width:560px; opacity:0.28; pointer-events:none; }
@media (max-width: 900px){ .hero-map{ width:400px; right:-100px; opacity:0.22; } }
.hero-content{ position:relative; max-width: 680px; }
.hero .eyebrow{ display:inline-block; margin-bottom: var(--space-2); }
.hero h1{ color: var(--off-white); }
.hero .lede{ color: rgba(247,244,238,0.78); margin-top: var(--space-3); max-width: 560px; }
.hero-cta{ margin-top: var(--space-4); }
.hero-trust{
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(247,244,238,0.16);
  font-size: 12.5px; letter-spacing:0.08em; text-transform:uppercase; color: rgba(247,244,238,0.55);
}

.hero--page{ padding: 148px 0 var(--space-6); }
.hero--page .lede{ max-width: 640px; }

.hero-grid--profile{ grid-template-columns: 1fr; text-align:center; justify-items:center; }
.hero-grid--profile .hero-content{ margin:0; }
.hero-grid--profile .avatar-portrait{ width:140px; height:140px; }
@media (min-width:700px){
  .hero-grid--profile{ grid-template-columns: auto 1fr; text-align:left; justify-items:start; }
  .hero-grid--profile .avatar-portrait{ width:220px; height:220px; }
}

/* ---------- Sections ---------- */
section{ padding: var(--space-7) 0; }
.section-tight{ padding: var(--space-6) 0; }
.section-head{ max-width: 760px; margin-bottom: var(--space-5); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head .eyebrow{ display:block; margin-bottom: var(--space-2); }
.section-head h2{ margin-top: 6px; }
.section-head .lede{ margin-top: var(--space-2); }

.bg-navy{ background: var(--navy); color: var(--off-white); }
.bg-navy h2, .bg-navy h3, .bg-navy h4{ color: var(--off-white); }
.bg-navy .lede{ color: rgba(247,244,238,0.72); }
.bg-paper{ background: var(--paper); }
.bg-gray{ background: var(--bg-gray); }
.bg-off{ background: var(--off-white); }

/* ---------- Grids & cards ---------- */
.grid{ display:grid; gap: var(--space-4); }
.grid-2{ grid-template-columns: 1fr; }
.grid-3{ grid-template-columns: 1fr; }
.grid-4{ grid-template-columns: 1fr; }
.grid-5{ grid-template-columns: repeat(2,1fr); }
@media (min-width:640px){
  .grid-2{ grid-template-columns: repeat(2,1fr); }
  .grid-5{ grid-template-columns: repeat(3,1fr); }
}
@media (min-width:900px){
  .grid-3{ grid-template-columns: repeat(3,1fr); }
  .grid-4{ grid-template-columns: repeat(4,1fr); }
  .grid-5{ grid-template-columns: repeat(5,1fr); }
}

.card{
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover{ border-color: var(--gold-light); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.card-num{ font-family: var(--font-display); font-size: 1.6rem; color: var(--gold); margin-bottom: var(--space-2); }
.card h3{ margin-bottom: 10px; font-size:1.2rem; }
.card p{ color: var(--ink-soft); font-size:.96rem; }

.move-card{
  display:block; padding: var(--space-4); background:var(--paper); border:1px solid var(--line-soft);
  border-radius: var(--radius-md); transition: all .25s var(--ease); height:100%;
}
.move-card:hover{ background: var(--navy); border-color:var(--navy); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.move-card:hover h3, .move-card:hover p, .move-card:hover .move-arrow{ color: var(--off-white); }
.move-card:hover .eyebrow{ color: var(--gold-light); }
.move-card h3{ margin: 10px 0 8px; }
.move-card p{ color: var(--ink-soft); font-size:.95rem; transition: color .25s var(--ease); }
.move-arrow{ display:inline-block; margin-top: 16px; font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); transition: color .25s var(--ease); }

/* Diamond/plus divider accents used instead of icon libraries */
.mark{ width:34px; height:1px; background: var(--gold); margin-bottom: var(--space-2); }
.mark--center{ margin-left:auto; margin-right:auto; }

/* Process steps (vertical connected list) */
.process{ position:relative; }
.process-step{ display:grid; grid-template-columns: 56px 1fr; gap: var(--space-3); padding-bottom: var(--space-5); position:relative; }
.process-step:last-child{ padding-bottom:0; }
.process-step::before{
  content:""; position:absolute; left:27px; top:56px; bottom:0; width:1px; background: var(--line);
}
.process-step:last-child::before{ display:none; }
.bg-navy .process-step::before{ background: rgba(247,244,238,0.16); }
.step-num{
  width:56px; height:56px; border-radius:50%; border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.1rem; color:var(--gold);
  background: var(--off-white); flex-shrink:0; position:relative; z-index:1;
}
.bg-navy .step-num{ background: var(--navy); }
.step-body h3{ margin-bottom:8px; }
.step-body p{ color: var(--ink-soft); }
.bg-navy .step-body p{ color: rgba(247,244,238,0.72); }

/* Checklist */
.check-list li{ display:flex; gap:12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size:.96rem; color: var(--ink-soft); }
.check-list li:last-child{ border-bottom:none; }
.check-list li::before{ content:"—"; color: var(--gold); flex-shrink:0; font-weight:600; }
.bg-navy .check-list li{ border-color: rgba(247,244,238,0.12); color: rgba(247,244,238,0.75); }

/* Equation row (Expertise + Marketing = Different Approach) */
.equation{ display:grid; gap: var(--space-3); align-items:stretch; grid-template-columns:1fr; }
@media (min-width:900px){ .equation{ grid-template-columns: 1fr auto 1fr auto 1fr; align-items:center; } }
.equation-op{ display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:2rem; color: var(--gold); }
.equation-box{ background: var(--navy-soft); border:1px solid rgba(247,244,238,0.1); border-radius: var(--radius-md); padding: var(--space-4); }
.equation-box.result{ background: var(--gold); color: var(--navy); border-color: var(--gold); }
.equation-box h4{ color:inherit; margin-bottom: var(--space-2); font-size:1.05rem; }
.equation-box ul li{ padding:5px 0; font-size:.92rem; color: rgba(247,244,238,0.78); }
.equation-box.result ul li{ color: rgba(11,22,38,0.8); }
.equation-box.result h4{ color: var(--navy); }

/* Stat / pillar row */
.pillars{ display:grid; gap: var(--space-3); grid-template-columns:1fr; text-align:center; }
@media (min-width:700px){ .pillars{ grid-template-columns: repeat(3,1fr); } }
.pillar{ padding: var(--space-4) var(--space-2); }
.pillar h3{ font-size:1.1rem; margin-bottom:8px; }
.pillar p{ font-size:.9rem; color: var(--ink-soft); }
.bg-navy .pillar p{ color: rgba(247,244,238,0.68); }

/* Funnel (Sell page) */
.funnel{ display:flex; flex-direction:column; align-items:center; gap:6px; margin: var(--space-4) auto; max-width: 420px; }
.funnel-step{ width:100%; text-align:center; padding: 12px; border:1px solid var(--line); background: var(--paper); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color: var(--navy); }
.funnel-arrow{ color: var(--gold); font-size:1rem; }

/* Property cards */
.property-card{ border:1px solid var(--line-soft); border-radius: var(--radius-md); overflow:hidden; background:var(--paper); transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.property-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-3px); }
.property-media{
  aspect-ratio: 4/3; overflow:hidden;
  display:flex; align-items:flex-end; padding: var(--space-2); position:relative;
  background: var(--navy);
}
.property-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.property-media .property-tag{ position:relative; z-index:1; }
.property-media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(11,22,38,0.55) 100%); }
.property-tag{ background: rgba(11,22,38,0.75); color: var(--gold-light); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:6px 10px; border-radius:2px; }
.property-body{ padding: var(--space-3); }
.property-price{ font-family: var(--font-display); font-size:1.35rem; color: var(--navy); margin-bottom:4px; }
.property-address{ color: var(--ink-soft); font-size:.92rem; margin-bottom: var(--space-2); }
.property-meta{ display:flex; gap: var(--space-3); font-size:.85rem; color: var(--ink-soft); border-top:1px solid var(--line-soft); padding-top: var(--space-2); }

/* Property photo banner (top-of-page strip) */
.property-banner{ padding: var(--space-4) 0; background: var(--paper); border-bottom: 1px solid var(--line-soft); }
.property-banner-head{ display:flex; align-items:baseline; justify-content:space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.property-strip{
  display:flex; gap: var(--space-2); overflow-x:auto; padding-bottom: 6px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.property-strip::-webkit-scrollbar{ height:6px; }
.property-strip::-webkit-scrollbar-thumb{ background: var(--line); border-radius:4px; }
.property-strip-item{ flex: 0 0 auto; width: 220px; margin:0; scroll-snap-align:start; }
.property-strip-item .frame{ position:relative; border-radius: var(--radius-md); overflow:hidden; aspect-ratio: 4/3; background: var(--navy); box-shadow: var(--shadow-sm); }
.property-strip-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.property-strip-item figcaption{ margin-top:8px; font-size:.78rem; letter-spacing:.04em; color: var(--ink-soft); }
@media (min-width:900px){
  .property-strip-item{ width: calc((100% - 5 * var(--space-2)) / 6); }
}

/* Area cards */
.area-card{
  position:relative; padding: var(--space-4); border-radius: var(--radius-md); color: var(--off-white); overflow:hidden; min-height:180px;
  display:flex; flex-direction:column; justify-content:flex-end; transition: transform .25s var(--ease);
  background-image: url('../img/skyline.svg'), linear-gradient(160deg, var(--navy) 20%, var(--navy-soft) 100%);
  background-size: cover, cover;
  background-position: bottom center, center;
  background-repeat: no-repeat, no-repeat;
}
.area-card:hover{ transform: translateY(-3px); }
.area-card::before{ content:""; position:absolute; inset:0; background: radial-gradient(circle at 80% 0%, rgba(169,129,74,0.35), transparent 60%); }
.area-card span{ position:relative; font-family: var(--font-display); font-size:1.3rem; }
.area-card small{ position:relative; color: var(--gold-light); font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; }

/* Testimonial-free credibility strip */
.credibility-strip{ display:flex; flex-wrap:wrap; gap: var(--space-4) var(--space-6); justify-content:center; }
.credibility-strip div{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color: rgba(247,244,238,0.55); font-weight:600; }

/* ---------- Forms ---------- */
.field{ margin-bottom: var(--space-3); text-align:left; }
.field label{ display:block; font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; padding: 14px 16px; border:1px solid var(--line); border-radius: var(--radius);
  background: var(--white); color: var(--ink); transition: border-color .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color: var(--gold); }
.field textarea{ resize:vertical; min-height:100px; }
.field-row{ display:grid; gap: var(--space-3); grid-template-columns:1fr; }
@media (min-width:560px){ .field-row{ grid-template-columns:1fr 1fr; } }
.option-grid{ display:grid; gap:10px; grid-template-columns: 1fr; }
@media (min-width:520px){ .option-grid{ grid-template-columns: 1fr 1fr; } }
.option-card{
  border:1px solid var(--line); border-radius: var(--radius-md); padding: 18px; cursor:pointer;
  transition: all .2s var(--ease); text-align:left; background:var(--white);
}
.option-card:hover{ border-color: var(--gold-light); }
.option-card.is-selected{ border-color: var(--gold); background: var(--gold-pale); }
.option-card strong{ display:block; font-size:.98rem; margin-bottom:3px; color: var(--navy); }
.option-card span{ font-size:.83rem; color: var(--ink-soft); }
.honeypot{ position:absolute; left:-9999px; opacity:0; height:0; }

.inline-form{ background: var(--paper); border:1px solid var(--line-soft); border-radius: var(--radius-md); padding: var(--space-4); }

/* ---------- Modal smart form ---------- */
.modal-overlay{
  position: fixed; inset:0; z-index: 900; background: rgba(11,22,38,0.6);
  display:flex; align-items:center; justify-content:center; padding: var(--space-2);
  opacity:0; visibility:hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.modal-overlay.is-open{ opacity:1; visibility:visible; transition: opacity .3s var(--ease); }
.modal{
  background: var(--off-white); width:100%; max-width: 640px; max-height:90vh; overflow-y:auto;
  border-radius: var(--radius-md); padding: var(--space-5) var(--space-4); position:relative;
  transform: translateY(14px) scale(.98); transition: transform .3s var(--ease);
  box-shadow: var(--shadow-lg);
}
.modal-overlay.is-open .modal{ transform: translateY(0) scale(1); }
.modal-close{
  position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); background: var(--white); font-size:16px; color: var(--ink-soft);
  display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{ border-color: var(--gold); color: var(--navy); }
.modal-progress{ display:flex; gap:6px; margin-bottom: var(--space-4); }
.modal-progress span{ height:2px; flex:1; background: var(--line); border-radius:2px; overflow:hidden; }
.modal-progress span i{ display:block; height:100%; width:0; background: var(--gold); transition: width .3s var(--ease); }
.modal-progress span.is-done i, .modal-progress span.is-active i{ width:100%; }
.modal-step{ display:none; }
.modal-step.is-active{ display:block; animation: fadeUp .35s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(8px);} to{opacity:1; transform:translateY(0);} }
.modal-eyebrow{ margin-bottom:6px; }
.modal-step h3{ margin-bottom: var(--space-3); }
.modal-foot{ display:flex; justify-content:space-between; align-items:center; margin-top: var(--space-4); gap: var(--space-2); }
.modal-back{ font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--ink-soft); }
.modal-back:hover{ color: var(--navy); }
.form-success{ text-align:center; padding: var(--space-4) 0; }
.form-success .mark{ margin: 0 auto var(--space-3); }

/* ---------- WhatsApp float + tooltip ---------- */
.wa-float{
  position: fixed; right:24px; bottom:24px; z-index: 700;
  display:flex; align-items:center; gap:12px;
}
.wa-tooltip{
  background: var(--navy); color: var(--off-white); padding: 12px 16px; border-radius: var(--radius-md);
  font-size: 13px; max-width: 220px; box-shadow: var(--shadow-md); position:relative;
  opacity:0; visibility:hidden; transform: translateX(6px); transition: all .3s var(--ease);
}
.wa-tooltip.is-visible{ opacity:1; visibility:visible; transform:translateX(0); }
.wa-tooltip button{ position:absolute; top:-8px; right:-8px; width:22px; height:22px; border-radius:50%; background: var(--off-white); color:var(--navy); border:1px solid var(--line); font-size:11px; line-height:1; }
.wa-btn{
  width:58px; height:58px; border-radius:50%; background: #25D366; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-md); transition: transform .2s var(--ease), box-shadow .2s var(--ease); flex-shrink:0;
}
.wa-btn:hover{ transform: scale(1.06); box-shadow: var(--shadow-lg); }
.wa-btn svg{ width:28px; height:28px; }

@media (max-width: 719px){
  .wa-float{ right:16px; bottom:88px; }
  .wa-tooltip{ display:none; }
}

/* ---------- Mobile conversion bar ---------- */
.mobile-bar{
  position: fixed; left:0; right:0; bottom:0; z-index: 650;
  display:grid; grid-template-columns: repeat(3,1fr);
  background: var(--navy); border-top: 1px solid rgba(247,244,238,0.1);
  box-shadow: 0 -6px 20px rgba(11,22,38,0.18);
}
.mobile-bar a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding: 10px 4px 12px; color: rgba(247,244,238,0.85); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:600;
}
.mobile-bar a svg{ width:18px; height:18px; }
.mobile-bar a.is-accent{ color: var(--navy); background: var(--gold); }
@media (min-width: 720px){ .mobile-bar{ display:none; } }
@media (max-width: 719px){ body{ padding-bottom: 62px; } }

/* ---------- Footer ---------- */
.site-footer{ background: var(--navy); color: rgba(247,244,238,0.75); padding: var(--space-6) 0 var(--space-4); }
.footer-grid{ display:grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width:820px){ .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand .brand-name{ color: var(--off-white); font-size:1.3rem; }
.footer-brand p{ margin-top: var(--space-2); color: rgba(247,244,238,0.6); font-size:.92rem; max-width:320px; }
.footer-col h4{ color: var(--off-white); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom: var(--space-2); font-family:var(--font-body); }
.footer-col ul li{ padding: 6px 0; }
.footer-col a{ color: rgba(247,244,238,0.68); font-size:.92rem; transition: color .2s var(--ease); }
.footer-col a:hover{ color: var(--gold-light); }
.footer-social{ display:flex; gap:14px; margin-top: var(--space-2); }
.footer-social a{ width:34px; height:34px; border:1px solid rgba(247,244,238,0.2); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.footer-social svg{ width:15px; height:15px; }
.footer-bottom{ margin-top: var(--space-6); padding-top: var(--space-3); border-top:1px solid rgba(247,244,238,0.1); display:flex; flex-wrap:wrap; gap: var(--space-2); justify-content:space-between; font-size:.78rem; color: rgba(247,244,238,0.45); }

/* ---------- Thank you / final CTA banner ---------- */
.final-cta{ text-align:center; }
.final-cta h2{ max-width:760px; margin: 0 auto; }
.final-cta .lede{ max-width:560px; margin: var(--space-2) auto 0; }
.final-cta .btn-row{ justify-content:center; margin-top: var(--space-4); }

/* ---------- Portrait / avatar placeholder ---------- */
.avatar-portrait{ width: 220px; height:220px; border-radius:50%; overflow:hidden; box-shadow: var(--shadow-md); flex-shrink:0; }
.avatar-portrait img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar-portrait--sm{ width:64px; height:64px; }
.avatar-caption{ margin-top: var(--space-2); font-size:.8rem; color: var(--ink-soft); text-align:center; }

/* ---------- Broker logo card ---------- */
.broker-logo-card{
  background: var(--white); border:1px solid var(--line-soft); border-radius: var(--radius-md);
  padding: var(--space-5); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-sm);
}
.broker-logo-card img{ width:100%; height:auto; display:block; }

/* ---------- Marketing graphic panel ---------- */
.graphic-panel{ background: var(--navy); border-radius: var(--radius-md); padding: var(--space-4); display:flex; align-items:center; justify-content:center; }
.graphic-panel img{ width:100%; max-width:420px; }

/* ---------- Utilities ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.disclosure{ font-size:.78rem; color: var(--ink-soft); opacity:.8; }
.badge{ display:inline-block; padding:5px 12px; border:1px solid var(--gold); color:var(--gold); font-size:11px; letter-spacing:.1em; text-transform:uppercase; border-radius:20px; }

/* Skip link for accessibility */
.skip-link{ position:absolute; left:-9999px; top:auto; background:var(--gold); color:var(--navy); padding:12px 20px; z-index:1000; }
.skip-link:focus{ left:16px; top:16px; }