/* =====================================================================
   KALEB GROUP — Real estate reimagined
   Warm editorial luxury · gold #C9A84C · Fraunces / Inter
   Elevated, fluid micro-interactions throughout
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Clean white — light */
  --bone:      #FFFFFF;
  --bg:        #FFFFFF;
  --surface:   #F8F8F6;
  --surface-2: #EFEFEC;
  --ink:       #17191C;
  --ink-2:     #3A3D42;
  --muted:     #6F7278;
  --line:      #E9E9E6;
  --line-2:    #D9D9D5;

  --gold:      #9CA3AD;   /* silver — decorative: rules, fills, icons, numerals */
  --gold-deep: #5F6671;   /* steel silver — accessible text/links on white */
  --gold-soft: #EEF0F3;   /* tinted fills */
  --gold-glow: rgba(156,163,173,0.5);

  --charcoal:  #191B1F;   /* primary button / dark accents (neutral) */
  --charcoal-2:#0F1115;

  --text:    var(--ink);
  --text-2:  var(--muted);
  --accent:  var(--gold);
  --accent-text: var(--gold-deep);
  --border:  var(--line);

  --font-display: "Newsreader", Georgia, "Instrument Sans", serif;
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --step--1: clamp(0.78rem, 0.74rem + 0.18vw, 0.86rem);
  --step-0:  clamp(1.06rem, 1.01rem + 0.22vw, 1.16rem);
  --step-1:  clamp(1.14rem, 1.03rem + 0.5vw, 1.42rem);
  --step-2:  clamp(1.5rem, 1.28rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 1.9vw, 3.1rem);
  --step-4:  clamp(2.6rem, 1.95rem + 3.1vw, 4.6rem);
  --step-5:  clamp(2.5rem, 1.7rem + 3.5vw, 4.6rem);

  --space-md: 2rem;
  --space-lg: 4rem;
  --space-2xl: 11rem;
  --container: 1320px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --radius: 2px;
  --radius-lg: 5px;

  /* Refined, expensive easings */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);          /* expo-out — fluid settle */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);     /* gentle overshoot */

  --shadow-sm: 0 1px 2px rgba(29,25,19,0.05);
  --shadow-md: 0 22px 60px -34px rgba(29,25,19,0.4);
  --shadow-lg: 0 50px 110px -50px rgba(29,25,19,0.5);
  --shadow-gold: 0 30px 70px -36px rgba(201,168,76,0.45);

  --nav-h: 80px;
  color-scheme: light;
}

[data-theme="dark"] {
  --bone:      #15120D;
  --bg:        #141109;
  --surface:   #1C180F;
  --surface-2: #25200F;
  --ink:       #EFE8D6;
  --ink-2:     #CBC3B0;
  --muted:     #948B79;
  --line:      #2C2718;
  --line-2:    #3C3621;

  --gold:      #C2C8D2;
  --gold-deep: #CBD1DA;
  --gold-soft: #1C1E22;
  --charcoal:  #1C180F;
  --charcoal-2:#0D0B06;

  --shadow-md: 0 22px 60px -34px rgba(0,0,0,0.75);
  --shadow-lg: 0 50px 110px -50px rgba(0,0,0,0.85);
  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-size: 112.5%; }  /* global +2pt type bump: 16px -> 18px base, whole rem scale follows */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color 0.6s var(--ease), color 0.6s var(--ease);
}
img, picture, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
::selection { background: var(--gold); color: #1D1913; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: var(--radius); }

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 300;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  transform: scaleX(0); transform-origin: left; will-change: transform;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.018em;
  font-optical-sizing: auto;
  color: var(--text);
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
.display { font-family: var(--font-display); letter-spacing: -0.02em; }
.serif { font-family: var(--font-display); }
.italic { font-style: italic; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-weight: 600;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
}
.eyebrow::before {
  content: ""; width: 0; height: 1.5px; background: var(--gold); display: inline-block;
  transition: width 0.9s var(--ease) 0.1s;
}
.in .eyebrow::before, .eyebrow.in::before, .reveal.in .eyebrow::before { width: 30px; }
.eyebrow:not(.no-rule) { } /* default has rule */
.eyebrow.no-rule::before { display: none; }
/* eyebrows that aren't inside a reveal still show the rule */
.eyebrow::before { width: 30px; }
.reveal .eyebrow::before, .reveal.eyebrow::before { width: 0; }
.reveal.in .eyebrow::before, .reveal.eyebrow.in::before { width: 30px; }
[data-theme="dark"] .eyebrow { color: var(--gold); }

.lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); font-weight: 300; max-width: 32ch; }
.muted { color: var(--text-2); }
.measure { max-width: 62ch; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(2.75rem, 6vw, 6rem); }
.section-sm { padding-block: clamp(2.25rem, 4.5vw, 4.5rem); }
.divider { height: 1px; background: var(--border); border: 0; }

.grid { display: grid; gap: var(--space-md); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .cols-3.keep-2-tab, .cols-4.keep-2-tab { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .cols-3.keep-2-tab, .cols-4.keep-2-tab { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.7em;
  padding: 1.05rem 1.9rem;
  font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
  border-radius: var(--radius); position: relative; overflow: hidden; isolation: isolate;
  transition: color 0.5s var(--ease), background-color 0.5s var(--ease), border-color 0.5s var(--ease), transform 0.5s var(--spring), box-shadow 0.5s var(--ease);
  will-change: transform;
}
.btn > * { position: relative; z-index: 1; }
.btn .btn-ico { transition: transform 0.5s var(--ease); }
.btn:hover .btn-ico { transform: translateX(5px); }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--charcoal); color: #F6F2E8; }
[data-theme="dark"] .btn-primary { background: var(--gold); color: #1A160E; }
.btn-primary::after { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--gold); transform: translateY(101%); transition: transform 0.6s var(--ease); }
.btn-primary:hover { color: #1A160E; box-shadow: var(--shadow-gold); }
.btn-primary:hover::after { transform: translateY(0); }
[data-theme="dark"] .btn-primary::after { background: #F6F2E8; }
[data-theme="dark"] .btn-primary:hover { color: var(--ink); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line-2); }
.btn-ghost::after { content:""; position:absolute; inset:0; z-index:0; background: var(--gold-soft); transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s var(--ease); }
.btn-ghost:hover { border-color: var(--gold); color: var(--accent-text); }
.btn-ghost:hover::after { transform: scaleY(1); }
[data-theme="dark"] .btn-ghost:hover { color: var(--gold); }

.link-underline {
  position: relative; display: inline-flex; align-items: center; gap: 0.55em;
  font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; padding-bottom: 3px;
}
.link-underline::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--gold); transform: scaleX(1); transform-origin: right; transition: transform 0.6s var(--ease); }
.link-underline:hover::after { transform: scaleX(0); transform-origin: left; }
.link-underline .btn-ico { transition: transform 0.5s var(--ease); color: var(--accent-text); }
[data-theme="dark"] .link-underline .btn-ico { color: var(--gold); }
.link-underline:hover .btn-ico { transform: translateX(5px); }

/* ---------- Topbar ---------- */
.topbar { background: var(--charcoal-2); color: #B7AE99; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 38px; gap: 1rem; }
.topbar .meta { display: flex; gap: 1.5rem; align-items: center; }
.topbar .coords { font-variant-numeric: tabular-nums; }
.topbar a { transition: color 0.4s var(--ease); }
.topbar a:hover { color: var(--gold); }
@media (max-width: 720px) { .topbar .hide-sm { display: none; } }

/* ---------- Logo ---------- */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; white-space: nowrap; }
.brand .mark { width: 34px; height: 37px; color: var(--ink); overflow: visible; transition: transform 0.6s var(--spring); }
.brand .mark .hex { transition: stroke 0.4s var(--ease); }
.brand .mark .kk { stroke: var(--gold); transition: stroke 0.4s var(--ease); }
.brand:hover .mark { transform: rotate(-6deg) scale(1.04); }
.brand .wordmark {
  font-family: var(--font-body); font-size: 1.03rem; letter-spacing: 0.28em; text-transform: uppercase;
  font-weight: 500; color: var(--ink); padding-bottom: 1px;
}
@media (max-width: 420px) { .brand .wordmark { font-size: 0.74rem; letter-spacing: 0.2em; } }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: transform 0.6s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.nav.scrolled { border-color: var(--border); }
.nav.hidden { transform: translateY(-100%); }
.nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.4rem); }
.nav-links > a, .nav-links .has-drop > button {
  font-size: 1.01rem; letter-spacing: 0.02em; font-weight: 500; position: relative; padding: 0.4rem 0;
  display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text);
}
.nav-links > a::after, .nav-links .has-drop > button::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease);
}
.nav-links > a:hover::after, .nav-links > a[aria-current="page"]::after,
.nav-links .has-drop:hover > button::after, .nav-links .has-drop[data-active] > button::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--accent-text); }
[data-theme="dark"] .nav-links a[aria-current="page"] { color: var(--gold); }
.nav-links .has-drop > button .chev { width: 12px; height: 12px; transition: transform 0.4s var(--ease); }
.nav-links .has-drop:hover > button .chev, .nav-links .has-drop:focus-within > button .chev, .nav-links .has-drop[data-open] > button .chev { transform: rotate(180deg); }

.has-drop { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 0.8rem); left: 50%; transform: translateX(-50%) translateY(10px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 0.6rem; width: 356px;
  opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); z-index: 110;
}
.has-drop:hover .dropdown, .has-drop:focus-within .dropdown, .has-drop[data-open] .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown a { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.75rem 0.85rem; border-radius: var(--radius); transition: background 0.3s var(--ease), transform 0.3s var(--ease); }
.dropdown a:hover { background: var(--bg); transform: translateX(3px); }
.dropdown a .di { width: 23px; height: 23px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.dropdown a .dt { display: block; font-weight: 600; font-size: 0.99rem; font-family: var(--font-body); }
.dropdown a .dd { display: block; font-size: 0.85rem; color: var(--text-2); margin-top: 2px; }

.nav-actions { display: flex; align-items: center; gap: 0.7rem; }
.nav-clock { font-size: 0.89rem; letter-spacing: 0.18em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.hero-flush .nav:not(.scrolled) .nav-clock { color: rgba(246, 242, 232, 0.85); }
.icon-btn { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); color: var(--text); transition: border-color 0.4s var(--ease), color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--spring); }
.icon-btn:hover { border-color: var(--gold); color: var(--accent-text); transform: translateY(-2px); }
[data-theme="dark"] .icon-btn:hover { color: var(--gold); }
.icon-btn svg { width: 18px; height: 18px; }
.theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: block; }
@media (max-width: 1040px) { .nav-links, .nav-cta.desktop-only { display: none; } }
.menu-btn { display: none; }
@media (max-width: 1040px) { .menu-btn { display: grid; } }

/* Mobile menu */
.mobile-menu { position: fixed; inset: 0; z-index: 200; background: var(--bg); transform: translateY(-100%); transition: transform 0.7s var(--ease); display: flex; flex-direction: column; padding: var(--gutter); visibility: hidden; overflow-y: auto; }
.mobile-menu.open { transform: translateY(0); visibility: visible; }
.mobile-menu-top { display: flex; justify-content: space-between; align-items: center; height: var(--nav-h); }
.mobile-menu nav { margin-top: 2rem; margin-bottom: auto; display: flex; flex-direction: column; }
.mobile-menu nav a, .mobile-menu .mm-group > span { font-family: var(--font-display); font-size: clamp(1.9rem, 9vw, 3.2rem); line-height: 1.22; padding: 0.25rem 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; opacity: 0; transform: translateY(24px); }
.mobile-menu nav a span { color: var(--gold); }
.mobile-menu .mm-sub { display: flex; flex-direction: column; padding: 0.5rem 0 0.8rem; border-bottom: 1px solid var(--border); }
.mobile-menu .mm-sub a { font-family: var(--font-body); font-size: 1.05rem; font-weight: 500; color: var(--text-2); border: 0; padding: 0.35rem 0; }
.mobile-menu .mm-sub a span { display: none; }
.mobile-menu .mm-group > span { color: var(--text-2); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; font-family: var(--font-body); border: 0; padding-bottom: 0.2rem; }
.mobile-menu.open nav a, .mobile-menu.open .mm-sub, .mobile-menu.open .mm-group > span { animation: menuItem 0.7s var(--ease) forwards; }
.mobile-menu.open nav > *:nth-child(1) { animation-delay: 0.10s; }
.mobile-menu.open nav > *:nth-child(2) { animation-delay: 0.16s; }
.mobile-menu.open nav > *:nth-child(3) { animation-delay: 0.22s; }
.mobile-menu.open nav > *:nth-child(4) { animation-delay: 0.28s; }
.mobile-menu.open nav > *:nth-child(5) { animation-delay: 0.34s; }
.mobile-menu.open nav > *:nth-child(6) { animation-delay: 0.40s; }
.mobile-menu .mm-foot { display: flex; justify-content: space-between; color: var(--text-2); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 1.5rem; }
@keyframes menuItem { to { opacity: 1; transform: translateY(0); } }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.5rem, 4vw, 4.5rem); align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { margin: 1.6rem 0; }
.hero .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero .line > span { display: block; transform: translateY(115%); }
.loaded .hero .line > span { transition: transform 1.1s var(--ease); transform: translateY(0); }
.loaded .hero .line:nth-child(2) > span { transition-delay: 0.09s; }
.loaded .hero .line:nth-child(3) > span { transition-delay: 0.18s; }

.hero-kicker { font-family: var(--font-display); font-size: var(--step-2); color: var(--ink-2); margin-top: 0.4rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4ch; }
.rotator { display: inline-grid; vertical-align: bottom; }
.rotator > span { grid-area: 1 / 1; color: var(--gold); font-style: italic; opacity: 0; transform: translateY(0.5em) rotate(2deg); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transform-origin: left bottom; }
.rotator > span.is-active { opacity: 1; transform: translateY(0) rotate(0); }
.rotator > span.is-leaving { opacity: 0; transform: translateY(-0.5em) rotate(-2deg); }
@media (prefers-reduced-motion: reduce) { .rotator > span { position: static; transition: none; } .rotator > span:not(:first-child) { display: none; } .rotator > span:first-child { opacity: 1; transform: none; } }

.hero-media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-md); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-badge { position: absolute; left: 1.2rem; bottom: 1.2rem; right: 1.2rem; background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.hero-badge .l { font-size: var(--step--1); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.12em; }
.hero-badge .v { font-family: var(--font-display); font-size: var(--step-1); }

.hero-meta { display: flex; flex-wrap: wrap; gap: 2.5rem 3rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 2.2rem; border-top: 1px solid var(--border); }
.hero-meta .stat .n { font-family: var(--font-display); font-size: var(--step-3); display: block; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-meta .stat .n em { color: var(--gold); font-style: normal; }
.hero-meta .stat .l { font-size: var(--step--1); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 0.6rem; }

.scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 0.6rem; margin-top: 2.5rem; color: var(--text-2); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; }
.scroll-cue .bar { width: 1px; height: 42px; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; }
.scroll-cue .bar::after { content: ""; position: absolute; top: -50%; left: 0; width: 100%; height: 50%; background: var(--gold); animation: cueRun 2.2s var(--ease) infinite; }
@keyframes cueRun { to { top: 110%; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue .bar::after { animation: none; } }

/* ---------- Image reveal ---------- */
.img-wrap { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--surface-2), var(--surface)); }
.img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.img-wrap.parallax img { transform: scale(1.14); will-change: transform; }
.img-zoom { transition: transform 1s var(--ease); }
.prop-card:hover .img-zoom, .agent-card:hover .img-zoom, .card-link:hover .img-zoom { transform: scale(1.07); }

/* ---------- Section heading ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.sec-head .sec-title { max-width: 20ch; margin-top: 1.2rem; }
.sec-head p.measure { color: var(--text-2); }
/* stacked variant: caption sits under the title regardless of title length */
.sec-head.sec-stack { display: block; }
.sec-head.sec-stack p.measure { margin-top: 1.1rem; }
/* line-reveal for headings (JS wraps .ln) */
.ln-mask { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.16em; }  /* room for descenders (g, y) */
.ln { display: block; transform: translateY(125%); transition: transform 1s var(--ease); }
.in .ln, .reveal.in .ln { transform: translateY(0); }
.ln-mask:nth-child(2) .ln { transition-delay: 0.07s; }
.ln-mask:nth-child(3) .ln { transition-delay: 0.14s; }
.ln-mask:nth-child(4) .ln { transition-delay: 0.21s; }

/* ---------- Service pillars ---------- */
.pillars { border-top: 1px solid var(--border); }
.pillar { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1rem, 4vw, 3rem); align-items: center; padding: clamp(1.45rem, 3.06vw, 2.38rem) 0; border-bottom: 1px solid var(--border); transition: padding-left 0.6s var(--ease); position: relative; }
.pillar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold-soft), transparent 60%); opacity: 0; transition: opacity 0.6s var(--ease); z-index: -1; }
.pillar:hover { padding-left: 1.4rem; }
.pillar:hover::after { opacity: 1; }
.pillar::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 2px; background: var(--gold); transform: scaleY(0); transform-origin: top; transition: transform 0.6s var(--ease); }
.pillar:hover::before { transform: scaleY(1); }
.pillar .pnum { font-family: var(--font-display); font-size: var(--step-1); color: var(--gold); font-variant-numeric: tabular-nums; }
.pillar .pbody h3 { font-size: calc(var(--step-3) - 2px); }
.pillar .pbody p { color: var(--text-2); max-width: 52ch; margin-top: 0.7rem;  font-size: calc(var(--step-0) - 2px); }
.pillar .pico { width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; color: var(--text); transition: 0.5s var(--spring); flex-shrink: 0; }
.pillar:hover .pico { background: var(--charcoal); color: #F6F2E8; transform: rotate(-45deg) scale(1.05); }
[data-theme="dark"] .pillar:hover .pico { background: var(--gold); color: #1A160E; }
.pillar .pico svg { width: 20px; height: 20px; }
@media (max-width: 720px) { .pillar { grid-template-columns: auto 1fr; } .pillar .pico { display: none; } }

/* Service feature cards */
.fcard { padding: clamp(1.6rem, 3vw, 2.4rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); transition: border-color 0.5s var(--ease), transform 0.5s var(--ease), box-shadow 0.5s var(--ease); height: 100%; }
.fcard:hover { border-color: var(--gold); transform: translateY(-6px); box-shadow: var(--shadow-md); }
.fcard .fico { width: 50px; height: 50px; border-radius: var(--radius); background: var(--gold-soft); display: grid; place-items: center; color: var(--gold-deep); margin-bottom: 1.4rem; transition: transform 0.5s var(--spring); }
[data-theme="dark"] .fcard .fico { color: var(--gold); }
.fcard:hover .fico { transform: scale(1.08) rotate(-4deg); }
.fcard .fico svg { width: 23px; height: 23px; }
.fcard h3 { font-size: var(--step-1); }
.fcard p { color: var(--text-2); margin-top: 0.6rem; font-size: clamp(0.95rem, 0.90rem + 0.22vw, 1.05rem); }  /* capability card copy: 2pt below body scale */

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split.reverse .split-media { order: 2; }
@media (max-width: 860px) { .split, .split.reverse { grid-template-columns: 1fr; } .split.reverse .split-media { order: 0; } }
.split-media { aspect-ratio: 5 / 6; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }

/* ---------- Stats band ---------- */
.stats-band { background: var(--charcoal); color: #E9E1CC; position: relative; overflow: hidden; }
.stats-band::before { content: ""; position: absolute; top: -40%; right: -10%; width: 60%; height: 180%; background: radial-gradient(circle, rgba(201,168,76,0.10), transparent 70%); pointer-events: none; }
[data-theme="dark"] .stats-band { background: var(--charcoal-2); border-block: 1px solid var(--line); }
.stats-band .stat .n { font-family: var(--font-display); font-size: var(--step-4); line-height: 1; font-variant-numeric: tabular-nums; color: var(--gold); }
.stats-band .stat .l { margin-top: 0.9rem; font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; color: #A39A85; }
.stats-band .stat .d { margin-top: 0.9rem; color: #938A76; font-size: calc(var(--step--1) + 1px); line-height: 1.5; max-width: 28ch; }
.stats-band .note { font-size: 0.7rem; color: #756C58; }

/* ---------- Values ---------- */
.values { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 880px) { .values { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .values { grid-template-columns: 1fr; } }
.value { padding: clamp(1.6rem, 3vw, 2.4rem); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background 0.5s var(--ease); position: relative; }
.value::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.value:hover { background: var(--surface); }
.value:hover::before { transform: scaleX(1); }
.value .vn { font-family: var(--font-display); font-size: 0.95rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.value h3 { font-size: var(--step-1); margin-top: 1.2rem; }
.value p { color: var(--text-2); font-size: clamp(0.95rem, 0.90rem + 0.22vw, 1.05rem); margin-top: 0.15rem; }  /* matches capability card copy */

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; padding-block: 1.5rem; border-block: 1px solid var(--border); }
.marquee-track { display: flex; gap: 3rem; width: max-content; animation: marquee 60s linear infinite; }
.marquee-track span { font-family: var(--font-display); font-size: var(--step-3); color: var(--text); display: inline-flex; align-items: center; gap: 3rem; opacity: 0.92; letter-spacing: -0.02em; }
.marquee-track span::after { content: "✦"; color: var(--gold); font-size: 0.5em; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- Process ---------- */
.steps { counter-reset: step; }
.step { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1rem,4vw,3rem); align-items: baseline; padding: clamp(1.7rem, 3.6vw, 2.8rem) 0; border-top: 1px solid var(--border); transition: padding-left 0.6s var(--ease); }
.step:last-child { border-bottom: 1px solid var(--border); }
.step:hover { padding-left: 1.2rem; }
.step .num { font-family: var(--font-display); font-size: var(--step-1); color: var(--gold); font-variant-numeric: tabular-nums; }
.step h3 { font-size: var(--step-2); }
.step p { color: var(--text-2); max-width: 48ch; margin-top: 0.7rem; }
.step .meta { color: var(--text-2); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; }
@media (max-width: 760px) { .step { grid-template-columns: auto 1fr; } .step .meta { display: none; } }

/* ---------- Property cards ---------- */
.prop-card { display: block; position: relative; }
.prop-card .media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-2); box-shadow: 0 0 0 1px var(--border); transition: box-shadow 0.5s var(--ease); }
.prop-card:hover .media { box-shadow: 0 0 0 1px var(--gold), var(--shadow-md); }
.prop-card .media img { width: 100%; height: 100%; object-fit: cover; }
.prop-card .badge { position: absolute; top: 1rem; left: 1rem; z-index: 2; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(6px); color: var(--text); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.42rem 0.78rem; border-radius: 2px; font-weight: 600; border: 1px solid var(--border); }
.prop-card .badge.sold { color: #1A160E; background: var(--gold); border-color: transparent; }
.prop-card .badge.cre { background: var(--charcoal); color: #F6F2E8; border-color: transparent; }
.prop-card .price-tag { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; color: #fff; opacity: 0; transform: translateY(12px); transition: 0.5s var(--ease); }
.prop-card .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,16,10,0.7), transparent 48%); opacity: 0; transition: opacity 0.5s var(--ease); }
.prop-card:hover .media::after { opacity: 1; }
.prop-card:hover .price-tag { opacity: 1; transform: translateY(0); }
.prop-card .price-tag .p { font-family: var(--font-display); font-size: var(--step-1); }
.prop-card .info { padding-top: 1.1rem; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.prop-card .info h3 { font-size: var(--step-1); transition: color 0.4s var(--ease); }
.prop-card:hover .info h3 { color: var(--accent-text); }
[data-theme="dark"] .prop-card:hover .info h3 { color: var(--gold); }
.prop-card .loc { color: var(--text-2); font-size: var(--step--1); margin-top: 0.3rem; }
.prop-card .specs { display: flex; gap: 1.1rem; color: var(--text-2); font-size: var(--step--1); margin-top: 0.85rem; flex-wrap: wrap; }
.prop-card .specs span { display: inline-flex; align-items: center; gap: 0.4rem; }
.prop-card .specs svg { width: 15px; height: 15px; color: var(--gold); }
.prop-card .arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; color: var(--text); transition: 0.5s var(--spring); flex-shrink: 0; }
.prop-card:hover .arrow { background: var(--charcoal); color: #F6F2E8; transform: rotate(-45deg); }
[data-theme="dark"] .prop-card:hover .arrow { background: var(--gold); color: #1A160E; }

/* Filters */
.filters { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.chip { padding: 0.6rem 1.25rem; border: 1px solid var(--border); border-radius: 100px; font-size: var(--step--1); letter-spacing: 0.04em; transition: 0.4s var(--ease); white-space: nowrap; font-weight: 500; }
.chip:hover { border-color: var(--gold); color: var(--accent-text); transform: translateY(-1px); }
[data-theme="dark"] .chip:hover { color: var(--gold); }
.chip.active { background: var(--charcoal); color: #F6F2E8; border-color: var(--charcoal); }
[data-theme="dark"] .chip.active { background: var(--gold); color: #1A160E; border-color: var(--gold); }

/* ---------- Team ---------- */
.agent-card .media { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); position: relative; box-shadow: 0 0 0 1px var(--border); transition: box-shadow 0.5s var(--ease); }
.agent-card:hover .media { box-shadow: 0 0 0 1px var(--gold), var(--shadow-md); }
.agent-card .media::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(20,16,10,0.6), transparent 50%); opacity: 0; transition: opacity .5s var(--ease);}
.agent-card:hover .media::after { opacity: 1; }
.agent-card .social { position: absolute; left:1rem; bottom:1rem; z-index:2; display:flex; gap:.5rem; opacity:0; transform: translateY(10px); transition: .5s var(--ease);}
.agent-card:hover .social { opacity:1; transform: translateY(0); }
.agent-card .social a { width:36px;height:36px;border-radius:50%; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); display:grid;place-items:center; color:#fff; transition: 0.3s var(--ease);}
.agent-card .social a:hover { background: var(--gold); color:#1A160E; }
.agent-card .social svg { width:15px;height:15px; }
.agent-card h3 { font-size: var(--step-1); margin-top: 1.1rem; }
.agent-card .role { color: var(--accent-text); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.35rem; font-weight: 600; }
[data-theme="dark"] .agent-card .role { color: var(--gold); }
.agent-card .ph { color: var(--text-2); font-size: var(--step--1); margin-top: 0.6rem; font-variant-numeric: tabular-nums; }

/* ---------- Testimonial ---------- */
.quote { max-width: 26ch; }
.quote blockquote { font-family: var(--font-display); font-size: var(--step-3); line-height: 1.18; letter-spacing: -0.02em; }
.quote .who { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; }
.quote .who img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; }
.quote .who .n { font-weight: 600; }
.quote .who .r { color: var(--text-2); font-size: var(--step--1); }
.stars { color: var(--gold); display: flex; gap: 3px; margin-bottom: 1.3rem; }
.stars svg { width: 18px; height: 18px; }

/* ---------- Offices ---------- */
.office { padding: clamp(1.6rem, 3vw, 2.4rem); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color 0.5s var(--ease), transform 0.5s var(--ease), box-shadow 0.5s var(--ease); background: var(--surface); }
.office:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.office .city { font-family: var(--font-display); font-size: var(--step-2); }
.office .city em { color: var(--gold-deep); font-style: normal; font-size: 0.52em; letter-spacing: 0.16em; text-transform: uppercase; display: block; margin-bottom: 0.5rem; font-family: var(--font-body); font-weight: 600; }
[data-theme="dark"] .office .city em { color: var(--gold); }
.office address { font-style: normal; color: var(--text-2); margin-top: 1rem; line-height: 1.7; }
.office .lines { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.office .lines a { display: inline-flex; gap: 0.6rem; align-items: center; transition: color 0.3s var(--ease); }
.office .lines svg { width: 16px; height: 16px; color: var(--gold); }
.office .lines a:hover { color: var(--accent-text); }
[data-theme="dark"] .office .lines a:hover { color: var(--gold); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--charcoal); color: #EFE8D6; padding: clamp(3rem, 8vw, 7rem) var(--gutter); text-align: center; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 120%, rgba(201,168,76,0.16), transparent 60%); pointer-events: none; }
[data-theme="dark"] .cta-band { background: var(--charcoal-2); border: 1px solid var(--line); }
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; max-width: 18ch; margin-inline: auto; }
[data-theme="dark"] .cta-band h2 { color: var(--ink); }
.cta-band p { color: #A89F8A; max-width: 46ch; margin: 1.3rem auto 2.2rem; }
.cta-band .btn-primary { background: var(--gold); color: #1A160E; }
.cta-band .btn-primary::after { background: #fff; }
.cta-band .btn-primary:hover { color: #1A160E; }

/* ---------- Footer ---------- */
.footer { background: var(--surface); border-top: 1px solid var(--border); padding-top: clamp(3.5rem, 7vw, 6rem); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 2.5rem; padding-bottom: 4rem; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h4 { font-family: var(--font-body); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-2); margin-bottom: 1.4rem; font-weight: 600; }
.footer ul { display: flex; flex-direction: column; gap: 0.8rem; }
.footer ul a, .footer address a { color: var(--ink-2); transition: color 0.3s var(--ease); }
.footer ul a { position: relative; }
.footer ul a:hover, .footer address a:hover { color: var(--accent-text); }
[data-theme="dark"] .footer ul a:hover, [data-theme="dark"] .footer address a:hover { color: var(--gold); }
.footer .f-brand .brand { margin-bottom: 1.2rem; }
.footer .f-brand p { color: var(--text-2); max-width: 34ch; }
.footer address { font-style: normal; color: var(--ink-2); line-height: 1.8; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block: 1.8rem; border-top: 1px solid var(--border); color: var(--text-2); font-size: var(--step--1); }
.footer-bottom a:hover { color: var(--accent-text); }
.footer-bottom .socials { display: flex; gap: 0.6rem; }
.footer-bottom .socials a { width: 39px; height: 39px; border: 1px solid var(--border); border-radius: 50%; display: grid; place-items: center; transition: 0.4s var(--spring); }
.footer-bottom .socials a:hover { border-color: var(--gold); color: var(--accent-text); transform: translateY(-3px); }
[data-theme="dark"] .footer-bottom .socials a:hover { color: var(--gold); }
.footer-bottom .socials svg { width: 16px; height: 16px; }
.footer-huge { font-family: var(--font-display); font-size: clamp(3rem, 17vw, 15rem); line-height: 0.82; letter-spacing: -0.03em; color: var(--text); opacity: 0.05; text-align: center; padding-bottom: 0.4rem; user-select: none; pointer-events: none; }

/* Newsletter */
.subscribe { display: flex; gap: 0.6rem; border-bottom: 1px solid var(--line-2); padding-bottom: 0.6rem; transition: border-color 0.4s var(--ease); }
.subscribe:focus-within { border-color: var(--gold); }
.subscribe input { flex: 1; background: none; border: none; outline: none; padding: 0.4rem 0; }
.subscribe input::placeholder { color: var(--text-2); }
.subscribe button { color: var(--accent-text); transition: transform 0.4s var(--ease); }
.subscribe button:hover { transform: translateX(3px); }
[data-theme="dark"] .subscribe button { color: var(--gold); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.6rem; }
.field label { font-size: var(--step--1); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); font-weight: 600; }
.field label .req { color: var(--accent-text); }
[data-theme="dark"] .field label .req { color: var(--gold); }
.field input, .field textarea, .field select { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 0.95rem 1.1rem; transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); width: 100%; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow); outline: none; }
.field textarea { min-height: 140px; resize: vertical; }
.field .error-msg { color: #B23B2E; font-size: var(--step--1); display: none; }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: #B23B2E; }
.field.invalid .error-msg { display: block; }
.field .help { color: var(--text-2); font-size: var(--step--1); }
.form-note { color: var(--text-2); font-size: var(--step--1); }
.form-success { display: none; padding: 1.2rem 1.4rem; border: 1px solid var(--gold); border-radius: var(--radius); background: var(--gold-soft); }
.form-success.show { display: flex; gap: 0.8rem; align-items: center; }
.form-success svg { width: 22px; height: 22px; color: var(--gold-deep); flex-shrink: 0; }
[data-theme="dark"] .form-success svg { color: var(--gold); }
.form-fail { display: none; padding: 1rem 1.2rem; border: 1px solid rgba(166,43,62,0.5); border-radius: var(--radius); color: var(--burgundy); font-size: var(--step--1); }
.form-fail.show { display: block; }
.form-fail a { color: inherit; text-decoration: underline; }

/* ---------- Property detail ---------- */
.pd-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0.8rem; }
.pd-gallery .g { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1; background: var(--surface-2); }
.pd-gallery .g.big { grid-row: span 2; aspect-ratio: auto; }
.pd-gallery .g img { transition: transform 1s var(--ease); }
.pd-gallery .g:hover img { transform: scale(1.05); }
@media (max-width: 700px) { .pd-gallery { grid-template-columns: 1fr 1fr; } .pd-gallery .g.big { grid-column: span 2; aspect-ratio: 16/10; grid-row: auto; } }
.pd-layout { display: grid; grid-template-columns: 1fr 380px; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 980px) { .pd-layout { grid-template-columns: 1fr; } }
.pd-aside { position: sticky; top: calc(var(--nav-h) + 1.5rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-md); }
.pd-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1rem; }
.pd-specs .s .l { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); }
.pd-specs .s .v { font-family: var(--font-display); font-size: var(--step-1); margin-top: 0.2rem; }
.feature-list { columns: 2; column-gap: 2.5rem; }
.feature-list li { padding: 0.6rem 0; border-bottom: 1px solid var(--border); display: flex; gap: 0.6rem; align-items: center; break-inside: avoid; }
.feature-list svg { width: 16px; height: 16px; color: var(--gold); flex-shrink: 0; }
@media (max-width: 560px) { .feature-list { columns: 1; } }

/* ---------- Page header ---------- */
.page-head { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.breadcrumb { display: flex; gap: 0.6rem; color: var(--text-2); font-size: var(--step--1); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1.6rem; flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--accent-text); }
.page-head h1 { font-size: var(--step-4); max-width: 18ch; margin-top: 1.2rem; }
.page-head .lead { margin-top: 1.4rem; max-width: 54ch; }

/* discipline welcome pages — image fades in diagonally: clearest bottom-right,
   fading through the bottom-left→top-right diagonal into the clear top-left where the copy sits */
.page-head.svc-hero { position: relative; overflow: hidden; min-height: min(80vh, 720px); }
.page-head.svc-hero > .container { position: relative; z-index: 1; }
.page-head.svc-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--svc-img); background-size: cover; background-position: bottom right;
  -webkit-mask-image: linear-gradient(135deg, transparent 42%, #000 90%);
  mask-image: linear-gradient(135deg, transparent 42%, #000 90%);
}
@media (max-width: 700px) { .page-head.svc-hero { min-height: 0; } }

/* ===================================================================
   Brokerage split welcome — Residential (left) | Commercial (right)
   Two full-height halves; hovering one expands it and dims the other.
   =================================================================== */
.brk-split {
  position: relative; display: flex; width: 100%;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  overflow: hidden; background: var(--charcoal-2);
  isolation: isolate;
}
.brk-half {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; align-items: flex-end; overflow: hidden;
  color: #F6F2E8; text-decoration: none;
  transition: flex-grow 0.9s var(--ease);
}
.brk-res { border-left: 1px solid rgba(246, 242, 232, 0.16); }

/* photographic backdrop */
.brk-photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.03);
  transition: transform 1.3s var(--ease), filter 0.9s var(--ease);
  will-change: transform;
}
.brk-scrim {
  position: absolute; inset: 0; z-index: 1;
  transition: background 0.9s var(--ease);
}
.brk-res .brk-scrim { background: linear-gradient(178deg, rgba(30,19,9,0.14) 0%, rgba(22,15,8,0.03) 40%, rgba(11,8,4,0.28) 100%); }
.brk-com .brk-scrim { background: linear-gradient(178deg, rgba(10,15,24,0.16) 0%, rgba(9,13,22,0.03) 40%, rgba(5,8,15,0.30) 100%); }

/* per-half copy block, anchored bottom-left */
.brk-content {
  position: relative; z-index: 2; max-width: 30rem;
  padding: clamp(2rem, 5vw, 4.4rem);
  padding-bottom: clamp(2.4rem, 6vw, 5rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem;
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 1s var(--ease);
}
.loaded .brk-content { opacity: 1; transform: none; }
.loaded .brk-com .brk-content { transition-delay: 0.16s; }
.loaded .brk-res .brk-content { transition-delay: 0.30s; }
.brk-num { font-size: var(--step--1); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(246,242,232,0.78); }
h2.brk-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.6rem, 1.5rem + 4.6vw, 5rem); line-height: 1.08;
  letter-spacing: -0.02em; color: #F9F5EC; margin: 0;
}
.brk-line { font-size: var(--step-0); font-weight: 300; line-height: 1.5; color: rgba(246,242,232,0.84); max-width: 26ch; }
.brk-enter {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem;
  position: relative; padding-bottom: 5px;
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: #F9F5EC;
}
.brk-enter::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 0.32em; width: 100%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 12 Q 150 2 296 10 Q 150 18 4 12 Z' fill='%23A62B3E'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  clip-path: inset(-20% 100% -20% 0);
  transition: clip-path 0.7s var(--ease);
}
.brk-arrow { width: 16px; height: 16px; transition: transform 0.6s var(--ease); }

/* centred brand seal + page H1, floated over the seam (clicks pass through) */
.brk-overlay {
  position: absolute; z-index: 3; left: 50%; top: clamp(1.4rem, 5vh, 3.2rem);
  transform: translate(-50%, -14px);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.7rem;
  pointer-events: none; padding: 0 1rem;
  opacity: 0;
  transition: opacity 1s var(--ease) 0.05s, transform 1s var(--ease) 0.05s;
}
.loaded .brk-overlay { opacity: 1; transform: translate(-50%, 0); }
.brk-overlay::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 160%; height: 340%; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(8,8,10,0.5), transparent 70%);
  filter: blur(10px);
}
.brk-seal {
  display: block; width: clamp(40px, 5vw, 54px); aspect-ratio: 50 / 55; opacity: 0.95;
  background-color: #F4EFE3;
  -webkit-mask: var(--mk) center / contain no-repeat; mask: var(--mk) center / contain no-repeat;
}
.brk-h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); letter-spacing: 0.01em; color: #F9F5EC; margin: 0; }
.brk-tag { font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(246,242,232,0.72); }

/* ===================================================================
   Service welcome — single-panel take on the brokerage split welcome.
   Same theme, colors, and formatting: full-viewport photo under dark
   scrims, centred seal + name up top, big serif statement bottom-left.
   Used by asset-management.html and syndication.html. */
.svc-welcome {
  position: relative; display: flex; align-items: flex-end; width: 100%;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  overflow: hidden; background: var(--charcoal-2); isolation: isolate;
  color: #F6F2E8;
}
.svcw-photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.03);
}
.svcw-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(178deg, rgba(9, 12, 18, 0.5) 0%, rgba(9, 13, 22, 0.16) 38%, rgba(5, 8, 15, 0.84) 100%);
}
.svc-welcome .brk-content { max-width: 63rem; }  /* block is shrink-to-fit; roomy cap so two-line titles never rewrap at large type */
.svc-welcome .brk-line { max-width: 44ch; }
.dev-build-stage .brk-content { max-width: 46rem; }
.dev-build-stage .brk-line { max-width: 44ch; }
/* long second line ("to delivered value.") — size so both lines fit unbroken */
.dev-build-stage h2.brk-title { font-size: clamp(2.2rem, 1.1rem + 3.6vw, 4rem); }

/* ---- integrated top bar (same treatment as the home welcome) ---- */
.hero-flush .brk-split,
.hero-flush .svc-welcome { margin-top: calc(-1 * var(--nav-h)); min-height: calc(100vh - 38px); }
.hero-flush .svc-welcome { margin-top: calc(-1 * var(--nav-h)); min-height: calc(100svh - 38px); }
.hero-flush .dev-build-pin { margin-top: calc(-1 * var(--nav-h)); }
.hero-flush .brk-overlay { top: calc(var(--nav-h) + clamp(0.6rem, 2.5vh, 2rem)); }
.hero-flush .brk-split::after,
.hero-flush .svc-welcome::after,
.hero-flush .dev-build-stage::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 150px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 12, 18, 0.58), rgba(9, 12, 18, 0));
}

/* segmented Residential | Commercial switcher (on the two sub-pages) */
.brk-tabs { display: inline-flex; gap: 0.3rem; padding: 0.35rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.brk-tab {
  padding: 0.55rem 1.3rem; border-radius: var(--radius);
  font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: var(--text-2);
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.brk-tab:hover { color: var(--ink); }
.brk-tab.is-active { background: var(--charcoal); color: #F6F2E8; }
[data-theme="dark"] .brk-tab.is-active { background: var(--gold); color: #1A160E; }

/* ===================================================================
   Brokerage → sub-page logo hand-off transition
   Entry: the logo grows & glides to centre over the split.
   Arrival: the same logo flies into its home spot (the page-head mark)
   as the page opens — no white wipe.
   =================================================================== */
.brk-portal { position: fixed; inset: 0; z-index: 600; pointer-events: none; visibility: hidden; }
.brk-portal.show { visibility: visible; }
.brk-portal-veil { position: absolute; inset: 0; background: rgba(10, 10, 12, 0.34); opacity: 0; transition: opacity 0.4s var(--ease); }
.brk-portal.go-1 .brk-portal-veil { opacity: 1; }
.brk-portal-mark {
  position: absolute; left: 50%; top: 50%; width: 78px; aspect-ratio: 50 / 55;
  background-color: #F4EFE3;
  -webkit-mask: var(--mk) center / contain no-repeat; mask: var(--mk) center / contain no-repeat;
  transform: translate(-50%, -50%) scale(0.6); opacity: 0;
  will-change: transform, opacity;
}
/* the clone that flies into its home position on the destination page */
.brk-fly {
  position: fixed; left: 0; top: 0; z-index: 600; pointer-events: none;
  background-color: #F4EFE3;
  -webkit-mask: var(--mk) center / contain no-repeat; mask: var(--mk) center / contain no-repeat;
  will-change: transform, background-color;
}
@media (prefers-reduced-motion: reduce) { .brk-portal, .brk-fly { display: none !important; } }

/* hover-to-expand + dim the other half (fine pointers only) */
@media (hover: hover) and (pointer: fine) {
  .brk-split:has(.brk-res:hover) .brk-res,
  .brk-split:has(.brk-res:focus-visible) .brk-res,
  .brk-split:has(.brk-com:hover) .brk-com,
  .brk-split:has(.brk-com:focus-visible) .brk-com { flex-grow: 1.32; }

  .brk-split:has(.brk-res:hover) .brk-com,
  .brk-split:has(.brk-res:focus-visible) .brk-com,
  .brk-split:has(.brk-com:hover) .brk-res,
  .brk-split:has(.brk-com:focus-visible) .brk-res { flex-grow: 0.68; }

  .brk-half:hover .brk-photo,
  .brk-half:focus-visible .brk-photo { transform: scale(1.09); }
  .brk-half:hover .brk-enter::after,
  .brk-half:focus-visible .brk-enter::after { clip-path: inset(-20% 0 -20% 0); }
  .brk-half:hover .brk-arrow,
  .brk-half:focus-visible .brk-arrow { transform: translateX(5px); }

  .brk-split:has(.brk-half:hover) .brk-half:not(:hover) .brk-photo { filter: brightness(0.6) saturate(0.82); }
  .brk-split:has(.brk-half:hover) .brk-half:not(:hover) .brk-content { opacity: 0.7; }
}

/* stack on small screens — overlay rides above the two stacked panels */
@media (max-width: 760px) {
  .brk-split { flex-direction: column; min-height: 0; }
  .brk-half { flex: 1 1 auto; min-height: 52vh; }
  .brk-half { flex: 1 1 auto; min-height: 52svh; }
  .brk-res { border-left: 0; border-top: 1px solid rgba(246,242,232,0.16); }
  .brk-overlay { position: static; order: -1; transform: translate(0, 0); padding: 2.4rem 1rem 0.4rem; }
  .loaded .brk-overlay { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .brk-photo, .brk-content, .brk-overlay, .brk-half { transition: none !important; }
  .brk-content { opacity: 1 !important; transform: none !important; }
  .brk-overlay { opacity: 1 !important; }
}
/* keep the centring transform only where the overlay is absolutely positioned (desktop) */
@media (prefers-reduced-motion: reduce) and (min-width: 761px) {
  .brk-overlay { transform: translate(-50%, 0) !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .brk-overlay { transform: none !important; }
}

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-img { clip-path: none; }  /* images always visible — wipe reveal removed (blanked sections) */
.reveal-img.in { clip-path: inset(0 0 0 0); }
[data-stagger] > * { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
[data-stagger].in > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, [data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reveal-img { clip-path: none !important; }
  .hero .line > span, .ln { transform: none !important; }
  .eyebrow::before { width: 30px !important; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.05ms !important; }
}

/* ---------- Utilities ---------- */
.flow > * + * { margin-top: 1.2rem; }
.text-center { text-align: center; }
.mt-sm { margin-top: 1rem; } .mt-md { margin-top: 2rem; } .mt-lg { margin-top: 3.5rem; }
.tabnum { font-variant-numeric: tabular-nums; }
.gold { color: var(--accent-text); } [data-theme="dark"] .gold { color: var(--gold); }
.magnetic { will-change: transform; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--charcoal); color: #fff; padding: 0.8rem 1.2rem; z-index: 999; }
.skip-link:focus { left: 0; }

/* ===================================================================
   Brand & branch marks — faithful raster from concept PDF, recolored via mask
   =================================================================== */
.brand .mark {
  width: 34px; height: 38px; background-color: var(--ink); overflow: visible;
  -webkit-mask: var(--mk) center / contain no-repeat; mask: var(--mk) center / contain no-repeat;
  transition: transform 0.6s var(--spring), background-color 0.5s var(--ease);
}
.brand:hover .mark { transform: rotate(-6deg) scale(1.05); }
.kgmark { display: inline-block; background-color: currentColor;
  -webkit-mask: var(--mk) center / contain no-repeat; mask: var(--mk) center / contain no-repeat; }

/* Dropdown branch icons */
.dropdown a .di {
  width: 27px; height: 29px; background-color: var(--gold); margin-top: 1px; flex-shrink: 0;
  -webkit-mask: var(--mk) center / contain no-repeat; mask: var(--mk) center / contain no-repeat;
  transition: transform 0.4s var(--spring);
}
.dropdown a:hover .di { transform: scale(1.08); }

/* Pillar branch mark */
.pillar .pmark {
  display: block; width: clamp(42px, 4.5vw, 56px); aspect-ratio: 50 / 55; background-color: var(--gold); flex-shrink: 0;
  -webkit-mask: var(--mk) center / contain no-repeat; mask: var(--mk) center / contain no-repeat;
  transition: transform 0.6s var(--spring);
}
.pillar:hover .pmark { transform: translateY(-5px) scale(1.06) rotate(-3deg); }
.pillar .pnum { display: block; margin-top: 0.6rem; font-size: var(--step--1); }

/* Service page hero mark */
.svc-mark-lg {
  display: inline-block; width: clamp(72px, 11vw, 128px); aspect-ratio: 50 / 55; background-color: var(--gold);
  -webkit-mask: var(--mk) center / contain no-repeat; mask: var(--mk) center / contain no-repeat;
  transition: transform 0.4s var(--ease);
}
.svc-mark-lg:hover { transform: scale(1.05); }
@keyframes svcShimmer { from { background-position: 135% 0; } to { background-position: -55% 0; } }  /* still used by .hh-seal on the home hero */

/* Brokerage entry: the mark lands cream (inline styles set by flyIn in
   main.js), then the existing .shimmer sweep carries it to burgundy. */

/* ===================================================================
   Immersive hero + living, cursor-reactive background
   =================================================================== */
.hero-immersive {
  position: relative; min-height: clamp(540px, 84vh, 880px);
  display: grid; place-items: center; text-align: center; overflow: hidden;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.hero-inner { position: relative; z-index: 2; max-width: 60rem; margin-inline: auto; padding-inline: var(--gutter); }
.hero-immersive .eyebrow { justify-content: center; margin-bottom: 1.1rem; }

.living-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.living-bg .blob { position: absolute; border-radius: 50%; filter: blur(72px); will-change: transform; }
.living-bg .b1 { width: 46vmax; height: 46vmax; left: -10vmax; top: -12vmax; background: radial-gradient(circle, rgba(201,168,76,0.32), transparent 66%); animation: drift1 19s var(--ease-in-out) infinite alternate; }
.living-bg .b2 { width: 40vmax; height: 40vmax; right: -12vmax; bottom: -14vmax; background: radial-gradient(circle, rgba(33,28,21,0.16), transparent 66%); animation: drift2 23s var(--ease-in-out) infinite alternate; }
.living-bg .b3 { width: 30vmax; height: 30vmax; right: 14vmax; top: -8vmax; background: radial-gradient(circle, rgba(201,168,76,0.2), transparent 66%); animation: drift3 17s var(--ease-in-out) infinite alternate; }
.living-bg .glow {
  position: absolute; width: 52vmax; height: 52vmax; left: 50%; top: 50%; margin: -26vmax 0 0 -26vmax;
  background: radial-gradient(circle, rgba(201,168,76,0.24), transparent 60%);
  transform: translate(calc((var(--mx, 0.5) - 0.5) * 64vw), calc((var(--my, 0.5) - 0.5) * 60vh));
  will-change: transform;
}
.living-bg .grain {
  position: absolute; inset: -25%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.045; mix-blend-mode: multiply;
}
[data-theme="dark"] .living-bg .b2 { background: radial-gradient(circle, rgba(210,180,92,0.1), transparent 66%); }
[data-theme="dark"] .living-bg .grain { mix-blend-mode: overlay; opacity: 0.07; }
@keyframes drift1 { to { transform: translate(8vw, 6vh) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-7vw, -5vh) scale(1.08); } }
@keyframes drift3 { to { transform: translate(-5vw, 8vh) scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .living-bg .blob { animation: none; } }

/* ===== Global cursor halo — soft chromatic aura that follows the pointer on every page,
   stretching gently in the direction of travel (a slight trailing flow, not a rigid circle) ===== */
.cursor-halo {
  position: fixed; left: 0; top: 0; z-index: 4; pointer-events: none;
  width: 23vmax; height: 23vmax; margin: -11.5vmax 0 0 -11.5vmax; border-radius: 50%;
  filter: blur(30px); mix-blend-mode: multiply;
  opacity: 0; transition: opacity 0.5s ease; will-change: transform;
  background:
    radial-gradient(circle at 50% 50%, rgba(166,193,247,0.55), rgba(166,193,247,0.17) 45%, transparent 67%),
    radial-gradient(circle at 50% 50%, rgba(229,206,250,0.4), transparent 58%);
}
[data-theme="dark"] .cursor-halo {
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 50% 50%, rgba(150,180,255,0.5), rgba(150,180,255,0.14) 45%, transparent 67%),
    radial-gradient(circle at 50% 50%, rgba(236,206,255,0.32), transparent 58%);
}
@media (prefers-reduced-motion: reduce) { .cursor-halo { display: none !important; } }
@media (hover: none), (pointer: coarse) { .cursor-halo { display: none !important; } }


/* "Passion for Life" — cursor-reactive letters */
.passion { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 8vw, 6.4rem); line-height: 1.05; letter-spacing: -0.01em; white-space: nowrap; }
.passion .wd { display: inline-block; white-space: nowrap; }
.passion .ltr { display: inline-block; }
.passion .sp { display: inline-block; width: 0.26em; }
.passion .em { font-style: italic; color: var(--gold); }
.hero-sub { font-size: var(--step-1); color: var(--ink-2); max-width: 48ch; margin: 1.9rem auto 0; font-weight: 300; }
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.6rem; }

/* ===== Deep-blue immersive hero — background inflects with the cursor ===== */
.hero-immersive {
  background: radial-gradient(150% 150% at 50% 8%, #172056 0%, #0C1238 52%, #050818 100%);
  color: #F2EFE5;
}
/* matching trailing dash after "REAL ESTATE REIMAGINED" */
.hero-immersive .eyebrow::after {
  content: ""; display: inline-block; width: 30px; height: 1.5px; background: var(--gold);
}
.hero-immersive .living-bg {
  transform: translate(calc((var(--mx, 0.5) - 0.5) * -2.6%), calc((var(--my, 0.5) - 0.5) * -2.6%));
}
.hero-immersive .b1 { background: radial-gradient(circle, rgba(86,118,245,0.55), transparent 66%); }
.hero-immersive .b2 { background: radial-gradient(circle, rgba(44,74,190,0.5), transparent 66%); }
.hero-immersive .b3 { background: radial-gradient(circle, rgba(138,162,255,0.42), transparent 66%); }
.hero-immersive .glow {
  width: 62vmax; height: 62vmax; margin: -31vmax 0 0 -31vmax;
  background: radial-gradient(circle, rgba(104,146,255,0.36), rgba(104,146,255,0.07) 40%, transparent 62%);
  transform: translate(calc((var(--mx, 0.5) - 0.5) * 84vw), calc((var(--my, 0.5) - 0.5) * 80vh));
}
.hero-immersive .grain { mix-blend-mode: overlay; opacity: 0.09; }
.hero-immersive .eyebrow { color: var(--gold); }
.hero-immersive .eyebrow::before { background: var(--gold); }
.hero-immersive .passion { color: #F4F1E7; }
.hero-immersive .passion .em { color: var(--gold); }
.hero-immersive .hero-sub { color: rgba(244,241,231,0.74); }
.hero-immersive .btn-primary { background: var(--gold); color: #06091C; }
.hero-immersive .btn-primary::after { background: #fff; }
.hero-immersive .btn-primary:hover { color: #06091C; }
.hero-immersive .btn-ghost { color: #F2EFE5; border-color: rgba(242,239,229,0.32); }
.hero-immersive .btn-ghost::after { background: rgba(255,255,255,0.12); }
.hero-immersive .btn-ghost:hover { color: #fff; border-color: rgba(242,239,229,0.6); }

/* Cursor glow tracks the pointer exactly (no parallax offset) */
/* Soft lighter-blue cloud follows the cursor (haoqi-style), kept fluid by the water filter */
.hero-immersive .living-bg { filter: url(#water); }
.hero-immersive .glow {
  width: 92vmax; height: 70vmax; margin: -35vmax 0 0 -46vmax; filter: blur(20px); border-radius: 50%;
  background:
    radial-gradient(42% 52% at 36% 40%, rgba(122,152,255,0.55), transparent 66%),
    radial-gradient(46% 40% at 66% 60%, rgba(96,128,248,0.46), transparent 70%),
    radial-gradient(30% 34% at 54% 28%, rgba(152,178,255,0.4), transparent 72%);
  transform: translate(calc((var(--mx, 0.5) - 0.5) * 70vw), calc((var(--my, 0.5) - 0.5) * 64vh));
}
.hero-immersive .grain {
  opacity: 0.13; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Sketch / blueprint overlay */
.hero-immersive .sketch { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-immersive .sketch .grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(244,241,231,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,241,231,0.07) 1px, transparent 1px);
  background-size: 33.333% 33.333%; background-position: -0.5px -0.5px;
}
.hero-immersive .sketch .x { position: absolute; width: 15px; height: 15px; transform: translate(-50%, -50%); color: rgba(244,241,231,0.4); }
.hero-immersive .sketch .x::before, .hero-immersive .sketch .x::after { content: ""; position: absolute; background: currentColor; }
.hero-immersive .sketch .x::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.hero-immersive .sketch .x::after { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }
.cursor-coords {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 2;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.72rem; letter-spacing: 0.2em;
  color: rgba(244,241,231,0.5); font-variant-numeric: tabular-nums; pointer-events: none;
}

/* Rolling-film scroll */
[data-roll] { will-change: transform; transform-origin: center center; backface-visibility: hidden; }
@media (prefers-reduced-motion: reduce) { [data-roll] { transform: none !important; } }

/* ===== Light treatment for the former dark bands (stats + CTA) ===== */
.stats-band { background: var(--surface); color: var(--ink); border-block: 1px solid var(--border); }
.stats-band::before { display: none; }
.stats-band .stat .n { color: var(--accent-text); }
.stats-band .stat .l { color: var(--text-2); }
.stats-band .stat .d { color: var(--text-2); }
.stats-band .note { color: var(--text-2) !important; }
[data-theme="dark"] .stats-band { background: var(--surface); }
[data-theme="dark"] .stats-band .stat .n { color: var(--gold); }
/* hover microinteraction on each stat — it lifts, the number turns burgundy, an accent line grows */
.stats-band .stat { transition: transform 0.45s var(--ease); }
.stats-band .stat .n { display: inline-block; position: relative; transition: color 0.35s var(--ease); }
.stats-band .stat:hover { transform: translateY(-6px); }
/* the number turns burgundy AND a light glisten sweeps across it (no re-count) */
.stats-band .stat:hover .n {
  color: transparent;
  -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(110deg, var(--burgundy) 42%, #f0c2ca 50%, var(--burgundy) 58%);
  background-size: 280% 100%; background-position: -45% 0;
  animation: statGlisten 1.5s ease -0.35s;
}
@keyframes statGlisten { from { background-position: 135% 0; } to { background-position: -45% 0; } }
@media (prefers-reduced-motion: reduce) { .stats-band .stat:hover .n { animation: none; color: var(--burgundy); background-image: none; } }

.cta-band { background: var(--surface); color: var(--ink); border: 1px solid var(--border); }
.cta-band::before { background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 62%); }
.cta-band h2 { color: var(--ink); }
.cta-band p { color: var(--text-2); }
.cta-band .eyebrow { color: var(--accent-text); }
[data-theme="dark"] .cta-band { background: var(--surface); border-color: var(--line); }
[data-theme="dark"] .cta-band h2 { color: var(--ink); }
.cta-band .btn-ghost { color: var(--ink); border-color: var(--line-2); }
.cta-band .btn-ghost:hover { color: var(--accent-text); border-color: var(--gold); }

/* ===== Reflective / chromatic silver hero — cursor reads as a shine ===== */
.hero-immersive {
  background:
    linear-gradient(102deg, transparent 22%, rgba(255,255,255,0.34) 45%, rgba(255,255,255,0.06) 54%, transparent 62%),
    conic-gradient(from 210deg at 35% 22%, rgba(164,196,255,0.17), rgba(228,206,255,0.13), rgba(186,255,238,0.10), rgba(164,196,255,0.17)),
    radial-gradient(135% 130% at 50% 0%, #F5F7FC 0%, #D0D7E4 44%, #A1AABC 100%);
  color: #20242A;
}
.hero-immersive .blob { display: none; }
.hero-immersive .glow {
  width: 58vmax; height: 46vmax; margin: -23vmax 0 0 -29vmax; filter: blur(7px); border-radius: 50%;
  mix-blend-mode: screen;
  background:
    radial-gradient(42% 48% at 50% 50%, rgba(255,255,255,0.98), rgba(255,255,255,0.22) 28%, transparent 48%),
    radial-gradient(48% 44% at 50% 50%, rgba(188,214,255,0.5), transparent 56%),
    radial-gradient(38% 38% at 50% 50%, rgba(255,200,236,0.38), transparent 60%);
  transform: translate(calc((var(--mx, 0.5) - 0.5) * 100vw), calc((var(--my, 0.5) - 0.5) * 100vh)) rotate(var(--gr, 0rad)) scale(var(--gsx, 1), var(--gsy, 1));
}

/* Animated construction motif: house builds, then commercial towers rise bottom-up */
.hero-motif { width: clamp(190px, 24vw, 312px); margin: 0 auto 1.6rem; }
.hero-motif svg { width: 100%; height: auto; overflow: visible; }
.hero-motif .ln { stroke: #33373D; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: kgDraw 1.5s ease forwards; }
.hero-motif .roof  { animation-delay: 0.1s; }
.hero-motif .walls { animation-delay: 0.6s; }
.hero-motif .ceil  { animation-delay: 1.05s; }
.hero-motif .door  { animation-delay: 1.3s; }
.hero-motif .dot { fill: var(--burgundy); transform: scale(0); transform-box: fill-box; transform-origin: center; animation: kgPop 0.5s ease forwards; }
.hero-motif .hd1 { animation-delay: 0.45s; }
.hero-motif .hd2 { animation-delay: 0.6s; }
.hero-motif .hd3 { animation-delay: 0.75s; }
.hero-motif .hd4 { animation-delay: 1.05s; }
.hero-motif .hd5 { animation-delay: 1.2s; }
/* commercial floors — rise from the bottom up after the house */
.hero-motif .floor { fill: rgba(40,44,50,0.05); stroke: #33373D; stroke-width: 2; transform: scaleY(0); transform-box: fill-box; transform-origin: center bottom; opacity: 0; animation: kgRise 0.5s ease forwards; }
.hero-motif .lv1 { animation-delay: 2.9s; }
.hero-motif .lv2 { animation-delay: 3.3s; }
.hero-motif .lv3 { animation-delay: 3.7s; }
.hero-motif .lv4 { animation-delay: 4.1s; }
.hero-motif .lv5 { animation-delay: 4.5s; }
.hero-motif .lv6 { animation-delay: 4.9s; }
.hero-motif .bdot.bL { animation-delay: 5.0s; }
.hero-motif .bdot.bR { animation-delay: 5.3s; }
@keyframes kgDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes kgPop { 0% { transform: scale(0); } 70% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes kgRise { 0% { transform: scaleY(0); opacity: 0; } 45% { opacity: 1; } 100% { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero-motif .ln { stroke-dashoffset: 0; animation: none; }
  .hero-motif .dot { transform: scale(1); animation: none; }
  .hero-motif .floor { transform: scaleY(1); opacity: 1; animation: none; }
}

/* Big building backdrop behind the hero words — pieces fly in from the sides, bottom-up.
   The two towers are real photos sliced into strips; each strip slides in like the old rects.
   The remaining sketch art (houses, trees, crane) stays ghosted at the old 13%. */
.hero-build { position: absolute; inset: 0; z-index: 1; display: grid; place-items: end center; padding-bottom: 14vh; pointer-events: none; transform-origin: center bottom; will-change: transform, opacity; }
.hero-build svg { width: min(1340px, 100vw); height: auto; overflow: visible; }
.hero-build .sketch { opacity: 0.13; }
.hero-build .towers { opacity: 0.9; }
.hero-build .sketch > *, .hero-build .towers image {
  stroke: #2A2D33; stroke-width: 5; fill: none; opacity: 0;
  transform: translateX(var(--x, 0));
  animation: bldgIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s) forwards;
}
.hero-build .slab, .hero-build .col { fill: rgba(42,45,51,0.10); }
@keyframes bldgIn { to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .hero-build .sketch > *, .hero-build .towers image { opacity: 1 !important; transform: none !important; animation: none !important; } }

/* ===== Full-bleed photographic welcome hero — brokerage-page language:
   one professional image covering the whole screen, dark scrim, cream type ===== */
.home-hero {
  position: relative; min-height: calc(100vh - var(--nav-h));
  position: relative; min-height: calc(100svh - var(--nav-h));
  display: grid; place-items: center; text-align: center;
  overflow: hidden; background: var(--charcoal-2); isolation: isolate;
}
.hh-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.hh-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(9,12,18,0.26) 0%, rgba(9,12,18,0.21) 12%, rgba(9,12,18,0.16) 26%, rgba(9,12,18,0.12) 44%, rgba(8,10,15,0.13) 58%, rgba(7,9,14,0.17) 70%, rgba(7,9,13,0.23) 80%, rgba(6,8,12,0.32) 90%, rgba(6,8,12,0.44) 100%); }
.hh-content { position: relative; z-index: 2; max-width: 62rem; padding: clamp(3.5rem, 9vh, 6rem) var(--gutter); display: flex; flex-direction: column; align-items: center; }
.hh-seal {
  display: block; width: clamp(44px, 5vw, 58px); aspect-ratio: 40 / 44; background-color: #F4EFE3; opacity: 0.95;
  -webkit-mask: var(--mk) center / contain no-repeat; mask: var(--mk) center / contain no-repeat;
  margin-bottom: 1.5rem;
  /* a bright streak parked off to the side; .shimmer sweeps it across the mark once on load */
  background-image: linear-gradient(108deg, #F4EFE3 40%, #FFFFFF 50%, #F4EFE3 60%);
  background-size: 300% 100%; background-position: 135% 0;
}
.hh-seal.shimmer { animation: svcShimmer 1.5s cubic-bezier(0.32, 0, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { .hh-seal.shimmer { animation: none; } }
.home-hero .eyebrow { justify-content: center; color: rgba(246,242,232,0.82); margin-bottom: 1.1rem; }
.home-hero .eyebrow::before { background: rgba(246,242,232,0.55); }
.home-hero .eyebrow::after { content: ""; display: inline-block; width: 30px; height: 1.5px; background: rgba(246,242,232,0.55); }
.home-hero .passion { color: #F9F5EC; }
.home-hero .passion .em { color: var(--burgundy); }
.home-hero .hero-sub { color: rgba(246,242,232,0.86); }
.home-hero .btn-primary {
  /* liquid glass: translucent tint only — no backdrop blur, the footage stays
     crisp through the button (the "pre-frost" look, kept permanently) */
  background: rgba(18, 22, 29, 0.34); color: #F6F2E8; border: 1px solid rgba(246, 242, 232, 0.3);
  box-shadow: none; overflow: hidden;
  transition: transform 0.4s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.home-hero .btn-primary::after { inset: 0; background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,0.26) 50%, transparent 66%); transform: translateX(-135%); transition: none; }
.home-hero .btn-primary:hover { color: #F6F2E8; transform: translateY(-2px); background: rgba(18, 22, 29, 0.5); border-color: rgba(246, 242, 232, 0.5); }
/* shimmer sweeps once, left to right — hover-out snaps back off-button with no reverse pass */
.home-hero .btn-primary:hover::after { transform: translateX(135%); transition: transform 0.9s var(--ease); }

/* ===== Video background for the welcome hero =====
   Clips are declared in data-clips on the hero section (see the SWAP note
   in index.html). Two <video> buffers dissolve into each other over 1s;
   reduced-motion and small screens keep the static poster only. */
.home-hero picture { display: contents; }
.home-hero picture source { display: none; }  /* display:contents promotes it to a grid item otherwise — steals a row and off-centres the copy */  /* poster wrapper must not create a grid row — it was pushing the centred copy down */
.vh-poster, .vh-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.vh-video { opacity: 0; transition: opacity 1.6s var(--ease); }
.vh-video.is-active { opacity: 1; }
.vh-poster { transition: opacity 0.8s var(--ease) 0.3s; }
[data-clips][data-live] .vh-poster { opacity: 0; }
[data-clips][data-poster-only] .vh-video { display: none; }
[data-clips][data-poster-only] .vh-poster { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .vh-video { display: none !important; }
  .vh-poster { opacity: 1 !important; transition: none !important; }
}

/* ===== Pinned hero zoom scene ===== */
.hero-pin { position: relative; height: 260vh; }
.hero-stage { position: sticky; top: 0; height: 100vh; min-height: 100vh; padding-block: 0; }
.zoom-wrap { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; transform-origin: 50% 72%; }
/* keep SVG strokes re-rasterized crisply under the large zoom — no cached GPU bitmap, no layer-promoting hints */
.focal-house svg { shape-rendering: geometricPrecision; }
.zoom-wrap .hero-inner { position: relative; z-index: 1; margin-top: -24vh; }

/* Company logo (replaces the house) — rotates clockwise & is the zoom-through focal */
.hero-logo { width: clamp(56px, 6vw, 86px); margin: 2.4rem auto 0; pointer-events: none; }
.hero-logo .logomark {
  display: block; width: 100%; aspect-ratio: 40 / 44; background-color: var(--burgundy);
  -webkit-mask: url(/assets/mark-group.png) center / contain no-repeat; mask: url(/assets/mark-group.png) center / contain no-repeat;
  will-change: transform; transform-origin: center center;
}

/* City marquee pinned to the top of the silver hero */
.hero-marquee { position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding-block: 1rem; border-top: 0; background: color-mix(in srgb, var(--bg) 30%, transparent); }
.hero-marquee .marquee-track span { font-size: var(--step-1); }

/* decorative houses in the backdrop */
.hero-build .dhouse { stroke: #2A2D33; stroke-width: 3; fill: none; }
.hero-build .dtree { stroke: #2A2D33; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hero-build .dcrane { stroke: #2A2D33; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Central focal house — the original self-drawing loop; its borders zoom past
   the screen edges WITHOUT fading. Closed door = solid black; the interior it
   reveals when it swings open is white (becomes the white next page). */
.focal-house { position: absolute; left: 0; right: 0; bottom: 15.5%; display: grid; place-items: center; z-index: 0; pointer-events: none; }
.focal-house svg { width: clamp(128px, 15vw, 210px); height: auto; overflow: visible; opacity: 1; }
.focal-house .fh { stroke: #24262B; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; animation: fhDraw 5.4s ease-in-out infinite; }
.focal-house .roof { animation-delay: 0s; }
.focal-house .body { animation-delay: 0.45s; }
.focal-house .fdot { fill: var(--burgundy); transform: scale(0); transform-box: fill-box; transform-origin: center; animation: fhPop 5.4s ease-in-out infinite; }
.focal-house .doorway { fill: #FFFFFF; }
.focal-house .door { transform-box: fill-box; transform-origin: left center; }
.focal-house .dpanel { fill: #0A0B0D; stroke: #0A0B0D; stroke-width: 2; }
.focal-house .dknob { fill: #D9DBDF; stroke: #0A0B0D; stroke-width: 0.5; }
/* draw in → hold → retract — no opacity in the loop, so the lines never fade */
@keyframes fhDraw { 0% { stroke-dashoffset: 1; } 24% { stroke-dashoffset: 0; } 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes fhPop { 0%, 12% { transform: scale(0); } 26% { transform: scale(1.3); } 34%, 80% { transform: scale(1); } 96%, 100% { transform: scale(0); } }

/* white portal — fills the screen as we pass through the open door into the next (white) page */
.exit-white { position: absolute; inset: 0; z-index: 6; background: #FFFFFF; opacity: 0; pointer-events: none; will-change: opacity; }

@media (prefers-reduced-motion: reduce) {
  .hero-pin { height: auto; } .hero-stage { position: relative; height: 90vh; min-height: 560px; padding-block: 0; overflow: hidden; }
  .focal-house .fh { stroke-dashoffset: 0; animation: none; } .focal-house .fdot { transform: scale(1); animation: none; }
  .exit-white { display: none; }
}

/* ===== Service pillars fall in like blocks — scroll-linked & reversible (driven by JS) ===== */
[data-fall] .pillar, [data-fall] .sec-head { opacity: 0; will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { [data-fall] .pillar, [data-fall] .sec-head { opacity: 1 !important; transform: none !important; } }
.hero-immersive .grain { mix-blend-mode: overlay; opacity: 0.025; }
.hero-immersive .eyebrow { color: #474E58; }
.hero-immersive .eyebrow::before, .hero-immersive .eyebrow::after { background: #6E757F; }
.hero-immersive .passion { color: #1C1F25; }
.hero-immersive .passion .em { color: var(--burgundy); font-style: italic; }
.hero-immersive .hero-sub { color: #2C3037; }
/* "Recommended for You" uses the exact same treatment as the nav "Contact Us" button */
.hero-immersive .btn-primary {
  background: var(--charcoal); color: #F6F2E8; box-shadow: 0 12px 30px -16px rgba(20,24,28,0.5);
  overflow: hidden; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.hero-immersive .btn-primary::after {
  inset: 0; background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,0.26) 50%, transparent 66%);
  transform: translateX(-135%); transition: transform 0.9s var(--ease);
}
.hero-immersive .btn-primary:hover { color: #F6F2E8; transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(0,0,0,0.45); }
.hero-immersive .btn-primary:hover::after { transform: translateX(135%); }
[data-theme="dark"] .hero-immersive .btn-primary:hover { color: #1A160E; }

/* ===== Same silver-glint + lift hover on the nav "Contact Us" and the Services dropdown options ===== */
.nav-cta { overflow: hidden; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.nav-cta::after {
  inset: 0; background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,0.26) 50%, transparent 66%);
  transform: translateX(-135%); transition: transform 0.9s var(--ease);
}
.nav-cta:hover { color: #F6F2E8; transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(0,0,0,0.45); }
.nav-cta:hover::after { transform: translateX(135%); }
[data-theme="dark"] .nav-cta:hover { color: #1A160E; }

.dropdown a { overflow: hidden; position: relative; }
.dropdown a > * { position: relative; z-index: 1; }
.dropdown a::after {
  display: block; content: ""; position: absolute; inset: 0; width: auto; height: auto; z-index: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 36%, rgba(156,176,214,0.42) 50%, transparent 64%);
  transform: translateX(-130%); transition: none;
}
.dropdown a:hover::after { transform: translateX(130%); transition: transform 0.7s var(--ease); }
.hero-immersive .btn-ghost { color: #20242A; border-color: rgba(32,36,42,0.4); }
.hero-immersive .btn-ghost::after { background: rgba(32,36,42,0.08); }
.hero-immersive .btn-ghost:hover { color: #0F1115; border-color: rgba(32,36,42,0.7); }

/* former gold CTA buttons -> white */
.cta-band .btn-primary { background: #ffffff; color: var(--ink); border: 1px solid var(--burgundy); box-shadow: var(--shadow-sm); }
.cta-band .btn-primary::after { background: var(--charcoal); }
.cta-band .btn-primary:hover { color: #ffffff; border-color: var(--charcoal); }

/* ===== Burgundy accents: "Life", branch symbols, marquee stars ===== */
:root { --burgundy: #7A1F2D; }
.dropdown a .di, .pillar .pmark, .svc-mark-lg { background-color: var(--burgundy); }
.marquee-track span::after { color: var(--burgundy); }
.brand .mark { background-color: var(--burgundy); }

/* ===== Homepage: header integrated into the video hero =====
   body.hero-flush pulls the hero up behind the topbar + nav so the clips
   run to the very top of the page. Both bars sit transparent over the
   video; once the page scrolls (.scrolled, y > 20) the sticky nav gets
   its frosted background back. Other pages keep the standard header. */
.hero-flush .topbar { position: relative; z-index: 5; background: var(--charcoal); /* matches the Contact Us button */ }
.hero-flush .topbar, .hero-flush .topbar a { color: rgba(244, 239, 227, 0.8); }
.hero-flush .topbar a:hover { color: var(--gold); }
.hero-flush .nav:not(.scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero-flush .nav:not(.scrolled) .brand .wordmark,
.hero-flush .nav:not(.scrolled) .nav-links > a,
.hero-flush .nav:not(.scrolled) .nav-links .has-drop > button,
.hero-flush .nav:not(.scrolled) .icon-btn { color: #F6F2E8; }
.hero-flush .nav:not(.scrolled) .nav-links > a[aria-current="page"] { color: #FFFFFF; }
.hero-flush .nav:not(.scrolled) .brand .mark { background-color: #F4EFE3; }
.hero-flush .nav:not(.scrolled) .icon-btn { border-color: rgba(246, 242, 232, 0.32); }
.hero-flush .nav:not(.scrolled) .nav-cta { border: 1px solid rgba(246, 242, 232, 0.24); }
.hero-flush .home-hero { margin-top: calc(-1 * var(--nav-h)); min-height: calc(100vh - 38px); }
.hero-flush .home-hero { margin-top: calc(-1 * var(--nav-h)); min-height: calc(100svh - 38px); }
.hero-flush .hh-scrim { background: linear-gradient(180deg, rgba(9, 12, 18, 0.68) 0%, rgba(9, 12, 18, 0.38) 18%, rgba(9, 12, 18, 0.26) 44%, rgba(6, 8, 12, 0.72) 100%); }
/* constant aura glow around the seal above the eyebrow */
.home-hero .hh-seal { filter: drop-shadow(0 0 10px rgba(246, 242, 232, 0.66)) drop-shadow(0 0 22px rgba(246, 242, 232, 0.42)) drop-shadow(0 0 52px rgba(246, 242, 232, 0.26)); }

/* ===== Development page: scroll-driven construction hero =====
   A pinned full-viewport scene; scrolling the tall wrapper advances the
   locked-camera aerial through the 8 construction stage frames. */
.dev-build-pin { position: relative; height: 480vh; }
.dev-build-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  background: var(--charcoal-2); display: grid; align-items: end; isolation: isolate;
}
.db-frame { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.45s var(--ease); }
.db-frame.is-on { opacity: 1; }
.db-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(9, 12, 18, 0.42) 0%, rgba(9, 12, 18, 0.16) 42%, rgba(6, 8, 12, 0.7) 100%); }
.db-content { position: relative; z-index: 2; padding-bottom: clamp(2.2rem, 6vh, 4.5rem); color: #F6F2E8; }
.db-content .breadcrumb, .db-content .breadcrumb a { color: rgba(246, 242, 232, 0.72); }
.db-content .breadcrumb a:hover { color: var(--gold); }
.db-content .eyebrow { color: rgba(246, 242, 232, 0.82); }
.db-content .eyebrow::before { background: rgba(246, 242, 232, 0.55); }
.db-content h1 { color: #F9F5EC; }
.db-content .lead { color: rgba(246, 242, 232, 0.86); }
.db-content .svc-mark-lg { background-color: #F4EFE3; }
.db-progress { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.db-stage-num { font-variant-numeric: tabular-nums; font-size: 0.78rem; letter-spacing: 0.14em; color: var(--gold); }
.db-track { position: relative; flex: 0 1 320px; height: 2px; background: rgba(246, 242, 232, 0.25); border-radius: 1px; overflow: hidden; }
.db-fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: var(--gold); }
.db-stage-label { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246, 242, 232, 0.88); min-width: 8ch; }
.db-cue { margin-top: 1.4rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246, 242, 232, 0.6); }
.db-cue span { display: inline-block; animation: dbCue 1.8s var(--ease) infinite; }
@keyframes dbCue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .db-frame { transition: none; }
  .db-cue span { animation: none; }
}


/* Residential listings: Active badge + expandable archive */
.prop-card .badge.active { background: var(--burgundy, #7A1F2D); color: #F6F2E8; border-color: transparent; }
.listings-archive[hidden] { display: none; }


/* Home hero headline: brighter red for the em (no glow) */
.home-hero .passion .em { color: #F9F5EC; }  /* white — matches the rest of the headline */


/* Hero clips: definition lift (micro contrast/saturation) + a light gloss sheen */
.home-hero .vh-video, .home-hero .vh-poster {
  filter: contrast(1.05) saturate(1.09) brightness(1.12);
}
.vh-gloss {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* third layer counters the footage's left-lit bias (all three clips measure
     6-15% darker on the right) with a gentle rightward lift */
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.06) 62%, rgba(255,255,255,0.15) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 30%, rgba(255,255,255,0) 50%),
    radial-gradient(90% 40% at 50% -8%, rgba(255,255,255,0.10), transparent 60%);
}
@media (prefers-reduced-motion: reduce) { .home-hero .vh-poster { filter: contrast(1.05) saturate(1.09) brightness(1.12); } }


/* Hero seal: same springy tilt microinteraction as the nav brand mark */
.hh-seal { transition: transform 0.6s var(--spring), opacity 0.4s var(--ease); cursor: default; }
.hh-seal:hover { transform: rotate(-6deg) scale(1.06); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hh-seal:hover { transform: none; } }


/* Services dropdown: the current page's item stays ink on the light panel
   (the transparent-nav white rule above no longer reaches inside the dropdown) */
.dropdown a[aria-current="page"] { color: var(--ink); }
.dropdown a[aria-current="page"] .dt { color: var(--ink); }


/* =========================== V2.1 layer =========================== */
/* KG-red dot cursor (replaces the blue halo) */
.cursor-halo {
  width: 12px; height: 12px; margin: -6px 0 0 -6px;
  filter: none; mix-blend-mode: normal; border-radius: 50%;
  background: #A62B3E;
}
[data-theme="dark"] .cursor-halo { mix-blend-mode: normal; background: #C24557; }

/* headline: no italics; hovering draws a tapered KG-red brush stroke under "Kaleb Group." */
.home-hero .passion .em { font-style: normal; position: relative; display: inline-block; }
.home-hero .passion .em::after {
  content: ""; position: absolute; left: 0.02em; right: 0.05em; bottom: -0.085em;
  height: 0.19em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 12 Q 150 2 296 10 Q 150 18 4 12 Z' fill='%23A62B3E'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  clip-path: inset(-20% 100% -20% 0);
  transition: clip-path 0.7s var(--ease);
}
.home-hero .passion:hover .em::after { clip-path: inset(-20% 0 -20% 0); }

/* mobile: allow the headline to wrap instead of clipping */
@media (max-width: 760px) { .passion { white-space: normal; } }

/* build slideshow */
.build-slider { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 2560 / 1428; background: var(--surface-2); box-shadow: 0 0 0 1px var(--border); outline: none; }
.build-slider .bs-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s var(--ease); }
.build-slider .bs-frame.is-on { opacity: 1; z-index: 2; }
/* outgoing frame holds beneath the incoming one so stages dissolve into each other */
.build-slider .bs-frame.bs-prev { opacity: 1; z-index: 1; transition: none; }
.bs-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, #101318 55%, transparent); backdrop-filter: blur(6px);
  color: #F6F2E8; border: 1px solid rgba(246, 242, 232, 0.28); cursor: pointer;
  transition: background-color 0.3s var(--ease), transform 0.3s var(--spring);
}
.bs-arrow svg { width: 22px; height: 22px; }
.bs-arrow:hover { background: color-mix(in srgb, #101318 78%, transparent); transform: translateY(-50%) scale(1.07); }
.bs-prev { left: 1rem; } .bs-next { right: 1rem; }
.bs-caption {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.7rem;
  background: color-mix(in srgb, #101318 62%, transparent); backdrop-filter: blur(6px);
  color: #F6F2E8; border-radius: var(--radius); padding: 0.55rem 0.9rem;
  font-size: 0.78rem; letter-spacing: 0.08em;
}
.bs-caption .bs-num { font-family: var(--font-display); font-size: 1.05rem; color: #E8C9CF; }
.bs-caption .bs-name { text-transform: uppercase; font-weight: 600; }
.bs-caption .bs-count { opacity: 0.65; }
@media (max-width: 700px) { .bs-arrow { width: 38px; height: 38px; } }


/* Bottom CTA buttons: hover = quick slight enlarge only — no fill sweep, no colour change */
.cta-band .btn { transition: transform 0.22s var(--spring); }
.cta-band .btn::after { display: none; }
.cta-band .btn:hover { transform: scale(1.05); box-shadow: var(--shadow-sm); }
/* text stays dark on hover (the white-text rule paired with the removed fill sweep) */
.cta-band .btn-primary { border: 1px solid var(--line); }
.cta-band .btn-primary:hover { color: var(--ink); border-color: var(--line); }
@media (prefers-reduced-motion: reduce) { .cta-band .btn:hover { transform: none; } }




/* ============ Sharp corporate treatment: Avenir Next Demi Bold, tight tracking ============ */
.passion,
.page-head h1,
.sec-title,
.split h2,
.cta-band h2,
.brk-h1,
.brk-title,
.footer-huge {
  font-weight: 500;
  letter-spacing: -0.015em;
}


/* ============ Residential transaction tiles (photo-less) ============ */
.tx-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.7rem 1.8rem; display: flex; flex-direction: column; gap: 0.4rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.tx-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--border) 40%, var(--text-2)); }
.tx-card h3 { margin: 0; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); }
.tx-card .loc { color: var(--text-2); font-size: var(--step--1); }

/* ============ Closing rule: anchors floating split-text columns (mirrors the eyebrow line) ============ */
.split > .flow::after,
.split > div > .flow::after {
  content: ""; display: block; height: 1.5px; background: var(--gold);
  width: 0; margin: 2.2rem 0 0 auto;
  transition: width 0.9s var(--ease) 0.35s;
}
.split > .flow.in::after,
.split > div > .flow.in::after,
.split .reveal.in .flow::after { width: 30px; }

/* ============ Header: mirror-even three-column grid, centered on Our Story ============ */
@media (min-width: 1041px) {
  .topbar-inner { max-width: none; padding-inline: clamp(2rem, 5vw, 4.4rem); }
  .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; justify-content: stretch;
    max-width: none; padding-inline: calc(clamp(2rem, 5vw, 4.4rem) + 0.75rem); }
  .nav-inner .brand { justify-self: start; }
  .nav-inner .nav-links {
    justify-self: center;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    column-gap: clamp(1rem, 2vw, 2.4rem);
  }
  .nav-links .has-drop { justify-self: end; }
  .nav-links > a:last-child { justify-self: start; }
  .nav-inner .nav-actions { justify-self: end; }
}

/* ============ Hero legibility: left scrim + soft type shadow (all heroes) ============ */
.svc-welcome .svcw-scrim {
  background:
    linear-gradient(90deg, rgba(7, 10, 16, 0.62) 0%, rgba(7, 10, 16, 0.34) 32%, rgba(7, 10, 16, 0) 60%),
    linear-gradient(178deg, rgba(9, 12, 18, 0.5) 0%, rgba(9, 13, 22, 0.16) 38%, rgba(5, 8, 15, 0.84) 100%);
}
.svc-welcome .brk-num,
.svc-welcome .brk-title,
.svc-welcome .brk-line,
.brk-split .brk-num,
.brk-split .brk-title,
.brk-split .brk-line,
.dev-build-stage .brk-num,
.dev-build-stage .brk-title,
.dev-build-stage .brk-line,
.home-hero .passion,
.home-hero .hero-sub,
.home-hero .eyebrow {
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.45), 0 1px 6px rgba(0, 0, 0, 0.28);
}

/* ============ Mobile service heroes: seal top-centre, copy bottom-left (mirrors desktop) ============ */
@media (max-width: 760px) {
  .svc-welcome { flex-direction: column; align-items: stretch; }
  .svc-welcome .brk-overlay {
    position: static; order: -1; transform: none;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: calc(var(--nav-h) + 2.4rem) 1.25rem 0.5rem;
  }
  .svc-welcome .brk-content {
    margin-top: auto; max-width: 100%;
    align-items: flex-start; text-align: left;
    padding: 1.4rem 1.4rem 2.4rem;
  }
  .svc-welcome .brk-title { font-size: clamp(2.1rem, 9.5vw, 3rem); }
  .com-hero .brk-title { font-size: clamp(1.75rem, 8.4vw, 2.7rem); }
  .svc-welcome .brk-line { max-width: 100%; }
  .dev-build-stage { display: flex; flex-direction: column; align-items: stretch; }
  .dev-build-stage .brk-overlay {
    position: static; order: -1; transform: none;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: calc(var(--nav-h) + 2.4rem) 1.25rem 0.5rem;
  }
  .dev-build-stage .brk-content {
    margin-top: auto; max-width: 100%;
    align-items: flex-start; text-align: left;
    padding: 1.4rem 1.4rem 2.4rem;
  }
  .dev-build-stage h2.brk-title { font-size: clamp(2rem, 8.5vw, 2.8rem); }
}

/* ============ Mobile heroes: single soft scrim (no directional center darkening) ============ */
@media (max-width: 760px) {
  .svc-welcome .svcw-scrim { display: none; }
  /* roomier tap targets in the mobile menu */
  .mobile-menu nav > a { padding: 1rem 0; }
}

/* ============ Mobile: zero added shading on heroes (no top shade, no text halo) ============ */
@media (max-width: 760px) {
  .hero-flush .svc-welcome::after,
  .hero-flush .brk-split::after,
  .hero-flush .dev-build-stage::after { display: none; }
  .svc-welcome .brk-num,
  .svc-welcome .brk-title,
  .svc-welcome .brk-line,
  .brk-split .brk-num,
  .brk-split .brk-title,
  .brk-split .brk-line,
  .dev-build-stage .brk-num,
  .dev-build-stage .brk-title,
  .dev-build-stage .brk-line,
  .home-hero .passion,
  .home-hero .hero-sub,
  .home-hero .eyebrow { text-shadow: none; }
}

/* slightly smaller top-level mobile menu links */
.mobile-menu nav > a { font-size: clamp(1.6rem, 7.4vw, 2.6rem); }

/* mobile: fully solid hero text (no translucent cream) */
@media (max-width: 760px) {
  .svc-welcome .brk-num, .brk-split .brk-num, .dev-build-stage .brk-num { color: #F6F2E8; }
  .svc-welcome .brk-line, .brk-split .brk-line, .dev-build-stage .brk-line { color: #F6F2E8; }
}
/* menu dismiss glides away more slowly */
.mobile-menu { transition: transform 1.1s var(--ease); }
.mobile-menu.open { transition: transform 0.7s var(--ease); }

/* mobile: per-page hero framing via --m-pos (keeps dark zones behind the text, no overlays) */
@media (max-width: 760px) {
  .svcw-photo { object-position: var(--m-pos, center); }
}

/* mobile: kill the overlay's radial halo (the "center column" darkening) */
@media (max-width: 760px) {
  .brk-overlay::before { display: none; content: none; }
}

/* ============ Residential mobile hero: bottom-anchored fade only (top/center untouched) ============ */
@media (max-width: 760px) {
  .svc-welcome.res-hero .svcw-scrim {
    display: block;
    background: linear-gradient(to top, rgba(5, 8, 15, 0.9) 0%, rgba(5, 8, 15, 0.68) 32%, rgba(5, 8, 15, 0.42) 52%, rgba(5, 8, 15, 0) 72%);
  }
}

/* residential mobile: tagline solid + crisp edge over bright sky */
@media (max-width: 760px) {
  .svc-welcome.res-hero .brk-tag {
    color: #F6F2E8;
    text-shadow: 0 1px 3px rgba(5, 8, 15, 0.42), 0 0 12px rgba(5, 8, 15, 0.22);
  }
  .svc-welcome.res-hero .brk-h1 {
    text-shadow: 0 1px 3px rgba(5, 8, 15, 0.42), 0 0 12px rgba(5, 8, 15, 0.22);
  }
  .svc-welcome.res-hero .brk-seal {
    filter: drop-shadow(0 1px 3px rgba(5, 8, 15, 0.38));
  }
}

/* ============ Mobile hero recipe: bottom fade + crisp lockup, all service heroes ============ */
@media (max-width: 760px) {
  .svc-welcome .svcw-scrim {
    display: block;
    background:
      linear-gradient(to bottom, rgba(5, 8, 15, 0.6) 0%, rgba(5, 8, 15, 0.36) 24%, rgba(5, 8, 15, 0) 46%),
      linear-gradient(to top, rgba(5, 8, 15, 0.9) 0%, rgba(5, 8, 15, 0.68) 32%, rgba(5, 8, 15, 0.42) 52%, rgba(5, 8, 15, 0) 72%);
  }
  .dev-build-stage .db-scrim {
    background:
      linear-gradient(to bottom, rgba(5, 8, 15, 0.6) 0%, rgba(5, 8, 15, 0.36) 24%, rgba(5, 8, 15, 0) 46%),
      linear-gradient(to top, rgba(5, 8, 15, 0.9) 0%, rgba(5, 8, 15, 0.68) 32%, rgba(5, 8, 15, 0.42) 52%, rgba(5, 8, 15, 0) 72%);
  }
  .svc-welcome .brk-tag, .dev-build-stage .brk-tag, .brk-split .brk-tag,
  .svc-welcome .brk-h1, .dev-build-stage .brk-h1, .brk-split .brk-h1 {
    color: #F6F2E8;
    text-shadow: 0 1px 3px rgba(5, 8, 15, 0.42), 0 0 12px rgba(5, 8, 15, 0.22);
  }
  .svc-welcome .brk-seal, .dev-build-stage .brk-seal, .brk-split .brk-seal {
    filter: drop-shadow(0 1px 3px rgba(5, 8, 15, 0.38));
  }
}

/* ============ Mobile nav row: compact logo + phone so the menu button fits fully ============ */
@media (max-width: 760px) {
  .nav-inner { gap: 0.6rem; }
  .brand { gap: 0.5rem; flex-shrink: 1; min-width: 0; }
  .brand .mark { width: 28px; height: 30px; }
  .brand .wordmark { font-size: 0.68rem; letter-spacing: 0.14em; }
  .nav-actions { gap: 0.5rem; flex-shrink: 0; }
  .nav-actions .nav-clock { font-size: 0.6rem; letter-spacing: 0.08em; }
  .icon-btn.menu-btn { flex-shrink: 0; width: 40px; height: 40px; }
}

/* Short-viewport guard (non-Mac laptops): the bottom-left hero copy must never
   rise above the centre seal + caption lockup. Reserve the lockup's vertical
   band at the top of the copy block — when the window is short, the hero grows
   downward instead of the copy climbing up. */
@media (min-width: 761px) {
  /* fence: reserve the lockup band on the container, then let auto margins
     centre the copy in the space below it — auto margins collapse to zero
     when space is tight, so the copy can never cross the fence upward. */
  .hero-flush .svc-welcome,
  .hero-flush .brk-half { padding-top: calc(var(--nav-h) + clamp(0.6rem, 2.5vh, 2rem) + 9.5rem); }
  .hero-flush .brk-content { margin-top: auto; margin-bottom: auto; }
}

/* Height-responsive hero type (services pages): on short screens the whole
   composition — seal lockup, headline, sub-line, switcher, enter link —
   scales down together so it reads exactly like the full-height reference,
   with the copy always starting below the centre lockup. Tiers key off
   viewport height so browser chrome / taskbars are accounted for. */
@media (min-width: 761px) and (max-height: 1060px) {
  .hero-flush .brk-overlay { top: calc(var(--nav-h) + 0.9rem); gap: 0.55rem; }
  .brk-seal { width: 46px; }
  .brk-h1 { font-size: 1.75rem; }
  .brk-tag { font-size: 0.78rem; }
  h2.brk-title { font-size: clamp(2.3rem, 1.3rem + 3.4vw, 3.6rem); }
  .dev-build-stage h2.brk-title { font-size: clamp(2rem, 1rem + 3vw, 3.2rem); }
  .brk-line { font-size: 0.98rem; }
  .hero-flush .svc-welcome,
  .hero-flush .brk-half { padding-top: calc(var(--nav-h) + 0.9rem + 7.8rem); }
  .hero-flush .brk-content {
    gap: 0.7rem;
    padding-top: 1.6rem;
    padding-bottom: clamp(1.8rem, 4vh, 3rem);
  }
  .brk-tabs { margin-top: 1rem !important; }
}
@media (min-width: 761px) and (max-height: 760px) {
  .hero-flush .brk-overlay { top: calc(var(--nav-h) + 0.7rem); gap: 0.45rem; }
  .brk-seal { width: 40px; }
  .brk-h1 { font-size: 1.5rem; }
  .brk-tag { font-size: 0.72rem; letter-spacing: 0.14em; }
  .brk-num { font-size: 0.72rem; }
  h2.brk-title { font-size: clamp(2rem, 1.1rem + 2.9vw, 3rem); }
  .dev-build-stage h2.brk-title { font-size: clamp(1.8rem, 1rem + 2.6vw, 2.7rem); }
  .brk-line { font-size: 0.92rem; }
  .hero-flush .svc-welcome,
  .hero-flush .brk-half { padding-top: calc(var(--nav-h) + 0.7rem + 6.8rem); }
  .hero-flush .brk-content {
    gap: 0.6rem;
    padding-top: 1.2rem;
    padding-bottom: 1.8rem;
  }
  .brk-tabs { margin-top: 0.8rem !important; }
  .brk-tab { padding: 0.45rem 1.05rem; }
  .brk-enter { font-size: 0.72rem; }
}
@media (min-width: 761px) and (max-height: 590px) {
  .hero-flush .brk-overlay { top: calc(var(--nav-h) + 0.5rem); }
  .brk-seal { width: 34px; }
  .brk-h1 { font-size: 1.3rem; }
  h2.brk-title { font-size: clamp(1.7rem, 0.9rem + 2.6vw, 2.5rem); }
  .brk-line { font-size: 0.86rem; }
  .hero-flush .svc-welcome,
  .hero-flush .brk-half { padding-top: calc(var(--nav-h) + 0.5rem + 6rem); }
  .hero-flush .brk-content {
    padding-top: 1rem;
    padding-bottom: 1.4rem;
  }
}


/* Mobile brokerage (stacked brk-split): the lockup rides first in the column
   under the flush nav — give it the same nav clearance as the other service
   heroes so it can't cross the logo / menu row. */
@media (max-width: 760px) {
  /* Mobile brokerage, desktop-style: halves extend up under the transparent
     nav, the lockup floats over the residential photo (crisp shadows), and a
     top fade keeps the nav + lockup legible — the mobile hero formula. */
  .hero-flush .brk-split .brk-overlay {
    position: absolute; order: 0; left: 50%; top: calc(var(--nav-h) + 1.9rem);
    width: 100%; padding: 0 1rem;
    transform: translate(-50%, -14px);
  }
  .loaded .hero-flush .brk-split .brk-overlay { transform: translate(-50%, 0); }
  .hero-flush .brk-split .brk-h1,
  .hero-flush .brk-split .brk-tag { text-shadow: 0 1px 3px rgba(5,8,15,0.42), 0 0 12px rgba(5,8,15,0.22); }
  .hero-flush .brk-split .brk-seal { filter: drop-shadow(0 1px 3px rgba(5,8,15,0.38)); }
  .hero-flush .brk-split .brk-com { padding-top: calc(var(--nav-h) + 12.5rem); }
  .hero-flush .brk-split::after {
    height: calc(var(--nav-h) + 15rem);
    background: linear-gradient(180deg, rgba(5,8,15,0.62) 0%, rgba(5,8,15,0.4) 34%, rgba(5,8,15,0) 100%);
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .hero-flush .brk-split .brk-overlay { transform: translate(-50%, 0) !important; }
}

/* Phone hero clips: keep both video buffers on permanent GPU layers and drop
   the CSS colour-grade filter — animating opacity on filtered <video> forces
   CPU re-compositing on iOS and shows as a flash / resize pop at every
   crossfade. The grade loss is imperceptible at phone size. */
@media (max-width: 760px) {
  .home-hero .vh-video, .home-hero .vh-poster {
    filter: none;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .home-hero .vh-video { will-change: opacity; }
}

/* Brokerage split halves: the same legibility scrim as every other hero —
   left band + bottom fade behind the copy, per half. Desktop only; mobile
   keeps its own formula (top fade + crisp shadows, no centre darkening). */
@media (min-width: 761px) {
  .brk-half::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(7, 10, 16, 0.62) 0%, rgba(7, 10, 16, 0.34) 32%, rgba(7, 10, 16, 0) 60%),
      linear-gradient(178deg, rgba(9, 12, 18, 0.5) 0%, rgba(9, 13, 22, 0.16) 38%, rgba(5, 8, 15, 0.84) 100%);
  }
}

/* Welcome headline: regular weight — slender, editorial (was 500) */
.home-hero .passion, .home-hero .passion .em { font-weight: 400; }

/* Mobile: no hover — the brush stroke draws itself once on load and stays.
   The .sweep class is (re)applied by main.js, including on bfcache returns. */
@media (max-width: 760px) {
  .home-hero .passion .em::after { transition: none; height: 0.26em; bottom: -0.115em; }
  .home-hero .passion .em.sweep::after { animation: kgBrushDraw 0.9s var(--ease) 0.9s forwards; }
}
@keyframes kgBrushDraw {
  from { clip-path: inset(-20% 100% -20% 0); }
  to { clip-path: inset(-20% 0 -20% 0); }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .home-hero .passion .em.sweep::after { animation: none; clip-path: inset(-20% 0 -20% 0); }
}

/* Pillar numbers sit centred beneath the middle of each mark */
.pillar > span:first-child { display: flex; flex-direction: column; align-items: center; }

/* Mobile brokerage halves: the standard bottom fade behind the copy —
   same legibility formula as the mobile service heroes. */
@media (max-width: 760px) {
  .brk-half::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(5, 8, 15, 0.9) 0%, rgba(5, 8, 15, 0.68) 32%, rgba(5, 8, 15, 0.42) 52%, rgba(5, 8, 15, 0) 72%);
  }
}

/* Frame the commercial half lower into the scene (less sky) — all viewports.
   The panel is height-filling, so object-position has no vertical slack;
   a low-anchored zoom crops the sky off the top instead. */
.brk-com .brk-photo { transform: scale(1.28); transform-origin: center 72%; }


/* =====  Maroon hover language: capabilities cards + engagement steps  ===== */
.fcard:hover { border-color: var(--burgundy); }
.fcard .fico { transition: transform 0.5s var(--spring), background 0.45s var(--ease), color 0.45s var(--ease); }
.fcard:hover .fico { background: rgba(122,31,45,0.09); color: var(--burgundy); }
[data-theme="dark"] .fcard:hover .fico { color: #C4667A; background: rgba(196,102,122,0.14); }
.step .num, .step .meta, .step h3 { transition: color 0.45s var(--ease); }
.step:hover .num, .step:hover .meta, .step:hover h3 { color: var(--burgundy); }
[data-theme="dark"] .step:hover .num, [data-theme="dark"] .step:hover .meta, [data-theme="dark"] .step:hover h3 { color: #C4667A; }

/* =====  Prev/next service navigation (under the engagement path)  ===== */
.svc-nav { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin-top: clamp(2.2rem, 5vw, 3.6rem); }
.svc-nav a { display: inline-flex; align-items: center; gap: 0.95rem; }
.svc-nav .lab { display: block; font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-2); transition: color 0.4s var(--ease); }
.svc-nav .name { display: block; font-family: var(--font-display); font-size: var(--step-1); margin-top: 0.1rem; transition: color 0.4s var(--ease); }
.svc-nav svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-2); transition: transform 0.5s var(--ease), color 0.4s var(--ease); }
.svc-nav .next { margin-left: auto; text-align: right; }
.svc-nav a:hover .lab, .svc-nav a:hover .name, .svc-nav a:hover svg { color: var(--burgundy); }
.svc-nav .prev:hover svg { transform: translateX(-4px); }
.svc-nav .next:hover svg { transform: translateX(4px); }
@media (max-width: 520px) { .svc-nav .name { font-size: var(--step-0); } }


/* Service heroes: ease the copy off the left edge on desktop */
@media (min-width: 761px) {
  .svc-welcome .brk-content { padding-left: clamp(4rem, 7.5vw, 7rem); }
}


/* =====  Maroon interaction language: every hover with an outline or underline effect  ===== */
.btn-ghost:hover, .cta-band .btn-ghost:hover { border-color: var(--burgundy); color: var(--burgundy); }
[data-theme="dark"] .btn-ghost:hover, [data-theme="dark"] .cta-band .btn-ghost:hover { border-color: #C4667A; color: #C4667A; }
.icon-btn:hover { border-color: var(--burgundy); color: var(--burgundy); }
[data-theme="dark"] .icon-btn:hover { border-color: #C4667A; color: #C4667A; }
.prop-card:hover .media { box-shadow: 0 0 0 1px var(--burgundy), var(--shadow-md); }
.prop-card:hover .info h3 { color: var(--burgundy); }
[data-theme="dark"] .prop-card:hover .info h3 { color: #C4667A; }
.chip:hover { border-color: var(--burgundy); color: var(--burgundy); }
[data-theme="dark"] .chip:hover { border-color: #C4667A; color: #C4667A; }
.agent-card:hover .media { box-shadow: 0 0 0 1px var(--burgundy), var(--shadow-md); }
.office:hover { border-color: var(--burgundy); }
.footer-bottom .socials a:hover { border-color: var(--burgundy); color: var(--burgundy); }
[data-theme="dark"] .footer-bottom .socials a:hover { border-color: #C4667A; color: #C4667A; }
.nav-links > a::after, .nav-links .has-drop > button::after { background: var(--burgundy); }

/* Go-to buttons: italic on hover */
.svc-nav a:hover .name, .svc-nav a:hover .lab { font-style: italic; }

/* Stats: the homepage brush-stroke swash under the numbers, drawn on hover */
.stats-band .stat .n > span { position: relative; display: inline-block; }
.stats-band .stat .n > span::after {
  content: ""; position: absolute; left: 0.02em; right: 0.05em; bottom: -0.085em;
  height: 0.19em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 12 Q 150 2 296 10 Q 150 18 4 12 Z' fill='%23A62B3E'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  clip-path: inset(-20% 100% -20% 0);
  transition: clip-path 0.7s var(--ease);
}
.stats-band .stat:hover .n > span::after { clip-path: inset(-20% 0 -20% 0); }


/* Long-copy splits (Who We Are): top-align and tuck the copy under the section title line.
   Approach splits stay on the default centred alignment — copy centres against the
   left column's full height (eyebrow through picture bottom). */
.split.tuck { align-items: start; }
.split.tuck > .flow { padding-top: 2.6rem; }
@media (max-width: 860px) { .split.tuck > .flow { padding-top: 0; } }

/* Left Go-to buttons: reverse (left-leaning) italic on hover */
.svc-nav .prev:hover .lab, .svc-nav .prev:hover .name { font-style: normal; transform: skewX(12deg); transform-origin: 0 100%; }


/* Home hero CTAs: +1pt label, half-strength arrow slide */
.home-hero .btn-primary { font-size: calc((var(--step--1) + 1px) * 1.1); padding: 1.155rem 2.09rem; }  /* hero CTAs 10% larger */
@media (max-width: 760px) {
  /* phones only: hero CTAs 10% smaller */
  .home-hero .btn-primary { font-size: calc((var(--step--1) + 1px) * 0.845); padding: 0.80rem 1.45rem; }
}
.home-hero .btn:hover .btn-ico { transform: translateX(2.5px); }

/* Values cards: hover top-line in maroon */
.value::before { background: var(--burgundy); }


/* Contact submit: same one-way shimmer as the welcome-page CTAs (no gold fill) */
.form-actions .btn-primary::after { inset: 0; background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,0.26) 50%, transparent 66%); transform: translateX(-135%); transition: none; }
.form-actions .btn-primary:hover { color: #F6F2E8; box-shadow: var(--shadow-md); }
.form-actions .btn-primary:hover::after { transform: translateX(135%); transition: transform 0.9s var(--ease); }


/* Mobile welcome hero: bigger headline (+2pt, em-based swash follows), body line -1pt */
@media (max-width: 760px) {
  .home-hero .passion { font-size: clamp(2.26rem, 9.6vw, 6.4rem); }
  .home-hero .hero-sub { font-size: calc(var(--step-1) - 2px); line-height: 1.46; }
}


/* Mobile stats: swash auto-draws once per stat (staggered) and stays; the number
   itself never goes transparent on touch/hover */
@media (max-width: 760px) {
  .stats-band .stat:hover .n, .stats-band .stat .n {
    color: var(--accent-text); background-image: none; animation: none;
    -webkit-background-clip: initial; background-clip: initial;
  }
  [data-theme="dark"] .stats-band .stat:hover .n, [data-theme="dark"] .stats-band .stat .n { color: var(--gold); }
  .stats-band .stat .n > span::after { transition: none; }
}

/* Stat swash: draws once per stat on scroll-in (all viewports) and stays */
.stats-band .stat .n > span.sweep::after { animation: kgBrushDraw 0.9s var(--ease) forwards; }
@media (prefers-reduced-motion: reduce) {
  .stats-band .stat .n > span.sweep::after { animation: none; clip-path: inset(-20% 0 -20% 0); }
}

/* Welcome hero: seal/eyebrow/headline sit a touch closer above the sub-line
   (block recentres, so the top group settles slightly lower) */
.home-hero .hero-sub { margin-top: 1.2rem; }

/* Mobile: approach-split copy and engagement-step copy read 2pt smaller */
@media (max-width: 760px) {
  .split > .flow p, .step p { font-size: calc(var(--step-0) - 2px); }
}

/* Desktop hero CTAs: hover movement halved again (lift 1px, arrow 1.25px) */
@media (min-width: 761px) {
  .home-hero .btn-primary:hover { transform: translateY(-1px); }
  .home-hero .btn:hover .btn-ico { transform: translateX(1.25px); }
}

/* Mobile: hero sub-lines 2pt smaller (service heroes + brokerage split halves) */
@media (max-width: 760px) {
  .svc-welcome .brk-line, .brk-half .brk-line { font-size: calc(var(--step-0) - 4px); }
}

/* Approach splits: left column pins to the row top, so copy can centre when
   shorter but can never rise above the eyebrow when longer */
.split:has(> .flow) > div:first-child { align-self: start; }

/* Mobile: section headings (Capabilities / Engagement etc.) match the approach heading size */
@media (max-width: 760px) {
  .sec-head .sec-title { font-size: var(--step-3); }
}

/* Mobile: engagement stage headings 2pt smaller */
@media (max-width: 760px) {
  .step h3 { font-size: calc(var(--step-2) - 2px); }
}

/* Mobile: bottom contact/CTA bands read 15% smaller overall */
@media (max-width: 760px) {
  .cta-band { padding: 2.55rem var(--gutter); }
  .cta-band h2 { font-size: calc(var(--step-4) * 0.85); }
  .cta-band p { font-size: calc(var(--step-0) * 0.98); margin: 1.1rem auto 1.85rem; }
  .cta-band .eyebrow { font-size: calc(var(--step--1) * 0.85); }
  .cta-band .btn { font-size: calc(var(--step--1) * 0.98); padding: 1.02rem 1.86rem; }
}

/* Mobile footer: 3pt smaller, leading condensed ~10% */
@media (max-width: 760px) {
  .footer .f-brand p, .footer p, .footer ul a, .footer address, .footer .subscribe input { font-size: calc(var(--step-0) - 5px); line-height: 1.22; }
  .footer address { line-height: 1.31; }
  .footer ul { gap: 0.36rem; }
  .footer-bottom { font-size: calc(var(--step--1) - 3px); }
  .footer h4 { margin-bottom: 0.63rem; }
}

/* Go-to strip sits a touch lower (all viewports) */
.svc-nav { margin-top: clamp(3.6rem, 6.5vw, 5.2rem); }

/* CTA-band buttons: standard size restored; same one-way shimmer as the rest of the site
   (soft dark streak — these buttons are light-filled) */
.cta-band .btn-primary::after { inset: 0; background: linear-gradient(105deg, transparent 34%, rgba(26,22,14,0.14) 50%, transparent 66%); transform: translateX(-135%); transition: none; }
.cta-band .btn-primary:hover { color: var(--ink); border-color: var(--burgundy); box-shadow: var(--shadow-sm); }
.cta-band .btn-primary:hover::after { transform: translateX(135%); transition: transform 0.9s var(--ease); }

/* Desktop: section headings (Capabilities / Engagement etc.) 3pt smaller */
@media (min-width: 761px) {
  .sec-head .sec-title { font-size: calc(var(--step-4) - 3px); }
}


/* =====  Section headings: brush-stroke underline, drawn once on scroll-in  ===== */
.sec-head .sec-title, .split .eyebrow + h2 { display: table; position: relative; isolation: isolate; max-width: none !important; }  /* isolate keeps the z-index:-1 stroke above section backgrounds; width caps removed so headings run one line when space allows */
.sec-head .sec-title::after, .split .eyebrow + h2::after {
  content: ""; position: absolute; left: 0.02em; right: 0.05em; bottom: -0.085em;
  height: 0.19em; z-index: -1;  /* the stroke stays beneath the letterforms at all times */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 12 Q 150 2 296 10 Q 150 18 4 12 Z' fill='%23A62B3E'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  clip-path: inset(-20% 100% -20% 0);
}
.sec-head .sec-title.sweep::after, .split .eyebrow + h2.sweep::after { animation: kgBrushDraw 0.8s var(--ease) forwards; }
@media (prefers-reduced-motion: reduce) {
  .sec-head .sec-title.sweep::after, .split .eyebrow + h2.sweep::after { animation: none; clip-path: inset(-20% 0 -20% 0); }
}

/* Mobile menu: Commercial / Residential always visible under Brokerage */
.mobile-menu .mm-sub .mm-sub2 { padding-left: 1.15rem; font-size: 0.95rem; color: var(--text-2); justify-content: flex-start; }
.mobile-menu .mm-sub .mm-sub2::before { content: "\2022"; color: var(--burgundy); margin-right: 0.55rem; }

/* Go-to buttons rest in maroon on all viewports (italic hover/press unchanged) */
.svc-nav .lab, .svc-nav .name, .svc-nav svg { color: var(--burgundy); }
[data-theme="dark"] .svc-nav .lab, [data-theme="dark"] .svc-nav .name, [data-theme="dark"] .svc-nav svg { color: #C4667A; }

/* Go-to buttons: page names bold */
.svc-nav .name { font-weight: 600; }

/* Opt-out: first-section headings carry no brush stroke */
.no-swash::after { content: none !important; }

/* Stats: scroll-in sweep activates the maroon glisten together with the stroke */
.stats-band .stat:has(.n > span.sweep) .n {
  color: transparent;
  -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(110deg, var(--burgundy) 42%, #f0c2ca 50%, var(--burgundy) 58%);
  background-size: 280% 100%; background-position: -45% 0;
  /* no resting animation — hover/press APPLY the glisten fresh, which is the only
     way a CSS animation ever replays */
}
@media (prefers-reduced-motion: reduce) {
  .stats-band .stat:has(.n > span.sweep) .n { animation: none; color: var(--burgundy); background-image: none; }
}
@media (max-width: 760px) {
  .stats-band .stat:has(.n > span.sweep) .n { color: var(--burgundy); background-image: none; animation: none; -webkit-background-clip: initial; background-clip: initial; }
}

/* Desktop: stat numbers 5pt smaller */
@media (min-width: 761px) {
  .stats-band .stat .n { font-size: calc(var(--step-4) - 5px); }
}

/* Stats: the glint replays on hover (desktop) — zero-delay pass differs from the
   swept-state animation, so re-hovering restarts it even while maroon */
@media (min-width: 761px) {
  .stats-band .stat:hover .n,
  .stats-band .stat:has(.n > span.sweep):hover .n { animation: statGlisten 0.8s ease; }
}
/* Mobile: press replays a quick glint, then settles back to solid maroon */
@media (max-width: 760px) {
  .stats-band .stat:active .n,
  .stats-band .stat:has(.n > span.sweep):active .n {
    color: transparent;
    -webkit-background-clip: text; background-clip: text;
    background-image: linear-gradient(110deg, var(--burgundy) 42%, #f0c2ca 50%, var(--burgundy) 58%);
    background-size: 280% 100%;
    animation: statGlisten 0.9s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .stats-band .stat:hover .n, .stats-band .stat:active .n { animation: none; }
}

/* Mobile: value captions sit tight beneath their words */
@media (max-width: 760px) {
  .value p { margin-top: 0.15rem; }
  .value h3 { margin-top: 0.8rem; }
}

/* Desktop: stat captions +2pt */
@media (min-width: 761px) {
  .stats-band .stat .l { font-size: calc(var(--step--1) + 4px); }
}

/* Mobile: discipline pillars another 2pt smaller (headings + body) */
@media (max-width: 760px) {
  .pillar .pbody h3 { font-size: calc(var(--step-3) - 9px); }
  .pillar .pbody p { font-size: calc(var(--step-0) - 4px); }
}

/* Mobile: section-head captions (e.g. under "Four disciplines, one partner.") 2pt smaller */
@media (max-width: 760px) {
  .sec-head p.measure { font-size: calc(var(--step-0) - 3px); }
}

/* Capability card grids: half the usual spacing between boxes */
.grid:has(> .fcard) { gap: calc(var(--space-md) / 2); }

/* Mobile: capability boxes tighter still */
@media (max-width: 760px) {
  .grid:has(> .fcard) { gap: calc(var(--space-md) / 4); }
}

/* Mobile only: beliefs captions flush under their words (desktop keeps the flow gap) */
@media (max-width: 760px) {
  .beliefs-words .flow > p { margin-top: 0; }
}

/* Mobile hero: soft backdrop behind the seal + copy for contrast over bright clips */
@media (max-width: 760px) {
  .home-hero .hh-content::before {
    content: ""; position: absolute; inset: -8% -12%; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(9,12,18,0.48) 0%, rgba(9,12,18,0.26) 52%, rgba(9,12,18,0) 76%);
  }
}

/* Mobile: stat numbers 2pt smaller */
@media (max-width: 760px) {
  .stats-band .stat .n { font-size: calc(var(--step-4) - 2px); }
}

/* Stat currency signs at half size */
.stats-band .stat .n .cur { font-size: 0.5em; }

/* Desktop: welcome hero subheading +5pt */
@media (min-width: 761px) {
  .home-hero .hero-sub { font-size: calc(var(--step-1) + 5px); }
}

/* Desktop: CTA bands 15% smaller overall; subheading + button lifted 15% back up */
@media (min-width: 761px) {
  .cta-band { padding: calc(clamp(3rem, 8vw, 7rem) * 0.85) var(--gutter); }
  .cta-band h2 { font-size: calc(var(--step-4) * 0.85); }
  .cta-band p { font-size: calc(var(--step-0) * 0.98); margin: 1.1rem auto 1.85rem; }
  .cta-band .eyebrow { font-size: calc(var(--step--1) * 0.85); }
  .cta-band .btn { font-size: calc(var(--step--1) * 0.98); padding: 1.02rem 1.86rem; }
}