/* ==========================================================================
   William Jusme II — Team Jusme · Orlando & Central Florida
   Design system: the brief's black #0c0c0c (hints of #0f0f0f) and gold
   #c9a24a on warm ivory. Gold fills carry black ink (9.8:1); small gold
   text on light grounds uses the deep shade #8a6a2f (4.8:1). Structure is
   the City Capital / Copper Key / Millennium build (glass header, mega-menu,
   funnels, area guides, Calendly cards, consent-gated map), re-themed, plus
   the LP PACK at the end of this file (generated from _src/lp-pack.css).
   Photo heroes keep a neutral dark veil; content sections stay light, with
   a few black signature bands (process, reels, footer).
   ========================================================================== */

:root {
  --bg: #fbfaf6;
  --bg-raised: #f4f1ea;
  --bg-card: #ffffff;
  --bg-glass: rgba(255,255,255,0.72);
  --bg-glass-strong: rgba(255,255,255,0.88);
  --bg-alt: linear-gradient(180deg, #f9f8f3, #f2efe6);
  --border: #e8e3d7;
  --border-strong: #d6cfbf;

  --ink: #0c0c0c;
  --ink-soft: #383735;
  --ink-muted: #5f5e5a;
  --ink-faint: #8e8d88;

  /* Historical City Capital token names, re-pointed to William:
     --silver*  = DEEP GOLD accent text / icons on light grounds (#8a6a2f = 4.8:1)
     --silver-gradient / --on-silver = the GOLD fill (primary buttons, chips,
                  launcher): #c9a24a running slightly darker, black ink on top
     --champagne = brand GOLD on dark photo backgrounds and black bands
     --orange*  = BLACK fills (secondary moments), white ink */
  --silver: #8a6a2f;
  --silver-light: #a5832f;
  --silver-deep: #070707;
  /* primary fill = gold, running DARKER (never toward cream) */
  --silver-gradient: linear-gradient(90deg, #c9a24a, #b8913f 55%, #b48d3a);
  --on-silver: #0c0c0c;
  --champagne: #c9a24a;
  --gold: #b48d3a;
  --gold-bright: #c9a24a;
  --gold-text: #765a1c;
  --navy: #0c0c0c;
  --black-2: #0f0f0f;

  /* secondary = black; fills run darker, white ink */
  --orange: #0c0c0c;
  --orange-light: #dcd3bd;
  --orange-deep: #171717;
  --orange-gradient: linear-gradient(90deg, #1f1f1e, #171717 55%, #070707);
  --on-orange: #ffffff;

  --yellow: #c9a24a;
  --yellow-light: #e6cf94;
  --yellow-deep: #b48d3a;
  --teal: #0c0c0c;
  --teal-text: #8a6a2f;
  --teal-deep: #070707;
  --green: #0c0c0c;
  --green-deep: #8a6a2f;

  --input-bg: #ffffff;
  --nav-bg: rgba(12,12,12,0.84);
  --shadow: rgba(12,12,12,0.1);
  --quote-mark: rgba(180,141,58,0.22);

  /* Type — General Sans 600 headlines (WDBS rule), Switzer body */
  --font-head: 'General Sans', 'Space Grotesk', 'Neue Montreal', Arial, sans-serif;
  --font-body: 'Switzer', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --max: 1180px;
  --radius: 6px;
  --radius-lg: 14px;
  --radius-pill: 100px;
  --container-max: 1180px;
  --space-3: 1.5rem;

  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  width: 100%;
  background: var(--bg);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.35s ease, color 0.35s ease;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
/* iPhone-safe button defaults (standing rule): pin Chrome's desktop defaults so
   Safari's bigger padding/font never swells icon buttons; classes override. */
button { font-size: 13.333px; line-height: normal; margin: 0; padding: 1px 6px; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
button svg { flex: none; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silver);
  background: rgba(180,141,58,0.08);
  border: 1px solid rgba(180,141,58,0.24);
  border-radius: 999px;
  padding: 7px 16px;
}

.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; margin-top: 14px; }
.section-head p { margin-top: 16px; color: var(--ink-muted); font-size: 16px; line-height: 1.7; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

section { position: relative; padding: 110px 0; }
section.tight { padding: 90px 0; }

/* No dark sections anywhere on the site — .section-dark is kept only so
   older markup referencing the class name doesn't break; it now renders as
   a soft warm-grey "raised" section (one shade off white) for visual
   separation between sections, same as .section-light's alt tone. */
.section-dark, .section-alt {
  --bg: #f5f3ed; --bg-card: #ffffff;
  background: var(--bg); color: var(--ink-soft); border-top: 1px solid var(--border);
}
.section-light {
  --bg: #ffffff; --bg-card: #ffffff;
  background: var(--bg); color: var(--ink-soft); border-top: 1px solid var(--border);
}

.glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(180,141,58,0.12) 0%, rgba(0,0,0,0) 70%);
  z-index: 0;
}

.accent-text {
  background: linear-gradient(115deg, var(--silver-light), var(--silver) 45%, var(--silver-deep), var(--silver) 65%, var(--silver-light));
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: accent-shimmer 5s ease-in-out infinite;
}
@keyframes accent-shimmer { 0% { background-position: 0% center; } 50% { background-position: 100% center; } 100% { background-position: 0% center; } }
@media (prefers-reduced-motion: reduce) { .accent-text { animation: none; } }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
/* Light streak sweep across every gradient (gold) button/CTA — fires once
   on hover only (not a constant idle loop). */
.btn-primary::before, .site-nav__cta::before {
  content: '';
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; overflow: hidden;
  background-image: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%);
  background-repeat: no-repeat;
  background-size: 220% 220%;
  background-position: -80% 50%;
}
.btn-primary:hover::before, .site-nav__cta:hover::before { animation: btn-shine 0.9s ease-out; }
@keyframes btn-shine { 0% { background-position: 180% 50%; } 100% { background-position: -80% 50%; } }
@media (prefers-reduced-motion: reduce) { .btn-primary:hover::before, .site-nav__cta:hover::before { animation: none; } }
.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--silver-deep), var(--silver));
  border: none;
  color: var(--on-silver);
  box-shadow: 0 8px 24px rgba(180,141,58,0.14);
  will-change: transform;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  /* Unique gradient-button treatment: a slow idle "breathing" glow so gold
     CTAs read as alive even before you touch them — pauses on hover, where
     the sharper lift + shine take over instead of fighting it. */
  animation: btn-glow-pulse 3.2s ease-in-out infinite;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(180,141,58,0.24); filter: brightness(1.06); animation-play-state: paused; }
@keyframes btn-glow-pulse { 0%, 100% { box-shadow: 0 8px 24px rgba(180,141,58,0.14); } 50% { box-shadow: 0 10px 32px rgba(180,141,58,0.36); } }
@media (prefers-reduced-motion: reduce) { .btn-primary { animation: none; } }
/* Secondary buttons pair by complement: next to an aqua gradient primary
   the outline is ORANGE (orange border + orange translucent hover sweep);
   next to an orange gradient primary, add .btn-outline-aqua for the aqua
   counterpart. */
.btn-outline {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--ink);
  border-color: rgba(12,12,12,0.32);
  background: rgba(12,12,12,0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* Fill sweeps in from the left on hover (distinct from the gradient
   button's shine/glow), instead of an instant background swap. */
.btn-outline::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(180,141,58,0.16), rgba(180,141,58,0.06));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.35s cubic-bezier(.16,.84,.44,1);
}
.btn-outline:hover { border-color: var(--silver); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(10,10,10,0.14); }
.btn-outline:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .btn-outline::after { transition: none; } }
.btn-outline.btn-outline-aqua { border-color: rgba(180,141,58,0.5); background: rgba(180,141,58,0.04); }
.btn-outline.btn-outline-aqua::after { background: linear-gradient(90deg, rgba(180,141,58,0.18), rgba(180,141,58,0.08)); }
.btn-outline.btn-outline-aqua:hover { border-color: var(--silver); box-shadow: 0 10px 22px rgba(180,141,58,0.16); }
.btn-block { width: 100%; }
.btn-lg { padding: 19px 38px; font-size: 14.5px; }
.btn-sm { padding: 12px 20px; font-size: 13px; }

/* ==========================================================================
   Nav — floating glass-pill header (same structural system as the Centric
   Realty Services build: fixed bar, transparent over the hero, blurred once
   scrolled, logo | pill nav w/ mega-menus | actions, all in three separate
   glass pills). Recolored gold/black for JD Lending Group.
   ========================================================================== */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent; backdrop-filter: none;
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}
.site-nav.is-scrolled {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 12px 30px rgba(10,10,10,0.1);
}
.site-nav__inner {
  max-width: var(--max); margin: 0 auto; padding: 18px 32px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.site-nav__logo { grid-column: 1; justify-self: start; }
.site-nav__pill { grid-column: 2; justify-self: center; }
.site-nav__actions { grid-column: 3; justify-self: end; }

.site-nav__logo { display: inline-flex; align-items: center; gap: 10px; }
.site-nav__logo img { display: block; height: 40px; width: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.site-nav__logo-word { font-family: var(--font-head); font-weight: 700; font-size: 13.5px; letter-spacing: 0.01em; color: var(--ink); line-height: 1.15; }
.site-nav__logo-word span { display: block; font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver); }

.site-nav__pill {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(12,12,12,0.08);
  border-radius: var(--radius-pill);
  padding: 4px 6px;
}
.site-nav.is-scrolled .site-nav__pill,
.site-nav.is-scrolled .site-nav__icon-btn,
.site-nav.is-scrolled .site-nav__toggle { background: rgba(12,12,12,0.04); }
.site-nav__links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; font-size: 13px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.site-nav__links > li { position: relative; }
.site-nav__links > li > a, .site-nav__links > li > button {
  background: none; border: none; color: inherit; font: inherit; cursor: pointer;
  padding: 10px 15px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 5px;
  transition: background 0.2s ease, color 0.2s ease;
}
.site-nav__links a:hover, .site-nav__links button:hover { color: var(--ink); background: rgba(12,12,12,0.06); }
.site-nav__chevron { width: 12px; height: 12px; opacity: 0.7; transition: transform 0.2s ease; }
.site-nav__item.is-open .site-nav__chevron { transform: rotate(180deg); }

.site-nav__actions { display: flex; align-items: center; gap: 10px; }
.site-nav__icon-btn {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 42px; min-width: 42px; padding: 0 12px;
  background: rgba(255,255,255,0.55); border: 1px solid rgba(12,12,12,0.08);
  color: var(--ink-soft); border-radius: var(--radius-pill);
  font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: 0.03em;
  cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.site-nav__icon-btn:hover { border-color: var(--silver); color: var(--silver-deep); background: rgba(12,12,12,0.06); transform: translateY(-1px); }
.site-nav__cta {
  position: relative; overflow: hidden;
  background: var(--silver-gradient); color: var(--on-silver); font-weight: 700; font-size: 12.5px;
  padding: 11px 20px; border-radius: var(--radius-pill); white-space: nowrap;
  box-shadow: 0 8px 22px rgba(180,141,58,0.22);
  will-change: transform;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.site-nav__cta:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(180,141,58,0.32); filter: brightness(1.05); }
.site-nav__call { display: none; }
.site-nav__lang { position: relative; }
.lang-toggle-btn { width: auto; padding: 0 12px; }
.lang-menu {
  display: none; position: absolute; top: calc(100% + 10px); right: 0; min-width: 180px;
  background: rgba(255,255,255,0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 24px 48px rgba(10,10,10,0.16); padding: 6px;
}
.lang-menu.is-open { display: block; }
.lang-menu button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--ink); font-size: 14px; font-weight: 600; font-family: var(--font-body);
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
}
.lang-menu button:hover { background: rgba(12,12,12,0.05); }
.lang-menu button.is-active { color: var(--silver-deep); }

.site-nav__toggle {
  display: none; align-items: center; justify-content: center; width: 42px; height: 42px;
  background: rgba(255,255,255,0.55); border: 1px solid rgba(12,12,12,0.08);
  border-radius: var(--radius-pill); color: var(--ink); cursor: pointer;
}
.site-nav__toggle .icon { width: 20px; height: 20px; }

/* Mega-menus — white glass 2-col dropdown, matches the pill's own glass */
.mega-menu {
  display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: 600px; background: rgba(255,255,255,0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: 0 24px 48px rgba(10,10,10,0.16);
  padding: 10px; grid-template-columns: 1fr 1fr; gap: 4px;
}
.site-nav__item.is-open .mega-menu { display: grid; }
.mega-menu a { display: block; padding: 14px 16px; border-radius: 10px; transition: background 0.2s ease; overflow-wrap: break-word; }
.mega-menu a:hover { background: rgba(12,12,12,0.05); }
.mega-menu a strong { display: block; font-family: var(--font-head); font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px; white-space: nowrap; }
.mega-menu a span { display: block; font-size: 12px; color: var(--ink-faint); line-height: 1.5; }

@media (min-width: 1024px) { .site-nav__call { display: inline-flex; } }

/* Mid-desktop squeeze — smaller laptops / zoomed desktops keep the FULL
   pill nav (tighter type + padding) instead of collapsing to a hamburger.
   Fixes the JD-inherited dead zone where desktop widths under 1180px got
   an empty pill blob + a toggle whose dropdown had no styles. */
@media (max-width: 1360px) and (min-width: 1024px) {
  .site-nav__inner { padding: 16px 20px; gap: 10px; }
  .site-nav__logo .logo-light, .site-nav__logo .logo-dark { height: 40px; }
  .site-nav__links { font-size: 12px; }
  .site-nav__links > li > a, .site-nav__links > li > button { padding: 9px 10px; gap: 4px; }
  .site-nav__actions { gap: 8px; }
  .site-nav__icon-btn { height: 38px; min-width: 38px; padding: 0 10px; }
  .site-nav__cta { font-size: 12px; padding: 10px 14px; }
}

/* Hamburger / dropdown nav — one unified breakpoint. The pill collapses
   entirely (no empty blob) and the toggle opens the frosted dropdown. */
@media (max-width: 1023px) {
  .site-nav__pill { max-width: 0; max-height: 0; overflow: hidden; padding: 0; border: none; background: transparent; }
  .site-nav__pill.is-mobile-open,
  .site-nav.is-scrolled .site-nav__pill.is-mobile-open {
    position: fixed; justify-self: stretch; top: 78px; left: 16px; right: 16px;
    max-width: none; background: rgba(255,255,255,0.98); backdrop-filter: blur(16px);
    border: 1px solid var(--border); border-radius: 20px;
    padding: 10px 10px 14px; max-height: calc(100vh - 100px); overflow-y: auto;
    box-shadow: 0 24px 48px rgba(10,10,10,0.18);
  }
  .site-nav__links { flex-direction: column; align-items: stretch; gap: 2px; font-size: 14.5px; }
  .site-nav__links > li > a, .site-nav__links > li > button { width: 100%; justify-content: space-between; padding: 14px 14px; }
  .mega-menu {
    display: none; position: static; transform: none; width: 100%;
    grid-template-columns: 1fr; box-shadow: none; border: none;
    background: rgba(12,12,12,0.03); margin-bottom: 4px;
  }
  .site-nav__item.is-open .mega-menu { display: grid; }
  .site-nav__toggle { display: flex; }
}
@media (max-width: 640px) {
  .site-nav__inner { padding: 14px 18px; }
  .site-nav__logo-word { display: none; }
  .site-nav__logo img { height: 32px; }
  .site-nav__icon-btn:not(#langToggle) { display: none; }
}

/* ==========================================================================
   Hero — same full-bleed photo + dark scrim treatment as the officer-page
   hero. No floating card — copy sits directly on the photo.
   ========================================================================== */
.hero {
  padding: 168px 0 110px;
  overflow: hidden;
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  color: #fff;
}
.hero .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; position: relative; z-index: 1; max-width: 760px; }

.hero-bg-scene {
  position: absolute; inset: 0; z-index: 0;
  background-color: #0a0a0a;
  background-image: url("/assets/img/home-white-ranch.jpg");
  background-repeat: no-repeat;
  background-position: center 42%;
  /* cover — always fills the section edge-to-edge with no blank/letterbox
     bars, regardless of viewport aspect ratio. The Ken Burns animation
     below still gives it a slow, seamless breathing zoom. */
  background-size: cover;
  filter: blur(3px);
  transform-origin: center center;
  animation: hero-kenburns 24s ease-in-out infinite alternate;
}
@keyframes hero-kenburns {
  0% { transform: scale(1); }
  100% { transform: scale(1.09); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg-scene { animation: none; }
}
/* Neutral translucent scrim — plain black-based glass, no color cast, so
   the photo keeps its true colors while the copy stays readable. */
.hero-bg-overlay {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(0deg, rgba(7,7,7,0.62) 0%, rgba(7,7,7,0.38) 45%, rgba(7,7,7,0.16) 100%),
    rgba(7,7,7,0.08);
}

.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero-copy .eyebrow { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.32); color: #fff; }
.hero-copy h1 { font-size: clamp(38px, 4.8vw, 60px); line-height: 1.08; margin-top: 16px; color: #fff; }
.hero-copy .lede { margin-top: 20px; font-size: 17.5px; color: rgba(255,255,255,0.82); max-width: 560px; line-height: 1.75; }
.hero-actions { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; justify-content: center; }
.hero .btn-outline, .officer-simple-hero .btn-outline, .page-header-photo .btn-outline, .heloc-card-content .btn-outline {
  color: #fff; border-color: rgba(201,162,74,0.6); background: rgba(255,255,255,0.08);
}
.hero .btn-outline:hover, .officer-simple-hero .btn-outline:hover, .page-header-photo .btn-outline:hover, .heloc-card-content .btn-outline:hover {
  border-color: var(--champagne); background: rgba(180,141,58,0.22);
}
.hero .btn-outline.btn-outline-aqua, .officer-simple-hero .btn-outline.btn-outline-aqua, .page-header-photo .btn-outline.btn-outline-aqua, .heloc-card-content .btn-outline.btn-outline-aqua {
  border-color: rgba(180,141,58,0.65); background: rgba(180,141,58,0.12);
}
.hero .btn-outline.btn-outline-aqua:hover, .officer-simple-hero .btn-outline.btn-outline-aqua:hover, .page-header-photo .btn-outline.btn-outline-aqua:hover, .heloc-card-content .btn-outline.btn-outline-aqua:hover {
  border-color: var(--silver-light); background: rgba(180,141,58,0.26);
}
.hero-license { margin-top: 36px; font-size: 12px; color: rgba(255,255,255,0.6); letter-spacing: 0.02em; }
.hero-stats { display: flex; gap: 36px; margin-top: 44px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.2); justify-content: center; }
.hero-stat b { display: block; font-family: var(--font-head); font-size: 24px; font-weight: 600; color: #fff; }
.hero-stat span { font-size: 12.5px; color: rgba(255,255,255,0.65); }

@media (max-width: 900px) {
  .hero { padding: 150px 0 80px; min-height: 82vh; }
  .hero .wrap { text-align: center; align-items: center; }
  .hero-stats { gap: 24px; flex-wrap: wrap; justify-content: center; }
  .hero-copy .lede { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
}

/* ==========================================================================
   Dedicated page header
   ========================================================================== */
.page-header { padding: 128px 0 70px; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.page-header .wrap { position: relative; z-index: 1; }
.page-header-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-faint); margin-bottom: 18px; transition: color 0.2s ease; }
.page-header-back:hover { color: var(--silver-light); }
.page-header h1 { margin-top: 14px; font-size: clamp(30px, 4vw, 46px); line-height: 1.1; }
.page-header p { margin-top: 16px; color: var(--ink-muted); font-size: 16px; max-width: 560px; line-height: 1.7; }

.page-header.center { text-align: center; }
.page-header.center .wrap { display: flex; flex-direction: column; align-items: center; }
.page-header.center h1 { max-width: 680px; }
.page-header.center p { margin-left: auto; margin-right: auto; }

/* Photo page header — exact same treatment as the homepage hero: a
   separate blurred photo layer (::before, reading the --photo custom
   property set inline per page) + dark gradient scrim (::after) + white
   text. Add class="page-header-photo" plus style="--photo:url('...')"
   (kept inline, one per page, rather than a class per photo). */
.page-header-photo { border-bottom: none; background-color: #0a0a0a; padding: 150px 0 84px; color: #fff; }
.page-header-photo::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: var(--photo); background-size: cover; background-position: var(--photo-pos, center);
  filter: blur(3px);
}
.page-header-photo::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(0deg, rgba(7,7,7,0.72) 0%, rgba(7,7,7,0.46) 45%, rgba(7,7,7,0.26) 100%),
    rgba(7,7,7,0.14);
}
.page-header-photo .page-header-back { color: rgba(255,255,255,0.72); }
.page-header-photo .page-header-back:hover { color: var(--silver-light); }
.page-header-photo .eyebrow { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.32); color: #fff; }
.page-header-photo h1, .page-header-photo p { color: #fff; }
.page-header-photo p { color: rgba(255,255,255,0.82); }

/* Translucent variant — same photo layer, but a frosted white-glass scrim
   with dark ink instead of the dark gradient. Add class="ph-light". */
.page-header-photo.ph-light { background-color: var(--bg); color: var(--ink); border-bottom: 1px solid var(--border); }
.page-header-photo.ph-light::after {
  background:
    linear-gradient(0deg, rgba(252,251,248,0.82) 0%, rgba(252,251,248,0.55) 45%, rgba(252,251,248,0.32) 100%),
    rgba(255,255,255,0.08);
}
.page-header-photo.ph-light .page-header-back { color: var(--ink-faint); }
.page-header-photo.ph-light .page-header-back:hover { color: var(--ink); }
.page-header-photo.ph-light .eyebrow { background: rgba(180,141,58,0.12); border-color: rgba(180,141,58,0.3); color: var(--silver); }
.page-header-photo.ph-light h1 { color: var(--ink); }
.page-header-photo.ph-light p { color: var(--ink-soft); }

/* ==========================================================================
   About
   ========================================================================== */
.about-wrap { display: grid; grid-template-columns: 1.05fr 1.15fr; gap: 56px; align-items: start; }
.about-visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  box-shadow: 0 24px 50px var(--shadow);
}
.about-visual img { width: 100%; display: block; }
.about-visual::after {
  content: '';
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: linear-gradient(120deg, transparent 42%, rgba(255,255,255,0.22) 50%, transparent 58%);
  background-repeat: no-repeat;
  background-size: 260% 160%;
  background-position: -60% 50%;
  animation: card-shine 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .about-visual::after { animation: none; } }
.about-visual-badge {
  position: absolute; left: 16px; bottom: 16px; z-index: 3;
  background: rgba(13,13,13,0.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px; padding: 12px 16px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.45);
  display: flex; flex-direction: column; gap: 2px;
}
.about-visual-badge b { font-family: var(--font-head); font-size: 20px; color: #f6f4ef; font-weight: 600; }
.about-visual-badge span { font-size: 10.5px; color: rgba(246,244,239,0.65); letter-spacing: 0.02em; }

.social-icons { display: flex; gap: 12px; margin-top: 24px; }
.social-icon {
  width: 42px; height: 42px; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border-strong);
  background: var(--bg-card);
  color: var(--ink-muted);
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
  transition: transform 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.social-icon:hover {
  color: var(--on-silver);
  background: var(--silver-gradient);
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 12px 26px rgba(180,141,58,0.28), 0 0 1px 1px var(--silver);
}

.about-intro { max-width: 640px; }
.about-intro h2 { margin-top: 14px; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.25; }
.about-intro p { margin-top: 18px; color: var(--ink-muted); font-size: 15.5px; line-height: 1.75; }
.about-credentials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }

@media (max-width: 900px) {
  .about-wrap { grid-template-columns: 1fr; }
  .about-visual { max-width: 380px; }
}
.credential {
  position: relative; overflow: hidden;
  padding: 24px 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.credential::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("/assets/img/home-ranch-lawn.jpg");
  background-size: cover; background-position: center;
  opacity: 0.14; filter: grayscale(1);
  mask-image: linear-gradient(135deg, rgba(0,0,0,0.95) 0%, transparent 58%);
  -webkit-mask-image: linear-gradient(135deg, rgba(0,0,0,0.95) 0%, transparent 58%);
  pointer-events: none;
}
.credential::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(115deg, transparent 42%, rgba(180,141,58,0.16) 50%, transparent 58%);
  background-repeat: no-repeat; background-size: 220% 220%; background-position: -60% -60%;
  opacity: 0; transition: opacity 0.3s ease;
}
.credential:hover::after { opacity: 1; animation: program-shine 1.1s ease-out; }
.credential > * { position: relative; z-index: 2; }
.credential:hover { border-color: rgba(180,141,58,0.4); transform: translateY(-6px) scale(1.015); box-shadow: 0 22px 46px rgba(180,141,58,0.14); }
.credential .num {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%;
  font-family: var(--font-head); color: var(--silver-deep); font-weight: 600; font-size: 13px; margin-bottom: 16px;
  background: rgba(180,141,58,0.1); will-change: transform;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), background 0.35s ease, color 0.35s ease, box-shadow 0.3s ease;
}
.credential:hover .num { transform: scale(1.15) rotate(-12deg); background: var(--silver-gradient); color: var(--on-silver); box-shadow: 0 0 10px 5px rgba(180,141,58,0.15); }
@media (prefers-reduced-motion: reduce) { .credential:hover::after { animation: none; } }
.credential h4 { font-size: 15px; margin-bottom: 8px; }
.credential p { font-size: 13.5px; color: var(--ink-faint); line-height: 1.6; }

@media (max-width: 900px) { .about-credentials { grid-template-columns: 1fr; } }

/* ==========================================================================
   Tilt cards
   ========================================================================== */
.tilt-card { transform-style: preserve-3d; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .tilt-card { transition: none !important; } }

/* ==========================================================================
   Generated background treatments
   ========================================================================== */
.areas-section, .why-section { overflow: hidden; }

.bg-skyline {
  position: absolute; inset: auto 0 0 0; height: 320px; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='320' viewBox='0 0 900 320'%3E%3Cg fill='%23c3c7cd' fill-opacity='0.14'%3E%3Crect x='0' y='140' width='60' height='180'/%3E%3Crect x='70' y='90' width='44' height='230'/%3E%3Crect x='124' y='170' width='50' height='150'/%3E%3Crect x='184' y='60' width='38' height='260'/%3E%3Crect x='230' y='120' width='64' height='200'/%3E%3Crect x='302' y='40' width='34' height='280'/%3E%3Crect x='344' y='160' width='56' height='160'/%3E%3Crect x='408' y='100' width='42' height='220'/%3E%3Crect x='458' y='150' width='60' height='170'/%3E%3Crect x='526' y='70' width='36' height='250'/%3E%3Crect x='570' y='130' width='58' height='190'/%3E%3Crect x='636' y='30' width='40' height='290'/%3E%3Crect x='684' y='150' width='50' height='170'/%3E%3Crect x='742' y='95' width='44' height='225'/%3E%3Crect x='794' y='165' width='54' height='155'/%3E%3Crect x='856' y='110' width='44' height='210'/%3E%3C/g%3E%3Cg fill='%23eef0f2' fill-opacity='0.4'%3E%3Crect x='14' y='160' width='6' height='8'/%3E%3Crect x='30' y='160' width='6' height='8'/%3E%3Crect x='84' y='115' width='6' height='8'/%3E%3Crect x='84' y='140' width='6' height='8'/%3E%3Crect x='198' y='90' width='6' height='8'/%3E%3Crect x='198' y='120' width='6' height='8'/%3E%3Crect x='316' y='70' width='6' height='8'/%3E%3Crect x='316' y='100' width='6' height='8'/%3E%3Crect x='422' y='130' width='6' height='8'/%3E%3Crect x='422' y='160' width='6' height='8'/%3E%3Crect x='540' y='100' width='6' height='8'/%3E%3Crect x='540' y='130' width='6' height='8'/%3E%3Crect x='650' y='60' width='6' height='8'/%3E%3Crect x='650' y='90' width='6' height='8'/%3E%3Crect x='756' y='125' width='6' height='8'/%3E%3Crect x='756' y='155' width='6' height='8'/%3E%3Crect x='870' y='140' width='6' height='8'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: bottom center; background-size: 900px 320px;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.9) 45%, rgba(0,0,0,0.9) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.9) 45%, rgba(0,0,0,0.9) 100%);
}
.bg-mesh {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.7;
  background:
    radial-gradient(600px circle at 12% 8%, rgba(180,141,58,0.09), transparent 55%),
    radial-gradient(500px circle at 88% 82%, rgba(180,141,58,0.07), transparent 55%),
    linear-gradient(180deg, var(--bg-raised) 0%, var(--bg) 100%);
}
.areas-section .wrap, .why-section .wrap { position: relative; z-index: 1; }

/* Reusable faint photo texture for section backgrounds — real-estate/
   deal-closing photos masked down to a soft corner accent so they read as
   texture, not a competing image. Set background-image inline per usage. */
.bg-photo-texture {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center;
  opacity: 0.1; filter: grayscale(0.35);
  mask-image: linear-gradient(120deg, rgba(0,0,0,0.95) 0%, transparent 55%);
  -webkit-mask-image: linear-gradient(120deg, rgba(0,0,0,0.95) 0%, transparent 55%);
}

/* ==========================================================================
   Highlight card — a light gold-tinted gradient card variant (instead of
   plain white) so a few key spots don't read as flat: rich radial glow
   blob, a pinging ring around the icon badge, a 180° icon flip, and
   gradient-text title. Layered on top of an existing card class (e.g.
   .why-card, .credential, .process-card), which still supplies layout/
   spacing — this only reskins color + adds the extra motion. No dark
   background anywhere — same light theme as the rest of the site.
   ========================================================================== */
.highlight-card {
  background: linear-gradient(160deg, #fffffd 0%, #ece8dc 55%, #ffffff 100%) !important;
  border-color: rgba(180,141,58,0.3) !important;
}
.highlight-card::before { background: radial-gradient(180px circle at 50% -10%, rgba(180,141,58,0.18), transparent 70%) !important; }
.highlight-card:hover { border-color: rgba(180,141,58,0.5) !important; box-shadow: 0 30px 60px rgba(10,10,10,0.14), 0 0 44px rgba(180,141,58,0.2) !important; }
.highlight-card h3 {
  background: linear-gradient(90deg, var(--ink), var(--silver-deep) 50%, var(--ink));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.highlight-card p, .highlight-card .officer-bio, .highlight-card .credential p { color: var(--ink-muted) !important; }
.highlight-card::after {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  bottom: -60px; left: -60px; width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, rgba(180,141,58,0.35), transparent 72%);
  filter: blur(18px); opacity: 0.55;
  transition: opacity 0.5s ease, transform 0.6s ease;
}
.highlight-card:hover::after { opacity: 0.95; transform: scale(1.2); }
.highlight-card .why-num, .highlight-card .credential .num, .highlight-card .cred-icon, .highlight-card .process-num {
  background: rgba(180,141,58,0.14) !important; color: var(--silver-deep) !important;
  border-color: rgba(180,141,58,0.35) !important; position: relative;
}
/* .process-num is plain faded text by default (no badge) — give it the
   same circular-badge treatment as .why-num when it's inside a highlight
   card, so the ping ring and flip have something badge-shaped to ring. */
.highlight-card .process-num {
  width: 38px; height: 38px; border-radius: 50%; opacity: 1; margin: 0 0 14px;
  border: 1px solid transparent; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease;
}
.highlight-card .why-num::before, .highlight-card .why-num::after,
.highlight-card .process-num::before, .highlight-card .process-num::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid rgba(180,141,58,0.4); opacity: 0; pointer-events: none;
}
.highlight-card:hover .why-num::before, .highlight-card:hover .process-num::before { animation: highlight-ping 1.6s ease-out infinite; }
.highlight-card:hover .why-num::after, .highlight-card:hover .process-num::after { animation: highlight-ping 1.6s ease-out infinite 0.55s; }
@keyframes highlight-ping { 0% { opacity: 0.7; transform: scale(0.85); } 100% { opacity: 0; transform: scale(1.7); } }
.highlight-card:hover .why-num, .highlight-card:hover .process-num { transform: scale(1.1) rotate(180deg) !important; }
@media (prefers-reduced-motion: reduce) { .highlight-card:hover .why-num::before, .highlight-card:hover .why-num::after { animation: none; } }

/* Refinance's "Our Process" cards use the highlight-card light-gradient +
   gradient-text look, but without any of the glow — no corner blob, no
   glow-spread on hover, no pinging ring behind the number badge. */
.process-card.highlight-card::after { display: none; }
.process-card.highlight-card:hover { box-shadow: 0 30px 60px rgba(10,10,10,0.14) !important; }
.process-card.highlight-card:hover .process-num::before,
.process-card.highlight-card:hover .process-num::after { display: none; }

/* ==========================================================================
   Stat strip
   ========================================================================== */
.stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 56px;
}
.stat-cell { background: var(--bg-card); padding: 30px 20px; text-align: center; }
.stat-cell b { display: block; font-family: var(--font-head); font-size: clamp(28px, 3vw, 36px); font-weight: 700; color: var(--silver-light); }
.stat-cell span { font-size: 12px; color: var(--ink-faint); letter-spacing: 0.01em; }

@media (max-width: 900px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Glow-border cards — "gradient bold card" treatment used sitewide on the
   big card grids (Why Choose Us, Services, Mortgage Basics, Loan Programs,
   Areas, Credentials, Team/Officer directory, Reviews). A conic gradient
   ring spins behind each card and is masked down to a 1.5px border; it
   only becomes visible (and only spins) on hover.
   ========================================================================== */
@property --glow-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.glow-card { position: relative; isolation: isolate; }
.glow-card::before {
  content: '';
  position: absolute; inset: -1.5px; z-index: -1;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--glow-angle),
    transparent 0%, var(--silver-deep) 8%, var(--silver-light) 16%, transparent 26%,
    transparent 74%, var(--silver-light) 84%, var(--silver-deep) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  /* Always spinning (even while invisible) so opacity fading in on hover
     never snaps the ring to a fresh 0deg start — that restart was the
     "glitch right before the transparency" the animation used to have. */
  animation: glow-spin 2.6s linear infinite;
}
.glow-card:hover::before { opacity: 1; }
@keyframes glow-spin { to { --glow-angle: 360deg; } }
.glow-card:hover { box-shadow: 0 26px 52px rgba(180,141,58,0.16); }
@media (prefers-reduced-motion: reduce) { .glow-card::before { animation: none; } .glow-card:hover::before { opacity: 0.7; } }

/* ==========================================================================
   Loan Programs
   ========================================================================== */
.programs-section { overflow: hidden; color: var(--ink-soft); }
.programs-section .wrap { position: relative; z-index: 1; }
.bg-keys {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("/assets/img/aerial-fl.jpg");
  background-repeat: no-repeat; background-position: center; background-size: cover;
  opacity: 0.16; filter: grayscale(0.5);
}
.section-photo-overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(252,251,248,0.88) 0%, rgba(252,251,248,0.96) 100%); }

.programs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.programs-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.programs-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.program-card {
  position: relative; overflow: hidden;
  background: var(--bg-glass-strong);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 30px 26px;
  box-shadow: 0 4px 18px rgba(10,10,10,0.05);
  transition: border-color 0.3s ease, transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s ease, background 0.25s ease;
}
.program-card::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(115deg, transparent 42%, rgba(180,141,58,0.16) 50%, transparent 58%);
  background-repeat: no-repeat; background-size: 220% 220%; background-position: -60% -60%;
  opacity: 0; transition: opacity 0.3s ease;
}
.program-card:hover::before { opacity: 1; animation: program-shine 1.1s ease-out; }
@keyframes program-shine { 0% { background-position: -60% -60%; } 100% { background-position: 160% 160%; } }
.program-card > * { position: relative; z-index: 2; }
.program-card:hover { border-color: rgba(180,141,58,0.4); transform: translateY(-8px) scale(1.015); box-shadow: 0 26px 52px rgba(180,141,58,0.18); }
.program-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(180,141,58,0.18), rgba(180,141,58,0.06));
  display: flex; align-items: center; justify-content: center;
  color: var(--silver-deep); margin-bottom: 20px;
  animation: program-icon-float 4s ease-in-out infinite;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease, background 0.35s ease, color 0.35s ease;
}
@keyframes program-icon-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* Invert on hover: light tint -> solid gold fill, icon flips to white. Ring
   uses a touch of blur (not a hard 0-blur spread) — a hard ring combined
   with border-radius + rotate() is what caused the little dark fleck at
   the rounded corner mid-animation. */
.program-card:hover .program-icon { transform: scale(1.15) rotate(-8deg); box-shadow: 0 0 10px 6px rgba(180,141,58,0.14); animation-play-state: paused; background: var(--silver-gradient); color: var(--on-silver); }
.program-logo { height: 52px; margin-bottom: 20px; display: flex; align-items: center; }
.program-logo img { height: 100%; width: auto; max-width: 180px; object-fit: contain; }
.program-card h3 { font-size: 17px; margin-bottom: 10px; }
.program-card p { font-size: 14px; color: var(--ink-muted); line-height: 1.65; }
@media (prefers-reduced-motion: reduce) { .program-icon { animation: none; } .program-card:hover::before { animation: none; } }

@media (max-width: 900px) { .programs-grid, .programs-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .programs-grid, .programs-grid.cols-4 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Areas Served
   ========================================================================== */
.areas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.area-card {
  position: relative; overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.area-card:hover { transform: translateY(-6px); border-color: rgba(180,141,58,0.4); box-shadow: 0 22px 46px var(--shadow); }
.area-card-image { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.area-card-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(0.25) contrast(1.05);
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1), filter 0.4s ease;
}
.area-card:hover .area-card-image img { transform: scale(1.08); filter: grayscale(0) contrast(1.05); }
.area-card-image::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0) 38%, var(--bg-card) 96%);
}
.area-card-body { position: relative; padding: 24px 26px 30px; }
.area-card .area-tag {
  display: inline-flex; font-family: var(--font-head); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--silver-light);
  background: rgba(180,141,58,0.1); border: 1px solid rgba(180,141,58,0.24);
  border-radius: 999px; padding: 5px 12px; margin-bottom: 16px;
}
.area-card h3 { font-size: 21px; margin-bottom: 10px; }
.area-card p { font-size: 14px; color: var(--ink-muted); line-height: 1.65; }

@media (max-width: 900px) { .areas-grid { grid-template-columns: 1fr; } }

/* legacy compact area cells (used in footer-style listings) */
.areas-grid.compact { grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.areas-grid.compact .area-cell { background: var(--bg-raised); padding: 28px 18px; text-align: center; transition: background 0.25s ease, box-shadow 0.25s ease; position: relative; z-index: 0; }
.areas-grid.compact .area-cell:hover { background: var(--bg-card); box-shadow: inset 0 0 0 1px rgba(180,141,58,0.3), 0 12px 30px rgba(180,141,58,0.08); z-index: 1; }
.areas-grid.compact .area-cell b { display: block; font-family: var(--font-head); font-size: 15px; color: var(--ink); font-weight: 600; }
.areas-grid.compact .area-cell span { font-size: 12px; color: var(--ink-faint); }
@media (max-width: 900px) { .areas-grid.compact { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .areas-grid.compact { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Calculators hub — 3 animated selector cards
   ========================================================================== */
.calc-select-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.calc-select-card {
  position: relative; overflow: hidden; display: block;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 36px 30px 30px; text-decoration: none; color: inherit;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.calc-select-card::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(220px circle at 50% 0%, rgba(180,141,58,0.14), transparent 70%);
  transition: opacity 0.4s ease;
}
.calc-select-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(180,141,58,0.16); }
.calc-select-card:hover::after { opacity: 1; }
.calc-select-card > * { position: relative; z-index: 1; }
.calc-select-icon {
  width: 60px; height: 60px; border-radius: 16px; margin-bottom: 22px;
  display: flex; align-items: center; justify-content: center; color: var(--silver-deep);
  background: linear-gradient(135deg, rgba(180,141,58,0.16), rgba(180,141,58,0.05));
  animation: calc-icon-float 3.6s ease-in-out infinite;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.4s ease, background 0.35s ease, color 0.35s ease;
}
@keyframes calc-icon-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-4deg); } }
/* Invert on hover: light tint -> solid gold fill, icon flips to white. */
.calc-select-card:hover .calc-select-icon { transform: scale(1.12) rotate(6deg); box-shadow: 0 0 10px 6px rgba(180,141,58,0.12); animation-play-state: paused; background: var(--silver-gradient); color: var(--on-silver); }
.calc-select-card h3 { font-size: 18px; margin-bottom: 10px; }
.calc-select-card p { font-size: 14px; color: var(--ink-muted); line-height: 1.65; min-height: 44px; }
.calc-select-cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
  font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--silver-deep);
}
.calc-select-cta svg { transition: transform 0.3s cubic-bezier(.2,.8,.2,1); }
.calc-select-card:hover .calc-select-cta svg { transform: translateX(5px); }
@media (max-width: 900px) { .calc-select-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .calc-select-icon { animation: none; } }

/* ==========================================================================
   Calculator
   ========================================================================== */
.calc-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.calc-form { padding: 44px; }
.calc-result { padding: 44px; background: var(--bg-raised); border-left: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: 12.5px; color: var(--ink-faint); letter-spacing: 0.03em; margin-bottom: 8px; text-transform: uppercase; font-weight: 500; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: var(--radius);
  color: var(--ink); font-size: 15px; font-family: var(--font-body); padding: 13px 14px; outline: none;
  transition: border-color 0.2s ease;
}
.field textarea { resize: vertical; min-height: 90px; font-family: var(--font-body); }
/* 16px minimum on mobile — anything smaller triggers iOS/Android's
   auto-zoom-on-focus behavior. */
@media (max-width: 640px) { .field input, .field select, .field textarea { font-size: 16px; } }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--silver); }

.result-label { font-size: 12.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.result-amount { font-family: var(--font-head); font-size: 46px; font-weight: 600; color: var(--ink); margin: 10px 0 4px; }
.result-amount span { color: var(--silver-light); }
.result-sub { font-size: 13px; color: var(--ink-faint); margin-bottom: 28px; }
.result-breakdown { display: grid; gap: 12px; }
.result-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-muted); padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.result-row b { color: var(--ink-soft); font-weight: 500; }

@media (max-width: 900px) {
  .calc-panel { grid-template-columns: 1fr; }
  .calc-result { border-left: none; border-top: 1px solid var(--border); }
  .field-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Why Choose Jean
   ========================================================================== */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.why-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 36px 26px 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.why-card::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(180px circle at 50% -10%, rgba(180,141,58,0.16), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.why-card:hover { transform: translateY(-6px); border-color: rgba(180,141,58,0.4); box-shadow: 0 20px 44px var(--shadow); }
.why-card:hover::before { opacity: 1; }
.why-card > * { position: relative; z-index: 1; }
.why-num {
  font-family: var(--font-head); font-size: 13px; font-weight: 600; color: var(--silver-deep);
  background: rgba(180,141,58,0.1); width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 22px;
  will-change: transform;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}
/* Invert on hover: light tint -> solid gold fill, icon flips to white. */
.why-card:hover .why-num { transform: scale(1.15) rotate(-10deg); box-shadow: 0 0 10px 5px rgba(180,141,58,0.15); background: var(--silver-gradient); color: var(--on-silver); }
.why-card h3 { font-size: 17px; margin-bottom: 10px; text-align: center; }
.why-card p { font-size: 14px; color: var(--ink-muted); line-height: 1.65; text-align: center; }

@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews-section { background: var(--bg-alt); transition: background 0.35s ease; }
/* overflow-x hidden (horizontal marquee mask) but generous vertical padding
   so a hovered card's lift (-5px) and larger box-shadow never get clipped
   by the viewport edge — the old tight-fit viewport cut cards off top/bottom
   on hover. */
.reviews-viewport {
  overflow-x: hidden; overflow-y: visible; padding: 20px 0 34px;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.reviews-track { display: flex; gap: 20px; width: max-content; animation: reviews-marquee 46s linear infinite; }
.reviews-viewport:hover .reviews-track, .reviews-track.paused { animation-play-state: paused; }
@keyframes reviews-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .reviews-track { animation: none; flex-wrap: wrap; width: 100%; } }
.review-card {
  position: relative; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 30px 28px; display: flex; flex-direction: column; flex: 0 0 380px; width: 380px;
  box-shadow: 0 18px 40px var(--shadow);
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.review-card::after {
  content: '\201D'; position: absolute; top: -18px; right: 14px; z-index: 0;
  font-family: Georgia, serif; font-size: 128px; line-height: 1; color: var(--quote-mark);
  pointer-events: none;
}
.review-card:hover { transform: translateY(-7px) scale(1.015); border-color: rgba(180,141,58,0.4); box-shadow: 0 28px 56px var(--shadow), 0 0 36px rgba(180,141,58,0.12); }
.review-card > * { position: relative; z-index: 1; }

@media (max-width: 900px) { .review-card { flex-basis: 300px; width: 300px; } }
.review-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.review-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--silver-gradient); color: var(--on-silver);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
}
.review-stars { color: var(--silver); font-size: 13px; letter-spacing: 0.14em; }
.review-card p.quote { font-style: italic; font-size: 15.5px; color: var(--ink-soft); line-height: 1.75; flex-grow: 1; }
.review-divider { width: 30px; height: 1px; background: var(--silver); opacity: 0.5; margin: 24px 0 14px; }
.review-who { display: flex; flex-direction: column; gap: 3px; }
.review-who b { font-size: 14px; color: var(--ink); font-weight: 600; }

/* Google reviews summary line + "leave a review" CTA — sits above/below the
   review-card marquee on both the homepage and the dedicated reviews page. */
.reviews-google-summary {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin: 0 auto 6px; font-size: 14px; color: var(--ink-soft);
}
.reviews-google-summary .g-stars { color: var(--silver); font-size: 15px; letter-spacing: 0.1em; }
.reviews-google-summary b { color: var(--ink); font-weight: 700; }
.reviews-google-summary a { color: var(--silver-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.reviews-google-summary a:hover { color: var(--silver); }
.review-google-cta {
  text-align: center; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border);
}
.review-google-cta p { font-size: 14.5px; color: var(--ink-muted); margin-bottom: 16px; }
.review-google-cta .btn svg { flex: none; }
.review-who span { font-size: 12.5px; color: var(--ink-faint); }

/* ==========================================================================
   Homepage final CTA — left copy, right map
   ========================================================================== */
.contact-cta-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; text-align: left; }
.contact-cta-copy .hero-actions { justify-content: flex-start; margin-top: 28px; }
.contact-cta-copy p { margin: 16px 0 0; color: var(--ink-muted); font-size: 15.5px; line-height: 1.75; max-width: 440px; }
.contact-cta-copy h2 { margin-top: 14px; font-size: clamp(26px, 3.2vw, 36px); }
.contact-cta-address {
  display: flex; align-items: center; gap: 10px; margin-top: 28px; padding-top: 24px;
  border-top: 1px solid var(--border); color: var(--ink-muted); font-size: 13.5px;
}
.contact-cta-address svg { flex: none; color: var(--silver); }
.contact-cta-map {
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border);
  box-shadow: 0 24px 50px var(--shadow); aspect-ratio: 4/3; min-height: 320px;
}
@media (max-width: 900px) {
  .contact-cta-wrap { grid-template-columns: 1fr; text-align: center; }
  .contact-cta-copy .hero-actions, .contact-cta-address { justify-content: center; }
  .contact-cta-copy p { margin-left: auto; margin-right: auto; }
  .contact-cta-map { aspect-ratio: 16/9; }
}

/* ==========================================================================
   Hot Leads / Homeowner CTA panel
   ========================================================================== */
.leads-panel {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--bg-card), var(--bg-raised));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg); padding: 64px 56px; text-align: center;
  max-width: 840px; margin: 0 auto;
}
.leads-panel .eyebrow { position: relative; z-index: 1; }
.leads-panel h2 { position: relative; z-index: 1; margin-top: 16px; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.15; max-width: 640px; margin-left: auto; margin-right: auto; }
.leads-panel p { position: relative; z-index: 1; color: var(--ink-muted); margin-top: 18px; font-size: 16px; line-height: 1.75; max-width: 560px; margin-left: auto; margin-right: auto; }
.leads-pills { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.leads-pill {
  display: flex; align-items: center; gap: 8px;
  background: rgba(180,141,58,0.07); border: 1px solid rgba(180,141,58,0.24);
  border-radius: 999px; padding: 9px 16px 9px 12px; font-size: 13px; font-weight: 500; color: var(--ink-soft);
}
.leads-pill svg { color: var(--silver-light); flex-shrink: 0; }
.leads-panel .btn { position: relative; z-index: 1; margin-top: 34px; }

@media (max-width: 700px) { .leads-panel { padding: 44px 26px; } }

/* ==========================================================================
   HELOC feature card — full-bleed photo banner, slow Ken Burns zoom,
   dark scrim, white text. Same photo-card treatment as the hero.
   ========================================================================== */
.heloc-card {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-lg); border: 1px solid var(--border-strong);
  min-height: 420px; display: flex; align-items: center; justify-content: center;
  text-align: center;
  box-shadow: 0 30px 60px var(--shadow);
  transition: transform 0.4s cubic-bezier(.22,.61,.36,1), box-shadow 0.4s ease;
}
.heloc-card:hover { transform: translateY(-4px); box-shadow: 0 40px 76px var(--shadow); }
.heloc-card-bg {
  position: absolute; inset: 0; z-index: 0;
  background-color: #0a0a0a;
  background-image: url("/assets/img/home-blue-porch.jpg");
  background-repeat: no-repeat; background-position: center; background-size: cover;
  filter: blur(3px);
}
.heloc-card-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(0deg, rgba(7,7,7,0.72) 0%, rgba(7,7,7,0.46) 45%, rgba(7,7,7,0.26) 100%),
    rgba(7,7,7,0.14);
}
.heloc-card-content { position: relative; z-index: 2; padding: 56px 48px; max-width: 620px; margin: 0 auto; color: #fff; }
.heloc-card-content .eyebrow { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.32); color: #fff; }
.heloc-card-content h2 { margin-top: 16px; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; color: #fff; }
.heloc-card-content p { margin-top: 16px; font-size: 16px; line-height: 1.75; color: rgba(255,255,255,0.82); }
.heloc-card-content .hero-actions { justify-content: center; margin-top: 30px; }
@media (max-width: 700px) {
  .heloc-card { min-height: 380px; }
  .heloc-card-content { padding: 40px 28px; max-width: 100%; width: 100%; }
}

/* ==========================================================================
   Referral
   ========================================================================== */
.referral-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--bg-card), var(--bg-raised));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 52px 48px 48px;
}
.referral-panel::before {
  content: '';
  position: absolute; top: -140px; right: -110px; z-index: 0;
  width: 340px; height: 340px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(180,141,58,0.14) 0%, rgba(0,0,0,0) 72%);
}
.referral-panel::after {
  content: '';
  position: absolute; bottom: -160px; left: -120px; z-index: 0;
  width: 320px; height: 320px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(180,141,58,0.08) 0%, rgba(0,0,0,0) 72%);
}
.referral-panel > * { position: relative; z-index: 1; }

.referral-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.referral-step { text-align: center; padding: 4px; }
.referral-step-icon {
  width: 54px; height: 54px; margin: 0 auto 20px; border-radius: 14px;
  background: rgba(180,141,58,0.1); border: 1px solid rgba(180,141,58,0.28);
  color: var(--silver-light);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease;
}
.referral-step:hover .referral-step-icon { transform: rotate(-8deg) scale(1.1); box-shadow: 0 0 0 7px rgba(180,141,58,0.08); }
.referral-step .step-num { font-family: var(--font-head); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink-faint); margin-bottom: 10px; }
.referral-step h3 { font-size: 16px; margin-bottom: 10px; color: var(--ink); }
.referral-step p { font-size: 14px; color: var(--ink-muted); max-width: 250px; margin: 0 auto; line-height: 1.6; }

@media (max-width: 700px) { .referral-grid { grid-template-columns: 1fr; gap: 36px; } }

.referral-divider { height: 1px; background: var(--border); margin: 44px 0 34px; }

.referral-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--silver-gradient);
  border-radius: 16px;
  padding: 30px 34px;
}
.referral-cta-left { display: flex; gap: 16px; align-items: flex-start; max-width: 480px; }
.referral-cta-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px;
  background: rgba(0,0,0,0.12); border: 1px solid rgba(0,0,0,0.14);
  color: var(--on-silver); display: flex; align-items: center; justify-content: center;
}
.referral-cta-left strong { display: block; font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--on-silver); margin-bottom: 8px; }
.referral-cta-left p { font-size: 14px; color: var(--on-silver); opacity: 0.78; line-height: 1.6; }
.referral-cta-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.referral-cta-buttons .btn-primary { background: var(--bg); color: var(--ink); box-shadow: none; }
.referral-cta-buttons .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,0.18); }
.referral-cta-buttons .btn-outline { color: var(--on-silver); border-color: rgba(0,0,0,0.22); background: rgba(0,0,0,0.06); }
.referral-cta-buttons .btn-outline:hover { border-color: rgba(0,0,0,0.34); background: rgba(0,0,0,0.1); }

@media (max-width: 700px) {
  .referral-panel { padding: 40px 26px; }
  .referral-cta { align-items: flex-start; }
  .referral-cta-buttons { width: 100%; }
  .referral-cta-buttons .btn { flex: 1; }
}
@media (max-width: 480px) { .referral-cta-buttons { flex-direction: column; } .referral-cta-buttons .btn { width: 100%; } }

/* ==========================================================================
   Contact
   ========================================================================== */
#contact .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: start; }
.contact-info { display: grid; gap: 22px; align-content: start; margin-top: 32px; }
.contact-row { display: flex; gap: 16px; align-items: flex-start; }
.contact-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 9px; background: var(--bg-card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--silver); }
.contact-row h4 { font-size: 14.5px; margin-bottom: 4px; }
.contact-row p, .contact-row a { font-size: 14px; color: var(--ink-muted); }
.contact-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

.contact-form.funnel-embed { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; grid-template-columns: none; }
.funnel-embed .eyebrow { white-space: nowrap; }
.funnel-embed h3 { margin-top: 16px; font-size: 23px; line-height: 1.3; color: var(--ink); }
.funnel-embed > p { margin-top: 10px; color: var(--ink-muted); font-size: 14px; line-height: 1.6; }
.funnel-embed .field { width: 100%; margin-top: 26px; margin-bottom: 0; }
.funnel-embed .field input, .funnel-embed .field select { text-align: left; }
.funnel-embed .btn { width: 100%; margin-top: 16px; }
.funnel-embed-note { margin-top: 16px; font-size: 12.5px; color: var(--ink-faint); text-align: center; }

@media (max-width: 480px) { .funnel-embed .eyebrow { font-size: 9.5px; letter-spacing: 0.05em; padding: 6px 12px; } }
@media (max-width: 900px) { #contact .wrap { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 700px) { .contact-form { grid-template-columns: 1fr; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { border-top: 1px solid var(--border); padding: 64px 0 32px; background: var(--bg); }
.footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 44px; }
.footer-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.footer-logo img { height: 36px; width: auto; }
.footer-logo-word { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: var(--ink); line-height: 1.2; }
.footer-logo-word span { display: block; font-size: 9px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver); }
.footer-brand p { font-size: 13.5px; color: var(--ink-faint); max-width: 320px; line-height: 1.7; margin-bottom: 20px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 1px var(--border-strong);
  background: var(--bg-card); color: var(--ink-muted);
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
  transition: transform 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.footer-social a:hover { color: var(--on-silver); background: var(--silver-gradient); transform: translateY(-3px); box-shadow: 0 0 1px 1px var(--silver); }
.footer-social svg { width: 16px; height: 16px; }
.footer-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); margin-bottom: 16px; }
.footer-col a, .footer-col p { display: block; font-size: 13.5px; color: var(--ink-muted); margin-bottom: 10px; line-height: 1.6; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--ink-faint); line-height: 1.7; }
.footer-bottom .legal { max-width: 700px; }

@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 700px) { .footer-bottom { flex-direction: column; } }

/* ==========================================================================
   Cookie banner — bottom-left consent card (same pattern as Centric)
   ========================================================================== */
.cookie-banner {
  position: fixed; left: 22px; bottom: 22px; z-index: 480; width: 360px; max-width: calc(100vw - 32px);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 20px 44px rgba(0,0,0,0.5); padding: 20px 22px;
  transform: translateY(16px); opacity: 0; pointer-events: none;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
.cookie-banner h4 { font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.cookie-banner h4::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--silver-gradient); flex: none; }
.cookie-banner p { font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); margin-bottom: 16px; }
.cookie-banner__actions { display: flex; gap: 10px; }
.cookie-banner__actions button { flex: 1; padding: 10px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; font-family: var(--font-head); cursor: pointer; transition: transform 0.2s ease; }
.cookie-banner__actions button:hover { transform: translateY(-1px); }
#cookieAccept { background: var(--silver-gradient); color: var(--on-silver); border: none; }
#cookieDecline { background: none; color: var(--ink-muted); border: 1px solid var(--border-strong); }
@media (max-width: 560px) { .cookie-banner { left: 10px; right: 10px; bottom: 10px; width: auto; } }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */
.reveal.pre-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.pre-reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal.pre-reveal .program-card,
.reveal.pre-reveal .why-card,
.reveal.pre-reveal .credential,
.reveal.pre-reveal .referral-step,
.reveal.pre-reveal .area-card,
.reveal.pre-reveal .listing-card,
.reveal.pre-reveal .community-card,
.reveal.pre-reveal .team-card,
.reveal.pre-reveal .perk-card,
.reveal.pre-reveal .service-card,
.reveal.pre-reveal .areas-grid.compact .area-cell {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.pre-reveal.is-visible .program-card,
.reveal.pre-reveal.is-visible .why-card,
.reveal.pre-reveal.is-visible .credential,
.reveal.pre-reveal.is-visible .referral-step,
.reveal.pre-reveal.is-visible .area-card,
.reveal.pre-reveal.is-visible .listing-card,
.reveal.pre-reveal.is-visible .community-card,
.reveal.pre-reveal.is-visible .team-card,
.reveal.pre-reveal.is-visible .perk-card,
.reveal.pre-reveal.is-visible .service-card,
.reveal.pre-reveal.is-visible .areas-grid.compact .area-cell {
  opacity: 1; transform: translateY(0);
}
.programs-grid > :nth-child(1), .why-grid > :nth-child(1), .about-credentials > :nth-child(1), .referral-grid > :nth-child(1), .areas-grid > :nth-child(1), .listings-grid > :nth-child(1), .community-grid > :nth-child(1), .team-grid > :nth-child(1), .perk-grid > :nth-child(1), .services-grid > :nth-child(1) { transition-delay: 0.05s; }
.programs-grid > :nth-child(2), .why-grid > :nth-child(2), .about-credentials > :nth-child(2), .referral-grid > :nth-child(2), .areas-grid > :nth-child(2), .listings-grid > :nth-child(2), .community-grid > :nth-child(2), .team-grid > :nth-child(2), .perk-grid > :nth-child(2), .services-grid > :nth-child(2) { transition-delay: 0.12s; }
.programs-grid > :nth-child(3), .why-grid > :nth-child(3), .about-credentials > :nth-child(3), .referral-grid > :nth-child(3), .areas-grid > :nth-child(3), .listings-grid > :nth-child(3), .community-grid > :nth-child(3), .team-grid > :nth-child(3), .perk-grid > :nth-child(3), .services-grid > :nth-child(3) { transition-delay: 0.19s; }
.programs-grid > :nth-child(4), .why-grid > :nth-child(4), .listings-grid > :nth-child(4), .community-grid > :nth-child(4), .team-grid > :nth-child(4), .perk-grid > :nth-child(4) { transition-delay: 0.26s; }
.programs-grid > :nth-child(5), .listings-grid > :nth-child(5), .community-grid > :nth-child(5), .team-grid > :nth-child(5), .perk-grid > :nth-child(5) { transition-delay: 0.33s; }
.programs-grid > :nth-child(6), .listings-grid > :nth-child(6), .community-grid > :nth-child(6), .team-grid > :nth-child(6), .perk-grid > :nth-child(6) { transition-delay: 0.4s; }
.community-grid > :nth-child(7) { transition-delay: 0.47s; }
.community-grid > :nth-child(8) { transition-delay: 0.54s; }

/* ==========================================================================
   AI Assistant Chat Widget
   ========================================================================== */
.cw { position: fixed; right: 22px; bottom: 22px; z-index: 500; font-family: var(--font-body); }
.cw-launcher { width: 58px; height: 58px; border-radius: 50%; background: var(--silver-gradient); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 14px 32px rgba(0,0,0,0.45), 0 0 2px 1px var(--silver); will-change: transform; transition: transform 0.2s ease; }
.cw-launcher:hover { transform: scale(1.06); }
.cw-launcher-icon, .cw-launcher-avatar { color: var(--on-silver); }
.cw-launcher-avatar { font-family: var(--font-head); font-weight: 700; font-size: 15px; }
.cw-panel { position: absolute; right: 0; bottom: 74px; width: 360px; max-width: calc(100vw - 32px); max-height: min(560px, 70vh); background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 14px 32px rgba(0,0,0,0.45); display: flex; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(12px) scale(0.98); pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; }
.cw.open .cw-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.cw-head { display: flex; align-items: center; gap: 11px; padding: 16px 16px 14px; border-bottom: 1px solid var(--border); }
.cw-avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--silver-gradient); color: var(--on-silver); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-weight: 600; font-size: 13px; }
.cw-head-text { flex: 1; min-width: 0; }
.cw-head-text strong { display: block; font-family: var(--font-head); font-size: 14.5px; font-weight: 600; color: var(--ink); }
.cw-status { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.cw-dot { width: 6px; height: 6px; border-radius: 50%; background: #1f1f1e; display: inline-block; }
.cw-close { background: none; border: none; color: var(--ink-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px; }
.cw-body { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.cw-msg { display: flex; }
.cw-msg-bot { justify-content: flex-start; }
.cw-msg-user { justify-content: flex-end; }
.cw-bubble { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; white-space: pre-line; }
.cw-msg-bot .cw-bubble { background: var(--bg-raised); color: var(--ink); border-bottom-left-radius: 4px; }
.cw-msg-user .cw-bubble { background: var(--silver-gradient); color: var(--on-silver); border-bottom-right-radius: 4px; }
.cw-typing { display: flex; gap: 4px; padding: 10px 13px; background: var(--bg-raised); border-radius: 14px; border-bottom-left-radius: 4px; width: fit-content; }
.cw-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-muted); opacity: 0.5; animation: cwTyping 1s infinite ease-in-out; }
.cw-typing span:nth-child(2) { animation-delay: 0.15s; }
.cw-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes cwTyping { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.cw-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 16px 12px; }
.cw-chip { background: var(--bg-raised); border: 1px solid var(--border); color: var(--ink-soft); font-size: 12px; padding: 7px 11px; border-radius: 100px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; font-family: var(--font-body); }
.cw-chip:hover { background: var(--silver); color: var(--on-silver); border-color: var(--silver); }
.cw-inputrow { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
.cw-input { flex: 1; border: 1px solid var(--border); background: var(--input-bg); color: var(--ink); border-radius: 100px; padding: 10px 14px; font-size: 13.5px; font-family: var(--font-body); outline: none; }
/* 16px minimum on mobile — anything smaller triggers iOS/Android's
   auto-zoom-on-focus behavior. */
@media (max-width: 640px) { .cw-input { font-size: 16px; } }
.cw-input:focus { border-color: var(--silver); }
.cw-send { width: 38px; height: 38px; border-radius: 50%; border: none; flex: none; cursor: pointer; background: var(--silver-gradient); color: var(--on-silver); display: flex; align-items: center; justify-content: center; }
.cw-foot { padding: 11px 16px; border-top: 1px solid var(--border); text-align: center; }
.cw-foot a { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
@media (max-width: 560px) {
  .cw { right: 14px; bottom: 14px; }
  .cw-panel { position: fixed; right: 10px; left: 10px; bottom: 86px; width: auto; max-height: min(72vh, 560px); }
}

/* ==========================================================================
   Qualification Funnel
   ========================================================================== */
.funnel-body { position: relative; overflow-x: hidden; min-height: 100vh; min-height: 100svh; background: var(--bg); color: var(--ink-soft); transition: background-color 0.35s ease, color 0.35s ease; }
.funnel-bg-glow { position: fixed; z-index: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(180,141,58,0.14) 0%, rgba(0,0,0,0) 70%); transition: opacity 0.4s ease; }
.funnel-bg-glow-1 { top: -220px; left: -180px; width: 520px; height: 520px; animation: funnel-drift-1 19s ease-in-out infinite; }
.funnel-bg-glow-2 { bottom: -240px; right: -200px; width: 580px; height: 580px; background: radial-gradient(circle, rgba(180,141,58,0.1) 0%, rgba(0,0,0,0) 70%); animation: funnel-drift-2 23s ease-in-out infinite; }
.funnel-bg-glow-3 { top: 45%; left: 50%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(180,141,58,0.07) 0%, rgba(0,0,0,0) 70%); animation: funnel-drift-3 27s ease-in-out infinite; }
@keyframes funnel-drift-1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(70px, 50px); } }
@keyframes funnel-drift-2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-60px, -40px); } }
@keyframes funnel-drift-3 { 0%, 100% { transform: translate(-50%, 0) scale(1); } 50% { transform: translate(-50%, -50px) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .funnel-bg-glow-1, .funnel-bg-glow-2, .funnel-bg-glow-3 { animation: none; } }

/* Animated dot-grid so the light background still feels alive. */
.funnel-grid {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 1;
  background-image: radial-gradient(rgba(12,12,12,0.09) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: funnel-grid-drift 40s linear infinite;
}
@keyframes funnel-grid-drift { from { background-position: 0 0; } to { background-position: 140px 140px; } }
@media (prefers-reduced-motion: reduce) { .funnel-grid { animation: none; } }

/* Floating real-estate / money icons drifting behind every funnel — houses,
   keys, dollar signs, calculators. Each .funnel-float-icon gets a random-ish
   position/size/delay inline from the page; this just handles the drift. */
.funnel-floats { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.funnel-float-icon {
  position: absolute; color: var(--silver); opacity: 0.16;
  animation: funnel-float-drift 14s ease-in-out infinite;
}
@keyframes funnel-float-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-26px) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) { .funnel-float-icon { animation: none; } }

.funnel-nav, .funnel-wrap { position: relative; z-index: 1; }
.funnel-nav { padding: 22px 0; border-bottom: 1px solid var(--border); }
.funnel-nav .wrap { display: flex; align-items: center; justify-content: space-between; }
.funnel-logo { display: inline-flex; align-items: center; gap: 9px; }
.funnel-logo img { height: 32px; width: auto; }
.funnel-logo span { font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--ink); }
.funnel-nav-right { display: flex; align-items: center; gap: 12px; }
.funnel-nav-right .site-nav__lang { position: relative; }
.funnel-exit { font-size: 13px; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s ease; }
.funnel-exit:hover { color: var(--ink); }
@media (max-width: 420px) {
  .funnel-nav-right { gap: 8px; }
  .funnel-nav-right .site-nav__icon-btn { height: 38px; min-width: 38px; padding: 0 10px; }
}

.funnel-wrap { max-width: 620px; margin: 0 auto; padding: 48px 24px 100px; }
.funnel-progress { width: 100%; height: 4px; border-radius: 999px; background: var(--border); overflow: hidden; margin-bottom: 14px; }
.funnel-progress-bar { height: 100%; width: 16.66%; background: var(--silver-gradient); transition: width 0.4s ease; }
.funnel-step-label { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 36px; text-align: center; }

.funnel-card { position: relative; min-height: 360px; }
.funnel-step { display: none; text-align: center; animation: funnel-step-in 0.45s ease; }
.funnel-step.is-active { display: block; }
@keyframes funnel-step-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .funnel-step { animation: none; } }

.funnel-step .eyebrow {
  display: inline-flex; font-family: var(--font-head); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver-light);
  background: rgba(180,141,58,0.09); border: 1px solid rgba(180,141,58,0.26);
  border-radius: 999px; padding: 7px 16px; margin-bottom: 18px;
}
.funnel-step h2 { font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: clamp(22px, 3vw, 30px); line-height: 1.25; }
.funnel-sub { margin-top: 12px; color: var(--ink-muted); font-size: 15px; line-height: 1.6; }

.funnel-step .field { margin-top: 24px; }
.funnel-step .field label { display: block; font-size: 12.5px; color: var(--ink-faint); letter-spacing: 0.03em; margin-bottom: 8px; text-transform: uppercase; font-weight: 500; }
.funnel-step .field input {
  width: 100%; background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 6px; color: var(--ink);
  font-size: 16px; font-family: var(--font-body); padding: 15px 16px; outline: none; text-align: center;
  transition: border-color 0.2s ease;
}
.funnel-step .field input:focus { border-color: var(--silver); }
.funnel-step .btn { margin-top: 28px; }

.funnel-choices { display: grid; gap: 12px; margin-top: 28px; }
.funnel-choice {
  text-align: center; padding: 18px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  color: var(--ink-soft); font-family: var(--font-body); font-size: 15.5px; font-weight: 500; cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.funnel-choice:hover { border-color: rgba(180,141,58,0.4); transform: translateX(2px); }
.funnel-choice.is-selected { border-color: var(--silver); background: rgba(180,141,58,0.1); color: var(--ink); }

.funnel-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }
.funnel-chip {
  padding: 11px 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px;
  color: var(--ink-soft); font-family: var(--font-body); font-size: 14px; font-weight: 500; cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.funnel-chip:hover { border-color: rgba(180,141,58,0.4); }
.funnel-chip.is-selected { border-color: var(--silver); background: var(--silver-gradient); color: var(--on-silver); }

.funnel-back { display: inline-block; margin-top: 20px; background: none; border: none; color: var(--ink-faint); font-size: 13.5px; font-family: var(--font-body); cursor: pointer; transition: color 0.2s ease; }
.funnel-back:hover { color: var(--ink-soft); }

.funnel-step-final { text-align: center; }
.funnel-success { max-width: 480px; margin: 0 auto 32px; }
.funnel-success-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 50%; background: var(--silver-gradient); color: var(--on-silver); }
.funnel-step-final .funnel-sub { max-width: 420px; margin-left: auto; margin-right: auto; }
.calendly-inline-widget { border-radius: 12px; overflow: hidden; background: var(--bg-raised); }
.funnel-note { margin-top: 20px; font-size: 13px; color: var(--ink-faint); }
.funnel-note a { color: var(--silver-light); }

@media (max-width: 560px) {
  .funnel-wrap { padding: 32px 18px 80px; }
  .funnel-choice { padding: 16px 18px; font-size: 15px; }
}

/* ==========================================================================
   Services (homepage) — matches old jdlendings.com's icon-circle row
   ========================================================================== */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.service-card {
  position: relative; overflow: hidden;
  text-align: center; padding: 36px 26px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color 0.3s ease, transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s ease;
}
.service-card::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: linear-gradient(115deg, transparent 42%, rgba(180,141,58,0.14) 50%, transparent 58%);
  background-repeat: no-repeat; background-size: 220% 220%; background-position: -60% -60%;
  opacity: 0; transition: opacity 0.3s ease;
}
.service-card:hover::before { opacity: 1; animation: program-shine 1.1s ease-out; }
.service-card > * { position: relative; z-index: 2; }
.service-card:hover { border-color: rgba(180,141,58,0.4); transform: translateY(-8px) scale(1.015); box-shadow: 0 26px 52px rgba(180,141,58,0.14); }
.service-icon {
  width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 20px;
  background: var(--silver-gradient); color: var(--on-silver);
  display: flex; align-items: center; justify-content: center;
  animation: program-icon-float 4s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease;
}
.service-card:hover .service-icon { transform: scale(1.1) rotate(-6deg); box-shadow: 0 0 0 9px rgba(180,141,58,0.1); animation-play-state: paused; }
.service-icon svg { width: 30px; height: 30px; }
.service-card h3 { font-size: 17px; margin-bottom: 10px; }
.service-card p { font-size: 14px; color: var(--ink-muted); line-height: 1.65; margin-bottom: 18px; }
@media (prefers-reduced-motion: reduce) { .service-icon { animation: none; } .service-card:hover::before { animation: none; } }

@media (max-width: 900px) { .services-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Team / Loan Officers grid + individual bio cards
   ========================================================================== */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.team-card {
  position: relative; overflow: hidden; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.team-card:hover { border-color: rgba(180,141,58,0.4); transform: translateY(-6px); box-shadow: 0 24px 48px rgba(180,141,58,0.12); }
.team-card-photo { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.team-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; display: block; transition: transform 0.4s ease; }
.team-card:hover .team-card-photo img { transform: scale(1.05); }
.team-card-body { padding: 20px 22px 24px; }
.team-card-body h3 { font-size: 17px; margin-bottom: 4px; }
.team-card-role { font-size: 12px; color: var(--silver-light); font-weight: 600; letter-spacing: 0.02em; margin-bottom: 10px; display: block; }
.team-card-nmls { font-size: 11.5px; color: var(--ink-faint); margin-bottom: 14px; }
.team-card-links { display: flex; gap: 8px; }
.team-card-links a, .team-card-links .primary {
  display: block; flex: 1; text-align: center; padding: 9px 10px; border-radius: 10px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border-strong); color: var(--ink-soft); transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.team-card-links a.primary, .team-card-links .primary { background: var(--silver-gradient); color: var(--on-silver); border: none; padding: 10px 11px; }
.team-card-links a:hover { border-color: var(--silver); }
.team-card[href] { text-decoration: none; color: inherit; cursor: pointer; }

@media (max-width: 980px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .team-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; } }

/* Individual loan-officer bio page */
/* Exact same treatment as the homepage hero: a separate blurred photo
   layer + dark gradient scrim + white text (blur lives on its own layer
   so it never blurs the copy on top of it). Pill is deliberately simple —
   just role + NMLS, no name (the name is already in the back-link's page
   and the headline below). A small translucent NMLS badge floats in the
   bottom-left corner instead of repeating the number in the About meta
   row. No "founder" framing — every officer gets the exact same
   treatment. */
.officer-simple-hero { text-align: center; padding: 156px 0 92px; position: relative; overflow: hidden; color: #fff; }
.officer-simple-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-color: #0a0a0a;
  background-image: url("/assets/img/home-gray-two-story.jpg");
  background-repeat: no-repeat; background-position: center 62%; background-size: cover;
  filter: blur(3px);
}
/* Alternate relatable-home hero photo for agents who share a page template
   with others (Milca, Renel) — keeps every agent from reusing the exact
   same background image. Same neutral translucent scrim either way. */
.officer-simple-hero-bg--alt {
  background-image: url("/assets/img/home-stucco-palms.jpg");
  background-position: center 55%;
}
.officer-simple-hero-scrim {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(0deg, rgba(7,7,7,0.72) 0%, rgba(7,7,7,0.46) 45%, rgba(7,7,7,0.26) 100%),
    rgba(7,7,7,0.14);
}
.officer-simple-hero .bg-mesh { display: none; }
.officer-simple-hero .wrap { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.officer-simple-hero .page-header-back { color: rgba(255,255,255,0.7); margin-bottom: 8px; }
.officer-simple-hero .page-header-back:hover { color: var(--silver-light); }
.officer-simple-role {
  display: inline-flex; font-family: var(--font-head); font-size: 12.5px; font-weight: 700;
  color: #fff; letter-spacing: 0.04em; text-transform: uppercase;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; padding: 7px 16px;
}
.officer-simple-hero h1 { font-size: clamp(30px, 3.8vw, 44px); margin-top: 16px; color: #fff; }
.officer-simple-tagline { margin-top: 16px; max-width: 520px; color: rgba(255,255,255,0.82); font-size: 16px; line-height: 1.75; }
.officer-simple-hero .hero-actions { margin-top: 28px; justify-content: center; }

@media (max-width: 560px) { .officer-simple-hero { padding: 130px 0 64px; } }

/* NMLS badge — sits in the bottom-left corner of the About photo (not the
   hero), same dark-glass treatment as .about-visual-badge regardless of
   the photo's own colors. */
.officer-nmls-badge {
  position: absolute; right: 16px; bottom: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(13,13,13,0.55); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px; padding: 9px 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; color: #fff;
  box-shadow: 0 14px 32px rgba(0,0,0,0.35);
}
.officer-nmls-badge svg { width: 14px; height: 14px; color: var(--silver-light); flex: none; }

/* Team-card NMLS badge — small glass pill in the bottom-right corner of
   each real agent's photo on team.html (distinct from the top-right
   WhatsApp/email overlay). Recruiting/placeholder cards don't get one. */
.team-card-nmls-badge {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  background: rgba(13,13,13,0.6); border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px; padding: 6px 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* Officer About photo — the glow-card ring runs continuously (not just on
   hover) so the outline is always visible and looping. */
.officer-about-wrap .about-visual.glow-card::before { opacity: 1; }

/* About — same two-column layout language as the homepage About / About Us
   page: photo one side, bio + credentials + socials on the other. */
.officer-about-wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: center; }
.officer-about-wrap .about-visual { margin: 0; }
@media (max-width: 900px) {
  .officer-about-wrap { grid-template-columns: 1fr; }
  .officer-about-wrap .about-visual { max-width: 380px; margin: 0 auto; }
  .officer-about-wrap .about-copy { text-align: center; }
  .officer-about-wrap .officer-meta { justify-content: center; }
  .officer-about-wrap .social-icons { justify-content: center; }
}
.officer-meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--border); }
.officer-meta-item { display: flex; align-items: center; gap: 12px; }
.officer-meta-item svg {
  width: 22px; height: 22px; padding: 9px; box-sizing: content-box; flex: none;
  color: var(--silver-deep); background: rgba(180,141,58,0.1); border: 1px solid rgba(180,141,58,0.22);
  border-radius: 12px;
}
.officer-meta-item div { font-size: 13.5px; line-height: 1.4; }
.officer-meta-item span { display: block; font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.officer-bio { color: var(--ink-muted); font-size: 15.5px; line-height: 1.8; }
.officer-bio p { margin-bottom: 16px; color: inherit; }

/* Get In Touch — real contact form that mailto:s the exact officer */
.officer-contact-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: center; text-align: left; }
.officer-contact-copy p { margin-top: 16px; color: var(--ink-muted); font-size: 15.5px; line-height: 1.75; max-width: 420px; }
.officer-contact-copy .hero-actions { margin-top: 26px; justify-content: flex-start; }
.officer-contact-form {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 36px; box-shadow: 0 24px 50px var(--shadow);
}
.officer-contact-form .field-row { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) {
  .officer-contact-wrap { grid-template-columns: 1fr; text-align: center; }
  .officer-contact-copy p { margin-left: auto; margin-right: auto; }
  .officer-contact-copy .hero-actions { justify-content: center; }
}
@media (max-width: 560px) { .officer-contact-form .field-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Process timeline (Loan Process page + homepage "Our Process")
   ========================================================================== */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.process-card {
  position: relative; overflow: hidden; padding: 28px 24px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color 0.3s ease, transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s ease;
}
.process-card > * { position: relative; z-index: 2; }
.process-card:hover { border-color: rgba(180,141,58,0.4); transform: translateY(-8px) scale(1.02); box-shadow: 0 26px 52px rgba(180,141,58,0.14); }
.process-num {
  width: 46px; height: 46px; border-radius: 50%; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--silver-deep);
  background: rgba(180,141,58,0.1);
  will-change: transform;
  transition: transform 0.4s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease, background 0.35s ease, color 0.35s ease;
}
/* Invert on hover: light tint -> solid gold fill, number flips to white. */
.process-card:hover .process-num { transform: scale(1.15) rotate(360deg); box-shadow: 0 0 10px 5px rgba(180,141,58,0.15); background: var(--silver-gradient); color: var(--on-silver); }
.process-card h3 { font-size: 16px; margin-bottom: 10px; }
.process-card p { font-size: 13.5px; color: var(--ink-muted); line-height: 1.65; }
@media (prefers-reduced-motion: reduce) { .process-card:hover::before { animation: none; } }
@media (max-width: 900px) { .process-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Process — 3D scroll stack (variant A). A sticky-pinned viewport where
   each card owns a slice of the wrapper's scroll range: cards fan out at
   rest, square up as scroll begins, then peel away one by one; the final
   card settles and stays. Driven by JS in script.js (.stack-scroll).
   ========================================================================== */
.stack-scroll { position: relative; }
.stack-sticky { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.stack-container { position: relative; width: min(480px, 88vw); height: min(420px, 60vh); perspective: 1200px; }
.stack-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 42px 40px; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--bg-card);
  box-shadow: 0 30px 60px var(--shadow);
  will-change: transform, opacity; backface-visibility: hidden;
}
.stack-num {
  width: 56px; height: 56px; border-radius: 50%; background: var(--silver-gradient);
  display: flex; align-items: center; justify-content: center; color: var(--on-silver);
  font-family: var(--font-head); font-weight: 700; font-size: 18px; margin-bottom: 22px;
  position: relative; flex: none;
}
.stack-num::before, .stack-num::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--silver); opacity: 0; pointer-events: none; }
.stack-card h3 { font-size: 21px; margin-bottom: 12px; }
.stack-card p { color: var(--ink-muted); line-height: 1.65; max-width: 360px; font-size: 14.5px; }
.stack-progress { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; }
.stack-progress span { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); transition: background 0.3s ease, transform 0.3s ease; }
.stack-progress span.active { background: var(--silver); transform: scale(1.3); }
@keyframes closing-ring { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
.stack-card.is-final.is-done .stack-num::after { animation: closing-ring 1.3s ease-out 0.1s; }
.stack-card.is-final.is-done .stack-num::before { animation: closing-ring 1.3s ease-out 0.35s; }
@media (max-width: 640px) { .stack-card { padding: 32px 26px; } .stack-card h3 { font-size: 18px; } .stack-card p { font-size: 13.5px; } }
@media (prefers-reduced-motion: reduce) {
  .stack-sticky { position: relative; height: auto; padding: 20px 0; }
  .stack-container { height: auto; perspective: none; display: flex; flex-direction: column; gap: 16px; }
  .stack-card { position: relative; inset: auto; transform: none !important; opacity: 1 !important; }
}

/* ==========================================================================
   Process — morphing card stack (variant B, used on Loan Process). A
   click/auto-advance stack (not scroll-linked): the front card "morphs"
   away — scales down, rotates and slides sideways while fading — to
   reveal the next one, looping. Distinct feel from the scroll-stack above.
   ========================================================================== */
.morph-stack { position: relative; width: min(560px, 92vw); height: min(360px, 52vh); margin: 0 auto; }
.morph-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 40px 44px; border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: var(--bg-card); box-shadow: 0 26px 52px var(--shadow);
  transition: transform 0.65s cubic-bezier(.22,.8,.25,1), opacity 0.55s ease, filter 0.55s ease;
  transform-origin: 80% 50%;
}
.morph-card .stack-num { margin-bottom: 18px; }
.morph-card h3 { font-size: 20px; margin-bottom: 10px; }
.morph-card p { color: var(--ink-muted); line-height: 1.65; font-size: 14.5px; max-width: 420px; }
.morph-card.is-active { transform: translate(0,0) rotate(0deg) scale(1); opacity: 1; z-index: 3; filter: blur(0); }
.morph-card.is-next { transform: translate(18px, 14px) rotate(2deg) scale(0.96); opacity: 0.55; z-index: 2; filter: blur(0.5px); }
.morph-card.is-behind { transform: translate(30px, 26px) rotate(4deg) scale(0.92); opacity: 0; z-index: 1; }
.morph-card.is-leaving { transform: translate(-70px, -34px) rotate(-14deg) scale(0.82); opacity: 0; z-index: 4; filter: blur(1px); }
.morph-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.morph-dots button {
  width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: var(--border-strong); transition: background 0.25s ease, transform 0.25s ease;
}
.morph-dots button.active { background: var(--silver); transform: scale(1.35); }
@media (max-width: 640px) { .morph-card { padding: 30px 26px; } }
@media (prefers-reduced-motion: reduce) { .morph-card { transition: opacity 0.3s ease; } }

/* ==========================================================================
   Process — blur-reveal scroll deck (variant C, used on Loan Process). A
   third distinct take: purely scroll-driven like variant A (never moves on
   its own), but instead of fanning/peeling, up to 3 cards stack with depth
   behind the active one, and the active card's copy blur-reveals in while
   a rotating glow-ring border traces its edge. Ported from the same
   component used on Wade Darius's site, retuned to JD's gold palette.
   ========================================================================== */
.deck-scroll { position: relative; height: 380vh; }
@media (max-width: 700px) { .deck-scroll { height: 320vh; } }
.deck-pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.deck-wrap { position: relative; width: min(560px, 88vw); height: min(460px, 62vh); }
.deck-card {
  position: absolute; inset: 0; box-sizing: border-box;
  border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-card);
  box-shadow: 0 24px 50px var(--shadow); padding: clamp(26px, 4vw, 40px);
  transform-origin: top center;
  transition: transform 0.7s cubic-bezier(.22,.61,.36,1), opacity 0.7s cubic-bezier(.22,.61,.36,1);
}
.deck-card[data-pos="active"] { transform: translateY(0) scale(1); opacity: 1; z-index: 5; }
.deck-card[data-pos="next1"] { transform: translateY(16px) scale(0.95); opacity: 0.55; z-index: 4; }
.deck-card[data-pos="next2"] { transform: translateY(30px) scale(0.9); opacity: 0.28; z-index: 3; }
.deck-card[data-pos="hidden-ahead"] { transform: translateY(42px) scale(0.86); opacity: 0; z-index: 2; }
.deck-card[data-pos="passed"] { transform: translateY(-120%) rotate(-6deg) scale(0.96); opacity: 0; z-index: 1; transition: transform 0.4s cubic-bezier(.4,0,.7,1), opacity 0.34s ease-out; }
.deck-card-top { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.deck-card .stack-num { margin-bottom: 0; }
.deck-bar { height: 6px; width: 32px; border-radius: 100px; background: var(--silver); transform: scaleX(0); transform-origin: left center; transition: transform 0.55s cubic-bezier(.33,1,.68,1) 0.05s; }
.deck-card[data-pos="active"] .deck-bar { transform: scaleX(1); }
.deck-card h3, .deck-card p { position: relative; z-index: 1; filter: blur(6px); opacity: 0; transform: translateY(8px); transition: filter 0.5s cubic-bezier(.22,.61,.36,1), opacity 0.5s cubic-bezier(.22,.61,.36,1), transform 0.5s cubic-bezier(.22,.61,.36,1); }
.deck-card h3 { margin: 20px 0 10px; font-size: clamp(1.1rem, 2.2vw, 1.35rem); }
.deck-card p { color: var(--ink-muted); line-height: 1.6; font-size: 15px; transition-delay: 0.08s; }
.deck-card[data-pos="active"] h3, .deck-card[data-pos="active"] p { filter: blur(0); opacity: 1; transform: translateY(0); }
.deck-steps { position: relative; z-index: 1; list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.deck-steps li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-soft); opacity: 0; transform: translateX(-6px); transition: opacity 0.4s ease, transform 0.4s ease; }
.deck-steps li svg { flex-shrink: 0; width: 15px; height: 15px; color: var(--silver); }
.deck-card[data-pos="active"] .deck-steps li { opacity: 1; transform: translateX(0); }
.deck-card[data-pos="active"] .deck-steps li:nth-child(1) { transition-delay: 0.3s; }
.deck-card[data-pos="active"] .deck-steps li:nth-child(2) { transition-delay: 0.4s; }
.deck-card[data-pos="active"] .deck-steps li:nth-child(3) { transition-delay: 0.5s; }
@property --deck-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.deck-card[data-pos="active"] {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    conic-gradient(from var(--deck-angle), var(--border), var(--silver) 25%, var(--silver-deep) 45%, var(--border) 65%) border-box;
  animation: deck-ring-spin 4s linear infinite;
}
@keyframes deck-ring-spin { to { --deck-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) { .deck-card[data-pos="active"] { animation: none; } }
.deck-dots { display: flex; gap: 9px; margin-top: 26px; justify-content: center; }
.deck-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); border: none; padding: 0; cursor: pointer; transition: transform 0.5s cubic-bezier(.22,.61,.36,1), background-color 0.5s; }
.deck-dot.is-active { background: var(--silver); transform: scale(1.35); }
.deck-hint {
  position: absolute; bottom: 18px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--ink-faint); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
  opacity: 1; transition: opacity 0.3s ease; animation: deck-hint-bob 1.8s ease-in-out infinite;
}
.deck-hint.is-hidden { opacity: 0; pointer-events: none; }
@keyframes deck-hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .deck-hint { animation: none; } }

.checklist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 720px; margin: 0 auto; }
.checklist-item { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; font-size: 14px; }
.checklist-item svg { width: 18px; height: 18px; color: var(--silver); flex: none; }
@media (max-width: 640px) { .checklist-grid { grid-template-columns: 1fr; } }

/* Application Checklist — animated step cards, looping pulse ring around
   each step number so the page feels alive without needing scroll/hover. */
.checklist-steps { display: flex; flex-direction: column; gap: 18px; max-width: 720px; margin: 0 auto; }
.checklist-step {
  display: flex; align-items: flex-start; gap: 20px; padding: 22px 26px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.checklist-step:hover { border-color: rgba(180,141,58,0.4); transform: translateX(4px); box-shadow: 0 16px 34px rgba(180,141,58,0.1); }
.checklist-step-icon {
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--silver-gradient); color: var(--on-silver);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 16px;
}
.checklist-step-icon::before, .checklist-step-icon::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid rgba(180,141,58,0.5); opacity: 0;
  animation: checklist-pulse 2.6s ease-out infinite;
}
.checklist-step-icon::after { animation-delay: 1.3s; }
@keyframes checklist-pulse {
  0% { transform: scale(0.85); opacity: 0.7; }
  70% { opacity: 0; }
  100% { transform: scale(1.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .checklist-step-icon::before, .checklist-step-icon::after { animation: none; display: none; } }
.checklist-step-body h3 { font-size: 15.5px; margin-bottom: 6px; }
.checklist-step-body p { font-size: 13.5px; color: var(--ink-muted); line-height: 1.6; }
.checklist-steps .checklist-step:nth-child(2) .checklist-step-icon::before,
.checklist-steps .checklist-step:nth-child(2) .checklist-step-icon::after { animation-delay: 0.4s, 1.7s; }
.checklist-steps .checklist-step:nth-child(3) .checklist-step-icon::before { animation-delay: 0.8s; }
.checklist-steps .checklist-step:nth-child(3) .checklist-step-icon::after { animation-delay: 2.1s; }
.checklist-steps .checklist-step:nth-child(4) .checklist-step-icon::before { animation-delay: 1.2s; }
.checklist-steps .checklist-step:nth-child(4) .checklist-step-icon::after { animation-delay: 2.5s; }
.checklist-steps .checklist-step:nth-child(5) .checklist-step-icon::before { animation-delay: 1.6s; }
.checklist-steps .checklist-step:nth-child(5) .checklist-step-icon::after { animation-delay: 2.9s; }
.checklist-steps .checklist-step:nth-child(6) .checklist-step-icon::before { animation-delay: 2s; }
.checklist-steps .checklist-step:nth-child(6) .checklist-step-icon::after { animation-delay: 3.3s; }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; max-width: 980px; margin: 0 auto; align-items: start; }
.faq-columns .faq-list { max-width: none; margin: 0; }
@media (max-width: 800px) { .faq-columns { grid-template-columns: 1fr; } }
.faq-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; transition: border-color 0.2s ease; }
.faq-item.is-open { border-color: rgba(180,141,58,0.4); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; background: none; border: none; text-align: left; cursor: pointer;
  font-family: var(--font-head); font-size: 15.5px; font-weight: 600; color: var(--ink);
}
.faq-q svg { width: 18px; height: 18px; color: var(--silver); flex: none; transition: transform 0.25s ease; }
.faq-item.is-open .faq-q svg { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-a-inner { padding: 0 24px 22px; font-size: 14.5px; color: var(--ink-muted); line-height: 1.75; }
.faq-item.is-open .faq-a { max-height: 400px; }

/* ==========================================================================
   Gallery mosaic
   ========================================================================== */
.gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; gap: 14px;
}
.gallery-item { position: relative; overflow: hidden; border-radius: 14px; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item.wide { grid-column: span 2; }
.gallery-item.tall { grid-row: span 2; }
@media (max-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } .gallery-item.wide { grid-column: span 2; } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } .gallery-item.wide, .gallery-item.tall { grid-column: span 1; grid-row: span 1; } }

/* ==========================================================================
   Events
   ========================================================================== */
.event-card {
  display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: center;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px; max-width: 720px; margin: 0 auto;
}
.event-date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--silver-gradient); color: var(--on-silver); border-radius: 14px; padding: 18px 10px;
  font-family: var(--font-head);
}
.event-date .month { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.event-date .day { font-size: 34px; font-weight: 700; line-height: 1; margin: 4px 0; }
.event-date .year { font-size: 12px; opacity: 0.8; }
.event-body h3 { font-size: 19px; margin-bottom: 8px; }
.event-meta { font-size: 13px; color: var(--ink-faint); margin-bottom: 10px; }
.event-body p { font-size: 14px; color: var(--ink-muted); line-height: 1.65; margin-bottom: 16px; }
@media (max-width: 600px) { .event-card { grid-template-columns: 1fr; text-align: center; } .event-date { flex-direction: row; gap: 8px; justify-content: center; } }

/* ==========================================================================
   Careers — job card + perk grid
   ========================================================================== */
.job-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; max-width: 760px; margin: 0 auto; }
.job-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.job-card-head h3 { font-size: 20px; margin-bottom: 6px; }
.job-card-head p { font-size: 13.5px; color: var(--ink-faint); }
.job-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.job-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 12px; border-radius: 999px; background: rgba(180,141,58,0.1); color: var(--silver-light); border: 1px solid rgba(180,141,58,0.24); }
.job-card h4 { font-size: 14px; margin: 20px 0 10px; color: var(--ink); }
.job-card ul { margin: 0 0 8px; padding-left: 20px; color: var(--ink-muted); font-size: 14px; line-height: 1.8; }
.job-card p { color: var(--ink-muted); font-size: 14.5px; line-height: 1.75; }

.perk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.perk-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.perk-card:hover { transform: translateY(-6px); border-color: rgba(180,141,58,0.4); box-shadow: 0 22px 46px var(--shadow); }
.perk-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--silver); margin-bottom: 12px; display: block; }
.perk-card h3 { font-size: 16px; margin-bottom: 8px; }
.perk-card p { font-size: 13.5px; color: var(--ink-muted); line-height: 1.6; }
.perk-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border); width: 100%;
  font-family: var(--font-head); font-size: 12.5px; font-weight: 700; color: var(--silver-deep);
}
.perk-link svg { width: 13px; height: 13px; transition: transform 0.3s cubic-bezier(.2,.8,.2,1); }
.perk-card:hover .perk-link { color: var(--silver-deep); }
.perk-card:hover .perk-link svg { transform: translate(3px, -3px); }
@media (max-width: 900px) { .perk-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .perk-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Basics / resource link grid (Mortgage Basics, Loan Programs teaser)
   ========================================================================== */
.basics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.basics-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; transition: border-color 0.2s ease, transform 0.2s ease; }
.basics-card:hover { border-color: rgba(180,141,58,0.4); transform: translateY(-3px); }
.basics-card h3 { font-size: 15px; margin-bottom: 8px; }
.basics-card p { font-size: 13px; color: var(--ink-muted); line-height: 1.6; margin-bottom: 14px; }
.basics-link { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--silver-deep); transition: transform 0.2s ease, color 0.2s ease; }
.basics-link:hover { color: var(--silver); transform: translateX(3px); }

/* Glossary */
/* ==========================================================================
   Mortgage Glossary — A-Z reveal grid + modal
   ========================================================================== */
.letter-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }
.letter-tile {
  position: relative; aspect-ratio: 1/1; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--bg-card);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); cursor: default;
  transition: transform 0.3s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  padding: 0;
}
.letter-tile-char { font-size: clamp(22px, 3vw, 32px); font-weight: 700; color: var(--ink-faint); transition: color 0.3s ease; }
.letter-tile.is-empty { background: var(--bg-alt); opacity: 0.45; }
.letter-tile.has-terms { cursor: pointer; }
.letter-tile.has-terms .letter-tile-char { color: var(--ink); }
.letter-tile.has-terms:hover { transform: translateY(-6px) scale(1.05); border-color: rgba(180,141,58,0.45); box-shadow: 0 22px 44px rgba(180,141,58,0.16); }
.letter-tile.has-terms:hover .letter-tile-char { color: var(--silver-deep); }
.letter-tile-count {
  position: absolute; top: 8px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--silver-gradient); color: var(--on-silver);
  font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.6); transition: opacity 0.25s ease, transform 0.25s ease;
}
.letter-tile.has-terms:hover .letter-tile-count { opacity: 1; transform: scale(1); }
/* click "reveal / elevate / uncover" burst, before the modal opens */
.letter-tile.is-revealing { animation: letter-reveal 0.55s cubic-bezier(.2,.8,.2,1); z-index: 5; }
@keyframes letter-reveal {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-18px) scale(1.18) rotate(-3deg); box-shadow: 0 30px 60px rgba(180,141,58,0.3); }
  100% { transform: translateY(-6px) scale(1.05); }
}
@media (max-width: 900px) { .letter-grid { grid-template-columns: repeat(5, 1fr); gap: 10px; } }
@media (max-width: 560px) { .letter-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; } }

.letter-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; visibility: hidden; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease; }
.letter-modal.is-open { visibility: visible; opacity: 1; }
.letter-modal-backdrop { position: absolute; inset: 0; background: rgba(12,12,12,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.letter-modal-panel {
  position: relative; z-index: 1; width: min(560px, 100%); max-height: 82vh; overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 44px 40px 36px; box-shadow: 0 40px 80px rgba(12,12,12,0.35);
  transform: translateY(24px) scale(0.97); opacity: 0; transition: transform 0.35s cubic-bezier(.2,.8,.2,1), opacity 0.35s ease;
}
.letter-modal.is-open .letter-modal-panel { transform: translateY(0) scale(1); opacity: 1; }
.letter-modal-close {
  position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border); background: var(--bg-raised); color: var(--ink-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  will-change: transform;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.letter-modal-close:hover { background: var(--silver-gradient); color: var(--on-silver); transform: rotate(90deg); box-shadow: 0 0 1px 1px var(--silver); }
.letter-modal-big {
  width: 64px; height: 64px; border-radius: 16px; background: var(--silver-gradient); color: var(--on-silver);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-head);
  font-weight: 700; font-size: 30px; margin-bottom: 18px;
}
.letter-modal-title { font-size: 20px; margin-bottom: 22px; }
.letter-modal-title span { color: var(--silver-deep); }
.letter-modal-list { display: flex; flex-direction: column; gap: 4px; }
.letter-modal-item {
  padding: 16px 4px; border-top: 1px solid var(--border);
  opacity: 0; transform: translateX(-10px);
  animation: letter-item-in 0.4s ease forwards;
  animation-delay: calc(var(--i) * 0.06s);
}
.letter-modal-item:first-child { border-top: none; }
@keyframes letter-item-in { to { opacity: 1; transform: translateX(0); } }
.letter-modal-item h3 { font-size: 15px; margin-bottom: 6px; color: var(--silver-deep); }
.letter-modal-item p { font-size: 13.5px; color: var(--ink-muted); line-height: 1.65; }
@media (prefers-reduced-motion: reduce) { .letter-tile.is-revealing { animation: none; } .letter-modal-item { animation: none; opacity: 1; transform: none; } }
@media (max-width: 900px) { .basics-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .basics-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Simple two-column contact layout (contact.html)
   ========================================================================== */
.contact-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .contact-split { grid-template-columns: 1fr; } }

/* ==========================================================================
   City Capital additions — orange accent utilities
   ========================================================================== */
.accent-orange-text {
  background: linear-gradient(115deg, #c9a24a, #b8913f 45%, #b48d3a, #b8913f 65%, #c9a24a);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: accent-shimmer 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .accent-orange-text { animation: none; } }
.eyebrow-orange { color: var(--ink); background: rgba(12,12,12,0.05); border-color: rgba(12,12,12,0.18); }
.btn-orange {
  position: relative; overflow: hidden;
  background: var(--orange-gradient); border: none; color: var(--on-orange);
  box-shadow: 0 8px 24px rgba(8,8,8,0.22);
  will-change: transform;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-orange::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; overflow: hidden;
  background-image: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.55) 50%, transparent 60%);
  background-repeat: no-repeat; background-size: 220% 220%; background-position: -80% 50%;
}
.btn-orange:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(8,8,8,0.34), 0 0 0 1px rgba(180,141,58,0.35); filter: brightness(1.12); }
.btn-orange:hover::before { animation: btn-shine 0.9s ease-out; }

/* Nav logo — same treatment as JD Lendings / Centric: mark + two-line
   wordmark. The dark-ink mark is the default (so the brand is always
   visible on light pages like Contact/FAQ); pages with a dark photo hero
   get `nav-on-photo` from site-chrome.js, which swaps in the white
   knockout mark + white wordmark until the header scrolls into its white
   glass state. */
.site-nav__logo { position: relative; }
.site-nav__logo .logo-light, .site-nav__logo .logo-dark { height: 48px; width: auto; }
.site-nav__logo .logo-light { display: none; }
.site-nav__logo .logo-dark { display: block; filter: none; }
.site-nav.nav-on-photo:not(.is-scrolled) .site-nav__logo .logo-light { display: block; }
.site-nav.nav-on-photo:not(.is-scrolled) .site-nav__logo .logo-dark { display: none; }
@media (max-width: 640px) { .site-nav__logo .logo-light, .site-nav__logo .logo-dark { height: 36px; } }

/* ==========================================================================
   City Capital additions — listing cards (vibrant photo-first cards)
   ========================================================================== */
.listings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.listing-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.listing-card:hover { transform: translateY(-8px); border-color: rgba(180,141,58,0.45); box-shadow: 0 30px 60px rgba(10,10,10,0.16); }
.listing-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.listing-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.listing-card:hover .listing-media img { transform: scale(1.07); }
.listing-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(7,7,7,0.42) 0%, transparent 45%);
}
.listing-price {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-family: var(--font-head); font-weight: 700; font-size: 17px; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.listing-status {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: var(--font-head); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: var(--orange-gradient);
  padding: 6px 12px; border-radius: 999px; box-shadow: 0 6px 16px rgba(8,8,8,0.35);
}
.listing-status.status-aqua { background: var(--silver-gradient); color: var(--on-silver); box-shadow: 0 6px 16px rgba(180,141,58,0.35); }
.listing-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.listing-body h3 { font-size: 15.5px; line-height: 1.35; }
.listing-city { font-size: 12.5px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 6px; }
.listing-city svg { width: 13px; height: 13px; color: var(--silver); }
.listing-specs { display: flex; gap: 14px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--ink-muted); flex-wrap: wrap; }
.listing-specs b { color: var(--ink); font-weight: 600; }
@media (max-width: 980px) { .listings-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .listings-grid { grid-template-columns: 1fr; } }

/* Search filter bar — frosted glass toolbar above the grid */
.search-bar {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.8fr 0.8fr auto; gap: 10px;
  background: var(--bg-glass-strong); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px; box-shadow: 0 18px 40px rgba(10,10,10,0.08);
}
.search-bar select, .search-bar input {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--input-bg); color: var(--ink); font-family: var(--font-body); font-size: 13.5px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-bar select:focus, .search-bar input:focus { outline: none; border-color: var(--silver); box-shadow: 0 0 0 3px rgba(180,141,58,0.14); }
.search-count { font-size: 13px; color: var(--ink-faint); margin: 18px 2px 22px; }
.search-empty {
  text-align: center; padding: 60px 24px; border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg); color: var(--ink-muted); font-size: 14.5px;
}
@media (max-width: 980px) { .search-bar { grid-template-columns: 1fr 1fr; } .search-bar .btn { grid-column: span 2; } }

/* IDX embed panel */
.idx-panel {
  position: relative; overflow: hidden; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 64px 32px; box-shadow: 0 24px 50px rgba(10,10,10,0.08);
}
.idx-panel .bg-mesh { opacity: 1; }
.idx-panel > * { position: relative; z-index: 1; }
.idx-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--silver-deep); background: rgba(180,141,58,0.08); border: 1px solid rgba(180,141,58,0.28);
  border-radius: 999px; padding: 7px 16px;
}
.idx-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--silver); animation: idx-pulse 1.6s ease-in-out infinite; }
@keyframes idx-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }
@media (prefers-reduced-motion: reduce) { .idx-badge .dot { animation: none; } }
.idx-panel h2 { font-size: clamp(24px, 3vw, 34px); }
.idx-panel p { margin: 14px auto 26px; max-width: 520px; color: var(--ink-muted); font-size: 15px; line-height: 1.7; }

/* ==========================================================================
   City Capital additions — communities
   ========================================================================== */
.community-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.community-card {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg);
  aspect-ratio: 4 / 5; background: #0a0a0a; border: 1px solid var(--border);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease;
}
.community-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(10,10,10,0.22); }
.community-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.community-card:hover img { transform: scale(1.08); }
.community-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(7,7,7,0.85) 0%, rgba(7,7,7,0.2) 55%, transparent 75%);
}
.community-card-label { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; }
.community-card-label h3 { color: #fff; font-size: 18px; margin-bottom: 3px; }
.community-card-label span { font-size: 12.5px; color: rgba(255,255,255,0.75); line-height: 1.45; display: block; }
.community-card-arrow {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; opacity: 0; transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.community-card:hover .community-card-arrow { opacity: 1; transform: translateY(0); }
.community-card-arrow svg { width: 15px; height: 15px; }
@media (max-width: 1080px) { .community-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .community-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .community-grid { grid-template-columns: 1fr; } .community-card { aspect-ratio: 4/3; } }

/* Community detail page — article + sticky quick facts */
.community-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }
.community-article h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 44px 0 14px; }
.community-article h2:first-child { margin-top: 0; }
.community-article p { color: var(--ink-muted); font-size: 15.5px; line-height: 1.8; margin-bottom: 14px; }
.why-live-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 12px; }
.why-live-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-muted); font-size: 15px; line-height: 1.65; }
.why-live-list svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--silver); background: rgba(180,141,58,0.1); border-radius: 50%; padding: 3px; box-sizing: content-box; }
.quick-facts {
  position: sticky; top: 108px;
  background: var(--bg-glass-strong); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: 0 18px 40px rgba(10,10,10,0.08);
}
.quick-facts h3 { font-size: 15px; margin-bottom: 6px; }
.quick-facts dl { margin: 0; }
.quick-facts dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); margin-top: 16px; font-weight: 600; }
.quick-facts dd { margin: 3px 0 0; font-weight: 600; color: var(--ink); font-size: 14.5px; }
.quick-facts .btn { margin-top: 22px; }
@media (max-width: 900px) { .community-layout { grid-template-columns: 1fr; } .quick-facts { position: static; } }

/* Placeholder team card — "seat open" slot linking to careers */
.team-card-open .team-card-photo {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(300px circle at 50% 0%, rgba(180,141,58,0.14), transparent 70%),
    linear-gradient(180deg, #f5f3ec, #f1eee5);
}
.team-card-open .team-card-photo svg { width: 96px; height: 96px; color: rgba(10,10,10,0.35); }
.team-card-open { border-style: dashed; border-color: var(--border-strong); }
.team-card-open:hover { border-color: var(--silver); box-shadow: 0 24px 48px rgba(10,10,10,0.14); }
.team-card-open .team-card-role { color: var(--silver-deep); }

/* ==========================================================================
   Communities Explorer — editorial index list + sticky live photo preview.
   Hovering (or focusing) a community row crossfades the preview panel to
   that city's photo; the whole row and the preview both link to the city
   guide. On mobile the preview hides and each row grows a photo thumbnail.
   ========================================================================== */
.cx-wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: start; }
.cx-list { display: flex; flex-direction: column; }
.cx-row {
  position: relative; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 20px;
  padding: 25px 14px; border-bottom: 1px solid var(--border);
  transition: background 0.35s ease;
}
.cx-row:first-child { border-top: 1px solid var(--border); }
.cx-row::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--silver), var(--silver-light), transparent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
}
.cx-row:hover::before, .cx-row.is-active::before { transform: scaleX(1); }
.cx-row:hover, .cx-row.is-active { background: linear-gradient(90deg, rgba(180,141,58,0.06), transparent 70%); }
.cx-num {
  font-family: var(--font-head); font-weight: 600; font-size: 12.5px; letter-spacing: 0.06em;
  color: var(--ink-faint); transition: color 0.3s ease;
}
.cx-row:hover .cx-num, .cx-row.is-active .cx-num { color: var(--silver-deep); }
.cx-body { min-width: 0; }
.cx-name {
  display: block; font-family: var(--font-head); font-weight: 600;
  font-size: clamp(24px, 2.5vw, 33px); line-height: 1.08; letter-spacing: -0.015em; color: var(--ink);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), color 0.3s ease;
}
.cx-row:hover .cx-name, .cx-row.is-active .cx-name { transform: translateX(10px); color: var(--silver-deep); }
.cx-meta { display: flex; align-items: center; gap: 10px; margin-top: 7px; transition: transform 0.4s cubic-bezier(.2,.8,.2,1); }
.cx-row:hover .cx-meta, .cx-row.is-active .cx-meta { transform: translateX(10px); }
.cx-tagline { font-size: 13px; color: var(--ink-muted); }
.cx-county {
  flex: none; font-family: var(--font-head); font-size: 10px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--silver-deep);
  background: rgba(180,141,58,0.09); border: 1px solid rgba(180,141,58,0.24);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.cx-arrow {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--silver-gradient); color: var(--on-silver);
  opacity: 0; transform: translateX(-8px) rotate(-45deg);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.2,.8,.2,1);
}
.cx-arrow svg { width: 16px; height: 16px; }
.cx-row:hover .cx-arrow, .cx-row.is-active .cx-arrow { opacity: 1; transform: translateX(0) rotate(0deg); }
.cx-thumb { display: none; }

/* Sticky preview panel */
.cx-preview {
  position: sticky; top: 104px; display: block;
  border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 4.4; background: #0a0a0a;
  box-shadow: 0 34px 70px rgba(10,10,10,0.24);
  isolation: isolate;
}
.cx-preview img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.07);
  transition: opacity 0.55s ease, transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.cx-preview img.is-active { opacity: 1; transform: scale(1); }
.cx-preview::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(7,7,7,0.82) 0%, rgba(7,7,7,0.16) 45%, transparent 70%);
}
.cx-preview-label { position: absolute; left: 26px; right: 26px; bottom: 24px; z-index: 2; color: #fff; }
.cx-preview-label .cx-preview-county {
  display: inline-flex; font-family: var(--font-head); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.32);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 999px; padding: 5px 12px; margin-bottom: 10px;
}
.cx-preview-label h3 { color: #fff; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; }
.cx-preview-label p { margin-top: 6px; font-size: 13.5px; color: rgba(255,255,255,0.78); }
.cx-preview-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-family: var(--font-head); font-size: 12.5px; font-weight: 700;
  color: var(--on-silver); background: var(--silver-gradient);
  border-radius: 999px; padding: 11px 20px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cx-preview:hover .cx-preview-cta { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(180,141,58,0.4); }
.cx-preview-cta svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  .cx-row::before, .cx-name, .cx-meta, .cx-arrow, .cx-preview img { transition: none; }
}

@media (max-width: 940px) {
  .cx-wrap { grid-template-columns: 1fr; gap: 0; }
  .cx-preview { display: none; }
  .cx-row { grid-template-columns: 74px 1fr auto; padding: 18px 8px; }
  .cx-num { display: none; }
  .cx-thumb {
    display: block; width: 74px; height: 74px; border-radius: 14px; overflow: hidden; flex: none;
  }
  .cx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cx-name { font-size: 21px; }
  .cx-row:hover .cx-name, .cx-row:hover .cx-meta { transform: none; }
  .cx-tagline { font-size: 12px; }
  .cx-county { display: none; }
  .cx-arrow { opacity: 1; transform: none; width: 34px; height: 34px; background: rgba(180,141,58,0.1); color: var(--silver-deep); }
}

/* Team card contact overlay — translucent glass WhatsApp + email buttons
   floating on the photo. */
.team-card-contact { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; gap: 8px; }
.team-card-contact a {
  position: relative; isolation: isolate; overflow: hidden;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.team-card-contact a svg { position: relative; z-index: 1; width: 17px; height: 17px; }
.team-card-contact a:hover { transform: translateY(-3px); }
/* Hover fill is a separate full-bleed layer that fades in via opacity,
   never a background-color/gradient transition — crossfading a solid color
   into a gradient (especially behind backdrop-filter blur on a circle) is
   what caused the tiny speckled artifacts at the edge; opacity transitions
   don't have that problem. */
.team-card-contact a::before {
  content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 50%;
  opacity: 0; transition: opacity 0.25s ease;
}
.team-card-contact a.wa::before { background: #25D366; }
.team-card-contact a.em::before { background: var(--silver-gradient); }
.team-card-contact a:hover::before { opacity: 1; }
.team-card-contact a.wa:hover, .team-card-contact a.em:hover { border-color: transparent; }
.team-card-contact a.em:hover { color: var(--on-silver); }

/* ==========================================================================
   COPPER KEY PACK — Copper Key Group layer on top of the City Capital
   system: crossfading hero slideshow + copper aurora + light sweep, glass
   home-search card, community ticker, vibrant photo service cards, listing
   hover reveal, broker spotlight, Angel-style "road home" pinned journey,
   translucent photo "why" cards, valuation band, careers band, review grid,
   Question-1 funnel teaser, staggered reveals + headline word rise.
   Everything that moves is switched off under prefers-reduced-motion.
   ========================================================================== */

/* ---- Standing rules ---- */
.btn, [class*="btn-"] { background-origin: border-box !important; }
.btn-primary { background: var(--silver-gradient); box-shadow: 0 8px 24px rgba(10,10,10,0.22); }
.btn-primary:hover { box-shadow: 0 14px 32px rgba(10,10,10,0.32); }
@keyframes btn-glow-pulse { 0%, 100% { box-shadow: 0 8px 24px rgba(10,10,10,0.2); } 50% { box-shadow: 0 10px 32px rgba(180,141,58,0.42); } }
.btn-orange { color: var(--on-orange); }
.btn-orange:hover { color: #f3f0e6; }
.cw-launcher, .cw-close, .cw-send, .site-nav__toggle, .site-nav__icon-btn, .lang-toggle-btn, .social-icon, .footer-social a { padding: 0; margin: 0; -webkit-appearance: none; appearance: none; }
.lang-toggle-btn { padding: 0 12px; }
.cw-close { width: 32px; height: 32px; min-width: 32px; display: grid; place-items: center; border-radius: 50%; }
@media (hover: hover) { .cw-close:hover { background: rgba(12,12,12,0.06); } }
::selection { background: rgba(180,141,58,0.22); color: var(--ink); }
:focus-visible { outline: 2px solid var(--silver); outline-offset: 3px; }

/* Vibrant photos everywhere — no grayscale washes on card imagery */
.area-card-image img, .area-card:hover .area-card-image img { filter: none; }

/* ---- Logo (stacked copper key lockup from the original site) ---- */
.site-nav__inner { padding: 14px 32px; transition: padding 0.35s ease; }
.site-nav.is-scrolled .site-nav__inner { padding-top: 10px; padding-bottom: 10px; }
.site-nav__logo .logo-light, .site-nav__logo .logo-dark { height: 58px; width: auto; transition: height 0.35s ease, transform 0.45s cubic-bezier(.34,1.56,.64,1); }
.site-nav.is-scrolled .site-nav__logo .logo-light, .site-nav.is-scrolled .site-nav__logo .logo-dark { height: 50px; }
.site-nav__logo .logo-dark { filter: none; }
.site-nav__logo .logo-light { filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45)); }
@media (hover: hover) { .site-nav__logo:hover img { transform: translateY(-1px) scale(1.03); } }
@media (max-width: 1360px) and (min-width: 1024px) {
  .site-nav__inner { padding: 12px 20px; }
  .site-nav__logo .logo-light, .site-nav__logo .logo-dark { height: 52px; }
}
@media (max-width: 1023px) { .site-nav__pill.is-mobile-open, .site-nav.is-scrolled .site-nav__pill.is-mobile-open { top: 82px; } }
@media (max-width: 640px) {
  .site-nav__inner { padding: 10px 16px; }
  .site-nav__logo .logo-light, .site-nav__logo .logo-dark, .site-nav.is-scrolled .site-nav__logo .logo-light, .site-nav.is-scrolled .site-nav__logo .logo-dark { height: 46px; }
  .site-nav__pill.is-mobile-open, .site-nav.is-scrolled .site-nav__pill.is-mobile-open { top: 72px; }
}
.footer-logo img { height: 84px; }
.funnel-logo img { height: 46px; }
.cw-avatar.cw-avatar-logo { background: #fff; box-shadow: inset 0 0 0 1px rgba(180,141,58,0.3); }
.cw-avatar.cw-avatar-logo img { width: 26px; height: 26px; object-fit: contain; display: block; }

/* Nav over a dark photo: glass pills read on any image */
.site-nav.nav-on-photo:not(.is-scrolled) .site-nav__links { color: rgba(255,255,255,0.9); }
.site-nav.nav-on-photo:not(.is-scrolled) .site-nav__pill { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-nav.nav-on-photo:not(.is-scrolled) .site-nav__links > li > a:hover, .site-nav.nav-on-photo:not(.is-scrolled) .site-nav__links > li > button:hover { color: #fff; background: rgba(255,255,255,0.14); }
.site-nav.nav-on-photo:not(.is-scrolled) .site-nav__icon-btn, .site-nav.nav-on-photo:not(.is-scrolled) .site-nav__toggle { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.24); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@media (max-width: 1023px) { .site-nav.nav-on-photo:not(.is-scrolled) .site-nav__pill.is-mobile-open .site-nav__links { color: var(--ink-soft); } }

/* ---- Section heads: copper rule draws itself in ---- */
.section-head h2 { position: relative; padding-bottom: 18px; }
.section-head h2::after {
  content: ""; position: absolute; bottom: 0; left: 0; width: 56px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--silver-deep), var(--silver-light));
  transform: scaleX(0); transform-origin: left center; transition: transform 0.8s 0.25s cubic-bezier(.22,1,.36,1);
}
.section-head.center h2::after { left: calc(50% - 28px); transform-origin: center; }
.reveal.is-visible .section-head h2::after, .section-head.is-static h2::after { transform: scaleX(1); }
.eyebrow { color: var(--silver-deep); }
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; background: var(--silver); box-shadow: 0 0 0 3px rgba(180,141,58,0.16); }
.hero-copy .eyebrow::before, .page-header-photo .eyebrow::before, .heloc-card-content .eyebrow::before, .careers-copy .eyebrow::before, .officer-simple-hero .eyebrow::before { background: var(--champagne); box-shadow: 0 0 0 3px rgba(201,162,74,0.22); }

/* ---- Staggered child cascade (blur-to-sharp rise) ---- */
.reveal.pre-reveal:not(.is-visible) :is(.svc-grid, .why-grid, .yp-points, .review-grid, .perk-grid, .process-grid, .toolkit-list, .value-list, .lang-grid, .mvv-grid) > * {
  opacity: 0; transform: translateY(26px) scale(0.97); filter: blur(6px);
}
.reveal.is-visible :is(.svc-grid, .why-grid, .yp-points, .review-grid, .perk-grid, .process-grid, .toolkit-list, .value-list, .lang-grid, .mvv-grid) > * {
  opacity: 1; transform: none; filter: none;
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.22,1,.36,1), filter 0.6s ease;
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* ==========================================================================
   HERO — crossfading South-Florida slideshow, copper aurora, home search
   ========================================================================== */
.hero { min-height: 100vh; min-height: 100svh; padding: 150px 0 110px; }
.hero .wrap {
  max-width: var(--max); width: 100%;
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 56px;
  align-items: center; text-align: left; z-index: 2;
}
.hero-copy { align-items: flex-start; }
.hero-copy h1 { font-size: clamp(40px, 5.2vw, 68px); line-height: 1.04; letter-spacing: -0.025em; max-width: 640px; }
.hero-copy .lede { max-width: 540px; }
.hero .hero-actions, .hero .hero-stats { justify-content: flex-start; }
.hero-stats { gap: 34px; }
.hero-stat b { font-size: 26px; font-variant-numeric: tabular-nums; }

.hero-slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0a0a0a; }
.hero-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.04); transition: opacity 1.8s ease; will-change: opacity, transform;
}
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-slide.is-active, .hero-slide.is-prev { animation: ck-kenburns 10s ease-out forwards; }
@keyframes ck-kenburns { from { transform: scale(1.04) translate3d(0,0,0); } to { transform: scale(1.15) translate3d(-1.2%, -1%, 0); } }
.hero-bg-overlay {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(7,7,7,0.82) 0%, rgba(7,7,7,0.62) 38%, rgba(7,7,7,0.22) 70%, rgba(7,7,7,0.12) 100%),
    linear-gradient(0deg, rgba(7,7,7,0.55) 0%, transparent 38%);
}
.hero-aurora { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.hero-aurora i {
  position: absolute; width: 44vmax; height: 44vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(180,141,58,0.26) 0%, rgba(180,141,58,0.1) 40%, transparent 68%);
  filter: blur(30px); animation: ck-aurora 20s ease-in-out infinite;
}
.hero-aurora i:nth-child(1) { left: -16vmax; top: -12vmax; }
.hero-aurora i:nth-child(2) { right: -18vmax; bottom: -20vmax; animation-delay: -7s; animation-duration: 24s; }
.hero-aurora i:nth-child(3) { left: 34%; top: 58%; width: 28vmax; height: 28vmax; opacity: 0.55; animation-delay: -12s; animation-duration: 28s; }
@keyframes ck-aurora { 0%, 100% { transform: translate(0,0) scale(1); } 33% { transform: translate(6vmax, 4vmax) scale(1.12); } 66% { transform: translate(-4vmax, 6vmax) scale(0.92); } }
.hero-sweep {
  position: absolute; inset: -20% -60%; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 44%, rgba(255,255,255,0.06) 49%, rgba(201,162,74,0.09) 50%, transparent 56%);
  animation: ck-sweep 10s ease-in-out infinite;
}
@keyframes ck-sweep { 0% { transform: translateX(-40%); } 55%, 100% { transform: translateX(40%); } }

/* slide progress dots + caption */
.hero-dots { position: absolute; left: 50%; bottom: 30px; z-index: 3; transform: translateX(-50%); display: flex; gap: 8px; }
.hero-dot { width: 34px; height: 4px; min-width: 34px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,0.28); overflow: hidden; position: relative; cursor: pointer; }
.hero-dot::before { content: ''; position: absolute; left: -6px; right: -6px; top: -14px; bottom: -14px; }
.hero-dot::after { content: ''; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: var(--champagne); }
.hero-dot.is-active::after { animation: ck-dot 7s linear forwards; }
@keyframes ck-dot { to { transform: scaleX(1); } }
.hero-caption {
  position: absolute; right: 32px; bottom: 26px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.72);
  transition: opacity 0.6s ease;
}
.hero-caption svg { width: 13px; height: 13px; color: var(--champagne); }

/* Glass home-search card */
.hero-search {
  position: relative; justify-self: end; width: 100%; max-width: 420px;
  padding: 26px 26px 22px; border-radius: 24px; color: #fff;
  background: linear-gradient(160deg, rgba(255,255,255,0.18), rgba(255,255,255,0.07));
  border: 1px solid rgba(255,255,255,0.26);
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 30px 70px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  animation: ck-rise 0.9s 0.45s cubic-bezier(.22,1,.36,1) both;
}
.hero-search::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: none;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: glow-spin 6s linear infinite;
}
@keyframes ck-rise { from { opacity: 0; transform: translateY(26px) scale(0.98); } to { opacity: 1; transform: none; } }
.hs-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.hs-key { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: rgba(255,255,255,0.92); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.hs-key img { width: 30px; height: 30px; object-fit: contain; }
.hs-head b { display: block; font-family: var(--font-head); font-size: 18px; font-weight: 600; color: #fff; }
.hs-head span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,0.72); margin-top: 2px; }
.hs-head span i { width: 7px; height: 7px; border-radius: 50%; background: #c9a24a; box-shadow: 0 0 0 3px rgba(201,162,74,0.2); animation: idx-pulse 1.6s ease-in-out infinite; }
.hs-field { display: block; margin-bottom: 12px; }
.hs-field > span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 6px; }
.hs-field select {
  width: 100%; height: 48px; padding: 0 40px 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.22);
  background: rgba(7,7,7,0.32) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f1cfa4' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: #fff; font-family: var(--font-body); font-size: 14.5px; -webkit-appearance: none; appearance: none; cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.hs-field select:focus { outline: none; border-color: var(--champagne); background-color: rgba(7,7,7,0.45); }
.hs-field select option { color: var(--ink); background: #fff; }
.hs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero-search .btn { margin-top: 6px; }
.hs-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 12.5px; }
.hs-foot a { color: var(--champagne); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.hs-foot a svg { width: 13px; height: 13px; transition: transform 0.25s ease; }
@media (hover: hover) { .hs-foot a:hover svg { transform: translateX(3px); } }
.hs-foot span { color: rgba(255,255,255,0.62); }

@media (max-width: 1080px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 40px; text-align: center; justify-items: center; }
  .hero-copy { align-items: center; }
  .hero .hero-actions, .hero .hero-stats { justify-content: center; }
  .hero-copy .lede { margin-left: auto; margin-right: auto; }
  .hero-search { justify-self: center; max-width: 560px; }
  .hero-bg-overlay { background: linear-gradient(0deg, rgba(7,7,7,0.78) 0%, rgba(7,7,7,0.5) 50%, rgba(7,7,7,0.42) 100%); }
  .hero-caption { display: none; }
}
@media (max-width: 640px) {
  .hero { padding: 128px 0 84px; }
  .hero-search { display: none; }
  .hero-stats { gap: 22px; }
  .hero-stat b { font-size: 22px; }
}

/* Headline words rise in one by one (wrapped by script.js) */
.hero h1 .hw { display: inline-block; opacity: 0; transform: translateY(0.85em) rotate(2deg); filter: blur(8px); animation: ck-word-in 0.75s cubic-bezier(.22,1,.36,1) forwards; animation-delay: calc(120ms + var(--w, 0) * 85ms); }
@keyframes ck-word-in { to { opacity: 1; transform: none; filter: none; } }
.hero h1 .accent-text.hw { animation: ck-word-in 0.75s cubic-bezier(.22,1,.36,1) forwards, accent-shimmer 5s ease-in-out infinite; animation-delay: calc(120ms + var(--w, 0) * 85ms), 0s; }
.hero .accent-text, .page-header-photo .accent-text, .officer-simple-hero .accent-text, .careers-copy .accent-text, .heloc-card-content .accent-text {
  background: linear-gradient(115deg, #c9a24a, #b8913f 45%, #b48d3a, #b8913f 65%, #c9a24a);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ==========================================================================
   COMMUNITY TICKER — charcoal band under the hero
   ========================================================================== */
.ck-ticker { position: relative; overflow: hidden; background: #0c0c0c; border-top: 1px solid rgba(180,141,58,0.25); border-bottom: 1px solid rgba(180,141,58,0.18); padding: 0; }
.ck-ticker::before, .ck-ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
.ck-ticker::before { left: 0; background: linear-gradient(90deg, #0c0c0c, transparent); }
.ck-ticker::after { right: 0; background: linear-gradient(270deg, #0c0c0c, transparent); }
.ck-ticker-track { display: flex; width: max-content; animation: ck-ticker 46s linear infinite; }
.ck-ticker:hover .ck-ticker-track { animation-play-state: paused; }
.ck-ticker-track a {
  display: inline-flex; align-items: center; gap: 18px; padding: 19px 0 19px 18px;
  font-family: var(--font-head); font-size: 13.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(201,162,74,0.86); white-space: nowrap; transition: color 0.25s ease;
}
.ck-ticker-track a:hover { color: #fff; }
.ck-ticker-track img { width: 12px; height: 24px; object-fit: contain; opacity: 0.9; }
@keyframes ck-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   SERVICES — vibrant full-photo cards
   ========================================================================== */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.svc-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate;
  min-height: 470px; padding: 30px 28px 32px; border-radius: 22px; color: #fff; background: #0c0c0c;
  box-shadow: 0 22px 48px rgba(10,10,10,0.16);
  transition: transform 0.5s cubic-bezier(.22,1,.36,1), box-shadow 0.4s ease;
}
.svc-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.svc-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(7,7,7,0.92) 0%, rgba(7,7,7,0.58) 40%, rgba(7,7,7,0.04) 72%); }
.svc-card::after {
  content: ''; position: absolute; left: 28px; right: 28px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #c9a24a, #b48d3a); transform: scaleX(0.18); transform-origin: left; transition: transform 0.6s cubic-bezier(.22,1,.36,1);
}
.svc-tag {
  position: absolute; top: 22px; left: 22px;
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  font-family: var(--font-head); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.svc-num { position: absolute; top: 16px; right: 24px; font-family: var(--font-head); font-size: 54px; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1.2px rgba(255,255,255,0.45); transition: -webkit-text-stroke-color 0.4s ease, transform 0.6s cubic-bezier(.22,1,.36,1); }
.svc-card h3 { color: #fff; font-size: 25px; line-height: 1.15; transition: transform 0.5s cubic-bezier(.22,1,.36,1); }
.svc-card p { margin-top: 10px; color: rgba(255,255,255,0.84); font-size: 14.5px; line-height: 1.65; max-width: 340px; transition: transform 0.5s cubic-bezier(.22,1,.36,1); }
.svc-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--champagne); letter-spacing: 0.02em; }
.svc-link i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--silver-gradient); color: #fff; box-shadow: 0 8px 20px rgba(180,141,58,0.4); transition: transform 0.45s cubic-bezier(.34,1.56,.64,1); }
.svc-link i svg { width: 15px; height: 15px; }
@media (hover: hover) {
  .svc-card:hover { transform: translateY(-10px); box-shadow: 0 36px 70px rgba(10,10,10,0.28); }
  .svc-card:hover > img { transform: scale(1.1); }
  .svc-card:hover::after { transform: scaleX(1); }
  .svc-card:hover .svc-num { -webkit-text-stroke-color: var(--champagne); transform: translateY(-4px); }
  .svc-card:hover h3, .svc-card:hover p { transform: translateY(-6px); }
  .svc-card:hover .svc-link i { transform: rotate(-45deg) scale(1.08); }
}
@media (max-width: 980px) { .svc-grid { grid-template-columns: 1fr 1fr; } .svc-card:last-child { grid-column: span 2; min-height: 380px; } }
@media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr; } .svc-card, .svc-card:last-child { grid-column: auto; min-height: 400px; } }

/* ==========================================================================
   LISTINGS — hover reveal + IDX strip
   ========================================================================== */
.listing-media::after { background: linear-gradient(0deg, rgba(7,7,7,0.58) 0%, transparent 48%); }
.listing-view {
  position: absolute; right: 14px; bottom: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  font-family: var(--font-head); font-size: 12px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(10px); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.22,1,.36,1), background 0.3s ease;
}
.listing-view svg { width: 13px; height: 13px; }
.listing-card:hover .listing-view, .listing-card:focus-visible .listing-view { opacity: 1; transform: none; }
.listing-card:hover .listing-view { background: var(--silver-gradient); border-color: transparent; }
@media (hover: none) { .listing-view { opacity: 1; transform: none; } }
.listing-price { font-size: 19px; }
.listing-body h3 { transition: color 0.25s ease; }
.listing-card:hover .listing-body h3 { color: var(--silver-deep); }

.idx-strip {
  margin-top: 40px; display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center;
  padding: 22px 26px; border-radius: 20px; background: #0c0c0c; color: #fff; position: relative; overflow: hidden; isolation: isolate;
  box-shadow: 0 24px 50px rgba(10,10,10,0.2);
}
.idx-strip::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(500px circle at 0% 0%, rgba(180,141,58,0.35), transparent 60%), radial-gradient(400px circle at 100% 100%, rgba(180,141,58,0.22), transparent 60%); }
.idx-strip .idx-ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--silver-gradient); box-shadow: 0 10px 26px rgba(180,141,58,0.4); }
.idx-strip .idx-ic svg { width: 26px; height: 26px; color: #fff; }
.idx-strip b { display: block; font-family: var(--font-head); font-size: 18px; font-weight: 600; }
.idx-strip p { margin-top: 4px; font-size: 14px; color: rgba(255,255,255,0.74); }
.idx-strip .btn-outline { color: #fff; border-color: rgba(201,162,74,0.6); background: rgba(255,255,255,0.06); }
.idx-strip .btn-outline:hover { border-color: var(--champagne); }
@media (max-width: 760px) { .idx-strip { grid-template-columns: 1fr; text-align: center; justify-items: center; } }

/* ==========================================================================
   BROKER SPOTLIGHT (homepage + about)
   ========================================================================== */
.ck-about .about-wrap { align-items: center; grid-template-columns: 0.95fr 1.05fr; gap: 72px; }
.about-visual-fx { overflow: visible; border: 0; background: none; box-shadow: none; }
.about-visual-fx::after { display: none; }
.av-frame { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 34px 70px rgba(10,10,10,0.26); }
.av-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; animation: ck-portrait 22s ease-in-out infinite alternate; }
@keyframes ck-portrait { from { transform: scale(1.02); } to { transform: scale(1.09) translate3d(0,-1%,0); } }
.av-frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-image: linear-gradient(120deg, transparent 42%, rgba(255,255,255,0.2) 50%, transparent 58%);
  background-repeat: no-repeat; background-size: 260% 160%; background-position: -60% 50%; animation: card-shine 6s ease-in-out infinite;
}
.av-ring { position: absolute; inset: -14px; border-radius: 32px; border: 1px solid rgba(180,141,58,0.28); pointer-events: none; }
.av-ring::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--glow-angle), transparent 0%, #070707 10%, #0c0c0c 18%, transparent 30%, transparent 70%, #070707 82%, #0c0c0c 90%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: glow-spin 5s linear infinite; }
.about-visual-fx .about-visual-badge { left: 18px; bottom: 18px; }
.av-float {
  position: absolute; z-index: 4; right: -18px; top: 28px;
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px;
  background: rgba(255,255,255,0.95); border: 1px solid var(--border); box-shadow: 0 18px 40px rgba(10,10,10,0.18);
  animation: ck-bob 5s ease-in-out infinite;
}
.av-float b { font-family: var(--font-head); font-size: 22px; font-weight: 600; color: var(--silver-deep); line-height: 1; }
.av-float span { font-size: 11.5px; color: var(--ink-muted); line-height: 1.3; }
.av-float.av-float-2 { top: auto; right: auto; left: -18px; bottom: 100px; animation-delay: -2.5s; }
.av-float .g-stars { color: var(--gold); letter-spacing: 0.08em; font-size: 12px; display: block; }
@keyframes ck-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@media (max-width: 1100px) { .av-float { right: -6px; } .av-float.av-float-2 { left: -6px; } .ck-about .about-wrap { gap: 48px; } }
@media (max-width: 900px) { .about-visual-fx { max-width: 420px; margin: 0 auto 10px; width: 100%; } .ck-about .about-copy { text-align: center; } .ck-about .hero-actions { justify-content: center; } }
@media (max-width: 480px) { .av-float { right: 8px; top: 12px; padding: 10px 12px; } .av-float.av-float-2 { left: 8px; bottom: 84px; } .av-float b { font-size: 18px; } .av-ring { inset: -8px; } }

.yp-points { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; text-align: left; }
.yp-point {
  position: relative; padding: 18px 18px 18px 60px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border);
  transition: transform 0.35s cubic-bezier(.22,1,.36,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.yp-point svg { position: absolute; left: 16px; top: 18px; width: 20px; height: 20px; padding: 6px; box-sizing: content-box; color: var(--silver-deep); background: rgba(180,141,58,0.1); border-radius: 10px; transition: background 0.3s ease, color 0.3s ease, transform 0.45s cubic-bezier(.34,1.56,.64,1); }
.yp-point b { display: block; font-family: var(--font-head); font-size: 14.5px; font-weight: 600; color: var(--ink); }
.yp-point span { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-muted); line-height: 1.55; }
@media (hover: hover) { .yp-point:hover { transform: translateY(-4px); border-color: rgba(180,141,58,0.4); box-shadow: 0 16px 34px rgba(10,10,10,0.1); } .yp-point:hover svg { background: var(--silver-gradient); color: #fff; transform: rotate(-8deg) scale(1.08); } }
@media (max-width: 560px) { .yp-points { grid-template-columns: 1fr; } }

/* ==========================================================================
   PROCESS — "Your path to the front door" pinned journey (Angel system,
   4 steps). JS: PROCESS JOURNEY block in script.js.
   ========================================================================== */
.phz { padding: 0; background: linear-gradient(180deg, #ffffff 0%, #faf9f4 100%); color: var(--ink); overflow: clip; border-top: 1px solid var(--border); }
.phz-scroll { position: relative; }
.phz-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 100px 0 40px; }
.phz-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background-image: linear-gradient(rgba(180,141,58,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(180,141,58,0.07) 1px, transparent 1px); background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 60%, #000 10%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 10%, transparent 75%);
  animation: funnel-grid-drift 18s linear infinite; }
.phz-glow { position: absolute; inset: 0; pointer-events: none; }
.phz-glow::before, .phz-glow::after { content: ''; position: absolute; border-radius: 50%; filter: blur(40px); background: radial-gradient(circle, rgba(180,141,58,0.2), transparent 65%); animation: ck-aurora 20s ease-in-out infinite; }
.phz-glow::before { width: 620px; height: 620px; left: -160px; top: -200px; }
.phz-glow::after { width: 520px; height: 520px; right: -140px; bottom: -220px; animation-delay: -9s; }
.phz-bignum { position: absolute; right: -1vw; bottom: -9vh; z-index: 0; pointer-events: none; font-family: var(--font-head); font-weight: 700; font-size: clamp(220px, 30vw, 460px); line-height: 1; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(180,141,58,0.14); transition: opacity 0.35s ease, transform 0.5s cubic-bezier(.22,1,.36,1), filter 0.35s ease; }
.phz-bignum.is-swap { opacity: 0; transform: translateY(30px); filter: blur(8px); }
.phz-head { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; width: 100%; }
.phz-head h2 { margin-top: 14px; color: var(--ink); font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; }
.phz-head p { margin-top: 12px; color: var(--ink-muted); font-size: 15.5px; max-width: 520px; }
.phz-counter { font-family: var(--font-head); display: flex; align-items: baseline; gap: 8px; flex: none; }
.phz-counter b { font-size: 56px; font-weight: 600; line-height: 1; background: linear-gradient(180deg, var(--silver), var(--silver-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.phz-counter span { font-size: 16px; color: var(--ink-faint); }
.phz-rail-wrap { position: relative; z-index: 2; width: 100%; margin-top: 34px; margin-bottom: 52px; }
.phz-rail { position: relative; height: 2px; margin: 0 14px; background: rgba(12,12,12,0.1); border-radius: 2px; }
.phz-rail-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: 2px; background: linear-gradient(90deg, #0c0c0c, #070707); box-shadow: 0 0 10px rgba(180,141,58,0.5); }
.phz-rider { position: absolute; top: 50%; left: 0%; z-index: 3; width: 46px; height: 46px; margin: -23px 0 0 -23px; display: grid; place-items: center; border-radius: 14px; background: #fff; border: 1px solid rgba(180,141,58,0.25); box-shadow: 0 12px 26px rgba(10,10,10,0.16), 0 0 0 6px rgba(180,141,58,0.12); animation: ck-bob 2.6s ease-in-out infinite; }
.phz-rider img { width: 34px; height: 34px; object-fit: contain; display: block; }
.phz-node { position: absolute; top: 50%; z-index: 2; transform: translate(-50%, -7px); display: flex; flex-direction: column; align-items: center; gap: 24px; margin: 0; padding: 0; border: 0; background: none; color: var(--ink-faint); font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; -webkit-appearance: none; appearance: none; cursor: pointer; transition: color 0.3s ease; }
.phz-node:nth-of-type(1) { left: 0%; } .phz-node:nth-of-type(2) { left: 33.333%; } .phz-node:nth-of-type(3) { left: 66.666%; } .phz-node:nth-of-type(4) { left: 100%; }
.phz-node i { display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid rgba(12,12,12,0.18); transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.4s cubic-bezier(.34,1.56,.64,1); }
.phz-node span { white-space: nowrap; }
.phz-node.is-on { color: var(--ink); }
.phz-node.is-on i { background: var(--silver); border-color: var(--champagne); box-shadow: 0 0 0 5px rgba(180,141,58,0.22), 0 0 16px rgba(180,141,58,0.7); transform: scale(1.15); }
@media (hover: hover) { .phz-node:hover { color: var(--silver-deep); } }
.phz-viewport { position: relative; z-index: 2; padding: 0 max(32px, calc((100% - 1180px) / 2 + 32px)); }
.phz-track { display: flex; gap: 28px; width: max-content; will-change: transform; }
.phz-card { position: relative; flex: none; width: clamp(320px, 30vw, 430px); overflow: hidden; isolation: isolate; border-radius: 22px; background: #fff; border: 1px solid var(--border); box-shadow: 0 14px 34px rgba(10,10,10,0.08); opacity: 0.6; transform: scale(0.93); transform-origin: center bottom; transition: opacity 0.55s ease, transform 0.7s cubic-bezier(.22,1,.36,1), box-shadow 0.5s ease, border-color 0.5s ease; }
.phz-card.is-past { opacity: 0.72; }
.phz-card.is-active { opacity: 1; transform: scale(1); border-color: rgba(180,141,58,0.6); box-shadow: 0 30px 60px rgba(10,10,10,0.14), 0 0 0 1px rgba(180,141,58,0.2), 0 0 44px rgba(180,141,58,0.14); }
.phz-card::before { content: ''; position: absolute; inset: -1px; z-index: 3; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--glow-angle), transparent 0%, #070707 10%, #0c0c0c 18%, transparent 30%, transparent 70%, #070707 82%, #0c0c0c 90%, transparent 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.5s ease; animation: glow-spin 3s linear infinite; }
.phz-card.is-active::before { opacity: 1; }
.phz-media { position: relative; height: 210px; overflow: hidden; }
.phz-media::before { content: ''; position: absolute; inset: -10px; z-index: 0; background-image: var(--photo); background-size: cover; background-position: center; transform: scale(1.04); transition: transform 1.6s cubic-bezier(.22,1,.36,1); }
.phz-card.is-active .phz-media::before { transform: scale(1.14); }
.phz-media::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0.97) 100%); }
.phz-num { position: absolute; left: 22px; bottom: -6px; z-index: 2; font-family: var(--font-head); font-weight: 700; font-size: 84px; line-height: 1; letter-spacing: -0.04em; color: rgba(255,255,255,0.45); -webkit-text-stroke: 1.5px rgba(180,141,58,0.6); transition: color 0.5s ease, -webkit-text-stroke-color 0.5s ease; }
.phz-card.is-active .phz-num { color: var(--silver); -webkit-text-stroke-color: var(--silver-deep); text-shadow: 0 8px 24px rgba(180,141,58,0.3); }
.phz-badge { position: absolute; right: 18px; top: 18px; z-index: 2; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--silver-gradient); box-shadow: 0 10px 24px rgba(10,10,10,0.45); transition: transform 0.5s cubic-bezier(.34,1.56,.64,1); }
.phz-badge svg { width: 24px; height: 24px; flex: none; }
.phz-card.is-active .phz-badge { transform: rotate(-8deg) scale(1.08); }
.phz-body { position: relative; z-index: 2; padding: 20px 24px 26px; background: #fff; }
.phz-body h3 { color: var(--ink); font-size: 21px; }
.phz-body p { margin-top: 10px; color: var(--ink-muted); font-size: 14.5px; line-height: 1.65; }
.phz-tags { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.phz-tags li { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; color: var(--silver-deep); background: rgba(180,141,58,0.08); border: 1px solid rgba(180,141,58,0.22); }
@media (max-height: 760px) and (min-width: 901px) {
  .phz-pin { padding-top: 92px; }
  .phz-media { height: 120px; } .phz-num { font-size: 60px; } .phz-body { padding: 16px 22px 20px; } .phz-body p { font-size: 13.5px; }
  .phz-rail-wrap { margin-top: 20px; margin-bottom: 52px; } .phz-head p { display: none; }
}
.phz.is-vertical .phz-pin { position: relative; height: auto; overflow: visible; padding: 90px 0 80px; }
.phz.is-vertical .phz-bignum, .phz.is-vertical .phz-rail-wrap, .phz.is-vertical .phz-counter { display: none; }
.phz.is-vertical .phz-head { text-align: center; justify-content: center; }
.phz.is-vertical .phz-head p { margin-left: auto; margin-right: auto; display: block; }
.phz.is-vertical .phz-viewport { padding: 0 20px; margin-top: 40px; }
.phz.is-vertical .phz-track { --vfill: 0%; flex-direction: column; gap: 22px; width: 100%; max-width: 560px; margin: 0 auto; padding-left: 40px; position: relative; transform: none !important; }
.phz.is-vertical .phz-track::before, .phz.is-vertical .phz-track::after { content: ''; position: absolute; left: 13px; top: 8px; width: 2px; border-radius: 2px; }
.phz.is-vertical .phz-track::before { bottom: 8px; background: rgba(12,12,12,0.1); }
.phz.is-vertical .phz-track::after { height: calc(var(--vfill) - 16px); max-height: calc(100% - 16px); background: linear-gradient(180deg, #0c0c0c, #070707); box-shadow: 0 0 12px rgba(180,141,58,0.6); }
.phz.is-vertical .phz-card { width: 100%; overflow: visible; opacity: 0.62; transform: none; }
.phz.is-vertical .phz-card > .phz-media { border-radius: 22px 22px 0 0; height: 170px; }
.phz.is-vertical .phz-card > .phz-body { border-radius: 0 0 22px 22px; }
.phz.is-vertical .phz-card::after { content: ''; position: absolute; left: -34px; top: 24px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid rgba(12,12,12,0.18); transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease; }
.phz.is-vertical .phz-card.is-lit { opacity: 1; }
.phz.is-vertical .phz-card.is-lit::after { background: var(--silver); border-color: var(--champagne); box-shadow: 0 0 0 5px rgba(180,141,58,0.22), 0 0 14px rgba(180,141,58,0.7); }
.phz.is-vertical .phz-card.is-lit .phz-media::before { transform: scale(1.1); }
.phz.is-vertical .phz-card.is-lit .phz-num { color: var(--silver); -webkit-text-stroke-color: var(--silver-deep); }
@media (max-width: 560px) {
  .phz.is-vertical .phz-track { padding-left: 32px; }
  .phz.is-vertical .phz-track::before, .phz.is-vertical .phz-track::after { left: 9px; }
  .phz.is-vertical .phz-card::after { left: -30px; }
  .phz-body { padding: 18px 20px 22px; } .phz-num { font-size: 68px; }
}

/* ==========================================================================
   WHY — translucent photo cards (blur + veil on the photo itself)
   ========================================================================== */
.photo-why { isolation: isolate; }
.pc-photo { position: absolute; inset: -14px; z-index: 0; pointer-events: none; background-image: var(--photo); background-size: cover; background-position: center; filter: blur(2.5px); transform: scale(1.02); animation: ck-drift 16s ease-in-out infinite alternate; transition: filter 0.5s ease; }
@keyframes ck-drift { from { transform: scale(1.02) translate3d(0,0,0); } to { transform: scale(1.12) translate3d(-2%, -2%, 0); } }
.pc-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: background 0.4s ease; }
.why-card.photo-why { background-color: #fff; text-align: left; padding: 28px 26px 30px; min-height: 320px; display: flex; flex-direction: column; }
.why-card.photo-why .pc-veil { background: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.86) 50%, rgba(255,255,255,0.95) 100%); }
.why-card.photo-why:hover .pc-veil { background: linear-gradient(180deg, rgba(255,255,255,0.46) 0%, rgba(255,255,255,0.82) 52%, rgba(255,255,255,0.95) 100%); }
.why-card.photo-why:hover .pc-photo { filter: blur(0.5px); }
.why-card.photo-why > :not(.pc-photo):not(.pc-veil) { position: relative; z-index: 2; }
.why-card.photo-why .why-num { margin: 0 0 auto; }
.why-card.photo-why h3, .why-card.photo-why p { text-align: left; }
.why-card.photo-why h3 { margin-top: 80px; font-size: 18px; }
.why-card.photo-why p { color: var(--ink-soft); }

/* ==========================================================================
   VALUATION BAND (sellers)
   ========================================================================== */
.value-band { display: grid; grid-template-columns: 1fr 1fr; border-radius: 26px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); box-shadow: 0 30px 66px rgba(10,10,10,0.12); }
.value-copy { padding: 60px 56px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.value-copy h2 { margin-top: 16px; font-size: clamp(28px, 3.3vw, 42px); line-height: 1.1; }
.value-copy > p { margin-top: 16px; color: var(--ink-muted); font-size: 15.5px; line-height: 1.75; max-width: 460px; }
.value-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.value-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.value-list svg { flex: none; width: 14px; height: 14px; padding: 5px; box-sizing: content-box; margin-top: -1px; border-radius: 50%; color: #fff; background: var(--silver-gradient); }
.value-copy .hero-actions { justify-content: flex-start; margin-top: 30px; }
.value-visual { position: relative; min-height: 480px; overflow: hidden; }
.value-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: ck-portrait 24s ease-in-out infinite alternate; }
.value-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,7,7,0.42), transparent 48%); }
.value-chip { position: absolute; z-index: 2; left: 26px; bottom: 26px; right: 26px; max-width: 340px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 20px 44px rgba(0,0,0,0.25); animation: ck-bob 6s ease-in-out infinite; }
.value-chip .vc-ic { width: 46px; height: 46px; border-radius: 14px; flex: none; display: grid; place-items: center; background: var(--silver-gradient); color: #fff; }
.value-chip .vc-ic svg { width: 22px; height: 22px; }
.value-chip b { display: block; font-family: var(--font-head); font-size: 15px; font-weight: 600; color: var(--ink); }
.value-chip span { display: block; font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }
@media (max-width: 900px) { .value-band { grid-template-columns: 1fr; } .value-visual { min-height: 320px; order: -1; } .value-copy { padding: 40px 28px; text-align: center; align-items: center; } .value-copy .hero-actions { justify-content: center; } .value-list { text-align: left; } }

/* ==========================================================================
   CAREERS BAND (Angel system, charcoal + copper)
   ========================================================================== */
.careers-band { position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 34px 70px rgba(8,8,8,0.28); color: #fff; }
.careers-bg { position: absolute; inset: -16px; z-index: 0; background-image: var(--photo); background-size: cover; background-position: center 35%; filter: blur(2.5px); animation: ck-portrait 28s ease-in-out infinite alternate; }
.careers-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(8,8,8,0.93) 0%, rgba(8,8,8,0.8) 48%, rgba(8,8,8,0.5) 100%), rgba(8,8,8,0.1); }
.careers-grid-lines { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.38; background-image: linear-gradient(rgba(180,141,58,0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(180,141,58,0.16) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 80% 50%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 80% 50%, #000 0%, transparent 70%); animation: funnel-grid-drift 14s linear infinite; }
.careers-orbs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.careers-orbs i { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(180,141,58,0.42), transparent 65%); filter: blur(14px); animation: ck-aurora 14s ease-in-out infinite; }
.careers-orbs i:nth-child(1) { width: 320px; height: 320px; right: 6%; top: -90px; }
.careers-orbs i:nth-child(2) { width: 220px; height: 220px; right: 32%; bottom: -80px; animation-delay: -5s; }
.careers-orbs i:nth-child(3) { width: 140px; height: 140px; left: 40%; top: 20%; opacity: 0.6; animation-delay: -9s; }
.careers-content { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; padding: 64px 56px; }
.careers-copy .eyebrow { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); color: #fff; }
.careers-copy h2 { margin-top: 16px; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; color: #fff; }
.careers-copy p { margin-top: 16px; font-size: 16px; line-height: 1.75; color: rgba(255,255,255,0.82); max-width: 560px; }
.careers-copy .hero-actions { justify-content: flex-start; margin-top: 28px; }
.careers-band .btn-outline { color: #fff; border-color: rgba(201,162,74,0.55); background: rgba(255,255,255,0.06); }
.careers-band .btn-outline:hover { border-color: var(--champagne); }
.careers-path { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.careers-path::before { content: ''; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 2px; background: linear-gradient(180deg, transparent, var(--champagne), transparent); background-size: 100% 50%; background-repeat: no-repeat; animation: ck-path 2.8s linear infinite; }
@keyframes ck-path { from { background-position: 0 -100%; } to { background-position: 0 200%; } }
.careers-path li { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px 16px 14px; border-radius: 16px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), background 0.3s ease, border-color 0.3s ease; animation: ck-bob 6s ease-in-out infinite; animation-delay: calc(var(--i) * -2s); }
@media (hover: hover) { .careers-path li:hover { transform: translateX(6px); background: rgba(255,255,255,0.14); border-color: rgba(180,141,58,0.55); } }
.cp-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-size: 11px; font-weight: 700; background: var(--silver-gradient); color: #fff; box-shadow: 0 0 0 5px rgba(180,141,58,0.25); }
.careers-path b { display: block; font-family: var(--font-head); font-size: 15.5px; font-weight: 600; color: #fff; }
.careers-path li > div > span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.75); }
@media (max-width: 900px) { .careers-content { grid-template-columns: 1fr; padding: 44px 24px; gap: 32px; } .careers-copy { text-align: center; } .careers-copy p { margin-left: auto; margin-right: auto; } .careers-copy .hero-actions { justify-content: center; } .careers-veil { background: linear-gradient(180deg, rgba(8,8,8,0.9), rgba(8,8,8,0.8)); } }

/* ==========================================================================
   REVIEWS — real Google reviews, 3-up grid
   ========================================================================== */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.review-grid .review-card { flex: none; width: auto; }
@media (min-width: 901px) { .review-grid .review-card:nth-child(2) { margin-top: 22px; } }
.g-badge { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border); box-shadow: 0 12px 30px rgba(10,10,10,0.08); font-size: 14px; color: var(--ink-soft); }
.g-badge b { font-family: var(--font-head); font-size: 20px; color: var(--ink); }
.g-badge .g-stars { color: var(--gold); letter-spacing: 0.1em; }
.g-badge a { color: var(--silver-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.reviews-head-row { display: flex; justify-content: center; margin: -26px 0 44px; }
@media (max-width: 900px) { .review-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } .g-badge { border-radius: 18px; } }

/* ==========================================================================
   Q1 FUNNEL TEASER (final CTA — no office address yet, so no map)
   ========================================================================== */
.qual-funnel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 22px; padding: 34px; box-shadow: 0 24px 50px var(--shadow); text-align: left; width: 100%; }
.qual-funnel-head h3 { margin-top: 12px; font-size: 22px; }
.qual-funnel-head p { margin-top: 8px; color: var(--ink-muted); font-size: 14px; }
.qual-q { font-family: var(--font-head); font-weight: 600; font-size: 15.5px; color: var(--ink); margin: 22px 0 14px; }
.qual-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qual-choice { display: flex; align-items: center; gap: 10px; text-align: left; padding: 15px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-raised); color: var(--ink-soft); font-family: var(--font-body); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, color 0.25s ease; }
.qual-choice svg { width: 20px; height: 20px; color: var(--silver-deep); flex: none; }
@media (hover: hover) { .qual-choice:hover { border-color: rgba(180,141,58,0.5); background: rgba(180,141,58,0.07); transform: translateY(-2px); color: var(--ink); } }
.qual-choice.is-picked { border-color: var(--silver); background: rgba(180,141,58,0.12); color: var(--ink); }
.qual-embed-note { margin-top: 18px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.6; }
.qual-embed-note a { color: var(--silver-deep); font-weight: 600; }
@media (max-width: 480px) { .qual-funnel { padding: 26px 20px; } .qual-choices { grid-template-columns: 1fr; } }
.ck-contact-lines { display: grid; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.ck-contact-lines a { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-soft); font-size: 14.5px; font-weight: 500; transition: color 0.2s ease; }
.ck-contact-lines a:hover { color: var(--silver-deep); }
.ck-contact-lines svg { width: 18px; height: 18px; padding: 8px; box-sizing: content-box; border-radius: 12px; color: var(--silver-deep); background: rgba(180,141,58,0.1); flex: none; }
@media (max-width: 900px) { .ck-contact-lines { justify-items: center; } }

/* ==========================================================================
   Misc page components (careers, about, buyers/sellers, team)
   ========================================================================== */
.toolkit-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.toolkit-list li { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border); font-size: 14.5px; color: var(--ink-soft); font-weight: 500; transition: transform 0.35s cubic-bezier(.22,1,.36,1), border-color 0.3s ease; }
.toolkit-list li svg { flex: none; width: 18px; height: 18px; padding: 7px; box-sizing: content-box; border-radius: 10px; color: #fff; background: var(--silver-gradient); }
@media (hover: hover) { .toolkit-list li:hover { transform: translateX(6px); border-color: rgba(180,141,58,0.4); } }
@media (max-width: 700px) { .toolkit-list { grid-template-columns: 1fr; } }
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split-photo { position: relative; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 64px rgba(10,10,10,0.18); aspect-ratio: 5 / 4; }
.split-photo img { width: 100%; height: 100%; object-fit: cover; animation: ck-portrait 24s ease-in-out infinite alternate; }
.split-copy h2 { margin-top: 14px; font-size: clamp(26px, 3vw, 38px); line-height: 1.14; }
.split-copy > p { margin-top: 16px; color: var(--ink-muted); font-size: 15.5px; line-height: 1.75; }
.split-copy .hero-actions { justify-content: flex-start; }
@media (max-width: 900px) { .split-2 { grid-template-columns: 1fr; gap: 36px; } .split-copy { text-align: center; } .split-copy .hero-actions { justify-content: center; } .split-copy .toolkit-list, .split-copy .value-list { text-align: left; } }
.mvv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.mvv-card { position: relative; overflow: hidden; padding: 28px 24px; border-radius: 18px; background: var(--bg-card); border: 1px solid var(--border); transition: transform 0.35s cubic-bezier(.22,1,.36,1), border-color 0.3s ease, box-shadow 0.3s ease; }
.mvv-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--silver-deep); background: rgba(180,141,58,0.1); margin-bottom: 18px; transition: background 0.3s ease, color 0.3s ease, transform 0.45s cubic-bezier(.34,1.56,.64,1); }
.mvv-ic svg { width: 22px; height: 22px; }
.mvv-card h3 { font-size: 17px; margin-bottom: 8px; }
.mvv-card p { font-size: 14px; color: var(--ink-muted); line-height: 1.65; }
@media (hover: hover) { .mvv-card:hover { transform: translateY(-6px); border-color: rgba(180,141,58,0.4); box-shadow: 0 22px 46px rgba(10,10,10,0.1); } .mvv-card:hover .mvv-ic { background: var(--silver-gradient); color: #fff; transform: rotate(-8deg) scale(1.08); } }
@media (max-width: 980px) { .mvv-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mvv-grid { grid-template-columns: 1fr; } }
.lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 860px; margin: 0 auto; }
@media (max-width: 700px) { .lang-grid { grid-template-columns: 1fr; } }

/* Team — featured broker card + open seats */
.team-lead { display: grid; grid-template-columns: 0.9fr 1.1fr; border-radius: 26px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); box-shadow: 0 30px 66px rgba(10,10,10,0.12); margin-bottom: 30px; }
.team-lead-photo { position: relative; display: block; min-height: 480px; overflow: hidden; background: #181818; }
.team-lead-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
@media (hover: hover) { .team-lead:hover .team-lead-photo > img { transform: scale(1.05); } }
.team-lead-contact { position: absolute; top: 16px; right: 16px; z-index: 3; display: flex; gap: 8px; }
.team-lead-body { padding: 52px 48px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.team-lead-body h2 { margin-top: 14px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; }
.team-lead-role { display: block; margin-top: 8px; font-family: var(--font-head); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--silver-deep); }
.team-lead-body p { margin-top: 18px; color: var(--ink-muted); font-size: 15.5px; line-height: 1.75; }
.team-lead-body .hero-actions { justify-content: flex-start; margin-top: 26px; }
.team-lead-langs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.team-lead-langs span { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; color: var(--silver-deep); background: rgba(180,141,58,0.08); border: 1px solid rgba(180,141,58,0.22); }
@media (max-width: 900px) { .team-lead { grid-template-columns: 1fr; } .team-lead-photo { min-height: 400px; } .team-lead-body { padding: 36px 26px; text-align: center; align-items: center; } .team-lead-body .hero-actions { justify-content: center; } .team-lead-langs { justify-content: center; } }
.team-card-open .team-card-photo img { width: 58px; height: auto; opacity: 0.5; }

/* Funnel final step — named confirmation + direct-contact actions */
.funnel-direct { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px auto 0; max-width: 520px; }
.funnel-direct a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border); font-family: var(--font-head); font-size: 13px; font-weight: 600; color: var(--ink); transition: transform 0.3s cubic-bezier(.22,1,.36,1), border-color 0.25s ease, box-shadow 0.25s ease; }
.funnel-direct a svg { width: 22px; height: 22px; padding: 10px; box-sizing: content-box; border-radius: 14px; color: #fff; background: var(--silver-gradient); }
.funnel-direct a.wa svg { background: #25D366; }
@media (hover: hover) { .funnel-direct a:hover { transform: translateY(-4px); border-color: rgba(180,141,58,0.45); box-shadow: 0 16px 34px rgba(10,10,10,0.1); } }
@media (max-width: 420px) { .funnel-direct { grid-template-columns: 1fr; } .funnel-direct a { flex-direction: row; justify-content: center; padding: 12px; } }
.calendly-slot:empty { display: none; }
.calendly-slot { margin-top: 26px; }
.funnel-visitor:empty { display: none; }

/* Page header — Ken Burns on photo headers */
.page-header-photo::before { inset: -12px; animation: ck-portrait 26s ease-in-out infinite alternate; }
.page-header-photo { padding: 172px 0 100px; }
@media (max-width: 640px) { .page-header-photo { padding: 136px 0 72px; } }
.page-header:not(.page-header-photo) { padding-top: 150px; }

/* Search page — quick search bar pinned under the header */
.search-bar { grid-template-columns: 1.4fr 1fr 1fr 0.8fr 0.8fr auto; }
.search-hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.search-hero-chips a { padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }
@media (hover: hover) { .search-hero-chips a:hover { background: rgba(180,141,58,0.3); border-color: var(--champagne); transform: translateY(-2px); } }

@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-slide.is-active, .hero-slide.is-prev, .hero-aurora i, .hero-sweep, .hero-search, .hero-search::before, .hero-dot.is-active::after,
  .ck-ticker-track, .av-frame img, .av-frame::after, .av-ring::before, .av-float,
  .phz-grid, .phz-glow::before, .phz-glow::after, .phz-rider, .phz-card::before, .pc-photo, .value-visual img, .value-chip,
  .careers-bg, .careers-grid-lines, .careers-orbs i, .careers-path::before, .careers-path li, .split-photo img, .page-header-photo::before { animation: none !important; }
  .hero-slide { transition: none; }
  .hero h1 .hw { opacity: 1; transform: none; filter: none; animation: none; }
  .reveal.pre-reveal:not(.is-visible) :is(.svc-grid, .why-grid, .yp-points, .review-grid, .perk-grid, .process-grid, .toolkit-list, .value-list, .lang-grid, .mvv-grid) > * { opacity: 1; transform: none; filter: none; }
  .section-head h2::after { transform: scaleX(1); transition: none; }
  .svc-card > img, .team-lead-photo > img { transition: none; }
}
@keyframes card-shine { 0%, 62% { background-position: -60% 50%; } 100% { background-position: 160% 50%; } }

/* ---- Inline icon sizing (build.py injects icons without width/height) ---- */
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-lg svg { width: 18px; height: 18px; }
.social-icon svg { width: 18px; height: 18px; }
.svc-tag svg { width: 13px; height: 13px; }
.perk-tag { display: inline-flex; align-items: center; gap: 7px; }
.perk-tag svg { width: 15px; height: 15px; }
.review-top > svg:last-child { margin-left: auto; width: 18px; height: 18px; flex: none; }
.funnel-success-icon svg { width: 26px; height: 26px; }
.contact-icon svg { width: 18px; height: 18px; }
.qual-choice span { pointer-events: none; }
.form-note { margin-top: 14px; font-size: 13px; color: var(--silver-deep); text-align: center; }
.form-note[hidden] { display: none; }
.contact-info-col h2 { line-height: 1.15; }
.field select, .search-bar select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238c5523' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.funnel-chips.is-shake { animation: ck-shake 0.45s ease; }
@keyframes ck-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.funnel-step .funnel-direct a span { display: block; }
#funnelMailAnswers { display: flex; }
.team-lead .social-icons { margin-top: 22px; flex-wrap: wrap; }
.contact-cta-copy h2 { line-height: 1.12; }
@media (prefers-reduced-motion: reduce) { .funnel-chips.is-shake { animation: none; } }

/* ---- QA round 1 fixes ---- */
/* Stacked lockup needs height to stay legible (wordmark sits under the key) */
.site-nav__logo .logo-light, .site-nav__logo .logo-dark { height: 68px; }
.site-nav.is-scrolled .site-nav__logo .logo-light, .site-nav.is-scrolled .site-nav__logo .logo-dark { height: 54px; }
@media (max-width: 1360px) and (min-width: 1024px) { .site-nav__logo .logo-light, .site-nav__logo .logo-dark { height: 62px; } }
@media (max-width: 640px) {
  .site-nav__logo .logo-light, .site-nav__logo .logo-dark { height: 54px; }
  .site-nav.is-scrolled .site-nav__logo .logo-light, .site-nav.is-scrolled .site-nav__logo .logo-dark { height: 48px; }
  .site-nav__pill.is-mobile-open, .site-nav.is-scrolled .site-nav__pill.is-mobile-open { top: 80px; }
}
/* Slide caption clears the chat launcher */
.hero-caption { right: 104px; }
/* Pinned journey: the .wrap is a flex item with auto margins — give it full width */
.phz-pin > .wrap { width: 100%; }
/* Why cards: keep the photo vibrant, fade to white only behind the text */
.why-card.photo-why .pc-photo { filter: blur(1px) saturate(1.08); }
.why-card.photo-why .pc-veil { background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.32) 32%, rgba(255,255,255,0.9) 60%, rgba(255,255,255,0.97) 100%); }
.why-card.photo-why:hover .pc-veil { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.22) 32%, rgba(255,255,255,0.88) 60%, rgba(255,255,255,0.97) 100%); }
.why-card.photo-why:hover .pc-photo { filter: blur(0) saturate(1.12); }
.why-card.photo-why .why-num { background: rgba(255,255,255,0.92); box-shadow: 0 6px 16px rgba(0,0,0,0.12); }
.why-card.photo-why h3 { margin-top: 110px; }
/* Review quote mark sits inside the card instead of being cut at the top edge */
.review-card::after { top: 6px; font-size: 104px; }
/* Mobile hero eyebrow stays on one line */
@media (max-width: 480px) {
  .hero-copy .eyebrow { font-size: 10px; letter-spacing: 0.07em; padding: 6px 12px; white-space: nowrap; }
  .hero-copy .lede { font-size: 15.5px; line-height: 1.7; }
}
/* Rail end labels anchor inward so they never hang past the window edge */
.phz-node:first-of-type { align-items: flex-start; transform: translate(-7px, -7px); }
.phz-node:last-of-type { align-items: flex-end; transform: translate(calc(-100% + 7px), -7px); }
.why-card.photo-why .why-num { margin: 0; }
.why-card.photo-why h3 { margin-top: 118px; }
@media (max-width: 900px) { .ck-about .about-wrap { grid-template-columns: 1fr; gap: 56px; } }
@media (max-width: 900px) { .g-badge .g-sep { display: none; } .g-badge a { flex-basis: 100%; text-align: center; } }
.page-header-photo.ph-light .eyebrow { color: var(--silver-deep); background: rgba(255,255,255,0.7); border-color: rgba(180,141,58,0.35); } .page-header-photo.ph-light .eyebrow::before { background: var(--silver); box-shadow: 0 0 0 3px rgba(180,141,58,0.16); }
@media (max-width: 480px) {
  .team-lead .social-icons { gap: 8px; justify-content: center; flex-wrap: nowrap; }
  .team-lead .social-icon { width: 38px; height: 38px; }
  .team-card-open .team-card-photo { aspect-ratio: 16 / 7; }
}
.community-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .community-grid.cols-3 { grid-template-columns: 1fr; } .community-grid.cols-3 .community-card { aspect-ratio: 16 / 10; } }
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer-brand, .footer-top > .footer-col:last-child { grid-column: 1 / -1; }
  .footer-logo img { height: 76px; }
}

/* ==========================================================================
   COPPER KEY — ROUND 2 (2026-10-07): translucent photo recipe everywhere
   (JD Lendings hero: blur + warm veil ON the photo, never a frosted card),
   dark photo cards with hover reveal + cursor glare, Woodline-style funnel
   + Q1 card, Iverson-style reviews marquee, cleaner broker portrait,
   home-value tool. Fresh photography in assets/img/.
   ========================================================================== */

/* ---- Translucent recipe tokens (JD Lendings hero) ---- */
:root { --veil-a: rgba(7,7,7,0.62); --veil-b: rgba(7,7,7,0.42); --veil-c: rgba(7,7,7,0.3); --veil-flat: rgba(7,7,7,0.14); }

/* ---- Hero: blurred slideshow + warm veil (no white fade) ---- */
.hero-slide { filter: blur(3px) saturate(1.06); }
.hero-bg-overlay {
  background:
    linear-gradient(90deg, rgba(7,7,7,0.42) 0%, rgba(7,7,7,0.2) 45%, rgba(7,7,7,0.06) 100%),
    linear-gradient(0deg, var(--veil-a) 0%, var(--veil-b) 45%, var(--veil-c) 100%),
    var(--veil-flat);
}
@media (max-width: 1080px) { .hero-bg-overlay { background: linear-gradient(0deg, rgba(7,7,7,0.7) 0%, rgba(7,7,7,0.46) 50%, rgba(7,7,7,0.34) 100%), var(--veil-flat); } }
.hs-key { background: transparent; box-shadow: none; }
.hs-key img { width: 40px; height: 40px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.45)); }

/* ---- Page headers: every page uses the dark translucent photo header ---- */
.page-header-photo::before { filter: blur(3px) saturate(1.05); }
.page-header-photo::after { background: linear-gradient(0deg, var(--veil-a) 0%, var(--veil-b) 45%, var(--veil-c) 100%), var(--veil-flat); }

/* ---- Tilt cards: 3D tilt + lift only ---- */
/* (no cursor-following glare — tmack standing rule; tilt + lift only) */

/* ==========================================================================
   PHOTO CARDS — one dark translucent treatment for why / services /
   perks / process / values / toolkit cards. Markup: add class "pcard" and
   style="--photo:url(...)"; script.js injects the photo + veil layers.
   ========================================================================== */
.pcard {
  position: relative; overflow: hidden; isolation: isolate;
  background-color: #080808 !important; border: 1px solid rgba(255,255,255,0.08) !important; color: #fff;
  box-shadow: 0 22px 48px rgba(10,10,10,0.18);
  transition: transform 0.55s cubic-bezier(.22,1,.36,1), box-shadow 0.45s ease, border-color 0.35s ease;
}
.pcard .pc-photo {
  position: absolute; inset: -16px; z-index: 0; pointer-events: none;
  background-image: var(--photo); background-size: cover; background-position: var(--photo-pos, center);
  filter: blur(2.5px) saturate(1.08); transform: scale(1.04);
  transition: filter 0.7s ease, transform 1.4s cubic-bezier(.22,1,.36,1);
  animation: none;
}
.pcard .pc-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(8,8,8,0.9) 0%, rgba(8,8,8,0.62) 48%, rgba(8,8,8,0.32) 100%), rgba(8,8,8,0.1);
  transition: background 0.5s ease;
}
.pcard > :not(.pc-photo):not(.pc-veil):not(.pc-line) { position: relative; z-index: 2; }
.pcard::before { display: none; }
/* copper line draws along the bottom + conic ring on hover */
/* same line as the Services cards (.svc-card::after): pinned to the card's own padding (--pc-pad), rests at 18%, draws to full */
.pcard .pc-line { position: absolute; left: var(--pc-pad, 24px); right: var(--pc-pad, 24px); bottom: 0; height: 3px; z-index: 3; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #c9a24a, #b48d3a); transform: scaleX(0.18); transform-origin: left; transition: transform 0.6s cubic-bezier(.22,1,.36,1); }
.pcard .pc-ring { position: absolute; inset: -1px; z-index: 4; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity 0.5s ease;
  background: conic-gradient(from var(--glow-angle), transparent 0%, #070707 10%, #0c0c0c 18%, transparent 30%, transparent 70%, #070707 82%, #0c0c0c 90%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: glow-spin 3.2s linear infinite; }
.pcard h3, .pcard h4, .pcard b { color: #fff; }
.pcard p, .pcard li, .pcard span.pc-sub { color: rgba(255,255,255,0.84); }
.pcard .why-num, .pcard .process-num, .pcard .mvv-ic, .pcard .perk-tag { color: #fff; }
.pcard .why-num, .pcard .process-num { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin: 0; font-family: var(--font-head); font-size: 13px; font-weight: 600; opacity: 1; transition: transform 0.5s cubic-bezier(.34,1.56,.64,1), background 0.3s ease; }
.pcard .mvv-ic { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pcard .perk-tag { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 999px; padding: 6px 12px; font-size: 10.5px; letter-spacing: 0.1em; display: inline-flex; margin-bottom: 0; }
.pcard .pc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: auto; }
.pcard .pc-body { margin-top: 110px; transition: transform 0.5s cubic-bezier(.22,1,.36,1); }
.pcard.pcard-compact .pc-body { margin-top: 70px; }
.pcard .pc-arrow { position: absolute; right: 20px; bottom: 20px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--silver-gradient); box-shadow: 0 8px 20px rgba(180,141,58,0.4); opacity: 0; transform: translateY(8px) rotate(-45deg); transition: opacity 0.35s ease, transform 0.5s cubic-bezier(.34,1.56,.64,1); }
.pcard .pc-arrow svg { width: 15px; height: 15px; }
@media (hover: hover) {
  .pcard:hover { transform: translateY(-8px); box-shadow: 0 34px 66px rgba(10,10,10,0.3); border-color: rgba(201,162,74,0.35) !important; }
  .pcard:hover .pc-photo { filter: blur(0) saturate(1.14); transform: scale(1.12); }
  .pcard:hover .pc-veil { background: linear-gradient(0deg, rgba(8,8,8,0.9) 0%, rgba(8,8,8,0.5) 48%, rgba(8,8,8,0.08) 100%); }
  .pcard:hover .pc-line { transform: scaleX(1); }
  .pcard:hover .pc-ring { opacity: 1; }
  .pcard:hover .pc-body { transform: translateY(-4px); }
  .pcard:hover .why-num, .pcard:hover .process-num { transform: rotate(-10deg) scale(1.1); background: var(--silver-gradient); border-color: transparent; }
  .pcard:hover .mvv-ic { background: var(--silver-gradient); border-color: transparent; color: #fff; transform: rotate(-8deg) scale(1.08); }
  .pcard:hover .pc-arrow { opacity: 1; transform: none; }
}

/* card flavours */
.why-card.pcard { min-height: 340px; text-align: left; padding: 24px 24px 28px; display: flex; flex-direction: column; }
.why-card.pcard h3, .why-card.pcard p { text-align: left; }
.why-card.pcard h3 { font-size: 19px; }
.mvv-card.pcard { min-height: 300px; display: flex; flex-direction: column; padding: 24px; }
.mvv-card.pcard .mvv-ic { margin-bottom: 0; }
.mvv-card.pcard .pc-body { margin-top: 90px; }
.perk-card.pcard { min-height: 320px; display: flex; flex-direction: column; padding: 22px 22px 26px; }
.perk-card.pcard .pc-body { margin-top: 96px; }
.perk-card.pcard h3 { font-size: 18px; }
.process-card.pcard { min-height: 300px; display: flex; flex-direction: column; padding: 22px 22px 26px; background: #080808 !important; }
.process-card.pcard .pc-body { margin-top: 84px; }
.process-card.pcard h3 { font-size: 18px; background: none; -webkit-text-fill-color: #fff; color: #fff; }
.process-card.pcard::after { display: none; }
.service-card.pcard { text-align: left; min-height: 320px; display: flex; flex-direction: column; padding: 24px; }
.service-card.pcard .service-icon { margin: 0; width: 56px; height: 56px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; animation: none; }
.service-card.pcard .service-icon svg { width: 24px; height: 24px; }
.service-card.pcard .pc-body { margin-top: 90px; }
.service-card.pcard:hover .service-icon { background: var(--silver-gradient); border-color: transparent; box-shadow: 0 0 0 8px rgba(180,141,58,0.14); }
.service-card.pcard p { margin-bottom: 0; }
.pcard .job-tag { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.3); }
@media (max-width: 560px) { .why-card.pcard, .perk-card.pcard, .mvv-card.pcard, .process-card.pcard, .service-card.pcard { min-height: 250px; } .pcard .pc-body, .why-card.pcard .pc-body, .perk-card.pcard .pc-body, .mvv-card.pcard .pc-body, .process-card.pcard .pc-body, .service-card.pcard .pc-body { margin-top: 56px; } }

/* 3D flip-up entrance for grid children (replaces the flat rise) */
.reveal.pre-reveal:not(.is-visible) :is(.svc-grid, .why-grid, .yp-points, .perk-grid, .process-grid, .toolkit-list, .value-list, .lang-grid, .mvv-grid, .listings-grid, .community-grid, .team-grid) > * {
  opacity: 0; transform: perspective(900px) translateY(34px) rotateX(10deg) scale(0.97); filter: blur(5px);
}
.reveal.is-visible :is(.svc-grid, .why-grid, .yp-points, .perk-grid, .process-grid, .toolkit-list, .value-list, .lang-grid, .mvv-grid, .listings-grid, .community-grid, .team-grid) > * {
  opacity: 1; transform: none; filter: none;
  transition: opacity 0.65s ease, transform 0.85s cubic-bezier(.22,1,.36,1), filter 0.6s ease; transition-delay: calc(var(--i, 0) * 85ms);
}
.listings-grid > *, .community-grid > *, .team-grid > * { transition-delay: 0s; }

/* community cards: caption rises, copper underline */
.community-card-label h3 { position: relative; display: inline-block; padding-bottom: 4px; }
.community-card-label h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #c9a24a, #b48d3a); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(.22,1,.36,1); }
.community-card:hover .community-card-label h3::after { transform: scaleX(1); }
.community-card-label { transition: transform 0.5s cubic-bezier(.22,1,.36,1); }
.community-card:hover .community-card-label { transform: translateY(-6px); }

/* ==========================================================================
   BROKER PORTRAIT — clean square card (no oversized ring), glass plate
   ========================================================================== */
.ck-about .about-wrap { grid-template-columns: 0.82fr 1.18fr; gap: 64px; }
.about-visual-fx { max-width: 460px; }
.av-ring { display: none; }
.av-frame { border-radius: 26px; box-shadow: 0 30px 64px rgba(10,10,10,0.24), 0 0 0 1px rgba(180,141,58,0.22); }
.av-frame img { aspect-ratio: 1 / 1.06; object-position: 50% 16%; animation: none; }
.av-frame::after { display: none; }
.av-frame .av-plate { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(8,8,8,0.5); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; }
.av-frame .av-plate b { display: block; font-family: var(--font-head); font-size: 17px; font-weight: 600; }
.av-frame .av-plate span { display: block; font-size: 11.5px; color: rgba(255,255,255,0.75); margin-top: 2px; }
.av-frame .av-plate .av-rate { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 600; font-size: 14px; white-space: nowrap; }
.av-frame .av-plate .av-rate i { color: var(--gold); font-style: normal; }
.about-visual-fx .about-visual-badge { display: none; }
.av-float { top: 22px; right: -18px; border-radius: 14px; padding: 10px 14px; gap: 10px; }
.av-float .av-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(180,141,58,0.12); color: var(--silver-deep); flex: none; }
.av-float .av-ic svg { width: 16px; height: 16px; }
.av-float b { font-size: 14px; color: var(--ink); }
.av-float.av-float-2 { left: -18px; bottom: 96px; right: auto; top: auto; }
@media (max-width: 900px) { .about-visual-fx { max-width: 400px; } }

/* ==========================================================================
   REVIEWS — charcoal section, blurred lakefront photo, glass marquee cards
   ========================================================================== */
.rv-section { position: relative; overflow: hidden; isolation: isolate; background: #0c0c0c; color: #fff; padding: 100px 0; }
.rv-photo { position: absolute; inset: -16px; z-index: 0; background: var(--photo) center / cover no-repeat; filter: blur(4px) saturate(1.05); animation: ck-portrait 30s ease-in-out infinite alternate; }
.rv-veil { position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, rgba(8,8,8,0.94) 0%, rgba(8,8,8,0.84) 50%, rgba(8,8,8,0.76) 100%); }
.rv-glow { position: absolute; z-index: 0; width: 640px; height: 640px; border-radius: 50%; left: 50%; top: -340px; transform: translateX(-50%); background: radial-gradient(circle, rgba(180,141,58,0.28), transparent 65%); filter: blur(30px); pointer-events: none; }
.rv-section .section-head h2 { color: #fff; }
.rv-section .section-head p { color: rgba(255,255,255,0.72); }
.rv-section .eyebrow { color: var(--champagne); background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); }
.rv-section .eyebrow::before { background: var(--champagne); box-shadow: 0 0 0 3px rgba(201,162,74,0.2); }
.rv-section .g-badge { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: none; }
.rv-section .g-badge b { color: #fff; }
.rv-section .g-badge a { color: var(--champagne); }
.rv-viewport { position: relative; z-index: 1; overflow: hidden; padding: 24px 0 36px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rv-track { display: flex; gap: 20px; width: max-content; animation: reviews-marquee 44s linear infinite; }
.rv-viewport:hover .rv-track { animation-play-state: paused; }
.rv-card {
  position: relative; overflow: hidden; flex: 0 0 400px; width: 400px; display: flex; flex-direction: column;
  padding: 28px 28px 26px; border-radius: 22px; color: #fff;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,0.5);
  transition: transform 0.4s cubic-bezier(.22,1,.36,1), border-color 0.3s ease, background 0.3s ease;
}
.rv-card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity 0.4s ease;
  background: conic-gradient(from var(--glow-angle), transparent 0%, #070707 12%, #0c0c0c 20%, transparent 32%, transparent 68%, #070707 80%, #0c0c0c 88%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: glow-spin 3s linear infinite; }
.rv-card::after { content: '\201C'; position: absolute; top: 10px; right: 22px; font-family: Georgia, serif; font-size: 110px; line-height: 1; color: rgba(180,141,58,0.3); pointer-events: none; }
@media (hover: hover) { .rv-card:hover { transform: translateY(-8px); background: rgba(255,255,255,0.1); border-color: rgba(201,162,74,0.4); } .rv-card:hover::before { opacity: 1; } }
.rv-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.rv-avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 15px; color: #fff; background: var(--silver-gradient); box-shadow: 0 0 0 4px rgba(180,141,58,0.2); }
.rv-stars { display: flex; gap: 3px; color: var(--gold); }
.rv-stars svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.rv-g { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; }
.rv-g svg { width: 16px; height: 16px; }
.rv-card .quote { font-style: italic; font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,0.9); flex: 1; }
.rv-who { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; gap: 3px; }
.rv-who b { font-size: 14px; color: #fff; }
.rv-who span { font-size: 12.5px; color: rgba(255,255,255,0.62); }
.rv-cta { position: relative; z-index: 1; text-align: center; margin-top: 10px; }
.rv-cta .btn-outline { color: #fff; border-color: rgba(201,162,74,0.55); background: rgba(255,255,255,0.06); }
.rv-cta .btn-outline:hover { border-color: var(--champagne); }
@media (max-width: 640px) { .rv-card { flex-basis: 310px; width: 310px; padding: 22px 20px; } .rv-section { padding: 80px 0; } }
@media (prefers-reduced-motion: reduce) { .rv-track { animation: none; flex-wrap: wrap; width: 100%; } .rv-photo { animation: none; } }

/* ==========================================================================
   Q1 CARD (homepage Let's Talk) — Woodline qual-teaser style
   ========================================================================== */
.qual-funnel { padding: 36px 32px; border-radius: 22px; box-shadow: 0 30px 70px -30px rgba(10,10,10,0.45); }
.qual-funnel::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(180,141,58,0.22), transparent 60%); }
.qual-funnel { position: relative; overflow: hidden; }
.qual-funnel > * { position: relative; z-index: 1; }
.qual-choices { grid-template-columns: 1fr; gap: 11px; }
.qual-choice { padding: 15px 18px; border-radius: 13px; gap: 14px; font-size: 15px; }
.qual-choice .qdot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink-faint); flex: none; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; }
.qual-choice > svg { display: none; }
.qual-choice .qarrow { margin-left: auto; width: 16px; height: 16px; color: var(--ink-faint); transition: transform 0.2s ease, color 0.2s ease; flex: none; }
@media (hover: hover) {
  .qual-choice:hover { transform: translateX(7px) scale(1.012); box-shadow: 0 24px 50px -28px rgba(0,0,0,0.4); background: var(--bg-card); border-color: var(--silver); }
  .qual-choice:hover .qdot { border-color: var(--silver); }
  .qual-choice:hover .qarrow { color: var(--silver-deep); transform: translateX(3px); }
}
.qual-choice.is-picked .qdot { border-color: var(--silver); background: var(--silver); box-shadow: inset 0 0 0 3px var(--bg-card); }

/* ==========================================================================
   FUNNEL — Woodline recipe: blurred photo + dark scrim, grid, rising
   sparks, white type, radio-dot options, 3D step transitions
   ========================================================================== */
.funnel-body { background: #0c0c0c; color: #fff; }
.funnel-grid { background-image: linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 58px 58px; opacity: 0.5; -webkit-mask-image: radial-gradient(ellipse 78% 74% at 50% 42%, #000, transparent 76%); mask-image: radial-gradient(ellipse 78% 74% at 50% 42%, #000, transparent 76%); animation: funnel-grid-drift 32s linear infinite; z-index: 0; }
.funnel-photo { position: fixed; inset: -4%; z-index: -2; background: var(--photo) center 45% / cover no-repeat; filter: blur(6px) saturate(1.05); animation: ck-portrait 36s ease-in-out infinite alternate; }
.funnel-scrim { position: fixed; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8,8,8,0.9) 0%, rgba(8,8,8,0.74) 50%, rgba(8,8,8,0.56) 100%); }
.funnel-bg-glow { background: radial-gradient(circle, rgba(180,141,58,0.22) 0%, transparent 70%); }
.funnel-bg-glow-2, .funnel-bg-glow-3 { background: radial-gradient(circle, rgba(180,141,58,0.16) 0%, transparent 70%); }
.funnel-float-icon { color: var(--champagne); opacity: 0.22; }
.funnel-spark { position: fixed; width: 4px; height: 4px; border-radius: 50%; background: var(--champagne); opacity: 0; box-shadow: 0 0 8px 1px rgba(201,162,74,0.6); z-index: 0; pointer-events: none; }
.funnel-spark:nth-child(1) { left: 16%; animation: fn-rise 13s linear infinite; }
.funnel-spark:nth-child(2) { left: 38%; animation: fn-rise 17s linear 3s infinite; }
.funnel-spark:nth-child(3) { left: 63%; animation: fn-rise 15s linear 6s infinite; }
.funnel-spark:nth-child(4) { left: 82%; animation: fn-rise 19s linear 1.5s infinite; }
.funnel-spark:nth-child(5) { left: 50%; animation: fn-rise 21s linear 8s infinite; }
@keyframes fn-rise { 0% { transform: translateY(102vh) scale(0.6); opacity: 0; } 10% { opacity: 0.7; } 90% { opacity: 0.7; } 100% { transform: translateY(-6vh) scale(1); opacity: 0; } }
.funnel-topbar { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 5; background: rgba(255,255,255,0.1); }
.funnel-topbar .funnel-progress-bar { height: 100%; background: linear-gradient(90deg, #c9a24a, #b48d3a); border-radius: 0 4px 4px 0; transition: width 0.55s cubic-bezier(.4,0,.2,1); }
.funnel-nav { border-bottom: 1px solid rgba(255,255,255,0.12); padding: 16px 0; }
.funnel-logo img { height: 56px; }
.funnel-nav .site-nav__icon-btn { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.24); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.funnel-exit { color: rgba(255,255,255,0.8); width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.24); background: rgba(255,255,255,0.12); justify-content: center; font-size: 20px; transition: border-color 0.2s ease, transform 0.2s ease; }
.funnel-exit:hover { color: #fff; border-color: var(--champagne); transform: rotate(90deg); }
.funnel-wrap { max-width: 660px; padding: 48px 24px 80px; perspective: 1500px; }
.funnel-progress { display: none; }
.funnel-step-label { color: var(--champagne); letter-spacing: 0.18em; font-weight: 700; font-size: 11.5px; margin-bottom: 14px; }
.funnel-card { position: relative; min-height: 380px; }
.funnel-step { display: block; position: absolute; inset: 0; height: 0; overflow: hidden; padding: 0 3px; opacity: 0; transform: translateX(52px) rotateY(-11deg); transform-origin: left center; pointer-events: none; animation: none; transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.2,.75,.2,1); }
.funnel-step.is-active { position: relative; height: auto; overflow: visible; opacity: 1; transform: none; pointer-events: auto; }
.funnel-step.is-past { opacity: 0; transform: translateX(-52px) rotateY(11deg); }
.funnel-step .eyebrow { display: none; }
.funnel-step h2 { color: #fff; font-size: clamp(26px, 4vw, 36px); line-height: 1.12; }
.funnel-sub { color: rgba(255,255,255,0.76); }
.funnel-choices { gap: 10px; }
.funnel-choice { display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; border-radius: 14px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-weight: 600; transition: transform 0.38s cubic-bezier(.18,.9,.24,1), border-color 0.25s ease, box-shadow 0.38s ease, background 0.25s ease; }
.funnel-choice::before { content: ''; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5); flex: none; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; }
@media (hover: hover) { .funnel-choice:hover { border-color: var(--champagne); transform: translateY(-3px) scale(1.012); box-shadow: 0 28px 58px -28px rgba(0,0,0,0.6); background: rgba(255,255,255,0.12); } .funnel-choice:hover::before { border-color: var(--champagne); } }
.funnel-choice.is-selected { border-color: var(--champagne); background: rgba(180,141,58,0.2); color: #fff; }
.funnel-choice.is-selected::before { border-color: var(--champagne); background: var(--champagne); box-shadow: inset 0 0 0 3px #181818; }
.funnel-chip { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.funnel-chip:hover { border-color: var(--champagne); }
.funnel-chip.is-selected { background: var(--silver-gradient); border-color: transparent; color: #fff; }
.funnel-step .field label { color: rgba(255,255,255,0.6); }
.funnel-step .field input { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #fff; text-align: left; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.funnel-step .field input::placeholder { color: rgba(255,255,255,0.4); }
.funnel-step .field input:focus { border-color: var(--champagne); }
.funnel-back { color: rgba(255,255,255,0.6); }
.funnel-back:hover { color: var(--champagne); }
.funnel-success-icon { background: var(--silver-gradient); box-shadow: 0 0 0 8px rgba(180,141,58,0.18); }
.funnel-success .eyebrow { display: inline-flex; color: var(--champagne); background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.24); }
.funnel-success .eyebrow::before { background: var(--champagne); }
.funnel-direct a { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.funnel-direct a:hover { border-color: var(--champagne); }
.funnel-note { color: rgba(255,255,255,0.6); }
.funnel-note a { color: var(--champagne); }
.funnel-body .lang-menu { background: rgba(8,8,8,0.96); border-color: rgba(255,255,255,0.14); }
.funnel-body .lang-menu button { color: #fff; }
.funnel-body .lang-menu button:hover { background: rgba(255,255,255,0.08); }
.funnel-body .lang-menu button.is-active { color: var(--champagne); }
.funnel-stagger > *, .funnel-step.funnel-stagger > * { opacity: 0; transform: translateY(14px); }
.funnel-step.is-active .funnel-stagger > *, .funnel-step.is-active.funnel-stagger > * { animation: fn-up 0.5s ease forwards; }
.funnel-step.is-active .funnel-stagger > :nth-child(1), .funnel-step.is-active.funnel-stagger > :nth-child(1) { animation-delay: 0.1s; } .funnel-step.is-active .funnel-stagger > :nth-child(2), .funnel-step.is-active.funnel-stagger > :nth-child(2) { animation-delay: 0.16s; } .funnel-step.is-active .funnel-stagger > :nth-child(3), .funnel-step.is-active.funnel-stagger > :nth-child(3) { animation-delay: 0.22s; } .funnel-step.is-active .funnel-stagger > :nth-child(4), .funnel-step.is-active.funnel-stagger > :nth-child(4) { animation-delay: 0.28s; } .funnel-step.is-active .funnel-stagger > :nth-child(5), .funnel-step.is-active.funnel-stagger > :nth-child(5) { animation-delay: 0.34s; } .funnel-step.is-active .funnel-stagger > :nth-child(6), .funnel-step.is-active.funnel-stagger > :nth-child(6) { animation-delay: 0.4s; } .funnel-step.is-active .funnel-stagger > :nth-child(7), .funnel-step.is-active.funnel-stagger > :nth-child(7) { animation-delay: 0.46s; }
@keyframes fn-up { to { opacity: 1; transform: none; } }
.calendly-inline-widget { background: #fff; }
@media (prefers-reduced-motion: reduce) { .funnel-photo, .funnel-spark, .funnel-grid { animation: none !important; } .funnel-spark { display: none; } .funnel-step { transition: opacity 0.2s ease; transform: none !important; } .funnel-stagger > * { animation: none !important; opacity: 1; transform: none; } }

/* ==========================================================================
   HOME VALUE TOOL (home-value.html)
   ========================================================================== */
.hv-wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 32px; align-items: start; }
.hv-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: 24px; padding: 32px; box-shadow: 0 30px 70px -30px rgba(10,10,10,0.4); }
.hv-form h2 { font-size: 24px; margin-top: 12px; }
.hv-form > p { margin-top: 8px; color: var(--ink-muted); font-size: 14px; }
.hv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 24px; }
.hv-grid .field { margin: 0; }
.hv-grid .field.full { grid-column: 1 / -1; }
.hv-seg { display: flex; gap: 8px; flex-wrap: wrap; }
.hv-seg button { flex: 1; min-width: 0; padding: 11px 10px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--bg-raised); color: var(--ink-soft); font-family: var(--font-body); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.hv-seg button.is-on { border-color: var(--silver); background: rgba(180,141,58,0.12); color: var(--ink); }
@media (hover: hover) { .hv-seg button:hover { border-color: var(--silver); transform: translateY(-1px); } }
.hv-range { display: flex; align-items: center; gap: 12px; }
.hv-range input[type=range] { flex: 1; accent-color: var(--silver); }
.hv-range output { font-family: var(--font-head); font-weight: 600; min-width: 74px; text-align: right; color: var(--ink); }
.hv-form .btn { margin-top: 24px; }
.hv-result { position: sticky; top: 100px; border-radius: 24px; overflow: hidden; isolation: isolate; color: #fff; background: #080808; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 34px 70px rgba(8,8,8,0.3); min-height: 520px; display: flex; flex-direction: column; }
.hv-result .pc-photo { position: absolute; inset: -16px; z-index: 0; background: var(--photo) center / cover; filter: blur(3px) saturate(1.05); animation: ck-portrait 30s ease-in-out infinite alternate; }
.hv-result .pc-veil { position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, rgba(8,8,8,0.94) 0%, rgba(8,8,8,0.78) 55%, rgba(8,8,8,0.5) 100%); }
.hv-result > * { position: relative; z-index: 1; }
.hv-result-body { padding: 34px 32px; flex: 1; display: flex; flex-direction: column; }
.hv-result .eyebrow { color: var(--champagne); background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.24); align-self: flex-start; }
.hv-result .eyebrow::before { background: var(--champagne); }
.hv-num { margin-top: 22px; font-family: var(--font-head); font-weight: 600; font-size: clamp(38px, 4.6vw, 56px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; background: linear-gradient(110deg, #c9a24a, #b8913f 50%, #b48d3a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hv-range-out { margin-top: 10px; font-size: 15px; color: rgba(255,255,255,0.78); }
.hv-range-out b { color: #fff; font-variant-numeric: tabular-nums; }
.hv-bar { position: relative; height: 10px; border-radius: 10px; margin-top: 22px; background: rgba(255,255,255,0.12); overflow: hidden; }
.hv-bar i { position: absolute; top: 0; bottom: 0; left: 30%; width: 40%; border-radius: 10px; background: linear-gradient(90deg, #c9a24a, #b48d3a); box-shadow: 0 0 14px rgba(180,141,58,0.6); transition: left 0.6s cubic-bezier(.22,1,.36,1), width 0.6s cubic-bezier(.22,1,.36,1); }
.hv-bar-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.hv-break { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 8px; }
.hv-break li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: rgba(255,255,255,0.78); padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); }
.hv-break li b { color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hv-break li.up b { color: #efdcaa; } .hv-break li.down b { color: #ffb4a1; }
.hv-empty { margin-top: 22px; color: rgba(255,255,255,0.72); font-size: 15px; line-height: 1.7; }
.hv-actions { margin-top: auto; padding-top: 26px; display: grid; gap: 10px; }
.hv-actions .btn-outline { color: #fff; border-color: rgba(201,162,74,0.55); background: rgba(255,255,255,0.06); }
.hv-foot { padding: 14px 32px 18px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 11.5px; line-height: 1.55; color: rgba(255,255,255,0.55); }
.hv-foot a { color: var(--champagne); }
.hv-sources { margin-top: 36px; font-size: 13px; color: var(--ink-muted); line-height: 1.7; }
.hv-sources a { color: var(--silver-deep); text-decoration: underline; text-underline-offset: 2px; }
.hv-tick { animation: hv-pop 0.5s cubic-bezier(.34,1.56,.64,1); }
@keyframes hv-pop { 40% { transform: scale(1.05); } 100% { transform: scale(1); } }
@media (max-width: 960px) { .hv-wrap { grid-template-columns: 1fr; } .hv-result { position: static; min-height: 0; } }
@media (max-width: 560px) { .hv-grid { grid-template-columns: 1fr; } .hv-form { padding: 24px 20px; } .hv-result-body { padding: 26px 22px; } }
/* ---- Round-2 polish ---- */
.av-float > div { display: flex; flex-direction: column; }
.av-float b { line-height: 1.15; }
/* photo cards: brighter — the photo is the point. Veil only where the text sits. */
.pcard .pc-photo { filter: blur(1.2px) saturate(1.12); }
.pcard .pc-veil { background: linear-gradient(0deg, rgba(8,8,8,0.9) 0%, rgba(8,8,8,0.7) 36%, rgba(8,8,8,0.22) 62%, rgba(8,8,8,0.06) 100%), rgba(8,8,8,0.06); }
@media (hover: hover) { .pcard:hover .pc-veil { background: linear-gradient(0deg, rgba(8,8,8,0.9) 0%, rgba(8,8,8,0.62) 36%, rgba(8,8,8,0.1) 62%, rgba(8,8,8,0) 100%); } }
.pcard .pc-body h3, .pcard .pc-body p { text-shadow: 0 1px 12px rgba(0,0,0,0.35); }
.why-card.pcard { min-height: 360px; }
.why-card.pcard .pc-body { margin-top: 130px; }
.hero-slide { filter: blur(2.5px) saturate(1.08); }
@media (max-width: 640px) {
  .av-float { position: static; display: inline-flex; margin: 12px 6px 0 0; animation: none; }
  .av-float.av-float-2 { position: static; }
  .about-wrap, .ck-about .about-wrap, .officer-about-wrap { grid-template-columns: 1fr !important; }
  .about-visual-fx { width: 100%; max-width: 420px; margin: 0 auto; }
  .av-floats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 6px; }
}

/* ==========================================================================
   ROUND 3 — broker portrait sized like Kortney/Jean (≤440px), journey
   cards with true 3D depth, step-specific photos
   ========================================================================== */
.ck-about .about-wrap { grid-template-columns: 0.78fr 1.22fr; gap: 64px; align-items: center; }
.about-visual-fx { max-width: 420px; }
.av-frame img { aspect-ratio: 4 / 4.6; object-position: 50% 14%; }
.officer-about-wrap .about-visual-fx { max-width: 400px; }
@media (max-width: 900px) { .about-visual-fx { max-width: 380px; } }

/* Journey: perspective on the track; cards rotate in Y as they recede */
.phz-viewport { perspective: 1400px; perspective-origin: 50% 40%; }
.phz-track { transform-style: preserve-3d; }
.phz-card {
  transform-style: preserve-3d; transform-origin: center center; opacity: 0.55;
  transform: translateZ(-120px) rotateY(18deg) scale(0.92);
  transition: opacity 0.6s ease, transform 0.85s cubic-bezier(.22,1,.36,1), box-shadow 0.6s ease, border-color 0.5s ease;
}
.phz-card.is-past { opacity: 0.6; transform: translateZ(-120px) rotateY(-18deg) scale(0.92); }
.phz-card.is-active { opacity: 1; transform: translateZ(0) rotateY(0) scale(1); box-shadow: 0 40px 80px rgba(10,10,10,0.22), 0 0 0 1px rgba(180,141,58,0.25), 0 0 54px rgba(180,141,58,0.16); }
/* layered depth inside the active card */
.phz-media { height: 220px; transform-style: preserve-3d; }
.phz-media::before { filter: saturate(1.05); transform: scale(1.06); transition: transform 2.2s cubic-bezier(.22,1,.36,1), filter 0.6s ease; }
.phz-card.is-active .phz-media::before { transform: scale(1.14) translate3d(-1.5%, -1%, 0); }
.phz-media::after { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.96) 100%); }
.phz-num { transform: translateZ(40px); transition: color 0.5s ease, -webkit-text-stroke-color 0.5s ease, transform 0.8s cubic-bezier(.22,1,.36,1); }
.phz-card.is-active .phz-num { transform: translateZ(70px) translateY(-4px); }
.phz-badge { transform: translateZ(50px); }
.phz-card.is-active .phz-badge { transform: translateZ(90px) rotate(-8deg) scale(1.1); box-shadow: 0 18px 36px rgba(10,10,10,0.5); }
.phz-body { transform: translateZ(20px); }
/* step pill on the photo */
.phz-step { position: absolute; left: 20px; top: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-family: var(--font-head); font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: rgba(8,8,8,0.45); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateZ(60px); }
.phz-step i { width: 6px; height: 6px; border-radius: 50%; background: var(--champagne); box-shadow: 0 0 0 3px rgba(201,162,74,0.25); }
/* vertical (phone) mode: flat cards, lit one lifts */
.phz.is-vertical .phz-viewport { perspective: none; }
.phz.is-vertical .phz-card, .phz.is-vertical .phz-card.is-past { transform: none; opacity: 0.62; }
.phz.is-vertical .phz-card.is-lit { opacity: 1; transform: translateY(-4px); box-shadow: 0 30px 60px rgba(10,10,10,0.16); }
.phz.is-vertical .phz-num, .phz.is-vertical .phz-badge, .phz.is-vertical .phz-body, .phz.is-vertical .phz-step { transform: none; }
@media (prefers-reduced-motion: reduce) { .phz-card, .phz-card.is-past, .phz-card.is-active { transform: none; transition: opacity 0.3s ease; } }

/* process-card (buyers/sellers/careers): 3D tilt + layered badge */
.process-card.pcard { transform-style: preserve-3d; min-height: 320px; }
.process-card.pcard .process-num { transform: translateZ(30px); }
.process-card.pcard .pc-body { transform: translateZ(18px); }
.av-frame img { height: auto; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: 50% 14%; display: block; }

/* ==========================================================================
   ROUND 4 — mobile nav in white, no more two-bar spinning rings, flowing
   gradient outline + soft tilt on CTA panels, photo-backed Q1 card, Google
   "leave a review" CTA, per-card photo focus (--photo-pos).
   ========================================================================== */

/* ---- Mobile dropdown: dark glass, white words ---- */
@media (max-width: 1023px) {
  .site-nav .site-nav__pill.is-mobile-open, .site-nav.is-scrolled .site-nav__pill.is-mobile-open, .site-nav.nav-on-photo:not(.is-scrolled) .site-nav__pill.is-mobile-open {
    background: rgba(8,8,8,0.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-color: rgba(255,255,255,0.12); box-shadow: 0 28px 56px rgba(0,0,0,0.38);
  }
  .site-nav .site-nav__pill.is-mobile-open .site-nav__links, .site-nav.nav-on-photo:not(.is-scrolled) .site-nav__pill.is-mobile-open .site-nav__links { color: #fff; }
  .site-nav .site-nav__pill.is-mobile-open .site-nav__links > li > a, .site-nav .site-nav__pill.is-mobile-open .site-nav__links > li > button { color: #fff; }
  .site-nav .site-nav__pill.is-mobile-open .site-nav__links > li > a:hover, .site-nav .site-nav__pill.is-mobile-open .site-nav__links > li > button:hover,
  .site-nav .site-nav__pill.is-mobile-open .site-nav__links > li > a.is-active, .site-nav .site-nav__pill.is-mobile-open .site-nav__item.is-open > button { color: #fff; background: rgba(255,255,255,0.1); }
  .site-nav .site-nav__pill.is-mobile-open .site-nav__chevron { color: var(--champagne); }
  .site-nav .site-nav__pill.is-mobile-open .mega-menu { background: rgba(255,255,255,0.05); border-top: 1px solid rgba(255,255,255,0.08); }
  .site-nav .site-nav__pill.is-mobile-open .mega-menu a:hover { background: rgba(255,255,255,0.08); }
  .site-nav .site-nav__pill.is-mobile-open .mega-menu a strong { color: #fff; }
  .site-nav .site-nav__pill.is-mobile-open .mega-menu a span { color: rgba(255,255,255,0.62); }
}

/* ---- Remove every spinning two-segment ring (the "two flashing bars") ---- */
.pcard .pc-ring, .glow-card::before, .hero-search::before, .av-ring::before, .phz-card::before { display: none !important; animation: none !important; }
.deck-card[data-pos="active"] { animation: none; background: var(--bg-card); border-color: var(--silver); }

/* ---- Flowing gradient outline (gap-free, so it glides instead of flashing) ---- */
@property --gl-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.gl-card { position: relative; }
.gl-card::after {
  content: ''; position: absolute; inset: 0; z-index: 6; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--gl-angle), #0c0c0c 0%, #070707 25%, #1f1f1e 50%, #070707 75%, #0c0c0c 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0.85; transition: opacity 0.6s ease; animation: gl-spin 9s linear infinite;
}
@keyframes gl-spin { to { --gl-angle: 360deg; } }
@media (hover: hover) { .gl-card:hover::after { opacity: 1; animation-duration: 5s; } .gl-card:hover { box-shadow: 0 34px 70px -28px rgba(180,141,58,0.4), 0 0 0 1px rgba(201,162,74,0.0); } }
@media (prefers-reduced-motion: reduce) { .gl-card::after { animation: none; } }
.leads-panel.gl-card { border-color: transparent; transition: transform 0.25s ease, box-shadow 0.5s ease; }
.leads-panel.gl-card::after { z-index: 2; }

.leads-panel .hero-actions { position: relative; z-index: 1; }
.job-card.gl-card::after { opacity: 0.45; }

/* ---- Q1 card: the funnel's own photo behind frosted choices (Woodline style) ---- */
.qual-funnel.has-photo { background: #070707; border-color: rgba(255,255,255,0.14); color: #fff; box-shadow: 0 36px 80px -30px rgba(0,0,0,0.6); }
.qual-funnel > .qual-photo { position: absolute; inset: -16px; z-index: 0; pointer-events: none; background: var(--photo) center 42% / cover no-repeat; filter: blur(2.5px) saturate(1.08); animation: ck-drift 18s ease-in-out infinite alternate; }
.qual-funnel > .qual-veil { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,8,8,0.7) 0%, rgba(8,8,8,0.84) 55%, rgba(8,8,8,0.92) 100%); }
.qual-funnel.has-photo::before { background: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(180,141,58,0.3), transparent 60%); z-index: 0; }
.qual-funnel.has-photo .eyebrow { color: var(--champagne); }
.qual-funnel.has-photo .eyebrow::before { background: var(--champagne); box-shadow: 0 0 8px var(--champagne); }
.qual-funnel.has-photo h3, .qual-funnel.has-photo .qual-q { color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,0.35); }
.qual-funnel.has-photo .qual-funnel-head p { color: rgba(255,255,255,0.78); }
.qual-funnel.has-photo .qual-choice { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.qual-funnel.has-photo .qual-choice .qdot { border-color: rgba(255,255,255,0.5); }
.qual-funnel.has-photo .qual-choice .qarrow { color: rgba(255,255,255,0.55); }
@media (hover: hover) {
  .qual-funnel.has-photo .qual-choice:hover { background: rgba(255,255,255,0.16); border-color: var(--champagne); color: #fff; box-shadow: 0 24px 50px -24px rgba(0,0,0,0.6); }
  .qual-funnel.has-photo .qual-choice:hover .qdot { border-color: var(--champagne); }
  .qual-funnel.has-photo .qual-choice:hover .qarrow { color: var(--champagne); }
}
.qual-funnel.has-photo .qual-choice.is-picked { background: rgba(180,141,58,0.22); border-color: var(--champagne); color: #fff; }
.qual-funnel.has-photo .qual-choice.is-picked .qdot { border-color: var(--champagne); background: var(--champagne); box-shadow: inset 0 0 0 3px #080808; }
.qual-funnel.has-photo .qual-embed-note { color: rgba(255,255,255,0.62); }
.qual-funnel.has-photo .qual-embed-note a { color: var(--champagne); }

/* ---- Reviews: direct "leave a review" CTA with the Google G ---- */
.rv-cta .rv-leave { display: inline-flex; align-items: center; gap: 12px; padding: 15px 26px 15px 18px; border-radius: 999px; background: #fff; color: var(--ink); border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 18px 40px rgba(0,0,0,0.3); font-weight: 700; transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease; }
.rv-cta .rv-leave .rv-gicon { width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.12); display: grid; place-items: center; flex: none; }
.rv-cta .rv-leave .rv-gicon svg { width: 20px; height: 20px; }
.rv-cta .rv-leave .rv-stars-sm { color: var(--gold); letter-spacing: 0.06em; font-size: 13px; margin-left: 2px; }
@media (hover: hover) { .rv-cta .rv-leave:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 26px 54px rgba(0,0,0,0.38), 0 0 0 6px rgba(201,162,74,0.18); } }
.rv-cta .rv-sub { display: block; margin-top: 12px; font-size: 12.5px; color: rgba(255,255,255,0.6); }

/* ---- Per-card photo focus so faces are never cropped ---- */
.pcard .pc-photo, .pc-photo { background-position: var(--photo-pos, center); }
.phz-media::before { background-position: var(--photo-pos, center); }

/* ==========================================================================
   GLOBAL ENTERPRISE PACK — brand-specific components layered on the City
   Capital / Copper Key base: wide wordmark sizing, vibrant photo layers,
   Calendly booking card, team cards, team strip, services, mission, map.
   ========================================================================== */

/* ---- Wordmark (2.69:1) — sized by height, never wraps the pill ---- */
.site-nav__logo .logo-light, .site-nav__logo .logo-dark { height: 56px; }
.site-nav.is-scrolled .site-nav__logo .logo-light, .site-nav.is-scrolled .site-nav__logo .logo-dark { height: 48px; }
@media (max-width: 1360px) and (min-width: 1024px) { .site-nav__logo .logo-light, .site-nav__logo .logo-dark, .site-nav.is-scrolled .site-nav__logo .logo-light, .site-nav.is-scrolled .site-nav__logo .logo-dark { height: 44px; } }
@media (max-width: 1023px) { .site-nav__logo .logo-light, .site-nav__logo .logo-dark, .site-nav.is-scrolled .site-nav__logo .logo-light, .site-nav.is-scrolled .site-nav__logo .logo-dark { height: 46px; } }
@media (max-width: 420px) { .site-nav__logo .logo-light, .site-nav__logo .logo-dark, .site-nav.is-scrolled .site-nav__logo .logo-light, .site-nav.is-scrolled .site-nav__logo .logo-dark { height: 40px; } }
.footer-logo img { height: 62px; }
@media (max-width: 760px) { .footer-logo img { height: 54px; } }
.funnel-logo img { height: 42px; }
.ck-ticker-track img { width: 16px; height: 16px; }
.hs-key img { width: 36px; height: 36px; }
.cw-avatar-logo img { width: 26px; height: 26px; object-fit: contain; }

/* ---- Vibrant photos: lighter blur than the base recipe, a touch more colour ---- */
.hero-slide { filter: blur(1.2px) saturate(1.14); }
.page-header-photo::before { filter: blur(1.8px) saturate(1.12); }
.officer-simple-hero-bg { background-image: var(--hero-photo, url("/assets/img/home-gray-two-story.jpg")); filter: blur(2px) saturate(1.1); }
.pcard .pc-photo { filter: blur(1.6px) saturate(1.14); }

/* ---- Social icons not connected yet: visible, faded, not clickable ---- */
.social-icon.is-soon, .footer-social .is-soon { opacity: 0.38; cursor: default; pointer-events: none; }
.footer-social .is-soon { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 1px var(--border-strong); background: var(--bg-card); color: var(--ink-muted); display: flex; align-items: center; justify-content: center; }
.footer-social .is-soon svg { width: 16px; height: 16px; }

/* ---- Calendly booking card (agent Get In Touch + funnel last step) ---- */
.agent-book { max-width: 940px; margin: 0 auto; }
.cal-wrap { position: relative; }
.cal-wrap .calendly-inline-widget { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: 0 30px 60px -36px rgba(10,10,10,0.45); }
.cal-ph { display: grid; grid-template-columns: 240px 1fr; text-align: left; border-radius: 20px; background: #fff; border: 1px solid var(--border); box-shadow: 0 30px 60px -36px rgba(10,10,10,0.45); overflow: hidden; color: var(--ink-soft); }
.cal-ph-side { padding: 26px 22px; border-right: 1px solid var(--border); background: linear-gradient(180deg, #fff, var(--bg-raised)); }
.cal-ph-avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--border-strong); }
.cal-ph-initials { display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; font-size: 20px; color: #fff; background: var(--silver-gradient); }
.cal-ph-who { margin-top: 14px; }
.cal-ph-name { display: block; font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.cal-ph-title { display: block; margin-top: 3px; font-family: var(--font-head); font-weight: 600; font-size: 22px; line-height: 1.15; color: var(--ink); }
.cal-ph-meta { list-style: none; display: grid; gap: 10px; margin: 18px 0 0; padding: 0; }
.cal-ph-meta li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.cal-ph-meta svg { width: 16px; height: 16px; flex: none; color: var(--silver); }
.cal-ph-main { position: relative; padding: 24px 24px 22px; min-height: 470px; }
.cal-ph-head { display: block; font-family: var(--font-head); font-weight: 600; font-size: 17px; color: var(--ink); }
.cal-ph-month { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.cal-ph-month i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; color: var(--silver); background: rgba(180,141,58,0.08); }
.cal-ph-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 14px; filter: blur(1.2px); opacity: 0.6; }
.cal-ph-grid span { display: grid; place-items: center; height: 36px; border-radius: 50%; font-size: 13px; color: var(--ink-faint); }
.cal-ph-grid span.wd { height: 20px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.cal-ph-grid span.today { color: var(--silver-deep); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--silver-light); }
.cal-ph-overlay { position: absolute; left: 18px; right: 18px; top: 128px; bottom: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px 20px; text-align: center; border-radius: 16px; background: rgba(255,255,255,0.86); border: 1px solid rgba(180,141,58,0.16); box-shadow: 0 20px 40px -26px rgba(10,10,10,0.45); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.cal-ph-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 100px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--silver-deep); background: rgba(180,141,58,0.07); border: 1px solid rgba(180,141,58,0.16); }
.cal-ph-badge svg { width: 15px; height: 15px; flex: none; }
.cal-ph-overlay > p { max-width: 360px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.cal-ph-overlay .btn-block { max-width: 360px; }
.cal-ph-overlay .btn svg { width: 17px; height: 17px; }
.cal-ph-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 360px; }
.cal-ph-row a { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 8px; border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--border-strong); transition: border-color 0.2s ease, transform 0.2s ease, color 0.2s ease; }
.cal-ph-row a svg { width: 16px; height: 16px; flex: none; color: var(--silver); }
@media (hover: hover) { .cal-ph-row a:hover { border-color: var(--silver); color: var(--silver-deep); transform: translateY(-2px); } }
@media (max-width: 760px) {
  .cal-ph { grid-template-columns: 1fr; }
  .cal-ph-side { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 16px; border-right: none; border-bottom: 1px solid var(--border); }
  .cal-ph-avatar { width: 50px; height: 50px; }
  .cal-ph-who { margin-top: 0; }
  .cal-ph-title { font-size: 18px; }
  .cal-ph-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; width: 100%; }
  .cal-ph-main { padding: 16px 14px 14px; min-height: 0; }
  .cal-ph-grid { max-height: 128px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent); }
  .cal-ph-grid span { height: 30px; font-size: 12px; }
  .cal-ph-overlay { position: relative; inset: auto; margin-top: -46px; padding: 18px 14px; }
}
.funnel-step-final .cal-wrap { margin-top: 10px; text-align: left; }
.funnel-step-final .cal-ph-main { min-height: 430px; }

/* ---- Team cards: photo + role pill + glass WhatsApp / email (City Capital) ---- */
.team-card-photo { display: block; }
.team-card-nmls-badge { position: absolute; right: 10px; bottom: 10px; z-index: 3; background: rgba(13,13,13,0.6); border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; padding: 6px 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.3); }
.team-card-contact { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; gap: 8px; }
.team-card-contact a { position: relative; isolation: isolate; overflow: hidden; width: 38px; height: 38px; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); transition: transform 0.25s ease, border-color 0.25s ease; }
.team-card-contact a svg { position: relative; z-index: 1; width: 17px; height: 17px; }
.team-card-contact a::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 50%; opacity: 0; transition: opacity 0.25s ease; }
.team-card-contact a.wa::before { background: #25D366; }
.team-card-contact a.em::before { background: var(--silver-gradient); }
@media (hover: hover) { .team-card-contact a:hover { transform: translateY(-3px); border-color: transparent; } .team-card-contact a:hover::before { opacity: 1; } }
.team-card-body h3 a { color: inherit; }
.team-card-role { color: var(--ink-faint); font-weight: 500; font-size: 12px; overflow-wrap: anywhere; }
.team-card-soon { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; overflow: hidden; background: radial-gradient(circle at 30% 20%, #1f1f1e, #151515 70%); color: #fff; }
.team-card-soon b { font-family: var(--font-head); font-weight: 600; font-size: 56px; letter-spacing: 0.02em; line-height: 1; color: #fff; }
.team-card-soon span { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--champagne); }
.team-card-soon::after { content: ''; position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; background: url("/assets/mrc-mark-light.png") center / contain no-repeat; opacity: 0.08; }

/* ---- Portrait without a photo yet (Crystal) ---- */
.av-frame-soon { aspect-ratio: 4/4.4; background: radial-gradient(circle at 30% 20%, #1f1f1e, #151515 70%); }
.av-soon { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; }
.av-soon-mark { font-family: var(--font-head); font-weight: 600; font-size: 92px; line-height: 1; }
.av-soon-note { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--champagne); }
.av-rate img { width: 18px; height: 18px; object-fit: contain; display: block; }

/* ---- Agent page bits ---- */
.officer-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.officer-chips span { display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--silver-deep); background: rgba(180,141,58,0.06); border: 1px solid rgba(180,141,58,0.16); }
.officer-meta-item a { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.officer-meta-item a:hover { color: var(--silver); }
.agent-more { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 34px; align-items: center; }
.agent-more h3 { margin-top: 12px; font-size: clamp(22px, 2.4vw, 28px); }
.agent-more-links { display: grid; gap: 10px; }
.agent-more-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-radius: 14px; background: #fff; border: 1px solid var(--border); font-family: var(--font-head); font-weight: 600; color: var(--ink); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.agent-more-links a span { font-family: var(--font-body); font-weight: 500; font-size: 13px; color: var(--ink-faint); }
@media (hover: hover) { .agent-more-links a:hover { transform: translateX(4px); border-color: var(--silver); box-shadow: 0 16px 34px -20px rgba(10,10,10,0.35); } }
@media (max-width: 860px) { .agent-more { grid-template-columns: 1fr; } }

/* ---- Homepage team strip ---- */
.ts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ts-card { position: relative; display: block; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: 0 22px 46px -30px rgba(10,10,10,0.4); transition: transform 0.45s cubic-bezier(.22,1,.36,1), box-shadow 0.35s ease; }
.ts-photo { display: block; aspect-ratio: 4/4.3; overflow: hidden; background: #151515; }
.ts-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.22,1,.36,1); }
.ts-soon { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; font-size: 64px; color: #fff; background: radial-gradient(circle at 30% 20%, #1f1f1e, #151515 70%); }
.ts-body { display: block; padding: 16px 18px 18px; }
.ts-body b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 16.5px; color: var(--ink); }
.ts-body span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-faint); font-weight: 600; letter-spacing: 0.02em; }
.ts-arrow { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.3s ease, transform 0.45s cubic-bezier(.34,1.56,.64,1); }
.ts-arrow svg { width: 15px; height: 15px; }
@media (hover: hover) { .ts-card:hover { transform: translateY(-8px); box-shadow: 0 34px 60px -30px rgba(10,10,10,0.5); } .ts-card:hover .ts-photo img { transform: scale(1.07); } .ts-card:hover .ts-arrow { background: var(--silver-gradient); border-color: transparent; transform: rotate(45deg); } }
@media (max-width: 980px) { .ts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ts-grid { gap: 12px; } .ts-body { padding: 12px 12px 14px; } .ts-body b { font-size: 14.5px; } .ts-arrow { width: 30px; height: 30px; top: 10px; right: 10px; } }

/* ---- Mission (light section — words from the original GERG site) ---- */
.mission-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.mission-photo { position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 5/4.4; box-shadow: 0 40px 80px -40px rgba(10,10,10,0.5); }
.mission-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.22,1,.36,1); }
@media (hover: hover) { .mission-photo:hover img { transform: scale(1.05); } }
.mission-photo .mission-tag { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; color: #fff; background: rgba(8,8,8,0.55); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-weight: 600; font-size: 13.5px; }
.mission-photo .mission-tag img { width: 22px; height: 22px; }
.mission-quote { position: relative; margin: 22px 0 0; padding: 0 0 0 26px; border-left: 3px solid var(--silver); font-family: var(--font-head); font-weight: 600; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.38; color: var(--ink); letter-spacing: -0.01em; }
.mission-quote em { font-style: normal; color: var(--silver); }
.mission-copy > p { margin-top: 18px; color: var(--ink-muted); font-size: 15.5px; line-height: 1.75; }
.mission-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.mission-pillars div { padding: 16px 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--border); box-shadow: 0 16px 34px -26px rgba(10,10,10,0.35); }
.mission-pillars svg { width: 22px; height: 22px; color: var(--silver); }
.mission-pillars b { display: block; margin-top: 10px; font-family: var(--font-head); font-weight: 600; color: var(--ink); font-size: 15px; }
.mission-pillars span { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-muted); line-height: 1.5; }
@media (max-width: 900px) { .mission-wrap { grid-template-columns: 1fr; gap: 34px; } .mission-pillars { grid-template-columns: 1fr; } }

/* ---- Services page ---- */
.ptype-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.ptype-card.pcard { min-height: 230px; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; }
.ptype-card.pcard .pc-ic { position: absolute; top: 16px; left: 16px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2; }
.ptype-card.pcard .pc-ic svg { width: 18px; height: 18px; color: #fff; }
.ptype-card.pcard h3 { font-size: 16px; }
.ptype-card.pcard p { font-size: 12.5px; margin-top: 4px; line-height: 1.45; }
@media (max-width: 1080px) { .ptype-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ptype-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .ptype-card.pcard { min-height: 180px; padding: 14px; } .ptype-card.pcard p { display: none; } }
.rel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rel-card { padding: 24px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--border); box-shadow: 0 18px 40px -30px rgba(10,10,10,0.35); transition: transform 0.35s cubic-bezier(.22,1,.36,1), border-color 0.3s ease, box-shadow 0.3s ease; }
.rel-card .rel-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: var(--silver-gradient); box-shadow: 0 12px 24px -12px rgba(10,10,10,0.6); }
.rel-card .rel-ic svg { width: 21px; height: 21px; }
.rel-card h3 { margin-top: 16px; font-size: 17px; }
.rel-card p { margin-top: 8px; font-size: 14px; color: var(--ink-muted); line-height: 1.6; }
@media (hover: hover) { .rel-card:hover { transform: translateY(-6px); border-color: rgba(180,141,58,0.3); box-shadow: 0 30px 56px -30px rgba(10,10,10,0.45); } }
@media (max-width: 1080px) { .rel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rel-grid { grid-template-columns: 1fr; } }
.division-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.division-card.pcard { min-height: 320px; border-radius: 20px; padding: 22px; display: flex; flex-direction: column; }
.division-card.pcard .pc-body { margin-top: auto; }
.division-card.pcard .division-num { font-family: var(--font-head); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; color: var(--champagne); }
@media (max-width: 1080px) { .division-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .division-grid { grid-template-columns: 1fr; } .division-card.pcard { min-height: 260px; } }

/* ---- Community guide photo ---- */
.community-figure { margin: 30px 0 8px; border-radius: 20px; overflow: hidden; position: relative; box-shadow: 0 30px 60px -36px rgba(10,10,10,0.45); }
.community-figure img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.community-figure figcaption { position: absolute; left: 14px; bottom: 14px; padding: 8px 13px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(8,8,8,0.5); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ---- Office map ---- */
.map-card { border-radius: 22px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 30px 60px -36px rgba(10,10,10,0.45); background: #fff; }
.map-card iframe { display: block; width: 100%; height: 380px; border: 0; }
.map-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; }
.map-card-foot b { font-family: var(--font-head); font-weight: 600; color: var(--ink); }
.map-card-foot span { display: block; font-size: 13.5px; color: var(--ink-muted); }

/* ---- Phones: no card-by-card entrance animation (sections still fade in) ---- */
@media (max-width: 760px), (hover: none) {
  .reveal.pre-reveal:not(.is-visible) :is(.svc-grid, .why-grid, .yp-points, .review-grid, .perk-grid, .process-grid, .toolkit-list, .value-list, .lang-grid, .mvv-grid) > * { opacity: 1; transform: none; filter: none; }
  .reveal.pre-reveal .why-card, .reveal.pre-reveal .listing-card, .reveal.pre-reveal .community-card, .reveal.pre-reveal .team-card, .reveal.pre-reveal .perk-card, .reveal.pre-reveal .service-card { opacity: 1 !important; transform: none !important; }
}

/* ---- Accent words on photos = the logo's silver (no periwinkle drift) ---- */
.hero .accent-text, .page-header-photo .accent-text, .officer-simple-hero .accent-text, .careers-copy .accent-text {
  background: linear-gradient(115deg, #c9a24a, #b8913f 45%, #b48d3a, #b8913f 65%, #c9a24a);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Laptop tier 1024-1180px (125% Windows scaling): full menu, compacted ----
   Home link hidden (the logo goes home), call icon hidden, slimmer links. */
@media (max-width: 1180px) and (min-width: 1024px) {
  .site-nav__inner { padding: 12px 16px; gap: 8px; }
  .site-nav__links > li:first-child { display: none; }
  .site-nav__links > li > a, .site-nav__links > li > button { padding: 8px 8px; }
  .site-nav__links { font-size: 12px; }
  .site-nav__call { display: none !important; }
  .site-nav__logo .logo-light, .site-nav__logo .logo-dark, .site-nav.is-scrolled .site-nav__logo .logo-light, .site-nav.is-scrolled .site-nav__logo .logo-dark { height: 40px; }
}

/* ---- Phones: cookie banner sits above the chat launcher (it covered Accept) ---- */
@media (max-width: 560px) { .cookie-banner { bottom: 84px; } }

/* ---- Photo credits page ---- */
.credit-list { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: grid; gap: 12px; }
.credit-list li { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--border); }
.credit-list img { width: 120px; height: 80px; object-fit: cover; border-radius: 10px; }
.credit-list b { display: block; font-family: var(--font-head); font-weight: 600; color: var(--ink); }
.credit-list span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--ink-muted); }
.credit-list a { color: var(--silver); text-decoration: underline; text-underline-offset: 2px; }
.credit-note { max-width: 900px; margin: 26px auto 0; font-size: 14px; color: var(--ink-muted); text-align: center; }
.footer-bottom .footer-credits { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px) { .credit-list li { grid-template-columns: 84px 1fr; gap: 12px; } .credit-list img { width: 84px; height: 64px; } }

/* ---- 10 community cards: 5 x 2 on desktop, 2-up on tablets (never an orphan row) ---- */
.community-grid:not(.cols-3) { grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1080px) { .community-grid:not(.cols-3) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .community-grid:not(.cols-3) { grid-template-columns: 1fr; } .community-grid:not(.cols-3) .community-card { aspect-ratio: 16 / 10; } }

/* ---- Listing badges: the alternate badge is solid white (pale silver washed out on bright skies) ---- */
.listing-status:not(.status-aqua) { background: #fff; color: var(--silver-deep); box-shadow: 0 6px 16px rgba(10,10,10,0.28); }
/* ---- Phones: footer clears the floating chat button ---- */
@media (max-width: 760px) { .site-footer { padding-bottom: 96px; } }

/* ---- Open phone menu sits above the cookie banner + chat launcher ---- */
body.nav-open .site-nav, .site-nav:has(.site-nav__pill.is-mobile-open) { z-index: 700; }

/* ---- Office map ("Find Us") — consent-gated Google map, glass badge (Michael Fergusson / Centric component) ---- */
.map-section .section-head { margin-bottom: 34px; }
.map-address { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; font-size: 14.5px; color: var(--ink-muted); }
.map-address svg { width: 18px; height: 18px; color: var(--silver); flex: none; }
.map-frame { position: relative; height: 460px; max-width: 1060px; margin: 0 auto; border-radius: 28px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 34px 70px -40px rgba(10,10,10,0.5); background: var(--bg-raised); }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.15) contrast(1.04); }
.map-consent { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: linear-gradient(160deg, #f9f8f3, #eae6da); }
.map-consent::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.7; background-image: linear-gradient(rgba(180,141,58,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(180,141,58,0.07) 1px, transparent 1px); background-size: 36px 36px; }
.map-consent > * { position: relative; }
.map-consent-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: var(--silver-gradient); box-shadow: 0 14px 28px -12px rgba(10,10,10,0.6); }
.map-consent-icon svg { width: 24px; height: 24px; }
.map-consent p { max-width: 340px; font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); margin: 0; }
.map-frame.is-loaded .map-consent { display: none; }
.map-badge { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 16px; background: rgba(255,255,255,0.94); border: 1px solid var(--border); box-shadow: 0 18px 40px -20px rgba(10,10,10,0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.map-badge-icon { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--silver-gradient); }
.map-badge-icon img { width: 26px; height: 26px; object-fit: contain; }
.map-badge b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: var(--ink); }
.map-badge em { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; color: var(--ink-muted); }
.map-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.map-actions .btn svg { width: 17px; height: 17px; }
@media (max-width: 700px) { .map-frame { height: 360px; border-radius: 22px; } .map-badge { left: 10px; right: 10px; bottom: 10px; } }
.map-address { display: block; text-align: center; }
.map-address svg { display: inline-block; vertical-align: -3px; margin-right: 4px; }
.map-consent { padding-bottom: 96px; }
@media (max-width: 700px) { .map-consent { gap: 10px; padding: 16px 16px 92px; } .map-consent-icon { width: 46px; height: 46px; border-radius: 14px; } }

/* ---- Chat avatar: white hexagon mark on the logo-teal tile ---- */
.cw-avatar.cw-avatar-logo { background: var(--silver-gradient); box-shadow: 0 6px 14px -6px rgba(10,10,10,0.6); }
.cw-avatar.cw-avatar-logo img { width: 22px; height: 22px; }

/* ---- Every headline, hero included, is General Sans Semibold 600 — Copper Key's fintech look (tmack 2026-10-22).
        (The slimmer 500 hero came from the GERG lineage, a GERG-only request.) ---- */
.hero h1 { font-weight: 600; }

/* ---- Google reviews (JD Lendings / TD Homes style, real reviews only) ---- */
.grv-section { position: relative; overflow: hidden; }
.grv-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(180,141,58,0.08), transparent 70%), linear-gradient(180deg, var(--bg), #f2efe6); }
.grv-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin: -6px auto 38px; font-size: 14.5px; color: var(--ink-muted); }
.grv-summary > svg { width: 20px; height: 20px; }
.grv-summary b { font-family: var(--font-head); font-weight: 600; font-size: 16px; color: var(--ink); }
.grv-summary a { color: var(--silver); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.grv-sep { color: var(--ink-faint); }
.grv-stars { display: inline-flex; gap: 2px; color: #c9a24a; }
.grv-stars i { display: inline-flex; font-style: normal; }
.grv-stars svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.reveal.pre-reveal .grv-stars i { opacity: 0; transform: scale(0.4) rotate(-30deg); }
.reveal.is-visible .grv-stars i, .reveal:not(.pre-reveal) .grv-stars i { opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.55s cubic-bezier(.34,1.56,.64,1); transition-delay: calc(250ms + var(--s, 0) * 90ms); }
.grv-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; max-width: 1000px; margin: 0 auto; align-items: stretch; }
.grv-card { position: relative; display: flex; flex-direction: column; padding: 30px 30px 28px; border-radius: 22px; background: #fff; border: 1px solid var(--border); box-shadow: 0 26px 56px -34px rgba(10,10,10,0.4); overflow: hidden; }
.grv-mark { position: absolute; top: -18px; right: 22px; font-family: Georgia, serif; font-size: 140px; line-height: 1; background: linear-gradient(180deg, rgba(180,141,58,0.22), rgba(180,141,58,0.04)); -webkit-background-clip: text; background-clip: text; color: transparent; pointer-events: none; }
.grv-top { display: flex; align-items: center; gap: 12px; }
.grv-avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; font-family: var(--font-head); font-weight: 600; font-size: 15px; color: #fff; background: var(--silver-gradient); box-shadow: 0 10px 22px -10px rgba(10,10,10,0.6); }
.grv-g { margin-left: auto; display: inline-flex; }
.grv-g svg { width: 20px; height: 20px; }
.grv-quote { margin: 22px 0 0; font-size: clamp(19px, 2vw, 23px); line-height: 1.5; font-style: italic; color: var(--ink-soft); }
.grv-divider { display: block; width: 34px; height: 2px; margin-top: auto; padding-top: 0; background: var(--silver); border-radius: 2px; }
.grv-quote + .grv-divider { margin-top: 30px; }
.grv-who { margin-top: 14px; }
.grv-who b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 15.5px; color: var(--ink); }
.grv-who span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-faint); }
.grv-invite { align-items: flex-start; justify-content: center; background: linear-gradient(160deg, #fff, #f5f3ed); border-style: dashed; border-color: var(--border-strong); }
.grv-invite-g { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 10px 22px -12px rgba(10,10,10,0.4); }
.grv-invite-g svg { width: 26px; height: 26px; }
.grv-invite h3 { margin-top: 18px; font-size: 21px; }
.grv-invite p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); }
.grv-leave { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 13px 22px 13px 14px; border-radius: 999px; font-family: var(--font-head); font-weight: 600; font-size: 14px; color: #fff; background: var(--silver-gradient); box-shadow: 0 14px 30px -14px rgba(10,10,10,0.7); transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease; }
.grv-leave-g { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; flex: none; }
.grv-leave-g svg { width: 17px; height: 17px; }
.grv-leave-stars { color: #c9a24a; font-size: 12px; letter-spacing: 0.06em; }
@media (hover: hover) { .grv-leave:hover { transform: translateY(-3px); box-shadow: 0 20px 38px -14px rgba(10,10,10,0.75); } .grv-card.tilt-card:hover { box-shadow: 0 34px 66px -34px rgba(10,10,10,0.5); } }
@media (max-width: 860px) { .grv-grid { grid-template-columns: 1fr; max-width: 560px; } .grv-card { padding: 26px 22px 24px; } .grv-mark { font-size: 110px; } }
@media (prefers-reduced-motion: reduce) { .reveal.pre-reveal .grv-stars i { opacity: 1; transform: none; } }
@media (max-width: 560px) { .grv-sep { display: none; } .grv-summary a { flex-basis: 100%; text-align: center; } }

/* LP-PACK:START */
/* ==========================================================================
   LP PACK — William Jusme II's layer on the City Capital / Copper Key /
   Millennium base: black + gold header, the arched portrait hero, services,
   About, featured listings, THE BLUEPRINT process (a house drawn in gold,
   one stage per step), the payment calculator, the areas carousel, the
   rental band, Instagram reels, Get In Touch, and the black footer.
   (Source: _src/lp-pack.css — build.py appends it to styles.css between the
   LP-PACK markers, so edit it there.)
   ========================================================================== */

:root {
  --lp-ink: #0c0c0c; --lp-ink-2: #0f0f0f; --lp-gold: #c9a24a; --lp-gold-mid: #b48d3a; --lp-gold-deep: #8a6a2f;
  --lp-cream: #f5f3ee; --lp-line: rgba(201,162,74,0.24);
}

/* ---- Standing rules: no specks at any element's edges; iPhone-safe buttons; 16px fields on touch ---- */
*, *::before, *::after { background-origin: border-box !important; }
.reel-card, .bp-tab, .bp-node, .lst-tab, .reel-modal-close, .nvc-arrow, .cw-launcher { -webkit-appearance: none; appearance: none; font-family: inherit; margin: 0; }
.reel-modal-close, .nvc-arrow, .cw-launcher, .cw-close, .cw-send { padding: 0; }
h1, h2, h3 { text-wrap: balance; }
h1, h2, h3 { line-height: 1.15; }
/* the gliding outline (Copper Key's gl-card) in William's gold — one hue, never mixed */
.gl-card::after { background: conic-gradient(from var(--gl-angle), #c9a24a 0%, #a8852f 25%, #efdcaa 50%, #a8852f 75%, #c9a24a 100%); }
.leads-panel { border-radius: 28px; background: linear-gradient(135deg, #ffffff, #f6f2e9); box-shadow: 0 40px 80px -56px rgba(12,12,12,0.5); }
.page-header p, .section-head p, .lede, .hero p { text-wrap: pretty; }
main [id], section[id], h2[id] { scroll-margin-top: 96px; }
a, button { touch-action: manipulation; }
/* focus ring: deep gold on light grounds (base), brand gold on photos and black bands */
.on-dark :focus-visible, .site-nav :focus-visible, .site-footer :focus-visible, .hero :focus-visible, .page-header-photo :focus-visible, .cw-head :focus-visible, .funnel-body :focus-visible, .reel-modal :focus-visible { outline-color: var(--lp-gold); }
.cw-body { overscroll-behavior: contain; }
.nw { white-space: nowrap; }

/* ---- Accent words: deep gold on light grounds, brand gold on photos and black bands ---- */
.accent-text { background-image: linear-gradient(115deg, #a5832f, #8a6a2f 45%, #765a1c, #8a6a2f 65%, #a5832f); }
.hero .accent-text, .page-header-photo .accent-text, .careers-copy .accent-text, .lg-hero .accent-text, .on-dark .accent-text {
  background-image: linear-gradient(115deg, #e2c47e, #c9a24a 45%, #b8913f, #c9a24a 65%, #e2c47e);
}

/* ---- Eyebrows: black type in a gold-tinted pill with a gold dot (section labels only, never above the hero H1) ---- */
.eyebrow { color: var(--lp-ink); background: rgba(201,162,74,0.14); border-color: rgba(180,141,58,0.4); gap: 8px; }
.eyebrow::before { background: var(--lp-gold-deep); box-shadow: 0 0 0 3px rgba(201,162,74,0.25); }
.on-dark .eyebrow, .page-header-photo .eyebrow { color: var(--lp-cream); background: rgba(201,162,74,0.12); border-color: rgba(201,162,74,0.34); }
.on-dark .eyebrow::before, .page-header-photo .eyebrow::before { background: var(--lp-gold); }
.section-head h2::after { background: linear-gradient(90deg, var(--lp-gold), var(--lp-gold-mid)); }

/* ---- Buttons: gold fill + black ink; outlines black on light, cream on photos / black bands ---- */
.btn-primary, .site-nav__cta { color: var(--lp-ink); }
.btn-outline { border: 1.5px solid var(--lp-ink); background: rgba(12,12,12,0.02); color: var(--lp-ink); }
.btn-outline::after { background: rgba(201,162,74,0.24); }
.btn-outline:hover { border-color: var(--lp-gold-mid); color: var(--lp-ink); box-shadow: 0 10px 22px rgba(12,12,12,0.14); }
.hero .btn-outline, .page-header-photo .btn-outline, .on-dark .btn-outline, .lg-hero .btn-outline {
  color: #fff; border-color: rgba(245,243,238,0.7); background: rgba(255,255,255,0.06);
}
.hero .btn-outline::after, .page-header-photo .btn-outline::after, .on-dark .btn-outline::after { background: rgba(201,162,74,0.22); }
.hero .btn-outline:hover, .page-header-photo .btn-outline:hover, .on-dark .btn-outline:hover { color: #fff; border-color: var(--lp-gold); background: rgba(201,162,74,0.14); }
.btn svg { width: 16px; height: 16px; flex: none; }
html[lang="es"] .btn, html[lang="fr"] .btn { white-space: normal; text-align: center; line-height: 1.25; }
html[lang="es"] .site-nav__cta, html[lang="fr"] .site-nav__cta { white-space: nowrap; }

/* ==========================================================================
   HEADER — see-through over every hero / page header (white words on the
   photo), then black glass once the second section reaches it. The gold
   wordmark (old site's TEAM JUSME, transparent PNG) works on both.
   ========================================================================== */
.site-nav__logo .logo-light { display: block !important; height: 40px; width: auto; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.45)); }
.site-nav.is-scrolled .site-nav__logo .logo-light { height: 34px; }
.site-nav__inner { padding: 16px 32px; }
.site-nav.is-scrolled .site-nav__inner { padding-top: 10px; padding-bottom: 10px; }
.site-nav.is-scrolled {
  background: rgba(12,12,12,0.86); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 1px 0 rgba(201,162,74,0.16), 0 14px 34px rgba(0,0,0,0.28);
}
.site-nav .site-nav__links { color: rgba(245,243,238,0.9); }
.site-nav .site-nav__pill { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-nav.is-scrolled .site-nav__pill { background: rgba(255,255,255,0.05); border-color: rgba(201,162,74,0.16); }
.site-nav .site-nav__links > li > a:hover, .site-nav .site-nav__links > li > button:hover { color: #fff; background: rgba(255,255,255,0.1); }
.site-nav .site-nav__links > li > a.is-active, .site-nav .site-nav__item.has-active > button { color: var(--lp-gold); }
.site-nav .site-nav__icon-btn, .site-nav .site-nav__toggle { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-nav .site-nav__icon-btn:hover { color: var(--lp-gold); border-color: var(--lp-gold); background: rgba(201,162,74,0.12); }
.site-nav.is-scrolled .site-nav__icon-btn, .site-nav.is-scrolled .site-nav__toggle { background: rgba(255,255,255,0.06); border-color: rgba(201,162,74,0.22); }
.lang-toggle-btn { gap: 6px; padding: 0 12px 0 11px; }
.lang-toggle-btn svg { width: 15px; height: 15px; flex: none; }
.lang-menu, .mega-menu {
  background: rgba(16,16,16,0.97); border-color: rgba(201,162,74,0.2);
  box-shadow: 0 26px 54px rgba(0,0,0,0.42); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.lang-menu button { color: rgba(245,243,238,0.88); }
.lang-menu button:hover { background: rgba(201,162,74,0.12); color: #fff; }
.lang-menu button.is-active { color: var(--lp-gold); }
.lang-menu button { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lang-menu button.is-active::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--lp-gold); box-shadow: 0 0 0 3px rgba(201,162,74,0.2); }
.mega-menu a:hover { background: rgba(201,162,74,0.1); }
.mega-menu a strong { color: #fff; }
.mega-menu a span { color: rgba(245,243,238,0.6); }
.mega-areas { width: 560px; grid-template-columns: repeat(3, 1fr); }
.mega-areas .mega-all { grid-column: 1 / -1; border-top: 1px solid rgba(201,162,74,0.16); border-radius: 0 0 10px 10px; }
.mega-areas .mega-all strong { color: var(--lp-gold); }
.site-nav__cta { box-shadow: 0 8px 22px rgba(201,162,74,0.28); }
/* the base hides its first item (a "Home" link) on laptops — here the first item is Buy, which stays */
.site-nav .site-nav__links > li:first-child { display: list-item; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* laptop widths (1024–1279): full menu, compacted; Contact lives in the CTA + footer there */
@media (max-width: 1279px) and (min-width: 1024px) {
  .site-nav__inner { padding: 14px 18px; gap: 8px; }
  .site-nav__logo .logo-light { height: 32px; }
  .site-nav.is-scrolled .site-nav__logo .logo-light { height: 30px; }
  .site-nav__links { font-size: 12px; }
  .site-nav__links > li > a, .site-nav__links > li > button { padding: 9px 9px; }
  .nav-contact { display: none; }
  .site-nav__actions { gap: 6px; }
  .site-nav__icon-btn { height: 38px; min-width: 38px; }
  .lang-toggle-btn { padding: 0 9px; }
  .site-nav__cta { padding: 10px 14px; font-size: 12px; }
}
@media (max-width: 1100px) and (min-width: 1024px) { .lang-toggle-btn svg { display: none; } .site-nav__call { display: none !important; } }
/* phone + tablet menu: black glass sheet, cream words */
@media (max-width: 1023px) {
  .site-nav__inner { padding: 12px 18px; }
  .site-nav__logo .logo-light, .site-nav.is-scrolled .site-nav__logo .logo-light { height: 32px; }
  .site-nav__pill.is-mobile-open, .site-nav.is-scrolled .site-nav__pill.is-mobile-open {
    top: 74px; background: rgba(12,12,12,0.97); border: 1px solid rgba(201,162,74,0.2); box-shadow: 0 26px 54px rgba(0,0,0,0.5);
  }
  .site-nav .site-nav__pill.is-mobile-open .site-nav__links { color: rgba(245,243,238,0.92); }
  .nav-contact { display: block; }
  .mega-menu { background: rgba(255,255,255,0.04); }
  .mega-areas { width: 100%; grid-template-columns: 1fr 1fr; }
  .mega-areas .mega-all { grid-column: 1 / -1; }
  .mega-menu a { padding: 11px 14px; }
  .mega-menu a span { display: none; }
  .mega-areas .mega-all span { display: block; }
}
@media (max-width: 640px) {
  .site-nav__inner { padding: 10px 14px; }
  .site-nav__logo .logo-light, .site-nav.is-scrolled .site-nav__logo .logo-light { height: 28px; }
  .site-nav__cta { display: none; }
  .site-nav__pill.is-mobile-open, .site-nav.is-scrolled .site-nav__pill.is-mobile-open { top: 64px; left: 12px; right: 12px; }
}
@media (max-width: 360px) { .site-nav__logo .logo-light, .site-nav.is-scrolled .site-nav__logo .logo-light { height: 24px; } }
.nav-mobile-cta { display: none; }
@media (max-width: 640px) { .nav-mobile-cta { display: block; padding: 8px 4px 2px; } .nav-mobile-cta .btn { width: 100%; justify-content: center; } }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: 999px; background: var(--lp-ink); color: #fff; font-weight: 600; font-size: 14px; transition: top 0.2s ease; }
.skip-link:focus { top: 14px; outline: 2px solid var(--lp-gold); outline-offset: 2px; }

/* ==========================================================================
   HERO — the house at golden hour, softly blurred under a black veil; copy
   left, William in an arched gold window right (his photo was taken under
   arches). The arch frames him; his head rises out of the top of it.
   ========================================================================== */
.hero.lp-hero { min-height: 100vh; min-height: 100svh; padding: 132px 0 86px; display: flex; align-items: center; background: #070707; isolation: isolate; }
.lp-hero .hero-bg { position: absolute; inset: -3%; z-index: -3; background: #070707 var(--photo) center 55% / cover no-repeat; filter: blur(2.5px) saturate(1.06); transform-origin: 60% 50%; animation: lp-drift 32s ease-in-out infinite alternate; will-change: transform; }
@keyframes lp-drift { from { transform: scale(1.02); } to { transform: scale(1.1) translate3d(-1.2%, -0.8%, 0); } }
.lp-hero .hero-veil { position: absolute; inset: 0; z-index: -2; background:
  linear-gradient(90deg, rgba(9,9,9,0.86) 0%, rgba(9,9,9,0.66) 40%, rgba(9,9,9,0.34) 72%, rgba(9,9,9,0.4) 100%),
  linear-gradient(0deg, rgba(9,9,9,0.7) 0%, rgba(9,9,9,0) 38%), rgba(12,12,12,0.12); }
.lp-hero .hero-glow { position: absolute; z-index: -1; right: 8%; top: 18%; width: 46vmax; height: 46vmax; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(201,162,74,0.16), rgba(201,162,74,0) 64%); }
.lp-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 56px; align-items: center; text-align: left; max-width: var(--max); width: 100%; position: relative; z-index: 1; }
.lp-hero .hero-copy { align-items: flex-start; }
.lp-hero h1 { font-size: clamp(44px, 5.5vw, 78px); line-height: 1.02; letter-spacing: -0.028em; color: #fff; max-width: 640px; margin: 0; }
.lp-hero .lede { margin-top: 22px; max-width: 520px; font-size: 18px; line-height: 1.7; color: rgba(245,243,238,0.84); }
.lp-hero .hero-actions { justify-content: flex-start; margin-top: 30px; }
.hero-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 30px; width: 100%; max-width: 560px; }
.hero-path {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 16px; color: #fff;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform 0.35s cubic-bezier(.22,1,.36,1), border-color 0.3s ease, background 0.3s ease;
  opacity: 0; animation: ck-rise 0.7s cubic-bezier(.22,1,.36,1) forwards; animation-delay: calc(0.9s + var(--i, 0) * 0.1s);
}
.hero-path .hp-ic { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; background: rgba(201,162,74,0.16); color: var(--lp-gold); transition: background 0.3s ease, color 0.3s ease; }
.hero-path .hp-ic svg { width: 17px; height: 17px; }
.hero-path b { font-family: var(--font-head); font-weight: 600; font-size: 14px; line-height: 1.25; }
.hero-path .hp-go { margin-left: auto; width: 14px; height: 14px; color: rgba(255,255,255,0.55); flex: none; transition: transform 0.3s ease, color 0.3s ease; }
@media (hover: hover) {
  .hero-path:hover { transform: translateY(-3px); border-color: rgba(201,162,74,0.7); background: rgba(201,162,74,0.1); }
  .hero-path:hover .hp-ic { background: var(--lp-gold); color: var(--lp-ink); }
  .hero-path:hover .hp-go { color: var(--lp-gold); transform: translate(2px, -2px); }
}
.hero-path:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 3px; }
.hero-lockup { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 26px; font-size: 12.5px; color: rgba(245,243,238,0.66); letter-spacing: 0.01em; }
.hero-lockup b { color: var(--lp-gold); font-weight: 600; letter-spacing: 0.08em; font-size: 11px; text-transform: uppercase; margin-right: 6px; }
@keyframes ck-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* the arch card */
.hero-visual { position: relative; justify-self: center; width: min(100%, 430px); }
.hero-arch { position: relative; aspect-ratio: 430 / 540; transform-style: preserve-3d; will-change: transform; animation: lp-arch-in 1.1s cubic-bezier(.2,.7,.2,1) 0.25s both; }
@keyframes lp-arch-in { from { opacity: 0; transform: translateY(26px) scale(0.97); } to { opacity: 1; transform: none; } }
.arch-window {
  position: absolute; left: 7%; right: 7%; top: 13%; bottom: 13%; border-radius: 999px 999px 28px 28px; overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% 32%, rgba(201,162,74,0.34), rgba(201,162,74,0.06) 55%, rgba(12,12,12,0.2) 100%), rgba(12,12,12,0.42);
  border: 1px solid rgba(201,162,74,0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.08);
}
.arch-window::before { content: ''; position: absolute; inset: 12px; border-radius: inherit; border: 1px solid rgba(201,162,74,0.22); }
/* a slow gold light gliding around the arch's own outline */
.arch-trace { position: absolute; left: 7%; right: 7%; top: 13%; bottom: 13%; border-radius: 999px 999px 28px 28px; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--lp-a, 0deg), rgba(201,162,74,0) 0deg, rgba(240,218,160,0.95) 40deg, rgba(201,162,74,0) 90deg, rgba(201,162,74,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: lp-trace 9s linear infinite; }
@property --lp-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes lp-trace { to { --lp-a: 360deg; } }
.arch-motes { position: absolute; left: 7%; right: 7%; top: 13%; bottom: 13%; border-radius: 999px 999px 28px 28px; overflow: hidden; pointer-events: none; }
.arch-motes i { position: absolute; bottom: -6px; width: 4px; height: 4px; border-radius: 50%; background: var(--lp-gold); box-shadow: 0 0 10px 2px rgba(201,162,74,0.6); opacity: 0; animation: lp-mote 7s linear infinite; }
.arch-motes i:nth-child(1) { left: 18%; animation-delay: 0s; } .arch-motes i:nth-child(2) { left: 38%; animation-delay: 2.2s; animation-duration: 8s; }
.arch-motes i:nth-child(3) { left: 62%; animation-delay: 4.1s; } .arch-motes i:nth-child(4) { left: 80%; animation-delay: 1.3s; animation-duration: 9s; }
.arch-motes i:nth-child(5) { left: 50%; animation-delay: 5.6s; animation-duration: 6.5s; }
@keyframes lp-mote { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(-340px); } }
/* the cutout: shadow on an unmasked wrapper, mask on the image (never a filter on a masked img) */
.arch-shadow { position: absolute; left: 0; right: 0; bottom: 13%; height: 92%; z-index: 2; pointer-events: none; filter: drop-shadow(0 28px 34px rgba(0,0,0,0.5)); }
.arch-photo { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 99%); mask-image: linear-gradient(180deg, #000 80%, transparent 99%); }
.arch-plate {
  position: absolute; left: 3%; right: 3%; bottom: 3%; z-index: 3; padding: 15px 18px 14px; border-radius: 18px;
  background: rgba(13,13,13,0.74); border: 1px solid rgba(201,162,74,0.3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 22px 44px -22px rgba(0,0,0,0.7); text-align: left; transform: translateZ(40px);
}
.arch-plate b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 18px; color: #fff; letter-spacing: -0.005em; }
.arch-plate span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--lp-gold); letter-spacing: 0.02em; }
.arch-plate small { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 11.5px; color: rgba(245,243,238,0.7); }
.arch-plate small svg { width: 13px; height: 13px; color: var(--lp-gold); flex: none; }
.arch-badge {
  position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 14px;
  background: rgba(12,12,12,0.72); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 36px -18px rgba(0,0,0,0.7); color: #fff; white-space: nowrap; transform: translateZ(60px);
  animation: lp-float 6s ease-in-out infinite;
}
.arch-badge .ab-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--lp-gold); color: var(--lp-ink); flex: none; }
.arch-badge .ab-ic svg { width: 15px; height: 15px; }
.arch-badge b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 13px; line-height: 1.2; }
.arch-badge span { display: block; font-size: 11px; color: rgba(245,243,238,0.66); line-height: 1.3; }
.arch-badge.b1 { top: 22%; left: -8%; animation-delay: -1.2s; }
.arch-badge.b2 { top: 44%; right: -9%; animation-delay: -3s; }
.arch-badge.b3 { top: 3%; right: 6%; animation-delay: -4.4s; }
@keyframes lp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
/* laptop widths: tuck the badges in so nothing reaches the window edge */
@media (max-width: 1240px) { .arch-badge.b1 { left: -3%; } .arch-badge.b2 { right: -3%; } }
/* tmack: the languages card is a desktop-only detail (the stacked tablet/phone hero starts at 1080px) */
@media (max-width: 1080px) { .arch-badge.b1 { display: none; } }
/* short laptop windows (e.g. 1280x580): a smaller card and a lifted hero, so the name plate sits above the fold */
@media (min-width: 1081px) and (max-height: 760px) {
  .hero.lp-hero { padding: 104px 0 56px; }
  .hero-visual { width: min(100%, 340px); }
  .lp-hero h1 { font-size: clamp(42px, 4.6vw, 62px); }
  .lp-hero .lede { margin-top: 16px; font-size: 16.5px; }
  .lp-hero .hero-actions { margin-top: 22px; }
  .hero-paths { margin-top: 20px; }
  .hero-lockup { margin-top: 16px; }
}
@media (max-width: 1080px) {
  .lp-hero .wrap { grid-template-columns: 1fr; gap: 44px; text-align: left; justify-items: start; }
  .hero-visual { justify-self: center; width: min(100%, 380px); }
}
@media (max-width: 640px) {
  .hero.lp-hero { padding: 104px 0 64px; min-height: auto; }
  .lp-hero h1 { font-size: clamp(36px, 10.4vw, 46px); }
  .lp-hero .lede { font-size: 16px; margin-top: 16px; }
  .lp-hero .hero-actions { width: 100%; }
  .lp-hero .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .hero-paths { grid-template-columns: 1fr; gap: 8px; }
  .hero-visual { width: min(100%, 320px); }
  .arch-badge { padding: 8px 11px 8px 8px; }
  .arch-badge .ab-ic { width: 26px; height: 26px; }
  .arch-badge.b1 { left: -2%; top: 20%; } .arch-badge.b2 { right: -2%; top: 46%; } .arch-badge.b3 { display: none; }
  .arch-plate b { font-size: 16px; }
}
.hero-scroll { position: absolute; left: 50%; bottom: 22px; z-index: 2; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(245,243,238,0.55); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; }
.hero-scroll i { width: 1px; height: 34px; background: linear-gradient(180deg, rgba(201,162,74,0), var(--lp-gold)); animation: lp-scroll 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes lp-scroll { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(14px); opacity: 0; } }
@media (max-width: 1080px), (max-height: 700px) { .hero-scroll { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .lp-hero .hero-bg, .hero-arch, .arch-trace, .arch-motes i, .arch-badge, .hero-path, .hero-scroll i { animation: none !important; opacity: 1; }
}

/* ==========================================================================
   SERVICES — four translucent photo cards (pcard), each a door to a page
   ========================================================================== */
.svc4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.svc4 .pcard { min-height: 380px; --pc-pad: 24px; }
.svc4 .pc-tag { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(12,12,12,0.42); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.svc4 .pc-tag svg { width: 14px; height: 14px; color: var(--lp-gold); }
.svc4 .pc-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--lp-gold); }
.svc4 .pc-go svg { width: 14px; height: 14px; transition: transform 0.3s ease; }
@media (hover: hover) { .svc4 .pcard:hover .pc-go svg { transform: translate(3px, -3px); } }
@media (max-width: 1100px) { .svc4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .svc4 { grid-template-columns: 1fr; } .svc4 .pcard { min-height: 300px; } }

/* ==========================================================================
   ABOUT — "Hi, I'm William." His photo (with its own background) in a frame
   with a gold offset outline, two license chips, and an honest stats row.
   ========================================================================== */
.lp-about .about-grid { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 64px; align-items: center; }
.ab-photo { position: relative; max-width: 470px; justify-self: center; width: 100%; }
.ab-photo::before { content: ''; position: absolute; inset: 0; transform: translate(18px, 18px); border-radius: 30px; border: 1.5px solid var(--lp-gold); z-index: 0; transition: transform 0.6s cubic-bezier(.22,1,.36,1); }
.ab-frame { position: relative; z-index: 1; border-radius: 30px; overflow: hidden; background: var(--lp-ink); box-shadow: 0 40px 80px -40px rgba(12,12,12,0.55); }
.ab-frame img { width: 100%; height: auto; aspect-ratio: 1 / 1.08; object-fit: cover; object-position: 50% 20%; display: block; transition: transform 1.4s cubic-bezier(.22,1,.36,1); }
@media (hover: hover) { .ab-photo:hover::before { transform: translate(10px, 10px); } .ab-photo:hover .ab-frame img { transform: scale(1.03); } }
.ab-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 11px 15px 11px 11px; border-radius: 16px; background: #fff; box-shadow: 0 22px 44px -22px rgba(12,12,12,0.45), 0 0 0 1px rgba(12,12,12,0.05); white-space: nowrap; }
.ab-chip .ab-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--lp-ink); color: var(--lp-gold); flex: none; }
.ab-chip .ab-ic svg { width: 16px; height: 16px; }
.ab-chip b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 13.5px; color: var(--lp-ink); line-height: 1.2; }
.ab-chip span { display: block; font-size: 11.5px; color: var(--ink-muted); }
.ab-chip.c1 { top: 22px; right: -18px; }
.ab-chip.c2 { bottom: 26px; left: -18px; }
.ab-copy h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.02em; margin-top: 14px; }
.ab-copy > p { margin-top: 18px; color: var(--ink-soft); font-size: 16.5px; line-height: 1.75; max-width: 580px; }
.ab-roles { display: grid; gap: 0; margin-top: 26px; border-top: 1px solid var(--border); }
.ab-role { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--border); }
.ab-role .ab-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(201,162,74,0.16); color: var(--lp-gold-deep); }
.ab-role .ab-ic svg { width: 20px; height: 20px; }
.ab-role b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 15.5px; color: var(--lp-ink); }
.ab-role span { display: block; font-size: 13.5px; color: var(--ink-muted); }
.about-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.about-stat { padding: 16px 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--border); text-align: left; transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s ease; }
.about-stat b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 28px; line-height: 1; color: var(--lp-ink); font-variant-numeric: tabular-nums; }
.about-stat span { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.35; color: var(--ink-muted); }
@media (hover: hover) { .about-stat:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--lp-gold), 0 18px 34px -20px rgba(12,12,12,0.35); } }
.ab-copy .hero-actions { justify-content: flex-start; margin-top: 28px; }
@media (max-width: 980px) {
  .lp-about .about-grid { grid-template-columns: minmax(0, 1fr); gap: 52px; }
  .ab-photo { max-width: 420px; }
}
@media (max-width: 560px) {
  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-chip.c1 { right: -6px; top: 14px; } .ab-chip.c2 { left: -6px; bottom: 16px; }
  .ab-photo::before { transform: translate(10px, 10px); }
}

/* ==========================================================================
   FEATURED LISTINGS — William's own listings (dated snapshot), filterable
   ========================================================================== */
.lst-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 26px; }
.lst-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.lst-tab { padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--border-strong); background: #fff; color: var(--ink-soft); font: 600 13.5px/1 var(--font-body); cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }
.lst-tab:hover { border-color: var(--lp-ink); color: var(--lp-ink); }
.lst-tab.is-on { background: var(--lp-ink); border-color: var(--lp-ink); color: var(--lp-gold); }
.lst-count { font-size: 13.5px; color: var(--ink-muted); }
.lst-count b { color: var(--lp-ink); }
.lst-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.lst-card { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--border), 0 26px 50px -36px rgba(12,12,12,0.45); transition: box-shadow 0.4s ease; }
.lst-card[hidden] { display: none; }
@media (hover: hover) { .lst-card:hover { box-shadow: 0 0 0 1px rgba(201,162,74,0.6), 0 34px 60px -34px rgba(12,12,12,0.5); } }
.lst-photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #e9e4d8; }
.lst-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
@media (hover: hover) { .lst-card:hover .lst-photo img { transform: scale(1.05); } }
.lst-badge { position: absolute; left: 14px; top: 14px; padding: 7px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--lp-ink); color: var(--lp-gold); }
.lst-badge-rent { background: #fff; color: var(--lp-ink); }
.lst-badge-commercial { background: var(--lp-gold); color: var(--lp-ink); }
.lst-price { position: absolute; right: 14px; bottom: 14px; padding: 9px 14px; border-radius: 12px; font-family: var(--font-head); font-weight: 600; font-size: 19px; color: #fff; background: rgba(12,12,12,0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(201,162,74,0.35); font-variant-numeric: tabular-nums; }
.lst-body { padding: 22px 24px 22px; }
.lst-body h3 { font-size: 21px; color: var(--lp-ink); }
.lst-city { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; color: var(--ink-muted); }
.lst-city svg { width: 14px; height: 14px; color: var(--lp-gold-deep); flex: none; }
.lst-facts { margin-top: 12px; font-size: 14.5px; color: var(--ink-soft); }
.lst-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12.5px; color: var(--ink-faint); }
.lst-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.lst-actions a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.lst-actions a svg { width: 14px; height: 14px; transition: transform 0.3s ease; }
.lst-link { color: var(--lp-ink); }
.lst-ask { color: var(--lp-gold-deep); }
@media (hover: hover) { .lst-actions a:hover svg { transform: translateX(3px); } }
.lst-note { margin-top: 22px; font-size: 13px; color: var(--ink-faint); text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
@media (max-width: 860px) { .lst-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   THE BLUEPRINT — process. Black band; the section pins while you scroll;
   a house is drawn in gold, one stage per step, as the step cards change.
   ========================================================================== */
.bp { padding: 0; background: var(--lp-ink); color: var(--lp-cream); }
.bp-scroll { position: relative; height: calc(100vh + 3 * 78vh); height: calc(100svh + 3 * 78svh); }
.bp-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; padding: 92px 0 26px; overflow: hidden; }
.bp-pin::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background-image: linear-gradient(rgba(201,162,74,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(201,162,74,0.07) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 85%); }
.bp-pin > .wrap { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.bp-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.bp-top h2 { color: #fff; font-size: clamp(28px, 3.3vw, 44px); line-height: 1.08; letter-spacing: -0.02em; margin-top: 12px; max-width: 560px; }
.bp-top p { margin-top: 10px; color: rgba(245,243,238,0.72); font-size: 15.5px; max-width: 520px; }
.bp-tabs { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(201,162,74,0.22); flex: none; }
.bp-tab { padding: 10px 18px; border-radius: 999px; border: 0; background: transparent; color: rgba(245,243,238,0.78); font: 600 14px/1 var(--font-body); cursor: pointer; transition: background 0.3s ease, color 0.3s ease; }
.bp-tab.is-on { background: var(--lp-gold); color: var(--lp-ink); }
.bp-tab:focus-visible, .bp-node:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 3px; }
.bp-stage-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: center; margin-top: 18px; }
.bp-draw { position: relative; height: 100%; max-height: 440px; min-height: 0; display: grid; place-items: center; }
.bp-draw svg { width: 100%; height: 100%; max-height: 440px; overflow: visible; }
.bp-draw .bp-glow { position: absolute; left: 50%; top: 55%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(201,162,74,0.3), rgba(201,162,74,0) 65%); opacity: 0; transition: opacity 0.8s ease; pointer-events: none; }
.bp[data-step="4"] .bp-draw .bp-glow { opacity: 1; }
.bp-stage path, .bp-stage line, .bp-stage rect, .bp-stage polyline, .bp-stage circle {
  fill: none; stroke: var(--lp-gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--d, 0)); vector-effect: none;
}
.bp-stage .thin { stroke-width: 1.1; opacity: 0.55; }
.bp-stage .dim { stroke-width: 1; opacity: 0.4; stroke-dasharray: 1; }
.bp-stage path.lit { stroke: none; fill: rgba(201,162,74,0.42); fill-opacity: 0; transition: fill-opacity 0.8s ease 0.2s; }
.bp-stage.is-done .lit { fill-opacity: 1; }
.bp-cards { position: relative; min-height: 300px; }
.bp-card { position: absolute; inset: 0 auto auto 0; width: 100%; padding: 30px 30px 28px; border-radius: 24px; background: rgba(255,255,255,0.04); border: 1px solid rgba(201,162,74,0.24); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(26px); clip-path: inset(0 0 100% 0 round 24px); pointer-events: none;
  transition: opacity 0.5s ease, transform 0.65s cubic-bezier(.22,1,.36,1), clip-path 0.65s cubic-bezier(.22,1,.36,1); }
.bp-card.is-past { transform: translateY(-26px); }
.bp-card.is-active { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 24px); pointer-events: auto; }
.bp-card .bp-step { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-gold); }
.bp-card .bp-step i { width: 26px; height: 1.5px; background: var(--lp-gold); }
.bp-card h3 { margin-top: 14px; color: #fff; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.12; letter-spacing: -0.015em; }
.bp-card p { margin-top: 12px; color: rgba(245,243,238,0.78); font-size: 16px; line-height: 1.7; }
.bp-card ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.bp-card li { padding: 7px 12px; border-radius: 999px; font-size: 12.5px; color: var(--lp-cream); background: rgba(201,162,74,0.1); border: 1px solid rgba(201,162,74,0.24); }
.bp-foot { display: flex; align-items: center; gap: 22px; margin-top: 16px; }
.bp-count { font-family: var(--font-head); font-weight: 600; font-size: 30px; color: var(--lp-gold); font-variant-numeric: tabular-nums; min-width: 42px; }
.bp-count + small { color: rgba(245,243,238,0.45); font-size: 13px; margin-left: -16px; }
.bp-rail { position: relative; flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); }
.bp-rail::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 1.5px; background: rgba(201,162,74,0.2); }
.bp-rail-fill { position: absolute; left: 0; right: 0; top: 9px; height: 1.5px; background: var(--lp-gold); transform-origin: left; transform: scaleX(0); }
.bp-node { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0 8px 0 0; border: 0; background: none; color: rgba(245,243,238,0.5); font: 600 13px/1.3 var(--font-body); text-align: left; cursor: pointer; transition: color 0.3s ease; }
.bp-node .dot { width: 19px; height: 19px; border-radius: 50%; background: var(--lp-ink); border: 1.5px solid rgba(201,162,74,0.4); display: grid; place-items: center; transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease; }
.bp-node .dot::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--lp-gold); transform: scale(0.4); opacity: 0; transition: transform 0.3s cubic-bezier(.22,1,.36,1), opacity 0.3s ease; }
.bp-node.is-on { color: rgba(245,243,238,0.85); }
.bp-node.is-on .dot { border-color: var(--lp-gold); }
.bp-node.is-on .dot::after { transform: scale(1); opacity: 1; }
.bp-node.is-current { color: #fff; }
.bp-node.is-current .dot { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(201,162,74,0.14); }
.bp[data-mode="sell"] .lbl-buy, .bp:not([data-mode="sell"]) .lbl-sell { display: none; }
.bp-card[data-mode="sell"] { visibility: hidden; }
.bp[data-mode="sell"] .bp-card[data-mode="sell"] { visibility: visible; }
.bp[data-mode="sell"] .bp-card[data-mode="buy"] { visibility: hidden; }
.bp-after { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.bp-note { font-size: 12.5px; color: rgba(245,243,238,0.5); margin-top: 10px; }
/* phones + tablets: drawing on top, card under it, rail at the bottom */
@media (max-width: 900px) {
  .bp-pin { padding: 76px 0 18px; }
  .bp-top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bp-top h2 { font-size: 26px; margin-top: 8px; }
  .bp-top p { display: none; }
  .bp-tab { padding: 9px 16px; font-size: 13px; }
  .bp-stage-wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 0.9fr) auto; gap: 12px; margin-top: 10px; }
  .bp-draw { max-height: 30svh; }
  .bp-draw svg { max-height: 30svh; }
  .bp-cards { min-height: 0; height: 236px; }
  .bp-card { padding: 20px 20px 18px; border-radius: 20px; }
  .bp-card h3 { font-size: 21px; margin-top: 10px; }
  .bp-card p { font-size: 14.5px; line-height: 1.6; margin-top: 8px; }
  .bp-card ul { display: none; }
  .bp-foot { margin-top: 12px; gap: 14px; padding-right: 64px; }
  .bp-count { font-size: 22px; min-width: 30px; }
  .bp-node { font-size: 11.5px; }
  .bp-after, .bp-note { display: none; }
}
@media (max-width: 420px) { .bp-node span { display: none; } .bp-cards { height: 252px; } }
@media (max-width: 900px) { body.bp-pinned .cw-launcher { opacity: 0; pointer-events: none; transform: scale(0.85); } }
/* reduced motion / very short screens: nothing pinned, the finished drawing, every step listed */
.bp.is-static .bp-scroll { height: auto; }
.bp.is-static .bp-pin { position: relative; height: auto; padding: 96px 0 90px; }
.bp.is-static .bp-stage-wrap { align-items: start; }
.bp.is-static .bp-draw { height: 340px; }
.bp.is-static .bp-cards { height: auto; min-height: 0; display: grid; gap: 14px; }
.bp.is-static .bp-card { position: relative; opacity: 1; transform: none; clip-path: none; pointer-events: auto; }
.bp.is-static .bp-card[data-mode="sell"] { display: none; }
.bp.is-static[data-mode="sell"] .bp-card[data-mode="sell"] { display: block; }
.bp.is-static[data-mode="sell"] .bp-card[data-mode="buy"] { display: none; }
.bp.is-static .bp-foot { display: none; }

/* ==========================================================================
   PAYMENT CALCULATOR — synced fields + sliders; black result panel with a
   gold donut. Term is a select (no numbers on buttons).
   ========================================================================== */
.mc { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--border), 0 40px 80px -50px rgba(12,12,12,0.5); }
.mc-form { padding: 34px 34px 30px; }
.mc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.mc-field { margin-bottom: 18px; }
.mc-field label, .mc-field .mc-lbl { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 8px; }
.mc-field label em { font-style: normal; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--lp-gold-deep); }
.mc-in { position: relative; }
.mc-in input, .mc-in select { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--border-strong); background: #fbfaf6; font: 600 16px var(--font-body); color: var(--lp-ink); -webkit-appearance: none; appearance: none; font-variant-numeric: tabular-nums; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.mc-in select { background-image: linear-gradient(45deg, transparent 50%, var(--lp-ink) 50%), linear-gradient(135deg, var(--lp-ink) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.mc-in.pre input { padding-left: 28px; }
.mc-in.suf input { padding-right: 32px; }
.mc-in .mc-pre, .mc-in .mc-suf { position: absolute; top: 50%; transform: translateY(-50%); font-weight: 600; color: var(--ink-muted); pointer-events: none; }
.mc-in .mc-pre { left: 14px; } .mc-in .mc-suf { right: 14px; }
.mc-in input:focus-visible, .mc-in select:focus-visible { outline: none; border-color: var(--lp-gold-mid); box-shadow: 0 0 0 3px rgba(201,162,74,0.3); }
.mc-range { width: 100%; margin: 12px 0 0; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--lp-gold), var(--lp-gold-mid)); outline: none; }
.mc-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--lp-ink); box-shadow: 0 4px 10px rgba(12,12,12,0.25); cursor: pointer; }
.mc-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--lp-ink); box-shadow: 0 4px 10px rgba(12,12,12,0.25); cursor: pointer; }
.mc-range:focus-visible { box-shadow: 0 0 0 3px rgba(201,162,74,0.35); }
.mc-check { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.mc-check input { width: 20px; height: 20px; accent-color: var(--lp-ink); flex: none; }
.mc-help { margin-top: 6px; font-size: 12px; color: var(--ink-faint); }
.mc-out { position: relative; padding: 34px 32px 30px; background: var(--lp-ink); color: var(--lp-cream); display: flex; flex-direction: column; }
.mc-out::before { content: ''; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(201,162,74,0.22), rgba(201,162,74,0) 65%); pointer-events: none; }
.mc-top { display: flex; align-items: center; gap: 22px; position: relative; }
.mc-donut { width: 132px; height: 132px; flex: none; transform: rotate(-90deg); }
.mc-donut circle { fill: none; stroke-width: 3.6; transition: stroke-dasharray 0.5s ease, stroke-dashoffset 0.5s ease; }
.mc-donut .mc-track { stroke: rgba(255,255,255,0.08); }
.mc-arc-pi { stroke: #c9a24a; } .mc-arc-tax { stroke: #a5832f; } .mc-arc-ins { stroke: #f0dfb0; } .mc-arc-hoa { stroke: #7a776f; } .mc-arc-pmi { stroke: #f8f4ea; }
.mc-total small { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,243,238,0.6); }
.mc-total b { display: block; margin-top: 6px; font-family: var(--font-head); font-weight: 600; font-size: clamp(36px, 4vw, 46px); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.mc-total span { display: block; margin-top: 6px; font-size: 13px; color: rgba(245,243,238,0.6); }
.mc-legend { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 2px; position: relative; }
.mc-legend li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 14px; color: rgba(245,243,238,0.82); }
.mc-legend li i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.mc-legend li b { margin-left: auto; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.mc-sums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; position: relative; }
.mc-sums div { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(245,243,238,0.5); }
.mc-sums b { display: block; margin-top: 4px; font-size: 15px; letter-spacing: 0; text-transform: none; color: #fff; font-variant-numeric: tabular-nums; }
.mc-cta { display: grid; gap: 10px; margin-top: auto; padding-top: 22px; position: relative; }
.mc-cta .btn { width: 100%; justify-content: center; }
.mc-disclaimer { margin-top: 18px; font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }
@media (max-width: 960px) { .mc { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .mc-form, .mc-out { padding: 24px 20px; }
  .mc-row { grid-template-columns: 1fr; gap: 0; }
  .mc-top { flex-direction: column; align-items: flex-start; }
  .mc-sums { grid-template-columns: 1fr 1fr; }
}

/* ---- Finance band (home): copy + apply links beside the calculator head ---- */
.fin-apply { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.fin-langnote { margin-top: 12px; font-size: 13px; color: var(--ink-muted); }
.fin-company { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--border); font-size: 13px; color: var(--ink-soft); }
.fin-company svg { width: 18px; height: 18px; color: var(--lp-gold-deep); flex: none; }
.fin-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 40px; align-items: end; margin-bottom: 40px; }
.fin-head .section-head { margin-bottom: 0; }
.fin-costs { list-style: none; margin: 0; padding: 22px 24px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--border); display: grid; gap: 10px; }
.fin-costs li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-soft); }
.fin-costs li svg { width: 16px; height: 16px; color: var(--lp-gold-deep); flex: none; margin-top: 3px; }
.fin-costs b { font-family: var(--font-head); font-weight: 600; color: var(--lp-ink); font-size: 15px; }
@media (max-width: 900px) { .fin-head { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* ==========================================================================
   AREAS — endless snap carousel (New Vision / Millennium), recoloured
   ========================================================================== */
.nvc-section { overflow: hidden; }
.nvc { position: relative; --nvc-w: clamp(236px, 66vw, 310px); }
.nvc-track { position: relative; display: flex; gap: 22px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: auto;
  padding: 30px calc(50% - var(--nvc-w) / 2) 120px; margin-bottom: -76px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nvc-track::-webkit-scrollbar { display: none; }
.nvc-card { position: relative; flex: 0 0 var(--nvc-w); aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; scroll-snap-align: center; display: block; color: #fff; background: #070707;
  box-shadow: 0 26px 54px -34px rgba(12,12,12,0.55); opacity: 0.55; transform: scale(0.9);
  transition: opacity 0.55s cubic-bezier(.18,.9,.24,1), transform 0.55s cubic-bezier(.18,.9,.24,1), box-shadow 0.5s ease; }
.nvc-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.nvc-card::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(9,9,9,0.9) 0%, rgba(9,9,9,0.42) 48%, rgba(9,9,9,0.14) 100%); }
.nvc-card.is-focus { opacity: 1; transform: none; box-shadow: 0 40px 80px -36px rgba(12,12,12,0.62); }
@media (hover: hover) {
  .nvc-card.is-focus:hover { transform: translateY(-8px); }
  .nvc-card.is-focus:hover img { transform: scale(1.06); }
  .nvc-card.is-focus:hover .nvc-go { background: var(--lp-gold); border-color: var(--lp-gold); color: var(--lp-ink); }
  .nvc-card:not(.is-focus):hover { opacity: 0.75; }
}
.nvc-card:focus-visible { outline: 3px solid var(--lp-gold); outline-offset: 3px; }
.nvc-inner { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; }
.nvc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nvc-idx { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.24); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.nvc-go { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; flex: none; }
.nvc-go svg { width: 15px; height: 15px; }
.nvc-meta h3 { font-size: 26px; line-height: 1.1; color: #fff; margin: 0 0 8px; }
.nvc-tag { display: block; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.84); }
.nvc-nav { position: relative; z-index: 3; display: flex; justify-content: center; gap: 14px; }
.nvc-arrow { width: 48px; height: 48px; min-width: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--lp-ink); background: #fff; border: 1.5px solid var(--lp-ink); box-shadow: 0 10px 24px -14px rgba(12,12,12,0.4); transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; }
.nvc-arrow svg { width: 18px; height: 18px; flex: none; }
.nvc-prev svg { transform: rotate(180deg); }
@media (hover: hover) { .nvc-arrow:hover { background: var(--lp-ink); color: var(--lp-gold); transform: translateY(-2px); } }
.nvc-arrow:focus-visible { outline: 2px solid var(--lp-ink); outline-offset: 3px; }
@media (max-width: 560px) { .nvc-track { gap: 14px; } .nvc-meta h3 { font-size: 22px; } .nvc-inner { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .nvc-card, .nvc-card img { transition: none; } }

/* ==========================================================================
   RENTAL & PROPERTY SUPPORT band — two overlapping photos + four paths
   ========================================================================== */
.pm-band .pm-grid2 { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 60px; align-items: center; }
.pm-photos { position: relative; aspect-ratio: 1 / 0.92; }
.pm-photos figure { position: absolute; margin: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 34px 64px -36px rgba(12,12,12,0.55); }
.pm-photos figure img { width: 100%; height: 100%; object-fit: cover; }
.pm-photos .pmf-1 { left: 0; top: 0; width: 74%; height: 72%; }
.pm-photos .pmf-2 { right: 0; bottom: 0; width: 56%; height: 56%; border: 6px solid var(--bg); }
.pm-photos .pm-chip { position: absolute; left: 6%; bottom: 8%; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-radius: 14px; background: var(--lp-ink); color: var(--lp-cream); font-size: 13px; font-weight: 600; box-shadow: 0 18px 36px -18px rgba(12,12,12,0.6); }
.pm-photos .pm-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--lp-gold); box-shadow: 0 0 0 4px rgba(201,162,74,0.25); animation: lp-pulse 2.4s ease-in-out infinite; }
@keyframes lp-pulse { 50% { box-shadow: 0 0 0 8px rgba(201,162,74,0.05); } }
.path-grid { display: grid; gap: 10px; margin-top: 24px; }
.path-row { display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--border); transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s ease; }
.path-row .pr-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--lp-ink); color: var(--lp-gold); }
.path-row .pr-ic svg { width: 20px; height: 20px; }
.path-row b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 15.5px; color: var(--lp-ink); }
.path-row span { display: block; font-size: 13.5px; color: var(--ink-muted); }
.path-row > svg { width: 16px; height: 16px; color: var(--ink-faint); transition: transform 0.3s ease, color 0.3s ease; }
@media (hover: hover) { .path-row:hover { transform: translateX(6px); box-shadow: 0 0 0 1px var(--lp-gold), 0 18px 36px -24px rgba(12,12,12,0.4); } .path-row:hover > svg { color: var(--lp-gold-deep); transform: translate(2px, -2px); } }
.pm-office { margin-top: 18px; font-size: 14px; color: var(--ink-muted); }
.pm-office a { color: var(--lp-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) { .pm-band .pm-grid2 { grid-template-columns: minmax(0, 1fr); gap: 44px; } .pm-photos { max-width: 560px; } }

/* ==========================================================================
   INSTAGRAM REELS — four in one row on a black band; tap = lightbox embed
   ========================================================================== */
.reels { background: var(--lp-ink-2); color: var(--lp-cream); overflow: hidden; }
.reels::before { content: ''; position: absolute; left: 50%; top: -18%; width: min(1100px, 120vw); height: 520px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(201,162,74,0.09), rgba(201,162,74,0) 64%); pointer-events: none; }
.reels .section-head h2 { color: #fff; }
.reels .section-head p { color: rgba(245,243,238,0.72); }
.reels .section-head p a { color: var(--lp-gold); font-weight: 700; }
.reel-row { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.reel-card { position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; border: 1px solid rgba(201,162,74,0.2); background: #070707; cursor: pointer; padding: 0; color: #fff; text-align: left;
  box-shadow: 0 30px 60px -36px rgba(0,0,0,0.8); transition: transform 0.45s cubic-bezier(.22,1,.36,1), border-color 0.3s ease, box-shadow 0.45s ease; }
.reel-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.reel-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,7,7,0.92) 0%, rgba(7,7,7,0.2) 46%, rgba(7,7,7,0.1) 100%); }
.reel-ig { position: absolute; left: 14px; top: 14px; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgba(12,12,12,0.5); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.reel-ig svg { width: 17px; height: 17px; }
.reel-play { position: absolute; left: 50%; top: 46%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; display: grid; place-items: center; background: rgba(201,162,74,0.92); color: var(--lp-ink); box-shadow: 0 0 0 8px rgba(201,162,74,0.18); transition: transform 0.4s cubic-bezier(.22,1,.36,1), box-shadow 0.4s ease; }
.reel-play svg { width: 22px; height: 22px; margin-left: 3px; }
.reel-title { position: absolute; left: 16px; right: 16px; bottom: 16px; font-family: var(--font-head); font-weight: 600; font-size: 15.5px; line-height: 1.3; }
@media (hover: hover) {
  .reel-card:hover { transform: translateY(-8px); border-color: rgba(201,162,74,0.6); box-shadow: 0 40px 70px -36px rgba(0,0,0,0.9); }
  .reel-card:hover img { transform: scale(1.06); }
  .reel-card:hover .reel-play { transform: scale(1.1); box-shadow: 0 0 0 14px rgba(201,162,74,0.14); }
}
.reel-card:focus-visible { outline: 3px solid var(--lp-gold); outline-offset: 4px; }
.reels-cta { display: flex; justify-content: center; margin-top: 34px; }
@media (max-width: 900px) {
  .reel-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 24px 30px; margin: 0 -24px -30px; scrollbar-width: none; }
  .reel-row::-webkit-scrollbar { display: none; }
  .reel-card { flex: 0 0 min(58vw, 240px); scroll-snap-align: center; }
}
.reel-modal { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.reel-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease, visibility 0s; }
.reel-modal-bg { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(7,7,7,0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; -webkit-appearance: none; appearance: none; }
.reel-modal-box { position: relative; width: min(400px, 92vw); height: min(720px, 86vh); border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px rgba(0,0,0,0.6); transform: translateY(16px) scale(0.98); transition: transform 0.35s cubic-bezier(.22,1,.36,1); }
.reel-modal.is-open .reel-modal-box { transform: none; }
.reel-modal-frame, .reel-modal-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.reel-modal-close { position: absolute; top: -52px; right: 0; width: 42px; height: 42px; min-width: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: rgba(12,12,12,0.6); color: #fff; display: grid; place-items: center; cursor: pointer; }
.reel-modal-close svg { width: 18px; height: 18px; flex: none; }
.reel-modal-wrap { position: relative; }
body.reel-open { overflow: hidden; }

/* ==========================================================================
   GET IN TOUCH — "Where do I start?" + contact tiles + the Question 1 card
   ========================================================================== */
.git-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.git-tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--border); transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s ease; min-width: 0; }
.git-tile .gt-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--lp-ink); color: var(--lp-gold); flex: none; }
.git-tile .gt-ic svg { width: 18px; height: 18px; }
.git-tile b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: var(--lp-ink); }
.git-tile span { display: block; font-size: 13px; color: var(--ink-muted); }
.git-tile.wide { grid-column: 1 / -1; }
.git-tile { text-align: left; }
@media (hover: hover) { .git-tile:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--lp-gold), 0 18px 34px -22px rgba(12,12,12,0.4); } }
.git-socials { display: flex; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.git-socials .social-icon { width: 42px; height: 42px; min-width: 42px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--lp-ink); box-shadow: 0 0 0 1px var(--border); transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; }
.git-socials .social-icon svg { width: 18px; height: 18px; flex: none; }
@media (hover: hover) { .git-socials a.social-icon:hover { background: var(--lp-ink); color: var(--lp-gold); transform: translateY(-2px); } }
.social-icon.is-soon { opacity: 0.4; cursor: default; }
@media (max-width: 520px) { .git-tiles { grid-template-columns: minmax(0, 1fr); } }
.contact-cta-copy h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.02em; }

/* ==========================================================================
   FOOTER — black, gold wordmark, cream words
   ========================================================================== */
.site-footer { background: var(--lp-ink); color: rgba(245,243,238,0.7); border-top: 1px solid rgba(201,162,74,0.18); }
.site-footer .footer-logo img { height: 46px; width: auto; }
.site-footer .footer-brand p { color: rgba(245,243,238,0.66); }
.site-footer h4 { color: var(--lp-gold); }
.site-footer .footer-col a, .site-footer .footer-hours { color: rgba(245,243,238,0.78); }
.site-footer .footer-col a:hover { color: #fff; }
.site-footer .footer-hours a { display: inline; color: #fff; }
.site-footer .footer-social a, .site-footer .footer-social span { color: var(--lp-cream); border-color: rgba(201,162,74,0.3); background: rgba(255,255,255,0.04); }
.site-footer .footer-social a:hover { color: var(--lp-ink); background: var(--lp-gold); border-color: var(--lp-gold); }
.site-footer .footer-social .is-soon { opacity: 0.4; }
.site-footer .footer-bottom { border-top-color: rgba(201,162,74,0.16); color: rgba(245,243,238,0.5); }
.site-footer .footer-bottom .legal { color: rgba(245,243,238,0.5); }
.site-footer .footer-credits { color: rgba(245,243,238,0.72); }
.site-footer .footer-credits:hover { color: var(--lp-gold); }
.footer-links { line-height: 2; }
@media (max-width: 760px) { .site-footer { padding-bottom: 96px; } }

/* ==========================================================================
   CHAT + COOKIE + MAP bits in the black/gold system
   ========================================================================== */
.cw-launcher { background: var(--lp-ink); color: var(--lp-gold); border: 1px solid rgba(201,162,74,0.5); box-shadow: 0 16px 34px rgba(0,0,0,0.35), 0 0 0 4px rgba(201,162,74,0.12); position: relative; transition: transform 0.3s ease, opacity 0.3s ease; }
.cw-launcher svg { position: absolute; transition: opacity 0.25s ease, transform 0.3s ease; }
.cw-launcher .cw-ic-close { opacity: 0; transform: rotate(-60deg); }
.cw.open .cw-launcher .cw-ic-chat { opacity: 0; transform: rotate(60deg); }
.cw.open .cw-launcher .cw-ic-close { opacity: 1; transform: none; }
.cw-head { background: var(--lp-ink); }
.cw-head strong { color: #fff; }
.cw-status { color: rgba(245,243,238,0.7); }
.cw-close { color: #fff; }
.cw-avatar.cw-avatar-photo { padding: 0; overflow: hidden; background: var(--lp-gold); border: 1.5px solid var(--lp-gold); }
.cw-avatar.cw-avatar-photo img { width: 100%; height: 100%; object-fit: cover; }
.cw-msg-user .cw-bubble { background: var(--lp-ink); color: #fff; }
.cw-chip { border-color: rgba(12,12,12,0.3); }
@media (hover: hover) { .cw-chip:hover { border-color: var(--lp-gold-mid); background: rgba(201,162,74,0.1); } }
.cw-send { background: var(--lp-gold); color: var(--lp-ink); }
.cw-foot { display: flex; justify-content: center; gap: 18px; }
.cw-panel { max-height: min(580px, calc(100vh - 116px)); }
.map-badge-icon { background: var(--lp-ink); }
.map-badge-icon img { border-radius: 6px; }

/* ---- Calendly card: the placeholder shows while William's calendar loads, then steps aside ---- */
.cal-wrap { position: relative; }
.cal-wrap .calendly-inline-widget { border-radius: 22px; overflow: hidden; background: #fff; }
.cal-wrap.is-loading .calendly-inline-widget { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.cal-wrap.is-live .cal-ph { display: none; }
.cal-wrap.is-live .calendly-inline-widget { box-shadow: 0 0 0 1px var(--border), 0 30px 60px -40px rgba(12,12,12,0.5); }
.cal-ph-avatar { object-fit: cover; }
.funnel-step .cal-wrap.is-live .calendly-inline-widget { box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7); }

/* ---- Funnel: the confirmation swap after a booking (both names stay on screen) ---- */
.funnel-step-final .fs-booked { display: none; }
.funnel-step-final.is-booked .fs-booked { display: block; }
.funnel-step-final.is-booked .fs-pick { display: none; }
.funnel-error { margin-top: 12px; font-size: 13.5px; color: #f2b3a8; }
.funnel-choices-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.funnel-choices-areas .funnel-choice:last-child { grid-column: 1 / -1; }
.funnel-choices-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 480px) { .funnel-choices-areas { grid-template-columns: 1fr 1fr; gap: 8px; } .funnel-choices-areas .funnel-choice { padding: 14px 12px; font-size: 14px; } .funnel-choices-6 { grid-template-columns: 1fr; } }
.funnel-logo img { height: 34px; width: auto; }
@media (max-width: 480px) { .funnel-logo img { height: 26px; } }

/* ---- Area guides ---- */
.area-resources { display: grid; gap: 10px; margin-top: 14px; }
.area-res { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--border); font-weight: 600; color: var(--lp-ink); transition: box-shadow 0.3s ease, transform 0.3s ease; }
.area-res svg { width: 15px; height: 15px; color: var(--lp-gold-deep); flex: none; }
@media (hover: hover) { .area-res:hover { transform: translateX(4px); box-shadow: 0 0 0 1px var(--lp-gold); } }
.area-note { margin-top: 22px; font-size: 13px; line-height: 1.65; color: var(--ink-faint); }
.qf-link { color: var(--lp-gold-deep); font-weight: 700; }
@media (max-width: 900px) { .community-layout { grid-template-columns: minmax(0, 1fr); } }
.quick-facts .btn-block { white-space: normal; line-height: 1.3; text-align: center; }

/* ---- Inner pages: step cards, checklists, the black callout ---- */
.steps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: wjstep; }
.step-card { position: relative; padding: 26px 22px 24px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--border); transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s ease; }
.step-card .sc-num { font-family: var(--font-head); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; color: var(--lp-gold-deep); }
.step-card h3 { margin-top: 12px; font-size: 19px; color: var(--lp-ink); }
.step-card p { margin-top: 8px; font-size: 14.5px; line-height: 1.65; color: var(--ink-muted); }
.step-card::after { content: ''; position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; border-radius: 2px; background: var(--lp-gold); transform: scaleX(0); transform-origin: left; transition: transform 0.5s cubic-bezier(.22,1,.36,1); }
@media (hover: hover) { .step-card:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px rgba(201,162,74,0.5), 0 24px 44px -30px rgba(12,12,12,0.45); } .step-card:hover::after { transform: scaleX(1); } }
@media (max-width: 1000px) { .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps4 { grid-template-columns: minmax(0, 1fr); } }
.callout-dark { position: relative; padding: 34px 36px; border-radius: 26px; background: var(--lp-ink); color: rgba(245,243,238,0.8); overflow: hidden; }
.callout-dark::before { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(201,162,74,0.2), rgba(201,162,74,0) 65%); }
.callout-dark h3 { color: #fff; font-size: 22px; position: relative; }
.callout-dark p { margin-top: 10px; position: relative; line-height: 1.7; }
.callout-dark .hero-actions { justify-content: flex-start; margin-top: 22px; position: relative; }
.check-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.check-list li svg { width: 18px; height: 18px; color: var(--lp-gold-deep); flex: none; margin-top: 3px; }
.check-list li b { color: var(--lp-ink); }
.pm-path-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pm-path-grid .pcard { min-height: 320px; --pc-pad: 22px; }
@media (max-width: 1100px) { .pm-path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pm-path-grid { grid-template-columns: minmax(0, 1fr); } .pm-path-grid .pcard { min-height: 260px; } }
.pm-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 900px) { .pm-detail { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.emergency { display: flex; gap: 14px; padding: 18px 20px; border-radius: 18px; background: #fff4f1; box-shadow: 0 0 0 1px #f2cfc6; color: #6b2a1e; font-size: 14.5px; line-height: 1.6; margin-top: 18px; }
.emergency svg { width: 22px; height: 22px; flex: none; color: #b23b26; }
.form-card { padding: 30px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--border), 0 30px 60px -44px rgba(12,12,12,0.5); }
.form-card .field label { color: var(--ink-soft); }
.form-card .consent { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--ink-muted); }
.form-card .consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--lp-ink); flex: none; }
.form-note { margin-top: 12px; font-size: 13px; color: var(--ink-muted); }
.credit-list { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; display: grid; gap: 14px; }
.credit-list li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--border); font-size: 13.5px; color: var(--ink-soft); }
.credit-list img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; }
.credit-list b { display: block; color: var(--lp-ink); }
.credit-list a { color: var(--lp-gold-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.credit-note { margin: 26px auto 0; max-width: 760px; text-align: center; font-size: 13.5px; color: var(--ink-muted); }

/* ---- Reduced motion: keep every element, drop the travel ---- */
@media (prefers-reduced-motion: reduce) {
  .bp-card, .reel-card, .reel-card img, .lst-card, .path-row, .git-tile, .step-card { transition: none !important; }
  .pm-chip i { animation: none; }
}

/* ==========================================================================
   ROUND 2 (client 2026-10-25)
   ========================================================================== */
/* ---- Phones + tablets: William's card first, every hero element centred ---- */
@media (max-width: 1080px) {
  .lp-hero .wrap { justify-items: center; text-align: center; gap: 30px; }
  .lp-hero .hero-visual { order: -1; }
  .lp-hero .hero-copy { align-items: center; }
  .lp-hero h1, .lp-hero .lede { margin-left: auto; margin-right: auto; }
  .lp-hero .hero-actions { justify-content: center; }
  .hero-paths { margin-left: auto; margin-right: auto; }
  .hero-lockup { justify-content: center; }
}
@media (max-width: 640px) {
  .hero.lp-hero { padding-top: 88px; }
  .lp-hero .hero-visual { width: min(100%, 300px); }
  .hero-path { justify-content: flex-start; text-align: left; }
}

/* ---- About, simplified: photo + one paragraph + three credentials ---- */
.lp-about-simple .about-grid { gap: 72px; }
.lp-about-simple .ab-copy > p { font-size: 17px; }
.ab-creds { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.ab-creds li { position: relative; padding: 16px 18px 0 0; }
.ab-creds li::before { content: ''; position: absolute; left: 0; top: 0; width: 28px; height: 2px; border-radius: 2px; background: var(--lp-gold); transition: width 0.5s cubic-bezier(.22,1,.36,1); }
.ab-creds li:hover::before { width: 64px; }
.ab-creds b { display: block; font-family: var(--font-head); font-weight: 600; font-size: 16px; color: var(--ink); }
.ab-creds span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--ink-muted); }
.lp-about-simple .ab-copy .hero-actions { margin-top: 32px; }
@media (max-width: 980px) { .lp-about-simple .ab-copy { text-align: center; } .lp-about-simple .ab-copy .hero-actions { justify-content: center; } .ab-creds li::before { left: 50%; transform: translateX(-50%); } .ab-creds li { padding-right: 0; padding-left: 0; } }
@media (max-width: 560px) { .ab-creds { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* ---- The Home & The Numbers, simplified: three sliders and one number ---- */
.mcs { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); max-width: 980px; margin: 0 auto; border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--border), 0 40px 80px -50px rgba(12,12,12,0.5); }
.mcs-controls { padding: 36px 38px 30px; display: grid; gap: 26px; }
.mcs-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.mcs-top label, .mcs-term label { font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-muted); }
.mcs-top output { font-family: var(--font-head); font-weight: 600; font-size: 22px; color: var(--ink); font-variant-numeric: tabular-nums; }
.mcs .mc-range { margin: 0; height: 6px; background: linear-gradient(90deg, var(--lp-gold) 0 var(--fill, 50%), rgba(12,12,12,0.12) var(--fill, 50%) 100%); }
.mcs-term { display: grid; grid-template-columns: auto minmax(0, 220px); align-items: center; justify-content: space-between; gap: 16px; }
.mcs-result { position: relative; padding: 36px 34px 32px; background: var(--lp-ink); color: var(--lp-cream); display: flex; flex-direction: column; }
.mcs-result::before { content: ''; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(201,162,74,0.22), rgba(201,162,74,0) 65%); pointer-events: none; }
.mcs-result small { position: relative; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,243,238,0.6); }
.mcs-result > b { position: relative; display: block; margin-top: 10px; font-family: var(--font-head); font-weight: 600; font-size: clamp(44px, 5vw, 58px); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.mcs-result ul { position: relative; list-style: none; margin: 24px 0 26px; padding: 0; display: grid; gap: 2px; }
.mcs-result li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 14px; color: rgba(245,243,238,0.78); }
.mcs-result li em { font-style: normal; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.mcs-result li[hidden] { display: none; }
.mcs-result .btn { margin-top: auto; position: relative; }
.fin-mini { margin-top: 18px; text-align: center; font-size: 13.5px; color: var(--ink-muted); }
.fin-mini a { color: var(--lp-gold-deep); font-weight: 700; margin-left: 4px; }
@media (max-width: 860px) { .mcs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .mcs-controls, .mcs-result { padding: 26px 22px; } .mcs-term { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

/* ---- About: Let's Talk + his four social icons beside it ---- */
.ab-actions { align-items: center; gap: 18px; }
.ab-social { display: flex; align-items: center; gap: 10px; }
.ab-social a { width: 46px; height: 46px; min-width: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); background: #fff; box-shadow: 0 0 0 1px var(--border); transition: background 0.25s ease, color 0.25s ease, transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.25s ease; }
.ab-social a svg { width: 19px; height: 19px; flex: none; }
@media (hover: hover) { .ab-social a:hover { background: var(--lp-gold); color: var(--lp-ink); box-shadow: 0 0 0 1px var(--lp-gold), 0 12px 24px -12px rgba(201,162,74,0.6); transform: translateY(-3px); } }
.ab-social a:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 3px; }
@media (max-width: 980px) { .ab-actions { justify-content: center; } }
@media (max-width: 420px) { .ab-actions { gap: 12px; } .ab-social { gap: 8px; } .ab-social a { width: 42px; height: 42px; min-width: 42px; } }
@media (max-width: 340px) { .ab-actions { flex-direction: column; } }

/* ==========================================================================
   FROSTED DROPDOWNS (tmack: "translucent, not transparent"): the Areas panel,
   the language menu and the phone/tablet menu are frosted glass. You see
   light and colour behind them, never readable page content. A blur on an
   element is ignored while any parent has its own blur, so the header bar's
   and the pill's glass move onto ::before layers. Their look doesn't change;
   only the menus inside them start blurring for real.
   ========================================================================== */
.site-nav.is-scrolled { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-nav::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: background-color 0.4s ease; }
.site-nav.is-scrolled::before { background: rgba(12,12,12,0.86); backdrop-filter: blur(16px) saturate(1.15); -webkit-backdrop-filter: blur(16px) saturate(1.15); }
@media (min-width: 1024px) {
  .site-nav .site-nav__pill, .site-nav.nav-on-photo:not(.is-scrolled) .site-nav__pill { position: relative; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-nav .site-nav__pill::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .mega-menu { background: rgba(16,16,16,0.84); backdrop-filter: blur(24px) saturate(1.35); -webkit-backdrop-filter: blur(24px) saturate(1.35); }
}
.lang-menu, .funnel-body .lang-menu { background: rgba(16,16,16,0.84); backdrop-filter: blur(24px) saturate(1.35); -webkit-backdrop-filter: blur(24px) saturate(1.35); }
@media (max-width: 1023px) {
  .site-nav .site-nav__pill.is-mobile-open, .site-nav.is-scrolled .site-nav__pill.is-mobile-open, .site-nav.nav-on-photo:not(.is-scrolled) .site-nav__pill.is-mobile-open {
    background: rgba(12,12,12,0.86); backdrop-filter: blur(24px) saturate(1.35); -webkit-backdrop-filter: blur(24px) saturate(1.35);
  }
}
/* funnel header: its language menu must open OVER the step card (both were z-index 1, so the card won) */
.funnel-nav { z-index: 30; }

/* ==========================================================================
   DARK THEME — the default (client 2026-10-25: "default dark theme, like a
   real black theme"). <html data-theme="dark"> is set in the markup and by the
   pre-paint boot script; the header's theme button switches to light and the
   choice is kept in localStorage lp-theme. Everything below is scoped to
   html[data-theme="dark"], so the light theme stays exactly as built.
   (build.py appends this file to the LP pack.)
   ========================================================================== */
html[data-theme="dark"] {
  /* the old site's own colours (williamjusmehomes.com redesign.css): ground #0c0c0c,
     panels #141414, lines #2e2a22, cream #f5f3ee, muted #bdbcb6, gold #c9a24a;
     the brief's #0f0f0f for alternate sections */
  --bg: #0c0c0c; --bg-raised: #070707; --bg-card: #141414; --bg-alt: #070707;
  --bg-glass: rgba(20,20,20,0.76); --bg-glass-strong: rgba(20,20,20,0.94);
  --border: #2e2a22; --border-strong: #3d3729;
  --ink: #f5f3ee; --ink-soft: #e4e3de; --ink-muted: #bdbcb6; --ink-faint: #8e8d88;
  --silver: #c9a24a; --silver-light: #dcbb6c; --silver-deep: #f5f3ee;
  --input-bg: #0a0a0a; --shadow: rgba(0,0,0,0.5); --quote-mark: rgba(201,162,74,0.3);
  --lp-card: #141414; --lp-card-2: #1b1b1a; --lp-line: #2e2a22;
  color-scheme: dark;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--ink-soft); }
html[data-theme="dark"] .section-alt, html[data-theme="dark"] .section-dark { --bg: #070707; --bg-card: #141414; background: #070707; border-top-color: var(--lp-line); }
html[data-theme="dark"] .accent-text { background-image: linear-gradient(115deg, #e2c47e, #c9a24a 45%, #b8913f, #c9a24a 65%, #e2c47e); }
html[data-theme="dark"] .eyebrow { color: var(--lp-cream); background: rgba(201,162,74,0.1); border-color: rgba(201,162,74,0.3); }
html[data-theme="dark"] .eyebrow::before { background: var(--lp-gold); }
html[data-theme="dark"] .btn-outline { color: var(--lp-cream); border-color: rgba(245,243,238,0.7); background: rgba(255,255,255,0.03); }
html[data-theme="dark"] .btn-outline:hover { color: #fff; border-color: var(--lp-gold); background: rgba(201,162,74,0.12); }
html[data-theme="dark"] :focus-visible { outline-color: var(--lp-gold); }

/* cards and white surfaces -> charcoal cards with a faint gold edge */
html[data-theme="dark"] :is(.lst-card, .about-stat, .ab-chip, .path-row, .git-tile, .step-card, .form-card, .credit-list li, .area-res, .fin-company, .fin-costs, .faq-item, .lst-tab, .mc, .cookie-banner) {
  background: var(--lp-card); box-shadow: 0 0 0 1px var(--lp-line), 0 30px 60px -44px rgba(0,0,0,0.8); border-color: var(--lp-line);
}
html[data-theme="dark"] :is(.ab-chip b, .ab-role b, .about-stat b, .lst-body h3, .lst-count b, .lst-link, .path-row b, .pm-office a, .git-tile b, .step-card h3, .check-list li b, .credit-list b, .area-res, .fin-costs b) { color: var(--lp-cream); }
html[data-theme="dark"] :is(.lst-city svg, .lst-ask, .ab-role .ab-ic, .step-card .sc-num, .check-list li svg, .fin-costs li svg, .fin-company svg, .area-res svg, .qf-link, .credit-list a, .mc-field label em, .why-live-list svg) { color: var(--lp-gold); }
html[data-theme="dark"] .ab-role .ab-ic { background: rgba(201,162,74,0.12); }
html[data-theme="dark"] :is(.ab-chip .ab-ic, .path-row .pr-ic, .git-tile .gt-ic) { background: rgba(201,162,74,0.13); box-shadow: inset 0 0 0 1px rgba(201,162,74,0.25); }
html[data-theme="dark"] .ab-frame { box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9), 0 0 0 1px rgba(201,162,74,0.15); }
html[data-theme="dark"] .lst-photo { background: #1b1b1a; }
html[data-theme="dark"] .lst-tab { color: var(--ink-soft); }
html[data-theme="dark"] .lst-tab:hover { color: #fff; box-shadow: 0 0 0 1px var(--lp-gold); }
html[data-theme="dark"] .lst-tab.is-on { background: var(--lp-gold); color: var(--lp-ink); box-shadow: none; }
html[data-theme="dark"] .lst-actions { border-top-color: var(--lp-line); }
html[data-theme="dark"] .git-socials .social-icon { background: var(--lp-card); color: var(--lp-cream); box-shadow: 0 0 0 1px rgba(201,162,74,0.18); }
html[data-theme="dark"] .git-socials a.social-icon:hover { background: var(--lp-gold); color: var(--lp-ink); }
html[data-theme="dark"] .nvc-arrow { background: var(--lp-card); color: var(--lp-cream); border-color: rgba(201,162,74,0.45); }
html[data-theme="dark"] .nvc-arrow:hover { background: var(--lp-gold); color: var(--lp-ink); }
html[data-theme="dark"] .nvc-card { background: #050505; }
html[data-theme="dark"] .leads-panel { background: linear-gradient(135deg, #161616, #0c0c0c); box-shadow: 0 40px 80px -50px rgba(0,0,0,0.9); }
html[data-theme="dark"] .callout-dark { background: #141414; box-shadow: 0 0 0 1px rgba(201,162,74,0.22); }
html[data-theme="dark"] .pm-photos .pmf-2 { border-color: #070707; }
html[data-theme="dark"] .split-photo { box-shadow: 0 30px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,162,74,0.1); }
html[data-theme="dark"] .ab-role, html[data-theme="dark"] .ab-roles { border-color: var(--lp-line); }
html[data-theme="dark"] .emergency { background: rgba(178,59,38,0.12); box-shadow: 0 0 0 1px rgba(214,98,74,0.4); color: #f1c7bd; }
html[data-theme="dark"] .emergency svg { color: #ec8c76; }
html[data-theme="dark"] .notice { background: rgba(201,162,74,0.07); box-shadow: 0 0 0 1px rgba(201,162,74,0.24); color: var(--ink-soft); }
html[data-theme="dark"] .notice svg { color: var(--lp-gold); }

/* the calculator */
html[data-theme="dark"] .mc-in input, html[data-theme="dark"] .mc-in select { background-color: #0a0a0a; color: var(--lp-cream); border-color: var(--lp-line); }
html[data-theme="dark"] .mc-in select { background-image: linear-gradient(45deg, transparent 50%, #f5f3ee 50%), linear-gradient(135deg, #f5f3ee 50%, transparent 50%); }
html[data-theme="dark"] .mc-in select option { background: #141414; color: #f5f3ee; }
html[data-theme="dark"] .mc-range::-webkit-slider-thumb { background: var(--lp-gold); border-color: #0c0c0c; }
html[data-theme="dark"] .mc-range::-moz-range-thumb { background: var(--lp-gold); border-color: #0c0c0c; }
html[data-theme="dark"] .mc-check input, html[data-theme="dark"] .form-card .consent input { accent-color: var(--lp-gold); }
html[data-theme="dark"] .mc-out { background: #0a0a0a; box-shadow: inset 1px 0 0 rgba(201,162,74,0.14); }

/* forms */
html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea { background: #0a0a0a; border-color: var(--lp-line); color: var(--lp-cream); }
html[data-theme="dark"] .field select option { background: #141414; color: #f5f3ee; }
html[data-theme="dark"] .field input::placeholder, html[data-theme="dark"] .field textarea::placeholder { color: #6c6b66; }

/* contact rows, quick facts, FAQ */
html[data-theme="dark"] .contact-icon { background: rgba(201,162,74,0.1); border-color: rgba(201,162,74,0.22); color: var(--lp-gold); }
html[data-theme="dark"] .quick-facts { background: rgba(19,19,19,0.92); border-color: rgba(201,162,74,0.16); box-shadow: 0 24px 50px -30px rgba(0,0,0,0.8); }
html[data-theme="dark"] .faq-item.is-open { border-color: rgba(201,162,74,0.35); }

/* chat */
html[data-theme="dark"] .cw-panel { background: #141414; border-color: rgba(201,162,74,0.18); box-shadow: 0 30px 60px rgba(0,0,0,0.6); }
html[data-theme="dark"] .cw-head { background: #0c0c0c; box-shadow: inset 0 -1px 0 rgba(201,162,74,0.16); }
html[data-theme="dark"] .cw-msg-bot .cw-bubble, html[data-theme="dark"] .cw-typing { background: #1f1f1e; color: var(--lp-cream); }
html[data-theme="dark"] .cw-msg-user .cw-bubble { background: var(--lp-gold); color: var(--lp-ink); }
html[data-theme="dark"] .cw-chip { background: transparent; color: var(--ink-soft); border-color: rgba(201,162,74,0.3); }
@media (hover: hover) { html[data-theme="dark"] .cw-chip:hover { background: var(--lp-gold); color: var(--lp-ink); } }
html[data-theme="dark"] .cw-input { background: #0a0a0a; color: var(--lp-cream); border-color: var(--lp-line); }
html[data-theme="dark"] .cw-foot a { color: var(--ink-soft); }

/* cookie banner */
html[data-theme="dark"] .cookie-banner h4 { color: var(--lp-cream); }
html[data-theme="dark"] #cookieDecline { color: var(--ink-soft); border-color: rgba(245,243,238,0.22); }

/* Calendly placeholder card */
html[data-theme="dark"] .cal-ph { background: #141414; border-color: rgba(201,162,74,0.16); color: var(--ink-soft); }
html[data-theme="dark"] .cal-ph-side { background: linear-gradient(180deg, #171717, #0c0c0c); border-color: var(--lp-line); }
html[data-theme="dark"] .cal-ph-overlay { background: rgba(13,13,13,0.9); border-color: rgba(201,162,74,0.2); }
html[data-theme="dark"] .cal-ph-row a { background: #1b1b1a; color: var(--lp-cream); border-color: var(--lp-line); }
html[data-theme="dark"] .cal-ph-row a:hover { border-color: var(--lp-gold); color: #fff; }

/* office map */
html[data-theme="dark"] .map-frame { background: #070707; border-color: rgba(201,162,74,0.16); box-shadow: 0 34px 70px -40px rgba(0,0,0,0.9); }
html[data-theme="dark"] .map-consent { background: linear-gradient(160deg, #141414, #0a0a0a); }
html[data-theme="dark"] .map-badge { background: rgba(19,19,19,0.94); border-color: rgba(201,162,74,0.2); }
html[data-theme="dark"] .map-frame iframe { filter: grayscale(0.2) brightness(0.92) contrast(1.04); }

/* black bands keep their own edge on a black page */
html[data-theme="dark"] .bp { background: #070707; box-shadow: inset 0 1px 0 rgba(201,162,74,0.12), inset 0 -1px 0 rgba(201,162,74,0.12); }
html[data-theme="dark"] .reels { background: #0a0a0a; box-shadow: inset 0 1px 0 rgba(201,162,74,0.12), inset 0 -1px 0 rgba(201,162,74,0.12); }
html[data-theme="dark"] .site-footer { background: #070707; border-top-color: var(--lp-line); }

/* privacy / terms / SMS terms pages (their own lg-* styles) */
html[data-theme="dark"] .lg-body { background: #0c0c0c; }
html[data-theme="dark"] .lg-doc { background: #141414; color: var(--ink-soft); border-color: rgba(201,162,74,0.14); box-shadow: 0 30px 60px -40px rgba(0,0,0,0.9); }
html[data-theme="dark"] .lg-doc h2, html[data-theme="dark"] .lg-doc b { color: var(--lp-cream); }
html[data-theme="dark"] .lg-doc p, html[data-theme="dark"] .lg-doc li { color: #cfcec9; }
html[data-theme="dark"] .lg-doc a { color: var(--lp-gold); }
html[data-theme="dark"] .lg-doc .lg-updated { color: var(--lp-gold); background: rgba(201,162,74,0.1); border-color: rgba(201,162,74,0.3); }
html[data-theme="dark"] .lg-doc .lg-cross { border-top-color: var(--lp-line); }

/* ---- Light notice box (PM payments note) — the light-theme look of .notice ---- */
.notice { background: #f6f2e8; box-shadow: 0 0 0 1px #e6dcc6; color: var(--ink-soft); }
.notice svg { color: var(--lp-gold-deep); }

/* ---- Theme button (took the call button's place in the header; shown at every width) ---- */
.site-nav .theme-toggle, .site-nav .site-nav__actions #themeToggle { display: flex; position: relative; width: 42px; min-width: 42px; padding: 0; overflow: hidden; }
.theme-toggle svg { position: absolute; width: 17px; height: 17px; transition: transform 0.45s cubic-bezier(.22,1,.36,1), opacity 0.3s ease; }
.theme-toggle .tt-sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.theme-toggle .tt-moon { opacity: 1; transform: none; }
html[data-theme="dark"] .theme-toggle .tt-sun { opacity: 1; transform: none; }
html[data-theme="dark"] .theme-toggle .tt-moon { opacity: 0; transform: rotate(90deg) scale(0.6); }
@media (max-width: 1279px) and (min-width: 1024px) { .site-nav .site-nav__actions #themeToggle { width: 38px; min-width: 38px; } }
@media (max-width: 640px) { .site-nav .site-nav__actions #themeToggle { width: 38px; min-width: 38px; height: 38px; } .site-nav .lang-toggle-btn { height: 38px; } }
html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease !important; }

/* touch screens: a tapped chat suggestion must not stay painted in its hover colour */
@media (hover: none) {
  .cw-chip:hover { background: var(--bg-raised); color: var(--ink-soft); border-color: var(--border); }
  html[data-theme="dark"] .cw-chip:hover { background: transparent; color: var(--ink-soft); border-color: rgba(201,162,74,0.3); }
}

/* round 2 pieces in the black theme */
html[data-theme="dark"] .mcs { background: var(--lp-card); box-shadow: 0 0 0 1px var(--lp-line), 0 40px 80px -50px rgba(0,0,0,0.9); }
html[data-theme="dark"] .mcs .mc-range { background: linear-gradient(90deg, var(--lp-gold) 0 var(--fill, 50%), rgba(245,243,238,0.14) var(--fill, 50%) 100%); }
html[data-theme="dark"] .mcs-result { background: #070707; box-shadow: inset 1px 0 0 var(--lp-line); }
html[data-theme="dark"] .fin-mini a { color: var(--lp-gold); }
html[data-theme="dark"] .map-frame iframe { filter: grayscale(0.25) brightness(0.9) contrast(1.05); }
html[data-theme="dark"] .ab-social a { background: var(--lp-card); color: var(--lp-cream); box-shadow: 0 0 0 1px var(--lp-line); }
@media (hover: hover) { html[data-theme="dark"] .ab-social a:hover { background: var(--lp-gold); color: var(--lp-ink); box-shadow: 0 0 0 1px var(--lp-gold), 0 12px 24px -12px rgba(201,162,74,0.6); } }

/* ==========================================================================
   LP NEW — Legacy Point Team's own components on top of the William Jusme II
   layer: the translucent crossfade hero, five service cards, the Legacy
   Compass process, the seminar band + page, the team, reviews, the home
   search (IDX), the inline funnel card and the booking request picker.
   (build.py appends this after lp-pack.css + lp-dark.css.)
   ========================================================================== */
:root { --lp-silver: #c0c0c0; --lp-silver-soft: rgba(192,192,192,0.6); }
.center-cta { text-align: center; margin-top: 34px; }
.form-fine { margin-top: 6px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.6; }
.consent a { text-decoration: underline; }

/* ---- Header: the gold lockup (LP + LEGACY POINT + TEAM) needs a little height ---- */
.site-nav__logo .logo-light { height: 50px; filter: drop-shadow(0 2px 12px rgba(0,0,0,0.5)); }
.site-nav.is-scrolled .site-nav__logo .logo-light { height: 42px; }
@media (max-width: 1279px) and (min-width: 1024px) { .site-nav__logo .logo-light { height: 40px; } .site-nav.is-scrolled .site-nav__logo .logo-light { height: 36px; } .nav-calc { display: none; } }
@media (max-width: 1023px) { .site-nav__logo .logo-light, .site-nav.is-scrolled .site-nav__logo .logo-light { height: 40px; } }
@media (max-width: 640px) { .site-nav__logo .logo-light, .site-nav.is-scrolled .site-nav__logo .logo-light { height: 36px; } }
@media (max-width: 360px) { .site-nav__logo .logo-light, .site-nav.is-scrolled .site-nav__logo .logo-light { height: 32px; } }
.mega-team { width: 520px; grid-template-columns: repeat(2, 1fr); }
.mega-team .mega-all { grid-column: 1 / -1; border-top: 1px solid rgba(201,162,74,0.16); border-radius: 0 0 10px 10px; }
.mega-team .mega-all strong { color: var(--lp-gold); }
@media (max-width: 1023px) { .mega-team { width: 100%; grid-template-columns: 1fr 1fr; } .mega-team a span { display: none; } }
.footer-logo img { height: 74px; width: auto; }
.funnel-logo img { height: 50px; width: auto; }

/* ==========================================================================
   HERO — translucent like the lending heroes: three photos crossfade under a
   soft blur + flat warm-black veil; copy centred; gold motes drift up; a slow
   light sweep crosses the glass search.
   ========================================================================== */
.hero.lp-hero2 { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 140px 0 110px; background: #070707; isolation: isolate; overflow: hidden; color: #fff; text-align: center; }
.hs-slides { position: absolute; inset: 0; z-index: -4; }
.hs-slide { position: absolute; inset: -4%; background: #070707 var(--photo) center / cover no-repeat; filter: blur(2.5px) saturate(1.06); opacity: 0; transform: scale(1.04); transition: opacity 1.8s ease; will-change: opacity, transform; }
.hs-slide.is-on { opacity: 1; animation: lp-kb 9s ease-out forwards; }
@keyframes lp-kb { from { transform: scale(1.04); } to { transform: scale(1.13) translate3d(-1%, -0.6%, 0); } }
.lp-hero2 .hero-veil { position: absolute; inset: 0; z-index: -3; background:
  radial-gradient(ellipse 70% 60% at 50% 46%, rgba(10,10,10,0.38), rgba(10,10,10,0.66) 70%),
  linear-gradient(180deg, rgba(8,8,8,0.55) 0%, rgba(8,8,8,0.3) 30%, rgba(8,8,8,0.42) 70%, rgba(8,8,8,0.86) 100%),
  rgba(28,22,8,0.14); }
.lp-sweep { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(240,220,170,0.09) 48%, rgba(240,220,170,0.03) 54%, transparent 62%); background-size: 260% 100%; animation: lp-sweep 11s ease-in-out infinite; }
@keyframes lp-sweep { 0% { background-position: 120% 0; } 55%, 100% { background-position: -40% 0; } }
.hero-motes { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-motes i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: #e2c47e; box-shadow: 0 0 10px 2px rgba(201,162,74,0.55); opacity: 0; animation: lp-mote 12s linear infinite; }
.hero-motes i:nth-child(1) { left: 8%; animation-delay: 0s; } .hero-motes i:nth-child(2) { left: 19%; animation-delay: 3.4s; animation-duration: 14s; }
.hero-motes i:nth-child(3) { left: 31%; animation-delay: 6.2s; } .hero-motes i:nth-child(4) { left: 44%; animation-delay: 1.8s; animation-duration: 15s; }
.hero-motes i:nth-child(5) { left: 57%; animation-delay: 8.1s; } .hero-motes i:nth-child(6) { left: 66%; animation-delay: 4.6s; animation-duration: 13s; }
.hero-motes i:nth-child(7) { left: 75%; animation-delay: 9.7s; } .hero-motes i:nth-child(8) { left: 84%; animation-delay: 2.5s; animation-duration: 16s; }
.hero-motes i:nth-child(9) { left: 92%; animation-delay: 7.3s; } .hero-motes i:nth-child(10) { left: 50%; animation-delay: 11s; animation-duration: 12.5s; }
@keyframes lp-mote { 0% { opacity: 0; transform: translateY(0) translateX(0); } 12% { opacity: 0.85; } 70% { opacity: 0.5; } 100% { opacity: 0; transform: translateY(-82vh) translateX(18px); } }
.hero.lp-hero2 .wrap { position: relative; z-index: 1; width: 100%; max-width: var(--max); display: block; text-align: center; }
.lp-hero2 .hero-copy { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lp-hero2 .hero-copy h1 { max-width: none; margin-top: 0; }
.lp-hero2 .hero-copy .lede { max-width: 640px; }
.hero.lp-hero2 .hero-actions { justify-content: center; }
.lp-hero2 h1 { font-size: clamp(46px, 7.2vw, 104px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 600; color: #fff; margin: 0; text-shadow: 0 8px 40px rgba(0,0,0,0.35); }
.lp-hero2 h1 .accent-text { display: inline-block; }
.lp-hero2 .lede { margin: 24px auto 0; max-width: 640px; font-size: clamp(16px, 1.45vw, 19px); line-height: 1.65; color: rgba(245,243,238,0.86); opacity: 0; animation: ck-rise 0.8s cubic-bezier(.22,1,.36,1) 0.75s forwards; }
.lp-hero2 .hero-actions { justify-content: center; margin-top: 32px; opacity: 0; animation: ck-rise 0.8s cubic-bezier(.22,1,.36,1) 0.95s forwards; }
.lp-search { position: relative; display: flex; align-items: center; gap: 8px; width: min(100%, 720px); margin: 30px auto 0; padding: 8px; border-radius: 999px;
  background: rgba(18,18,18,0.42); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.08); opacity: 0; animation: ck-rise 0.8s cubic-bezier(.22,1,.36,1) 1.15s forwards; }
.lp-search::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--hs-a, 0deg), transparent 0deg, rgba(240,218,160,0.9) 30deg, transparent 75deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: lp-hs-glide 7s linear infinite; }
@property --hs-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes lp-hs-glide { to { --hs-a: 360deg; } }
.hsr-tabs { display: flex; flex: none; padding: 3px; border-radius: 999px; background: rgba(255,255,255,0.08); }
.hsr-tab { position: relative; cursor: pointer; }
.hsr-tab input { position: absolute; opacity: 0; pointer-events: none; }
.hsr-tab span { display: block; padding: 10px 16px; border-radius: 999px; font: 600 14px/1 var(--font-body); color: rgba(255,255,255,0.75); transition: background 0.25s ease, color 0.25s ease; }
.hsr-tab input:checked + span { background: var(--lp-gold); color: var(--lp-ink); }
.hsr-tab input:focus-visible + span { outline: 2px solid var(--lp-gold); outline-offset: 2px; }
.hsr-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 10px; color: rgba(255,255,255,0.6); }
.hsr-field svg { width: 18px; height: 18px; flex: none; color: var(--lp-gold); }
.hsr-field input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; color: #fff; font: 500 16px var(--font-body); outline: none; }
.hsr-field input::placeholder { color: rgba(255,255,255,0.55); }
.hsr-go { flex: none; padding: 14px 24px; }
.hero-proof { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 26px 0 0; padding: 0; font-size: 13.5px; color: rgba(245,243,238,0.78); opacity: 0; animation: ck-rise 0.8s cubic-bezier(.22,1,.36,1) 1.35s forwards; }
.hero-proof li { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof svg { width: 16px; height: 16px; color: var(--lp-gold); flex: none; }
.hero-proof b { color: #fff; font-weight: 700; }
.hp-stars { color: var(--lp-gold); letter-spacing: 0.06em; font-size: 13px; }
.hs-bars { position: absolute; left: 50%; bottom: 30px; z-index: 2; display: flex; gap: 8px; transform: translateX(-50%); }
.hs-bars i { position: relative; width: 46px; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.22); overflow: hidden; }
.hs-bars i::after { content: ''; position: absolute; inset: 0; background: var(--lp-gold); transform: scaleX(0); transform-origin: left; }
.hs-bars i.is-done::after { transform: scaleX(1); }
.hs-bars i.is-on::after { animation: lp-bar 7s linear forwards; }
@keyframes lp-bar { to { transform: scaleX(1); } }
@media (max-width: 720px) {
  .hero.lp-hero2 { padding: 112px 0 84px; }
  .lp-hero2 h1 { font-size: clamp(42px, 12.4vw, 60px); }
  .lp-search { flex-wrap: wrap; border-radius: 22px; padding: 10px; }
  .hsr-tabs { order: 1; }
  .hsr-field { order: 3; flex-basis: 100%; padding: 0 6px; border-top: 1px solid rgba(255,255,255,0.12); margin-top: 4px; }
  .hsr-go { order: 2; margin-left: auto; padding: 12px 18px; }
  .lp-hero2 .hero-actions { width: 100%; }
  .lp-hero2 .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .hero-proof { gap: 8px 16px; font-size: 12.5px; }
  .hs-bars { bottom: 22px; }
}
/* short laptop windows (tmack's 1280x580): keep the search + proof on the first screen */
@media (min-width: 721px) and (max-height: 760px) {
  .hero.lp-hero2 { padding: 104px 0 64px; }
  .lp-hero2 h1 { font-size: clamp(44px, 6vw, 76px); }
  .lp-hero2 .lede { margin-top: 16px; font-size: 16px; }
  .lp-hero2 .hero-actions { margin-top: 20px; }
  .lp-search { margin-top: 20px; }
  .hero-proof { margin-top: 16px; }
  .hs-bars { bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-slide.is-on { animation: none; } .lp-sweep, .hero-motes, .lp-search::after { display: none; }
  .lp-hero2 .lede, .lp-hero2 .hero-actions, .lp-search, .hero-proof { animation: none; opacity: 1; }
}

/* ==========================================================================
   WHAT WE DO — five translucent photo cards: three across, two centred below
   ========================================================================== */
.svc5 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.svc5 .pcard { grid-column: span 2; min-height: 400px; --pc-pad: 26px; }
.svc5 .pcard:nth-child(4) { grid-column: 2 / span 2; }
.svc5 .pcard:nth-child(5) { grid-column: 4 / span 2; }
.svc5 .pc-tag { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(12,12,12,0.42); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.svc5 .pc-tag svg { width: 14px; height: 14px; color: var(--lp-gold); }
.svc5 h3 { font-size: clamp(21px, 1.8vw, 25px); }
.pc-sub { margin-top: 8px; font-family: var(--font-head); font-weight: 500; font-style: italic; font-size: 17px; line-height: 1.35; color: #ecd9a6 !important; letter-spacing: -0.005em; }
.svc5 .pc-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13.5px; font-weight: 700; color: var(--lp-gold); }
.svc5 .pc-go svg { width: 14px; height: 14px; transition: transform 0.3s ease; }
@media (hover: hover) { .svc5 .pcard:hover .pc-go svg { transform: translate(3px, -3px); } }
@media (max-width: 1100px) { .svc5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc5 .pcard, .svc5 .pcard:nth-child(4) { grid-column: auto; } .svc5 .pcard:nth-child(5) { grid-column: 1 / -1; } }
@media (max-width: 640px) { .svc5 { grid-template-columns: minmax(0, 1fr); } .svc5 .pcard:nth-child(5) { grid-column: auto; } .svc5 .pcard { min-height: 320px; } }

/* ==========================================================================
   ABOUT — Edwin's own photo (with its background) in a framed card with
   gold corner brackets that draw in, two chips, three credentials.
   ========================================================================== */
.lp-about .about-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.lp-about .ab-photo { max-width: 440px; }
.lp-about .ab-frame img { aspect-ratio: 4 / 5; object-position: 50% 30%; }
.ab-corner { position: absolute; z-index: 3; width: 74px; height: 74px; pointer-events: none; transition: transform 0.7s cubic-bezier(.22,1,.36,1); }
.ab-corner::before, .ab-corner::after { content: ''; position: absolute; background: linear-gradient(90deg, #f0dcab, var(--lp-gold)); border-radius: 2px; }
.ab-corner.c-tl { top: -14px; left: -14px; } .ab-corner.c-br { right: -14px; bottom: -14px; transform: rotate(180deg); }
.ab-corner::before { left: 0; top: 0; height: 2px; width: 0; transition: width 0.9s cubic-bezier(.22,1,.36,1) 0.2s; }
.ab-corner::after { left: 0; top: 0; width: 2px; height: 0; transition: height 0.9s cubic-bezier(.22,1,.36,1) 0.35s; }
.lp-about.is-visible .ab-corner::before, .lp-about:not(.pre-reveal) .ab-corner::before { width: 100%; }
.lp-about.is-visible .ab-corner::after, .lp-about:not(.pre-reveal) .ab-corner::after { height: 100%; }
.lp-about .ab-photo::before { display: none; }
@media (hover: hover) { .lp-about .ab-photo:hover .c-tl { transform: translate(-6px, -6px); } .lp-about .ab-photo:hover .c-br { transform: rotate(180deg) translate(-6px, -6px); } }
.lp-about .ab-chip.c1 { top: 26px; right: -22px; }
.lp-about .ab-chip.c2 { bottom: 30px; left: -22px; }
.lp-about .ab-copy > p { max-width: 600px; }
.ab-social .is-soon { width: 46px; height: 46px; min-width: 46px; border-radius: 50%; display: grid; place-items: center; opacity: 0.38; box-shadow: 0 0 0 1px var(--border); }
.ab-social .is-soon svg, .ab-social a svg { width: 18px; height: 18px; }
@media (max-width: 980px) {
  .lp-about .about-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .lp-about .ab-photo { max-width: 400px; justify-self: center; }
  .lp-about .ab-copy { text-align: center; } .lp-about .ab-copy .hero-actions { justify-content: center; }
  .lp-about .ab-copy > p { margin-left: auto; margin-right: auto; }
  .lp-about .ab-creds li::before { left: 50%; transform: translateX(-50%); } .lp-about .ab-creds li { padding-left: 0; padding-right: 0; }
}
@media (max-width: 560px) { .lp-about .ab-chip.c1 { right: -6px; } .lp-about .ab-chip.c2 { left: -6px; } .ab-corner { width: 52px; height: 52px; } .ab-corner.c-tl { top: -9px; left: -9px; } .ab-corner.c-br { right: -9px; bottom: -9px; } }

/* ==========================================================================
   THE LEGACY COMPASS — process. A black band pinned while you scroll; a gold
   compass whose needle swings N → E → S → W (the four stages) while the
   matching photo card comes forward. Buying / Selling switch the labels.
   ========================================================================== */
.lc { position: relative; background: #070707; color: #fff; }
.lc::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 28% 55%, rgba(201,162,74,0.12), transparent 70%); }
.lc-scroll { height: 360vh; }
.lc-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.lc-pin > .wrap { width: 100%; padding-top: 70px; }
.lc-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.lc-top h2 { font-size: clamp(30px, 3.6vw, 50px); line-height: 1.06; letter-spacing: -0.025em; color: #fff; margin-top: 14px; }
.lc-top p { margin-top: 12px; color: rgba(245,243,238,0.7); font-size: 15.5px; max-width: 520px; }
.lc-tabs { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(201,162,74,0.25); flex: none; }
.lc-tab { padding: 11px 20px; border-radius: 999px; border: 0; background: transparent; color: rgba(245,243,238,0.75); font: 600 14px/1 var(--font-body); cursor: pointer; transition: background 0.25s ease, color 0.25s ease; }
.lc-tab.is-on { background: var(--lp-gold); color: var(--lp-ink); }
@media (hover: hover) { .lc-tab:not(.is-on):hover { color: #fff; background: rgba(255,255,255,0.06); } }
.lc-stage { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; margin-top: 30px; }
.lc-compass { position: relative; width: min(calc(100% - 190px), 420px, 52vh); aspect-ratio: 1; justify-self: center; }
.lc-halo { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(201,162,74,0.22), rgba(201,162,74,0) 68%); filter: blur(10px); animation: lc-breathe 5s ease-in-out infinite; }
@keyframes lc-breathe { 0%, 100% { opacity: 0.6; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } }
.lc-dial { position: relative; width: 100%; height: 100%; overflow: visible; }
.lc-ring-o { fill: none; stroke: rgba(201,162,74,0.55); stroke-width: 1.5; }
.lc-ring-i { fill: rgba(255,255,255,0.02); stroke: rgba(192,192,192,0.22); stroke-width: 1; stroke-dasharray: 2 6; }
.lc-ticks line { stroke: rgba(192,192,192,0.35); stroke-width: 1; }
.lc-ticks line.major { stroke: var(--lp-gold); stroke-width: 2; }
.lc-progress { fill: none; stroke: url(#lcGold); stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 200px 200px; stroke-dasharray: 2 100; filter: drop-shadow(0 0 6px rgba(201,162,74,0.6)); }
.lc-rose path { fill: none; stroke: rgba(192,192,192,0.25); stroke-width: 1; }
.lc-rose { animation: lc-rose 60s linear infinite; transform-origin: 200px 200px; }
@keyframes lc-rose { to { transform: rotate(360deg); } }
.lc-needle { transform-origin: 200px 200px; transition: transform 0.08s linear; filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6)); }
.lc-pt { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 8px; font: 600 13px/1.2 var(--font-head); letter-spacing: 0.04em; text-transform: uppercase; color: rgba(245,243,238,0.5); white-space: nowrap; transition: color 0.4s ease, transform 0.4s ease; }
.lc-pt i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(192,192,192,0.45); background: #070707; transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; }
.lc-pt.p1 { top: -8px; left: 50%; transform: translate(-50%, -100%); flex-direction: column-reverse; }
.lc-pt.p2 { right: -10px; top: 50%; transform: translate(100%, -50%); flex-direction: row; }
.lc-pt.p3 { bottom: -8px; left: 50%; transform: translate(-50%, 100%); }
.lc-pt.p4 { left: -10px; top: 50%; transform: translate(-100%, -50%); flex-direction: row-reverse; }
.lc-pt.is-done { color: rgba(245,243,238,0.75); } .lc-pt.is-done i { background: var(--lp-gold); border-color: var(--lp-gold); }
.lc-pt.is-on { color: #f0dcab; } .lc-pt.is-on i { background: var(--lp-gold); border-color: #f0dcab; box-shadow: 0 0 0 6px rgba(201,162,74,0.22), 0 0 18px rgba(201,162,74,0.7); }
.lc .lbl-sell { display: none; } .lc[data-mode="sell"] .lbl-sell { display: inline; } .lc[data-mode="sell"] .lbl-buy { display: none; }
.lc-cards { position: relative; min-height: 400px; perspective: 1400px; }
.lc-card { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(150px, 0.95fr) auto; border-radius: 26px; overflow: hidden; background: #121212; border: 1px solid rgba(201,162,74,0.22); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9);
  opacity: 0; visibility: hidden; transform: translateY(36px) rotateX(8deg) scale(0.97); transition: opacity 0.55s ease, transform 0.7s cubic-bezier(.22,1,.36,1), visibility 0s linear 0.55s; }
.lc-card.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity 0.55s ease, transform 0.7s cubic-bezier(.22,1,.36,1), visibility 0s; }
.lc-card.is-past { transform: translateY(-30px) rotateX(-8deg) scale(0.97); }
.lc[data-mode="buy"] .lc-card[data-mode="sell"], .lc[data-mode="sell"] .lc-card[data-mode="buy"] { display: none; }
.lc-photo { position: relative; display: block; background: var(--photo) center / cover no-repeat; }
.lc-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,18,18,0) 40%, #121212 100%); }
.lc-card.is-active .lc-photo { animation: lc-zoom 6s ease-out forwards; }
@keyframes lc-zoom { from { background-size: 112%; } to { background-size: 100%; } }
.lc-body { padding: 4px 30px 28px; }
.lc-dir { display: inline-flex; align-items: center; gap: 8px; font: 700 11.5px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--lp-gold); }
.lc-dir::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--lp-gold); }
.lc-body h3 { margin-top: 12px; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.12; color: #fff; }
.lc-body p { margin-top: 10px; color: rgba(245,243,238,0.74); font-size: 15px; line-height: 1.65; }
.lc-body ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.lc-body li { padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #f0dcab; background: rgba(201,162,74,0.1); border: 1px solid rgba(201,162,74,0.28); }
.lc-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.lc-node { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 6px 0; border: 0; border-top: 2px solid rgba(255,255,255,0.12); background: none; color: rgba(245,243,238,0.5); font: 600 13px/1.2 var(--font-body); text-align: left; cursor: pointer; transition: color 0.3s ease, border-color 0.4s ease; }
.lc-node .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); flex: none; transition: background 0.3s ease, box-shadow 0.3s ease; }
.lc-node.is-on { color: rgba(245,243,238,0.85); border-top-color: var(--lp-gold); } .lc-node.is-on .dot { background: var(--lp-gold); }
.lc-node.is-current { color: #fff; } .lc-node.is-current .dot { box-shadow: 0 0 0 5px rgba(201,162,74,0.25); }
@media (hover: hover) { .lc-node:hover { color: #fff; } }
/* short laptop windows (tmack's 1280x580): everything fits between the header and the fold */
@media (min-width: 981px) and (max-height: 760px) {
  .lc-pin > .wrap { padding-top: 62px; }
  .lc-top .eyebrow, .lc-top p { display: none; } .lc-top h2 { font-size: clamp(26px, 3vw, 36px); margin-top: 0; }
  .lc-stage { margin-top: 30px; gap: 40px; }
  .lc-compass { width: min(calc(100% - 190px), 280px, calc(100svh - 340px)); }
  .lc-cards { min-height: min(340px, calc(100svh - 196px)); }
  .lc-card { grid-template-rows: minmax(90px, 0.7fr) auto; }
  .lc-body { padding: 2px 24px 20px; } .lc-body p { font-size: 14px; margin-top: 6px; } .lc-body h3 { margin-top: 8px; } .lc-body ul { margin-top: 10px; }
  .lc-rail { margin-top: 12px; } .lc-node { padding-top: 9px; }
}
@media (max-width: 980px) {
  .lc-scroll { height: 400vh; }
  .lc-pin > .wrap { padding-top: 64px; }
  .lc-top { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .lc-top .eyebrow, .lc-top p { display: none; } .lc-top h2 { font-size: clamp(26px, 6.4vw, 38px); margin-top: 0; }
  .lc-stage { grid-template-columns: minmax(0, 1fr); gap: 46px; margin-top: 36px; }
  .lc-compass { width: min(54vw, calc(100svh - 560px), 240px); min-width: 150px; }
  .lc-pt { font-size: 10.5px; gap: 5px; } .lc-pt i { width: 9px; height: 9px; }
  .lc-cards { min-height: 0; height: max(280px, calc(100svh - 64px - 150px - 34px - min(54vw, calc(100svh - 560px), 240px) - 90px)); }
  .lc-card { grid-template-rows: minmax(60px, 0.55fr) auto; }
  .lc-body { padding: 0 20px 18px; } .lc-body h3 { margin-top: 8px; font-size: 21px; } .lc-body p { font-size: 14px; line-height: 1.55; margin-top: 6px; } .lc-body ul { margin-top: 10px; } .lc-body li { padding: 6px 10px; font-size: 12px; }
  .lc-rail { display: none; }
}
@media (max-width: 420px) { .lc-pt.p2 span, .lc-pt.p4 span { max-width: 64px; white-space: normal; text-align: center; } }
/* static fallback (reduced motion / very short screens): no pin, every card listed */
.lc.is-static .lc-scroll { height: auto; }
.lc.is-static .lc-pin { position: relative; height: auto; padding: 90px 0; }
.lc.is-static .lc-cards { min-height: 0; height: auto; display: grid; gap: 16px; }
.lc.is-static .lc-card { position: relative; opacity: 1; visibility: visible; transform: none; }
.lc.is-static .lc-rail { display: none; }
@media (prefers-reduced-motion: reduce) { .lc-halo, .lc-rose, .lc-card.is-active .lc-photo { animation: none; } }

/* ==========================================================================
   SEMINAR — the home band: a blurred seminar photo under a black veil, copy
   left, a gold-edged event "ticket" right (date / time / place, state-aware)
   ========================================================================== */
html:not(.sem-past) .sem-when-past, html.sem-past .sem-when-up { display: none !important; }
.sem-band { position: relative; overflow: hidden; isolation: isolate; padding: 120px 0; color: #fff; background: #070707; }
.sem-photo { position: absolute; inset: -12px; z-index: -2; background: var(--photo) center / cover no-repeat; filter: blur(3px) saturate(1.05); transform: scale(1.04); }
.sem-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,8,8,0.9) 0%, rgba(8,8,8,0.7) 50%, rgba(8,8,8,0.55) 100%), rgba(28,22,8,0.12); }
.sem-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 60px; align-items: center; }
.sem-copy h2 { font-size: clamp(32px, 3.8vw, 54px); line-height: 1.04; letter-spacing: -0.025em; margin-top: 16px; color: #fff; }
.sem-copy p { margin-top: 18px; color: rgba(245,243,238,0.78); font-size: 16.5px; line-height: 1.7; max-width: 560px; }
.sem-copy .hero-actions { justify-content: flex-start; margin-top: 28px; }
.sem-ticket { position: relative; display: grid; gap: 14px; padding: 30px 30px 26px; border-radius: 24px; color: #fff; background: linear-gradient(160deg, rgba(30,28,22,0.86), rgba(12,12,12,0.92)); border: 1px solid rgba(201,162,74,0.45); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.06); }
.sem-ticket::before { content: ''; position: absolute; left: 22px; right: 22px; top: 104px; border-top: 1.5px dashed rgba(201,162,74,0.4); }
.st-notch { position: absolute; top: 96px; width: 18px; height: 18px; border-radius: 50%; background: #0a0a0a; border: 1px solid rgba(201,162,74,0.45); }
.st-notch.l { left: -10px; clip-path: inset(0 0 0 50%); } .st-notch.r { right: -10px; clip-path: inset(0 50% 0 0); }
.st-head { display: flex; align-items: center; gap: 14px; padding-bottom: 22px; }
.st-head img { width: 52px; height: 52px; object-fit: contain; }
.st-head b { display: block; font-family: var(--font-head); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.st-head em { display: block; font-style: normal; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-gold); margin-top: 3px; }
.st-row { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.45; color: rgba(245,243,238,0.9); }
.st-row svg { width: 18px; height: 18px; color: var(--lp-gold); flex: none; margin-top: 1px; }
.st-status { margin-top: 6px; padding: 10px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; text-align: center; color: var(--lp-ink); background: linear-gradient(120deg, #e2c47e, #c9a24a); }
@media (hover: hover) { .sem-ticket:hover { border-color: rgba(240,220,170,0.8); } }
@media (max-width: 980px) { .sem-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; } .sem-copy { text-align: center; } .sem-copy p { margin-left: auto; margin-right: auto; } .sem-copy .hero-actions { justify-content: center; } .sem-ticket { max-width: 420px; justify-self: center; width: 100%; } .sem-band { padding: 90px 0; } }

/* ==========================================================================
   TEAM — portrait cards (the leader's is larger), a page per member
   ========================================================================== */
.tm-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tm-card { position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--bg-card, #141414); box-shadow: 0 0 0 1px var(--border), 0 30px 60px -44px rgba(0,0,0,0.8); transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(.22,1,.36,1); }
.tm-card.is-lead { grid-column: span 2; grid-row: span 2; }
.tm-photo { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #0e0e0e; }
.tm-card.is-lead .tm-photo { aspect-ratio: auto; flex: 1; min-height: 360px; }
.tm-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,1,.36,1), filter 0.6s ease; filter: saturate(0.92); }
.tm-shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(240,220,170,0.18) 50%, transparent 60%); background-size: 250% 100%; background-position: 130% 0; transition: background-position 1.1s ease; pointer-events: none; }
.tm-body { position: relative; display: grid; gap: 4px; padding: 16px 18px 18px; }
.tm-role { font: 700 11px/1.3 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-gold); }
.tm-name { font-family: var(--font-head); font-weight: 600; font-size: 18px; color: var(--ink); letter-spacing: -0.01em; }
.tm-card.is-lead .tm-name { font-size: 26px; }
.tm-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--ink-muted); transition: color 0.25s ease; }
.tm-go svg { width: 13px; height: 13px; transition: transform 0.3s ease; }
@media (hover: hover) {
  .tm-card:hover { box-shadow: 0 0 0 1px var(--lp-gold), 0 34px 70px -40px rgba(0,0,0,0.9); }
  .tm-card:hover .tm-photo img { transform: scale(1.05); filter: saturate(1.05); }
  .tm-card:hover .tm-shine { background-position: -30% 0; }
  .tm-card:hover .tm-go { color: var(--lp-gold); } .tm-card:hover .tm-go svg { transform: translate(2px, -2px); }
}
.tm-mono { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #1d1a12, #0b0b0b 70%); }
.tm-mono img { width: 46%; height: auto; opacity: 0.22; }
.tm-mono b { position: absolute; bottom: 14%; font: 600 15px var(--font-head); letter-spacing: 0.3em; color: rgba(201,162,74,0.7); }
@media (max-width: 1100px) { .tm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tm-card.is-lead { grid-column: 1 / -1; grid-row: auto; flex-direction: row; } .tm-card.is-lead .tm-photo { flex: 0 0 46%; aspect-ratio: 4 / 5; min-height: 0; } .tm-card.is-lead .tm-body { align-content: center; padding: 28px; } }
@media (max-width: 760px) { .tm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .tm-name { font-size: 16px; } .tm-card.is-lead { flex-direction: column; } .tm-card.is-lead .tm-photo { flex: none; aspect-ratio: 4 / 4.2; } .tm-card.is-lead .tm-body { padding: 18px; } }
.tm-header h1 { font-size: clamp(38px, 5vw, 64px); }
.tm-profile-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px; align-items: center; }
.tm-portrait { position: relative; max-width: 420px; width: 100%; justify-self: center; }
.tm-portrait-frame { position: relative; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; background: #0e0e0e; box-shadow: 0 40px 80px -40px rgba(0,0,0,0.85); }
.tm-portrait-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tm-portrait-ring { position: absolute; inset: -12px; border-radius: 36px; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--tm-a, 0deg), rgba(201,162,74,0.15), #f0dcab 25%, rgba(201,162,74,0.15) 50%, #c9a24a 75%, rgba(201,162,74,0.15)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: tm-ring 10s linear infinite; }
@property --tm-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes tm-ring { to { --tm-a: 360deg; } }
.tm-plate { position: absolute; left: 18px; right: 18px; bottom: 18px; padding: 14px 16px; border-radius: 16px; background: rgba(12,12,12,0.74); border: 1px solid rgba(201,162,74,0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; }
.tm-plate b { display: block; font: 600 17px var(--font-head); }
.tm-plate span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--lp-gold); }
.tm-copy h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -0.02em; margin-top: 14px; }
.tm-copy > p { margin-top: 16px; color: var(--ink-soft); font-size: 16.5px; line-height: 1.75; max-width: 620px; }
.tm-pending { font-style: italic; color: var(--ink-muted) !important; }
.tm-facts { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--border); }
.tm-facts li { padding: 14px 0; border-bottom: 1px solid var(--border); }
.tm-facts b { display: block; font: 700 11px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-gold); }
.tm-facts span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--ink); }
.tm-focus { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
.tm-focus li { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink); background: rgba(201,162,74,0.1); border: 1px solid rgba(201,162,74,0.28); }
.tm-focus svg { width: 14px; height: 14px; color: var(--lp-gold); }
.tm-actions { justify-content: flex-start; margin-top: 28px; align-items: center; }
.tm-minis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tm-mini { display: grid; grid-template-columns: 56px 1fr 16px; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--bg-card, #141414); box-shadow: 0 0 0 1px var(--border); color: var(--ink); transition: box-shadow 0.3s ease, transform 0.3s ease; }
.tm-mini-ph { position: relative; width: 56px; height: 56px; border-radius: 14px; overflow: hidden; background: #0e0e0e; }
.tm-mini-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tm-mini-ph .tm-mono b { display: none; } .tm-mini-ph .tm-mono img { width: 70%; opacity: 0.4; }
.tm-mini b { display: block; font: 600 15px var(--font-head); }
.tm-mini em { display: block; font-style: normal; font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.tm-mini > svg { width: 14px; height: 14px; color: var(--lp-gold); }
@media (hover: hover) { .tm-mini:hover { box-shadow: 0 0 0 1px var(--lp-gold); transform: translateY(-3px); } }
@media (max-width: 1100px) { .tm-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) { .tm-profile-grid { grid-template-columns: minmax(0, 1fr); gap: 50px; } .tm-copy { text-align: center; } .tm-copy > p { margin-left: auto; margin-right: auto; } .tm-actions, .tm-focus { justify-content: center; } .tm-facts { text-align: left; } }
@media (max-width: 560px) { .tm-minis { grid-template-columns: minmax(0, 1fr); } .tm-facts { grid-template-columns: minmax(0, 1fr); } }
.tm-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tm-value { padding: 28px 26px; border-radius: 22px; background: var(--bg-card, #141414); box-shadow: 0 0 0 1px var(--border); text-align: center; }
.tm-value > span { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: var(--lp-gold); background: rgba(201,162,74,0.12); }
.tm-value > span svg { width: 24px; height: 24px; }
.tm-value b { display: block; margin-top: 16px; font: 600 19px var(--font-head); color: var(--ink); }
.tm-value p { margin-top: 8px; color: var(--ink-muted); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 860px) { .tm-values { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   REVIEWS — black band on a blurred family-and-home photo; glass cards in an
   endless marquee; the Google score as a pill.
   ========================================================================== */
.rvx-section { position: relative; overflow: hidden; isolation: isolate; padding: 110px 0 96px; background: #070707; color: #fff; }
.rvx-photo { position: absolute; inset: -16px; z-index: -2; background: var(--photo) center / cover no-repeat; filter: blur(5px) saturate(1.05); }
.rvx-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(8,8,8,0.94), rgba(8,8,8,0.8) 50%, rgba(8,8,8,0.88)); }
.rvx-section .section-head h2 { color: #fff; }
.rvx-score { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 10px 18px 10px 10px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: rgba(245,243,238,0.85); font-size: 14px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color 0.25s ease, transform 0.3s ease; }
.rvx-score b { font: 700 20px var(--font-head); color: #fff; }
.rvx-g { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #1a73e8; }
.rvx-g svg { width: 18px; height: 18px; }
.rvx-score-stars { color: var(--lp-gold); letter-spacing: 0.08em; }
@media (hover: hover) { .rvx-score:hover { border-color: var(--lp-gold); transform: translateY(-2px); } }
.rvx-viewport { position: relative; overflow: hidden; padding: 36px 0 50px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.rvx-track { display: flex; gap: 22px; width: max-content; padding: 0 22px; }
.rvx-track.is-running { animation: rvx-marquee var(--rvx-dur, 60s) linear infinite; }
.rvx-track.is-static { flex-wrap: wrap; justify-content: center; width: auto; }
@keyframes rvx-marquee { to { transform: translateX(-50%); } }
.rvx-viewport:hover .rvx-track { animation-play-state: paused; }
.rvx-card { position: relative; flex: 0 0 380px; width: 380px; margin: 0; display: flex; flex-direction: column; padding: 26px 26px 22px; border-radius: 22px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.13); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform 0.4s cubic-bezier(.22,1,.36,1), border-color 0.3s ease, background 0.3s ease; }
.rvx-card::after { content: '\201C'; position: absolute; top: 8px; right: 22px; font-family: Georgia, serif; font-size: 96px; line-height: 1; color: rgba(201,162,74,0.28); pointer-events: none; }
@media (hover: hover) { .rvx-card:hover { transform: translateY(-8px); border-color: rgba(201,162,74,0.5); background: rgba(255,255,255,0.09); } }
.rvx-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rvx-stars { display: flex; gap: 3px; color: var(--lp-gold); } .rvx-stars svg { width: 15px; height: 15px; }
.rvx-src { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #1a73e8; margin-right: 40px; } .rvx-src svg { width: 15px; height: 15px; }
.rvx-quote { margin: 16px 0 0; flex: 1; }
.rvx-quote p { font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,0.9); display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.rvx-who { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.12); }
.rvx-av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; font: 700 14px var(--font-head); color: var(--lp-ink); background: linear-gradient(135deg, #f0dcab, #c9a24a); }
.rvx-who b { display: block; font-size: 14.5px; color: #fff; } .rvx-who em { display: block; font-style: normal; font-size: 12px; color: rgba(255,255,255,0.58); margin-top: 2px; }
@media (max-width: 640px) { .rvx-card { flex-basis: 300px; width: 300px; padding: 22px 20px 18px; } .rvx-section { padding: 84px 0 76px; } }
@media (prefers-reduced-motion: reduce) { .rvx-track.is-running { animation: none; } }

/* ==========================================================================
   HOME SEARCH BAND (home) + the /search page
   ========================================================================== */
.idx-band-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.idx-band-photo { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 5 / 4; box-shadow: 0 40px 80px -46px rgba(0,0,0,0.8); }
.idx-band-photo img { width: 100%; height: 100%; object-fit: cover; }
.idx-band-copy h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.06; letter-spacing: -0.02em; margin-top: 14px; }
.idx-band-copy > p { margin-top: 16px; color: var(--ink-soft); font-size: 16.5px; line-height: 1.7; max-width: 540px; }
.idx-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.idx-quick a { padding: 9px 15px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink); background: rgba(201,162,74,0.08); border: 1px solid rgba(201,162,74,0.3); transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; }
@media (hover: hover) { .idx-quick a:hover { background: var(--lp-gold); color: var(--lp-ink); transform: translateY(-2px); } }
.idx-band-copy .hero-actions { justify-content: flex-start; margin-top: 26px; }
@media (max-width: 900px) { .idx-band-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .idx-band-copy { text-align: center; } .idx-band-copy > p { margin: 16px auto 0; } .idx-quick, .idx-band-copy .hero-actions { justify-content: center; } }

.idx-header { padding-bottom: 150px; }
.idx-wrap { position: relative; padding: 0 0 100px; }
.idx-panel { position: relative; z-index: 3; margin-top: -110px; padding: 22px; border-radius: 26px; background: rgba(20,20,20,0.86); border: 1px solid rgba(201,162,74,0.3); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 40px 90px -40px rgba(0,0,0,0.85); color: #fff; }
.idx-tabs { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,0.06); }
.idx-tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0; border-radius: 999px; background: transparent; color: rgba(245,243,238,0.75); font: 600 14px/1 var(--font-body); cursor: pointer; transition: background 0.25s ease, color 0.25s ease; }
.idx-tab svg { width: 16px; height: 16px; }
.idx-tab.is-on { background: var(--lp-gold); color: var(--lp-ink); }
.idx-row { display: flex; gap: 10px; margin-top: 14px; }
.idx-loc { position: relative; flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); }
.idx-loc:focus-within { border-color: var(--lp-gold); }
.idx-loc > svg { width: 18px; height: 18px; color: var(--lp-gold); flex: none; }
.idx-loc input { flex: 1; min-width: 0; height: 54px; border: 0; background: transparent; color: #fff; font: 500 16px var(--font-body); outline: none; }
.idx-loc input::placeholder { color: rgba(255,255,255,0.5); }
.idx-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 10; list-style: none; margin: 0; padding: 6px; border-radius: 16px; background: rgba(16,16,16,0.96); border: 1px solid rgba(201,162,74,0.25); box-shadow: 0 26px 54px rgba(0,0,0,0.5); }
.idx-suggest li { padding: 11px 12px; border-radius: 10px; cursor: pointer; color: rgba(245,243,238,0.88); font-size: 15px; }
.idx-suggest li:hover, .idx-suggest li.is-active { background: rgba(201,162,74,0.14); color: #fff; }
.idx-go { padding: 0 30px; }
.idx-filters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.idx-f { display: grid; gap: 6px; }
.idx-f > span { font: 700 10.5px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,243,238,0.55); }
.idx-f select { width: 100%; height: 46px; padding: 0 34px 0 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.14); background-color: rgba(255,255,255,0.05); color: #fff; font: 500 15px var(--font-body); -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #c9a24a 50%), linear-gradient(135deg, #c9a24a 50%, transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px; background-size: 5px 5px; background-repeat: no-repeat; }
.idx-f select:disabled { opacity: 0.4; }
.idx-f select option { background: #141414; color: #f5f3ee; }
.idx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.idx-chips button { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(201,162,74,0.3); background: rgba(201,162,74,0.06); color: rgba(245,243,238,0.85); font: 600 13px var(--font-body); cursor: pointer; transition: background 0.25s ease, color 0.25s ease; }
@media (hover: hover) { .idx-chips button:hover { background: var(--lp-gold); color: var(--lp-ink); } }
.idx-head { display: flex; justify-content: space-between; align-items: center; margin: 34px 0 16px; min-height: 22px; }
.idx-count { color: var(--ink-muted); font-size: 14px; }
.idx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.idx-card { position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--bg-card, #141414); box-shadow: 0 0 0 1px var(--border); cursor: pointer; transition: box-shadow 0.3s ease, transform 0.35s cubic-bezier(.22,1,.36,1); animation: ck-rise 0.6s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 40ms); }
.idx-card:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 3px; }
@media (hover: hover) { .idx-card:hover { box-shadow: 0 0 0 1px var(--lp-gold), 0 30px 60px -40px rgba(0,0,0,0.85); transform: translateY(-4px); } .idx-card:hover .idx-ph img { transform: scale(1.05); } }
.idx-ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #1b1b1a; }
.idx-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22,1,.36,1); }
.idx-badge, .idx-new { position: absolute; top: 12px; padding: 6px 11px; border-radius: 999px; font: 700 11.5px var(--font-body); letter-spacing: 0.04em; }
.idx-badge { left: 12px; background: rgba(12,12,12,0.72); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.idx-new { right: 12px; background: var(--lp-gold); color: var(--lp-ink); }
.idx-price { position: absolute; left: 12px; bottom: 12px; padding: 7px 12px; border-radius: 12px; font: 700 18px var(--font-head); color: #fff; background: rgba(12,12,12,0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.idx-body { padding: 16px 18px 18px; }
.idx-body h3 { font-size: 17px; line-height: 1.3; color: var(--ink); }
.idx-city { margin-top: 4px; font-size: 13.5px; color: var(--ink-muted); }
.idx-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 13.5px; color: var(--ink-soft); }
.idx-facts b { color: var(--ink); }
.idx-court { margin-top: 12px; font-size: 11.5px; color: var(--ink-faint); }
.idx-card.is-skel { min-height: 330px; cursor: default; animation: idx-skel 1.2s ease-in-out infinite alternate; }
@keyframes idx-skel { from { opacity: 0.45; } to { opacity: 0.9; } }
.idx-more-wrap { text-align: center; margin-top: 30px; }
.idx-state { max-width: 680px; margin: 10px auto 0; padding: 44px 30px; text-align: center; border-radius: 26px; background: var(--bg-card, #141414); box-shadow: 0 0 0 1px var(--border); }
.idx-state-ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: var(--lp-gold); background: rgba(201,162,74,0.12); box-shadow: 0 0 0 10px rgba(201,162,74,0.05); }
.idx-state-ic svg { width: 28px; height: 28px; animation: lc-rose 14s linear infinite; }
.idx-state h2 { margin-top: 18px; font-size: clamp(22px, 2.4vw, 30px); }
.idx-state h2 { display: none; } .idx-state.is-setup .idx-st-setup, .idx-state.is-empty .idx-st-empty, .idx-state.is-error .idx-st-error { display: block; }
.idx-state p { margin-top: 12px; color: var(--ink-muted); line-height: 1.7; }
.idx-state .hero-actions { margin-top: 22px; }
.idx-disclaimer { margin-top: 26px; font-size: 12px; color: var(--ink-faint); text-align: center; }
@media (max-width: 1080px) { .idx-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } .idx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .idx-panel { padding: 16px; border-radius: 22px; margin-top: -96px; } .idx-row { flex-direction: column; } .idx-go { height: 50px; } .idx-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .idx-grid { grid-template-columns: minmax(0, 1fr); } .idx-header { padding-bottom: 130px; } }
.idx-modal { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0s linear 0.3s; }
.idx-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease, visibility 0s; }
.idx-modal-bg { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(0,0,0,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; }
.idx-modal-box { position: relative; width: min(100%, 980px); max-height: calc(100vh - 40px); overflow: auto; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); border-radius: 26px; background: #121212; border: 1px solid rgba(201,162,74,0.3); box-shadow: 0 40px 100px rgba(0,0,0,0.7); color: #fff; transform: translateY(20px) scale(0.98); transition: transform 0.4s cubic-bezier(.22,1,.36,1); }
.idx-modal.is-open .idx-modal-box { transform: none; }
.idx-modal-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 42px; height: 42px; min-width: 42px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); background: rgba(12,12,12,0.7); color: #fff; display: grid; place-items: center; cursor: pointer; }
.idx-modal-x svg { width: 18px; height: 18px; }
.idx-m-gallery { position: relative; min-height: 360px; background: #0b0b0b; }
.idx-m-gallery img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.idx-m-nav { position: absolute; top: 50%; width: 40px; height: 40px; min-width: 40px; padding: 0; margin-top: -20px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(12,12,12,0.6); color: #fff; display: grid; place-items: center; cursor: pointer; }
.idx-m-nav svg { width: 16px; height: 16px; } .idx-m-nav.prev { left: 12px; } .idx-m-nav.prev svg { transform: rotate(180deg); } .idx-m-nav.next { right: 12px; }
.idx-m-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 5px; } .idx-m-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.4); } .idx-m-dots i.on { background: var(--lp-gold); }
.idx-m-body { padding: 30px 28px 26px; }
.idx-m-price { display: block; font: 700 28px var(--font-head); color: var(--lp-gold); }
.idx-m-body h2 { margin-top: 8px; font-size: 21px; line-height: 1.3; color: #fff; padding-right: 30px; }
.idx-m-facts { margin-top: 10px; color: rgba(245,243,238,0.8); font-size: 14.5px; }
.idx-m-desc { margin-top: 14px; color: rgba(245,243,238,0.72); font-size: 14px; line-height: 1.65; max-height: 220px; overflow: auto; }
.idx-m-court { margin-top: 12px; font-size: 11.5px; color: rgba(245,243,238,0.5); }
.idx-m-body .hero-actions { justify-content: flex-start; margin-top: 18px; }
@media (max-width: 820px) { .idx-modal-box { grid-template-columns: minmax(0, 1fr); } .idx-m-gallery { min-height: 240px; aspect-ratio: 4 / 3; } }
body.idx-open { overflow: hidden; }

/* ==========================================================================
   GET IN TOUCH — the full homeowner funnel runs inside the card (on a
   blurred dusk photo), ending with the booking card naming both people.
   ========================================================================== */
.git-section .contact-cta-wrap { align-items: start; }
.git-funnel { position: relative; isolation: isolate; overflow: hidden; border-radius: 28px; padding: 26px 26px 30px; color: #fff; border: 1px solid rgba(201,162,74,0.35); box-shadow: 0 40px 90px -46px rgba(0,0,0,0.85); min-height: 520px; perspective: 1500px; }
.git-funnel .qual-photo { position: absolute; inset: -14px; z-index: -2; background: var(--photo) center / cover no-repeat; filter: blur(4px) saturate(1.05); }
.git-funnel .qual-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,8,8,0.82), rgba(8,8,8,0.88)), rgba(28,22,8,0.12); }
.gf-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.gf-top .funnel-step-label { margin: 0; flex: none; text-align: left; }
.gf-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.14); overflow: hidden; }
.gf-bar .funnel-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, #f0dcab, #c9a24a); transition: width 0.55s cubic-bezier(.4,0,.2,1); }
.funnel-inline { min-height: 0; }
.funnel-inline .funnel-step h2 { font-size: clamp(22px, 2.4vw, 30px); }
.funnel-inline .funnel-choices-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.funnel-inline .funnel-choices-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.funnel-inline .funnel-choice { padding: 14px 14px; font-size: 14.5px; }
.funnel-inline .funnel-success { margin-bottom: 18px; }
.funnel-inline .funnel-success h2 { font-size: clamp(20px, 2.2vw, 26px); }
@media (max-width: 560px) { .git-funnel { padding: 20px 16px 24px; border-radius: 22px; } .funnel-inline .funnel-choices-6, .funnel-inline .funnel-choices-areas { grid-template-columns: minmax(0, 1fr); } }
.funnel-choices-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.funnel-choices-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .funnel-choices-6, .funnel-choices-areas { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   BOOKING REQUEST PICKER — no public Calendly yet: real dates, three time
   windows, then a pre-written text / email to Edwin naming the visitor.
   ========================================================================== */
.cal-wrap.is-picker .cal-ph-overlay { display: none; }
.cal-wrap.is-picker .cal-ph-grid { opacity: 1; filter: none; }
.cal-ph-month { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cal-nav { width: 34px; height: 34px; min-width: 34px; padding: 0; border-radius: 50%; border: 1px solid rgba(201,162,74,0.35); background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.cal-nav:disabled { opacity: 0.3; cursor: default; }
.cal-wrap:not(.is-picker) .cal-nav { visibility: hidden; }
.cal-ph-grid .cal-day { aspect-ratio: 1; min-width: 0; padding: 0; border-radius: 50%; border: 0; background: rgba(201,162,74,0.12); color: #f0dcab; font: 700 13.5px var(--font-body); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
@media (hover: hover) { .cal-ph-grid .cal-day:hover { background: rgba(201,162,74,0.3); transform: scale(1.08); } }
.cal-ph-grid .cal-day.is-sel { background: var(--lp-gold); color: var(--lp-ink); }
.cal-times { margin-top: 16px; text-align: left; }
.cal-times-head { display: block; font: 600 14px var(--font-head); margin-bottom: 10px; }
.cal-times-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cal-time { padding: 12px 8px; border-radius: 12px; border: 1px solid rgba(201,162,74,0.4); background: transparent; color: inherit; font: 600 13px/1.2 var(--font-body); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.cal-time.is-sel { background: var(--lp-gold); color: var(--lp-ink); border-color: var(--lp-gold); }
@media (hover: hover) { .cal-time:not(.is-sel):hover { background: rgba(201,162,74,0.14); } }
.cal-send { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(201,162,74,0.25); text-align: left; }
.cal-send-sum { font-size: 14.5px; line-height: 1.5; font-weight: 600; }
.cal-send-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cal-send-row .btn { flex: 1 1 200px; justify-content: center; margin-top: 0 !important; }
.cal-send-note { margin-top: 10px; font-size: 12.5px; opacity: 0.7; }
@media (max-width: 420px) { .cal-times-row { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   SEMINAR PAGE
   ========================================================================== */
.sem-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 130px 0 90px; overflow: hidden; }
.sem-hero h1 { font-size: clamp(42px, 6.4vw, 92px); line-height: 0.98; letter-spacing: -0.035em; }
.sem-ed { display: block; font-size: 0.32em; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 600; color: #f0dcab; margin-bottom: 18px; }
.sem-motto { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; margin: 22px auto 0 !important; font: 700 13px var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,243,238,0.85) !important; }
.sem-motto i { width: 5px; height: 5px; border-radius: 50%; background: var(--lp-gold); }
.sem-facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px auto 0; padding: 0; }
.sem-facts li { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 999px; font-size: 14.5px; color: #fff; background: rgba(12,12,12,0.5); border: 1px solid rgba(201,162,74,0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sem-facts svg { width: 17px; height: 17px; color: var(--lp-gold); flex: none; }
.sem-count { display: inline-flex; gap: 12px; margin-top: 26px; }
.sem-count > div { min-width: 92px; padding: 14px 10px 12px; border-radius: 18px; background: rgba(12,12,12,0.55); border: 1px solid rgba(201,162,74,0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sem-count b { display: block; font: 600 36px/1 var(--font-head); color: #fff; font-variant-numeric: tabular-nums; }
.sem-count span { display: block; margin-top: 6px; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(245,243,238,0.65); }
.sem-past-note { max-width: 620px; margin: 22px auto 0 !important; padding: 14px 18px; border-radius: 16px; background: rgba(12,12,12,0.5); border: 1px solid rgba(201,162,74,0.3); font-size: 15px !important; }
.sem-hero .hero-actions { margin-top: 28px; }
.spk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.spk-card { position: relative; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; background: var(--bg-card, #141414); box-shadow: 0 0 0 1px var(--border); }
.spk-photo { display: block; aspect-ratio: 4 / 3.2; background: var(--photo) center / cover no-repeat; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.spk-ic { position: absolute; top: calc((100% - 0px) * 0); left: 18px; margin-top: 18px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #f0dcab, #c9a24a); color: var(--lp-ink); box-shadow: 0 10px 24px rgba(0,0,0,0.4); }
.spk-ic svg { width: 22px; height: 22px; }
.spk-body { padding: 20px 20px 24px; }
.spk-who { font: 700 11px var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--lp-gold); }
.spk-body h3 { margin-top: 8px; font-size: 20px; color: var(--ink); }
.spk-body p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); }
@media (hover: hover) { .spk-card:hover { box-shadow: 0 0 0 1px var(--lp-gold); } .spk-card:hover .spk-photo { transform: scale(1.05); } }
@media (max-width: 1100px) { .spk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .spk-grid { grid-template-columns: minmax(0, 1fr); } }
.sem-open { position: relative; overflow: hidden; isolation: isolate; padding: 110px 0; color: #fff; background: #070707; }
.sem-open-photo { position: absolute; inset: -12px; z-index: -2; background: var(--photo) center / cover no-repeat; filter: blur(3px); }
.sem-open-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,8,8,0.92), rgba(8,8,8,0.72)); }
.sem-open-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
.sem-stamp { display: inline-block; padding: 10px 18px; transform: rotate(-4deg); font: 800 italic 22px var(--font-head); letter-spacing: 0.02em; text-transform: uppercase; color: var(--lp-ink); background: linear-gradient(120deg, #f0dcab, #c9a24a); border-radius: 8px; box-shadow: 0 14px 30px rgba(0,0,0,0.4); }
.sem-open-copy h2 { margin-top: 22px; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.1; color: #fff; }
.sem-open-copy p { margin-top: 14px; color: rgba(245,243,238,0.78); font-size: 16.5px; line-height: 1.7; }
.sem-gains { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; }
.sem-gains li { display: grid; gap: 12px; padding: 22px 18px; border-radius: 20px; background: rgba(255,255,255,0.06); border: 1px solid rgba(201,162,74,0.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sg-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--lp-gold); color: var(--lp-gold); }
.sg-ic svg { width: 22px; height: 22px; }
.sem-gains b { font: 600 16px/1.3 var(--font-head); color: #fff; }
@media (max-width: 900px) { .sem-open-grid { grid-template-columns: minmax(0, 1fr); text-align: center; } }
@media (max-width: 420px) { .sem-gains { grid-template-columns: minmax(0, 1fr); } }
.sem-rsvp-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 60px; align-items: start; }
.sem-flyer { margin: 0; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -40px rgba(0,0,0,0.85), 0 0 0 1px rgba(201,162,74,0.3); }
.sem-flyer img { width: 100%; height: auto; display: block; }
.sem-flyer figcaption { padding: 12px; text-align: center; background: #141414; }
.sem-flyer figcaption a { display: inline-flex; align-items: center; gap: 8px; color: var(--lp-gold); font-weight: 700; font-size: 14px; }
.sem-flyer figcaption svg { width: 16px; height: 16px; }
.sem-form-wrap h2 { margin-top: 14px; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; }
.sem-form-wrap > p { margin-top: 12px; color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
.sem-form { margin-top: 22px; }
.sem-alt { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; font-size: 14px; }
.sem-alt a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.sem-alt svg { width: 16px; height: 16px; color: var(--lp-gold); }
@media (hover: hover) { .sem-alt a:hover { color: var(--lp-gold); } }
@media (max-width: 900px) { .sem-rsvp-grid { grid-template-columns: minmax(0, 1fr); } .sem-flyer { max-width: 420px; justify-self: center; } }
.sem-ask-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.sem-ask-photo { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 5 / 4; }
.sem-ask-photo img { width: 100%; height: 100%; object-fit: cover; }
.sem-ask-grid h2 { margin-top: 14px; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.08; }
.sem-ask-grid p { margin-top: 14px; color: var(--ink-soft); font-size: 16.5px; line-height: 1.7; }
.sem-ask-grid .hero-actions { margin-top: 24px; }
@media (max-width: 900px) { .sem-ask-grid { grid-template-columns: minmax(0, 1fr); text-align: center; } .sem-ask-grid .hero-actions { justify-content: center !important; } }

/* ---- Area index tips ---- */
.area-tips { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 auto; padding: 0; max-width: 960px; }
.area-tips li { display: flex; align-items: flex-start; gap: 14px; padding: 20px; border-radius: 18px; background: var(--bg-card, #141414); box-shadow: 0 0 0 1px var(--border); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.area-tips svg { width: 22px; height: 22px; color: var(--lp-gold); flex: none; }
.area-note.center { text-align: center; max-width: 760px; margin: 26px auto 0; }
@media (max-width: 700px) { .area-tips { grid-template-columns: minmax(0, 1fr); } }

/* ---- Chat button: same spot always; fades + lets taps through over a button or headline ---- */
.cw { transition: opacity 0.3s ease; }
.cw.cw-faded:not(.open) { opacity: 0.18; pointer-events: none; }
.cw.cw-faded:not(.open) .cw-launcher { pointer-events: none; }

/* ---- Mobile nav: the Let's Talk button lives in the sheet on phones ---- */
.site-nav__links > .nav-mobile-cta { display: none; }
@media (max-width: 640px) { .site-nav__pill.is-mobile-open .site-nav__links > .nav-mobile-cta { display: block; padding: 8px 4px 2px; } .nav-mobile-cta .btn { width: 100%; justify-content: center; } }

/* ==========================================================================
   LIGHT THEME (the header's sun button) — warm ivory sections; photo bands,
   the compass, reviews, seminar and the funnel card stay black.
   ========================================================================== */
html[data-theme="light"] .tm-card, html[data-theme="light"] .tm-mini, html[data-theme="light"] .tm-value, html[data-theme="light"] .spk-card, html[data-theme="light"] .idx-card, html[data-theme="light"] .idx-state, html[data-theme="light"] .area-tips li { background: #fff; }
html[data-theme="light"] .idx-quick a { color: var(--lp-ink); }
html[data-theme="light"] .pc-sub { color: #f0dcab !important; }

/* ---- Seminar motto on phones: a tidy 2 x 2, no orphan dots ---- */
@media (max-width: 600px) {
  .sem-motto { display: grid !important; grid-template-columns: repeat(2, auto); justify-content: center; gap: 10px 22px !important; font-size: 11.5px !important; letter-spacing: 0.16em !important; }
  .sem-motto i { display: none; }
  .sem-facts li { font-size: 13.5px; }
}

/* ---- SVG star rows (never emoji) ---- */
.hp-stars, .rvx-score-stars { display: inline-flex; gap: 2px; color: var(--lp-gold); }
.hp-stars svg, .rvx-score-stars svg { width: 13px !important; height: 13px !important; fill: currentColor; stroke: currentColor; }

/* ---- Very small phones (320–380): long button labels wrap inside the pill instead of overflowing ---- */
@media (max-width: 380px) {
  .btn { white-space: normal; text-align: center; line-height: 1.25; }
  .btn-lg { padding-left: 20px; padding-right: 20px; font-size: 15px; }
  .mc-cta .btn { width: 100%; justify-content: center; }
}

/* ---- Team seats not confirmed yet: quiet cards, no link ---- */
.tm-card.is-pending { cursor: default; }
.tm-card.is-pending .tm-name { color: var(--ink-soft); font-size: 16px; }
.tm-go.is-muted { color: var(--ink-faint); }
.tm-mini.is-pending { grid-template-columns: 56px 1fr; opacity: 0.8; }
@media (hover: hover) { .tm-card.is-pending:hover { box-shadow: 0 0 0 1px var(--border), 0 30px 60px -44px rgba(0,0,0,0.8); } .tm-card.is-pending:hover .tm-shine { background-position: 130% 0; } .tm-mini.is-pending:hover { box-shadow: 0 0 0 1px var(--border); transform: none; } }

/* ---- The flyer was printed with the first date: a ribbon carries the new one ---- */
.sem-flyer { position: relative; }
.sem-flyer-new { position: absolute; z-index: 2; left: 36%; top: 36.5%; transform: translate(-50%, -50%) rotate(-5deg); display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; white-space: nowrap;
  font: 800 15px/1.1 var(--font-head); color: var(--lp-ink); background: linear-gradient(120deg, #f0dcab, #c9a24a); box-shadow: 0 14px 30px rgba(0,0,0,0.45), 0 0 0 3px rgba(12,12,12,0.85); }
.sem-flyer-new svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 420px) { .sem-flyer-new { font-size: 13px; padding: 8px 12px; } }
.rvx-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---- Calendar loading card: long button labels wrap instead of overflowing ---- */
.cal-ph-overlay .btn { white-space: normal; text-align: center; line-height: 1.25; min-height: 46px; height: auto; padding-top: 12px; padding-bottom: 12px; }

/* ---- Phone menu: the Let's Talk button keeps its gold fill (menu link styles were painting it dark) ---- */
.site-nav .site-nav__links > li.nav-mobile-cta > a.btn, .site-nav .site-nav__pill.is-mobile-open .site-nav__links > li.nav-mobile-cta > a.btn {
  background: linear-gradient(120deg, #e2c47e, #c9a24a 55%, #b48d3a); color: #0c0c0c; border: 0; justify-content: center; padding: 15px 20px; border-radius: 999px; font-weight: 700;
}

/* ==========================================================================
   HOMEBUYER SEMINAR POP-UP (assets/js/seminar-popup.js) — DDLA's early-bird
   behaviour, three looks (tmack 10-29, like Nina's / Access Mortgage): .sp-style-1 Photo
   Card, .sp-style-2 Admission Ticket, .sp-style-3 Slide-in corner card.
   Closed = visibility hidden + inert (standing rule); phones = bottom sheet.
   ========================================================================== */
.sp { position: fixed; inset: 0; z-index: 650; display: grid; place-items: center; padding: 20px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.35s ease, visibility 0s linear 0.35s; }
.sp.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 0.35s ease; }
.sp-backdrop { position: absolute; inset: 0; background: rgba(5,5,5,0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sp-card { position: relative; width: min(500px, 100%); max-height: calc(100svh - 40px); overflow-y: auto; overscroll-behavior: contain; border-radius: 26px; color: #fff; background: #111; box-shadow: 0 50px 100px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(201,162,74,0.35); transform: translateY(26px) scale(0.97); transition: transform 0.55s cubic-bezier(.22,1,.36,1); outline: none; }
.sp.is-open .sp-card { transform: none; }
body.sp-open .cw { visibility: hidden; }
.sp-x { position: absolute; top: 12px; right: 12px; z-index: 5; width: 40px; height: 40px; min-width: 40px; padding: 0; border: 1px solid rgba(255,255,255,0.22); border-radius: 50%; background: rgba(12,12,12,0.55); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background 0.2s ease, transform 0.3s ease; }
.sp-x svg { width: 18px; height: 18px; flex: none; }
@media (hover: hover) { .sp-x:hover { background: rgba(201,162,74,0.3); transform: rotate(90deg); } }
.sp-mark { width: 54px; height: 54px; object-fit: contain; display: block; }
.sp-badge { display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px; font: 800 11.5px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: #0c0c0c; background: linear-gradient(120deg, #f0dcab, #c9a24a); }
.sp-ed { display: block; margin-top: 14px; font: 700 12px var(--font-body); letter-spacing: 0.28em; text-transform: uppercase; color: #e2c47e; }
.sp h2 { margin: 6px 0 0; font-family: var(--font-head); font-weight: 600; font-size: clamp(32px, 6vw, 42px); line-height: 1; letter-spacing: -0.03em; color: #fff; }
.sp h2 em { font-style: normal; background: linear-gradient(115deg, #f0dcab, #c9a24a 55%, #e2c47e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-meta { display: grid; gap: 7px; margin: 14px 0 0; font-size: 14px; color: rgba(245,243,238,0.86); }
.sp-meta-row { display: flex; align-items: flex-start; gap: 9px; }
.sp-meta-row svg { width: 17px; height: 17px; color: #c9a24a; flex: none; margin-top: 1px; }
.sp-lead { margin: 14px 0 0; font-size: 14.5px; line-height: 1.6; color: rgba(245,243,238,0.74); }
.sp-count { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.sp-count > div { padding: 12px 6px 10px; border-radius: 14px; text-align: center; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,243,238,0.6); background: rgba(255,255,255,0.05); border: 1px solid rgba(201,162,74,0.3); }
.sp-count b { display: block; margin-bottom: 4px; font: 600 30px/1 var(--font-head); letter-spacing: 0; color: #fff; font-variant-numeric: tabular-nums; }
.sp-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.sp-form > * { grid-column: 1 / -1; }
.sp-form > .sp-f:nth-of-type(1), .sp-form > .sp-f:nth-of-type(2) { grid-column: auto; }
.sp-f { display: grid; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(245,243,238,0.6); }
.sp-f input, .sp-f select { width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #fff; font: 500 16px var(--font-body); letter-spacing: 0; text-transform: none; -webkit-appearance: none; appearance: none; }
.sp-f select { background-image: linear-gradient(45deg, transparent 50%, #c9a24a 50%), linear-gradient(135deg, #c9a24a 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.sp-f select option { background: #141414; color: #f5f3ee; }
.sp-f input:focus, .sp-f select:focus { outline: none; border-color: #c9a24a; box-shadow: 0 0 0 3px rgba(201,162,74,0.22); }
.sp-f input[aria-invalid="true"] { border-color: #e07a6a; }
.sp-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(224,122,106,0.14); color: #f3b3a8; font-size: 13.5px; font-weight: 600; }
.sp-error[hidden] { display: none; }
.sp-go { width: 100%; justify-content: center; margin-top: 4px; }
.sp-go svg, .sp-mail svg, .sp-done-row svg { width: 17px; height: 17px; flex: none; }
.sp-mail { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 6px; border: 0; background: none; color: #e2c47e; font: 600 13.5px var(--font-body); cursor: pointer; }
.sp-fine { margin: 0; font-size: 11.5px; line-height: 1.5; color: rgba(245,243,238,0.5); text-align: center; }
.sp-fine a { color: inherit; text-decoration: underline; }
.sp-skip { display: block; margin: 10px auto 0; padding: 8px 12px; border: 0; background: none; font: 600 13px var(--font-body); color: rgba(245,243,238,0.55); text-decoration: underline; cursor: pointer; }
.sp-done { margin-top: 18px; padding: 18px; border-radius: 16px; text-align: center; background: rgba(201,162,74,0.1); border: 1px solid rgba(201,162,74,0.35); }
.sp-done b { display: block; font: 600 22px var(--font-head); color: #fff; }
.sp-done p { margin: 6px 0 14px; font-size: 14px; color: rgba(245,243,238,0.8); }
.sp-done-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sp-done-row .btn { flex: 1 1 160px; justify-content: center; }
.sp .btn-outline { color: #fff; border-color: rgba(245,243,238,0.6); background: rgba(255,255,255,0.04); }

/* ---- 1 · PHOTO CARD: the family photo left (badge + countdown on it), details + RSVP right ---- */
.sp-style-1 .sp-card { width: min(900px, 100%); display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); background: linear-gradient(160deg, #15140f, #0b0b0b 60%); }
.sp-style-1 .sp-pic { position: relative; min-height: 100%; overflow: hidden; }
.sp-style-1 .sp-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.06); transition: transform 6s ease-out; }
.sp-style-1.is-open .sp-photo { transform: scale(1); }
.sp-style-1 .sp-pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,8,0.25) 0%, rgba(8,8,8,0) 30%, rgba(8,8,8,0.15) 55%, rgba(8,8,8,0.88) 100%), linear-gradient(90deg, rgba(8,8,8,0) 70%, rgba(11,11,11,0.9)); }
.sp-style-1 .sp-pic .sp-badge { position: absolute; left: 20px; top: 20px; z-index: 2; }
.sp-style-1 .sp-pic .sp-count { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; margin: 0; }
.sp-style-1 .sp-pic .sp-count > div { background: rgba(10,10,10,0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sp-style-1 .sp-body { padding: 30px 28px 20px; }
.sp-style-1 .sp-ed { margin-top: 0; }

/* ---- 2 · ADMISSION TICKET: notches at the tear line, the RSVP on the main part, a perforated gold stub ---- */
.sp-style-2 .sp-card { width: min(820px, 100%); background: none; box-shadow: none; }
.sp-style-2 .sp-tix { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 188px; filter: drop-shadow(0 40px 60px rgba(0,0,0,0.65));
  -webkit-mask: radial-gradient(circle 15px at calc(100% - 188px) 0, transparent 14.5px, #000 15px) top / 100% 51% no-repeat, radial-gradient(circle 15px at calc(100% - 188px) 100%, transparent 14.5px, #000 15px) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 15px at calc(100% - 188px) 0, transparent 14.5px, #000 15px) top / 100% 51% no-repeat, radial-gradient(circle 15px at calc(100% - 188px) 100%, transparent 14.5px, #000 15px) bottom / 100% 51% no-repeat; }
.sp-style-2 .sp-tix .sp-body { position: relative; padding: 28px 30px 20px; border-radius: 22px 0 0 22px; overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 100% 0%, rgba(201,162,74,0.22), rgba(201,162,74,0) 60%), linear-gradient(160deg, #1a1812, #0c0c0c 65%); border: 1px solid rgba(201,162,74,0.4); border-right: 0; }
.sp-style-2 .sp-tix .sp-body::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(201,162,74,0.035) 0 2px, transparent 2px 14px); }
.sp-style-2 .sp-tix .sp-body > * { position: relative; }
.sp-stub2 .sp-mark { width: 46px; height: 46px; margin-bottom: 14px; filter: brightness(0.2) sepia(1) saturate(0.6); }
.sp-style-2 .sp-ed { margin-top: 12px; }
.sp-style-2 .sp-count { margin-top: 14px; }
.sp-style-2 .sp-count b { font-size: 26px; }
.sp-stub2 { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 26px 14px; text-align: center; color: #0c0c0c; border-radius: 0 22px 22px 0;
  background: linear-gradient(160deg, #f3dfa8, #c9a24a 55%, #a87f30); }
.sp-stub2::before { content: ''; position: absolute; left: -1px; top: 18px; bottom: 18px; border-left: 3px dotted rgba(12,12,12,0.55); }
.sp-admit { font: 800 11px var(--font-body); letter-spacing: 0.3em; text-transform: uppercase; }
.sp-mon { margin-top: 14px; font: 700 22px/1 var(--font-head); letter-spacing: 0.2em; }
.sp-day { font: 700 92px/0.9 var(--font-head); letter-spacing: -0.04em; }
.sp-time { margin-top: 6px; font: 700 16px var(--font-head); }
.sp-no { margin-top: 18px; font: 600 10.5px var(--font-body); letter-spacing: 0.2em; opacity: 0.7; }
.sp-free { margin-top: 10px; padding: 6px 10px; border-radius: 999px; border: 1.5px solid rgba(12,12,12,0.7); font: 800 10px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; transform: rotate(-6deg); }
.sp-style-2 .sp-x { right: 200px; }
.sp-style-2.is-open .sp-stub2 { animation: sp-tear 0.9s cubic-bezier(.34,1.56,.64,1) 0.35s both; }
@keyframes sp-tear { from { transform: translateX(26px) rotate(4deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- 3 · SLIDE-IN: a small card in the bottom-left corner — the page stays usable behind it ---- */
.sp.sp-style-3 { inset: auto auto 24px 24px; width: min(370px, calc(100vw - 48px)); padding: 0; display: block; }
.sp-style-3 .sp-card { width: 100%; max-height: calc(100svh - 48px); border-radius: 22px; background: #111; transform: translateY(40px); opacity: 0; transition: transform 0.6s cubic-bezier(.22,1,.36,1), opacity 0.4s ease; }
.sp-style-3.is-open .sp-card { transform: none; opacity: 1; }
.sp-style-3 .sp-x { width: 34px; height: 34px; min-width: 34px; top: 10px; right: 10px; }
.sp-mini { position: relative; padding: 18px 18px 16px; min-height: 170px; display: flex; align-items: flex-end; overflow: hidden; }
.sp-mini .sp-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.sp-mini::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,8,0.15), rgba(8,8,8,0.55) 45%, rgba(17,17,17,0.97)); }
.sp-mini-top { position: relative; z-index: 1; }
.sp-style-3 .sp-ed { margin-top: 10px; font-size: 11px; }
.sp-style-3 h2 { font-size: 30px; }
.sp-style-3 .sp-meta { font-size: 13px; gap: 5px; margin-top: 10px; }
.sp-style-3 .sp-body { padding: 0 18px 16px; }
.sp-style-3 .sp-count { margin-top: 4px; gap: 8px; }
.sp-style-3 .sp-count > div { padding: 9px 4px 8px; }
.sp-style-3 .sp-count b { font-size: 22px; }
.sp-mini-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; margin-top: 12px; }
.sp-mini-actions .btn { justify-content: center; padding-left: 10px; padding-right: 10px; }
.sp-mini-form { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.55s cubic-bezier(.22,1,.36,1); }
.sp-mini-form > * { overflow: hidden; min-height: 0; }
.sp-style-3.is-expanded .sp-mini-form { grid-template-rows: 1fr; }
.sp-style-3.is-expanded .sp-mini-actions { display: none; }
.sp-style-3 .sp-form { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
.sp-style-3 .sp-form > .sp-f:nth-of-type(1), .sp-style-3 .sp-form > .sp-f:nth-of-type(2) { grid-column: 1 / -1; }
.sp-style-3 .sp-skip { display: none; }

/* ---- phones: designs 1 and 2 become a bottom sheet; the slide-in sits just above the bottom edge ---- */
@media (max-width: 640px) {
  .sp:not(.sp-style-3) { place-items: end center; padding: 0; }
  .sp-style-1 .sp-card, .sp-style-2 .sp-card { width: 100%; border-radius: 24px 24px 0 0; max-height: 92svh; transform: translateY(60px); }
  .sp-style-1 .sp-card { grid-template-columns: minmax(0, 1fr); }
  .sp-style-1 .sp-card { display: flex; flex-direction: column; }
  .sp-style-1 .sp-pic, .sp-style-1 .sp-body { flex: none; }
  .sp-style-1 .sp-pic { overflow: visible; height: auto; min-height: 0; display: flex; flex-direction: column; }
  .sp-style-1 .sp-photo { flex: none; }
  .sp-style-1 .sp-pic::after { display: none; }
  .sp-style-1 .sp-photo { position: relative; inset: auto; height: 240px; object-position: 50% 42%; border-radius: 24px 24px 0 0; transform: none !important; }
  .sp-style-1 .sp-pic .sp-count { position: static; margin: 14px 20px 0; }
  .sp-style-1 .sp-pic .sp-count > div { background: rgba(255,255,255,0.05); }
  .sp-style-1 .sp-pic::after { background: linear-gradient(180deg, rgba(8,8,8,0.2), rgba(8,8,8,0) 30%, rgba(17,17,17,0.95)); }
  .sp-style-1 .sp-body { padding: 18px 20px 18px; }
  .sp-style-2 .sp-tix { grid-template-columns: minmax(0, 1fr); -webkit-mask: none; mask: none; filter: none; }
  .sp-style-2 .sp-tix .sp-body { border-radius: 0; border-right: 1px solid rgba(201,162,74,0.4); border-bottom: 0; padding: 22px 20px 16px; }
  .sp-stub2 { order: -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 16px 60px 14px 20px; border-radius: 24px 24px 0 0; justify-content: flex-start; }
  .sp-stub2::before { display: none; }
  .sp-mon, .sp-day, .sp-time { margin: 0; font-size: 20px; letter-spacing: 0.04em; } .sp-no { display: none; } .sp-free { margin: 0; transform: none; }
  .sp-style-2 .sp-x { right: 12px; }
  .sp-stub2 .sp-mark { display: none; }
  .sp.sp-style-3 { left: 12px; bottom: 12px; width: calc(100vw - 24px); }
  .sp-form { grid-template-columns: minmax(0, 1fr); }
  .sp-form > .sp-f:nth-of-type(1), .sp-form > .sp-f:nth-of-type(2) { grid-column: 1 / -1; }
  .sp h2 { font-size: 32px; } .sp-style-3 h2 { font-size: 28px; }
}
@media (max-height: 700px) and (min-width: 641px) { .sp-lead { display: none; } .sp-count { margin-top: 12px; } }
@media (prefers-reduced-motion: reduce) { .sp, .sp-card, .sp-photo, .sp-mini-form { transition: none; } .sp-style-2.is-open .sp-stub2 { animation: none; } }

/* ---- SMOOTH ON PHONES (tmack 10-30: "the pop-up lags on mobile") ---- */
/* While it is open, everything behind it holds still (hero zoom, sparkles, counters, marquees) — a phone
   was re-painting the whole page under the veil every frame. seminar-popup.js tags only the elements that
   are animating (a page-wide selector cost 400 ms of restyle on a phone); all carry on from the same spot. */
.sp-hold, .sp-hold::before, .sp-hold::after { animation-play-state: paused !important; }
/* Phones/tablets: a solid veil instead of the full-screen blur, and no blur behind the countdown boxes. */
@media (max-width: 640px), (hover: none) {
  .sp-backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(5,5,5,0.8); }
  .sp-style-1 .sp-pic .sp-count > div { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sp-card { box-shadow: 0 0 0 1px rgba(201,162,74,0.35); }
}

/* ==========================================================================
   ROUND 2 (client 2026-10-29) — hero fix, four service cards, team
   coverflow + lineup, community explorer, calculators, service / about /
   consulting / careers pages, two new funnels, five-column footer.
   ========================================================================== */

/* ---- Hero: homes only, framed wider (no zoom-in), dark only toward the bottom, no gold streak ---- */
.hs-slide { inset: -8px; transform: none; filter: blur(1.4px) saturate(1.05); background-position: center 58%; }
.hs-slide.is-on { animation: lp-kb2 10s ease-out forwards; }
@keyframes lp-kb2 { from { transform: scale(1); } to { transform: scale(1.035); } }
.lp-hero2 .hero-veil { background:
  linear-gradient(180deg, rgba(8,8,8,0.22) 0%, rgba(8,8,8,0.04) 18%, rgba(8,8,8,0.06) 46%, rgba(8,8,8,0.5) 74%, rgba(8,8,8,0.9) 100%); }
.lp-hero2 h1 { text-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 10px 40px rgba(0,0,0,0.45); }
/* gold words are see-through text: an inherited text-shadow shows THROUGH them (muddy on a bright sky) — shadow behind instead */
.lp-hero2 h1 .accent-text { text-shadow: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)) drop-shadow(0 8px 26px rgba(0,0,0,0.4)); }
.lp-hero2 .lede { text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 4px 20px rgba(0,0,0,0.45); color: #fff; }
.lp-hero2 .lp-sweep { display: none; }
@media (prefers-reduced-motion: reduce) { .hs-slide.is-on { animation: none; } }

/* ---- What we do: four cards, one row ---- */
.svc4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.svc4 .pcard { min-height: 400px; --pc-pad: 24px; }
.svc4 h3 { font-size: clamp(20px, 1.6vw, 24px); }
@media (max-width: 1100px) { .svc4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .svc4 { grid-template-columns: minmax(0, 1fr); } .svc4 .pcard { min-height: 320px; } }

/* ---- Get in touch: no headline / subheadline now ---- */
.git-section .contact-cta-copy .git-tiles { margin-top: 18px; }

/* ==========================================================================
   TEAM COVERFLOW (home)
   ========================================================================== */
.tmc { position: relative; margin-top: 10px; padding: 10px 0 0; overflow: hidden; }
.tmc-stage { position: relative; height: clamp(440px, 46vw, 560px); isolation: isolate; user-select: none; -webkit-user-select: none; }
.tmc-card { position: absolute; left: 50%; top: 10px; width: clamp(250px, 26vw, 340px); aspect-ratio: 3 / 4.25; margin-left: calc(clamp(250px, 26vw, 340px) / -2); border-radius: 26px; overflow: hidden; display: block; color: #fff; background: #0e0e0e;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9), 0 0 0 1px rgba(201,162,74,0.22);
  transition: box-shadow 0.4s ease; will-change: transform; -webkit-user-drag: none; }
/* each card carries its own perspective() (set by script.js); side cards are dimmed by this layer, never a filter */
.tmc-card::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #000; opacity: var(--dim, 0); pointer-events: none; }
.tmc-card.is-center { box-shadow: 0 50px 90px -40px rgba(0,0,0,0.95), 0 0 0 1.5px rgba(201,162,74,0.65); }
.tmc-photo { position: absolute; inset: 0; }
.tmc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.tmc-photo .tm-mono { position: absolute; inset: 0; }
.tmc-plate { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 3px; padding: 14px 16px; border-radius: 16px; background: rgba(10,10,10,0.72); border: 1px solid rgba(201,162,74,0.32); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tmc-role { font: 700 10.5px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-gold); }
.tmc-plate b { font: 600 19px var(--font-head); color: #fff; letter-spacing: -0.01em; }
.tmc-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; font-weight: 700; color: rgba(245,243,238,0.7); }
.tmc-go svg { width: 12px; height: 12px; }
.tmc-card.is-center .tmc-go { color: #f0dcab; }
.tmc-join .tm-mono b { display: none; }
.tmc-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 8px; position: relative; z-index: 6; }
.tmc-prev svg { transform: rotate(180deg); }
.tmc-dots { display: flex; gap: 6px; }
.tmc-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(201,162,74,0.3); transition: width 0.3s ease, background 0.3s ease; }
.tmc-dots i.on { width: 22px; border-radius: 4px; background: var(--lp-gold); }
@media (hover: hover) { .tmc-card.is-center:hover { box-shadow: 0 50px 90px -40px rgba(0,0,0,0.95), 0 0 0 2px rgba(240,220,171,0.9), 0 0 40px -6px rgba(201,162,74,0.45); } }
@media (max-width: 640px) {
  .tmc-stage { height: 470px; }
  .tmc-card { width: 250px; margin-left: -125px; }
    }
@media (prefers-reduced-motion: reduce) { .tmc-card { transition: none; } }
/* photo fades in once decoded; the tiny preview (built into the page) shows behind it until then */
.tmc-photo { background-size: cover; background-position: var(--pv-pos, 50% 18%); }
.tmc.is-enhanced .tmc-card:not(.tmc-join) .tmc-photo img { opacity: 0; transition: opacity 0.45s ease; }
.tmc.is-enhanced .tmc-card.is-ready .tmc-photo img { opacity: 1; }
.tmc-photo img { -webkit-user-drag: none; }

/* ==========================================================================
   TEAM LINEUP (/team) — matching cards in a row, like JD / City Capital
   ========================================================================== */
.tml-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.tml-card { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--bg-card, #141414); box-shadow: 0 0 0 1px var(--border), 0 30px 60px -44px rgba(0,0,0,0.8); transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(.22,1,.36,1); }
@media (hover: hover) { .tml-card:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px var(--lp-gold), 0 34px 70px -40px rgba(0,0,0,0.9); } .tml-card:hover .tml-photo img { transform: scale(1.04); } }
.tml-photo { position: relative; display: block; aspect-ratio: 4 / 4.6; overflow: hidden; background: #0e0e0e; }
.tml-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform 1s cubic-bezier(.22,1,.36,1); }
.tml-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px; flex: 1; }
.tml-role { font: 700 11px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-gold); }
.tml-body h3 { font-size: 20px; line-height: 1.2; } .tml-body h3 a { color: var(--ink); }
.tml-lic { font-size: 12.5px; color: var(--ink-muted); }
.tml-body .btn { margin-top: auto; padding-top: 12px; padding-bottom: 12px; }
.tml-body .btn-block { margin-top: 14px; }
.tml-join-ph { display: grid; place-items: center; align-content: center; gap: 14px; background: radial-gradient(circle at 50% 40%, #1d1a12, #0b0b0b 70%); text-align: center; padding: 20px; }
.tml-join-ph img { position: static; width: 84px; height: 84px; object-fit: contain; opacity: 0.85; }
.tml-join-ph b { font: 600 20px var(--font-head); color: #f0dcab; }
@media (max-width: 1100px) { .tml-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tml-grid { grid-template-columns: minmax(0, 1fr); max-width: 380px; margin: 0 auto; } }

/* ==========================================================================
   COMMUNITY EXPLORER (/communities) — numbered rows + one sticky photo card
   ========================================================================== */
.cx { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 44px; align-items: start; }
.cx-list { display: grid; }
.cx-row { display: grid; grid-template-columns: 48px 1fr 36px; gap: 14px; align-items: center; padding: 18px 16px; border-bottom: 1px solid var(--border); border-radius: 14px; color: var(--ink); transition: background 0.3s ease, transform 0.3s ease; }
.cx-num { font: 600 15px var(--font-head); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.cx-text b { display: block; font: 600 clamp(20px, 2vw, 26px)/1.15 var(--font-head); letter-spacing: -0.01em; transition: color 0.3s ease; }
.cx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; font-size: 13.5px; color: var(--ink-muted); }
.cx-chip { display: inline-flex; padding: 4px 9px; border-radius: 999px; font: 700 10.5px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-gold); background: rgba(201,162,74,0.12); border: 1px solid rgba(201,162,74,0.3); }
.cx-go { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-faint); border: 1px solid var(--border); transition: all 0.3s ease; }
.cx-go svg { width: 15px; height: 15px; }
.cx-row.is-on { background: rgba(201,162,74,0.08); }
.cx-row.is-on .cx-num, .cx-row.is-on .cx-text b { color: var(--lp-gold); }
.cx-row.is-on .cx-go { background: var(--lp-gold); color: var(--lp-ink); border-color: var(--lp-gold); }
.cx-stage { position: sticky; top: 100px; aspect-ratio: 4 / 4.6; border-radius: 26px; overflow: hidden; background: #0e0e0e; box-shadow: 0 40px 80px -40px rgba(0,0,0,0.85), 0 0 0 1px rgba(201,162,74,0.25); }
.cx-card { position: absolute; inset: 0; color: #fff; opacity: 0; visibility: hidden; transform: scale(1.04); transition: opacity 0.55s ease, transform 0.9s cubic-bezier(.22,1,.36,1), visibility 0s linear 0.55s; }
.cx-card.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.55s ease, transform 0.9s cubic-bezier(.22,1,.36,1), visibility 0s; }
.cx-card img { width: 100%; height: 100%; object-fit: cover; }
.cx-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,8,0) 40%, rgba(8,8,8,0.88) 100%); }
.cx-card-in { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2; display: grid; gap: 8px; justify-items: start; }
.cx-card-in b { font: 600 clamp(28px, 2.8vw, 38px)/1.05 var(--font-head); }
.cx-card-in > span:not(.cx-chip):not(.btn) { color: rgba(245,243,238,0.82); font-size: 15px; }
.cx-card-btn { margin-top: 8px; }
.cx-card-btn svg { width: 14px; height: 14px; }
@media (max-width: 900px) { .cx { grid-template-columns: minmax(0, 1fr); } .cx-stage { display: none; } .cx-row { padding: 16px 8px; } }

/* ==========================================================================
   CALCULATORS — hub cards, solo result, links between calculators
   ========================================================================== */
.ch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ch-card { display: grid; gap: 10px; align-content: start; padding: 30px 28px 26px; border-radius: 24px; color: var(--ink); background: var(--bg-card, #141414); box-shadow: 0 0 0 1px var(--border), 0 30px 60px -44px rgba(0,0,0,0.8); transition: box-shadow 0.35s ease; }
@media (hover: hover) { .ch-card:hover { box-shadow: 0 0 0 1px var(--lp-gold), 0 34px 70px -40px rgba(0,0,0,0.9); } .ch-card:hover .ch-go svg { transform: translate(3px, -3px); } }
.ch-ic { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: var(--lp-ink); background: linear-gradient(135deg, #f0dcab, #c9a24a); }
.ch-ic svg { width: 26px; height: 26px; }
.ch-card b { margin-top: 8px; font: 600 22px/1.2 var(--font-head); }
.ch-q { color: var(--ink-muted); font-size: 15px; line-height: 1.5; }
.ch-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--lp-gold); }
.ch-go svg { width: 14px; height: 14px; transition: transform 0.3s ease; }
.mc-disclaimer.center { text-align: center; max-width: 760px; margin: 28px auto 0; }
.mc-total-solo { text-align: left; }
.mc-total-solo b { font-size: clamp(40px, 4.4vw, 56px) !important; }
#rfSave.is-up { color: #f3b3a8; }
.calc-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 30px; }
.calc-more > span { width: 100%; text-align: center; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; }
@media (max-width: 900px) { .ch-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; } }

/* ==========================================================================
   SERVICE PAGES (buying / selling / first-time / consulting)
   ========================================================================== */
.sv-steps { list-style: none; counter-reset: sv; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; }
.sv-steps li { counter-increment: sv; position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; padding: 24px 22px; border-radius: 22px; background: var(--bg-card, #141414); box-shadow: 0 0 0 1px var(--border); transition: box-shadow 0.35s ease, transform 0.35s ease; }
.sv-steps li::after { content: counter(sv, decimal-leading-zero); position: absolute; right: 18px; top: 14px; font: 600 34px/1 var(--font-head); color: rgba(201,162,74,0.16); }
@media (hover: hover) { .sv-steps li:hover { box-shadow: 0 0 0 1px var(--lp-gold); transform: translateY(-4px); } }
.sv-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--lp-gold); background: rgba(201,162,74,0.12); border: 1px solid rgba(201,162,74,0.3); }
.sv-ic svg { width: 23px; height: 23px; }
.sv-steps b { display: block; font: 600 19px/1.25 var(--font-head); color: var(--ink); padding-right: 36px; }
.sv-steps p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); }
@media (max-width: 1000px) { .sv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sv-steps { grid-template-columns: minmax(0, 1fr); } }
.sv-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.sv-split h2 { margin-top: 14px; font-size: clamp(28px, 3vw, 42px); line-height: 1.1; }
.sv-photo { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 5 / 4; box-shadow: 0 40px 80px -46px rgba(0,0,0,0.85); }
.sv-photo img { width: 100%; height: 100%; object-fit: cover; }
.sv-checks { list-style: none; display: grid; gap: 12px; margin: 22px 0 0; padding: 0; }
.sv-checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.sv-checks svg { width: 20px; height: 20px; color: var(--lp-gold); margin-top: 2px; }
.sv-note { margin-top: 18px; font-size: 13px; line-height: 1.6; color: var(--ink-faint); }
.sv-note a { color: var(--lp-gold); text-decoration: underline; }
@media (max-width: 900px) { .sv-split { grid-template-columns: minmax(0, 1fr); gap: 36px; } .sv-split-rev > div { order: 2; } }
.sv-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sv-why.sv-why-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sv-why article { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px; border-radius: 22px; background: var(--bg-card, #141414); box-shadow: 0 0 0 1px var(--border); }
.sv-why article > b { font: 600 18px/1.25 var(--font-head); color: var(--ink); }
.sv-why blockquote { margin: 0; flex: 1; font-size: 15px; line-height: 1.65; color: var(--ink-soft); font-style: italic; }
.sv-why article > p { flex: 1; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.sv-why article > span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--lp-gold); }
.sv-why article > span svg { width: 15px; height: 15px; }
@media (max-width: 1100px) { .sv-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sv-why, .sv-why.sv-why-3 { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 641px) and (max-width: 1100px) { .sv-why.sv-why-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sv-faq .faq-list { max-width: 820px; margin: 0 auto; }

/* consulting */
.cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cs-card { display: grid; gap: 10px; align-content: start; padding: 26px 24px; border-radius: 22px; background: var(--bg-card, #141414); box-shadow: 0 0 0 1px var(--border); transition: box-shadow 0.35s ease, transform 0.35s ease; }
@media (hover: hover) { .cs-card:hover { box-shadow: 0 0 0 1px var(--lp-gold); transform: translateY(-4px); } }
.cs-ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; color: var(--lp-gold); background: rgba(201,162,74,0.12); border: 1px solid rgba(201,162,74,0.3); }
.cs-ic svg { width: 22px; height: 22px; }
.cs-card b { margin-top: 4px; font: 600 19px/1.25 var(--font-head); color: var(--ink); }
.cs-card p { font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); }
@media (max-width: 1000px) { .cs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cs-grid { grid-template-columns: minmax(0, 1fr); } }
.cs-flow { list-style: none; counter-reset: cs; display: grid; gap: 0; margin: 22px 0 0; padding: 0; }
.cs-flow li { counter-increment: cs; position: relative; display: grid; gap: 4px; padding: 0 0 20px 46px; }
.cs-flow li::before { content: counter(cs); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--font-body); color: var(--lp-ink); background: linear-gradient(135deg, #f0dcab, #c9a24a); }
.cs-flow li:not(:last-child)::after { content: ''; position: absolute; left: 14px; top: 34px; bottom: 4px; width: 2px; background: rgba(201,162,74,0.3); }
.cs-flow b { font: 600 17px var(--font-head); color: var(--ink); }
.cs-flow span { font-size: 14.5px; line-height: 1.55; color: var(--ink-muted); }

/* careers */
.cr-team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cr-team article { display: grid; gap: 10px; align-content: start; padding: 26px 22px; border-radius: 22px; background: var(--bg-card, #141414); box-shadow: 0 0 0 1px var(--border); }
.cr-team b { margin-top: 4px; font: 600 19px var(--font-head); color: var(--ink); }
.cr-team p { font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); }
.cr-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cr-perks article { position: relative; overflow: hidden; display: grid; gap: 8px; align-content: start; padding: 26px 24px; border-radius: 22px; background: linear-gradient(160deg, rgba(201,162,74,0.1), rgba(201,162,74,0.02)); box-shadow: 0 0 0 1px rgba(201,162,74,0.28); }
.cr-tag { justify-self: start; padding: 5px 10px; border-radius: 999px; font: 700 10.5px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-ink); background: linear-gradient(120deg, #f0dcab, #c9a24a); }
.cr-perks b { margin-top: 6px; font: 600 19px var(--font-head); color: var(--ink); }
.cr-perks p { font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); }
@media (max-width: 1100px) { .cr-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cr-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cr-team, .cr-perks { grid-template-columns: minmax(0, 1fr); } }

/* about */
.ab-story-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 64px; align-items: center; }
.ab-story-photo { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 4.4; box-shadow: 0 40px 80px -46px rgba(0,0,0,0.85); }
.ab-story-photo img { width: 100%; height: 100%; object-fit: cover; }
.ab-story-copy h2 { margin-top: 14px; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; }
.ab-story-copy p { margin-top: 16px; color: var(--ink-soft); font-size: 16.5px; line-height: 1.75; }
.ab-story-copy .hero-actions { margin-top: 26px; }
@media (max-width: 900px) { .ab-story-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
.ab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ab-stat { padding: 24px 20px; border-radius: 20px; text-align: center; background: var(--bg-card, #141414); box-shadow: 0 0 0 1px rgba(201,162,74,0.25); }
.ab-stat b { display: block; font: 600 clamp(34px, 3.4vw, 46px)/1 var(--font-head); background: linear-gradient(180deg, #f0dcab, #c9a24a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-stat span { display: block; margin-top: 10px; font-size: 13.5px; color: var(--ink-muted); }
@media (max-width: 760px) { .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ab-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ab-value { padding: 26px 22px; border-radius: 22px; background: var(--bg-card, #141414); box-shadow: 0 0 0 1px var(--border); }
.ab-value-ic { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; color: var(--lp-gold); background: rgba(201,162,74,0.12); }
.ab-value-ic svg { width: 22px; height: 22px; }
.ab-value b { display: block; margin-top: 14px; font: 600 19px var(--font-head); color: var(--ink); }
.ab-value p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); }
@media (max-width: 1100px) { .ab-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ab-values { grid-template-columns: minmax(0, 1fr); } }
.ab-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ab-quotes figure { margin: 0; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px; border-radius: 22px; background: var(--bg-card, #141414); box-shadow: 0 0 0 1px var(--border); }
.ab-quotes blockquote { margin: 0; flex: 1; font-size: 15.5px; line-height: 1.65; font-style: italic; color: var(--ink-soft); }
.ab-quotes figcaption { font-size: 13px; font-weight: 700; color: var(--lp-gold); }
@media (max-width: 900px) { .ab-quotes { grid-template-columns: minmax(0, 1fr); } }

/* funnels: four goals = two columns */
.funnel-choices-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .funnel-choices-4 { grid-template-columns: minmax(0, 1fr); } }

/* footer: brand + four columns */
.footer-top { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 1100px) { .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* light theme: new cards on white */
html[data-theme="light"] :is(.tml-card, .cx-stage, .ch-card, .sv-steps li, .sv-why article, .cs-card, .cr-team article, .ab-stat, .ab-value, .ab-quotes figure) { background: #fff; }

/* the base stylesheet carries City Capital's older explorer with the same class names:
   keep ours self-contained (numbers stay visible on phones, no extra hover bar) */
.cx .cx-num { display: block !important; }
.cx .cx-row::before { display: none; }
.cx .cx-row:first-child { border-top: 0; }
@media (max-width: 640px) { .cx .cx-row { grid-template-columns: 34px minmax(0, 1fr) 32px; gap: 10px; } .cx .cx-go { width: 32px; height: 32px; } }

/* step numbers never collide with long titles */
.sv-steps b { padding-right: 52px; }
@media (max-width: 640px) { .sv-steps li::after { font-size: 26px; right: 14px; top: 12px; } .sv-steps li { grid-template-columns: 46px 1fr; padding: 22px 18px; } .sv-ic { width: 46px; height: 46px; } }

/* Contact Us stays in the header at every desktop width (client round 2); tighter links on small laptops */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-nav__links > li.nav-contact { display: list-item; }
  .site-nav__links > li > a, .site-nav__links > li > button { padding-left: 8px; padding-right: 8px; }
}
@media (min-width: 1024px) and (max-width: 1100px) { .site-nav__links { font-size: 11.5px; } .site-nav__links > li > a { padding-left: 7px; padding-right: 7px; } }

/* contact rows: h3 (was h4, heading order) keeps the small label size */
.contact-row h3 { font-size: 14.5px; margin-bottom: 4px; line-height: 1.3; }
@media (max-width: 640px), (hover: none) { .tmc-plate { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(10,10,10,0.86); } }

/* ==========================================================================
   ROUND 3 (client 2026-10-29) — one-photo hero without buttons, rolling
   odometer ratings + stats (Kortney's), the About stat cards, photo CTA
   cards on the four service pages, Get in Touch card height.
   ========================================================================== */

/* ---- Hero: no CTA buttons now — the search pill moves up under the lede ---- */
.lp-hero2 .lede + .lp-search { margin-top: 32px; }
/* the three photo options are bright (cream stucco, white walls, big sky): a soft dark oval behind the words keeps them readable, the rest of the photo stays clear */
.lp-hero2 .hero-veil { background:
  radial-gradient(ellipse 58% 44% at 50% 44%, rgba(8,8,8,0.36) 0%, rgba(8,8,8,0.18) 52%, rgba(8,8,8,0) 100%),
  linear-gradient(180deg, rgba(8,8,8,0.22) 0%, rgba(8,8,8,0.04) 18%, rgba(8,8,8,0.06) 46%, rgba(8,8,8,0.5) 74%, rgba(8,8,8,0.9) 100%); }
@media (max-width: 760px) { .lp-hero2 .hero-veil { background:
  radial-gradient(ellipse 90% 40% at 50% 46%, rgba(8,8,8,0.4) 0%, rgba(8,8,8,0.18) 55%, rgba(8,8,8,0) 100%),
  linear-gradient(180deg, rgba(8,8,8,0.22) 0%, rgba(8,8,8,0.04) 18%, rgba(8,8,8,0.06) 46%, rgba(8,8,8,0.5) 74%, rgba(8,8,8,0.9) 100%); } }

/* ==========================================================================
   ODOMETER — .odo[data-odo]; script.js builds the digit columns
   ========================================================================== */
.odo { display: inline-flex; font-variant-numeric: tabular-nums; }
.odo.is-rolling { --odo-h: 1.1em; height: var(--odo-h); line-height: var(--odo-h); overflow: hidden; }
.odo .odo-digits { display: inline-flex; }
.odo .odo-col { display: inline-block; height: var(--odo-h); overflow: hidden; }
.odo .odo-strip { display: block; will-change: transform; }
.odo .odo-strip > i { display: block; height: var(--odo-h); font-style: normal; text-align: center; }
.odo .odo-sep { display: inline-block; }

/* ---- Stars: dim until the first count, then fill one by one; each wave twinkles them ---- */
.lpr-stars { display: inline-flex; align-items: center; gap: 2px; }
.lpr-stars i { display: inline-grid; place-items: center; color: rgba(201,162,74,0.28); opacity: 0.55; transform: scale(0.62);
  transition: color 0.45s ease, opacity 0.45s ease, transform 0.6s cubic-bezier(.34,1.56,.64,1); }
.lpr-stars svg { width: 14px !important; height: 14px !important; fill: currentColor; stroke: currentColor; }
.is-counted .lpr-stars i { color: #e0bd62; opacity: 1; transform: none; }
.is-counted .lpr-stars i:nth-child(1) { transition-delay: 0.55s; }
.is-counted .lpr-stars i:nth-child(2) { transition-delay: 0.67s; }
.is-counted .lpr-stars i:nth-child(3) { transition-delay: 0.79s; }
.is-counted .lpr-stars i:nth-child(4) { transition-delay: 0.91s; }
.is-counted .lpr-stars i:nth-child(5) { transition-delay: 1.03s; }
.is-wave .lpr-stars i { animation: lpr-twinkle 0.9s ease both; }
.is-wave .lpr-stars i:nth-child(2) { animation-delay: 0.1s; }
.is-wave .lpr-stars i:nth-child(3) { animation-delay: 0.2s; }
.is-wave .lpr-stars i:nth-child(4) { animation-delay: 0.3s; }
.is-wave .lpr-stars i:nth-child(5) { animation-delay: 0.4s; }
@keyframes lpr-twinkle { 0%, 100% { transform: none; filter: none; } 45% { transform: scale(1.32) rotate(-8deg); filter: brightness(1.45) drop-shadow(0 0 6px rgba(240,210,130,0.9)); } }

/* ---- Hero rating pill ---- */
.hero-proof li.hp-rate { gap: 0; }
.lpr-pill { display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border-radius: 999px; color: #fff; text-decoration: none;
  background: rgba(10,10,10,0.42); border: 1px solid rgba(201,162,74,0.45); box-shadow: 0 14px 34px -16px rgba(0,0,0,0.7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform 0.3s ease, border-color 0.3s ease; }
.lpr-pill .lpr-g { width: 27px; height: 27px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; }
.hero-proof .lpr-pill .lpr-g svg { width: 15px; height: 15px; }
.lpr-pill .lpr-num { font: 700 17px/1 var(--font-head); color: #fff; }
.lpr-pill .lpr-count { display: inline-flex; align-items: center; gap: 4px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,0.2); font-size: 13px; color: rgba(245,243,238,0.82); }
.lpr-pill .lpr-count b { color: #fff; font-weight: 700; }
@media (hover: hover) { .lpr-pill:hover { transform: translateY(-2px); border-color: #c9a24a; } }
/* "Powered by Centric" sits in the same glass pill as the rating (tmack 10-29) */
.hero-proof li.hp-centric { gap: 0; }
.hp-pill { display: inline-flex; align-items: center; gap: 9px; padding: 5px 16px 5px 5px; border-radius: 999px; color: #fff; font-size: 13px; font-weight: 600;
  background: rgba(10,10,10,0.42); border: 1px solid rgba(201,162,74,0.45); box-shadow: 0 14px 34px -16px rgba(0,0,0,0.7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hp-pill .hp-ic { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, #e3c578, #b8893a); }
.hero-proof .hp-pill .hp-ic svg { width: 14px; height: 14px; color: #141414; }

/* ---- About section chip by Edwin's photo ---- */
.ab-chip.lpr-chip { text-decoration: none; color: inherit; transition: transform 0.3s ease; }
.ab-chip.lpr-chip .ab-ic { background: #fff; box-shadow: inset 0 0 0 1px rgba(12,12,12,0.08); }
.ab-chip.lpr-chip .ab-ic svg { width: 17px; height: 17px; }
.ab-chip .lpr-chip-top { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; }
.ab-chip .lpr-chip-top .odo, .ab-chip .lpr-chip-top .odo span { font-size: inherit; color: inherit; }
.ab-chip .lpr-chip-top .lpr-stars svg { width: 12px !important; height: 12px !important; }
.ab-chip .lpr-chip-sub { display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.ab-chip .lpr-chip-sub > .odo, .ab-chip .lpr-chip-sub > .odo span { font-weight: 700; color: inherit; }
.ab-chip .odo, .ab-chip .lpr-stars { display: inline-flex; }
@media (hover: hover) { .ab-chip.lpr-chip:hover { transform: translateY(-3px); } }

/* ---- Reviews header: score card with a ring that draws to 5.0 ---- */
.lpr-card { display: inline-flex; align-items: center; gap: 20px; margin-top: 26px; padding: 14px 28px 14px 14px; border-radius: 28px; text-align: left; color: #fff; text-decoration: none;
  background: rgba(10,10,10,0.5); border: 1px solid rgba(201,162,74,0.4); box-shadow: 0 34px 70px -34px rgba(0,0,0,0.85);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: transform 0.35s ease, border-color 0.35s ease; }
.lpr-ring { position: relative; flex: none; width: 96px; height: 96px; display: grid; place-items: center; }
.lpr-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.lpr-ring-bg { fill: rgba(201,162,74,0.07); stroke: rgba(201,162,74,0.18); stroke-width: 5; }
.lpr-ring-fg { fill: none; stroke: #d4ae58; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 2s cubic-bezier(.2,.75,.15,1) 0.15s; filter: drop-shadow(0 0 5px rgba(212,174,88,0.6)); }
.is-counted .lpr-ring-fg { stroke-dashoffset: 0; }
.lpr-ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; opacity: 0; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 78%, rgba(255,236,190,0.95) 97%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent 84%, #000 85.5%, #000 95%, transparent 96.5%); mask: radial-gradient(farthest-side, transparent 84%, #000 85.5%, #000 95%, transparent 96.5%); }
.is-wave .lpr-ring::after { animation: lpr-orbit 1.6s cubic-bezier(.45,0,.2,1) both; }
@keyframes lpr-orbit { 0% { transform: rotate(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: rotate(360deg); opacity: 0; } }
.lpr-big { position: relative; font: 700 31px/1 var(--font-head); letter-spacing: -0.02em; color: #fff; }
.lpr-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.lpr-stars-lg { gap: 4px; }
.lpr-stars-lg svg { width: 21px !important; height: 21px !important; }
.lpr-card .lpr-count { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; color: rgba(245,243,238,0.85); }
.lpr-card .lpr-count b { color: #fff; font-weight: 700; }
.lpr-on { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(245,243,238,0.66); transition: color 0.3s ease; }
.lpr-on svg { width: 14px; height: 14px; }
@media (hover: hover) { .lpr-card:hover { transform: translateY(-3px); border-color: #c9a24a; } .lpr-card:hover .lpr-on { color: #f0dcab; } }
@media (max-width: 420px) { .lpr-card { gap: 14px; padding: 12px 18px 12px 12px; } .lpr-ring { width: 80px; height: 80px; } .lpr-big { font-size: 26px; } .lpr-stars-lg svg { width: 17px !important; height: 17px !important; } }

/* ==========================================================================
   ABOUT — the four stat cards
   ========================================================================== */
.abx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.abx-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 248px; padding: 24px 24px 22px; border-radius: 24px; color: #fff;
  background: radial-gradient(120% 90% at 0% 0%, rgba(201,162,74,0.16), transparent 55%), linear-gradient(160deg, #171717, #0b0b0b);
  border: 1px solid rgba(201,162,74,0.28); box-shadow: 0 30px 60px -42px rgba(0,0,0,0.9); transition: border-color 0.35s ease, box-shadow 0.35s ease; }
.abx-card::before { content: ''; position: absolute; left: 22px; right: 22px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(240,220,171,0.85), transparent); }
.abx-card::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-110%);
  background: linear-gradient(112deg, transparent 32%, rgba(255,236,196,0.11) 48%, rgba(255,236,196,0.02) 58%, transparent 66%); }
.abx.is-counted .abx-card::after, .abx.is-wave .abx-card::after { animation: abx-sheen 1.6s ease both; }
.abx .abx-card:nth-child(2)::after { animation-delay: 0.22s; }
.abx .abx-card:nth-child(3)::after { animation-delay: 0.44s; }
.abx .abx-card:nth-child(4)::after { animation-delay: 0.66s; }
@keyframes abx-sheen { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
.abx-wm { position: absolute; right: -20px; bottom: -26px; z-index: -1; color: rgba(201,162,74,0.07); transition: transform 0.6s cubic-bezier(.2,.7,.2,1), color 0.4s ease; }
.abx-wm svg { width: 150px; height: 150px; stroke-width: 1.1; }
.abx-top { display: flex; align-items: center; gap: 10px; }
.abx-ic { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #e2c47e; background: rgba(201,162,74,0.12); box-shadow: inset 0 0 0 1px rgba(201,162,74,0.3); }
.abx-ic svg { width: 18px; height: 18px; }
.abx-ic.abx-ic-g { background: #fff; box-shadow: none; }
.abx-tag { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; line-height: 1.35; text-transform: uppercase; color: rgba(245,243,238,0.7); }
/* glow via filter, not text-shadow: the digit columns clip a text-shadow into visible boxes */
.abx-num { display: flex; align-items: flex-start; margin-top: auto; font: 600 clamp(54px, 5.4vw, 76px)/1 var(--font-head); letter-spacing: -0.035em; color: #f1dca2; filter: drop-shadow(0 0 22px rgba(201,162,74,0.28)); }
.abx-foot { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; min-height: 58px; }
.abx-num em { font-style: normal; font-size: 0.62em; line-height: 1; margin: 0.08em 0 0 3px; color: #c9a24a; }
.abx-card .lpr-stars svg { width: 17px !important; height: 17px !important; }
.abx-sub { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14px; line-height: 1.45; color: rgba(245,243,238,0.72); }
.abx-sub b { color: #fff; font-weight: 700; }
.abx-live { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #d4ae58; animation: abx-pulse 1.8s ease-out infinite; }
@keyframes abx-pulse { 0% { box-shadow: 0 0 0 0 rgba(212,174,88,0.6); } 70% { box-shadow: 0 0 0 10px rgba(212,174,88,0); } 100% { box-shadow: 0 0 0 0 rgba(212,174,88,0); } }
.abx-hot { border-color: rgba(201,162,74,0.55); background: radial-gradient(120% 100% at 100% 0%, rgba(201,162,74,0.3), transparent 60%), linear-gradient(160deg, #1d180e, #0b0b0b); }
@media (hover: hover) { .abx-card:hover { border-color: rgba(201,162,74,0.7); box-shadow: 0 34px 70px -40px rgba(0,0,0,0.95), 0 0 0 1px rgba(201,162,74,0.2); } .abx-card:hover .abx-wm { transform: translate(-8px, -8px) rotate(-6deg); color: rgba(201,162,74,0.12); } }
@media (max-width: 1100px) { .abx { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .abx { gap: 12px; }
  .abx-card { min-height: 0; padding: 18px 16px 16px; gap: 10px; border-radius: 20px; }
  .abx-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .abx-ic { width: 34px; height: 34px; border-radius: 10px; }
  .abx-tag { font-size: 10.5px; letter-spacing: 0.11em; }
  .abx-num { font-size: 46px; }
  .abx-foot { min-height: 76px; gap: 8px; }
  .abx-sub { font-size: 12.5px; }
  .abx-card .lpr-stars svg { width: 13px !important; height: 13px !important; }
  .abx-wm svg { width: 110px; height: 110px; }
}
html[data-theme="light"] .abx-card { color: #141414; background: radial-gradient(120% 90% at 0% 0%, rgba(201,162,74,0.13), transparent 55%), #fff; border-color: rgba(201,162,74,0.35); box-shadow: 0 26px 54px -38px rgba(12,12,12,0.35); }
html[data-theme="light"] .abx-hot { background: radial-gradient(120% 100% at 100% 0%, rgba(201,162,74,0.24), transparent 60%), #fffaf0; }
html[data-theme="light"] .abx-tag, html[data-theme="light"] .abx-sub { color: #5f5b52; }
html[data-theme="light"] .abx-sub b { color: #141414; }
html[data-theme="light"] .abx-num { color: #a47b22; filter: none; }
html[data-theme="light"] .abx-ic { color: #a47b22; }
html[data-theme="light"] .abx-wm { color: rgba(201,162,74,0.12); }
html[data-theme="light"] .abx-card::after { background: linear-gradient(112deg, transparent 32%, rgba(201,162,74,0.12) 48%, transparent 66%); }

/* ==========================================================================
   SERVICE PAGES — closing CTA card with its own photo behind it (blur + veil)
   ========================================================================== */
.leads-panel.has-photo { isolation: isolate; color: #fff; border: 1px solid rgba(201,162,74,0.38); background: #0b0b0b; }
.leads-panel.has-photo .lpc-photo { position: absolute; inset: -18px; z-index: -2; background: var(--photo) center / cover no-repeat; filter: blur(6px) saturate(1.06); transform: scale(1.03); transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.leads-panel.has-photo .lpc-veil { position: absolute; inset: 0; z-index: -1; background: radial-gradient(110% 85% at 50% 45%, rgba(8,8,8,0.5), rgba(8,8,8,0.82)), linear-gradient(180deg, rgba(8,8,8,0.25), rgba(8,8,8,0.6)); }
.leads-panel.has-photo h2 { color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,0.45); }
.leads-panel.has-photo p { color: rgba(245,243,238,0.86); }
.leads-panel.has-photo .eyebrow { color: #f0dcab; background: rgba(201,162,74,0.16); border-color: rgba(201,162,74,0.45); }
.leads-panel.has-photo .btn-outline { color: #fff; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.06); }
@media (hover: hover) { .leads-panel.has-photo:hover .lpc-photo { transform: scale(1.08); } .leads-panel.has-photo .btn-outline:hover { background: rgba(255,255,255,0.14); border-color: #fff; } }

/* ==========================================================================
   GET IN TOUCH — the funnel card lines up with the left column (was a fixed
   520px min-height); later steps still grow to fit what they hold.
   ========================================================================== */
#contact.git-section .contact-cta-wrap { align-items: stretch; }   /* beats the base #contact .wrap { align-items: start } */
.git-funnel { min-height: 0; }

/* ==========================================================================
   ROUND 3b — photo cards on the service + careers pages (topic photo, tag,
   title, one short line), the home careers card, team Get in Touch
   ========================================================================== */
.pcg { display: grid; gap: 18px; }
.pcg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pcg .pcx { min-height: 330px; }
.pcg-4 .pcx { min-height: 380px; }
.pcx .pc-body { margin-top: auto; padding-top: 90px; }
.pcx h3 { font-size: clamp(19px, 1.55vw, 22px); line-height: 1.2; }
.pcx .pc-sub { margin-top: 8px; font-size: 14.5px; line-height: 1.45; }
.pcx .pc-tag { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; color: #fff; background: rgba(12,12,12,0.42); border: 1px solid rgba(255,255,255,0.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pcx .pc-tag svg { width: 14px; height: 14px; color: var(--lp-gold, #c9a24a); }
.pcx-num { font: 600 15px/1 var(--font-head); letter-spacing: 0.08em; color: rgba(240,220,171,0.85); padding: 7px 10px; border-radius: 999px; background: rgba(8,8,8,0.35); border: 1px solid rgba(201,162,74,0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 1100px) { .pcg-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .pcg-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .pcg-3, .pcg-4 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pcg .pcx, .pcg-4 .pcx { min-height: 250px; }
  .pcx .pc-body { padding-top: 60px; }
}

/* ---- Home careers: one centred card over a translucent photo ---- */
.crc { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: clamp(420px, 44vw, 560px); padding: clamp(48px, 6vw, 84px) clamp(22px, 6vw, 96px); border-radius: 28px; color: #fff;
  border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 40px 90px -50px rgba(0,0,0,0.85); }
.crc-photo { position: absolute; inset: -20px; z-index: -2; background: var(--photo) center / cover no-repeat; filter: blur(7px) saturate(0.95); transform: scale(1.04); transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
.crc-veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(34,31,27,0.58), rgba(22,20,17,0.66)), rgba(70,62,50,0.12); }
.crc-pill { display: inline-flex; padding: 9px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.45); background: rgba(255,255,255,0.08); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.crc h2 { margin: 22px auto 0; max-width: 760px; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.06; letter-spacing: -0.03em; color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,0.35); }
.crc p { margin: 22px auto 0; max-width: 640px; font-size: clamp(15.5px, 1.35vw, 19px); line-height: 1.7; color: rgba(255,255,255,0.88); }
.crc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
.crc .btn-outline { color: #fff; border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.06); }
@media (hover: hover) { .crc:hover .crc-photo { transform: scale(1.08); } .crc .btn-outline:hover { background: rgba(255,255,255,0.14); border-color: #fff; } }
@media (max-width: 560px) { .crc { border-radius: 22px; } .crc-actions .btn { width: 100%; justify-content: center; } }

/* ---- Team member pages: Get in Touch (tiles left, Calendly right) ---- */
.tm-git-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }
.tm-git-copy h2 { margin-top: 14px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; }
.tm-git-lede { margin-top: 14px; color: var(--ink-muted); font-size: 16px; line-height: 1.7; max-width: 480px; }
.tm-git-copy .git-tiles { margin-top: 24px; }
.tm-git-copy .ab-social { margin-top: 20px; }
.tm-git-cal .cal-wrap { margin: 0; }
@media (max-width: 1023px) { .tm-git-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } .tm-git-copy { text-align: center; } .tm-git-lede { margin-left: auto; margin-right: auto; } .tm-git-copy .ab-social { justify-content: center; } }
.crc h2 .accent-text, .leads-panel.has-photo h2 .accent-text { text-shadow: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.45)) drop-shadow(0 8px 22px rgba(0,0,0,0.35)); }


/* ==========================================================================
   ABOUT PHOTO FRAME — arch doorway (tmack 10-29 picked design 1 of 3; the
   corner brackets were too close to Sunset Listing's).
   ========================================================================== */
.lp-about .ab-photo .abf-a, .lp-about .ab-photo .abf-b { display: none; position: absolute; pointer-events: none; z-index: 0; }

/* 1 — Arch doorway: arch-topped photo, a gold arch outline + keystone draw in */
.lp-about .ab-photo[data-frame="1"] .ab-frame { border-radius: 999px 999px 30px 30px; }
.lp-about .ab-photo[data-frame="1"] .abf-a { display: block; inset: -15px; border: 1.5px solid rgba(201,162,74,0.85); border-radius: 999px 999px 42px 42px;
  box-shadow: 0 0 34px -6px rgba(201,162,74,0); clip-path: inset(100% -70px -70px -70px);
  transition: clip-path 1.4s cubic-bezier(.22,1,.36,1) 0.15s, box-shadow 0.3s ease, transform 0.7s cubic-bezier(.22,1,.36,1); }
.lp-about .ab-photo[data-frame="1"] .abf-b { display: block; z-index: 2; top: -23px; left: 50%; width: 15px; height: 15px; margin-left: -7.5px; transform: rotate(45deg) scale(0);
  background: linear-gradient(135deg, #f3dfa8, #b8893a); box-shadow: 0 0 0 5px var(--lp-ink, #0a0a0a), 0 0 22px rgba(201,162,74,0); transition: transform 0.3s ease, box-shadow 0.3s ease; }
html[data-theme="light"] .lp-about .ab-photo[data-frame="1"] .abf-b { box-shadow: 0 0 0 5px var(--bg, #fff), 0 0 22px rgba(201,162,74,0); }
.lp-about.is-visible .ab-photo[data-frame="1"] .abf-a, .lp-about:not(.pre-reveal) .ab-photo[data-frame="1"] .abf-a { clip-path: inset(-70px -70px -70px -70px);
  box-shadow: 0 0 34px -6px rgba(201,162,74,0.35);
  /* the glow waits for the outline to finish drawing (0.15s + 1.4s), then fades in */
  transition: clip-path 1.4s cubic-bezier(.22,1,.36,1) 0.15s, box-shadow 1s ease 1.55s, transform 0.7s cubic-bezier(.22,1,.36,1); }
.lp-about.is-visible .ab-photo[data-frame="1"] .abf-b, .lp-about:not(.pre-reveal) .ab-photo[data-frame="1"] .abf-b { transform: rotate(45deg) scale(1);
  box-shadow: 0 0 0 5px var(--lp-ink, #0a0a0a), 0 0 22px rgba(201,162,74,0.55);
  transition: transform 0.6s cubic-bezier(.34,1.56,.64,1) 1.3s, box-shadow 1s ease 1.55s; }
html[data-theme="light"] .lp-about.is-visible .ab-photo[data-frame="1"] .abf-b, html[data-theme="light"] .lp-about:not(.pre-reveal) .ab-photo[data-frame="1"] .abf-b { box-shadow: 0 0 0 5px var(--bg, #fff), 0 0 22px rgba(201,162,74,0.45); }
/* hover: the photo grows across the dark gap and fills the gold arch (outline stays put).
   Frame 440×550 inside a 470×580 outline (1.5px line) → scale 1.049 fills the height; the
   bottom corners open from 30px to 40px so they follow the outline's 42px curve. */
.lp-about .ab-photo[data-frame="1"] .ab-frame { transition: transform 0.7s cubic-bezier(.22,1,.36,1), border-radius 0.7s cubic-bezier(.22,1,.36,1), box-shadow 0.7s ease; }
@media (hover: hover) {
  .lp-about .ab-photo[data-frame="1"]:hover .ab-frame { transform: scale(1.049); border-radius: 999px 999px 39px 39px; }
  .lp-about .ab-photo[data-frame="1"]:hover .ab-frame img { transform: scale(1.04); }
}

@media (max-width: 560px) {
  .lp-about .ab-photo[data-frame="1"] .abf-a { inset: -10px; } .lp-about .ab-photo[data-frame="1"] .abf-b { top: -17px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-about .ab-photo .abf-a, .lp-about .ab-photo .abf-b { transition: none; }
}

/* Home team coverflow: the open-seat card matches the /team lineup's (logo + "This seat is yours." on the warm dark glow) */
.tmc-join .tmc-photo.tml-join-ph { position: absolute; inset: 0; padding: 20px 20px 120px; }
.tmc-join .tmc-photo.tml-join-ph img { position: static; width: 96px; height: 96px; object-fit: contain; opacity: 0.85; }
.tmc-join .tmc-photo.tml-join-ph b { font: 600 22px var(--font-head); color: #f0dcab; }


/* ==========================================================================
   SEMINAR (tmack 10-29) — hero photo = a family moving in, under the
   translucent recipe (blurred photo + dark veil, darkest at the bottom);
   the four "Open to everyone" tiles get a smooth hover.
   ========================================================================== */
.sem-hero.page-header-photo::before { inset: -18px; filter: blur(4px) saturate(1.08); background-position: center 40%; }
.sem-hero.page-header-photo::after { background:
  radial-gradient(ellipse 70% 60% at 50% 46%, rgba(8,8,8,0.42), rgba(8,8,8,0.22) 70%),
  linear-gradient(180deg, rgba(8,8,8,0.5) 0%, rgba(8,8,8,0.28) 40%, rgba(8,8,8,0.62) 78%, rgba(8,8,8,0.9) 100%); }

/* tiles: lift, a gold sheen glides across once, the border warms, the icon ring fills gold and turns, a gold line grows under the words */
.sem-gains li { position: relative; overflow: hidden; isolation: isolate;
  transition: transform 0.55s cubic-bezier(.22,1,.36,1), border-color 0.55s ease, background-color 0.55s ease, box-shadow 0.55s ease; }
.sem-gains li::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(240,220,171,0.16) 48%, rgba(240,220,171,0.04) 56%, transparent 70%);
  transform: translateX(-110%); transition: transform 0.9s cubic-bezier(.22,1,.36,1); }
.sem-gains li::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #c9a24a, transparent); transform: scaleX(0); transition: transform 0.6s cubic-bezier(.22,1,.36,1); }
.sem-gains .sg-ic { transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, transform 0.6s cubic-bezier(.34,1.56,.64,1), box-shadow 0.5s ease; }
.sem-gains b { transition: transform 0.55s cubic-bezier(.22,1,.36,1); }
@media (hover: hover) {
  .sem-gains li:hover { transform: translateY(-6px); border-color: rgba(201,162,74,0.75); background-color: rgba(255,255,255,0.09);
    box-shadow: 0 26px 50px -28px rgba(0,0,0,0.85), 0 0 0 1px rgba(201,162,74,0.25); }
  .sem-gains li:hover::before { transform: translateX(110%); }
  .sem-gains li:hover::after { transform: scaleX(1); }
  .sem-gains li:hover .sg-ic { background-color: #c9a24a; border-color: #c9a24a; color: #141414; transform: rotate(-12deg) scale(1.08); box-shadow: 0 0 22px rgba(201,162,74,0.45); }
  .sem-gains li:hover b { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .sem-gains li, .sem-gains li::before, .sem-gains li::after, .sem-gains .sg-ic, .sem-gains b { transition: none; } }

/* Hero gold words: the gold is a background clipped to the text, and an inline-block's box ends at the
   0.98 line-height — so the tails of g / y fell outside it and were cut flat (tmack 10-30). Extend the
   box below the baseline (padding) and give the space back (negative margin) so nothing moves. */
.lp-hero2 h1 .accent-text { padding-bottom: 0.16em; margin-bottom: -0.16em; }

/* ==========================================================================
   EVENTS (tmack 11-06: the seminar page became /events — coming soon + stay-updated form → CRM)
   ========================================================================== */
.ev-hero { min-height: 78vh; min-height: 78svh; }
.ev-lede { max-width: 640px; margin: 18px auto 0; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.65; color: rgba(245,243,238,0.88); }
.ev-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 56px; align-items: center; }
.ev-copy h2 { margin-top: 14px; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; }
.ev-copy > p { margin-top: 14px; color: var(--ink-soft); font-size: 16.5px; line-height: 1.7; max-width: 520px; }
.ev-points { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.ev-points li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.ev-points svg { width: 20px; height: 20px; flex: none; padding: 9px; box-sizing: content-box; border-radius: 12px; color: var(--lp-gold); background: rgba(201,162,74,0.12); border: 1px solid rgba(201,162,74,0.3); }
.ev-last { display: flex; align-items: flex-start; gap: 10px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 14px; color: var(--ink-faint); line-height: 1.6; }
.ev-last svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--lp-gold); }
.ev-card { position: relative; }
.ev-card h3 { font-size: 24px; margin-bottom: 16px; }
.ev-form { display: grid; gap: 14px; }
.ev-form .field { margin: 0; }
.ev-form input { font-size: 16px; }
.ev-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(224,122,106,0.14); color: #b4493a; font-size: 14px; font-weight: 600; }
html[data-theme="dark"] .ev-error { color: #f3b3a8; }
.ev-error[hidden] { display: none; }
.ev-done { text-align: center; padding: 12px 6px; }
.ev-done[hidden] { display: none; }
.ev-done-ic { display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: #0c0c0c; background: linear-gradient(120deg, #f0dcab, #c9a24a); margin-bottom: 14px; }
.ev-done-ic svg { width: 26px; height: 26px; }
.ev-done p { margin: 8px 0 18px; color: var(--ink-soft); line-height: 1.6; }
@media (max-width: 900px) { .ev-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
/* /team lineup: buttons line up along the bottom even when a member has no licence line (Julie, Mimi — 11-06) */
.tml-body .btn-block { margin-top: auto; }
.tml-body > :nth-last-child(2) { margin-bottom: 8px; }

/* Member pages (not Edwin): online booking "coming soon" until their own Calendly link is in (tmack 11-06) */
.tm-cal-soon { position: relative; isolation: isolate; overflow: hidden; height: 100%; min-height: 460px; display: grid; place-items: center; padding: 34px 28px; border-radius: 24px; color: #fff; text-align: center;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201,162,74,0.16), rgba(201,162,74,0) 70%), linear-gradient(160deg, #171511, #0c0c0c 70%);
  box-shadow: 0 0 0 1px rgba(201,162,74,0.35), 0 40px 80px -50px rgba(0,0,0,0.9); }
.tcs-grid { position: absolute; inset: 26px; z-index: -2; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; opacity: 0.5; }
.tcs-grid i { border-radius: 10px; border: 1px solid rgba(201,162,74,0.16); background: rgba(255,255,255,0.025); }
.tcs-veil { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(12,12,12,0.94), rgba(12,12,12,0.55) 75%, rgba(12,12,12,0.25)); }
.tcs-body { max-width: 380px; display: grid; justify-items: center; gap: 10px; }
.tcs-ic { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; color: #0c0c0c; background: linear-gradient(120deg, #f0dcab, #c9a24a); box-shadow: 0 14px 30px -12px rgba(201,162,74,0.6); }
.tcs-ic svg { width: 28px; height: 28px; }
.tcs-tag { margin-top: 6px; padding: 6px 12px; border-radius: 999px; font: 800 11px var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: #f0dcab; background: rgba(201,162,74,0.12); border: 1px solid rgba(201,162,74,0.4); }
.tm-cal-soon h3 { margin: 4px 0 0; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; color: #fff; }
.tm-cal-soon p { margin: 0; font-size: 15px; line-height: 1.65; color: rgba(245,243,238,0.74); }
.tcs-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.tcs-actions .btn { min-width: 160px; justify-content: center; }
.tm-cal-soon .btn-outline { color: #fff; border-color: rgba(245,243,238,0.55); background: rgba(255,255,255,0.04); }
@media (max-width: 560px) { .tm-cal-soon { min-height: 400px; padding: 28px 18px; } .tcs-actions .btn { flex: 1 1 100%; } }
/* LP-PACK:END */