/* ============================================================
   STEVE HOLM — black page, white light, grey in the falloff

   One continuous black ground. Light arrives as soft radial washes
   rather than hard blocks, so the page fades between black, grey and
   white instead of switching between them. The cue is the half moon
   in Steve's own mark: a bright core dissolving outward.

   No card borders, no grid rules. Separation is done with space and
   gradient hairlines that fade out at both ends.

   Deliberately single-theme. Every colour painted explicitly.
   ============================================================ */
:root{
  --black:#000;
  --g950:#070707;
  --g900:#0d0d0d;
  --g850:#141414;
  --g800:#1b1b1b;
  --g700:#262626;
  --g600:#3a3a3a;
  --g500:#5a5a5a;
  --g400:#7d7d7d;
  --g300:#a6a6a6;
  --g200:#cfcfcf;
  --g100:#ececec;
  --white:#fff;

  --fg:      var(--g100);
  --muted:   var(--g200);
  --faint:   var(--g400);
  --radius:  20px;

  --step-1: 1.0625rem;
  --step-2: clamp(1.15rem, .95rem + .75vw, 1.55rem);
  --h3:     clamp(1.3rem, 1.1rem + .6vw, 1.62rem);
  --h2:     clamp(2.2rem, 1.3rem + 3.4vw, 3.9rem);
  --h1:     clamp(2.7rem, 1.1rem + 6.4vw, 6.2rem);

  --gutter:  clamp(1.5rem, 5vw, 6rem);
  --section: clamp(5rem, 11vw, 11rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--black);
  color:var(--fg);
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:var(--step-1);
  line-height:1.68;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{ margin:0; font-weight:200; letter-spacing:-.035em; line-height:1.04; text-wrap:balance; color:var(--white); }
h1{ font-size:var(--h1); }
h2{ font-size:var(--h2); }
h3{ font-size:var(--h3); font-weight:300; letter-spacing:-.022em; line-height:1.22; }
h4{ font-size:1.02rem; font-weight:400; letter-spacing:-.008em; }
p{ margin:0; }
a{ color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:1px solid var(--g200); outline-offset:5px; border-radius:6px; }

.wrap{ max-width:1380px; margin-inline:auto; padding-inline:var(--gutter); }

/* soft hairline — fades out at both ends, never a hard edge */
.rule,
.softrule{ height:1px; border:0; margin:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.14) 18%, rgba(255,255,255,.14) 82%, transparent); }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* atmospheric wash — grey light bleeding into the black */
.wash{ position:absolute; pointer-events:none; z-index:0; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 40%, transparent 70%); }

/* ---------- type devices ---------- */
.eyebrow{
  font-size:.68rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase;
  color:var(--faint); display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
}
.eyebrow .mark{ color:var(--g200); }
.lede{ font-size:var(--step-2); color:var(--muted); line-height:1.6; max-width:38ch; font-weight:200; letter-spacing:-.01em; }
.body-copy{ color:var(--muted); max-width:60ch; font-weight:300; }
.body-copy + .body-copy{ margin-top:1.3rem; }
.body-copy strong{ color:var(--g100); font-weight:400; }

/* ---------- pill ---------- */
.pill{
  display:inline-flex; align-items:center; gap:1.1rem;
  padding:.55rem .55rem .55rem 1.5rem;
  border:1px solid rgba(255,255,255,.16); border-radius:999px;
  font-size:.74rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; color:var(--g100); white-space:nowrap; background:rgba(255,255,255,.02);
  transition:border-color .5s ease, background .5s ease, color .5s ease;
}
.pill .arw{
  width:2.1rem; height:2.1rem; flex:none; border-radius:999px; display:grid; place-items:center;
  background:var(--white); color:var(--black); transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.pill .arw svg{ width:.85rem; height:.85rem; }
.pill:hover{ border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.06); }
.pill:hover .arw{ transform:translateX(3px); }
.pill--solid{ background:var(--white); color:var(--black); border-color:var(--white); }
.pill--solid .arw{ background:var(--black); color:var(--white); }
.pill--solid:hover{ background:var(--g100); border-color:var(--g100); }

.textlink{
  font-size:.68rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--faint); text-decoration:none;
  display:inline-flex; align-items:center; gap:.7rem; transition:color .4s ease;
}
.textlink:hover{ color:var(--white); }
.textlink svg{ width:.7rem; height:.7rem; transition:transform .4s ease; }
.textlink:hover svg{ transform:translateX(4px); }

/* ---------- imagery ---------- */
img{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--g500); }

/* ============================================================
   INTERACTIVE HERO
   The profile sits in near-darkness and a soft light follows the
   pointer, revealing it. Same moon idea as the rest of the page,
   except the visitor is holding the light. Touch and reduced-motion
   get a calm ambient state instead.
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; margin-top:-5.5rem; padding-block:9rem clamp(3rem,7vw,5rem); }
.hero-photo{ position:absolute; inset:0; z-index:0; }
.hero-photo img,
.hero-photo object,
.hero-photo .house{
  width:100%; height:100%; object-fit:cover; object-position:center 46%;
  filter:grayscale(1) contrast(1.02) brightness(1.5);
}
.hero-photo .grad{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(0,0,0,.9) 0%, rgba(0,0,0,.78) 26%, rgba(0,0,0,.42) 46%, rgba(0,0,0,.08) 70%, rgba(0,0,0,0) 88%),
    linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.06) 26%, rgba(0,0,0,0) 52%, rgba(0,0,0,.45) 84%, #000 100%);
}
.hero-hint{
  position:absolute; z-index:3; right:var(--gutter); bottom:clamp(2rem,5vw,3.4rem);
  display:none; align-items:center; gap:.7rem;
  font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; color:var(--g600);
  transition:opacity 1s ease; pointer-events:none; white-space:nowrap;
}
@media (min-width:900px) and (pointer:fine){ .hero-hint{ display:flex; } }
.hero-hint::before{ content:""; width:1.6rem; height:1px; background:var(--g700); }
.hero-hint.gone{ opacity:0; }
.hero-in{ position:relative; z-index:2; width:100%; }
.hero-in::before{
  content:""; position:absolute; z-index:-1;
  left:calc(var(--gutter) * -1); right:0; top:-2.5rem; bottom:-3rem;
  background:radial-gradient(120% 100% at 22% 55%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.78) 38%, rgba(0,0,0,.42) 62%, rgba(0,0,0,0) 82%);
  pointer-events:none;
}
@media (max-width:899px){
  .hero-in::before{
    left:calc(var(--gutter) * -1); right:calc(var(--gutter) * -1);
    background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.66) 14%, rgba(0,0,0,.82) 40%, rgba(0,0,0,.88) 100%);
  }
}
.hero h1{ max-width:11ch; }
.hero .eyebrow{ margin-bottom:1.7rem; }
.hero .lede{ margin-top:1.8rem; max-width:34ch; color:var(--g200); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.6rem; }
.hero-meta{
  margin-top:clamp(3rem,6vw,4.5rem); padding-top:1.8rem; width:100%; position:relative;
  display:flex; flex-wrap:wrap; gap:1rem 3rem;
  font-size:.65rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--g500);
}
.hero-meta::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.2),transparent); }
.hero-meta b{ color:var(--g300); font-weight:500; }
@media (prefers-reduced-motion: reduce){ .hero-photo .veil{ opacity:.12; -webkit-mask-image:none; mask-image:none; } }

/* ============================================================
   STORY BLOCKS — a photograph and the story it carries
   ============================================================ */
.tale{ position:relative; padding-block:clamp(3.5rem,7vw,6rem); }
.tale-grid{ display:grid; gap:2.5rem; align-items:center; }
@media (min-width:900px){
  .tale-grid{ grid-template-columns:1fr 1fr; gap:clamp(3rem,6vw,6rem); }
  .tale--flip .tale-media{ order:2; }
}
.tale-media{ position:relative; margin:0; border-radius:clamp(14px,2vw,22px); overflow:hidden; background:var(--g900); }
.tale-media img{
  width:100%; max-height:min(76vh,720px); object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.02) brightness(1.06);
  transition:filter .9s ease, transform 1.3s cubic-bezier(.16,1,.3,1);
}
.tale-media:hover img{ filter:grayscale(.15) contrast(1.02) brightness(1.14); transform:scale(1.015); }
.tale-media figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:2.6rem 1.5rem 1.2rem;
  background:linear-gradient(to top, rgba(0,0,0,.88), transparent);
  font-size:.61rem; letter-spacing:.24em; text-transform:uppercase; color:var(--g300);
}
.tale-body h2{ max-width:16ch; }
.tale-body .eyebrow{ margin-bottom:1.4rem; }
.tale-body .body-copy{ margin-top:1.6rem; }
.tale-body .textlink{ margin-top:2rem; }

/* ---------- portrait band ---------- */
.face{ position:relative; background:var(--black); overflow:hidden; }
.face img{
  width:100%; height:clamp(340px,54vw,680px); object-fit:cover; object-position:center 34%;
  filter:grayscale(1) contrast(1.02) brightness(1.18);
}
.face::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,.1) 60%, rgba(0,0,0,.9) 100%);
}
.face-cap{
  position:absolute; left:0; right:0; bottom:clamp(1.4rem,4vw,3rem); z-index:2;
  display:flex; flex-wrap:wrap; gap:.5rem 2rem; align-items:baseline; justify-content:space-between;
}
.face-cap p{ font-size:clamp(1.1rem,.9rem + .7vw,1.6rem); font-weight:200; letter-spacing:-.025em; color:var(--white); }
.face-cap span{ font-size:.63rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--g300); }
@media (max-width:899px){ .face img{ height:auto; max-height:none; object-fit:contain; } .face::after{ background:linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,0) 30%, rgba(0,0,0,.85)); } }

/* ---------- pull quote over a photograph ---------- */
.pull{ position:relative; padding-block:clamp(4.5rem,10vw,9rem); overflow:hidden; }
.pull-photo{ position:absolute; inset:0; z-index:0; }
.pull-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 40%; filter:grayscale(1) contrast(1.04) brightness(.72); }
.pull-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.26) 45%, rgba(0,0,0,.8)); }
.pull > .wrap{ position:relative; z-index:2; display:grid; justify-items:center; text-align:center; }
.pull blockquote{ margin:0; max-width:19ch; font-size:clamp(1.9rem,1.2rem + 3.2vw,4rem); font-weight:200; letter-spacing:-.035em; line-height:1.1; color:var(--white); }
.pull .attrib{ margin-top:2.2rem; font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--g400); }
.pull .sub{ margin-top:1.9rem; max-width:54ch; color:var(--g300); font-weight:200; font-size:var(--step-2); line-height:1.55; }

/* ============================================================
   TOP BAR + HEADER
   ============================================================ */
.topbar{ position:relative; z-index:70; background:var(--black); }
.topbar-in{ display:flex; align-items:center; justify-content:center; gap:.8rem; flex-wrap:wrap; padding-block:.7rem; text-align:center; }
.topbar .lbl{ font-size:.64rem; letter-spacing:.28em; text-transform:uppercase; color:var(--g600); font-weight:500; }
.topbar a{
  font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--g200); text-decoration:none; display:inline-flex; align-items:center; gap:.55rem;
  transition:color .4s ease;
}
.topbar a:hover{ color:var(--white); }
.topbar a svg{ width:.7rem; height:.7rem; transition:transform .4s ease; }
.topbar a:hover svg{ transform:translateX(3px); }

.site-head{
  position:sticky; top:0; z-index:60; padding-block:1rem;
  background:linear-gradient(to bottom, rgba(0,0,0,.92), rgba(0,0,0,.55) 70%, transparent);
  transition:background .6s ease, backdrop-filter .6s ease;
}
.site-head.stuck{ background:rgba(0,0,0,.82); backdrop-filter:blur(18px); }
.head-in{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.head-brand{ display:flex; align-items:center; gap:1rem; text-decoration:none; }
.head-brand .txt .name{ display:block; font-size:.92rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; line-height:1; color:var(--white); }
.head-brand .txt .sub{ display:block; white-space:nowrap; font-size:.52rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--g500); line-height:1; margin-top:.5rem; }

.nav{ display:none; gap:1.15rem; align-items:center; }
@media (min-width:1120px){ .nav{ display:flex; } }
@media (min-width:1340px){ .nav{ gap:1.7rem; } }
.nav a{ font-size:.65rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:var(--g500); white-space:nowrap; transition:color .4s ease; }
.nav a:hover{ color:var(--white); }
.head-cta{ display:none; }
@media (min-width:620px){ .head-cta{ display:inline-flex; } }


/* ============================================================
   SECTIONS — no boxes, space does the separating
   ============================================================ */
.section{ position:relative; padding-block:var(--section); }
.section > .wrap{ position:relative; z-index:2; }
.sec-head{ display:grid; gap:1.8rem; }
@media (min-width:960px){ .sec-head{ grid-template-columns:1.1fr .9fr; gap:4rem; align-items:end; } }
.sec-head h2{ margin-top:1.6rem; max-width:17ch; }
.sec-head .col-b{ padding-bottom:.5rem; }

/* ---------- story ---------- */
.story-grid{ display:grid; gap:3.5rem; margin-top:4rem; }
@media (min-width:960px){ .story-grid{ grid-template-columns:1.1fr .9fr; gap:6rem; align-items:start; } }
.quote{
  margin:0; padding:0;
  font-size:clamp(1.35rem,1rem + 1.2vw,2.1rem); font-weight:200; letter-spacing:-.028em; line-height:1.32; color:var(--white);
}
.quote cite{ display:block; margin-top:1.4rem; font-size:.65rem; font-style:normal; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--g600); }
.creed{ margin-top:3rem; display:grid; gap:1.6rem; }
.creed div{ font-size:.95rem; color:var(--muted); }
.creed div b{ color:var(--g100); font-weight:500; font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; display:block; margin-bottom:.5rem; }

/* ---------- credentials — a lifted grey panel, no border ---------- */
.creds{ position:relative; }
.cred-panel{
  position:relative; margin-top:4rem; padding:clamp(2.5rem,5vw,4.5rem) clamp(1.8rem,4vw,4rem);
  border-radius:clamp(20px,3vw,34px); overflow:hidden;
  background:
    radial-gradient(120% 150% at 15% 0%, rgba(255,255,255,.11) 0%, rgba(255,255,255,.035) 38%, transparent 72%),
    linear-gradient(160deg, var(--g850), var(--g950) 70%);
}
.cred-grid{ display:grid; gap:2.8rem; }
@media (min-width:820px){ .cred-grid{ grid-template-columns:repeat(3,1fr); gap:3.5rem; } }
.cred .no{ font-size:.63rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--g600); }
.cred h3{ margin-top:1.1rem; }
.cred .num{ margin-top:1.3rem; font-size:1.05rem; font-weight:400; letter-spacing:.03em; font-variant-numeric:tabular-nums; color:var(--white); }
.cred .who{ margin-top:.6rem; font-size:.8rem; color:var(--g400); line-height:1.55; }
.cred-note{ margin-top:3rem; font-size:.86rem; color:var(--g400); max-width:76ch; }

/* ---------- call-to-action bands ---------- */
.cta{
  position:relative; margin-block:0; padding-block:clamp(4rem,9vw,7.5rem);
  text-align:center; overflow:hidden;
}
.cta::before{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1150px,130vw); aspect-ratio:2/1; border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse, rgba(255,255,255,.1) 0%, rgba(255,255,255,.04) 42%, transparent 70%);
}
.cta > .wrap{ position:relative; z-index:2; display:grid; justify-items:center; }
.cta .eyebrow{ justify-content:center; }
.cta h2{ margin-top:1.5rem; max-width:16ch; }
.cta p{ margin-top:1.5rem; color:var(--muted); max-width:52ch; font-size:var(--step-2); font-weight:200; line-height:1.55; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.6rem; justify-content:center; }
.cta .fine{ margin-top:1.8rem; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--g600); font-weight:500; }

/* inline value nudge inside a service card */
.svc .go{
  margin-top:.2rem; font-size:.8rem; color:var(--g300); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.2); align-self:flex-start;
  transition:border-color .4s ease, color .4s ease;
}
.svc .go:hover{ color:var(--white); border-color:var(--white); }

/* destination link grid */
.dest{ display:grid; gap:.9rem; margin-top:2.4rem; }
@media (min-width:640px){ .dest{ grid-template-columns:repeat(2,1fr); column-gap:2.5rem; } }
.dest a{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  padding-bottom:.9rem; position:relative; text-decoration:none;
  font-size:.95rem; color:var(--g200); transition:color .4s ease;
}
.dest a::after{ content:""; position:absolute; inset:auto 0 0 0; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.12),transparent); }
.dest a:hover{ color:var(--white); }
.dest a span{ font-size:.63rem; letter-spacing:.22em; text-transform:uppercase; color:var(--g600); white-space:nowrap; }

/* floating persistent CTA */
.float{
  position:fixed; z-index:80; right:clamp(1rem,3vw,2.2rem); bottom:clamp(1rem,3vw,2.2rem);
  display:inline-flex; align-items:center; gap:.9rem;
  padding:.7rem .8rem .7rem 1.4rem; border-radius:999px; text-decoration:none;
  background:var(--white); color:var(--black);
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  box-shadow:0 8px 40px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.15);
  opacity:0; transform:translateY(20px) scale(.96); pointer-events:none;
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.float.show{ opacity:1; transform:none; pointer-events:auto; }
.float .arw{ width:1.9rem; height:1.9rem; flex:none; border-radius:999px; display:grid; place-items:center; background:var(--black); color:var(--white); transition:transform .4s ease; }
.float .arw svg{ width:.8rem; height:.8rem; }
.float:hover .arw{ transform:translateX(3px); }
@media (max-width:560px){
  .float{ left:1rem; right:1rem; bottom:1rem; justify-content:space-between; padding-left:1.5rem; font-size:.68rem; }
}

/* ---------- at a glance: copy over the portrait ---------- */
.glance{ position:relative; min-height:clamp(560px,74vh,760px); display:flex; align-items:center; overflow:hidden; margin-top:-1px; }
/* the hero fades down into black and the portrait fades up out of it, so the
   two images read as one continuous scroll rather than two stacked blocks */
.glance::before{
  content:""; position:absolute; z-index:3; left:0; right:0; top:0; height:26%;
  background:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.72) 42%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}
.glance::after{
  content:""; position:absolute; z-index:3; left:0; right:0; bottom:0; height:22%;
  background:linear-gradient(to top, #000 0%, rgba(0,0,0,.6) 46%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}
.glance-photo{ position:absolute; inset:0; z-index:0; }
.glance-photo img{
  width:100%; height:100%; object-fit:cover; object-position:64% 34%;
  filter:grayscale(1) contrast(1.04) brightness(1.2);
}
.glance-photo .glance-grad{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(0,0,0,.94) 0%, rgba(0,0,0,.86) 30%, rgba(0,0,0,.5) 52%, rgba(0,0,0,.08) 78%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.1) 30%, rgba(0,0,0,.35) 100%);
}
.glance-in{ position:relative; z-index:2; }
.glance h2{ margin-top:1.5rem; max-width:16ch; }
.glance-lead{ margin-top:1.7rem; max-width:44ch; font-size:var(--step-2); font-weight:200; line-height:1.55; color:var(--g100); }
.glance-fine{ margin-top:1.2rem; font-size:.72rem; letter-spacing:.02em; color:var(--g400); max-width:46ch; }
.glance-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.4rem; }
@media (max-width:899px){
  .glance{ min-height:0; padding-block:0; display:block; }
  .glance-photo{ position:relative; inset:auto; }
  .glance-photo img{ height:auto; max-height:none; object-fit:contain; }
  .glance-photo .glance-grad{ background:linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,.9) 88%); }
  .glance-in{ margin-top:-22vw; padding-bottom:3rem; }
  .glance-lead{ max-width:100%; }
}

/* the shared cursor light, used by the hero and the portrait */
.spot-veil{
  position:absolute; inset:0; background:var(--black); opacity:.30;
  -webkit-mask-image:radial-gradient(circle var(--r,420px) at var(--x,50%) var(--y,50%), transparent 0%, rgba(0,0,0,.45) 48%, #000 82%);
          mask-image:radial-gradient(circle var(--r,420px) at var(--x,50%) var(--y,50%), transparent 0%, rgba(0,0,0,.45) 48%, #000 82%);
}
.spot-glow{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle var(--r,420px) at var(--x,50%) var(--y,50%),
    rgba(255,255,255,.34) 0%, rgba(255,255,255,.2) 30%, rgba(255,255,255,.07) 56%, rgba(255,255,255,0) 76%);
}
@media (prefers-reduced-motion: reduce){
  .spot-veil{ opacity:.12; -webkit-mask-image:none; mask-image:none; }
  .spot-glow{ display:none; }
}

/* ---------- reach ---------- */
.reach{ padding-block:clamp(3.5rem,7vw,5.5rem); }
.reach-nums{ display:grid; gap:1.5rem; margin-top:1.8rem; }
@media (min-width:820px){ .reach-nums{ grid-template-columns:repeat(3,1fr); gap:2.5rem; align-items:end; } }
.rn{ display:grid; gap:.45rem; }
.rn b{
  font-size:clamp(1.7rem,1.05rem + 1.9vw,2.9rem); font-weight:200; letter-spacing:-.035em;
  color:var(--white); line-height:1; font-variant-numeric:tabular-nums lining-nums; white-space:nowrap;
}
.rn span{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--g500); }
.reach-copy{ margin-top:1.7rem; color:var(--g300); max-width:64ch; font-size:.92rem; }
.reach .soc-row{ margin-top:1.9rem; }

/* ---------- reviews ---------- */
.rev-grid{ display:grid; gap:.9rem; margin-top:2.6rem; }
@media (min-width:600px){  .rev-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){  .rev-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1240px){ .rev-grid{ grid-template-columns:repeat(4,1fr); gap:.8rem; } }
.rev{
  margin:0; padding:1.05rem 1.1rem; border-radius:12px;
  background:linear-gradient(165deg, var(--g900), var(--g950) 74%);
  display:flex; flex-direction:column; gap:.5rem;
}
.rev .stars{ font-size:.6rem; letter-spacing:.22em; color:var(--g200); }
.rev p{ font-size:.79rem; line-height:1.5; color:var(--g300); font-weight:300; flex:1; margin:0; }
.rev cite{ font-style:normal; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--g500); }
.rev-foot{ margin-top:1.8rem; display:flex; justify-content:center; }

/* ---------- at a glance ---------- */
.fact-panel{
  margin-top:4rem; padding:clamp(2rem,4vw,3.5rem) clamp(1.6rem,3.5vw,3.5rem);
  border-radius:clamp(20px,3vw,34px); overflow:hidden;
  background:
    radial-gradient(120% 150% at 85% 0%, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 40%, transparent 72%),
    linear-gradient(160deg, var(--g850), var(--g950) 72%);
}
.fact-list{ margin:0; display:grid; gap:0; }
@media (min-width:900px){ .fact-list{ grid-template-columns:repeat(2,1fr); column-gap:4rem; } }
.fact{ display:grid; gap:.3rem; padding-block:1.1rem; position:relative; }
@media (min-width:620px){ .fact{ grid-template-columns:11rem 1fr; gap:1.5rem; align-items:baseline; } }
.fact::after{ content:""; position:absolute; inset:auto 0 0 0; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.09),transparent); }
.fact dt{ font-size:.63rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--g600); }
.fact dd{ margin:0; font-size:.92rem; color:var(--g200); line-height:1.55; }
.fact dd a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.22); transition:border-color .4s ease; }
.fact dd a:hover{ border-color:var(--white); }

/* ---------- services ---------- */
.svc-bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:4rem; padding-bottom:1.2rem; position:relative;
  font-size:.65rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--g600);
}
.svc-bar::after{ content:""; position:absolute; inset:auto 0 0 0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent); }
.svc-grid{ display:grid; gap:3.5rem 3rem; margin-top:3.5rem; }
@media (min-width:760px){ .svc-grid{ grid-template-columns:repeat(2,1fr); gap:4rem 3.5rem; } }
@media (min-width:1180px){ .svc-grid{ grid-template-columns:repeat(3,1fr); gap:4.5rem 4rem; } }
.svc{ display:flex; flex-direction:column; gap:1.2rem; }
.svc-no{ font-size:.63rem; font-weight:500; letter-spacing:.26em; color:var(--g600); font-variant-numeric:tabular-nums; }
.svc p{ color:var(--muted); font-size:.94rem; line-height:1.65; }
.svc ul{ display:grid; gap:.7rem; margin-top:.4rem; }
.svc li{ font-size:.84rem; color:var(--g300); line-height:1.5; padding-left:1.2rem; position:relative; }
.svc li::before{ content:""; position:absolute; left:0; top:.65em; width:.45rem; height:1px; background:var(--g600); }
.svc .textlink{ margin-top:auto; padding-top:1.1rem; }

/* ---------- areas ---------- */
.county{ margin-top:4rem; }
.county + .county{ margin-top:4.5rem; }
.county-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-bottom:1.1rem; position:relative; }
.county-head::after{ content:""; position:absolute; inset:auto 0 0 0; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 65%,transparent); }
.county-head .meta{ font-size:.63rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--g600); }
.city-grid{ display:grid; gap:2.4rem 3rem; margin-top:2.6rem; }
@media (min-width:620px){ .city-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .city-grid{ grid-template-columns:repeat(3,1fr); } }
.city h4{ color:var(--white); }
.city .hub{ display:inline-block; margin-left:.7rem; font-size:.55rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--g600); vertical-align:middle; }
.city p{ font-size:.84rem; color:var(--g300); margin-top:.55rem; line-height:1.6; }

/* ---------- market ---------- */
.mkt-grid{ display:grid; gap:1.6rem; margin-top:4rem; }
@media (min-width:900px){ .mkt-grid{ grid-template-columns:repeat(2,1fr); gap:2rem; } }
.mkt-card{
  padding:clamp(1.9rem,3vw,2.8rem); border-radius:clamp(16px,2.2vw,26px);
  display:flex; flex-direction:column; gap:1.1rem;
  background:linear-gradient(165deg, var(--g900), var(--g950) 70%);
}
.mkt-card.is-here{
  background:
    radial-gradient(110% 130% at 20% 0%, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 40%, transparent 74%),
    linear-gradient(165deg, var(--g800), var(--g950) 72%);
}
.mkt-tag{ font-size:.62rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--g600); }
.mkt-card.is-here .mkt-tag{ color:var(--g300); }
.mkt-card dl{ margin:.5rem 0 0; display:grid; gap:.9rem; }
.mkt-row{ display:flex; justify-content:space-between; gap:1.2rem; padding-bottom:.9rem; font-size:.85rem; position:relative; }
.mkt-row::after{ content:""; position:absolute; inset:auto 0 0 0; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.09),transparent); }
.mkt-row:last-child{ padding-bottom:0; }
.mkt-row:last-child::after{ display:none; }
.mkt-row dt{ color:var(--g600); }
.mkt-row dd{ margin:0; color:var(--g100); text-align:right; font-weight:400; }
.mkt-note{ margin-top:2.6rem; font-size:.86rem; color:var(--g400); max-width:76ch; }

/* ---------- slot ---------- */
.slot{
  margin-top:3.5rem; padding:clamp(3rem,7vw,5.5rem) 2rem; text-align:center;
  display:grid; gap:1.2rem; justify-items:center; border-radius:clamp(16px,2.2vw,26px);
  background:linear-gradient(165deg, var(--g900), var(--g950) 70%);
}
.slot .tag{ font-size:.62rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--g400); }
.slot p{ color:var(--g300); font-size:.9rem; max-width:56ch; }

/* ---------- newsletter ---------- */
.news-grid{ display:grid; gap:3.5rem; align-items:center; }
@media (min-width:960px){ .news-grid{ grid-template-columns:1fr .8fr; gap:6rem; } }
.news-list{ display:grid; gap:1.6rem; }
.news-item{ display:flex; gap:1.4rem; align-items:flex-start; padding-bottom:1.6rem; position:relative; }
.news-item::after{ content:""; position:absolute; inset:auto 0 0 0; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.1),transparent); }
.news-item:last-child{ padding-bottom:0; }
.news-item:last-child::after{ display:none; }
.news-item .n{ font-size:.62rem; color:var(--g600); font-variant-numeric:tabular-nums; padding-top:.35rem; flex:none; letter-spacing:.2em; }
.news-item .t{ display:block; font-size:.95rem; color:var(--g100); }
.news-item .s{ display:block; font-size:.8rem; color:var(--g400); margin-top:.35rem; }

/* ---------- faq ---------- */
.faq-list{ margin-top:4rem; }
.faq-item{ position:relative; }
.faq-item::after{ content:""; position:absolute; inset:auto 0 0 0; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.11),rgba(255,255,255,.03) 70%,transparent); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:1.8rem 3rem 1.8rem 0; position:relative;
  font-size:clamp(1.08rem,.95rem + .4vw,1.35rem); font-weight:200; letter-spacing:-.022em; color:var(--g100);
  transition:color .4s ease;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--white); }
.faq-item summary::after{
  content:""; position:absolute; right:.5rem; top:50%; width:.7rem; height:.7rem; margin-top:-.35rem;
  border-right:1px solid var(--g500); border-bottom:1px solid var(--g500);
  transform:rotate(45deg); transition:transform .45s cubic-bezier(.16,1,.3,1), border-color .4s ease;
}
.faq-item summary:hover::after{ border-color:var(--white); }
.faq-item[open] summary::after{ transform:rotate(-135deg); }
.faq-item .a{ padding:0 3rem 2rem 0; color:var(--muted); font-size:.95rem; max-width:74ch; }

/* ---------- connect ---------- */
.connect-grid{ display:grid; gap:2.8rem; margin-top:4rem; }
@media (min-width:760px){ .connect-grid{ grid-template-columns:repeat(3,1fr); gap:3.5rem; } }
.cx{ display:grid; gap:.7rem; align-content:start; text-decoration:none; }
.cx .k{ font-size:.62rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--g600); }
.cx .v{ font-size:clamp(1.3rem,1.1rem + .6vw,1.7rem); font-weight:200; letter-spacing:-.028em; color:var(--white); transition:opacity .4s ease; }
a.cx:hover .v{ opacity:.6; }
.cx .m{ font-size:.82rem; color:var(--g400); }

/* ---------- socials ---------- */
.soc-row{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }
.soc{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.64rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  padding:.6rem 1.15rem; border:1px solid rgba(255,255,255,.13); border-radius:999px;
  color:var(--g400); text-decoration:none; transition:border-color .45s ease, color .45s ease, background .45s ease;
}
.soc svg{ width:.9rem; height:.9rem; flex:none; }
.soc:hover{ color:var(--white); border-color:rgba(255,255,255,.45); background:rgba(255,255,255,.05); }
.soc.todo{ border-style:dashed; color:var(--g600); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{ position:relative; padding-block:clamp(4rem,8vw,6.5rem) 3rem; overflow:hidden; }
.site-foot::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent); }
.site-foot > .wrap{ position:relative; z-index:2; }
.foot-top{ display:grid; gap:3rem; }
@media (min-width:900px){ .foot-top{ grid-template-columns:1.3fr 1fr 1fr; gap:4rem; } }
.foot-brand .foot-name{ font-size:1.1rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--white); }
.foot-brand .role{ font-size:.85rem; color:var(--muted); margin-top:1.4rem; max-width:34ch; }
.foot-col h4{ font-size:.62rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--g600); margin-bottom:1.3rem; }
.foot-col ul{ display:grid; gap:.8rem; }
.foot-col a{ font-size:.88rem; color:var(--g400); text-decoration:none; transition:color .4s ease; }
.foot-col a:hover{ color:var(--white); }
.local{ margin-top:2.6rem; padding-top:1.7rem; position:relative; }
.local::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.1),transparent); }
.local h4{ font-size:.6rem; font-weight:500; letter-spacing:.24em; text-transform:uppercase; color:var(--g600); margin-bottom:.85rem; }
.local-row{ display:flex; flex-wrap:wrap; gap:.35rem 1.15rem; margin:0; }
.local-row a{ font-size:.72rem; color:var(--g500); text-decoration:none; transition:color .3s ease; white-space:nowrap; }
.local-row a:hover{ color:var(--g100); }

.foot-areas{ margin-top:2.2rem; padding-top:2rem; position:relative; font-size:.79rem; color:var(--g600); line-height:1.85; max-width:92ch; }
.foot-areas::before,
.licenses::before,
.compliance::before,
.foot-base::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,rgba(255,255,255,.1),transparent); }
.foot-areas b{ color:var(--g400); font-weight:500; }

.licenses{ margin-top:2.8rem; padding-top:2rem; position:relative; display:grid; gap:.7rem; }
.licenses .lic{ display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; font-size:.8rem; color:var(--g400); }
.licenses .lic b{ color:var(--white); font-weight:400; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.licenses .lic span{ color:var(--g600); }

.compliance{ margin-top:2.4rem; padding-top:2rem; position:relative; display:grid; gap:1.3rem; }
.compliance p{ font-size:.77rem; color:var(--g600); line-height:1.75; max-width:84ch; }
.eho{ display:flex; align-items:center; gap:.8rem; font-size:.65rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--g500); }
.eho svg{ width:1.2rem; height:1.2rem; flex:none; }
.foot-base{ margin-top:2.4rem; padding-top:1.8rem; position:relative; display:flex; flex-wrap:wrap; gap:.9rem 2rem; justify-content:space-between; font-size:.73rem; color:var(--g600); }

/* ---------- official eXp / team logo ----------
   Dark charcoal artwork with no reversed version supplied, so it sits
   unmodified on a white chip. Never inverted, recoloured or redrawn. */
.exp-chip{ display:inline-block; background:#fff; border-radius:10px; padding:.85rem 1.1rem; margin-top:1.8rem; line-height:0; }
.exp-chip img{ height:2.6rem; width:auto; display:block; }
.foot-brand .exp-note{ margin-top:1rem; font-size:.73rem; color:var(--g500); line-height:1.6; max-width:34ch; }


/* ============================================================
   MOBILE: photographs show their whole frame
   Placed last on purpose. object-fit:cover was slicing tall photos
   into a narrow strip on phones; these rules must come after the
   component rules they override or the cascade ignores them.
   ============================================================ */
@media (max-width:899px){
  .tale-media img{ max-height:none; height:auto; object-fit:contain; width:100%; }
  .tale-media{ background:transparent; }
  .pull{ padding-block:0; }
  .pull-photo{ position:relative; inset:auto; }
  .pull-photo img{ height:auto; max-height:none; object-fit:contain; }
  .pull-photo::after{ background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.1) 40%, rgba(0,0,0,.92)); }
  .pull > .wrap{ margin-top:-30vw; padding-bottom:3.5rem; }
  .face img{ height:auto; max-height:none; object-fit:contain; }
  .face::after{ background:linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,0) 30%, rgba(0,0,0,.85)); }
  .hero-photo img, .hero-photo .house{ object-position:center 44%; }
  .hero-photo .grad{ background:linear-gradient(to bottom, rgba(0,0,0,.9) 0%, rgba(0,0,0,.72) 34%, rgba(0,0,0,.4) 58%, rgba(0,0,0,.72) 100%); }
  .hero .lede{ max-width:100%; }
}

/* ---------- reveal ---------- */
.rv{ opacity:0; transform:translateY(26px); transition:opacity 1.2s cubic-bezier(.16,1,.3,1), transform 1.2s cubic-bezier(.16,1,.3,1); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ============================================================
   BLOG
   ============================================================ */
.post-meta{ margin-top:1rem; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--g600); }
.post-body{ margin-top:2.6rem; max-width:66ch; }
.post-body h2{
  font-size:clamp(1.35rem,1.1rem + .8vw,1.85rem); font-weight:300; letter-spacing:-.025em;
  color:var(--white); margin-top:2.6rem; margin-bottom:.9rem;
}
.post-body h2:first-child{ margin-top:0; }
.post-body p{ color:var(--g200); font-size:1rem; line-height:1.75; margin-bottom:1.15rem; font-weight:300; }
.post-body strong{ color:var(--white); font-weight:500; }
.post-body ul{ margin:0 0 1.4rem; display:grid; gap:.6rem; }
.post-body li{
  color:var(--g300); font-size:.95rem; line-height:1.6; padding-left:1.3rem; position:relative;
}
.post-body li::before{
  content:""; position:absolute; left:0; top:.72em; width:.5rem; height:1px; background:var(--g500);
}

.post-grid{ display:grid; gap:1rem; margin-top:3.2rem; }
@media (min-width:700px){  .post-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1120px){ .post-grid{ grid-template-columns:repeat(3,1fr); } }
.post-card{
  display:flex; flex-direction:column; gap:.6rem; text-decoration:none;
  padding:1.5rem 1.4rem 1.6rem; border-radius:14px;
  background:linear-gradient(165deg, var(--g900), var(--g950) 74%);
  transition:background .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.post-card:hover{ background:linear-gradient(165deg, var(--g850), var(--g900) 74%); transform:translateY(-2px); }
.post-card time{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--g600); }
.post-card h3{ font-size:1.05rem; font-weight:300; letter-spacing:-.02em; line-height:1.3; color:var(--white); }
.post-card p{ font-size:.82rem; line-height:1.55; color:var(--g400); margin:0; }

.cta-band{ position:relative; }
.cta-band::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);
}