:root{
  /* Royal blue palette (BK's eXp brand) + cream */
  --teal:#1e3a8a;
  --teal-dark:#142764;
  --teal-soft:#c7d2ec;
  --teal-tint:#eef2fb;

  --ink:#222222;
  --ink-2:#4a4a4a;
  --mute:#8a8a8a;
  --cream:#FFFDF9;
  --line:#DBDBDB;
  --line-strong:#bfbfbf;

  --warm:#c8984a;

  --radius:16px;     /* button radius (1rem) */
  --radius-lg:24px;  /* card / media radius (1.5rem) */
  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow-md:0 12px 32px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Mukta', 'Fira Sans', system-ui, sans-serif;
  font-weight:300;
  color:var(--ink); background:var(--cream); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block; max-width:100%; height:auto}
a{color:inherit}

.wrap{max-width:1320px; margin:0 auto; padding:0 clamp(20px,4vw,48px)}
.serif{font-family:'DM Serif Text', serif; font-weight:400}
.italic{font-style:italic}

/* ============================================
   HERO (elegant, matches rutul layout)
   ============================================ */
.hero{
  position:relative; background:var(--teal); color:#fff;
  padding:28px 0 0;
  min-height:100vh;
  overflow:hidden;
  display:flex; flex-direction:column;
}
@media(max-width:900px){
  .hero{min-height:auto}
}
/* Subtle ornamental pattern overlay */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.06;
  background-image:
    radial-gradient(circle at 20% 30%, white 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, white 1px, transparent 1px);
  background-size:80px 80px, 100px 100px;
}
/* Soft glow on right side */
.hero::after{
  content:""; position:absolute; top:-10%; right:-10%; width:55%; height:80%;
  background:radial-gradient(closest-side, rgba(255,255,255,.12), transparent 70%);
  pointer-events:none; z-index:0;
}

/* Top navigation bar inside hero */
.hero-nav{
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:0 clamp(20px,4vw,48px);
}

/* ============================================
   BRAND LOGO (monogram + word mark)
   ============================================ */
.hero-brand{
  display:flex; align-items:center; gap:14px;
  color:#fff; text-decoration:none;
  transition:opacity .25s;
}
.hero-brand:hover{opacity:.92}

/* Circular monogram mark */
.brand-mark{
  position:relative;
  width:54px; height:54px;
  display:grid; place-items:center;
  flex:0 0 auto;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.hero-brand:hover .brand-mark{transform:rotate(-4deg)}
.brand-mark::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(2px);
}
.brand-mark::after{
  content:""; position:absolute; inset:5px; border-radius:50%;
  border:1px dashed rgba(255,255,255,.4);
  transition:transform .8s linear;
}
.hero-brand:hover .brand-mark::after{transform:rotate(45deg)}
.brand-mark .bk{
  position:relative; z-index:1;
  font-family:'DM Serif Text', serif; font-style:italic;
  font-size:22px; line-height:1; color:#fff;
  letter-spacing:-.02em;
}
/* Tiny dots at top & bottom of monogram (wax-seal feel) */
.brand-mark .dot-t, .brand-mark .dot-b{
  position:absolute; left:50%; transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%; background:#fff;
}
.brand-mark .dot-t{top:-4px}
.brand-mark .dot-b{bottom:-4px}

/* Vertical divider between mark and name */
.brand-divider{
  width:1px; height:38px; flex:0 0 auto;
  background:linear-gradient(to bottom,
    transparent 0%,
    rgba(255,255,255,.55) 30%,
    rgba(255,255,255,.55) 70%,
    transparent 100%);
}

/* Word mark — trendy editorial style */
.brand-text{
  display:flex; flex-direction:column; gap:6px; line-height:1;
  padding-left:2px;
}
.brand-text .n{
  font-family:'DM Serif Text', serif; font-style:italic; font-weight:400;
  font-size:clamp(32px,2.8vw,44px); letter-spacing:-.005em;
  color:#fff;
}
.brand-text .r{
  display:inline-flex; align-items:center; gap:12px;
  font-family:'Mukta','Fira Sans',sans-serif;
  font-size:11.5px; letter-spacing:.38em; text-transform:uppercase;
  font-weight:500; color:rgba(255,255,255,.82);
}
.brand-text .r::before,
.brand-text .r::after{
  content:""; flex:0 0 auto;
  width:18px; height:1px; background:rgba(255,255,255,.45);
  display:inline-block;
}
@media(max-width:560px){
  .brand-divider{display:none}
  .brand-mark{width:46px; height:46px}
  .brand-mark .bk{font-size:19px}
}

/* Right: Nav links + phone — trendy editorial style */
.hero-nav-right{display:flex; align-items:center; gap:28px; flex-wrap:nowrap; justify-content:flex-end}
.hero-nav-right .links{display:flex; align-items:center; gap:34px; flex-wrap:nowrap}
.hero-nav-right .links > a,
.hero-nav-right .links .nav-item > a{
  position:relative; color:#fff; text-decoration:none;
  font-family:'Mukta','Fira Sans',sans-serif;
  font-size:17px; font-weight:400; letter-spacing:.015em;
  text-transform:none; opacity:.92; padding:6px 0;
  transition:opacity .25s, color .25s;
}
/* Animated underline grows from center on hover */
.hero-nav-right .links > a::after,
.hero-nav-right .links .nav-item > a::after{
  content:""; position:absolute; left:50%; bottom:0;
  width:0; height:1px; background:#fff;
  transition:width .35s cubic-bezier(.2,.8,.2,1),
             left .35s cubic-bezier(.2,.8,.2,1);
}
.hero-nav-right .links > a:hover,
.hero-nav-right .links .nav-item:hover > a{ opacity:1 }
.hero-nav-right .links > a:hover::after,
.hero-nav-right .links .nav-item:hover > a::after{ width:100%; left:0 }
/* Caret stays attached, no underline on it */
.hero-nav-right .links .caret{ opacity:.7 }

/* ============================================
   DROPDOWN MENU SYSTEM
   ============================================ */
.nav-item{position:relative}
.has-dropdown > a{
  display:inline-flex !important; align-items:center; gap:6px; cursor:pointer;
}
.caret{
  font-size:8px; line-height:1; display:inline-block;
  transition:transform .35s cubic-bezier(.2,.8,.2,1); margin-top:1px;
}
.has-dropdown:hover > a .caret{transform:rotate(180deg)}

/* Main dropdown panel */
.dropdown{
  position:absolute; top:calc(100% + 22px); left:50%;
  transform:translateX(-50%) translateY(-10px);
  min-width:240px; background:#fff; color:var(--ink);
  border-radius:6px; padding:10px 0;
  box-shadow:0 16px 40px rgba(15,27,61,.15), 0 0 0 1px rgba(15,27,61,.04);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s, visibility .3s, transform .35s cubic-bezier(.2,.8,.2,1);
  z-index:200;
}
/* Invisible bridge so cursor can move from link to dropdown */
.dropdown::before{
  content:""; position:absolute; top:-22px; left:0; right:0; height:22px;
}
/* Decorative arrow at top of dropdown */
.dropdown::after{
  content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg);
  width:12px; height:12px; background:#fff;
  box-shadow:-1px -1px 1px rgba(15,27,61,.04);
}
.has-dropdown:hover > .dropdown{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

/* Dropdown items */
.drop-link{
  display:block !important; padding:13px 26px !important;
  color:var(--ink-2) !important; text-decoration:none;
  font-size:11px !important; letter-spacing:.18em !important;
  text-transform:uppercase; font-weight:600 !important;
  white-space:nowrap; opacity:1 !important;
  border-left:2px solid transparent;
  transition:background .2s, color .2s, border-color .2s, padding-left .2s;
}
.drop-link:hover{
  background:var(--teal-tint) !important;
  color:var(--teal) !important;
  border-left-color:var(--teal) !important;
  padding-left:30px !important;
}
.drop-link.with-arrow{
  display:flex !important; justify-content:space-between !important;
  align-items:center; gap:30px;
}
.sub-arrow{
  font-size:16px; line-height:1; color:var(--mute);
  transition:color .2s, transform .25s;
}
.drop-link.with-arrow:hover .sub-arrow{color:var(--teal); transform:translateX(4px)}

/* Mega menu (the Communities flyout) */
.nav-item.has-dropdown.sub{position:relative}
.dropdown.mega{
  position:absolute; top:-10px; left:calc(100% + 6px);
  transform:translateX(-10px) translateY(0);
  display:grid; grid-template-columns:1fr 1fr;
  gap:0; padding:18px 0; min-width:480px;
}
.dropdown.mega::after{display:none}
.dropdown.mega::before{
  content:""; position:absolute; top:0; left:-10px; bottom:0; width:10px;
  background:transparent;
}
.has-dropdown.sub:hover > .dropdown.mega{
  transform:translateX(0) translateY(0);
}
.mega-col{padding:0 4px; border-right:1px solid var(--line)}
.mega-col:last-child{border-right:none}
.mega-col .mega-head{
  font-family:'DM Serif Text', serif; font-weight:400;
  font-size:13px; color:var(--teal);
  padding:6px 26px 12px; margin:0;
  border-bottom:1px solid var(--line);
  margin-bottom:6px; letter-spacing:.02em; font-style:italic;
}
.mega-col .drop-link{
  font-size:10.5px !important; padding:10px 26px !important; letter-spacing:.16em !important;
}

@media(max-width:980px){
  .dropdown, .dropdown.mega{display:none}
}
.phone-pill{
  background:#fff; color:var(--teal); text-decoration:none;
  padding:10px 18px; border-radius:999px; font-size:13px; font-weight:600;
  letter-spacing:.04em; display:inline-flex; align-items:center; gap:8px;
  transition:background .2s, transform .2s;
}
.phone-pill:hover{background:var(--teal-tint); transform:translateY(-1px)}
@media(max-width:900px){ .hero-nav-right .links{display:none} }

/* Hero body: photo + headline */
.hero-body{
  position:relative;
  display:grid; grid-template-columns:auto 1fr;
  gap:clamp(20px,3vw,40px); align-items:end;
  padding:20px clamp(20px,4vw,48px) 0 0;   /* no left padding → photo flush-left */
}
.hero-body > .hero-photo{ margin-left:0 }
@media(max-width:900px){
  .hero-body{grid-template-columns:1fr; gap:0; padding-bottom:0}
}

/* ============================================
   LEFT SOCIAL RAIL (elegant, with vertical label
   & hover tooltips)
   ============================================ */
.hero-social{
  position:absolute; left:clamp(14px,2vw,30px); top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:14px; z-index:6;
}
/* Vertical "FOLLOW" label */
.social-label{
  font-size:10px; letter-spacing:.45em; text-transform:uppercase;
  color:rgba(255,255,255,.85); font-weight:600;
  writing-mode:vertical-rl; transform:rotate(180deg);
  padding-bottom:18px; position:relative;
}
.social-label::after{
  content:""; position:absolute; bottom:0; left:50%;
  transform:translateX(-50%); width:1px; height:30px;
  background:linear-gradient(to bottom, rgba(255,255,255,.7), transparent);
}

/* Icon button */
.social-link{
  position:relative; width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.28);
  display:grid; place-items:center; color:#fff; text-decoration:none;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .35s cubic-bezier(.2,.8,.2,1),
             color .35s cubic-bezier(.2,.8,.2,1),
             border-color .35s, transform .35s cubic-bezier(.2,.8,.2,1),
             box-shadow .35s;
}
.social-link svg{
  width:15px; height:15px; transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
/* Outer animated ring on hover */
.social-link::before{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  opacity:0; transform:scale(.85);
  transition:opacity .4s, transform .55s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
/* Tooltip label on the right */
.social-link::after{
  content:attr(data-name);
  position:absolute; left:calc(100% + 14px); top:50%;
  transform:translateY(-50%) translateX(-8px);
  background:#fff; color:var(--teal);
  padding:6px 14px; border-radius:6px;
  font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap;
  opacity:0; pointer-events:none;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.25);
  transition:opacity .3s cubic-bezier(.2,.8,.2,1),
             transform .35s cubic-bezier(.2,.8,.2,1);
}
/* Tooltip arrow (small triangle) */
.social-link .tooltip-arrow{
  position:absolute; left:calc(100% + 8px); top:50%;
  transform:translateY(-50%) translateX(-8px);
  width:0; height:0;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
  border-right:6px solid #fff;
  opacity:0;
  transition:opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}

/* HOVER STATE */
.social-link:hover{
  background:#fff; color:var(--teal); border-color:#fff;
  transform:translateX(6px) scale(1.05);
  box-shadow:0 10px 30px -8px rgba(255,255,255,.55),
             0 0 0 1px rgba(255,255,255,.2);
}
.social-link:hover svg{transform:scale(1.1) rotate(-4deg)}
.social-link:hover::before{opacity:1; transform:scale(1.2)}
.social-link:hover::after,
.social-link:hover .tooltip-arrow{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}

/* End ornament dot */
.social-end{
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.45); margin-top:8px;
  box-shadow:0 0 0 4px rgba(255,255,255,.08);
}

@media(max-width:900px){ .hero-social{display:none} }

/* ============================================
   HERO PHOTO — premium decorative treatment
   ============================================ */
.hero-photo{
  position:relative; align-self:end;
  width:clamp(340px,40vw,580px);
  aspect-ratio: 3 / 4;
  margin-left:-40px;
  transform:translateY(0);
}
.hero-photo > img{
  position:relative; z-index:3;
  width:100%; height:100%; display:block;
  object-fit:cover; object-position: center top;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.35));
}

/* Layer 1: large radial medallion backdrop */
.photo-medallion{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:115%; aspect-ratio:1; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle at center,
    rgba(255,255,255,.22) 0%,
    rgba(255,255,255,.10) 35%,
    rgba(255,255,255,.04) 55%,
    transparent 72%);
  animation:pulseGlow 6s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{transform:translateX(-50%) scale(1); opacity:.85}
  50%{transform:translateX(-50%) scale(1.06); opacity:1}
}

/* Layer 2: rotating dashed orbit ring */
.photo-orbit{
  position:absolute; left:50%; bottom:-2%; transform:translateX(-50%);
  width:108%; aspect-ratio:1; border-radius:50%; z-index:1; pointer-events:none;
  border:1.5px dashed rgba(255,255,255,.32);
  animation:orbitSpin 60s linear infinite;
}
@keyframes orbitSpin{ to{transform:translateX(-50%) rotate(360deg)} }

/* Layer 3: inner solid soft ring */
.photo-orbit-2{
  position:absolute; left:50%; bottom:5%; transform:translateX(-50%);
  width:92%; aspect-ratio:1; border-radius:50%; z-index:1; pointer-events:none;
  border:1px solid rgba(255,255,255,.15);
}

/* Floating sparkles around the photo */
.float-spark{
  position:absolute; color:rgba(255,255,255,.85);
  font-family:'DM Serif Text', serif;
  z-index:4; pointer-events:none;
  text-shadow:0 0 12px rgba(255,255,255,.6);
  animation:floatSpark 4.5s ease-in-out infinite;
}
.float-spark.s1{top:14%;  left:-6%;  font-size:18px; animation-delay:0s}
.float-spark.s2{top:38%;  right:-8%; font-size:26px; animation-delay:1.4s}
.float-spark.s3{bottom:24%; left:4%;  font-size:13px; animation-delay:2.8s}
.float-spark.s4{top:62%;  right:-3%; font-size:15px; animation-delay:3.6s}
@keyframes floatSpark{
  0%,100%{transform:translateY(0) scale(1) rotate(0deg); opacity:.7}
  50%{transform:translateY(-14px) scale(1.2) rotate(15deg); opacity:1}
}

/* Premium circular seal/badge with rotating text */
.photo-seal{
  position:absolute; right:-12px; bottom:50px;
  width:118px; height:118px; z-index:6;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.32));
}
.photo-seal-svg{
  position:absolute; inset:0; width:100%; height:100%;
  animation:sealSpin 22s linear infinite;
}
.photo-seal-svg text{
  font-family:'Fira Sans', sans-serif; font-size:8px;
  letter-spacing:2.4px; fill:#fff; font-weight:600;
  text-transform:uppercase;
}
@keyframes sealSpin{ to{transform:rotate(360deg)} }
.seal-core{
  position:absolute; inset:24px;
  background:linear-gradient(135deg, #ffffff 0%, #f3f6fc 100%);
  border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; box-shadow:inset 0 0 0 1px rgba(30,58,138,.12);
  color:var(--teal);
}
.seal-star{font-size:13px; line-height:1; margin-bottom:2px; color:var(--teal)}
.seal-num{
  font-family:'DM Serif Text', serif; font-weight:400;
  font-size:26px; line-height:.9; letter-spacing:-.01em;
}
.seal-lab{
  font-size:7.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-2); margin-top:3px; font-weight:600;
}

/* Decorative corner brackets (bottom-left of photo area) */
.photo-bracket{
  position:absolute; bottom:50px; left:-20px; z-index:4;
  width:60px; height:60px; pointer-events:none;
}
.photo-bracket::before, .photo-bracket::after{
  content:""; position:absolute; background:rgba(255,255,255,.6);
}
.photo-bracket::before{left:0; bottom:0; width:30px; height:1.5px}
.photo-bracket::after{left:0; bottom:0; width:1.5px; height:30px}

@media(max-width:900px){
  .hero-photo{margin:30px auto 0; width:75%; max-width:340px}
  .photo-seal{width:100px; height:100px; right:-10px; bottom:20px}
  .seal-core{inset:18px}
  .seal-num{font-size:22px}
}
@media(max-width:520px){
  .photo-bracket, .float-spark{display:none}
}

/* Hero headline + CTAs (elegance pass) */
.hero-content{
  padding:clamp(40px,5vw,80px) 0 clamp(50px,6vw,90px);
  text-align:right; align-self:center; position:relative; z-index:2;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.32em; text-transform:uppercase; font-weight:500;
  color:rgba(255,255,255,.85); padding:6px 0 0;
  border-top:none;
}
.hero-eyebrow::before, .hero-eyebrow::after{
  content:""; width:24px; height:1px; background:rgba(255,255,255,.5); display:inline-block;
}
.hero-content h1{
  font-family:'DM Serif Text', serif; font-weight:400;
  font-size:clamp(42px,5.8vw,80px); line-height:1; letter-spacing:-.012em;
  margin:18px 0 0; color:#fff;
  white-space:nowrap;
}
.hero-content h1 .italic{
  font-style:italic; display:block; margin-top:6px;
  font-size:.88em;
  white-space:nowrap;
}
/* Ornamental divider between headline lines */
.hero-ornament{
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  margin:14px 0 6px; padding-right:2px; opacity:.85;
}
.hero-ornament .line{width:50px; height:1px; background:rgba(255,255,255,.55)}
.hero-ornament .diamond{
  width:6px; height:6px; background:#fff; transform:rotate(45deg); display:inline-block;
}
.hero-subtag{
  margin-top:24px; font-size:14px; color:rgba(255,255,255,.88);
  letter-spacing:.01em; line-height:1.7; max-width:78ch; margin-left:auto;
}
.hero-ctas{
  display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap;
  margin-top:32px;
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 26px; border-radius:999px;
  text-decoration:none; font-size:12.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  transition:transform .2s, background .2s, border-color .2s, color .2s;
  border:1.5px solid transparent; cursor:pointer; font-family:inherit;
}
.btn-white{background:#fff; color:var(--teal)}
.btn-white:hover{background:var(--teal-tint); transform:translateY(-1px)}
.btn-outline-light{background:transparent; color:#fff; border-color:#fff}
.btn-outline-light:hover{background:#fff; color:var(--teal); transform:translateY(-1px)}
.btn-teal{background:var(--teal); color:#fff}
.btn-teal:hover{background:var(--teal-dark); transform:translateY(-1px)}
.btn-outline{background:#fff; color:var(--ink); border-color:var(--line-strong)}
.btn-outline:hover{border-color:var(--teal); color:var(--teal)}

/* Credentials marquee at bottom of hero */
.hero-marquee{
  position:relative; z-index:2; margin-top:auto;
  background:rgba(255,255,255,.07);
  border-top:1px solid rgba(255,255,255,.18);
  border-bottom:1px solid rgba(255,255,255,.18);
  overflow:hidden;
  padding:18px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.marquee-track{
  display:flex; align-items:center; gap:48px;
  animation:marquee 38s linear infinite;
  width:max-content; white-space:nowrap;
}
.hero-marquee:hover .marquee-track{animation-play-state:paused}
.m-item{
  display:inline-flex; align-items:center; gap:14px;
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.92); font-weight:500;
}
.m-item .num{
  font-family:'DM Serif Text',serif; font-weight:400;
  font-size:22px; letter-spacing:.01em; text-transform:none; color:#fff;
  margin-right:4px; line-height:1;
}
.m-dot{
  width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.4);
  flex:0 0 auto;
}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
}
/* Hide unused award badges (we're using marquee instead) */
.hero-awards{display:none}

@media(max-width:900px){
  .hero-content{text-align:center; padding:30px 0 40px}
  .hero-content h1, .hero-content h1 .italic{white-space:normal}
  .hero-ctas{justify-content:center}
  .hero-eyebrow::before, .hero-eyebrow::after{width:18px}
  .hero-ornament{justify-content:center}
  .hero-subtag{margin-left:auto; margin-right:auto}
}

/* ============================================
   STATS ROW (white bg, below hero)
   ============================================ */
.statsrow{background:var(--cream); padding:60px 0; border-bottom:1px solid var(--line)}
.statsrow-inner{
  display:grid; grid-template-columns:1fr 1px 1fr 1px 1fr;
  gap:20px; align-items:center; text-align:center;
}
.statsrow-inner .s{padding:0 20px}
.statsrow-inner .s b{
  font-family:'DM Serif Text', serif; font-weight:400;
  font-size:clamp(44px,5.5vw,64px); line-height:1; color:var(--teal);
  letter-spacing:-.01em; display:block;
}
.statsrow-inner .s span{
  font-size:11.5px; letter-spacing:.25em; text-transform:uppercase; font-weight:500;
  color:var(--ink-2); margin-top:12px; display:block;
}
.statsrow-inner .divider{width:1px; background:var(--line-strong); height:80px; justify-self:center}
@media(max-width:720px){
  .statsrow-inner{grid-template-columns:1fr; gap:36px}
  .statsrow-inner .divider{display:none}
}

/* ============================================
   SECTIONS (shared)
   ============================================ */
section{padding:clamp(70px,9vw,120px) 0}
.sec-title{
  font-family:'DM Serif Text', serif; font-weight:400;
  font-size:clamp(28px,3.6vw,44px); line-height:1.15; letter-spacing:-.01em;
  color:var(--teal); margin:0;
}
.sec-title .italic{font-style:italic}
.sec-title-dark{color:var(--ink)}

/* ============================================
   STRATEGIC PARTNER
   ============================================ */
.partner-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(30px,5vw,70px); align-items:flex-start}
@media(max-width:900px){.partner-grid{grid-template-columns:1fr}}
.partner-text p{color:var(--ink-2); font-size:15px; line-height:1.75; margin:14px 0 0; max-width:54ch}
.partner-text .sec-title{margin-bottom:18px}
.partner-ctas{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap}
.partner-photos{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-self:center}
.partner-photos .p{aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; background:#ddd; box-shadow:var(--shadow-sm)}
.partner-photos .p:nth-child(1){margin-top:40px}
.partner-photos .p img{width:100%; height:100%; object-fit:cover}

/* ============================================
   BUILDING HOMES (teal full-bleed)
   ============================================ */
.teal-band{
  background:var(--teal); color:var(--cream);
  padding:clamp(70px,8vw,110px) 0;
}
.teal-band-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(30px,5vw,70px); align-items:flex-start}
@media(max-width:900px){.teal-band-grid{grid-template-columns:1fr}}
.teal-band h2{
  font-family:'DM Serif Text', serif; font-weight:400;
  font-size:clamp(34px,4.6vw,58px); line-height:1.08; letter-spacing:-.01em;
  margin:0; color:var(--cream);
}
.teal-band p{color:rgba(255,253,249,.92); font-size:15.5px; margin:0 0 14px; line-height:1.8}
.teal-band p:last-child{margin-bottom:0}

/* ============================================
   OPPORTUNITIES / LISTINGS (with bg image)
   ============================================ */
.opp{padding-top:0}
.opp-hero{
  height:clamp(240px,30vw,360px);
  background-image:linear-gradient(rgba(26,43,53,.25), rgba(26,43,53,.35)),
                   url("https://images.unsplash.com/photo-1517935706615-2717063c2225?w=1600&q=80&auto=format&fit=crop");
  background-size:cover; background-position:center;
}
.opp-body{background:var(--cream); padding:clamp(60px,8vw,100px) 0}
.opp-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:center}
@media(max-width:900px){.opp-grid{grid-template-columns:1fr}}
.opp-grid .photo{
  aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; background:#ddd;
  max-width:380px; margin:0 auto; box-shadow:var(--shadow-sm);
}
.opp-grid .photo img{width:100%; height:100%; object-fit:cover}

/* FILTER BAR (repositioned for KW search) */
.opp-filter{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px; margin:26px 0 22px; box-shadow:var(--shadow-sm);
  display:grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr auto; gap:10px; align-items:end;
}
@media(max-width:1000px){.opp-filter{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:560px){.opp-filter{grid-template-columns:1fr 1fr}}
.opp-filter .field{display:flex; flex-direction:column; gap:5px}
.opp-filter label{font-size:10px; color:var(--mute); letter-spacing:.14em; text-transform:uppercase; font-weight:600}
.opp-filter select{
  padding:10px 12px; border-radius:8px; border:1px solid var(--line-strong);
  background:#fff; font:inherit; font-size:13px; color:var(--ink); cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231E7C9F' stroke-width='2.5' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:30px;
}
.opp-filter select:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-tint)}
.opp-filter .reset{
  padding:10px 18px; border-radius:999px; border:1.5px solid var(--line-strong);
  background:#fff; font:inherit; font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2); cursor:pointer; height:40px;
  transition:border-color .2s, color .2s, background .2s;
}
.opp-filter .reset:hover{border-color:var(--teal); color:var(--teal); background:var(--teal-tint)}
.results-meta{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; color:var(--mute); font-size:13px}
.results-meta strong{color:var(--ink); font-weight:600}

/* Listings grid */
.listings{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px}
@media(max-width:980px){.listings{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.listings{grid-template-columns:1fr}}
.card{
  background:#fff; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); display:flex; flex-direction:column;
  transition:transform .3s, box-shadow .3s;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.card-img{position:relative; aspect-ratio:4/3; overflow:hidden; background:#eee}
.card-img img{width:100%; height:100%; object-fit:cover; transition:transform .6s}
.card:hover .card-img img{transform:scale(1.05)}
.pill{position:absolute; top:12px; left:12px; padding:5px 11px; border-radius:999px; font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase}
.pill.new{background:var(--teal); color:#fff}
.pill.open{background:var(--warm); color:#fff}
.pill.sold{background:var(--ink); color:#fff}
.heart{position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%; background:#fff; display:grid; place-items:center; cursor:pointer; border:none; box-shadow:var(--shadow-sm); transition:background .2s}
.heart:hover{background:var(--teal-tint)}
.heart svg{stroke:var(--ink-2); transition:fill .2s, stroke .2s}
.heart.fav svg{fill:#e74c3c; stroke:#e74c3c}
.card-body{padding:20px; display:flex; flex-direction:column; gap:8px; flex:1}
.card-price{font-family:'DM Serif Text',serif; font-size:26px; color:var(--teal); letter-spacing:-.01em}
.card-addr{color:var(--ink-2); font-size:13.5px; line-height:1.5}
.card-addr b{color:var(--ink); font-weight:600; display:block; margin-bottom:2px; font-size:14.5px; font-family:'Fira Sans',sans-serif}
.card-meta{display:flex; gap:16px; padding-top:12px; margin-top:auto; border-top:1px solid var(--line); color:var(--ink-2); font-size:12.5px}
.card-meta div{display:flex; align-items:center; gap:6px}
.card-meta svg{stroke:var(--teal)}
.empty-state{text-align:center; padding:50px 20px; background:#fff; border:1px dashed var(--line-strong); border-radius:var(--radius-lg); color:var(--ink-2)}
.empty-state h3{font-family:'DM Serif Text',serif; font-size:24px; margin:0 0 8px; color:var(--ink)}
.empty-state p{margin:0 0 18px; font-size:14px}

/* ============================================
   SELL WITH CONFIDENCE
   ============================================ */
.sellc-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:flex-start}
@media(max-width:900px){.sellc-grid{grid-template-columns:1fr}}
.sellc-left .sec-title{margin-bottom:16px}
.sellc-left p{color:var(--ink-2); font-size:15px; line-height:1.75; max-width:44ch}
.sellc-btn{margin-top:22px}
.sellc-photo{
  margin-top:28px; aspect-ratio:5/3; border-radius:var(--radius-lg); overflow:hidden;
  max-width:380px; background:#ddd;
}
.sellc-photo img{width:100%; height:100%; object-fit:cover}
.sellc-features{display:flex; flex-direction:column; gap:26px}
.feat{display:flex; gap:18px; align-items:flex-start}
.feat .ico{
  width:48px; height:48px; flex:0 0 auto; border-radius:50%;
  background:var(--teal-tint); display:grid; place-items:center; color:var(--teal);
}
.feat h4{font-family:'DM Serif Text',serif; font-weight:400; font-size:22px; color:var(--teal); margin:0 0 6px; line-height:1.2}
.feat p{color:var(--ink-2); font-size:14.5px; margin:0; line-height:1.6}

/* ============================================
   INSTANT HOME EVALUATION (bg image with overlay)
   ============================================ */
.eval{
  position:relative; padding:clamp(90px,10vw,140px) 0;
  background-image:url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1600&q=80&auto=format&fit=crop");
  background-size:cover; background-position:center; color:#fff;
}
.eval::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(26,43,53,.78) 0%, rgba(26,43,53,.65) 50%, rgba(26,43,53,.4) 100%);
}
.eval .wrap{position:relative; z-index:2}
.eval .small{font-size:12.5px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.8); font-weight:500}
.eval h2{
  font-family:'DM Serif Text',serif; font-weight:400;
  font-size:clamp(40px,6vw,72px); line-height:1.05; letter-spacing:-.015em;
  margin:14px 0 20px; color:#fff; max-width:14ch;
}
.eval p{color:rgba(255,255,255,.9); font-size:16px; line-height:1.75; margin:0 0 30px; max-width:52ch}

/* ============================================
   FIND THE RIGHT HOME (reverse split)
   ============================================ */
.findright-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:flex-start}
@media(max-width:900px){.findright-grid{grid-template-columns:1fr}}
.findright-photo{
  aspect-ratio:5/4; border-radius:var(--radius-lg); overflow:hidden; background:#ddd;
  max-width:520px; margin:0 auto; box-shadow:var(--shadow-sm);
}
.findright-photo img{width:100%; height:100%; object-fit:cover}
.findright-right .sec-title{margin-bottom:14px}
.findright-right p{color:var(--ink-2); font-size:15px; line-height:1.75; margin:0 0 12px}
.findright-btn{margin-top:22px}

/* ============================================
   STORIES YOU CAN TRUST (testimonials)
   ============================================ */
.stories{background:var(--cream)}
.stories-head{text-align:center; margin-bottom:44px}
.stories-head .sec-title{font-size:clamp(32px,4.4vw,52px); color:var(--teal)}
.stories-head .btn{margin-top:22px}
.t-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media(max-width:980px){.t-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.t-grid{grid-template-columns:1fr}}
.t-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px;
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.t-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--teal-soft)}
.t-card .q{font-size:14.5px; line-height:1.7; color:var(--ink-2)}
.t-card b{display:block; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-family:'DM Serif Text',serif; font-weight:400; color:var(--ink); font-size:16px}
.t-card .meta{color:var(--mute); font-size:12px; margin-top:3px}
.t-card .read{margin-top:12px; color:var(--teal); font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; text-decoration:none}

/* ============================================
   TOOLS / CALCULATORS
   ============================================ */
.tools{background:#fafbfc; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.tab-row{display:flex; justify-content:center; margin-bottom:36px}
.tools-tabs{
  display:inline-flex; gap:4px;
  background:var(--blue-tint); padding:6px; border-radius:999px;
}
.tab-btn{
  background:transparent; border:none; padding:12px 28px; border-radius:999px;
  font-family:inherit; font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); cursor:pointer;
  transition:background .25s, color .25s;
}
.tab-btn:hover{color:var(--blue)}
.tab-btn.active{background:var(--blue); color:#fff}

.tool-panel{
  display:none;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,48px); box-shadow:var(--shadow-sm);
}
.tool-panel.active{
  display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,4vw,56px);
}
@media(max-width:900px){
  .tool-panel.active{grid-template-columns:1fr}
}

.tool-form{display:flex; flex-direction:column; gap:18px}
.tool-field{display:flex; flex-direction:column; gap:6px}
.tool-field > label{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mute); font-weight:600;
}
.input-wrap{position:relative}
.input-wrap .pre, .input-wrap .post{
  position:absolute; top:50%; transform:translateY(-50%);
  color:var(--mute); font-size:14px; pointer-events:none; font-weight:500;
}
.input-wrap .pre{left:14px}
.input-wrap .post{right:14px}
.tool-form input[type="number"], .tool-form select{
  width:100%; padding:13px 14px; border-radius:10px;
  border:1px solid var(--line-strong); background:#fff;
  font:inherit; font-size:15px; color:var(--ink);
  transition:border-color .2s, box-shadow .2s;
  appearance:textfield; -moz-appearance:textfield;
}
.input-wrap.has-pre input{padding-left:32px}
.input-wrap.has-post input{padding-right:38px}
.tool-form input[type="number"]::-webkit-outer-spin-button,
.tool-form input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.tool-form input:focus, .tool-form select:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-tint);
}
.tool-form select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231e3a8a' stroke-width='2.5' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:34px;
}

/* Range slider (for down payment %) */
.slider-row{display:flex; align-items:center; gap:14px}
.slider-row input[type="range"]{
  flex:1; -webkit-appearance:none; appearance:none; height:5px;
  background:var(--line-strong); border-radius:3px; outline:none;
}
.slider-row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--blue); cursor:pointer; border:3px solid #fff;
  box-shadow:0 2px 8px rgba(15,27,61,.25);
}
.slider-row input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--blue); cursor:pointer; border:3px solid #fff;
  box-shadow:0 2px 8px rgba(15,27,61,.25);
}
.slider-row .slider-val{
  min-width:64px; text-align:right; font-weight:700; color:var(--blue); font-size:14px;
  font-family:'DM Serif Text',serif;
}

/* Results panel (royal blue gradient) */
.tool-results{
  background:linear-gradient(140deg, var(--blue), var(--blue-dark));
  color:#fff; border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,40px);
  display:flex; flex-direction:column; gap:24px;
  position:relative; overflow:hidden;
}
.tool-results::before{
  content:""; position:absolute; inset:0; opacity:.06; pointer-events:none;
  background-image:radial-gradient(circle at 80% 20%, white 1px, transparent 1px);
  background-size:42px 42px;
}
.result-primary{
  position:relative; z-index:1; text-align:center;
  padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.18);
}
.result-primary .lab{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.8); margin-bottom:10px; font-weight:600;
}
.result-primary .val{
  font-family:'DM Serif Text', serif; font-weight:400;
  font-size:clamp(38px,5vw,56px); line-height:1; letter-spacing:-.01em;
}
.result-primary .freq{font-size:13px; opacity:.75; margin-top:8px; letter-spacing:.04em}

.result-stats{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:18px 24px;
}
.result-stat .lab{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.7); margin-bottom:5px; font-weight:600;
}
.result-stat .val{font-family:'DM Serif Text',serif; font-size:21px; line-height:1.1}

.ratio-bars{position:relative; z-index:1; display:flex; flex-direction:column; gap:14px}
.ratio-bar{font-size:12px}
.ratio-bar .top{display:flex; justify-content:space-between; margin-bottom:6px; color:rgba(255,255,255,.92)}
.ratio-bar .top .lab{letter-spacing:.12em; text-transform:uppercase; font-size:10.5px; font-weight:600}
.ratio-bar .top .val{font-weight:600}
.ratio-bar .bar{
  height:6px; background:rgba(255,255,255,.15); border-radius:3px; overflow:hidden;
  position:relative;
}
.ratio-bar .fill{
  height:100%; border-radius:3px; transition:width .5s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(90deg, #7dd3a3, #5cb87d);
}
.ratio-bar .fill.warn{background:linear-gradient(90deg, #f4c75a, #e8a936)}
.ratio-bar .fill.danger{background:linear-gradient(90deg, #ff8a6b, #e74c3c)}
.ratio-bar .threshold{
  position:absolute; top:-3px; bottom:-3px; width:1.5px;
  background:rgba(255,255,255,.55);
}
.ratio-bar .hint{font-size:10px; color:rgba(255,255,255,.6); margin-top:4px; letter-spacing:.04em}

.result-cta{
  position:relative; z-index:1;
  margin-top:6px; padding-top:18px; border-top:1px solid rgba(255,255,255,.18);
  text-align:center;
}
.result-cta a{
  display:inline-flex; align-items:center; gap:8px;
  color:#fff; text-decoration:none; font-size:12.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; padding:11px 22px;
  border:1.5px solid rgba(255,255,255,.5); border-radius:999px;
  transition:background .2s, border-color .2s;
}
.result-cta a:hover{background:rgba(255,255,255,.12); border-color:#fff}

.disclaimer{
  font-size:11px; color:var(--mute); margin-top:14px; line-height:1.6; max-width:62ch;
}
.disclaimer b{color:var(--ink); font-weight:600}

/* ============================================
   SMART DECISIONS (blog)
   ============================================ */
.blog-head{text-align:center; margin-bottom:44px}
.blog-head .sec-title{font-size:clamp(28px,3.6vw,44px); color:var(--teal)}
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
@media(max-width:900px){.posts{grid-template-columns:1fr}}
.post{background:#fff; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .3s, box-shadow .3s}
.post:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.post-img{aspect-ratio:16/10; overflow:hidden; background:#eee}
.post-img img{width:100%; height:100%; object-fit:cover; transition:transform .6s}
.post:hover .post-img img{transform:scale(1.05)}
.post-body{padding:22px; display:flex; flex-direction:column; gap:10px; flex:1}
.post-cat{font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); font-weight:600}
.post h3{font-family:'DM Serif Text',serif; font-weight:400; font-size:20px; line-height:1.25; margin:0; color:var(--ink)}
.post p{color:var(--ink-2); font-size:13.5px; margin:0; line-height:1.6}
.post .read{margin-top:auto; padding-top:10px; color:var(--teal); font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; display:inline-flex; align-items:center; gap:6px}
.post .read:hover{gap:10px}

/* ============================================
   YOUR MOVE STARTS HERE
   ============================================ */
.move{background:var(--cream); border-top:1px solid var(--line)}
.move-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(30px,5vw,70px); align-items:center}
@media(max-width:900px){.move-grid{grid-template-columns:1fr}}
.move-photo{aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; background:#ddd; max-width:420px; margin:0 auto}
.move-photo img{width:100%; height:100%; object-fit:cover}
.move-right .sec-title{font-size:clamp(32px,4.4vw,52px); color:var(--teal); margin-bottom:10px}
.move-right .sub{color:var(--ink-2); font-size:15.5px; margin:0 0 26px}
form .grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px}
@media(max-width:520px){form .grid2{grid-template-columns:1fr}}
form label{display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); font-weight:600; margin-bottom:6px}
form input, form textarea{
  width:100%; padding:12px 14px; border-radius:8px;
  border:1px solid var(--line-strong); background:#fff; color:var(--ink);
  font:inherit; font-size:14px; transition:border-color .2s, box-shadow .2s;
}
form input:focus, form textarea:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-tint)}
form textarea{min-height:100px; resize:vertical}
.form-field{margin-bottom:14px}
form button[type="submit"]{
  margin-top:12px; padding:14px 32px; border-radius:999px; border:none;
  background:var(--teal); color:#fff; font-weight:600; font-size:12.5px;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  transition:background .2s, transform .2s;
}
form button[type="submit"]:hover{background:var(--teal-dark); transform:translateY(-1px)}
.move-note{font-size:11.5px; color:var(--mute); margin-top:22px; text-align:right}

/* ============================================
   FOOTER (teal)
   ============================================ */
footer{background:var(--teal); color:#fff; padding:70px 0 30px}
.footer-top{display:grid; grid-template-columns:1.2fr 1fr .8fr; gap:40px; align-items:flex-start; margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.2)}
@media(max-width:900px){.footer-top{grid-template-columns:1fr; gap:30px}}
.footer-brand{display:flex; align-items:flex-start; gap:18px}
.footer-mark{
  position:relative; width:64px; height:64px;
  display:grid; place-items:center; flex:0 0 auto; margin-top:6px;
}
.footer-mark::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85); background:rgba(255,255,255,.06);
}
.footer-mark::after{
  content:""; position:absolute; inset:6px; border-radius:50%;
  border:1px dashed rgba(255,255,255,.4);
}
.footer-mark .bk{
  position:relative; z-index:1;
  font-family:'DM Serif Text', serif; font-style:italic;
  font-size:26px; line-height:1; color:#fff; letter-spacing:-.02em;
}
.footer-brand-text{display:flex; flex-direction:column}
.footer-brand .fname{
  font-family:'DM Serif Text',serif; font-weight:400; line-height:.95;
  font-size:clamp(34px,3.6vw,52px); letter-spacing:.01em; text-transform:uppercase;
}
.footer-brand .frole{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  margin-top:10px; opacity:.9; font-weight:600;
}
.footer-brand .frole::before{
  content:""; width:18px; height:1px; background:rgba(255,255,255,.5);
}
.footer-nl h4{font-family:'DM Serif Text',serif; font-weight:400; font-size:20px; margin:0 0 12px; color:#fff; line-height:1.3}
.footer-nl form{display:flex; gap:8px; max-width:420px; padding:5px; background:#fff; border-radius:999px}
@media(max-width:520px){.footer-nl form{flex-direction:column; border-radius:var(--radius-lg); padding:12px}}
.footer-nl input{flex:1; padding:11px 16px; border:none; background:transparent; font:inherit; font-size:13px; color:var(--ink); outline:none}
.footer-nl button{padding:11px 20px; border-radius:999px; border:none; background:var(--teal); color:#fff; font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:background .2s}
.footer-nl button:hover{background:var(--teal-dark)}
.footer-logo{text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:10px}
@media(max-width:900px){.footer-logo{align-items:flex-start; text-align:left}}
.footer-logo .exp{
  font-family:'DM Serif Text',serif; font-weight:400; font-size:26px;
  letter-spacing:.04em; text-transform:uppercase;
}
.footer-logo .exp small{display:block; font-size:11px; letter-spacing:.2em; margin-top:4px; opacity:.85}

.footer-links{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-bottom:36px}
@media(max-width:780px){.footer-links{grid-template-columns:1fr 1fr; gap:24px}}
.footer-links h5{font-size:11px; letter-spacing:.2em; text-transform:uppercase; margin:0 0 14px; font-weight:600; opacity:.8}
.footer-links ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px}
.footer-links a{color:rgba(255,255,255,.85); text-decoration:none; font-size:13.5px; transition:color .2s}
.footer-links a:hover{color:#fff}

.footer-fine{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding-top:22px; border-top:1px solid rgba(255,255,255,.2); font-size:11px; color:rgba(255,255,255,.75); line-height:1.6}

.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
</style>