/* ============================================================
   1st Class Invest — Gourmaze-inspired black & gold
   ============================================================ */
@font-face{font-family:"Bodoni MT";src:url("../fonts/BodoniMT-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni MT";src:url("../fonts/BodoniMT-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Bodoni MT";src:url("../fonts/BodoniMT-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"FCScript";src:url("../fonts/MonotypeCorsiva.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}

:root{
  --ink:#0a0a0a;
  --ink-1:#0e0d0b;
  --ink-2:#121110;
  --line:#262626;
  --line-2:#1b1a18;
  --gold:#c9a24b;
  --gold-hi:#ebd08a;
  --gold-lo:#9a7c34;
  --grad-gold:linear-gradient(120deg,#f0d68f 0%,#d4ab55 48%,#a9862f 100%);
  --cream:#f2ecdf;
  --cream-dim:#c4bdae;
  --muted:#8a8478;
  --serif:"Bodoni MT","Didot","Georgia",serif;
  --sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --container:1320px;
  --pad-x:clamp(24px,4.5vw,68px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overflow-x:clip;line-height:1.5}
::selection{background:rgba(201,162,75,.28)}
a{color:inherit;text-decoration:none}
/* height:auto keeps the intrinsic width/height attributes (added for CLS) as a
   pure aspect-ratio hint — they never drive layout, so nothing renders taller
   or shorter than it did before the attributes existed. */
img{display:block;max-width:100%;height:auto}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---------- shared ---------- */
/* Off-screen until it takes focus, so the default state is visually unchanged. */
.skip-link{position:fixed;left:-9999px;top:0;z-index:200;background:var(--grad-gold);color:#191206;
  font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;padding:12px 20px;border-radius:2px}
.skip-link:focus{left:12px;top:12px}
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--pad-x)}
.section{position:relative;padding-block:clamp(72px,11vh,140px)}
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:.72rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--gold);font-weight:600}
.eyebrow::before{content:"";width:40px;height:1px;background:var(--grad-gold)}
.eyebrow.center::after{content:"";width:40px;height:1px;background:var(--grad-gold)}
.heading{font-family:var(--serif);font-weight:400;letter-spacing:.005em;color:var(--cream);
  font-size:clamp(2.5rem,4.6vw,4rem);line-height:1.08;margin:18px 0 0;text-wrap:balance}
.sec-head{max-width:720px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.lead{color:var(--cream-dim);font-size:1.05rem;line-height:1.7;margin-top:18px}
.lead.gold{color:var(--gold)}

.btn-gold{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;letter-spacing:.13em;
  text-transform:uppercase;color:#191206;background:var(--grad-gold);padding:14px 26px;border:none;
  border-radius:2px;cursor:pointer;font-weight:600;white-space:nowrap;position:relative;overflow:hidden;
  transition:transform .3s,box-shadow .3s}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 14px 36px -14px rgba(201,162,75,.7)}
.btn-gold::before{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .6s}
.btn-gold:hover::before{left:160%}
.link-ghost{display:inline-flex;align-items:center;gap:10px;font-size:.85rem;letter-spacing:.06em;
  color:var(--cream);border-bottom:1px solid transparent;padding-bottom:3px;transition:border-color .3s,color .3s}
.link-ghost .arw{color:var(--gold);transition:transform .3s}
.link-ghost:hover{color:var(--gold-hi);border-color:var(--gold-lo)}
.link-ghost:hover .arw{transform:translateX(5px)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.1s}.reveal[data-d="2"]{transition-delay:.2s}
.reveal[data-d="3"]{transition-delay:.3s}.reveal[data-d="4"]{transition-delay:.4s}
.reveal[data-d="5"]{transition-delay:.5s}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.header{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .4s ease,border-color .4s ease,backdrop-filter .4s}
.header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(255,255,255,.09);transition:background .4s}
.header.solid{background:rgba(10,10,10,.86);backdrop-filter:blur(12px)}
.header.solid::after{background:var(--line)}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  padding:18px var(--pad-x);transition:padding .4s ease}
.header.solid .nav{padding-block:12px}
.nav-links{display:flex;gap:clamp(16px,2vw,34px);justify-self:start}
.nav-links a{font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--cream-dim);
  position:relative;padding:6px 0;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--grad-gold);transition:width .35s}
.nav-links a:hover{color:#fff}.nav-links a:hover::after{width:100%}
.brand{justify-self:center;display:flex;align-items:center;line-height:0}
.brand img{height:54px;width:auto;transition:height .4s ease}
.header.solid .brand img{height:46px}
.nav-right{display:flex;align-items:center;gap:20px;justify-self:end}
.nav-phone{font-size:.83rem;letter-spacing:.05em;color:var(--cream-dim);white-space:nowrap;transition:color .3s}
.nav-phone:hover{color:var(--gold-hi)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--cream);transition:.3s}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  filter:brightness(.6) contrast(1.03) saturate(1.02);animation:heroZoom 16s ease-out forwards}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(8,8,7,.9) 0%,rgba(8,8,7,.62) 32%,rgba(8,8,7,.32) 54%,rgba(8,8,7,.55) 76%,rgba(8,8,7,.72) 100%),
  linear-gradient(180deg,rgba(8,8,7,.55) 0%,rgba(8,8,7,0) 24%,rgba(8,8,7,0) 52%,var(--ink) 100%)}
.hero-inner{position:relative;z-index:4;width:100%;padding-bottom:clamp(60px,11vh,120px);padding-top:140px}
.hero-grid{max-width:var(--container);margin:0 auto;padding-inline:var(--pad-x);width:100%;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,352px);gap:clamp(36px,5vw,80px);align-items:end}
.rating{display:inline-flex;align-items:center;gap:11px;margin-bottom:26px;font-size:.8rem;letter-spacing:.04em;color:var(--cream)}
.rating .stars{color:var(--gold-hi);letter-spacing:.12em;font-size:.86rem}
.rating .g{width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--cream-dim)}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.7rem,6.4vw,5.6rem);line-height:1.03;
  letter-spacing:.005em;color:#fbf7ee;margin:0 0 34px;text-wrap:balance;text-shadow:0 2px 40px rgba(0,0,0,.5)}
.hero h1 .gold{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
.hero-right{padding-bottom:8px}
.hero-right .rule{width:44px;height:1px;background:var(--grad-gold);margin-bottom:20px}
.hero-right p{font-size:clamp(1.05rem,1.4vw,1.32rem);line-height:1.85;margin:0;max-width:34ch;letter-spacing:.006em;cursor:default;
  background-image:linear-gradient(180deg,var(--cream-dim) 43%,#f4dc98 50%,var(--cream-dim) 57%);
  background-size:100% 280%;background-position:0 0;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 14px rgba(0,0,0,.7))}
.hero-right p:hover{animation:paraSweep 1.25s cubic-bezier(.4,0,.2,1)}
@keyframes paraSweep{0%{background-position:0 0}100%{background-position:0 100%}}
.hero-right .accent{color:var(--cream)}

/* ============================================================
   TRUST MARQUEE
   ============================================================ */
.marquee-sec{position:relative;padding-block:clamp(46px,6.5vh,76px);border-block:1px solid var(--line-2);
  background:linear-gradient(180deg,var(--ink),#0b0a08 55%,var(--ink))}
.marquee-lead{display:flex;align-items:center;justify-content:center;gap:16px;font-size:.7rem;
  letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:38px}
.marquee-lead::before,.marquee-lead::after{content:"";width:38px;height:1px;background:var(--grad-gold)}
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee-track{display:flex;align-items:center;gap:52px;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{font-family:"FCScript","Bodoni MT",serif;font-size:clamp(1.9rem,2.6vw,2.55rem);letter-spacing:.01em;
  color:var(--cream);white-space:nowrap;display:flex;align-items:center;gap:24px;opacity:.92;
  transition:color .4s,opacity .4s;line-height:1;padding-bottom:6px}
.marquee-item::before{content:"\2726";font-family:var(--sans);font-size:.82rem;color:var(--gold);opacity:.8;transform:translateY(-3px)}
.marquee-item:hover{color:var(--gold-hi);opacity:1}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   SERVICES BENTO
   ============================================================ */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:230px;gap:14px;margin-top:52px}
.bento-card{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--line-2);cursor:pointer;isolation:isolate}
.bento-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.72) saturate(.95);transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s}
.bento-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,7,0) 30%,rgba(8,8,7,.85) 100%);z-index:1}
.bento-card:hover img{transform:scale(1.06);filter:brightness(.55) saturate(1)}
.bento-card .bc-body{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
.bento-card h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;color:#fff;margin:0;line-height:1.15}
.bento-card p{font-size:.85rem;line-height:1.55;color:var(--cream-dim);margin:10px 0 0;max-width:34ch;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .4s ease,margin .4s}
.bento-card .bc-link{margin-top:14px;opacity:0;transform:translateY(6px);transition:opacity .4s .05s,transform .4s .05s;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi)}
.bento-card:hover p{max-height:120px;opacity:1;margin-top:12px}
.bento-card:hover .bc-link{opacity:1;transform:none}
.bento-card .bc-num{position:absolute;top:18px;left:22px;z-index:2;font-family:var(--serif);font-size:.9rem;color:var(--gold);letter-spacing:.1em}
.bento-wide{grid-column:span 2}
.bento-tall{grid-row:span 2}
.bento-cta{margin-top:34px;text-align:center}

/* ============================================================
   STATS
   ============================================================ */
.stats{border-block:1px solid var(--line);background:var(--ink-1)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{padding:clamp(40px,7vh,80px) 26px;text-align:center;position:relative}
.stat:not(:last-child)::after{content:"";position:absolute;right:0;top:24%;bottom:24%;width:1px;background:var(--line)}
.stat .num{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,5vw,4.2rem);line-height:1;
  letter-spacing:.015em;font-variant-numeric:tabular-nums;
  background:linear-gradient(165deg,#f7e4a9 0%,#e8c980 34%,#c9a24b 64%,#9a7c34 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.stat .num .u{font-size:.5em;margin-left:2px;-webkit-text-fill-color:#e8c980;color:#e8c980}
.stat .cap{margin-top:20px;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   WORK GALLERY (parallax)
   ============================================================ */
.work-grid{display:grid;grid-template-columns:minmax(0,400px) 1fr;gap:clamp(36px,5vw,80px);align-items:start}
.work-copy{display:flex;flex-direction:column;justify-content:flex-start;min-height:0;gap:clamp(36px,7vh,60px);padding-block:2vh}
.work-beat .btn-gold,.work-beat .link-ghost{margin-top:26px}
.work-beat-h{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.4vw,2.1rem);color:var(--cream);margin:0 0 14px}
.work-sticky{position:sticky;top:8vh;height:84vh}
.carousel{position:relative;height:100%;overflow:hidden;border-radius:14px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%)}
.ccol{position:absolute;top:0;width:calc(50% - 8px)}
.ccol.left{left:0;animation:cDown 42s linear infinite}
.ccol.right{right:0;animation:cUp 36s linear infinite}
.ccol img{width:100%;aspect-ratio:3/4;object-fit:cover;margin-bottom:16px;border-radius:12px;
  border:1px solid var(--line-2);display:block;filter:saturate(.97)}
@keyframes cUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes cDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:28px;align-items:start}
  .hero-right{max-width:440px}
  .bento{grid-auto-rows:200px}
  .work-grid{grid-template-columns:1fr}
  .work-copy{min-height:0;gap:26px;padding-block:0}
  .work-sticky{position:static;height:74vh;margin-top:30px}
}
@media (max-width:820px){
  .nav-links,.nav-phone{display:none}
  .nav{grid-template-columns:auto 1fr auto}
  .brand{justify-self:start}
  .nav-toggle{display:flex}
  .bento{grid-template-columns:1fr 1fr;grid-auto-rows:180px}
  .bento-wide{grid-column:span 2}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat:nth-child(2)::after{display:none}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
}
@media (max-width:520px){
  .hero h1{font-size:2.5rem}
  .bento{grid-template-columns:1fr;grid-auto-rows:200px}
  .bento-wide{grid-column:span 1}
  .gallery{grid-template-columns:1fr}
  .gallery-col{transform:none !important}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-bg img{animation:none}
  .marquee-track{animation:none}
  .btn-gold::before{display:none}
  .ccol{animation:none !important}
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how-grid{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:clamp(40px,6vw,90px);margin-top:20px;align-items:start}
.how-copy{position:sticky;top:120px}
.how-steps{display:flex;flex-direction:column}
.how-step{display:grid;grid-template-columns:auto 1fr;gap:26px;padding:30px 0;border-top:1px solid var(--line-2);align-items:start}
.how-step:first-child{border-top:none}
.how-step{cursor:default}
.how-num{font-family:var(--serif);font-size:1.5rem;color:var(--gold);width:52px;height:52px;border:1px solid var(--line);
  border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:border-color .45s,background .45s,box-shadow .45s,transform .55s cubic-bezier(.34,1.5,.64,1)}
.how-step:hover .how-num{border-color:var(--gold);background:rgba(201,162,75,.09);box-shadow:0 0 0 5px rgba(201,162,75,.05);transform:translateX(4px)}
.how-step h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin:6px 0 8px;width:fit-content;
  background-image:linear-gradient(90deg,#a9862f 0%,#ebd08a 26%,#a9862f 50%,var(--cream) 50%,var(--cream) 100%);
  background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  transition:background-position .6s cubic-bezier(.4,0,.15,1),text-shadow .6s ease;text-shadow:0 0 0 rgba(201,162,75,0)}
.how-step:hover h3{background-position:0 0;text-shadow:-7px 3px 20px rgba(201,162,75,.3)}
.how-step p{color:var(--cream-dim);font-size:.98rem;line-height:1.65;margin:0;max-width:56ch;
  border-left:1px solid transparent;padding-left:0;
  transition:transform .6s cubic-bezier(.34,1.56,.64,1),padding-left .6s cubic-bezier(.34,1.56,.64,1),border-color .5s,color .4s}
.how-step:hover p{transform:translateX(4px);padding-left:18px;border-left-color:var(--gold-lo);color:#d5cfc1}

/* ============================================================
   WORLD MAP
   ============================================================ */
.map-sec{position:relative;overflow:hidden;background:var(--ink)}
.map-wrap{position:relative;margin-top:20px}
#mapCanvas{display:block;width:100%;height:auto;
  -webkit-mask-image:radial-gradient(ellipse 78% 84% at 50% 50%,#000 42%,transparent 88%);
  mask-image:radial-gradient(ellipse 78% 84% at 50% 50%,#000 42%,transparent 88%)}
.map-nodes{position:absolute;inset:0;pointer-events:none}
.map-node{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;z-index:2}
.map-node .dot{display:block;width:11px;height:11px;border-radius:50%;background:var(--gold-hi);
  box-shadow:0 0 0 0 rgba(235,208,138,.5);transition:box-shadow .4s,transform .4s}
.map-node:hover .dot,.map-node.active .dot{transform:scale(1.2);
  box-shadow:0 0 14px 2px rgba(235,208,138,.7),0 0 0 6px rgba(201,162,75,.12)}
.map-card{position:absolute;bottom:20px;left:50%;transform:translate(-50%,8px);width:190px;
  background:rgba(14,13,11,.94);border:1px solid var(--line);border-radius:12px;padding:10px;
  display:flex;gap:11px;align-items:center;opacity:0;visibility:hidden;
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1);
  backdrop-filter:blur(6px);box-shadow:0 22px 44px -22px rgba(0,0,0,.85);z-index:3}
.map-node:hover .map-card,.map-node.active .map-card{opacity:1;visibility:visible;transform:translate(-50%,0)}
.map-card::after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:10px;height:10px;background:rgba(14,13,11,.94);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.map-card img{width:46px;height:46px;object-fit:cover;border-radius:9px;flex-shrink:0;border:1px solid var(--line-2)}
.map-card .mc-city{font-family:var(--serif);font-size:.98rem;color:var(--cream);line-height:1.1}
.map-card .mc-stat{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-hi);margin-top:4px}
.map-legend{display:flex;flex-wrap:wrap;gap:26px;justify-content:center;margin-top:30px;font-size:.78rem;letter-spacing:.06em;color:var(--muted)}
.map-legend b{color:var(--cream);font-weight:400}
.map-cta{text-align:center;margin-top:36px}

/* ============================================================
   OCCASIONS (tabs + auto accordion)
   ============================================================ */
.occ-tabs{position:relative;display:flex;justify-content:center;gap:0;margin-top:44px;border-bottom:1px solid var(--line)}
.occ-tab{background:none;border:none;color:var(--cream-dim);font-family:var(--sans);font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;padding:16px 30px;cursor:pointer;position:relative;transition:color .3s}
/* A06: the selected state is a class, not aria-selected. The half-built ARIA
   tabs pattern was removed (see process.html) — these are three plain buttons. */
.occ-tab.active{color:var(--cream)}
.occ-tab::after{content:"";position:absolute;left:20%;right:20%;bottom:-1px;height:2px;background:var(--grad-gold);transform:scaleX(0);transition:transform .35s}
.occ-tab.active::after{transform:scaleX(1)}
.occ-body{display:grid;grid-template-columns:minmax(0,440px) 1fr;gap:clamp(30px,5vw,70px);margin-top:44px;align-items:stretch}
.occ-media{position:relative;border-radius:14px;overflow:hidden;min-height:380px;border:1px solid var(--line-2)}
.occ-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;filter:brightness(.8)}
.occ-media img.active{opacity:1}
.occ-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,7,0) 55%,rgba(8,8,7,.7))}
.occ-list{display:flex;flex-direction:column}
/* One panel per tab is server-rendered so crawlers see every investor type
   without running JS; only the selected panel is in flow. The [hidden] rule is
   explicit because .occ-panel carries an author display value that would
   otherwise beat the UA [hidden] rule. */
.occ-panel{display:flex;flex-direction:column}
.occ-panel[hidden]{display:none}
.occ-item{border-top:1px solid var(--line-2);padding:8px 0;cursor:pointer}
.occ-item:first-child{border-top:none}
.occ-item-head{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
/* A13: h3, not h4 — these sit directly under the section's h2. */
.occ-item-head h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;color:var(--cream-dim);margin:0;transition:color .3s}
.occ-item.active .occ-item-head h3{color:var(--cream)}
/* A06: the heading text is a real button so the panel items are keyboard
   operable. Every declaration below exists to keep the rendered text identical
   to the plain <h4> it replaced. */
.occ-item-btn{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;
  padding:0;margin:0;text-align:inherit;cursor:pointer}
.occ-item-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.occ-item .occ-dot{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background .3s,box-shadow .3s}
.occ-item.active .occ-dot{background:var(--gold-hi);box-shadow:0 0 10px 1px rgba(235,208,138,.6)}
.occ-item-body{max-height:0;opacity:0;overflow:hidden;transition:max-height .5s ease,opacity .4s ease}
.occ-item.active .occ-item-body{max-height:120px;opacity:1}
.occ-item-body p{color:var(--cream-dim);font-size:.95rem;line-height:1.6;margin:0 0 16px;max-width:52ch}

/* ============================================================
   BENEFITS
   ============================================================ */
.ben-grid{display:grid;grid-template-columns:minmax(0,400px) 1fr;gap:clamp(34px,5vw,72px);margin-top:20px;align-items:center}
.ben-media{border-radius:14px;overflow:hidden;border:1px solid var(--line-2);position:relative}
.ben-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;filter:brightness(.82) saturate(.98)}
.ben-items{display:grid;grid-template-columns:1fr 1fr;gap:34px 40px}
.ben-item{transition:transform .5s cubic-bezier(.34,1.4,.64,1)}
.ben-item:hover{transform:translateY(-3px)}
.ben-mark{display:block;width:26px;height:2px;background:var(--grad-gold);margin-bottom:16px;opacity:.85;transition:width .5s}
.ben-item:hover .ben-mark{width:44px}
.ben-item h3{font-family:var(--serif);font-weight:400;font-size:1.2rem;margin:0 0 8px;width:fit-content;
  background-image:linear-gradient(90deg,#a9862f 0%,#ebd08a 26%,#a9862f 50%,var(--cream) 50%,var(--cream) 100%);
  background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;
  transition:background-position .55s cubic-bezier(.4,0,.15,1)}
.ben-item:hover h3{background-position:0 0}
.ben-item p{color:var(--cream-dim);font-size:.9rem;line-height:1.6;margin:0}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.tst-sec{background:var(--ink-1);border-block:1px solid var(--line-2)}
.tst-viewport{overflow:hidden;margin-top:44px}
.tst-track{display:flex;transition:transform .7s cubic-bezier(.4,.05,.1,1)}
.tst-card{flex:0 0 100%;padding:0 clamp(4px,3vw,40px);text-align:center}
.tst-stars{color:var(--gold-hi);letter-spacing:.2em;font-size:1rem;margin-bottom:24px}
.tst-quote{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.4;color:var(--cream);
  max-width:900px;margin:0 auto 28px;text-wrap:balance}
.tst-who{font-size:.92rem;color:var(--cream);letter-spacing:.04em}
.tst-who .role{color:var(--muted);display:block;margin-top:4px;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}
.tst-nav{display:flex;justify-content:center;gap:16px;margin-top:38px}
.tst-btn{width:48px;height:48px;border:1px solid var(--line);background:none;color:var(--cream);border-radius:50%;cursor:pointer;
  font-size:1.1rem;display:flex;align-items:center;justify-content:center;transition:border-color .3s,color .3s,background .3s}
.tst-btn:hover{border-color:var(--gold-lo);color:var(--gold-hi)}
.tst-dots{display:flex;justify-content:center;gap:9px;margin-top:22px}
.tst-dot{width:7px;height:7px;border-radius:50%;background:var(--line);border:none;cursor:pointer;transition:background .3s,transform .3s}
.tst-dot.active{background:var(--gold);transform:scale(1.25)}

/* ============================================================
   GOALS + FAQ (accordions)
   ============================================================ */
.acc{display:flex;flex-direction:column;margin-top:20px}
.acc-item{border-top:1px solid var(--line-2)}
.acc-item:last-child{border-bottom:1px solid var(--line-2)}
.acc-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font-family:var(--serif);font-size:1.2rem;padding:24px 44px 24px 0;position:relative;
  background-image:linear-gradient(90deg,#a9862f 0%,#ebd08a 26%,#a9862f 50%,var(--cream) 50%,var(--cream) 100%);
  background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;
  transition:background-position .6s cubic-bezier(.4,0,.15,1),text-shadow .6s ease}
.acc-q:hover{background-position:0 0;text-shadow:-6px 2px 16px rgba(201,162,75,.25)}
/* A01: the focus indicator is inset so the 2px gold ring cannot collide with
   the ::after +/- glyph that sits 6px from the right edge. Never suppress it. */
.acc-q:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.acc-q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:1.3rem;transition:transform .3s}
.acc-item.open .acc-q::after{content:"\2013"}
.acc-a{max-height:0;overflow:hidden;transition:max-height .5s ease}
.acc-a p{color:var(--cream-dim);font-size:.98rem;line-height:1.7;margin:0 0 24px;max-width:70ch}
.goals-grid{display:grid;grid-template-columns:1fr minmax(0,420px);gap:clamp(34px,5vw,72px);align-items:center;margin-top:10px}
.goals-media{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);aspect-ratio:3/4}
.goals-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.82);
  opacity:0;transform:scale(1.04);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform 1.4s cubic-bezier(.2,.7,.2,1)}
.goals-media img.active{opacity:1;transform:scale(1)}

/* ============================================================
   FEATURED PROPERTIES
   ============================================================ */
.props-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.prop-card{border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:var(--ink-1);transition:transform .5s,border-color .4s}
.prop-card:hover{transform:translateY(-4px);border-color:var(--line)}
.prop-media{position:relative;overflow:hidden;aspect-ratio:16/11}
.prop-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1);filter:brightness(.9)}
.prop-card:hover .prop-media img{transform:scale(1.06)}
.prop-tag{position:absolute;top:14px;left:14px;z-index:2;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-hi);background:rgba(8,8,7,.7);border:1px solid rgba(235,208,138,.3);padding:6px 12px;border-radius:20px;backdrop-filter:blur(4px)}
.prop-info{padding:22px}
.prop-addr{font-family:var(--serif);font-size:1.25rem;color:var(--cream);margin:0 0 3px}
.prop-city{font-size:.8rem;letter-spacing:.05em;color:var(--muted);margin-bottom:18px}
.prop-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid var(--line-2);padding-top:16px}
.prop-kpi .k{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.prop-kpi .v{font-family:var(--serif);font-size:1.05rem;color:var(--cream);margin-top:4px;font-variant-numeric:tabular-nums}
.prop-kpi .v.gold{color:var(--gold-hi)}
/* A12: was #5f5a51 (2.89:1). --muted is 5.33:1 — this is a pricing disclaimer. */
.props-note{text-align:center;font-size:.68rem;color:var(--muted);margin-top:22px;letter-spacing:.04em}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{position:relative;overflow:hidden;text-align:center;padding-block:clamp(90px,15vh,170px)}
.cta-band .cta-bg{position:absolute;inset:0;z-index:0}
.cta-band .cta-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.34) saturate(.9)}
.cta-band .cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--ink),rgba(10,10,10,.4) 40%,var(--ink))}
.cta-band .container{position:relative;z-index:2}
.cta-band h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,4.4vw,3.6rem);color:#fbf7ee;margin:16px auto 18px;max-width:16ch;line-height:1.1;text-wrap:balance}
.cta-band p{color:var(--cream-dim);max-width:52ch;margin:0 auto 34px;line-height:1.7}

/* ============================================================
   LEAD FORM
   ============================================================ */
.form-grid{display:grid;grid-template-columns:1fr minmax(0,540px);gap:clamp(40px,6vw,88px);margin-top:20px;align-items:start}
.form-copy .lead{max-width:44ch}
.form-contacts{margin-top:34px;display:flex;flex-direction:column;gap:16px}
.form-contact{display:flex;align-items:center;gap:14px;color:var(--cream);font-size:.95rem}
.form-contact .ico{width:18px;height:18px;color:var(--gold)}
form.lead-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* A09: #4d4a44 (not --line #262626) so the field boundary clears the 3:1 that
   SC 1.4.11 requires of a UI component. --line stays put for decorative rules. */
.field input,.field select,.field textarea{background:var(--ink-1);border:1px solid #4d4a44;border-radius:3px;
  color:var(--cream);font-family:var(--sans);font-size:.95rem;padding:13px 14px;transition:border-color .3s,box-shadow .3s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold-lo);box-shadow:0 0 0 3px rgba(201,162,75,.12)}
.field textarea{resize:vertical;min-height:110px}
.lead-form .btn-gold{grid-column:1/-1;justify-content:center;padding:16px}
.form-note{grid-column:1/-1;font-size:.72rem;color:var(--muted);text-align:center}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{border-top:1px solid var(--line);background:linear-gradient(180deg,var(--ink),#0c0b08)}
.footer-main{display:grid;grid-template-columns:1.25fr 2fr;gap:clamp(40px,6vw,96px);padding-block:clamp(58px,9vh,100px)}
.footer-brand img{height:60px;width:auto;margin-bottom:22px}
.footer-brand p{color:var(--muted);font-size:.92rem;line-height:1.75;max-width:34ch;margin:0 0 26px}
.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.footer-col h2{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 20px;font-weight:600}
.footer-col a,.footer-loc{display:block;color:var(--cream-dim);font-size:.9rem;padding:7px 0}
.footer-col a{position:relative;width:fit-content;transition:color .3s}
.footer-col a::after{content:"";position:absolute;left:0;bottom:5px;height:1px;width:0;background:var(--grad-gold);transition:width .35s}
.footer-col a:hover{color:var(--cream)}
.footer-col a:hover::after{width:100%}
.footer-loc{color:var(--muted)}
.footer-social{display:flex;gap:12px}
.footer-social a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:var(--cream-dim);transition:border-color .3s,color .3s,transform .3s,background .3s}
.footer-social a:hover{border-color:var(--gold-lo);color:var(--gold-hi);transform:translateY(-3px);background:rgba(201,162,75,.06)}
.footer-social svg{width:16px;height:16px}
/* Areas served: a full-width strip rather than a nav column — the list is long
   enough that a 1fr column would run taller than the entire footer brand block. */
.footer-areas{padding-block:26px 24px;border-top:1px solid var(--line-2)}
.footer-areas h2{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 14px;font-weight:600}
/* spacing, not separators: with 13 entries the list wraps at most widths, and a
   dot separator always ends up stranded at the end or start of a wrapped line */
.fa-list{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px}
.fa-list a{position:relative;color:var(--cream-dim);font-size:.85rem;transition:color .3s}
.fa-list a::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;background:var(--grad-gold);transition:width .35s}
.fa-list a:hover{color:var(--cream)}
.fa-list a:hover::after{width:100%}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;padding-block:22px;
  border-top:1px solid var(--line-2);font-size:.77rem;letter-spacing:.02em;color:var(--muted)}
.footer-legal a{color:var(--muted);transition:color .3s}
.footer-legal a:hover{color:var(--gold-hi)}
/* powered by frameworks studio */
.fw-credit{margin-left:auto;display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.fw-by{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  background-image:linear-gradient(90deg,#a9862f 0%,#ebd08a 26%,#a9862f 50%,var(--muted) 50%,var(--muted) 100%);
  background-size:200% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;
  transition:background-position .65s cubic-bezier(.4,0,.15,1)}
.fw-logo{height:24px;width:auto;opacity:.62;transition:opacity .45s,filter .45s}
.fw-credit:hover .fw-by{background-position:0 0}
.fw-credit:hover .fw-logo{opacity:1;filter:drop-shadow(0 0 7px rgba(235,208,138,.6))}

/* ============================================================
   MOBILE MENU + CALL BAR
   ============================================================ */
.mobile-menu{position:fixed;inset:0;z-index:55;background:rgba(8,8,7,.97);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
/* A05: visibility flips with a 0s transition on OPEN so the first menu link can
   actually take focus (a visibility:hidden element cannot). The opacity fade is
   untouched, and the close direction keeps the .4s visibility delay above so the
   menu stays visible while it fades out. */
body.nav-open .mobile-menu{opacity:1;visibility:visible;transition:opacity .4s,visibility 0s}
.mobile-menu a{font-family:var(--serif);font-size:1.8rem;color:var(--cream);padding:12px}
.mobile-menu a:hover{color:var(--gold-hi)}
.mobile-callbar{display:none}

/* ============================================================
   RESPONSIVE (added sections)
   ============================================================ */
@media (max-width:1024px){
  .how-grid{grid-template-columns:1fr}
  .how-copy{position:static}
  .occ-body{grid-template-columns:1fr}
  .occ-media{min-height:280px}
  .ben-grid{grid-template-columns:1fr}
  .ben-media{max-width:440px}
  .goals-grid{grid-template-columns:1fr}
  .goals-media{max-width:440px;order:-1}
  .props-grid{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .footer-main{grid-template-columns:1fr;gap:40px}
  .footer-links{grid-template-columns:1fr 1fr}
  .footer-areas h2{margin-bottom:12px}
}
@media (max-width:820px){
  .nav-toggle{display:flex}
  .mobile-callbar{display:none}
  .mobile-callbar a{flex:1;text-align:center;padding:15px;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase}
  .mobile-callbar .mc-call{background:var(--ink-1);color:var(--cream)}
  .mobile-callbar .mc-book{background:var(--grad-gold);color:#191206;font-weight:600}
  .ben-items{grid-template-columns:1fr}
  .props-grid{grid-template-columns:1fr}
  form.lead-form{grid-template-columns:1fr}
  .footer-links{grid-template-columns:1fr 1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .fw-credit{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .tst-track{transition:none}
  .prop-card:hover{transform:none}
}

/* ============================================================
   MULTI-PAGE: inner page banner, active nav, anchor offset
   ============================================================ */
[id]{scroll-margin-top:96px}
.nav-links a.active{color:#fff}
.nav-links a.active::after{width:100%}
.page-hero{position:relative;min-height:48vh;display:flex;align-items:flex-end;overflow:hidden;padding-top:120px}
.page-hero-bg{position:absolute;inset:0;z-index:0}
.page-hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.42) saturate(.95);animation:heroZoom 16s ease-out forwards}
.page-hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,7,.6),rgba(8,8,7,.15) 42%,var(--ink))}
.page-hero .container{position:relative;z-index:2;padding-bottom:clamp(40px,7vh,74px);width:100%}
.page-hero .eyebrow{color:var(--gold)}
.page-hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5vw,4.1rem);color:#fbf7ee;
  margin:18px 0 0;line-height:1.05;text-wrap:balance}
.page-hero p{color:var(--cream-dim);max-width:56ch;margin-top:16px;line-height:1.7}

/* ============================================================
   CONTACT QUALIFIER (interactive plan builder)
   ============================================================ */
.qualifier{margin-bottom:30px}
.q-step{margin-bottom:20px}
.q-label{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.q-chips{display:flex;flex-wrap:wrap;gap:10px}
/* A09: same 1.4.11 reasoning as .field input — these are toggle buttons. */
.q-chip{font-family:var(--sans);font-size:.84rem;letter-spacing:.01em;color:var(--cream-dim);
  background:var(--ink-1);border:1px solid #4d4a44;border-radius:40px;padding:10px 18px;cursor:pointer;
  transition:background .3s,color .3s,border-color .3s,transform .3s}
.q-chip:hover{border-color:var(--gold-lo);color:var(--cream);transform:translateY(-2px)}
.q-chip.sel{background:var(--grad-gold);color:#191206;border-color:transparent;font-weight:600}
.q-summary{margin-top:24px;padding:18px 22px;border:1px solid var(--line);border-left:2px solid var(--gold);
  border-radius:12px;background:rgba(201,162,75,.045);font-family:var(--serif);font-size:1.15rem;color:var(--cream-dim);
  line-height:1.45;transition:border-color .4s,background .4s}
.q-summary.on{color:var(--cream)}
.q-summary .hl{color:var(--gold-hi)}

/* ============================================================
   GOALS ANIMATED CHART
   ============================================================ */
#goalsChart{position:relative;aspect-ratio:4/5;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
  background:radial-gradient(130% 90% at 50% 0%,#16130d,#0a0a0a 72%);display:flex;flex-direction:column;justify-content:flex-end}
#goalsChart .gc-svg{position:absolute;inset:0;width:100%;height:100%}
.gc-grid line{stroke:rgba(201,162,75,.09)}
.gc-line{filter:drop-shadow(0 5px 16px rgba(201,162,75,.35));transition:stroke-dashoffset 1.3s cubic-bezier(.3,.7,.2,1)}
.gc-area{opacity:0;transition:opacity 1s ease .25s}
#goalsChart.drawn .gc-area{opacity:1}
.gc-dot{filter:drop-shadow(0 0 8px rgba(235,208,138,.85));transition:cx 1.3s cubic-bezier(.3,.7,.2,1),cy 1.3s cubic-bezier(.3,.7,.2,1)}
.gc-caption{position:relative;z-index:2;padding:22px 26px;display:flex;flex-direction:column;gap:5px}
.gc-metric{font-family:var(--serif);font-size:1.55rem;color:var(--gold-hi);transition:opacity .4s}
.gc-sub{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

/* ============================================================
   ALIGNMENT: centered section heads + justified body copy
   ============================================================ */
.sec-head{text-align:center;margin-inline:auto}
.sec-head .eyebrow{justify-content:center}
.sec-head .lead{text-align:center}
/* never hyphenate: whole words wrap to the next line instead */
.how-step p,.acc-a p,.occ-item-body p,.ben-item p,.footer-brand p{text-align:left;-webkit-hyphens:none;hyphens:none;overflow-wrap:normal}
@media (prefers-reduced-motion:reduce){.gc-line,.gc-area,.gc-dot{transition:none}}

/* ============================================================
   MOBILE REFINEMENTS
   ============================================================ */
@media (max-width:640px){
  /* map info-cards overflow small screens — keep the animated map, drop the popovers */
  .map-card{display:none !important}
  .occ-tabs{gap:0}
  .occ-tab{padding:14px 12px;font-size:.72rem;letter-spacing:.09em}
  .marquee-item{font-size:1.7rem;gap:18px}
  .marquee-track{gap:40px}
}
@media (max-width:420px){
  .occ-tab{padding:13px 9px;font-size:.66rem;letter-spacing:.06em}
  .stat .num{font-size:2.4rem}
  .gc-metric{font-size:1.3rem}
  .q-chip{font-size:.8rem;padding:9px 15px}
}

/* ============================================================
   MOBILE / TOUCH INTERACTIVITY
   ============================================================ */
/* tap-to-reveal states mirror the desktop hover */
.bento-card.tap-open img{transform:scale(1.06);filter:brightness(.55) saturate(1)}
.bento-card.tap-open p{max-height:150px;opacity:1;margin-top:12px}
.bento-card.tap-open .bc-link{opacity:1;transform:none}
.how-step.tap-on .how-num{border-color:var(--gold);background:rgba(201,162,75,.09);box-shadow:0 0 0 5px rgba(201,162,75,.05);transform:translateX(4px)}
.how-step.tap-on h3{background-position:0 0;text-shadow:-7px 3px 20px rgba(201,162,75,.3)}
.how-step.tap-on p{transform:translateX(4px);padding-left:18px;border-left-color:var(--gold-lo);color:#d5cfc1}

/* one-shot gold shimmer across titles as they scroll into view */
@keyframes titleSweep{0%{background-position:100% 0}48%{background-position:0 0}100%{background-position:100% 0}}
.how-step.reveal.in h3{animation:titleSweep 1.6s cubic-bezier(.4,0,.2,1) .3s}
.ben-items.reveal.in .ben-item h3{animation:titleSweep 1.6s cubic-bezier(.4,0,.2,1)}
.ben-items.reveal.in .ben-item:nth-child(2) h3{animation-delay:.12s}
.ben-items.reveal.in .ben-item:nth-child(3) h3{animation-delay:.24s}
.ben-items.reveal.in .ben-item:nth-child(4) h3{animation-delay:.36s}
.ben-items.reveal.in .ben-item:nth-child(5) h3{animation-delay:.48s}
.ben-items.reveal.in .ben-item:nth-child(6) h3{animation-delay:.6s}

/* live map caption (mobile, where the hover cards are hidden) */
.map-caption{display:none}
@media (max-width:640px){
  .map-caption{display:block;text-align:center;margin-top:18px;min-height:1.5em;
    font-size:.9rem;color:var(--cream-dim);transition:opacity .35s}
  .map-caption b{font-family:var(--serif);color:var(--gold-hi);font-weight:400;font-size:1.1rem;margin-right:2px}
}
@media (prefers-reduced-motion:reduce){
  .how-step.reveal.in h3,.ben-items.reveal.in .ben-item h3{animation:none}
}

/* ============================================================
   PROCESS PAGE ENHANCEMENTS
   ============================================================ */
/* more immersive inner-page hero */
.page-hero{min-height:56vh}

/* animated step timeline */
.how-steps{position:relative}
.how-step{position:relative;z-index:2}
.how-num{position:relative;z-index:2;background:var(--ink)}
.how-track{position:absolute;left:25px;width:2px;background:var(--line-2);z-index:0;border-radius:2px}
.how-track-fill{position:absolute;left:25px;width:2px;height:0;z-index:1;border-radius:2px;
  background:var(--grad-gold);box-shadow:0 0 14px rgba(201,162,75,.5);transition:height .15s linear}
.how-step.reached .how-num{border-color:transparent;color:#191206;background:var(--grad-gold);
  box-shadow:0 0 22px -2px rgba(201,162,75,.55)}

/* strategy: cross-fading imagery + live goal label (no numbers) */
.goals-media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 50%,rgba(8,8,7,.82))}
.goals-label{position:absolute;left:24px;bottom:22px;right:24px;z-index:3;font-family:var(--serif);
  font-size:1.6rem;color:#fbf7ee;letter-spacing:.01em;text-shadow:0 2px 22px rgba(0,0,0,.7);line-height:1.1}

/* Why Metro Detroit cards */
.wd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px}
.wd-card{border:1px solid var(--line-2);border-radius:14px;overflow:hidden;background:var(--ink-1);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .4s}
.wd-card:hover{transform:translateY(-6px);border-color:var(--line)}
.wd-media{aspect-ratio:16/10;overflow:hidden}
.wd-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.82) saturate(.97);
  transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.wd-card:hover .wd-media img{transform:scale(1.07)}
.wd-body{padding:26px}
.wd-index{font-family:var(--serif);font-size:.95rem;color:var(--gold);letter-spacing:.12em}
.wd-body h2,.wd-body h3{font-family:var(--serif);font-weight:400;font-size:1.45rem;color:var(--cream);margin:9px 0 10px}
.wd-body p{color:var(--cream-dim);font-size:.92rem;line-height:1.65;margin:0;text-align:left;-webkit-hyphens:none;hyphens:none}
.wd-cta{text-align:center;margin-top:44px}
@media (max-width:900px){.wd-grid{grid-template-columns:1fr;max-width:430px;margin-inline:auto}}
@media (prefers-reduced-motion:reduce){.how-track-fill{transition:none}}

/* ============================================================
   HOME REFINEMENTS (batch)
   ============================================================ */
/* hero: center content vertically so the headline sits higher (no top gap) */
.hero{align-items:center}
.hero-inner{padding-top:clamp(104px,14vh,150px);padding-bottom:clamp(40px,7vh,80px)}
/* bigger nav logo */
.brand img{height:72px}
.header.solid .brand img{height:58px}
/* bigger gold eyebrow labels (What We Do, Why 1st Class, Your Move, etc.) */
.eyebrow{font-size:.82rem;letter-spacing:.26em}
/* more vibrant "Why 1st Class" (borderless, animated) */
.ben-items{gap:38px 46px}
.ben-item h3{font-size:1.32rem}
.ben-item:hover{transform:translateY(-5px)}
.ben-mark{width:32px;height:3px}
.ben-item:hover .ben-mark{width:56px}

/* ============================================================
   WORLD MAP (dotted continents + hover clusters)
   ============================================================ */
.worldmap{position:relative;margin-top:36px}
#mapCanvas{display:block;width:100%;height:auto;
  -webkit-mask-image:radial-gradient(ellipse 94% 99% at 50% 50%,#000 74%,transparent 100%);
  mask-image:radial-gradient(ellipse 94% 99% at 50% 50%,#000 74%,transparent 100%)}
.map-pins{position:absolute;inset:0;pointer-events:none;z-index:2}
#mapHi{color:var(--gold-hi);transition:color .3s}
#mapHi.on{color:#f6e6b4}

/* clean gold city markers */
.map-marker{position:absolute;width:14px;height:14px;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;z-index:3;
  /* A16: these are <button>s now (keyboard operable) — reset the UA chrome so
     they render exactly as the old <div>s did. */
  -webkit-appearance:none;appearance:none;background:none;border:0;padding:0;font:inherit;color:inherit}
.map-marker .mk-dot{position:absolute;inset:3px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fbeec2,#d3ad5c);
  box-shadow:0 0 9px 1px rgba(235,208,138,.55);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.map-marker .mk-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(235,208,138,.7);
  animation:hubPulse 2.8s ease-out infinite;opacity:.9}
.map-marker:hover .mk-dot,.map-marker.hot .mk-dot{transform:scale(1.55);box-shadow:0 0 16px 3px rgba(235,208,138,.75)}
.map-marker .mk-card{position:absolute;bottom:calc(100% + 11px);left:50%;transform:translate(-50%,8px);
  background:rgba(14,13,11,.96);border:1px solid var(--line);border-radius:12px;padding:9px 15px;white-space:nowrap;
  opacity:0;visibility:hidden;transition:opacity .35s,transform .35s cubic-bezier(.2,.7,.2,1);
  backdrop-filter:blur(6px);box-shadow:0 20px 44px -20px rgba(0,0,0,.85);z-index:5}
.map-marker:hover .mk-card,.map-marker.hot .mk-card{opacity:1;visibility:visible;transform:translate(-50%,0)}
.map-marker .mk-card b{font-family:var(--serif);font-weight:400;color:var(--cream);font-size:1.05rem;display:block;line-height:1.1}
.map-marker .mk-card span{font-size:.66rem;letter-spacing:.12em;color:var(--gold-hi);text-transform:uppercase}
.map-marker .mk-card::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%) rotate(45deg);
  width:9px;height:9px;background:rgba(14,13,11,.96);border-right:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:-5px}

.map-hub{position:absolute;transform:translate(-50%,-50%);z-index:4;pointer-events:none;width:14px;height:14px}
.map-hub .core{position:absolute;inset:0;border-radius:50%;background:#f6e6b4;box-shadow:0 0 18px 4px rgba(235,208,138,.75)}
.map-hub .pulse{position:absolute;inset:0;border-radius:50%;border:1px solid var(--gold-hi);animation:hubPulse 2.6s ease-out infinite}
.map-hub .lbl{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hi)}
@keyframes hubPulse{0%{transform:scale(1);opacity:.65}100%{transform:scale(4.5);opacity:0}}

@media (max-width:640px){
  .map-marker{width:12px;height:12px}
  .map-marker .mk-card b{font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){.map-hub .pulse,.map-marker .mk-ring{animation:none;opacity:0}}

/* horizontal logo lockup sizing */
.brand img{height:46px}
.header.solid .brand img{height:40px}
.footer-brand img{height:50px}
@media (max-width:640px){.brand img{height:40px}}

/* ============================================================
   WHAT WE DO — expanding photo-panel wall
   ============================================================ */
/* A20: min-height, not height — at 200% text the panel body overflowed a fixed
   box and was clipped by .xp{overflow:hidden}. position:relative anchors the
   pause control (2.2.2). */
.xpanels{display:flex;gap:10px;margin-top:56px;min-height:clamp(460px,64vh,600px);position:relative}
.xp{position:relative;flex:1;min-width:0;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);
  cursor:pointer;isolation:isolate;transition:flex .85s cubic-bezier(.3,.75,.2,1)}
.xp.on{flex:4.4}
.xp>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.48) saturate(.9);transform:scale(1.07);
  transition:filter .8s ease,transform 1.5s cubic-bezier(.2,.7,.2,1)}
.xp.on>img{filter:brightness(.8) saturate(1.02);transform:scale(1)}
.xp-shade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,8,7,.35),rgba(8,8,7,0) 38%,rgba(8,8,7,.92) 100%)}
/* gold hairline frame breathes in on the open panel */
.xp::after{content:"";position:absolute;inset:12px;z-index:3;pointer-events:none;border-radius:9px;
  border:1px solid rgba(235,208,138,.28);opacity:0;transform:scale(1.02);
  transition:opacity .6s ease .15s,transform .8s cubic-bezier(.22,1,.36,1) .15s}
.xp.on::after{opacity:1;transform:scale(1)}
.xp-num{position:absolute;z-index:2;top:20px;left:0;right:0;text-align:center;
  font-family:var(--serif);font-size:1rem;letter-spacing:.16em;color:var(--gold-hi);
  text-shadow:0 1px 12px rgba(0,0,0,.8);transition:text-align 0s,opacity .4s}
.xp.on .xp-num{left:30px;right:auto;font-size:1.05rem}
/* collapsed slivers read bottom-to-top */
.xp-side{position:absolute;z-index:2;left:50%;bottom:26px;transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl;font-family:var(--serif);font-size:clamp(1rem,1.3vw,1.25rem);letter-spacing:.12em;
  color:var(--cream);white-space:nowrap;text-shadow:0 1px 14px rgba(0,0,0,.85);
  opacity:.95;transition:opacity .3s ease}
.xp.on .xp-side{opacity:0}
/* A17: visibility (not just opacity) so the four collapsed panels leave the
   accessibility tree — otherwise all five service descriptions are announced at
   once. The 0s visibility step is delayed to the end of the fade-out so the
   existing transition is unchanged visually. */
.xp-body{position:absolute;z-index:2;left:0;bottom:0;display:block;box-sizing:border-box;
  width:min(560px,100%);padding:clamp(22px,2.6vw,38px);
  opacity:0;visibility:hidden;transform:translateY(18px);
  transition:opacity .4s ease,transform .5s cubic-bezier(.22,1,.36,1),visibility 0s linear .5s}
.xp.on .xp-body{opacity:1;visibility:visible;transform:none;transition-delay:.28s,.28s,0s}
.xp-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,2.5vw,2.4rem);
  color:#fbf7ee;margin:0 0 10px;line-height:1.06;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.xp-desc{margin:0 0 16px;color:#d9d3c6;font-size:.95rem;line-height:1.6;max-width:46ch;
  text-shadow:0 1px 10px rgba(0,0,0,.7)}
.xp-link{display:inline-flex;align-items:center;gap:9px;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-hi)}
.xp-link .arw{transition:transform .3s}
.xp.on:hover .xp-link .arw{transform:translateX(5px)}
.sx-cta{text-align:center;margin-top:46px}
@media (max-width:820px){
  .xpanels{flex-direction:column;height:auto;gap:8px}
  .xp{flex:none;height:62px;border-radius:12px;transition:height .6s cubic-bezier(.3,.75,.2,1)}
  .xp.on{flex:none;height:350px}
  .xp>img{transform:scale(1.02)}
  .xp-num{top:50%;left:20px;right:auto;text-align:left;transform:translateY(-50%);font-size:.85rem}
  .xp.on .xp-num{top:18px;left:20px;transform:none}
  .xp-side{writing-mode:horizontal-tb;transform:none;left:58px;right:auto;bottom:auto;top:50%;
    translate:0 -50%;font-size:1.05rem;letter-spacing:.08em}
  .xp-body{padding:20px;width:100%}
  .xp-title{font-size:1.5rem}
  .xp-desc{font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){
  .xp,.xp>img,.xp::after{transition:none}
  .xp-body{transition:opacity .3s;transform:none}
}

/* ============================================================
   HERO VIDEO (plays once, freezes on last frame)
   ============================================================ */
.hero-bg video{width:100%;height:100%;object-fit:cover;object-position:center 42%;
  filter:brightness(.6) contrast(1.03) saturate(1.02)}

/* ============================================================
   NAV: 5 links + full-size wordmark need room — hamburger below 1280px
   ============================================================ */
@media (max-width:1500px){
  .nav-links{gap:14px}
  .nav-links a{font-size:.72rem;letter-spacing:.1em;white-space:nowrap}
  .nav{padding-inline:clamp(20px,2.2vw,34px)}
}
@media (max-width:1360px){
  .nav-links,.nav-phone{display:none}
  .nav{grid-template-columns:auto 1fr auto}
  .brand{justify-self:start}
  .nav-toggle{display:flex}
}

/* ============================================================
   BRAND LOCKUP: icon + wordmark as separate images so the
   words render at the same height as the mark
   ============================================================ */
.brand{gap:14px}
.footer-logo{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.footer-logo img{margin-bottom:0}
.footer-logo .brand-mark,.footer-logo .brand-word{height:44px;width:auto}
@media (max-width:640px){
  .nav{gap:14px;padding-inline:16px}
  .nav-right{gap:10px}
  .nav-right .btn-gold{padding:12px 16px;font-size:.7rem}
  .brand{gap:8px}
  .brand .brand-mark{height:34px}
  .brand .brand-word{height:28px}
}
@media (max-width:400px){
  .brand .brand-mark{height:30px}
  .brand .brand-word{height:23px}
}

/* ============================================================
   TURN-KEY: renovation standard checklist
   ============================================================ */
/* grid lines are drawn per tile (not by the container background) so a partial
   last row ends flush instead of leaving line-coloured holes */
.std-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink-1);
  border:1px solid var(--line-2);border-radius:14px;overflow:hidden;margin-top:52px}
.std-item{background:var(--ink-1);padding:28px 26px;transition:background .4s;box-shadow:0 0 0 1px var(--line-2)}
.std-item:hover{background:#16130d}
.std-item h4{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hi);margin:0 0 10px;font-weight:600}
.std-item p{color:var(--cream-dim);font-size:.9rem;line-height:1.6;margin:0}
@media (max-width:900px){.std-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.std-grid{grid-template-columns:1fr}}

/* ============================================================
   ARTICLE / LEGAL PROSE (blog posts, privacy, terms)
   ============================================================ */
.article{max-width:760px;margin-inline:auto}
.article p{color:var(--cream-dim);font-size:1.05rem;line-height:1.85;margin:0 0 26px;text-align:left;-webkit-hyphens:none;hyphens:none}
.article p:first-of-type::first-letter{font-family:var(--serif);font-size:3.2em;line-height:.8;float:left;
  margin:6px 12px 0 0;color:var(--gold-hi)}
.article h2{font-family:var(--serif);font-weight:400;font-size:1.7rem;color:var(--cream);margin:44px 0 16px}
.article ul{color:var(--cream-dim);line-height:1.85;padding-left:22px;margin:0 0 26px}
.post-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.post-tag{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi);
  border:1px solid rgba(235,208,138,.3);padding:6px 13px;border-radius:20px}
.article-cta{margin-top:54px;padding-top:34px;border-top:1px solid var(--line-2);text-align:center}
.article-cta p{text-align:center;margin-bottom:22px}

/* blog index cards reuse .wd-card; category chip */
.wd-cat{display:inline-block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}

/* ============================================================
   PROPERTY DETAIL
   ============================================================ */
.prop-card{display:block}
a.prop-card{color:inherit}
.detail-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(34px,5vw,72px);align-items:start;margin-top:20px}
.detail-gallery{display:grid;gap:14px}
.detail-gallery img{width:100%;border-radius:14px;border:1px solid var(--line-2);aspect-ratio:16/10;object-fit:cover}
.detail-facts{position:sticky;top:110px;border:1px solid var(--line-2);border-radius:14px;background:var(--ink-1);padding:30px}
.fact-rows{display:flex;flex-direction:column}
.fact-row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--line-2);font-size:.92rem}
.fact-row:first-child{border-top:none}
.fact-row .fk{color:var(--muted);letter-spacing:.06em}
.fact-row .fv{color:var(--cream);font-variant-numeric:tabular-nums;text-align:right}
.fact-row .fv.gold{color:var(--gold-hi)}
.detail-facts .btn-gold{width:100%;justify-content:center;margin-top:24px}
.detail-facts .facts-note{font-size:.68rem;color:var(--muted);margin-top:14px;text-align:center;letter-spacing:.03em}
.feature-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.feature-chips span{font-size:.78rem;letter-spacing:.04em;color:var(--cream-dim);background:var(--ink-1);
  border:1px solid var(--line);border-radius:40px;padding:9px 17px}
.detail-desc p{color:var(--cream-dim);font-size:1rem;line-height:1.8;margin:0 0 20px;text-align:left;-webkit-hyphens:none;hyphens:none}
@media (max-width:1024px){.detail-grid{grid-template-columns:1fr}.detail-facts{position:static}}

/* ============================================================
   BEFORE / AFTER SLIDER
   ============================================================ */
.ba{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line-2);aspect-ratio:16/10;margin-top:14px;user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .ba-after{clip-path:inset(0 0 0 50%)}
.ba .ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--grad-gold);pointer-events:none;z-index:2}
.ba .ba-handle::after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;background:rgba(10,10,10,.82);border:1px solid var(--gold-lo);
  color:var(--gold-hi);display:flex;align-items:center;justify-content:center;font-size:1rem;backdrop-filter:blur(4px)}
.ba .ba-label{position:absolute;top:14px;z-index:2;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream);background:rgba(8,8,7,.7);padding:6px 12px;border-radius:20px;border:1px solid var(--line)}
.ba .ba-label.before{left:14px}.ba .ba-label.after{right:14px}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:3;margin:0}

/* ============================================================
   404
   ============================================================ */
.nf{min-height:72vh;display:flex;align-items:center;text-align:center}
.nf .code{font-family:var(--serif);font-size:clamp(5rem,14vw,9rem);line-height:1;
  background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.nf-actions{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:34px}

/* ============================================================
   MOTION LAYER 2 — additive micro-interactions & scroll reveals
   (layers on top of existing animations; never replaces them)
   ============================================================ */

/* shared keyframes */
@keyframes riseIn{from{opacity:0;transform:translateY(7px)}}
@keyframes itemRise{from{opacity:0;transform:translateY(16px)}}
@keyframes fadeSwap{from{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- hamburger morphs to X while menu is open --- */
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* --- mobile menu links stagger in on open --- */
.mobile-menu a{opacity:0;transform:translateY(12px);
  transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1),color .3s}
body.nav-open .mobile-menu a{opacity:1;transform:none}
body.nav-open .mobile-menu a:nth-child(1){transition-delay:.06s}
body.nav-open .mobile-menu a:nth-child(2){transition-delay:.1s}
body.nav-open .mobile-menu a:nth-child(3){transition-delay:.14s}
body.nav-open .mobile-menu a:nth-child(4){transition-delay:.18s}
body.nav-open .mobile-menu a:nth-child(5){transition-delay:.22s}
body.nav-open .mobile-menu a:nth-child(6){transition-delay:.26s}

/* --- eyebrow gold dashes draw outward from the label on reveal --- */
.reveal .eyebrow::before{transform:scaleX(0);transform-origin:right center;
  transition:transform .6s cubic-bezier(.22,1,.36,1) .2s}
.reveal .eyebrow::after{transform:scaleX(0);transform-origin:left center;
  transition:transform .6s cubic-bezier(.22,1,.36,1) .2s}
.reveal.in .eyebrow::before,.reveal.in .eyebrow::after{transform:scaleX(1)}

/* --- hero scroll cue (injected by JS on pages with a .hero) --- */
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;
  width:1px;height:54px;overflow:hidden;background:rgba(255,255,255,.14);
  opacity:0;transition:opacity .9s ease;pointer-events:none}
.scroll-cue.show{opacity:1}
.scroll-cue span{position:absolute;left:0;top:0;width:100%;height:44%;background:var(--grad-gold);
  animation:cueDrop 2.4s cubic-bezier(.45,0,.2,1) infinite}
@keyframes cueDrop{0%{transform:translateY(-110%)}60%,100%{transform:translateY(240%)}}

/* --- scroll-driven depth: hero handoff + CTA band parallax (no-op in older browsers) --- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .hero{view-timeline:--heroTl block}
    .hero .hero-inner{animation:heroExit linear both;animation-timeline:--heroTl;animation-range:exit 0% exit 100%}
    .cta-band .cta-bg img{animation:ctaPar linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes heroExit{to{transform:translateY(16%);opacity:0}}
@keyframes ctaPar{from{transform:translateY(-6%) scale(1.14)}to{transform:translateY(6%) scale(1.14)}}

/* --- stats: hairline dividers draw in around the count-up --- */
.stat.reveal::after{transform:scaleY(0);transition:transform .8s cubic-bezier(.22,1,.36,1) .35s}
.stat.reveal.in::after{transform:scaleY(1)}
.stat.reveal[data-d="1"]::after{transition-delay:.45s}
.stat.reveal[data-d="2"]::after{transition-delay:.55s}
.stat.reveal[data-d="3"]::after{transition-delay:.65s}

/* --- benefits: items rise on the same cadence as the existing title shimmer --- */
.ben-items.reveal.in .ben-item{animation:itemRise .7s cubic-bezier(.22,1,.36,1) backwards}
.ben-items.reveal.in .ben-item:nth-child(2){animation-delay:.12s}
.ben-items.reveal.in .ben-item:nth-child(3){animation-delay:.24s}
.ben-items.reveal.in .ben-item:nth-child(4){animation-delay:.36s}
.ben-items.reveal.in .ben-item:nth-child(5){animation-delay:.48s}
.ben-items.reveal.in .ben-item:nth-child(6){animation-delay:.6s}

/* --- world map: markers pop in radiating out from the Detroit hub --- */
.worldmap.reveal .map-marker,.worldmap.reveal .map-hub{opacity:0}
.worldmap.reveal.in .map-marker,.worldmap.reveal.in .map-hub{
  animation:markerPop .55s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--pop,.1s)}
@keyframes markerPop{from{opacity:0;transform:translate(-50%,-50%) scale(.25)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* --- generic text-swap fade (map caption, qualifier summary) --- */
.swap-fade{animation:fadeSwap .35s ease}

/* --- lead form: submit spinner + success check + error shake --- */
.btn-gold.is-loading{pointer-events:none}
.btn-gold.is-loading::after{content:"";width:13px;height:13px;flex-shrink:0;border-radius:50%;
  border:2px solid rgba(25,18,6,.3);border-top-color:#191206;animation:spin .7s linear infinite}
.form-note.ok{animation:riseIn .5s cubic-bezier(.22,1,.36,1)}
.form-note.ok .fn-check{display:inline-block;width:15px;height:15px;margin-right:8px;vertical-align:-2px}
.fn-check path{stroke:var(--gold-hi);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:27;stroke-dashoffset:27;animation:checkDraw .5s cubic-bezier(.22,1,.36,1) .1s forwards}
@keyframes checkDraw{to{stroke-dashoffset:0}}
.form-note.err{animation:noteShake .32s ease}
@keyframes noteShake{20%{transform:translateX(-4px)}45%{transform:translateX(4px)}
  70%{transform:translateX(-3px)}90%{transform:translateX(2px)}}

/* --- contact qualifier: chip pop on select --- */
.q-chip.sel{animation:chipPop .24s cubic-bezier(.22,1,.36,1)}
@keyframes chipPop{0%{transform:scale(.94)}60%{transform:scale(1.05)}100%{transform:scale(1)}}

/* --- grids: per-card stagger (JS assigns --i, capped at 6) --- */
.props-grid.reveal .prop-card,.wd-grid.reveal .wd-card,.detail-gallery.reveal > img{opacity:0}
.props-grid.reveal.in .prop-card,.wd-grid.reveal.in .wd-card,.detail-gallery.reveal.in > img{opacity:1;
  animation:itemRise .7s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--i,0)*70ms)}

/* --- blog articles: gold reading-progress bar (injected by JS) --- */
.read-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none}
.read-progress i{display:block;height:100%;background:var(--grad-gold);transform:scaleX(0);transform-origin:left}

/* --- 404: one-shot entrance glow on the gradient numerals --- */
.nf .code{animation:nfGlow 1.5s cubic-bezier(.22,1,.36,1) .25s backwards}
@keyframes nfGlow{0%{opacity:0;transform:translateY(14px);filter:brightness(.7)}
  60%{filter:brightness(1.35) drop-shadow(0 0 26px rgba(235,208,138,.4))}
  100%{opacity:1;transform:none;filter:brightness(1)}}

/* --- reduced motion: the entire additive layer collapses to static --- */
@media (prefers-reduced-motion:reduce){
  .mobile-menu a{opacity:1;transform:none;transition:none}
  .nav-toggle span{transition:none}
  .reveal .eyebrow::before,.reveal .eyebrow::after{transform:none;transition:none}
  .scroll-cue{display:none}
  .stat.reveal::after{transform:none;transition:none}
  .ben-items.reveal.in .ben-item{animation:none}
  .worldmap.reveal .map-marker,.worldmap.reveal .map-hub{opacity:1;animation:none}
  .swap-fade{animation:none}
  .form-note.ok,.form-note.err{animation:none}
  .fn-check path{animation:none;stroke-dashoffset:0}
  .q-chip.sel{animation:none}
  .props-grid.reveal .prop-card,.wd-grid.reveal .wd-card,.detail-gallery.reveal > img{opacity:1;animation:none}
  .nf .code{animation:none}
}

/* ============================================================
   MOBILE FIXES: blog card grid + header wordmark overflow
   ============================================================ */
/* blog index: 2-up on desktop (replaces the old inline style), stacks on mobile */
.wd-grid.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){
  .wd-grid.cols-2{grid-template-columns:1fr}
}
/* small phones: keep the wordmark inside the nav instead of sliding under the CTA.
   .header.solid selectors included so the scrolled-state height override can't re-inflate it */
@media (max-width:640px){
  .brand{min-width:0}
  .header .brand .brand-mark,.header.solid .brand .brand-mark{height:34px}
  .header .brand .brand-word,.header.solid .brand .brand-word{
    height:auto;width:auto;max-height:28px;max-width:min(38vw,150px)}
}
@media (max-width:400px){
  .header .brand .brand-mark,.header.solid .brand .brand-mark{height:30px}
  .header .brand .brand-word,.header.solid .brand .brand-word{max-height:24px;max-width:34vw}
}

/* ============================================================
   WORLD MAP UPGRADE: desktop labels + mobile zoom-crop & chips
   ============================================================ */
/* always-visible city labels under the markers */
.map-marker .mk-name{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(196,189,174,.7);
  transition:color .3s;pointer-events:none}
.map-marker.mk-top .mk-name{top:auto;bottom:calc(100% + 7px)}
.map-marker:hover .mk-name,.map-marker.hot .mk-name{color:var(--gold-hi)}

@media (max-width:640px){
  /* full world visible, no crop or panning: full-bleed for maximum width */
  .worldmap{width:100vw;margin-left:calc(50% - 50vw)}
  .map-marker{width:7px;height:7px}
  .map-marker .mk-dot{inset:1.5px;box-shadow:0 0 5px 1px rgba(235,208,138,.45)}
  .map-hub{width:9px;height:9px}
  .map-hub .core{box-shadow:0 0 10px 2px rgba(235,208,138,.6)}
  /* labels stay only on the markers that have room at this scale (.mk-mob) */
  .map-marker:not(.mk-mob) .mk-name{display:none}
  .map-marker.mk-mob .mk-name{font-size:.5rem;letter-spacing:.06em;color:rgba(211,173,92,.9);top:calc(100% + 4px)}
  .map-marker.mk-mob.mk-top .mk-name{top:auto;bottom:calc(100% + 4px)}
  .map-marker.mk-mob.mk-mob-lo .mk-name{top:calc(100% + 11px)}
  .map-marker .mk-card{display:none}
  .map-hub .lbl{font-size:.55rem;letter-spacing:.14em}
  #mapHi{display:none}
}

/* ============================================================
   PROPERTY CARDS: before / after slider inside the card media
   ============================================================ */
.prop-media .ba{position:absolute;inset:0;z-index:1;margin:0;border:0;border-radius:0;aspect-ratio:auto}
.prop-media .ba .ba-label{top:auto;bottom:12px;font-size:.56rem;padding:5px 10px}
.prop-media .ba .ba-label.before{left:12px}.prop-media .ba .ba-label.after{right:12px}
.prop-media .ba .ba-handle::after{width:34px;height:34px;font-size:.85rem}
.prop-card:hover .prop-media .ba img{transform:none}
.prop-media .ba input[type=range]{touch-action:pan-y}
/* a native link/image drag would cancel the slider drag partway through */
.prop-card,.prop-card img{-webkit-user-drag:none;user-select:none}

/* ============================================================
   PAGE HERO: emphasised intro line (properties)
   ============================================================ */
.page-hero p.hero-lead{color:#efe8d9;font-size:clamp(1.12rem,1.75vw,1.5rem);line-height:1.6;font-weight:500;
  letter-spacing:.004em;max-width:32ch;margin-top:22px;position:relative;padding-left:22px;
  text-shadow:0 2px 24px rgba(0,0,0,.6)}
.page-hero p.hero-lead::before{content:"";position:absolute;left:0;top:.32em;bottom:.32em;width:2px;
  background:var(--grad-gold);border-radius:2px}
@media (max-width:820px){
  .page-hero p.hero-lead{max-width:none;padding-left:16px;font-size:clamp(1.05rem,3.6vw,1.24rem)}
}

/* ============================================================
   RENOVATION STANDARD — ORBIT GRAPHIC
   ============================================================ */
.ring{margin-top:clamp(34px,5vw,58px)}
.ring-canvas{position:relative;margin-inline:auto;
  --rx:clamp(180px,19vw,258px);
  --ry:clamp(210px,22vw,300px);
  width:min(100%,1120px);
  height:calc(var(--ry) * 2 + 84px)}
/* dashed orbit line the nodes sit on */
.ring-orbit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(var(--rx) * 2);height:calc(var(--ry) * 2);border-radius:50%;
  border:1px dashed rgba(201,162,75,.3);pointer-events:none}
.ring-orbit::after{content:"";position:absolute;inset:-14px;border-radius:50%;
  border:1px solid rgba(201,162,75,.07)}
/* centre photograph */
.ring-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(var(--rx) * 1.42);aspect-ratio:1;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 1px rgba(201,162,75,.4),0 0 0 9px rgba(201,162,75,.05),0 34px 80px -30px rgba(0,0,0,.9)}
.ring-core img{width:100%;height:100%;object-fit:cover;filter:brightness(.94) saturate(.98)}
.ring-core::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 42%,rgba(8,8,7,0) 52%,rgba(8,8,7,.55) 100%)}
/* nodes */
.ring-nodes{list-style:none;margin:0;padding:0;position:absolute;inset:0}
.rn{position:absolute;width:0;height:0;
  left:calc(50% + var(--sx) * var(--rx));
  top:calc(50% + var(--cy) * var(--ry))}
.rn-in{position:absolute;top:50%;transform:translateY(-50%);display:flex;align-items:center;
  gap:14px;width:max-content;max-width:min(23vw,240px)}
.rn.r .rn-in{left:-26px}
.rn.l .rn-in{right:-26px;flex-direction:row-reverse;text-align:right}
.rn-ico{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  color:var(--gold-hi);background:linear-gradient(160deg,#161310,#0c0b09);
  border:1px solid rgba(201,162,75,.42);box-shadow:0 0 0 5px rgba(10,10,10,.9),0 10px 26px -12px rgba(0,0,0,.9);
  transition:color .35s,border-color .35s,transform .35s,box-shadow .35s}
.rn-ico svg{width:25px;height:25px}
.rn-txt{display:block;min-width:0}
.rn-txt b{display:block;font-family:var(--serif);font-weight:400;font-size:1.12rem;color:var(--cream);
  line-height:1.15;letter-spacing:.01em;transition:color .35s}
.rn-txt em{display:block;font-style:normal;color:var(--muted);font-size:.79rem;line-height:1.45;margin-top:5px;
  transition:color .35s;-webkit-hyphens:none;hyphens:none}
.rn:hover .rn-ico{color:#191206;background:var(--grad-gold);border-color:transparent;transform:scale(1.07);
  box-shadow:0 0 0 5px rgba(10,10,10,.9),0 0 34px -6px rgba(201,162,75,.55)}
.rn:hover .rn-txt b{color:var(--gold-hi)}
.rn:hover .rn-txt em{color:var(--cream-dim)}

/* below the orbit's comfortable width: symmetrical two-column list */
@media (max-width:1080px){
  .ring-canvas{width:100%;height:auto;display:flex;flex-direction:column;align-items:center;gap:clamp(28px,5vw,44px)}
  .ring-orbit{display:none}
  .ring-core{position:static;transform:none;width:min(360px,72vw);border-radius:50%}
  .ring-nodes{position:static;display:grid;grid-template-columns:1fr 1fr;
    gap:1px;align-self:stretch;width:auto;min-width:0;background:var(--line-2);box-shadow:0 0 0 1px var(--line-2)}
  .ring-nodes > .rn{min-width:0}
  .rn{position:static;width:auto;height:auto;background:var(--ink-1);padding:22px 20px}
  .rn-in{position:static;transform:none;width:auto;max-width:none;align-items:flex-start;gap:16px}
  .rn-txt{flex:1 1 auto;min-width:0}
  .rn.l .rn-in{flex-direction:row;text-align:left}
  .rn-ico{width:44px;height:44px;box-shadow:none}
  .rn-ico svg{width:22px;height:22px}
  .rn-txt em{font-size:.83rem}
}
@media (max-width:620px){
  .ring-nodes{grid-template-columns:1fr}
  .ring-core{width:min(300px,78vw)}
}
@media (prefers-reduced-motion:reduce){
  .rn:hover .rn-ico{transform:none}
}

/* ============================================================
   WHY DETROIT — EDITORIAL CASE ROWS
   ============================================================ */
.cases{margin-top:clamp(40px,5vw,66px)}
.case{display:grid;grid-template-columns:minmax(0,74px) minmax(0,1fr) minmax(0,40%);
  gap:clamp(22px,3.2vw,52px);align-items:start;
  padding-block:clamp(34px,4.4vw,58px);border-top:1px solid var(--line-2)}
.case:last-child{border-bottom:1px solid var(--line-2)}
.case:nth-child(even){grid-template-columns:minmax(0,40%) minmax(0,74px) minmax(0,1fr)}
.case:nth-child(even) .case-media{order:-1}
.case-n{font-family:var(--serif);font-size:clamp(2.2rem,3.4vw,3.2rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(201,162,75,.55);align-self:start;padding-top:.04em;
  transition:color .5s,-webkit-text-stroke-color .5s}
.case:hover .case-n{color:rgba(201,162,75,.14);-webkit-text-stroke-color:var(--gold)}
.case-body h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,2.6vw,2.3rem);
  color:var(--cream);margin:0 0 14px;line-height:1.1}
.case-body p{color:var(--cream-dim);font-size:1rem;line-height:1.78;margin:0;max-width:60ch;
  text-align:left;-webkit-hyphens:none;hyphens:none}
.case-media{margin:0;overflow:hidden;border-radius:3px;border:1px solid var(--line-2);aspect-ratio:16/10;align-self:center}
.case-media img{width:100%;height:100%;object-fit:cover;filter:brightness(.78) saturate(.95);
  transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .6s}
.case:hover .case-media img{transform:scale(1.05);filter:brightness(.92) saturate(1)}
@media (max-width:900px){
  .case,.case:nth-child(even){grid-template-columns:minmax(0,54px) minmax(0,1fr);gap:18px 20px}
  .case-media,.case:nth-child(even) .case-media{order:0;grid-column:1/-1;margin-top:6px}
  .case-n{font-size:1.9rem;align-self:start;padding-top:.04em}
}

/* ============================================================
   WHY DETROIT — CAPITAL LEDGER
   ============================================================ */
.ledger{display:flex;flex-direction:column}
.lg{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;row-gap:12px;
  padding-block:clamp(24px,2.8vw,34px);border-top:1px solid var(--line-2)}
.lg:first-child{border-top:none;padding-top:0}
.lg-co{font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2vw,1.75rem);color:var(--cream);
  line-height:1.1;align-self:end;transition:color .4s}
.lg-amt{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1;
  align-self:end;justify-self:end;background:var(--grad-gold);-webkit-background-clip:text;
  background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.lg-bar{grid-column:1/-1;position:relative;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.lg-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--grad-gold);border-radius:2px;
  transition:width 1.5s cubic-bezier(.2,.7,.2,1) .15s;box-shadow:0 0 16px -2px rgba(201,162,75,.6)}
.lg.in .lg-bar i{width:var(--w)}
.lg-note{grid-column:1/-1;margin:0;color:var(--cream-dim);font-size:.95rem;line-height:1.7;max-width:64ch;
  text-align:left;-webkit-hyphens:none;hyphens:none}
.lg-when{color:var(--muted);white-space:nowrap}
.lg:hover .lg-co{color:var(--gold-hi)}
@media (max-width:560px){
  .lg{grid-template-columns:1fr;row-gap:8px}
  .lg-amt{justify-self:start}
}
@media (prefers-reduced-motion:reduce){.lg-bar i{transition:none}}

/* ============================================================
   WHY DETROIT — SECTOR INDEX
   ============================================================ */
.sectors{list-style:none;margin:clamp(38px,5vw,58px) 0 0;padding:0;counter-reset:sx}
.sx{display:grid;grid-template-columns:minmax(0,58px) minmax(0,300px) minmax(0,1fr);
  gap:clamp(16px,2.4vw,38px);align-items:baseline;padding-block:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--line-2);position:relative;transition:padding-left .4s}
.sx:last-child{border-bottom:1px solid var(--line-2)}
.sx::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--grad-gold);
  transition:width .6s cubic-bezier(.2,.7,.2,1)}
.sx:hover::before{width:100%}
.sx:hover{padding-left:12px}
.sx-n{font-family:var(--serif);font-size:.9rem;letter-spacing:.12em;color:var(--gold-lo);transition:color .4s}
.sx:hover .sx-n{color:var(--gold-hi)}
.sx h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.1vw,1.9rem);color:var(--cream);
  margin:0;line-height:1.15;transition:color .4s}
.sx:hover h3{color:var(--gold-hi)}
.sx p{margin:0;color:var(--cream-dim);font-size:.97rem;line-height:1.7;max-width:72ch;
  text-align:left;-webkit-hyphens:none;hyphens:none}
@media (max-width:900px){
  .sx{grid-template-columns:minmax(0,44px) minmax(0,1fr);row-gap:10px}
  .sx p{grid-column:2/-1}
  .sx:hover{padding-left:0}
}

/* page-hero focal-point helper (keeps a house's facade in frame on wide crops) */
.page-hero-bg.pos-low img{object-position:center 66%}

/* empty inventory state: shown when no properties are published */
.props-empty{grid-column:1/-1;text-align:center;padding:clamp(2.5rem,6vw,4.5rem) 1rem;color:var(--muted);font-size:1.05rem;line-height:1.7;max-width:54ch;margin-inline:auto}
.props-empty a{color:var(--gold-hi);text-decoration:underline;text-underline-offset:.2em}
.props-empty a:hover{color:#fff}

/* ============================================================
   ACCESSIBILITY REMEDIATION — WCAG 2.2 A/AA
   (see scratchpad/a11y-fixes-applied.md)
   ============================================================ */

/* --- A04 (2.2.2 Pause, Stop, Hide): one pause/play control per region that
       animates or auto-advances for longer than five seconds. The control is
       a real button with a text alternative that flips between "Pause…" and
       "Play…"; nothing about it is copy. --- */
.motion-btn{position:absolute;z-index:20;width:32px;height:32px;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:rgba(10,10,10,.78);border:1px solid var(--gold-lo);color:var(--gold-hi);
  transition:border-color .3s,color .3s,background .3s}
.motion-btn:hover{border-color:var(--gold-hi);background:rgba(10,10,10,.92)}
.motion-btn svg{width:11px;height:11px;fill:currentColor;display:block;pointer-events:none}
.motion-btn .mb-play{display:none}
.motion-btn[data-paused="true"] .mb-play{display:block}
.motion-btn[data-paused="true"] .mb-pause{display:none}
/* per-region placement */
.marquee-sec .motion-btn{right:clamp(14px,3vw,34px);top:50%;transform:translateY(-50%)}
.xpanels .motion-btn{right:0;top:-42px}
.occ-tabs .motion-btn{right:0;top:50%;transform:translateY(-50%)}
.work-sticky .motion-btn{right:12px;top:12px}
/* narrow screens: the three tabs already fill the row, so drop the control into
   the gap between the tab rule and the panel instead of over a tab label */
@media (max-width:820px){
  .occ-tabs .motion-btn{top:calc(100% + 6px);transform:none}
}
/* the marquee lead wraps to two lines below ~640px and crowds the control, so
   move it into the section's bottom padding instead */
@media (max-width:640px){
  .marquee-sec .motion-btn{top:auto;bottom:14px;transform:none}
}
/* paused state for the two CSS-driven regions */
.motion-paused.marquee-track,.motion-paused .marquee-track,
.motion-paused .ccol{animation-play-state:paused}

/* --- A08 (2.1.1 / 4.1.2 / 1.4.11): the before/after range is no longer a
       descendant of the card link. The card link now wraps only the address and
       covers the card with a transparent overlay for mouse users; the slider
       sits above that overlay so it stays draggable. --- */
.prop-card{position:relative}
.prop-addr a::after{content:"";position:absolute;inset:0;z-index:0}
/* purely decorative badge painted above the overlay — let clicks fall through */
.prop-tag{pointer-events:none}
/* the range is opacity:0, so its own outline can never be seen. Put the
   indicator on the wrapper instead. Inset because .prop-media clips. */
.ba:focus-within{outline:2px solid var(--gold);outline-offset:-2px}