/* ==========================================================================
   PROPERTY VENTURES — design system v2
   Editorial light + dark. Warm paper / deep ink base, teal as the one working
   accent, a sunset (coral→orchid) wash used only as a faint Miami-at-dusk hint.
   Single light theme. Forest-green panels are design elements, not a theme.
   ========================================================================== */

/* ---------- tokens: LIGHT (default) ---------- */
:root{
  --bg:        #F3F4F6;   /* cool paper — same family as the hero artwork */
  --bg-2:      #FFFFFF;   /* raised cards */
  --bg-3:      #E9EBEF;   /* sunk / alt band */
  --ink:       #15181E;   /* near-black, warm */
  --ink-2:     #555B64;   /* secondary text */
  --ink-3:     #8A909A;   /* muted */
  --line:      rgba(21,24,30,.12);
  --line-2:    rgba(21,24,30,.07);
  --ghost-border:   rgba(21,24,30,.24);   /* outline for ghost buttons (Sell With Us / Learn More) */
  --ghost-hover-bg: rgba(255,255,255,.72);

  --forest:    #13235C;   /* deep blue navy, matched to the button */
  --forest-2:  #0E1B45;
  --teal:      #315CFF;   /* the working accent, same family as the button */
  --teal-ink:  #2447D4;   /* accent text that needs contrast on paper */
  --coral:     #D98BA6;   /* the tiny bit of pink */
  --orchid:    #C9A6D9;   /* gradient stop only */

  --glass:     rgba(255,255,255,.55);
  --glass-2:   rgba(255,255,255,.72);
  --glass-brd: rgba(255,255,255,.75);
  --shadow:    0 22px 48px rgba(20,30,28,.12);
  --shadow-sm: 0 8px 22px rgba(20,30,28,.08);
  --blur:      blur(18px) saturate(135%);
  --nav-bg:    rgba(255,255,255,.92);
  --page-bg:   #FFFFFF;                 /* page background */
  --nav-tint:  rgba(255,255,255,.6);    /* scrolled-nav frosted tint */
  --nav-link-scrolled: #0A2540;         /* nav link color on the scrolled glass */

  --btn-bg:    #FFFFFF;   /* primary button — white, modern */
  --btn-fg:    #15181E;
  --btn-bg-h:  #FBFCFE;

  --on-dark:   #ECEEF4;   /* text on dark panels */
  --on-dark-2: #9FB3DE;

  /* dusk hint, decorative only, always low opacity */
  --sunset: linear-gradient(115deg, #47B8FF 0%, #7C99ED 55%, #E3A9C8 100%);
  --teal-grad: linear-gradient(120deg, var(--teal), #2CCFFF);

  --r-sm:10px; --r:14px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:36px; --space-7:64px; --space-8:104px;
  --container:1200px;
  --ease:cubic-bezier(.22,.61,.36,1); --fast:170ms; --slow:520ms;
  --font: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, system-ui, -apple-system, sans-serif;

  color-scheme: light;
}

/* ---------- tokens: DARK ---------- */
:root[data-theme="dark"]{
  --bg:        #101827;   /* page base — deep navy charcoal, not dead black */
  --bg-2:      #1A1F2B;   /* raised cards — lifts off the page for separation */
  --bg-3:      #232936;   /* sunk / alt band */
  --ink:       #EEF1F6;   /* near-white text */
  --ink-2:     #A7AEBC;   /* secondary text */
  --ink-3:     #6B7280;   /* muted */
  --line:      rgba(255,255,255,.12);
  --line-2:    rgba(255,255,255,.07);
  --ghost-border:   rgba(255,255,255,.34);   /* visible outline on the dark background */
  --ghost-hover-bg: rgba(255,255,255,.09);

  --teal-ink:  #7BA0FF;   /* accent text, readable on dark */

  --glass:     rgba(20,24,32,.55);
  --glass-2:   rgba(20,24,32,.72);
  --glass-brd: rgba(255,255,255,.10);
  --shadow:    0 22px 48px rgba(0,0,0,.5);
  --shadow-sm: 0 8px 22px rgba(0,0,0,.38);

  --page-bg:   #101827;   /* deep navy charcoal — NOT near-black (#0E1117 read as dead) */
  --nav-bg:    rgba(17,21,30,.88);
  --nav-tint:  rgba(18,22,32,.72);
  --nav-link-scrolled: #EEF1F6;

  color-scheme: dark;
}
/* the wordmark is dark navy — flip it to crisp white on the dark nav/footer */
:root[data-theme="dark"] .logo-img{ filter:brightness(0) invert(1); }

/* dark body — ONE flat navy. The old radial+linear wash produced visible color
   banding (a faint circular halo at the top) across every page; a solid fill
   removes it entirely. The hero panel keeps its own contained glow. */
:root[data-theme="dark"] body{ background:#101827; }

/* Dark-mode panels = the INVERSE of light: a navy gradient that sits LIGHTER
   than the dark page so it clearly separates. CTA band shares the hero family. */
:root[data-theme="dark"] .panel-dark{
  background:
    radial-gradient(90% 130% at 88% -12%, rgba(80,120,230,.14), transparent 55%),
    radial-gradient(75% 120% at 6% 112%, rgba(44,120,255,.16), transparent 60%),
    linear-gradient(168deg, #18285E 0%, #13214C 48%, #101B3C 100%);
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* hard stop at the scroll boundaries — no elastic rubber-band/bounce at the top
   or bottom (which otherwise shoves the floating nav down on a fast scroll). */
html{ scroll-behavior:smooth; overscroll-behavior:none; }
body{
  margin:0; background:var(--page-bg); color:var(--ink);
  font-family:var(--font); font-size:16.5px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}
img{ max-width:100%; display:block; }
/* deter casual image lifting: no drag-to-desktop, no long-press "save image" menu */
img, .hero-bg{
  -webkit-user-drag:none; -khtml-user-drag:none; -moz-user-drag:none; user-drag:none;
  -webkit-touch-callout:none;
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
}
a{ color:var(--teal-ink); text-decoration:none; }
::selection{ background:rgba(49,92,255,.16); }
.container{ width:min(1152px, calc(100% - 48px)); margin-inline:auto; }
.section{ padding-block:112px; }
.section-tight{ padding-block:var(--space-7); }
@media (max-width:760px){ .container{ width:calc(100% - 36px); } .section{ padding-block:72px; } }

/* faint atmosphere — barely there, keeps big areas alive without "AI mesh" */
.shell{ position:relative; }
.shell::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background:
    radial-gradient(1100px 700px at 88% -10%, rgba(49,92,255,.06), transparent 60%),
    radial-gradient(900px 600px at -5% 8%, rgba(217,139,166,.04), transparent 58%);
}

/* ---------- type ---------- */
.display{ font-family:"Geist",Inter,system-ui,sans-serif; font-weight:500; font-size:clamp(48px,6.4vw,88px); line-height:1.02; letter-spacing:-.045em; margin:0; }
.h1{ font-family:"Geist",Inter,system-ui,sans-serif; font-weight:500; font-size:clamp(38px,4.6vw,64px); line-height:1.05; letter-spacing:-.04em; margin:0; }
.h2{ font-family:"Geist",Inter,system-ui,sans-serif; font-weight:500; font-size:clamp(30px,3.4vw,48px); line-height:1.1; letter-spacing:-.035em; margin:0; }
.h3{ font-family:"Geist",Inter,system-ui,sans-serif; font-weight:600; font-size:21px; line-height:1.25; letter-spacing:-.012em; margin:0; }
.lead{ font-family:Inter,"Geist",system-ui,sans-serif; font-size:clamp(18px,1.4vw,22px); color:var(--ink-2); line-height:1.5; font-weight:400; letter-spacing:-.01em; }
.small{ font-size:14px; color:var(--ink-2); }
.micro{ font-size:12px; color:var(--ink-3); letter-spacing:.02em; }
/* eyebrow: plain colored text, no pill — consistent site-wide */
.kicker{
  display:inline-block;
  font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--teal-ink); margin-bottom:var(--space-4);
}
/* reusable photo frame for section visuals (shared site-wide) */
.slot-photo{ margin:0; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:4/3; background:var(--bg-3); }
.slot-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.slot-photo.portrait{ aspect-ratio:4/5; max-width:420px; margin-inline:auto; }
.tealword{ color:var(--teal-ink); }
.eyebrow-line{ color:var(--ink-3); font-size:13.5px; letter-spacing:.04em; }

/* ---------- nav: Tap's floating two-state nav, verbatim ----------
   State 1 at rest: wide floating white card, inset from the edges.
   State 2 scrolled: narrower centered frosted glass pill using the
   liquid glass layering and the glass-distortion SVG filter. */
.nav-wrap{ position:fixed; inset:12px 0 auto; z-index:90; display:flex; justify-content:center; pointer-events:none; }
.navbar{
  pointer-events:auto; position:relative; overflow:hidden;
  width:min(1414px, calc(100% - 48px));
  border-radius:9px;
  border:0.5px solid transparent;
  background:var(--nav-bg);
  box-shadow:0 6px 18px rgba(17,17,17,.07);
  transition:width .5s cubic-bezier(0.22,0.61,0.36,1), background .4s ease,
    border-color .45s ease, box-shadow .45s ease, border-radius .45s ease;
}
.nav-glass-distort,.nav-glass-tint,.nav-glass-sheen{
  position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .45s ease; pointer-events:none;
}
.nav-glass-distort{ z-index:0; overflow:hidden; backdrop-filter:blur(6px) saturate(150%);
  -webkit-backdrop-filter:blur(6px) saturate(150%); filter:url(#glass-distortion-soft); isolation:isolate; }
.nav-glass-tint{ z-index:1; background:var(--nav-tint); }
.nav-glass-sheen{ z-index:2; box-shadow:none; }
.nav-row{ position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-4); min-height:48px; padding-inline:18px; }
.navbar.scrolled{
  width:min(1054px, calc(100% - 32px));
  background:rgba(255,255,255,.06);
  border-color:transparent;
  border-radius:9px;
  box-shadow:0 6px 16px rgba(0,0,0,.14), 0 0 18px rgba(0,0,0,.06);
}
.navbar.scrolled .nav-glass-distort,
.navbar.scrolled .nav-glass-tint,
.navbar.scrolled .nav-glass-sheen{ opacity:1; }
.nav-logo{ flex:none; display:flex; align-items:center; gap:10px; color:var(--ink); }
.nav-logo .wordmark{ font-weight:800; font-size:16.5px; letter-spacing:-.02em; white-space:nowrap; }
.nav-logo .logo-img{ height:34px; width:auto; display:block; }
.navbar .nav-logo .logo-img{ height:38px; margin-left:4px; }
.footer .nav-logo .logo-img{ height:54px; }
@media (max-width:480px){ .navbar .nav-logo .logo-img{ height:32px; margin-left:3px; } }
.nav-links{ display:none; gap:26px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.nav-links a{ color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:600; opacity:.78;
  transition:opacity var(--fast) var(--ease); white-space:nowrap; }
.nav-links a:hover,.nav-links a[aria-current="page"]{ opacity:1; }
.navbar.scrolled .nav-links a{ color:var(--nav-link-scrolled); opacity:.92; }
.navbar.scrolled .nav-links a:hover,
.navbar.scrolled .nav-links a[aria-current="page"]{ opacity:1; }
.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-burger{
  width:42px; height:42px; flex:none; border-radius:12px; border:1px solid var(--line);
  background:transparent; color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
}
@media (min-width:940px){ .nav-links{ display:flex; } .nav-burger{ display:none; } }
@media (max-width:939px){ .nav-right .nav-actions-desktop{ display:none; } }
/* on mobile the desktop "Talk to Us" is hidden, so shrink the theme toggle and tighten
   the gap so the burger always fits inside the bar (it was getting clipped). */
@media (max-width:939px){ .theme-switch{ --toggle-size:9px; } .nav-right{ gap:9px; } }
@media (max-width:900px){
  .nav-wrap{ inset:10px 0 auto; }
  .navbar{ width:calc(100% - 24px); }
  /* keep the SAME width when scrolled: on desktop the bar narrows for the floating-pill
     effect, but on mobile that narrowing slid the bar under the row and clipped the
     burger (overflow:hidden). Same width = burger never clipped on scroll. */
  .navbar.scrolled{ width:calc(100% - 24px); }
  /* balanced gutters. The logo PNG carries ~3px of transparent space on its left at
     this size, so the LEFT padding is trimmed by that amount — this makes the visible
     gap (edge→logo) equal the right gap (burger→edge): ~20px on both sides. */
  .nav-row{ padding-left:17px; padding-right:20px; }
  .navbar .nav-logo .logo-img{ margin-left:0; }
}

.nav-sheet{
  position:fixed; inset:0; z-index:89; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:var(--bg); opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.nav-sheet.open{ opacity:1; pointer-events:auto; }
.nav-sheet a{ font-weight:800; font-size:30px; letter-spacing:-.02em; color:var(--ink); padding:10px; }
.nav-sheet .btn{ margin-top:16px; }

/* ---------- buttons: Tap's controls, verbatim (tap.css §12) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: 12px 22px;
  border-radius: 18px;
  border: 1px solid transparent;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn svg { width: 17px; height: 17px; }

/* The Tap primary button. ShinyButton spec, exact translation. */
.btn-primary {
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(325deg, #0044ff 0%, #2ccfff 55%, #0044ff 90%);
  background-size: 280% auto;
  background-position: 0% 0%;
  box-shadow:
    0 0 20px rgba(71, 184, 255, .5),
    0 5px 5px -1px rgba(58, 125, 233, .25),
    inset 4px 4px 8px rgba(175, 230, 255, .5),
    inset -4px -4px 8px rgba(19, 95, 216, .35);
  transition: background-position .7s ease, transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.btn-primary:hover { background-position: 100% 0%; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0) scale(.985); }
.btn-primary:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px rgba(59, 130, 246, .9),
    0 0 20px rgba(71, 184, 255, .5),
    inset 4px 4px 8px rgba(175, 230, 255, .5),
    inset -4px -4px 8px rgba(19, 95, 216, .35);
}
.btn-wide { padding: 16px 44px; }
.btn-ghost { border-color: var(--ghost-border); color: var(--ink); }
.btn-ghost:hover { background: var(--ghost-hover-bg); border-color: rgba(95, 170, 255, .5); }
.btn-glass {
  background: #FFFFFF;
  border-color: rgba(17, 17, 17, .08);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.btn-glass:hover { background: rgba(95, 170, 255, .08); border-color: rgba(95, 170, 255, .5); }
.btn-lg { padding: 16px 30px; font-size: 16px; }
.btn-sm { padding: 8px 14px; font-size: 13.5px; }
.btn-sm svg { width: 15px; height: 15px; }
.btn-wa{ background:#FFFFFF; color:var(--ink); border-color:rgba(17,17,17,.08); }
.btn-wa svg{ color:#1FB457; }

/* ---------- landing-page button shapes, shared site-wide ----------
   The hero "Talk to Us" secondary (glassy white on blue/dark panels) and the
   snug rectangular hero shape, lifted out of the homepage so every page reuses
   the exact same control. */
.hero-btn-secondary{
  background:rgba(255,255,255,.20); color:#FFFFFF; border:1px solid rgba(255,255,255,.26);
  border-radius:10px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 10px 28px rgba(0,0,0,.12);
  transition:transform 160ms var(--ease), background 160ms var(--ease);
}
.hero-btn-secondary:hover{ background:rgba(255,255,255,.28); transform:translateY(-1px); }
.hero-btn-secondary:not(.btn-lg){ height:52px; padding:0 18px; font-size:15px; font-weight:600; }
/* Adaptive secondary — the ONE secondary control site-wide (blue btn-primary is
   the standard primary). White glass on dark mode and on blue/dark panels;
   readable ink-on-light when it sits on a light page background. */
:root[data-theme="light"] .hero-btn-secondary{
  background:rgba(17,24,45,.045); color:var(--ink);
  border-color:var(--ghost-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
  backdrop-filter:none; -webkit-backdrop-filter:none;
}
:root[data-theme="light"] .hero-btn-secondary:hover{
  background:rgba(17,24,45,.075); border-color:rgba(95,170,255,.5);
}
/* keep the white glass when it sits on a blue/dark panel, even in light mode */
:root[data-theme="light"] .hero-panel .hero-btn-secondary,
:root[data-theme="light"] .panel-dark .hero-btn-secondary{
  background:rgba(255,255,255,.20); color:#FFFFFF;
  border-color:rgba(255,255,255,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 10px 28px rgba(0,0,0,.12);
}
:root[data-theme="light"] .hero-panel .hero-btn-secondary:hover,
:root[data-theme="light"] .panel-dark .hero-btn-secondary:hover{ background:rgba(255,255,255,.28); }
/* even CTA pairs — primary + secondary in a .hero-ctas row share one height and
   horizontal padding so they never look mismatched (primary was shorter). */
.hero-ctas .btn{ height:52px; padding:0 24px; }
/* hero "Talk to Us" shape reused on section CTAs — shape only, each keeps its own color */
.btn.btn-hero-shape{ height:52px; padding:0 18px; border-radius:10px; font-size:15px; font-weight:600; }

/* ---------- the Tap CTA band, verbatim structure (PV blues) ---------- */
.btn-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cta-band .btn-row{ justify-content:center; }
.cta-band{
  position:relative;
  text-align:center;
  padding:clamp(40px, 7vw, 72px) clamp(22px, 5vw, 64px);
  border-radius:var(--r-lg);
  border:1px solid transparent;
  background:
    linear-gradient(var(--bg-2), var(--bg-2)) padding-box,
    linear-gradient(135deg, rgba(74,111,181,.7), rgba(126,156,216,.7), rgba(227,183,200,.5)) border-box;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.cta-band::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(640px 300px at 50% -8%, rgba(74,111,181,.20), transparent 70%),
    radial-gradient(480px 240px at 85% 110%, rgba(227,183,200,.12), transparent 70%);
  pointer-events:none;
}
.cta-band > *{ position:relative; }
.cta-band .lead{ max-width:560px; margin:0 auto var(--space-5); }

/* ---------- surfaces ---------- */
.card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
}
.glass{
  background:var(--glass); border:1px solid var(--glass-brd); border-radius:var(--r-lg);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
.hover-lift{ transition:transform var(--fast) var(--ease), box-shadow var(--fast), border-color var(--fast); }
.hover-lift:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--ink-3); }

/* ---------- split layout: copy one side, visual the other ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,80px); align-items:center; }
.split.flip .split-visual{ order:-1; }
.split-copy{ max-width:520px; }
.split-copy .lead{ margin-top:18px; }
@media (max-width:920px){
  .split{ grid-template-columns:1fr; gap:44px; }
  .split.flip .split-visual{ order:0; }
  .split-copy{ max-width:none; }
}

/* inline proof points (replaces filler cards) */
.points{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:14px; }
.points li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink); font-size:15.5px; line-height:1.5; }
.points li b{ font-weight:700; }
.points li span{ color:var(--ink-2); }
.points .pt-ic{
  flex:none; width:26px; height:26px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--teal) 16%, transparent); color:var(--teal-ink); margin-top:1px;
}

/* ---------- even card grids (replaces misuse of .split for 3+ items) ----------
   Every interior page that lists features, steps, or services uses these so the
   boxes stay even on every breakpoint instead of an awkward 3-in-a-2-col wrap. */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-4{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media (min-width:900px){ .grid-4{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr; } }
@media (max-width:620px){ .grid-2{ grid-template-columns:1fr; } }
@media (max-width:600px){ .grid-4{ grid-template-columns:1fr; } }   /* stack on phones — long card titles overflow a 2-col grid below ~390px */

/* centered informational section — header + list stay balanced, never offset to a side */
.section-center{ text-align:center; }
.section-center .lead{ max-width:680px; margin-inline:auto; }
.section-center .points{ display:inline-grid; text-align:left; margin-top:26px; }
.section-center .points li{ justify-content:flex-start; }

/* interactive feature card — fully clickable, hover-lifts, arrow slides */
.feature-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  padding:clamp(22px,2.6vw,30px);
  background:var(--bg-2); border:1px solid var(--line); border-radius:13px;
  box-shadow:var(--shadow-sm); color:var(--ink); text-decoration:none;
  transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.feature-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--teal) 45%, transparent); }
.feature-card:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(49,92,255,.4); }
/* dark mode: frosted translucent glass — unified with the Team/Careers cards
   and the homepage Price/Position/Close cards so every box reads identically */
:root[data-theme="dark"] .feature-card{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 32px rgba(0,0,0,.28);
}
.fc-ic{
  width:46px; height:46px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--teal) 14%, transparent); border:1px solid color-mix(in srgb,var(--teal) 26%, transparent);
  color:var(--teal-ink); margin-bottom:18px;
}
.fc-ic svg{ width:22px; height:22px; }
.feature-card h3{ font-family:"Geist",Inter,system-ui,sans-serif; font-weight:600; font-size:20px; letter-spacing:-.02em; color:var(--ink); margin:0; }
.feature-card p{ margin:10px 0 0; color:var(--ink-2); font-size:14.5px; line-height:1.55; }
.fc-arrow{
  margin-top:auto; padding-top:20px; display:inline-flex; align-items:center; gap:7px;
  font-weight:700; font-size:13.5px; color:var(--teal-ink);
}
.fc-arrow svg{ width:15px; height:15px; transition:transform var(--fast) var(--ease); }
.feature-card:hover .fc-arrow svg{ transform:translateX(4px); }

/* numbered step card — clean process rows (how-it-works, broker path) */
.step-card{
  display:flex; flex-direction:column; height:100%;
  padding:clamp(22px,2.5vw,28px);
  background:var(--bg-2); border:1px solid var(--line); border-radius:13px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.step-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--teal) 45%, transparent); }
:root[data-theme="dark"] .step-card{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 32px rgba(0,0,0,.28);
}
.sc-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px; margin-bottom:16px;
  font-family:"Geist",Inter,system-ui,sans-serif; font-weight:600; font-size:15px; letter-spacing:-.01em; color:#fff;
  background:linear-gradient(135deg,#315CFF,#47CBFF);
  box-shadow:0 8px 20px rgba(49,92,255,.28);
}
.step-card h3{ font-family:"Geist",Inter,system-ui,sans-serif; font-weight:600; font-size:19px; letter-spacing:-.02em; color:var(--ink); margin:0; }
.step-card p{ margin:9px 0 0; color:var(--ink-2); font-size:14px; line-height:1.55; }

/* ---------- photo hero: the image does the talking ----------
   The hero takes the artwork's NATIVE frame (1717×916) — no zoom, no crop
   on desktop. Small screens get a gentle min-height and crop from the left. */
.hero-photo{
  position:relative; display:flex; align-items:center; overflow:hidden;
  background:var(--bg); /* identical to the page base — no color shift after the hero */
  width:100%;          /* lock width so aspect-ratio + min-height can't expand it past the viewport on mobile */
  aspect-ratio:1717/916;
  min-height:560px; max-height:92svh;
}
.hero-photo .hero-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.hero-photo::after{ /* seamless hand-off into the page */
  content:""; position:absolute; inset:auto 0 0 0; height:14%; z-index:1;
  background:linear-gradient(180deg, transparent, var(--bg));
}
.hero-photo .hero-content{
  position:relative; z-index:2;
  width:min(var(--container), calc(100% - 48px)); margin-inline:auto;
  padding-top:84px; padding-bottom:40px;
}
.hero-copy{ max-width:600px; }
.hero-photo .lead{ max-width:520px; }
.hero-photo .btn-ghost{ background:rgba(255,255,255,.5); border-color:rgba(21,24,30,.2); }
.hero-photo .btn-ghost:hover{ background:rgba(255,255,255,.75); border-color:rgba(21,24,30,.38); }
.hero-photo .chip-row span{ background:rgba(255,255,255,.45); border-color:rgba(21,24,30,.15); }
@media (max-width:920px){
  .hero-photo{ align-items:flex-end; }
  .hero-photo .hero-bg{ object-position:68% center; }
  .hero-photo .hero-content{ padding-bottom:52px; }
}

/* asset-class chips */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.chip-row span{
  font-size:12.5px; font-weight:600; color:var(--ink-2);
  padding:6px 13px; border-radius:var(--r-pill); border:1px solid var(--line);
}

/* ---------- the "real but fake" mock UI ---------- */
.visual-wrap{ position:relative; isolation:isolate; display:grid; place-items:center; padding:clamp(32px,4vw,52px) 0; min-height:480px; }
/* the color panel behind every UI card. Real color, full width, even on every section. */
.asset-slot{
  position:absolute; inset:0; z-index:0; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(140deg,#102A7A,#2563EB 55%,#47B8FF);
  box-shadow:var(--shadow);
}
.asset-slot.alt{ background:linear-gradient(140deg,#1B2C6E,#5E55A8 50%,#C99BC4); }
.mock{
  position:relative; z-index:2; border-radius:var(--r-lg); padding:16px;
  background:var(--glass-2); border:1px solid var(--glass-brd);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--shadow);
}
.mock-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.mock-title{ display:flex; align-items:center; gap:9px; font-weight:700; font-size:14px; }
.live-dot{ width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 22%, transparent); }
.live-dot.live-dot--anim{ animation:pulse 2.4s ease-out infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--teal) 40%, transparent);} 70%{ box-shadow:0 0 0 8px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }
.mock-tag{ font-size:11.5px; color:var(--ink-3); }
.mock-seg{ display:inline-flex; gap:2px; padding:3px; border-radius:var(--r-pill); background:var(--line-2); }
.mock-seg span{ font-size:11.5px; font-weight:600; color:var(--ink-3); padding:5px 11px; border-radius:var(--r-pill); }
.mock-seg span.on{ background:var(--bg-2); color:var(--ink); box-shadow:var(--shadow-sm); }

.mock-list{ display:grid; gap:8px; }
.mock-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  padding:12px 13px; border-radius:var(--r); border:1px solid var(--line-2); background:var(--bg-2);
}
.mock-row .rw-ic{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--forest) 12%, transparent); color:var(--forest); flex:none; }
.mock-row .rw-name{ font-weight:700; font-size:13.5px; line-height:1.2; }
.mock-row .rw-sub{ font-size:11.5px; color:var(--ink-3); }
.mock-row .rw-val{ font-weight:800; font-size:14px; letter-spacing:-.01em; }
.mock-row .rw-chip{ font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 9px; border-radius:var(--r-pill); color:#44588A; border:1px solid rgba(49,92,255,.26); }
.chip-teal{ color:var(--teal-ink); border-color:color-mix(in srgb,var(--teal) 35%, transparent); background:color-mix(in srgb,var(--teal) 10%, transparent); }
.chip-coral{ color:var(--coral); border-color:color-mix(in srgb,var(--coral) 40%, transparent); background:color-mix(in srgb,var(--coral) 9%, transparent); }
/* the focus/dim system — the "eye candy" */
.mock-row.is-focus{ border-color:color-mix(in srgb,var(--teal) 45%, transparent); box-shadow:0 10px 26px rgba(12,140,121,.16); position:relative; z-index:2; }
.is-dim{ opacity:.42; filter:saturate(.7); }
.is-dim2{ opacity:.26; filter:saturate(.6); }
.mock-foot{ margin-top:10px; text-align:center; font-size:11.5px; color:var(--ink-3); }

/* real info rows: tiny check */
.rw-ok{ width:22px; height:22px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(49,92,255,.12); color:#2447D4; }
.mock-row .rw-label{ font-weight:700; font-size:14px; }

/* skeleton bars */
.sk{ display:block; height:9px; border-radius:6px; background:color-mix(in srgb, var(--ink) 11%, transparent); }
.sk + .sk{ margin-top:7px; }
.sk.lt{ opacity:.55; }
.sk-pill{ display:inline-block; width:56px; height:20px; border-radius:var(--r-pill); background:color-mix(in srgb, var(--ink) 8%, transparent); }

/* valuation mock */
.mock-val .val-now{ font-weight:800; font-size:34px; letter-spacing:-.03em; line-height:1; }
.mock-val .val-row{ display:flex; align-items:baseline; gap:10px; margin-top:4px; }
.mock-val .val-delta{ font-size:13px; font-weight:700; color:var(--teal-ink); }
.mock-bar{ height:8px; border-radius:var(--r-pill); background:var(--line); overflow:hidden; margin:14px 0 4px; }
.mock-bar i{ display:block; height:100%; width:72%; border-radius:inherit; background:var(--teal-grad); }

/* chat mock */
.mock-chat{ display:grid; gap:9px; }
.msg{ max-width:78%; padding:11px 14px; border-radius:16px; font-size:13.5px; line-height:1.4; }
.msg-in{ align-self:flex-start; justify-self:start; background:rgba(49,92,255,.08); color:var(--ink); border-bottom-left-radius:5px; }
.msg-out{ align-self:flex-end; justify-self:end; background:#1FB457; color:#06160B; border-bottom-right-radius:5px; font-weight:500; }
.msg .sk{ background:color-mix(in srgb, var(--ink) 16%, transparent); width:120px; }
.msg .sk + .sk{ width:76px; }
.msg-out .sk{ background:rgba(6,22,11,.25); }
.typing{ display:inline-flex; gap:4px; padding:12px 14px; }
.typing i{ width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:typing 1.3s infinite; }
.typing i:nth-child(2){ animation-delay:.18s; } .typing i:nth-child(3){ animation-delay:.36s; }
@keyframes typing{ 0%,60%,100%{ opacity:.25; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-3px);} }

/* document / property-brief mock */
.mock-doc .doc-addr{ font-weight:800; font-size:15px; letter-spacing:-.01em; }
.mock-doc .doc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:13px 0; }
.mock-doc .doc-cell{
  min-height:60px; padding:10px 12px; border:1px solid var(--line-2); border-radius:10px;
  display:flex; flex-direction:column; justify-content:center; gap:7px;
}
.mock-doc .doc-cell .k{ font-size:10px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; line-height:1; }
.mock-doc .doc-cell .v{ font-weight:800; font-size:15px; line-height:1.1; }
.mock-doc .doc-cell .sk{ margin:0; }
.barline{ height:9px; border-radius:5px; background:var(--line); margin-top:9px; }
.barline.w90{ width:90%; } .barline.w70{ width:70%; } .barline.w80{ width:80%; } .barline.w40{ width:40%; }

/* ---------- dark feature panels: contained, rounded, hairline sunset edge ---------- */
.panel-dark{
  position:relative; overflow:hidden; color:var(--on-dark);
  border-radius:var(--r-xl); border:1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(90% 130% at 88% -12%, rgba(227,183,200,.10), transparent 55%),
    radial-gradient(75% 120% at 6% 112%, rgba(44,207,255,.13), transparent 60%),
    linear-gradient(168deg, #1A2F6B 0%, #132452 48%, #0C1838 100%);
  box-shadow:var(--shadow);
}
.panel-dark::before{ /* sunset hairline along the top edge */
  content:""; position:absolute; inset:0 0 auto 0; height:1px; background:var(--sunset); opacity:.55;
}
.panel-pad{ padding:clamp(36px,5.5vw,76px); }
/* ASCII texture layer on dark panels — injected site-wide by pv.js */
.panel-dark > *:not(.panel-ascii){ position:relative; z-index:1; }
.panel-ascii{
  margin:0; position:absolute; inset:0; z-index:0; pointer-events:none; white-space:pre;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:11px; line-height:11px; letter-spacing:1.5px;
  color:rgba(150,196,255,.7); opacity:.4; mix-blend-mode:overlay;
  -webkit-mask-image:radial-gradient(135% 135% at 50% 50%, #000 70%, transparent 100%);
          mask-image:radial-gradient(135% 135% at 50% 50%, #000 70%, transparent 100%);
}
.panel-dark .h1,.panel-dark .h2,.panel-dark .h3{ color:var(--on-dark); }
.panel-dark .lead{ color:var(--on-dark-2); }
/* white cards placed on a dark panel keep their own ink */
.panel-dark .card .h3{ color:var(--ink); }
.panel-dark .kicker{ color:#A9C3FF; background:none; border:none; padding:0; }
/* the chat card sits on the panel as a light glass object — keep its own ink */
.panel-dark .mock{ box-shadow:0 24px 56px rgba(0,0,0,.35); }

/* final CTA: headline left, actions right */
.cta-panel{ display:grid; grid-template-columns:1.5fr auto; gap:clamp(28px,4vw,64px); align-items:center; }
.cta-actions{ display:flex; flex-direction:column; gap:10px; min-width:230px; }
.cta-actions .btn{ width:100%; }
@media (max-width:860px){
  .cta-panel{ grid-template-columns:1fr; }
  .cta-actions{ flex-direction:row; flex-wrap:wrap; min-width:0; }
  .cta-actions .btn{ width:auto; flex:1 1 140px; }
}

/* ---------- property cards ---------- */
.prop-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,310px),1fr)); gap:var(--space-4); }
.prop-card{ overflow:hidden; display:flex; flex-direction:column; cursor:pointer; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
.prop-art{ height:200px; position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.prop-art .art-label{ position:absolute; left:13px; bottom:11px; font-size:11px; color:rgba(255,255,255,.82); letter-spacing:.03em; z-index:2; }
.prop-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:7px; flex:1; }
.prop-tags{ display:flex; gap:7px; flex-wrap:wrap; }
.tag{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:4px 10px; border-radius:6px; border:1px solid var(--line); color:var(--ink-2); }
.tag-status{ color:var(--teal-ink); border-color:color-mix(in srgb,var(--teal) 38%, transparent); background:color-mix(in srgb,var(--teal) 9%, transparent); }
.prop-card .h3{ margin-top:3px; }
.prop-hood{ color:var(--ink-3); font-size:13px; }
.prop-price{ font-weight:800; font-size:20px; letter-spacing:-.015em; }
.prop-stats{ display:flex; gap:14px; flex-wrap:wrap; color:var(--ink-2); font-size:13px; margin-top:1px; }
.prop-cta{ margin-top:auto; padding-top:13px; font-weight:700; font-size:13.5px; color:var(--teal-ink); }

/* art gradients — themed, restrained (no neon mesh) */
.art-1{ background:linear-gradient(140deg,#1E2C49,#3D5C9E 60%,#7E9CD8); }
.art-2{ background:linear-gradient(140deg,#22344F,#48688F 55%,#8FB0CF); }
.art-3{ background:linear-gradient(140deg,#1B2A3A,#2C4A63 60%,#5F87A8); }
.art-4{ background:linear-gradient(140deg,#202A44,#4E5E96 55%,#9AA9D8); }
.art-5{ background:linear-gradient(140deg,#3A2638,#7A5070 50%,#CBA0B4); }
.art-6{ background:linear-gradient(140deg,#102A7A,#2563EB 55%,#47B8FF); }

/* ---------- filter bar ---------- */
.filter-bar{ display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center; padding:var(--space-4); margin-bottom:var(--space-6); }
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; background:var(--bg-2); }
.seg button{ border:0; background:transparent; color:var(--ink-2); font-family:var(--font); font-weight:600; font-size:14px; padding:8px 16px; border-radius:var(--r-pill); cursor:pointer; transition:background var(--fast), color var(--fast); }
.seg button.on{ background:var(--ink); color:#fff; }
.select-glass{ appearance:none; -webkit-appearance:none;
  background:var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A909A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1px solid var(--line); border-radius:var(--r); color:var(--ink); font-family:var(--font); font-size:14px; padding:11px 36px 11px 14px; cursor:pointer; }
.select-glass:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(49,92,255,.35); }
.filter-count{ margin-left:auto; }
@media (max-width:700px){ .filter-count{ margin-left:0; width:100%; } }
.empty-state{ text-align:center; padding:var(--space-7) var(--space-5); }

/* ---------- modal ---------- */
.modal-backdrop{ position:fixed; inset:0; z-index:100; background:rgba(8,12,10,.55); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .25s var(--ease); }
.modal-backdrop.open{ opacity:1; pointer-events:auto; }
.modal-glass{ position:relative; width:min(680px,100%); max-height:88svh; overflow-y:auto; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); transform:translateY(14px); transition:transform .3s var(--ease); }
.modal-backdrop.open .modal-glass{ transform:none; }
.modal-art{ height:230px; border-bottom:1px solid var(--line); position:relative; }
.modal-art .art-label{ position:absolute; left:14px; bottom:12px; font-size:11px; color:rgba(255,255,255,.82); }
.modal-body{ padding:22px 26px 28px; }
.modal-close{ position:absolute; top:14px; right:14px; z-index:3; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--bg-2); color:var(--ink); font-size:16px; cursor:pointer; }
.modal-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:14px; margin-block:24px; }
.modal-stat{ padding:14px 16px; border:1px solid var(--line); border-radius:var(--r); min-width:0; }
.modal-stat .micro{ display:block; margin-bottom:6px; }
.modal-stat b{ display:block; font-weight:800; font-size:15px; line-height:1.35; overflow-wrap:anywhere; }
/* rich detail sections (highlights, amenities, connectivity, dev potential) —
   each only rendered when the property actually has that data */
.modal-section{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.modal-sec-h{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px; }
.modal-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px; }
.modal-list li{ position:relative; padding-left:20px; color:var(--ink-2); line-height:1.5; }
.modal-list li::before{ content:""; position:absolute; left:2px; top:9px; width:7px; height:7px; border-radius:2px; background:var(--brand,#2CCFFF); }
.modal-prose{ margin:0; color:var(--ink-2); line-height:1.6; }
.modal-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.modal-chips span{ font-size:12.5px; font-weight:600; color:var(--ink-2); background:var(--bg-3,color-mix(in srgb,var(--ink) 6%,transparent)); border:1px solid var(--line); border-radius:8px; padding:6px 12px; }
/* CTA row — even, consistently-shaped buttons that share the width and wrap cleanly */
.modal-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.modal-cta .btn{ flex:1 1 180px; height:50px; padding:0 22px; border-radius:12px; }

/* ---------- team ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:var(--space-4); }
.team-card{ overflow:hidden; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }
.team-photo{ height:230px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line); }
.team-photo .avatar{ width:80px; height:80px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--forest); color:#fff; font-weight:800; font-size:25px; border:1px solid rgba(255,255,255,.25); }
.team-body{ padding:16px 18px 18px; }
.team-body .micro{ display:block; margin:2px 0 9px; }
.team-body p{ margin:0; font-size:14px; color:var(--ink-2); }

/* ---------- contact ---------- */
/* light, tight, one desktop viewport: left = explanation + compact details,
   right = single form card. Uses theme tokens so the light/dark toggle still
   works — light mode reads as the clean off-white in the brief. */
.contact-wrap{
  width:min(1180px, calc(100% - 48px)); margin-inline:auto; padding-top:120px; padding-bottom:80px;
  display:grid; grid-template-columns:1fr .95fr; gap:80px; align-items:start;
}
@media (max-width:900px){
  .contact-wrap{ grid-template-columns:1fr; gap:var(--space-6); padding-top:104px; padding-bottom:56px; }
}
.contact-head .lead{ max-width:440px; margin-top:14px; }

/* benefit rows — tiny blue check + text, no card background */
.contact-checks{ display:grid; gap:15px; margin-top:var(--space-6); }
.contact-check{ display:flex; align-items:center; gap:12px; font-size:15.5px; font-weight:500; color:var(--ink); }
.contact-check .rw-ok{ width:22px; height:22px; }
.contact-check .rw-ok svg{ width:12px; height:12px; }

/* compact direct-contact block — small text, not cards.
   Stays one horizontal row at every width (WhatsApp / Email / Instagram side by
   side); the email column shrinks and wraps inside itself rather than dropping. */
.contact-direct{
  display:flex; flex-direction:column; gap:18px;
  margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--line);
}
.contact-direct > div{ min-width:0; }
.contact-direct .micro{ display:block; margin-bottom:4px; }
.contact-direct a, .contact-direct span{ font-size:15px; font-weight:600; color:var(--ink); line-height:1.4; }
/* full email fits on one line at full card width; only wraps (never clips) if the card gets very narrow */
.contact-direct a[data-email]{ display:inline-block; max-width:100%; overflow-wrap:anywhere; }
.contact-direct a{ transition:color var(--fast); }
.contact-direct a:hover{ color:var(--teal-ink); }

/* single form card */
.contact-form{
  padding:40px; border-radius:24px; display:grid; gap:16px;
  border:1px solid var(--line); box-shadow:0 24px 80px rgba(15,23,42,.08);
}
.contact-form .h3{ margin-bottom:2px; }
.contact-form .input-glass,
.contact-form .select-glass{ height:52px; }
.contact-form .textarea-glass{ min-height:110px; }
.form-row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .form-row2{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }
.input-glass,.textarea-glass{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); color:var(--ink); font-family:var(--font); font-size:15px; padding:13px 14px; transition:border-color var(--fast), box-shadow var(--fast); }
.input-glass::placeholder,.textarea-glass::placeholder{ color:var(--ink-3); }
.input-glass:focus,.textarea-glass:focus,.select-glass:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(49,92,255,.18); }
.textarea-glass{ resize:vertical; min-height:104px; }

/* ---------- CTA visual (icon bubble for small accents) ---------- */
.icon-bubble{ width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--teal) 14%, transparent); border:1px solid color-mix(in srgb,var(--teal) 28%, transparent); color:var(--teal-ink); }

/* ---------- footer: hairlines, air, ghost wordmark ---------- */
.footer{ margin-top:var(--space-8); overflow:hidden; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--space-6); padding-block:var(--space-7) var(--space-7); }
.footer h4{ font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:0 0 16px; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.footer a{ color:var(--ink-2); font-size:14px; transition:color var(--fast); }
.footer a:hover{ color:var(--ink); }
.footer .tagline{ color:var(--ink-2); font-size:14.5px; line-height:1.55; margin:14px 0 0; max-width:280px; }
/* the light/dark toggle now lives in the floating bottom-left circle (.pv-theme-fab,
   injected by pv.js). The old footer switch is hidden but kept in the DOM/JS-synced. */
.footer-theme{ display:none; }
.footer-theme .theme-switch{ --toggle-size:13px; opacity:.92; transition:opacity var(--fast); }
.footer-theme .theme-switch:hover{ opacity:1; }
.footer-theme .theme-switch__container,
.footer-theme .theme-switch__container::before{ border-radius:9px; }

/* ---------- floating light/dark toggle (bottom-left circle) ----------
   The original blue .theme-switch art (sun→crater-moon reveal, clouds, stars) with
   its container SQUARED into a circle. width==height makes the sun/moon travel
   cancel out, so the reveal happens in place. Injected by pv.js, defined once. */
.pv-theme-fab{ position:fixed; left:22px; bottom:22px; z-index:900; -webkit-tap-highlight-color:transparent; }
.pv-theme-fab .theme-switch--circle{ --toggle-size:22px; --sun-moon-diameter:1.75em; }
.pv-theme-fab .theme-switch--circle .theme-switch__container{
  width:var(--container-height);            /* square footprint */
  border-radius:50%;
  box-shadow:0 10px 26px rgba(10,18,45,.22), 0 2px 6px rgba(10,18,45,.12),
             0em -0.062em 0.062em rgba(0,0,0,0.25), 0em 0.062em 0.125em rgba(255,255,255,0.5);
  transition:var(--switch-transition), box-shadow var(--fast);
}
.pv-theme-fab .theme-switch--circle .theme-switch__container::before{ border-radius:50%; }
/* keep the sun/moon dead-centered — neutralize the slider's hover nudge */
.pv-theme-fab .theme-switch--circle .theme-switch__circle-container:hover,
.pv-theme-fab .theme-switch--circle .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover{
  left:var(--circle-container-offset);
}
.pv-theme-fab .theme-switch--circle:hover .theme-switch__container{
  box-shadow:0 16px 34px rgba(10,18,45,.28), 0 3px 8px rgba(10,18,45,.14),
             0em -0.062em 0.062em rgba(0,0,0,0.25), 0em 0.062em 0.125em rgba(255,255,255,0.5);
}
@media (max-width:520px){
  .pv-theme-fab{ left:16px; bottom:18px; }
  .pv-theme-fab .theme-switch--circle{ --toggle-size:19px; }
}
.footer-mark{
  font-weight:800; letter-spacing:-.045em; line-height:.82; white-space:nowrap; user-select:none;
  font-size:clamp(56px,10.5vw,136px); color:color-mix(in srgb, var(--ink) 5%, transparent);
  padding-top:8px; pointer-events:none;
}
.footer-legal{ padding-block:20px; display:flex; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap; align-items:center; }
.footer-legal-links{ display:inline-flex; align-items:center; gap:18px; flex-wrap:wrap; }
.footer-legal-links a{ font-size:12px; color:var(--ink-3); letter-spacing:.02em; transition:color var(--fast); }
.footer-legal-links a:hover{ color:var(--ink); }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){
  .footer-grid{ grid-template-columns:1fr; }
  /* keep the ghost wordmark on ONE horizontal line (no stacking) — scale it to fill the
     container width edge-to-edge like desktop, while staying short of clipping. */
  .footer-mark{ font-size:clamp(28px,10vw,84px); }
}

/* ---------- WhatsApp FAB ---------- */
/* sized to match the theme toggle so the two bottom corners feel even */
.wa-fab{ position:fixed; right:22px; bottom:22px; z-index:85; width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#1FB457; color:#fff; box-shadow:0 12px 30px rgba(31,180,87,.35); transition:transform var(--fast) var(--ease), box-shadow var(--fast); }
.wa-fab:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 16px 38px rgba(31,180,87,.45); }
.wa-fab svg{ width:29px; height:29px; }
@media (max-width:520px){ .wa-fab{ width:48px; height:48px; right:16px; bottom:16px; } .wa-fab svg{ width:25px; height:25px; } }

/* ---------- page header (interior pages) ---------- */
.page-head{ padding-top:calc(var(--space-8) + 40px); padding-bottom:var(--space-5); }
.page-head .lead{ max-width:600px; margin-top:16px; }

/* ---------- motion ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.07s; } .reveal[data-d="2"]{ transition-delay:.14s; } .reveal[data-d="3"]{ transition-delay:.21s; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .live-dot--anim,.typing i{ animation:none; }
  .hover-lift:hover,.btn:hover,.prop-card:hover{ transform:none; }
}

/* ======================================================================
   THE SPOTLIGHT  —  one motif, every section
   A group of .spot-item inside [data-spot]. Whatever is focused gets
   .is-lit (full color, its .nugget opens); the rest dim to gray.
   Driven by hover (desktop), auto-cycle when in view, tap (mobile).
   ====================================================================== */
.spot{ display:grid; gap:10px; }
.spot-item{
  position:relative; display:block; width:100%; text-align:left; cursor:pointer;
  font-family:var(--font); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2);
  padding:13px 15px;
  transition:opacity .4s var(--ease), filter .4s var(--ease), transform .3s var(--ease),
    border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.spot-row{ display:flex; align-items:center; gap:12px; }
.spot-row .si-ic{ width:30px; height:30px; flex:none; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--teal) 12%, transparent); color:var(--teal-ink); }
.spot-name{ font-weight:700; font-size:14px; line-height:1.2; }
.spot-meta{ margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#44588A; border:1px solid rgba(49,92,255,.26); background:rgba(49,92,255,.06);
  padding:4px 9px; border-radius:var(--r-pill); white-space:nowrap; transition:color .3s, background .3s, border-color .3s; }

/* the nugget: the fact the copy left out — always visible now, never hidden */
.nugget{ display:block; opacity:1; margin-top:10px;
  font-size:12.5px; color:var(--ink-2); line-height:1.45; }

/* states (engine sets data-armed + .is-lit) — lit is just a moving highlight,
   nothing is hidden or grayed out, so every card reads fully at rest */
.spot[data-armed] .spot-item:not(.is-lit){ opacity:1; }
.spot-item.is-lit{ border-color:rgba(49,92,255,.5); box-shadow:0 14px 30px rgba(49,92,255,.16); transform:translateY(-1px); }
.spot-item.is-lit .spot-meta{ color:#fff; background:var(--teal); border-color:transparent; }
.spot-item:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(49,92,255,.45); }
/* reduced motion / no-JS: show everything, nothing dimmed */
.spot.spot-static .spot-item{ opacity:1; filter:none; }
.spot.spot-static .nugget{ max-height:120px; opacity:1; margin-top:10px; }

/* inline variant: pills that grow to show their nugget (hero asset types, flags) */
.spot--inline{ display:flex; flex-wrap:wrap; gap:8px; }
.spot--inline .spot-item{ display:inline-flex; align-items:center; width:auto; padding:8px 15px; border-radius:var(--r-pill);
  font-weight:600; font-size:13px; }
.spot--inline .nugget{ max-width:none; margin:0 0 0 7px; white-space:nowrap; font-weight:700; color:var(--teal-ink); opacity:1; }
.spot--inline .spot-item.is-lit{ transform:none; border-color:rgba(49,92,255,.5); }
.spot--inline .nugget::before{ content:"· "; }

/* two-card teaser (What we do): the lit card reveals its checklist */
.spot--cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.spot--cards .spot-item{ padding:22px; }
.spot--cards .card-h{ font-weight:800; font-size:17px; letter-spacing:-.01em; }
.spot--cards .card-p{ font-size:13.5px; color:var(--ink-2); margin:8px 0 0; line-height:1.5; }
.spot--cards .nugget{ display:flex; flex-wrap:wrap; gap:6px; }
.chk{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--teal-ink);
  background:rgba(49,92,255,.08); border:1px solid rgba(49,92,255,.2); padding:5px 10px; border-radius:var(--r-pill); }
@media (max-width:560px){ .spot--cards{ grid-template-columns:1fr; } }

/* locked feed (See deals before listed): members-only cards blurred, one sample lit */
.feed{ display:grid; gap:10px; }
.feed-card{ border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2); padding:13px 15px; display:flex; align-items:center; gap:12px; }
.feed-card.locked{ filter:grayscale(1) blur(3px); opacity:.55; user-select:none; }
.feed-card.sample{ border-color:rgba(49,92,255,.5); box-shadow:0 14px 30px rgba(49,92,255,.16); }
.feed-card .fc-ic{ width:30px; height:30px; flex:none; border-radius:9px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--teal) 12%, transparent); color:var(--teal-ink); }
.feed-card .fc-name{ font-weight:700; font-size:13.5px; }
.feed-card .fc-sub{ font-size:11.5px; color:var(--ink-3); }
.feed-lock{ margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.feed-card.sample .feed-lock{ color:#fff; background:var(--teal); border-radius:var(--r-pill); padding:4px 9px; }

/* taken seat tile (sits beside open .spot-item seats, never lights) */
.seat-taken{ border:1px solid var(--line); border-radius:var(--r); background:var(--bg-2); padding:13px 15px;
  display:flex; align-items:center; gap:12px; opacity:.5; filter:grayscale(1); }
.seat-taken .si-ic{ width:30px; height:30px; flex:none; border-radius:9px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--ink) 8%, transparent); color:var(--ink-3); }
.seat-taken .spot-name{ font-weight:700; font-size:14px; }
.seat-taken .spot-meta{ margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }

/* soft badge (replies in minutes) */
.badge-soft{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; color:var(--teal-ink);
  background:rgba(49,92,255,.08); border:1px solid rgba(49,92,255,.2); padding:7px 13px; border-radius:var(--r-pill); }
.badge-soft .live-dot{ width:7px; height:7px; }

/* ── Light/dark theme toggle (animated sun↔moon switch) ──
   Pure CSS: the hidden checkbox drives every transition via :checked.
   Sized to sit beside the nav CTA (height ≈ 2.5em → ~32px at 13px). */
.theme-switch {
  --toggle-size: 13px;
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  --container-light-bg: #3D7EAE;
  --container-night-bg: #1D1F2C;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #ECCA2F;
  --moon-bg: #C4C9D1;
  --spot-color: #959DB1;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff;
  --clouds-color: #F3FDFF;
  --back-clouds-color: #AACADF;
  --switch-transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
  display: inline-flex;
}
.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--toggle-size);
}
.theme-switch__container {
  width: var(--container-width);
  height: var(--container-height);
  background-color: var(--container-light-bg);
  border-radius: var(--container-radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  transition: var(--switch-transition);
  position: relative;
}
.theme-switch__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  border-radius: var(--container-radius);
}
.theme-switch__checkbox { display: none; }
.theme-switch__circle-container {
  width: var(--circle-container-diameter);
  height: var(--circle-container-diameter);
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: var(--circle-container-offset);
  top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display: flex;
  transition: var(--circle-transition);
  pointer-events: none;
}
.theme-switch__sun-moon-container {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  border-radius: var(--container-radius);
  background-color: var(--sun-bg);
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  overflow: hidden;
  transition: var(--switch-transition);
}
.theme-switch__moon {
  transform: translateX(100%);
  width: 100%;
  height: 100%;
  background-color: var(--moon-bg);
  border-radius: inherit;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  transition: var(--switch-transition);
  position: relative;
}
.theme-switch__spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--container-radius);
  background-color: var(--spot-color);
  box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}
.theme-switch__spot:nth-of-type(2) {
  width: 0.375em;
  height: 0.375em;
  top: 0.937em;
  left: 1.375em;
}
.theme-switch__spot:nth-last-of-type(3) {
  width: 0.25em;
  height: 0.25em;
  top: 0.312em;
  left: 0.812em;
}
.theme-switch__clouds {
  width: 1.25em;
  height: 1.25em;
  background-color: var(--clouds-color);
  border-radius: var(--container-radius);
  position: absolute;
  bottom: -0.625em;
  left: 0.312em;
  box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
  transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}
.theme-switch__stars-container {
  position: absolute;
  color: var(--stars-color);
  top: -100%;
  left: 0.312em;
  width: 2.75em;
  height: auto;
  transition: var(--switch-transition);
}
/* actions */
.theme-switch__checkbox:checked + .theme-switch__container {
  background-color: var(--container-night-bg);
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em);
}
.theme-switch__circle-container:hover {
  left: calc(var(--circle-container-offset) + 0.187em);
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {
  transform: translate(0);
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {
  bottom: -4.062em;
}
.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
  top: 50%;
  transform: translateY(-50%);
}

/* ==========================================================================
   INTERNAL PAGES — shared quality standard (Team, Careers, …)
   A centered hero, a principal/feature block, refined "expensive" cards,
   and a subtle premium scroll reveal. Builds on the existing system
   (tokens, .container, .h1/.h2, .kicker, .split, .slot-photo, .points).
   ========================================================================== */

/* Each internal-page block is a single, self-contained section with its own
   vertical rhythm — content is centered inside a height tied to the desktop
   proportion targets, so the page reads as a few clean full blocks. */
.tm-block-section{ display:flex; flex-direction:column; justify-content:center; }

/* ── Hero: centered, spacious  ·  target ≈ 1462 × 659 (≈ 45vw tall) ── */
.tm-hero{ min-height:clamp(600px,58vw,880px); padding-top:calc(var(--space-7) + 24px); padding-bottom:clamp(44px,5vw,76px); text-align:center; align-items:center; }
.tm-hero-inner{ max-width:940px; margin-inline:auto; }
.tm-hero .kicker{ margin-bottom:18px; }
.tm-hero .h1{ max-width:880px; margin-inline:auto; }
/* subcopy: two short lines, held to a tidy ~512px measure */
.tm-hero-sub{ max-width:512px; margin:clamp(28px,3.2vw,46px) auto 0; }
.tm-hero .hero-ctas{ justify-content:center; margin-top:30px; }

/* ── Feature block ── */
.tm-feature{ padding-block:clamp(56px,6vw,96px); }
/* Team page only: hold the feature to its proportion target ≈ 1462 × 866 */
.tm-feature.tm-tall{ min-height:clamp(740px,59.2vw,900px); }

/* blue word treatment — Property Ventures blue gradient */
.grad-blue{
  background:linear-gradient(108deg,#1A4AD8 0%,#2453E6 52%,#3B6BFF 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#2453E6;
}
:root[data-theme="dark"] .grad-blue{
  background:linear-gradient(108deg,#6E9BFF 0%,#88A2FF 55%,#A8C2FF 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ── Feature block: large portrait + caption left, copy right ── */
.tm-split{ align-items:start; }
/* Detail / Careers feature rows: image is the tall element and the copy is short,
   so vertically CENTER the copy against the image (was sitting too high at the top).
   The Team feature (.tm-tall) keeps its top-aligned stacked layout. */
.tm-feature:not(.tm-tall) .tm-split{ align-items:center; }
/* service-detail "what we do" image: widen the visual column so the framed
   photo reads at the same generous size as the landing-page owner sections. */
@media (min-width:901px){
  .tm-feature:not(.tm-tall) .tm-split{ grid-template-columns:1.2fr .8fr; }
}
/* .slot-photo.portrait centers itself (margin:auto) — override at equal
   specificity so the photo's left edge lines up with the name beneath it (x:155) */
.slot-photo.tm-photo{ margin-inline:0; max-width:410px; }
/* Careers feature photo: portrait, shown in full, left-aligned in its column */
.slot-photo.cr-photo{ margin-inline:0; max-width:460px; }
@media (max-width:760px){ .slot-photo.cr-photo{ margin-inline:auto; } }

/* ── Feature image: clean standalone photo (no blue frame). The old blue ASCII
   backdrop made the images read like buttons and competed with the hero CTAs, so
   it's removed site-wide — the photo now carries only its own radius + shadow. ── */
.owners-visual{ position:relative; padding:0; }
/* blue frame retired: keep the element inert so existing markup/pv.js don't break */
.owners-art{ display:none; }
:root[data-theme="dark"] .owners-art{ display:none; }
.owners-ascii{
  margin:0; position:absolute; inset:0; white-space:pre;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:10px; line-height:10px; letter-spacing:1.5px;
  color:rgba(178,210,255,.85); opacity:.5; mix-blend-mode:overlay;
  -webkit-mask-image:radial-gradient(140% 140% at 50% 50%, #000 70%, rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(140% 140% at 50% 50%, #000 70%, rgba(0,0,0,0) 100%);
}
.owners-visual .slot-photo{ position:relative; z-index:1; border:none; border-radius:14px; box-shadow:0 16px 36px rgba(8,20,70,.38); }
:root[data-theme="light"] .owners-visual .slot-photo{ box-shadow:0 14px 30px rgba(8,20,70,.20); }
/* portrait frame variant (Team headshot): hold the frame to the photo width so the
   ASCII square hugs the photo instead of spanning the whole column */
.owners-visual.tm-photo-frame{ max-width:410px; margin-inline:0; }
.owners-visual.tm-photo-frame .slot-photo{ max-width:none; width:100%; }
@media (max-width:760px){ .owners-visual.tm-photo-frame{ margin-inline:auto; } }

/* ghost button (the landing "Sell With Us" control) on a blue/dark panel: force a
   light outline in BOTH themes so it stays visible where btn-ghost would go dark. */
.panel-dark .btn-ghost{ border-color:rgba(255,255,255,.34); color:#fff; }
.panel-dark .btn-ghost:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.55); }
.tm-person{ margin-top:14px; max-width:410px; }
.tm-person-name{ font-family:"Geist",Inter,system-ui,sans-serif; font-weight:600; font-size:21px; letter-spacing:-.02em; color:var(--ink); line-height:1.2; }
.tm-person-title{ margin-top:16px; color:var(--ink-2); font-size:15px; }
.tm-person-link{ display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-weight:600; font-size:14px; color:var(--teal-ink); text-decoration:none; transition:opacity var(--fast) var(--ease); }
.tm-person-link svg{ width:17px; height:17px; }
.tm-person-link:hover{ opacity:.72; }
.tm-feature-copy{ max-width:520px; padding-top:6px; }
.tm-feature-copy .h2{ margin-bottom:22px; }
.tm-block{ font-size:clamp(16.5px,1.2vw,19px); }
.tm-block + .tm-block{ margin-top:18px; }

/* ── Refined card grids: sharper radius, subtle border, soft shadow ── */
.tm-metrics-head,.tm-section-head{ text-align:center; max-width:620px; margin-inline:auto; }
.tm-metrics{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:40px; }
@media (min-width:880px){ .tm-metrics{ grid-template-columns:repeat(4,1fr); } }
/* track-record boxes sitting inside the feature copy column.
   Phones: a single clean full-width column so multi-word values like
   "40 Under 40" and labels like "Years in South Florida" stay on ONE line
   and every box is exactly equal. 2×2 from 560px up. */
.tm-metrics-inline{ margin-top:36px; gap:14px; grid-template-columns:1fr; }
@media (min-width:560px){ .tm-metrics-inline{ grid-template-columns:repeat(2,1fr); } }
.tm-metrics-inline .tm-metric{ min-height:104px; padding:20px 18px; }
.tm-metrics-inline .m-num{ white-space:nowrap; }
.tm-metrics-inline .m-label{ white-space:nowrap; }
.tm-metric{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  min-height:128px; padding:24px 22px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:13px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.tm-metric:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--teal) 38%, transparent); }
.tm-metric .m-num{ font-family:"Geist",Inter,system-ui,sans-serif; font-weight:600; font-size:clamp(26px,2.4vw,32px); letter-spacing:-.03em; line-height:1.04; color:var(--ink); }
.tm-metric .m-label{ margin-top:10px; font-size:13px; font-weight:500; letter-spacing:.01em; color:var(--ink-2); }
:root[data-theme="dark"] .tm-metric{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 32px rgba(0,0,0,.28);
}

/* feature card with the same refined radius (sharper than --r-lg) */
.tm-card-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:40px; }
@media (min-width:880px){ .tm-card-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:600px){ .tm-card-grid{ grid-template-columns:1fr; } }
.tm-card{
  display:flex; flex-direction:column; height:100%; padding:26px 24px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:13px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.tm-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--teal) 38%, transparent); }
.tm-card .tm-ic{
  width:44px; height:44px; flex:none; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb,var(--teal) 14%, transparent); border:1px solid color-mix(in srgb,var(--teal) 26%, transparent);
  color:var(--teal-ink); margin-bottom:18px;
}
.tm-card .tm-ic svg{ width:21px; height:21px; }
.tm-card h3{ font-family:"Geist",Inter,system-ui,sans-serif; font-weight:600; font-size:18.5px; letter-spacing:-.02em; color:var(--ink); margin:0; }
.tm-card p{ margin:9px 0 0; color:var(--ink-2); font-size:14.5px; line-height:1.55; }
:root[data-theme="dark"] .tm-card{
  background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 32px rgba(0,0,0,.28);
}

/* ── Premium scroll reveal (subtle, no bounce). Layers on the .reveal IO
     trigger (pv.js also observes .tm-reveal); motion only when allowed. ── */
@media (prefers-reduced-motion: no-preference){
  .tm-reveal{ opacity:0; transition:opacity 760ms cubic-bezier(.22,1,.36,1), transform 760ms cubic-bezier(.22,1,.36,1); will-change:opacity,transform; }
  .tm-reveal.from-left{ transform:translateX(-28px); }
  .tm-reveal.from-up{ transform:translateY(24px); }
  .tm-reveal.in{ opacity:1; transform:none; }
  /* soft card stagger: ~100ms steps (within the 80–120ms spec) */
  .from-up[data-d="1"]{ transition-delay:100ms; }
  .from-up[data-d="2"]{ transition-delay:200ms; }
  .from-up[data-d="3"]{ transition-delay:300ms; }
  .tm-hero .tm-reveal[data-d="1"]{ transition-delay:80ms; }
  .tm-hero .tm-reveal[data-d="2"]{ transition-delay:160ms; }
}
@media (prefers-reduced-motion: reduce){
  .tm-reveal{ opacity:1; transform:none; }
}

@media (max-width:760px){
  .slot-photo.tm-photo,.tm-person{ margin-inline:auto; max-width:400px; }
  .tm-person{ text-align:center; }
  .tm-person-link{ justify-content:center; }
}