/* ==========================================================================
   Kaci Cook Realtor — stylesheet
   Tokens: blue / white / gray, elegant serif + clean sans
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,500;0,600;0,700;1,500&family=Public+Sans:wght@300;400;500;600;700&display=swap');

:root{
  /* ---- Brand colors: blue / white / gray ---- */
  --navy-950:#0A1826;
  --navy-900:#11253C;
  --navy-800:#1A3455;
  --navy-700:#234269;
  --blue-600:#2E5D8F;
  --blue-500:#3E74AC;
  --blue-400:#5C93C9;
  --blue-300:#8FB6DC;
  --blue-100:#DCE9F6;
  --sky-50:#F4F8FC;
  --dusty-blue:#5E7688;

  --white:#FFFFFF;
  --gray-900:#1E2733;
  --gray-700:#485363;
  --gray-600:#5C6773;
  --gray-500:#7A8494;
  --gray-300:#D6DCE3;
  --gray-200:#E7EBEF;
  --gray-100:#F4F6F8;

  --success:#2E7D5B;
  --gold:#A9803F; /* Emanna credit only — do not use elsewhere */

  /* ---- Semantic ---- */
  --color-bg:var(--white);
  --color-bg-alt:var(--sky-50);
  --color-surface:var(--white);
  --color-text:var(--gray-900);
  --color-text-muted:var(--gray-600);
  --color-border:var(--gray-200);
  --color-primary:var(--navy-900);
  --color-accent:var(--blue-500);

  /* ---- Type ---- */
  --font-serif:'Fraunces', 'Georgia', serif;
  --font-sans:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Spacing scale (4/8 rhythm) ---- */
  --space-1:.5rem;
  --space-2:.75rem;
  --space-3:1rem;
  --space-4:1.5rem;
  --space-5:2rem;
  --space-6:3rem;
  --space-7:4rem;
  --space-8:6rem;
  --space-9:8rem;

  /* ---- Radius / shadow / motion ---- */
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-pill:999px;

  --shadow-sm:0 2px 10px -4px rgba(17,37,60,0.12);
  --shadow-md:0 14px 34px -12px rgba(17,37,60,0.20);
  --shadow-lg:0 28px 60px -18px rgba(17,37,60,0.28);
  --shadow-glow:0 0 0 1px rgba(62,116,172,0.15), 0 18px 40px -14px rgba(46,93,143,0.35);

  --ease:cubic-bezier(.16,.84,.44,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:220ms;
  --dur-base:420ms;
  --dur-slow:700ms;

  --container:1240px;
  --nav-h:84px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--color-text);
  background:var(--color-bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-serif); font-weight:600; line-height:1.15; margin:0; color:var(--navy-900); }
p{ margin:0; line-height:1.7; color:var(--color-text-muted); }
input,textarea,select{ font-family:inherit; font-size:1rem; }
:focus-visible{ outline:2px solid var(--blue-500); outline-offset:3px; border-radius:4px; }
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--space-4); }

@media (min-width:768px){ .container{ padding-inline:var(--space-6); } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-delay:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    transition-delay:0.001ms !important;
    scroll-behavior:auto !important;
  }
  /* The universal rule above is what a full-page reduce-motion pass should
     do — but it was also catching this gentle city-name ticker, stopping it
     dead after a single 32s pass instead of looping (reported as "the
     marquee isn't scrolling forever"). A slow sideways text ticker isn't the
     kind of motion prefers-reduced-motion is meant to suppress, so it gets
     its own higher-specificity exemption here to keep looping. */
  .marquee{ animation-duration:32s !important; animation-iteration-count:infinite !important; }
}

/* ---------- Type helpers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-500);
}
.eyebrow::before{
  content:''; width:28px; height:1px; background:var(--blue-400);
}
.section-head{ max-width:640px; margin-bottom:var(--space-6); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); margin-top:var(--space-2); }
.section-head p{ margin-top:var(--space-3); font-size:1.05rem; }

section{ position:relative; }
.section-pad{ padding-block:var(--space-8); }
@media (max-width:640px){ .section-pad{ padding-block:var(--space-7); } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:1rem 1.9rem;
  border-radius:var(--radius-pill);
  font-weight:600; font-size:.95rem; letter-spacing:.02em;
  border:1px solid transparent;
  transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; flex-shrink:0; }
.btn-primary{ background:var(--blue-500); color:var(--white); box-shadow:var(--shadow-glow); }
.btn-primary:hover{ background:var(--blue-600); transform:translateY(-2px); box-shadow:0 22px 44px -14px rgba(46,93,143,0.5); }
.btn-outline{ background:transparent; border-color:rgba(255,255,255,0.55); color:var(--white); }
.btn-outline:hover{ background:rgba(255,255,255,0.12); border-color:var(--white); transform:translateY(-2px); }
.btn-dark{ background:var(--navy-900); color:var(--white); }
.btn-dark:hover{ background:var(--navy-800); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-ghost{ background:transparent; border-color:var(--gray-300); color:var(--navy-900); }
.btn-ghost:hover{ border-color:var(--blue-400); color:var(--blue-600); background:var(--blue-100); }
.btn-sm{ padding:.7rem 1.3rem; font-size:.85rem; }
.btn-block{ width:100%; }

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--blue-400), var(--blue-600));
  z-index:1000; transition:width 80ms linear;
}

/* ---------- Preloader: keyhole reveal ----------
   Matches the reference exactly: a real keyhole-SHAPED cutout (circle +
   tapered shaft, via clip-path path() with evenodd) sits in a huge dark
   sheet. The actual hero shows through the cutout from frame one — no
   separate icon needed. A short hold, then the whole sheet (cutout
   included) scales up fast from the keyhole's own center, so the straight
   shaft edges sweep across the screen exactly like the reference's diagonal
   wipe, until the hole outgrows the viewport and the sheet is gone. */
.preloader{ position:fixed; inset:0; z-index:2000; overflow:hidden; }
.preloader.is-hidden{ visibility:hidden; pointer-events:none; }

.preloader-shield{
  position:fixed; top:50%; left:50%; width:2400px; height:2400px; margin:-1200px 0 0 -1200px;
  background:var(--navy-950);
  clip-path:path(evenodd, "M0,0 H2400 V2400 H0 Z M1140,1140 A60,60 0 1 0 1260,1140 A60,60 0 1 0 1140,1140 Z M1168,1185 L1232,1185 L1255,1315 L1145,1315 Z");
  transform-origin:1200px 1140px;
  transform:scale(1);
  transition:transform 520ms cubic-bezier(.6,0,.85,.35);
}
.preloader.is-expanding .preloader-shield{ transform:scale(26); }

.preloader-mark{
  position:fixed; top:calc(50% + 130px); left:50%; transform:translate(-50%,0); z-index:1;
  font-family:var(--font-serif); color:var(--white); font-size:1.4rem; letter-spacing:.05em;
  white-space:nowrap; text-align:center; transition:opacity 300ms ease;
}
.preloader-mark span{ display:block; margin-top:.5rem; font-family:var(--font-sans); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,0.55); }
.preloader.is-expanding .preloader-mark{ opacity:0; }

@supports not (clip-path: path("M0,0")){
  /* Fallback for the rare browser without path() clip-path support: a plain
     solid screen that simply fades, instead of a broken/uncut rectangle. */
  .preloader-shield{ clip-path:none; transition:opacity 500ms ease; }
  .preloader.is-expanding .preloader-shield{ transform:none; opacity:0; }
}

/* ---------- Nav ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), height var(--dur-base) var(--ease), backdrop-filter var(--dur-base) var(--ease);
}
.site-nav .container{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
.site-nav.is-scrolled{
  height:72px;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 30px -18px rgba(17,37,60,0.35);
}
.brand{ display:flex; flex-direction:column; line-height:1; gap:.3rem; }
.brand-name{ font-family:var(--font-serif); font-size:1.5rem; font-weight:700; color:var(--white); transition:color var(--dur-base) var(--ease); }
.brand-tag{ font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,0.72); transition:color var(--dur-base) var(--ease); }
.site-nav.is-scrolled .brand-name{ color:var(--navy-900); }
.site-nav.is-scrolled .brand-tag{ color:var(--blue-500); }

.nav-links{ display:none; align-items:center; gap:var(--space-5); }
.nav-links a{
  position:relative; font-size:.92rem; font-weight:500; color:rgba(255,255,255,0.86);
  padding-block:.4rem; transition:color var(--dur-fast) var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--blue-400); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-base) var(--ease);
}
.nav-links a:hover::after, .nav-links a.is-active::after{ transform:scaleX(1); }
.nav-links a:hover, .nav-links a.is-active{ color:var(--white); }
.site-nav.is-scrolled .nav-links a{ color:var(--gray-700); }
.site-nav.is-scrolled .nav-links a:hover, .site-nav.is-scrolled .nav-links a.is-active{ color:var(--navy-900); }

.nav-cta{ display:none; align-items:center; gap:var(--space-3); }
.nav-phone{ display:flex; align-items:center; gap:.5rem; font-weight:600; font-size:.9rem; color:var(--white); transition:color var(--dur-base) var(--ease); }
.nav-phone svg{ width:17px; height:17px; color:var(--blue-300); }
.site-nav.is-scrolled .nav-phone{ color:var(--navy-900); }

@media (min-width:1024px){
  .nav-links{ display:flex; }
  .nav-cta{ display:flex; }
}

.nav-toggle{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; border:none; background:transparent; z-index:60;
}
.nav-toggle span{ width:26px; height:2px; background:var(--white); border-radius:2px; transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.site-nav.is-scrolled .nav-toggle span{ background:var(--navy-900); }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (min-width:1024px){ .nav-toggle{ display:none; } }

.mobile-menu{
  position:fixed; inset:0; z-index:850;
  background:var(--navy-900);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--space-6) var(--space-5);
  transform:translateY(-100%);
  transition:transform var(--dur-slow) var(--ease-in-out);
}
.mobile-menu.is-open{ transform:translateY(0); }
.mobile-menu a{ display:block; font-family:var(--font-serif); font-size:2rem; color:var(--white); padding-block:.6rem; border-bottom:1px solid rgba(255,255,255,0.1); }
.mobile-menu-footer{ margin-top:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3); }
.mobile-menu-footer a{ font-family:var(--font-sans); font-size:1rem; color:var(--blue-300); border:none; }
@media (min-width:1024px){ .mobile-menu{ display:none; } }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  color:var(--white); overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  transform-origin:56% 42%;
  animation:heroZoom 16s var(--ease-in-out) forwards, heroBreathe 22s ease-in-out 16s infinite alternate;
}
@keyframes heroZoom{ from{ transform:scale(1.12); } to{ transform:scale(1.04); } }
@keyframes heroBreathe{ from{ transform:scale(1.04) translate3d(0,0,0); } to{ transform:scale(1.1) translate3d(-1%,-1%,0); } }

/* Home hero: video background, with the still photo kept as the poster/
   reduced-motion fallback. Scoped to .hero specifically so the CTA band
   below (which reuses .hero-media for its own static photo) is unaffected. */
.hero .hero-media video{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.03);
}
.hero .hero-media img{ display:none; animation:none; }
@media (prefers-reduced-motion: reduce){
  .hero .hero-media video{ display:none; }
  .hero .hero-media img{ display:block; animation:none; transform:scale(1.04); }
}
.hero-media::after{
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(6,14,24,0.88) 0%, rgba(6,14,24,0.72) 32%, rgba(6,14,24,0.32) 58%, rgba(6,14,24,0.2) 100%),
    linear-gradient(0deg, rgba(6,14,24,0.9) 0%, rgba(6,14,24,0.25) 34%, rgba(6,14,24,0.05) 55%, rgba(6,14,24,0.55) 100%);
}
/* ambient floating orbs — pure decoration, adds slow drifting motion behind the content */
.hero-orbs{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; transition:transform 500ms var(--ease); }
.hero-orb{
  position:absolute; border-radius:50%; filter:blur(60px); opacity:.5;
  animation:orbDrift 26s ease-in-out infinite alternate;
}
.hero-orb.o1{ width:360px; height:360px; left:-80px; top:12%; background:radial-gradient(circle, rgba(92,147,201,0.55), transparent 70%); animation-duration:24s; }
.hero-orb.o2{ width:280px; height:280px; right:6%; top:52%; background:radial-gradient(circle, rgba(169,128,63,0.35), transparent 70%); animation-duration:30s; animation-delay:-6s; }
.hero-orb.o3{ width:220px; height:220px; left:38%; bottom:-60px; background:radial-gradient(circle, rgba(255,255,255,0.25), transparent 70%); animation-duration:20s; animation-delay:-3s; }
@keyframes orbDrift{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(30px,-24px) scale(1.12); }
  100%{ transform:translate(-24px,18px) scale(0.96); }
}
.hero-inner{ position:relative; z-index:1; width:100%; padding-block:calc(var(--nav-h) + var(--space-6)) var(--space-8); will-change:transform; transition:transform 500ms var(--ease); }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.6rem; padding:.5rem 1rem;
  border:1px solid rgba(255,255,255,0.3); border-radius:var(--radius-pill);
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  background:rgba(255,255,255,0.08); backdrop-filter:blur(6px);
  text-shadow:0 1px 8px rgba(0,0,0,0.4);
}
.hero-eyebrow::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--blue-300);
  box-shadow:0 0 0 0 rgba(92,147,201,0.6); animation:pulseDot 2.2s ease-out infinite;
}
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(92,147,201,0.55); }
  70%{ box-shadow:0 0 0 8px rgba(92,147,201,0); }
  100%{ box-shadow:0 0 0 0 rgba(92,147,201,0); }
}
.hero h1{
  color:var(--white); font-size:clamp(2.6rem, 6vw, 4.6rem); margin-top:var(--space-4);
  max-width:16ch; letter-spacing:-0.01em;
  text-shadow:0 4px 24px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.5);
}
.hero h1 em{ font-style:italic; color:var(--blue-300); }
.hero h1 .word{ display:inline-block; opacity:0; transform:translateY(0.4em); animation:wordUp 700ms var(--ease) forwards; animation-delay:calc(var(--w, 0) * 70ms + 1150ms); }
@keyframes wordUp{ to{ opacity:1; transform:translateY(0); } }
.hero-sub{ margin-top:var(--space-4); max-width:46ch; font-size:1.15rem; color:rgba(255,255,255,0.92); text-shadow:0 2px 14px rgba(0,0,0,0.55); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6); }
.hero-meta{
  margin-top:var(--space-7); display:flex; flex-wrap:wrap; gap:var(--space-6);
  padding-top:var(--space-5); border-top:1px solid rgba(255,255,255,0.25);
}
.hero-meta-item{ display:flex; flex-direction:column; gap:.2rem; }
.hero-meta-item strong{ font-family:var(--font-serif); font-size:1.7rem; color:var(--white); text-shadow:0 2px 10px rgba(0,0,0,0.6); }
.hero-meta-item span{ font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,0.78); text-shadow:0 1px 6px rgba(0,0,0,0.5); }

.scroll-cue{
  position:absolute; bottom:var(--space-4); left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem; z-index:1;
  color:rgba(255,255,255,0.85); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  text-shadow:0 1px 6px rgba(0,0,0,0.6);
  animation:cueFloat 2.6s ease-in-out infinite;
}
@keyframes cueFloat{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,6px); } }
.scroll-cue .dot{ width:1px; height:34px; background:linear-gradient(rgba(255,255,255,0.9), transparent); position:relative; overflow:hidden; }
.scroll-cue .dot::after{ content:''; position:absolute; top:-34px; left:0; width:100%; height:34px; background:var(--white); animation:scrollCue 2.1s var(--ease-in-out) infinite; }
@keyframes scrollCue{ to{ top:34px; } }

@media (prefers-reduced-motion: reduce){
  .hero-media img{ animation:none; transform:scale(1.04); }
  .hero-orb{ animation:none; }
  .hero h1 .word{ animation:none; opacity:1; transform:none; }
  .scroll-cue{ animation:none; }
}

@media (max-width:640px){
  .hero{ align-items:flex-end; }
  .hero-meta{ gap:var(--space-4); }
}

/* ---------- Marquee strip ---------- */
.area-strip{
  background:var(--navy-900); color:var(--white); overflow:hidden;
  padding-block:var(--space-3);
}
.marquee{ display:flex; width:max-content; animation:marquee 32s linear infinite; }
.marquee:hover{ animation-play-state:paused; }
.marquee span{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--font-serif); font-style:italic; font-size:1.05rem;
  color:rgba(255,255,255,0.85); padding-inline:var(--space-4); white-space:nowrap;
}
.marquee span::after{ content:'\2726'; color:var(--blue-400); font-style:normal; margin-left:var(--space-4); font-size:.8rem; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- Reveal animation ---------- */
[data-reveal]{
  opacity:0; transform:translateY(34px);
  transition:opacity 900ms var(--ease), transform 900ms var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
[data-reveal="fade"]{ transform:none; }
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="left"].is-visible{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="right"].is-visible{ transform:translateX(0); }
[data-reveal="scale"]{ transform:scale(0.92); }
[data-reveal="scale"].is-visible{ transform:scale(1); }

.stagger > *{ transition-delay:calc(var(--i, 0) * 90ms); }

/* ---------- About: split editorial layout ----------
   Full-bleed two-column band (no container gutters) — a solid dusty-blue
   copy panel on one side, a full-height photo (with two narrow "peek"
   slivers of other photos at its edges, like a filmstrip) on the other,
   and a small monogram medallion sitting on the seam between them. */
.about-split{ position:relative; display:grid; grid-template-columns:1fr; }
@media (min-width:900px){ .about-split{ grid-template-columns:1fr 1fr; min-height:760px; } }

.about-split-copy{
  background:var(--dusty-blue); display:flex; align-items:center;
  padding:var(--space-8) var(--space-5);
}
@media (min-width:900px){ .about-split-copy{ padding:var(--space-8) var(--space-7); } }
.about-split-inner{ max-width:480px; margin-inline:auto; }
@media (min-width:900px){ .about-split-inner{ margin-inline:0 0 0 auto; max-width:440px; } }

.eyebrow-italic{
  display:block; font-family:var(--font-serif); font-style:italic; font-weight:500;
  font-size:.98rem; color:rgba(255,255,255,0.88); margin-bottom:var(--space-3);
}
.about-statement{
  font-size:clamp(1.5rem,2.4vw,2.05rem); line-height:1.4; color:var(--white); font-weight:500;
}
.about-divider{ width:100%; height:1px; background:rgba(255,255,255,0.35); margin-block:var(--space-5); }
.about-split-copy p{ color:rgba(255,255,255,0.84); font-size:.98rem; line-height:1.8; }
.about-cta{
  margin-top:var(--space-6); display:inline-flex; align-items:center;
  background:rgba(255,255,255,0.94); color:var(--navy-900); border:none;
  padding:1rem 2rem; border-radius:3px; font-size:.74rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.about-cta:hover{ background:var(--white); transform:translateY(-2px); }
.about-license{ margin-top:var(--space-4); font-size:.76rem; letter-spacing:.06em; color:rgba(255,255,255,0.65); }

.about-split-media{ position:relative; display:flex; min-height:420px; }
@media (min-width:900px){ .about-split-media{ min-height:auto; } }
.about-portrait-full{ flex:1; position:relative; overflow:hidden; }
.about-portrait-full img{ width:100%; height:100%; object-fit:cover; }

.about-monogram{
  position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%);
  width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,0.95);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md);
  font-family:var(--font-serif); font-style:italic; font-weight:500; color:var(--navy-900); font-size:1.05rem;
}
@media (max-width:900px){ .about-monogram{ display:none; } }

/* ---------- Stats ---------- */
.stats{ background:var(--navy-900); color:var(--white); }
.stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); text-align:center; }
@media (min-width:768px){ .stats-grid{ grid-template-columns:repeat(4,1fr); } }
.stat h3{ font-size:clamp(2.2rem,4vw,3.2rem); color:var(--white); display:flex; justify-content:center; gap:.15rem; }
.stat-label{ display:block; margin-top:.5rem; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,0.68); }

/* ---------- How I help ---------- */
.help{ background:var(--color-bg-alt); }
.help-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-5); }
@media (min-width:820px){ .help-grid{ grid-template-columns:repeat(3,1fr); } }
.help-card{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; height:420px;
  box-shadow:var(--shadow-sm); transition:box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.help-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-6px); }
.help-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease); }
.help-card:hover img{ transform:scale(1.08); }
.help-card::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,14,24,0) 0%, rgba(6,14,24,0.2) 25%, rgba(6,14,24,0.8) 55%, rgba(6,14,24,0.97) 100%);
}
.help-card-body{
  position:absolute; left:0; right:0; bottom:0; padding:var(--space-5); color:var(--white); z-index:1;
  padding-top:64px;
  background:linear-gradient(180deg, rgba(6,14,24,0) 0%, rgba(6,14,24,0.88) 45%, rgba(6,14,24,0.96) 100%);
}
.help-card-body h3{ color:var(--white); font-size:1.5rem; text-shadow:0 2px 14px rgba(0,0,0,0.7); }
.help-card-body p{ color:rgba(255,255,255,0.9); margin-top:.6rem; font-size:.92rem; text-shadow:0 2px 10px rgba(0,0,0,0.7); }
.help-card-link{ margin-top:var(--space-3); display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:600; color:var(--white); text-shadow:0 2px 10px rgba(0,0,0,0.7); }
.help-card-link svg{ width:16px; height:16px; transition:transform var(--dur-fast) var(--ease); }
.help-card:hover .help-card-link svg{ transform:translateX(4px); }

/* ---------- Listings ---------- */
.listings{ background:var(--color-bg); }

/* ---------- Featured listing spotlight (real, active listing) ---------- */
.listing-spotlight{
  display:grid; grid-template-columns:1fr; gap:0;
  background:var(--white); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-md); margin-bottom:var(--space-7);
}
@media (min-width:820px){ .listing-spotlight{ grid-template-columns:1.1fr 1fr; } }
.spotlight-media{ position:relative; display:block; min-height:280px; overflow:hidden; }
.spotlight-media img{ width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease); }
.listing-spotlight:hover .spotlight-media img{ transform:scale(1.06); }
.spotlight-body{ padding:var(--space-6); display:flex; flex-direction:column; justify-content:center; }
.spotlight-body h3{ font-size:1.7rem; margin-top:.4rem; }
.spotlight-price{ font-family:var(--font-serif); font-size:1.6rem; color:var(--blue-600); margin-top:var(--space-2); }
.spotlight-body .listing-specs{ border-top:none; margin-top:var(--space-3); padding-top:0; }
.spotlight-body p.spotlight-desc{ margin-top:var(--space-3); color:var(--gray-600); font-size:.95rem; }
.spotlight-body .btn{ margin-top:var(--space-5); align-self:flex-start; }
.listing-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-6); }
.filter-chips{ display:flex; flex-wrap:wrap; gap:.6rem; }
.filter-chip{
  padding:.55rem 1.15rem; border-radius:var(--radius-pill); border:1px solid var(--gray-300);
  background:var(--white); font-size:.85rem; font-weight:600; color:var(--gray-700);
  transition:all var(--dur-fast) var(--ease);
}
.filter-chip:hover{ border-color:var(--blue-400); color:var(--blue-600); }
.filter-chip.is-active{ background:var(--navy-900); border-color:var(--navy-900); color:var(--white); }

.listing-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-5); }
@media (min-width:680px){ .listing-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .listing-grid{ grid-template-columns:repeat(3,1fr); } }

.listing-card{
  background:var(--white); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
  display:flex; flex-direction:column;
}
.listing-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-8px); }
.listing-media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.listing-media img{ width:100%; height:100%; object-fit:cover; transition:transform 900ms var(--ease); }
.listing-card:hover .listing-media img{ transform:scale(1.1); }
.listing-tag{
  position:absolute; top:16px; left:16px; padding:.4rem .9rem; border-radius:var(--radius-pill);
  font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--white);
  background:var(--blue-500);
}
.listing-tag[data-status="Pending"]{ background:#8A6220; }
.listing-tag[data-status="Sold"]{ background:var(--gray-600); }
.listing-media::after{
  content:''; position:absolute; inset:auto 0 0 0; height:55%; pointer-events:none;
  background:linear-gradient(to top, rgba(6,14,24,0.72), rgba(6,14,24,0));
}
.listing-price{
  position:absolute; z-index:1; bottom:16px; left:16px; color:var(--white);
  font-family:var(--font-serif); font-size:1.5rem; font-weight:700;
  text-shadow:0 3px 14px rgba(0,0,0,0.45);
}
.listing-body{ padding:var(--space-4) var(--space-4) var(--space-5); display:flex; flex-direction:column; gap:.6rem; flex:1; }
.listing-body h3{ font-size:1.25rem; font-weight:700; }
.listing-loc{ display:flex; align-items:center; gap:.4rem; font-size:.85rem; color:var(--gray-600); }
.listing-loc svg{ width:15px; height:15px; color:var(--blue-500); flex-shrink:0; }
.listing-specs{ display:flex; gap:var(--space-4); padding-top:.9rem; margin-top:.3rem; border-top:1px solid var(--gray-200); }
.listing-specs span{ display:flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--gray-700); font-weight:500; }
.listing-specs svg{ width:16px; height:16px; color:var(--gray-500); }
.listing-more{ margin-top:var(--space-7); text-align:center; }
.listing-note{ margin-top:var(--space-4); font-size:.78rem; color:var(--gray-600); text-align:center; }
.no-listings-msg{ display:none; text-align:center; padding:var(--space-8) 0; color:var(--gray-600); font-size:1.05rem; }

body.modal-open{ overflow:hidden; }

/* ---------- Testimonials ---------- */
.testimonials{ background:var(--color-bg-alt); }
.testimonial-shell{ position:relative; max-width:840px; margin-inline:auto; }
.testimonial-track{ overflow:hidden; }
.testimonial-slides{ display:flex; transition:transform var(--dur-slow) var(--ease-in-out); }
.testimonial-slide{ flex:0 0 100%; padding:var(--space-3); }
.testimonial-card{
  background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg);
  padding:var(--space-6); text-align:center; box-shadow:var(--shadow-sm);
}
.testimonial-quote-icon{ width:40px; height:40px; color:var(--blue-300); margin-inline:auto; }
.testimonial-stars{ display:flex; justify-content:center; gap:.25rem; margin-top:var(--space-3); }
.testimonial-stars svg{ width:18px; height:18px; color:#D9A441; }
.testimonial-text{ font-family:var(--font-serif); font-size:1.35rem; color:var(--navy-900); line-height:1.55; margin-top:var(--space-4); font-style:italic; }
.testimonial-name{ margin-top:var(--space-4); font-weight:700; color:var(--navy-900); }
.testimonial-role{ font-size:.82rem; color:var(--blue-500); letter-spacing:.04em; text-transform:uppercase; margin-top:.2rem; }

.testimonial-nav{ display:flex; align-items:center; justify-content:center; gap:var(--space-4); margin-top:var(--space-5); }
.testimonial-arrow{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--gray-300); background:var(--white);
  display:flex; align-items:center; justify-content:center; color:var(--navy-900);
  transition:all var(--dur-fast) var(--ease);
}
.testimonial-arrow:hover{ background:var(--navy-900); color:var(--white); border-color:var(--navy-900); }
.testimonial-arrow svg{ width:18px; height:18px; }
.testimonial-dots{ display:flex; gap:.5rem; }
.testimonial-dots button{ width:8px; height:8px; border-radius:50%; background:var(--gray-300); border:none; transition:all var(--dur-fast) var(--ease); }
.testimonial-dots button.is-active{ background:var(--blue-500); width:22px; border-radius:4px; }

/* ---------- CTA band ---------- */
.cta-band{ position:relative; color:var(--white); overflow:hidden; }
.cta-band .hero-media img{ animation:none; transform:scale(1.02); }
.cta-band .hero-media::after{ background:linear-gradient(120deg, rgba(10,24,38,0.92) 20%, rgba(17,37,60,0.7) 100%); }
.cta-content{ position:relative; z-index:1; display:grid; gap:var(--space-6); align-items:center; }
@media (min-width:900px){ .cta-content{ grid-template-columns:1.2fr 1fr; } }
.cta-content h2{ color:var(--white); font-size:clamp(2rem,3.6vw,2.8rem); }
.cta-content p{ color:rgba(255,255,255,0.82); margin-top:var(--space-3); max-width:44ch; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-5); }
.cta-card{
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.22); backdrop-filter:blur(10px);
  border-radius:var(--radius-lg); padding:var(--space-5);
}
.cta-card h3{ color:var(--white); font-size:1.3rem; }
.cta-card p{ color:rgba(255,255,255,0.75); margin-top:.5rem; }

/* ---------- Contact ---------- */
.contact{ position:relative; overflow:hidden; }
.contact-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-7); }
@media (min-width:960px){ .contact-grid{ grid-template-columns:0.9fr 1.1fr; } }
.contact-info-list{ display:flex; flex-direction:column; gap:var(--space-4); margin-top:var(--space-5); }
.contact-info-item{ display:flex; align-items:flex-start; gap:var(--space-3); }
.contact-info-item .icon-badge{ width:48px; height:48px; border-radius:50%; background:var(--blue-100); color:var(--blue-600); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-item .icon-badge svg{ width:22px; height:22px; }
.contact-info-item strong{ display:block; color:var(--navy-900); font-size:1rem; }
.contact-info-item a, .contact-info-item span.value{ color:var(--gray-600); font-size:.95rem; }
.contact-info-item a:hover{ color:var(--blue-600); }

.social-row{ display:flex; gap:.7rem; margin-top:var(--space-5); }
.social-btn{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--gray-300);
  display:flex; align-items:center; justify-content:center; color:var(--navy-900);
  transition:all var(--dur-fast) var(--ease);
}
.social-btn svg{ width:19px; height:19px; }
.social-btn:hover{ background:var(--navy-900); border-color:var(--navy-900); color:var(--white); transform:translateY(-3px); }

.contact-form{
  background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius-lg);
  padding:var(--space-6); box-shadow:var(--shadow-md);
}
.form-row{ display:grid; grid-template-columns:1fr; gap:var(--space-4); }
@media (min-width:560px){ .form-row.two{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:.45rem; margin-bottom:var(--space-4); }
.field label{ font-size:.82rem; font-weight:600; color:var(--navy-900); }
.field input, .field textarea{
  padding:.85rem 1rem; border-radius:var(--radius-sm); border:1px solid var(--gray-300);
  background:var(--gray-100); transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.field input:focus, .field textarea:focus{ border-color:var(--blue-500); background:var(--white); outline:none; }
.field textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:.78rem; color:var(--gray-600); margin-top:var(--space-3); }
.form-success{
  display:none; align-items:center; gap:.6rem; background:#EAF6F0; color:var(--success);
  border:1px solid #BFE3D0; padding:.9rem 1.1rem; border-radius:var(--radius-sm); font-size:.9rem; font-weight:500;
  margin-bottom:var(--space-4);
}
.form-success.is-visible{ display:flex; }
.form-success svg{ width:20px; height:20px; flex-shrink:0; }

/* ---------- Section texture ----------
   The plain-white Contact section reads as empty space at this scale. A
   faint dot-grid + one soft blurred color blob adds depth without competing
   with the content sitting on top of it. (About no longer needs this — it's
   now a solid-color split panel, not a plain white block.) */
.contact::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(circle, rgba(46,93,143,0.14) 1.4px, transparent 1.4px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 65% 55% at 50% 0%, black 0%, transparent 78%);
  mask-image:radial-gradient(ellipse 65% 55% at 50% 0%, black 0%, transparent 78%);
}
.contact > .container{ position:relative; z-index:1; }
.contact::after{
  content:''; position:absolute; z-index:0; pointer-events:none; border-radius:50%; filter:blur(70px);
  width:400px; height:400px; left:-140px; bottom:-140px; background:radial-gradient(circle, rgba(92,147,201,0.14), transparent 70%);
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--navy-950); color:rgba(255,255,255,0.7); }
.footer-top{ display:grid; grid-template-columns:1fr; gap:var(--space-6); padding-block:var(--space-8) var(--space-6); }
@media (min-width:768px){ .footer-top{ grid-template-columns:1.3fr 1fr 1fr 1fr; } }
.footer-brand .brand-name{ color:var(--white); }
.footer-brand p{ margin-top:var(--space-3); color:rgba(255,255,255,0.6); max-width:34ch; }
.footer-license{ margin-top:var(--space-2) !important; font-size:.82rem; color:rgba(255,255,255,0.45) !important; }
.footer-col h4{ color:var(--white); font-size:1rem; margin-bottom:var(--space-3); }
.footer-col ul{ display:flex; flex-direction:column; gap:.65rem; }
.footer-col a{ color:rgba(255,255,255,0.62); font-size:.92rem; transition:color var(--dur-fast) var(--ease), padding-left var(--dur-fast) var(--ease); }
.footer-col a:hover{ color:var(--white); padding-left:4px; }
.footer-social{ display:flex; gap:.6rem; margin-top:var(--space-4); }
.footer-social .social-btn{ border-color:rgba(255,255,255,0.2); color:var(--white); }
.footer-social .social-btn:hover{ background:var(--blue-500); border-color:var(--blue-500); }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1);
  padding-block:var(--space-4);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3);
  font-size:.82rem; color:rgba(255,255,255,0.5);
}

.footer-credit-bubble{
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:0.45rem 1.1rem 0.45rem 0.5rem;
  border-radius:999px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  color:rgba(255,255,255,0.8);
  font-size:0.84rem;
  font-weight:500;
  text-decoration:none;
  transition:background 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.footer-credit-bubble:hover, .footer-credit-bubble:focus-visible{
  background:rgba(255,255,255,0.14);
  border-color:rgba(255,255,255,0.32);
  transform:translateY(-1px);
  box-shadow:
    0 10px 28px -12px rgba(0,0,0,0.5),
    0 0 0 1px rgba(169,128,63,0.25),
    0 0 22px 4px rgba(169,128,63,0.45),
    0 0 46px 10px rgba(169,128,63,0.22);
}
.footer-credit-bubble:hover img, .footer-credit-bubble:focus-visible img{ filter:drop-shadow(0 0 6px rgba(169,128,63,0.65)); }
.footer-credit-bubble img{ height:22px; width:auto; display:block; transition:filter 220ms var(--ease); }
.footer-credit-bubble strong{ color:#E4C98A; font-weight:700; }

/* ---------- Back to top ---------- */
.to-top{
  position:fixed; right:var(--space-4); bottom:var(--space-4); z-index:400;
  width:48px; height:48px; border-radius:50%; background:var(--navy-900); color:var(--white);
  display:flex; align-items:center; justify-content:center; border:none; box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--blue-500); }
.to-top svg{ width:20px; height:20px; }