/* ── RIPARO BRAND FONTS ──────────────────────────── */
@font-face{
  font-family:'Labora';
  src:url('assets/fonts/Labora-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Labora';
  src:url('assets/fonts/Labora-Italic.ttf') format('truetype');
  font-weight:400;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src:url('assets/fonts/Poppins-Light.ttf') format('truetype');
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src:url('assets/fonts/Poppins-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src:url('assets/fonts/Poppins-Medium.ttf') format('truetype');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Poppins';
  src:url('assets/fonts/Poppins-SemiBold.ttf') format('truetype');
  font-weight:600;font-style:normal;font-display:swap;
}

:root{
  --bg:#EDEAE4;
  --bg2:#E4DFD7;
  --white:#FFFFFF;
  --dark:#0F0500;
  --dark2:#1E0C02;
  --brown:#3D1F0A;
  --brown2:#6B3A1F;
  --gold:#C8851A;
  --gold2:#F5A623;
  --gold-bg:rgba(245,166,35,.08);
  --muted:#8B7355;
  --card-shadow:0 1px 12px rgba(15,5,0,.06),0 4px 24px rgba(15,5,0,.06);
  --card-hover:0 8px 32px rgba(15,5,0,.10),0 24px 64px rgba(15,5,0,.10);
  --serif:'Labora','Cormorant Garamond',Georgia,serif;
  --sans:'Poppins','Geist',system-ui,sans-serif;
  --radius:12px;
  --cocoa:#2A0700;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--sans);background:var(--bg);color:var(--dark);overflow-x:hidden;max-width:100vw}
/* Slim unobtrusive scrollbar */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(61,31,10,.18);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(61,31,10,.32)}
*{scrollbar-width:thin;scrollbar-color:rgba(61,31,10,.18) transparent}

/* Grain overlay for premium texture */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

/* ─── NAV ─── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:1rem 3rem;
  display:flex;align-items:center;justify-content:space-between;
  transition:all .5s cubic-bezier(.4,0,.2,1);
}
.nav.scrolled{
  background:rgba(237,234,228,.96);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(61,31,10,.07);
  box-shadow:0 1px 0 rgba(61,31,10,.06),0 4px 24px rgba(15,5,0,.04);
  padding:.8rem 3rem;
}
.nav:not(.scrolled){
  background:rgba(237,234,228,.88);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(61,31,10,.05);
}
.nav:not(.scrolled) .nav-center a,
.nav:not(.scrolled) .nav-link-sm{color:var(--brown2);}
.nav:not(.scrolled) .nav-center a:hover,
.nav:not(.scrolled) .nav-link-sm:hover{color:var(--dark)}

.nav-logo img{height:32px}
.nav-center{display:flex;gap:2.2rem;list-style:none}
.nav-center a{
  color:var(--brown2);text-decoration:none;
  font-size:.78rem;font-weight:500;letter-spacing:.04em;
  transition:color .2s;position:relative;padding-bottom:2px;
}
.nav-center a::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.nav-center a:hover{color:var(--dark)}
.nav-center a:hover::after{transform:scaleX(1)}
.nav-right{display:flex;align-items:center;gap:.9rem}
.nav-link-sm{
  color:var(--brown2);text-decoration:none;
  font-size:.78rem;font-weight:500;letter-spacing:.03em;transition:color .2s;
}
.nav-link-sm:hover{color:var(--dark)}
.nav-btn{
  background:var(--dark);color:var(--white);border:none;
  padding:.55rem 1.3rem;border-radius:7px;
  font-size:.76rem;font-weight:600;letter-spacing:.02em;
  cursor:pointer;font-family:var(--sans);
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.nav-btn:hover{
  background:var(--brown);
  box-shadow:0 4px 16px rgba(15,5,0,.22);
  transform:translateY(-1px);
}
/* Hero is cream, burger bars stay dark */
.nav:not(.scrolled) .nav-burger span{background:var(--brown)}

/* ─── HERO ─── */
.hero{
  position:relative;
  background:var(--bg);
  overflow:hidden;
  display:flex;flex-direction:column;
  align-items:center;
  padding-bottom:0;
  min-height:0;
}
.hero-bg{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 40%,rgba(245,166,35,.055) 0%,transparent 65%);
}
.hero-overlay{display:none}

/* Centred copy block */
.hero-top{
  position:relative;z-index:2;
  padding:100px 2rem 20px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
  width:100%;
}
.hero-copy{max-width:620px;width:100%}

@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.015)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes heroWordUp{from{opacity:0;transform:translateY(105%)}to{opacity:1;transform:none}}
@keyframes heroFadeIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.hero-title{
  font-family:var(--serif);
  /* Match BrandLyft: headline is prominent but NOT full-viewport.
     Leaves visible breathing room before the strip starts. */
  font-size:clamp(2.2rem,5vw,5rem);
  color:var(--dark);line-height:1.1;
  font-weight:400;margin-bottom:1rem;
  letter-spacing:-.02em;
  max-width:640px;margin-left:auto;margin-right:auto;
  animation:heroFadeIn 1s cubic-bezier(.22,1,.36,1) .1s both;
}
.hero-title em{font-style:italic;color:var(--gold)}
.hero-sub{
  font-size:.88rem;color:var(--muted);
  max-width:52ch;line-height:1.8;margin:0 auto 0;
  font-weight:300;letter-spacing:.01em;
  animation:heroFadeIn .8s ease .5s both;
}
.hero-actions{
  display:flex;gap:.8rem;align-items:center;
  justify-content:center;
  position:relative;z-index:3;
  padding:20px 2rem 32px;
  animation:heroFadeIn .8s ease 1.1s both;
}
.btn-gold{
  background:var(--gold2);color:var(--dark);
  padding:.8rem 1.8rem;border-radius:7px;
  font-weight:600;font-size:.82rem;letter-spacing:.02em;
  text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);
  display:inline-flex;align-items:center;gap:.5rem;
}
.btn-gold:hover{
  background:#F0A020;
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(245,166,35,.3);
}
.btn-ghost-w{
  color:var(--brown);padding:.78rem 1.5rem;border-radius:7px;
  font-weight:500;font-size:.82rem;letter-spacing:.02em;
  text-decoration:none;border:1px solid rgba(61,31,10,.2);transition:all .25s cubic-bezier(.4,0,.2,1);
}
.btn-ghost-w:hover{color:var(--dark);border-color:rgba(61,31,10,.45);background:rgba(61,31,10,.04)}

/* HERO SEARCH CARD */
.hero-search{
  position:relative;z-index:10;
  background:var(--white);
  border-radius:var(--radius) var(--radius) 0 0;
  padding:1.6rem 2rem;
  display:flex;align-items:center;gap:0;
  box-shadow:0 -8px 40px rgba(15,5,0,.15);
  max-width:1300px;margin:0 auto;width:100%;
}
.hs-tab{
  display:flex;gap:.4rem;margin-right:1.5rem;flex-shrink:0;
}
.hs-tab-btn{
  padding:.5rem 1rem;border-radius:6px;border:none;
  font-size:.8rem;font-weight:600;cursor:pointer;font-family:var(--sans);
  transition:all .25s;background:transparent;color:var(--muted);
}
.hs-tab-btn.active{background:var(--dark);color:white}
.hs-divider{width:1px;height:36px;background:rgba(15,5,0,.1);margin:0 1.2rem;flex-shrink:0}
.hs-field{flex:1;min-width:0;padding:0 .8rem}
.hs-field-label{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
.hs-field-val{font-size:.9rem;font-weight:600;color:var(--dark)}
.hs-field-val.placeholder{color:rgba(15,5,0,.35);font-weight:400}
.hs-btn{
  background:var(--dark);color:white;border:none;
  padding:.85rem 1.8rem;border-radius:8px;
  font-size:.88rem;font-weight:600;cursor:pointer;
  font-family:var(--sans);white-space:nowrap;
  display:flex;align-items:center;gap:.5rem;
  transition:all .3s;flex-shrink:0;margin-left:.8rem;
}
.hs-btn:hover{background:var(--brown);transform:translateY(-1px)}
.hs-btn svg{transition:transform .3s}
.hs-btn:hover svg{transform:translateX(3px)}

/* ─── STATS ROW ─── */
.stats-row{
  background:var(--white);
  border-bottom:1px solid rgba(15,5,0,.05);
  padding:0 3rem;
}
.stats-inner{
  max-width:1300px;margin:0 auto;
  display:flex;align-items:stretch;justify-content:space-between;
}
.st{
  text-align:center;flex:1;
  padding:2rem 1.2rem;
  border-right:1px solid rgba(15,5,0,.06);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
}
.st:last-child{border-right:none}
.st-icon{
  width:40px;height:40px;background:var(--bg);border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:.25rem;
}
.st-icon svg{width:18px;height:18px;stroke:var(--gold);stroke-width:1.8;fill:none}
.st-n{font-family:var(--serif);font-size:2.1rem;font-weight:400;color:var(--dark);line-height:1;display:block}
.st-n em{font-style:italic;color:var(--gold)}
.st-l{font-size:.72rem;color:var(--muted);font-weight:400;letter-spacing:.03em;line-height:1.4}
.st-flags{font-size:1rem;letter-spacing:.12em;vertical-align:middle;line-height:1.5;display:block;margin-top:.2rem}

/* ─── SECTION UTILS ─── */
.wrap{max-width:1300px;margin:0 auto;padding:0 3rem}
.eyebrow{
  display:flex;align-items:center;gap:.6rem;
  font-size:.65rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:1rem;
}
.eyebrow::before{content:'';width:18px;height:1px;background:var(--gold)}
.section-h{
  font-family:var(--serif);
  font-size:clamp(2rem,3.8vw,3.4rem);
  font-weight:400;line-height:1.12;color:var(--dark);
  letter-spacing:-.015em;
}
.section-h em{font-style:italic;color:var(--gold);transition:all .4s ease}

/* ─── PROPERTIES ─── */
.properties{padding:6rem 0;background:var(--bg)}
.props-top{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:3rem;
  flex-wrap:wrap;gap:1.2rem;
}
.props-filters{
  display:flex;gap:.5rem;
  background:var(--white);padding:.4rem;border-radius:10px;
  box-shadow:var(--card-shadow);
}
.pf-btn{
  padding:.5rem 1.1rem;border-radius:7px;border:none;background:transparent;
  font-size:.8rem;font-weight:600;cursor:pointer;font-family:var(--sans);
  color:var(--muted);transition:all .25s;
}
.pf-btn.active{background:var(--dark);color:white}
.pf-btn:hover:not(.active){background:var(--bg);color:var(--dark)}

.props-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:1023px){.props-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:639px){.props-grid{grid-template-columns:1fr}}

/* FEATURED CARD (big) */
/* Status badges. Also lost with the old featured-card block. */
.prop-chip{
  position:absolute;top:1rem;left:1rem;
  padding:.3rem .9rem;border-radius:6px;
  font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
}
.chip-a{background:var(--dark);color:white}
.chip-b{background:#7C3AED;color:white}
.chip-c{background:#15803D;color:white}
.chip-d{background:var(--gold2);color:var(--dark)}

/* Amenity tags. These were collateral damage when the old featured-card
   block was removed; restored verbatim. flex + gap means spacing does not
   depend on whitespace between the spans in the markup. */
.prop-tags{display:flex;gap:.4rem;flex-wrap:wrap}
.ptag{
  background:var(--bg);color:var(--brown2);
  padding:.2rem .65rem;border-radius:5px;
  font-size:.7rem;font-weight:500;
}
.prop-from{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* Three equal cards */
.pcard{
  display:flex;flex-direction:column;
  background:var(--white);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--card-shadow);
  text-decoration:none;color:inherit;
  border:1px solid rgba(15,5,0,.04);
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s,border-color .3s;
}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--card-hover);border-color:rgba(200,133,26,.12)}
.pcard-img{position:relative;height:260px;overflow:hidden;flex-shrink:0}
.pcard-ph{position:absolute;inset:0;width:100%;height:100%}
.pcard-img .ph-real{transition:transform .7s cubic-bezier(.4,0,.2,1)}
.pcard:hover .ph-real{transform:scale(1.04)}
.pcard-body{padding:1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.pcard-name{font-family:var(--serif);font-size:1.4rem;font-weight:400;color:var(--dark);margin:.45rem 0 .45rem;letter-spacing:-.01em}
.pcard-desc{font-size:.8rem;color:var(--muted);line-height:1.7;margin-bottom:1rem;font-weight:300}
.pcard-tags{margin-bottom:1rem}
.pcard-foot{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:auto;padding-top:1rem;border-top:1px solid rgba(15,5,0,.06);
}
.pcard-price{font-family:var(--serif);font-size:1.15rem;color:var(--dark);letter-spacing:-.01em}
.pcard-arrow{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg2);color:var(--brown);
  transition:background .3s,color .3s,transform .3s;
}
.pcard:hover .pcard-arrow{background:var(--gold2);color:var(--dark);transform:translateX(2px)}

/* ─── LUCIDE ICONS ─── */
.licon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.licon svg{display:block}
.feat-ico .licon svg{width:20px;height:20px;stroke:var(--brown2);stroke-width:1.8;fill:none;transition:stroke .3s}
.why-feat:hover .feat-ico .licon svg{stroke:var(--dark)}
.prop-loc-row .licon svg{width:11px;height:11px;stroke:var(--gold);stroke-width:2;fill:none}
.ng-loc .licon svg{width:12px;height:12px;stroke-width:2;fill:none}
.ng-loc.active-loc .licon svg{stroke:var(--gold2)}
.ng-loc.soon-loc .licon svg{stroke:rgba(255,255,255,.3)}

/* ─── ABOUT / STORY ─── */
.about{padding:7rem 0;background:var(--dark);overflow:hidden}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.about-imgs{position:relative;display:flex;flex-direction:column;align-items:center}
/* Pill sits BELOW image, not on top of it */
.about-pill{
  position:absolute;bottom:-1.5rem;left:1rem;
  background:var(--gold2);color:var(--dark);
  padding:.9rem 1.3rem;border-radius:10px;
  font-weight:700;text-align:center;line-height:1.2;
  box-shadow:0 8px 32px rgba(245,166,35,.4);z-index:2;
}
.about-pill b{display:block;font-family:var(--serif);font-size:2rem;font-weight:400;line-height:1}
.about .eyebrow{color:var(--gold2)}
.about .eyebrow::before{background:var(--gold2)}
.about .section-h{color:var(--white)}
.about .section-h em{color:var(--gold2)}
.about-body{font-size:.94rem;color:rgba(255,255,255,.55);line-height:1.85;margin:1.5rem 0 1rem}
.about-body strong{color:rgba(255,255,255,.85);font-weight:600}
/* No panel, no border, no accent bar. Sits on the section background. */
.press-line{
  display:flex;align-items:center;gap:.5rem;
  margin-top:1.6rem;
  font-size:13px;color:rgba(255,255,255,.5);
}
.press-line svg{color:var(--gold2);flex-shrink:0}
.press-line strong{color:var(--bg);font-weight:600}

/* ─── WHY ─── */
.why{padding:7rem 0;background:var(--bg2)}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.why-feats{display:flex;flex-direction:column;gap:0}
.why-feat{
  display:flex;gap:1.2rem;align-items:flex-start;
  padding:1.5rem;border-radius:10px;
  border-bottom:1px solid rgba(15,5,0,.07);
  transition:all .3s;cursor:default;
}
.why-feat:last-child{border-bottom:none}
.why-feat:hover{background:rgba(255,255,255,.7)}
.feat-ico{
  width:46px;height:46px;background:var(--white);
  border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:1.2rem;flex-shrink:0;
  box-shadow:0 2px 12px rgba(15,5,0,.08);transition:all .3s;
}
.why-feat:hover .feat-ico{background:var(--gold2);box-shadow:0 6px 20px rgba(245,166,35,.3)}
.feat-h{font-size:.95rem;font-weight:600;color:var(--dark);margin-bottom:.3rem}
.feat-p{font-size:.84rem;color:var(--muted);line-height:1.7}
.why-visual{position:relative}
/* Was height:540px + cover, which cropped the right edge on desktop and
   most of the frame on mobile. contain plus auto height shows the whole
   image at its own aspect ratio and can never exceed the column. */
.why-img-wrap{
  position:relative;width:100%;aspect-ratio:3/2;
  border-radius:var(--radius);overflow:hidden;
}
.why-img{
  width:100%;max-width:100%;height:100%;
  object-fit:cover;object-position:center;
  border-radius:var(--radius);
  box-shadow:0 4px 24px rgba(0,0,0,.08);
  border:none;display:block;
}
.why-img::before,.why-img::after{content:none}
/* Plain text under the image. No card, border, background or shadow. */
.why-quote{margin-top:1.6rem;text-align:center}
/* .why sits on var(--bg2), a light surface, so the quote needs dark ink. */
.why-quote blockquote{
  font-family:var(--serif);font-style:italic;
  font-size:18px;line-height:1.5;color:var(--brown);
}
.why-quote figcaption{
  margin-top:.7rem;font-size:11px;color:var(--gold2);
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}

/* ─── EVENTS ─── */
/* ─── COMMUNITY AND PRESS ─── */
.cmty{padding:7rem 0;background:var(--white);overflow:hidden}
.cmty-block{margin-top:2.6rem}
.cmty-label{
  font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.4rem;
}
.cmty-sub-label{
  font-size:.82rem;color:var(--muted);font-weight:400;
  margin-bottom:1.2rem;letter-spacing:0;text-transform:none;
}
.cmty-intro{
  font-size:.97rem;color:var(--muted);line-height:1.75;
  max-width:58ch;margin-top:.6rem;margin-bottom:0;
}
/* Rail: the track holds the cards plus one hidden clone, and translates by
   exactly half its width so the loop is seamless. The two rails carry their
   own animation names so they never share timing. */
.rail{overflow:hidden;padding:.4rem 0 1rem}
.rail-track{display:flex;width:max-content;animation:railA 40s linear infinite both;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform}
.rail-track-b{animation-name:railB}
.rail:hover .rail-track,.rail-track:focus-within{animation-play-state:paused}
.rail-clone{display:flex}
@keyframes railA{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes railB{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.crd{
  flex:0 0 300px;width:300px;min-width:300px;height:380px;
  margin-right:1.2rem;
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid rgba(15,5,0,.08);
  border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .35s ease,box-shadow .35s ease,background .35s ease;
}
/* Background shift and lift only. No border change on hover anywhere. */
.crd:hover{
  background:rgba(42,7,0,.04);
  transform:translateY(-3px);
  box-shadow:0 8px 32px rgba(0,0,0,.08);
}
.crd-media{height:200px;flex-shrink:0;position:relative;overflow:hidden;background:var(--bg2)}
.crd-img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.crd-ph{position:absolute;inset:0;width:100%;height:100%}
.crd-body{padding:1.1rem 1.2rem;display:flex;flex-direction:column;flex:1}
.crd-badge{
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.5rem;
}
.crd-badge-soon{color:var(--brown2)}
.crd-title{
  font-size:.95rem;font-weight:600;color:var(--dark);
  line-height:1.35;margin-bottom:.45rem;
}
.crd-desc{
  font-size:.8rem;color:var(--muted);line-height:1.6;
  margin-bottom:.8rem;flex:1;
}
.crd-more{font-size:.78rem;font-weight:600;color:var(--gold);margin-top:auto}

@media(max-width:768px){
  .cmty{padding:4rem 0}
  .crd{width:262px;height:360px}
}
/* A continuously moving rail is exactly what this setting is for. */
@media (prefers-reduced-motion: reduce){
  .rail{overflow-x:auto}
  .rail-track{animation:none}
  .rail-clone{display:none}
}

/* ─── CTA ─── */
.cta{
  position:relative;padding:8rem 0;overflow:hidden;
  background:var(--dark);
}
/* Riparo's own hero photograph rather than stock, so the section keeps its
   depth with no external request. The cocoa overlay above it keeps the
   form legible. */
.cta-bg-img{
  position:absolute;inset:0;
  background:url('assets/hero-land.jpg') center/cover no-repeat;
  opacity:.10;
}
.cta-inner{position:relative;text-align:center;max-width:600px;margin:0 auto}
.cta .eyebrow{justify-content:center;color:var(--gold2)}
.cta .eyebrow::before{background:var(--gold2)}
.cta-h{
  font-family:var(--serif);
  font-size:clamp(2.2rem,5vw,4rem);
  color:var(--white);line-height:1.1;margin-bottom:1.4rem;
}
.cta-h em{font-style:italic;color:var(--gold2)}
.cta-p{font-size:.95rem;color:rgba(255,255,255,.5);line-height:1.8;margin-bottom:2.8rem}
.cta-form{
  display:flex;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;overflow:hidden;
  max-width:420px;margin:0 auto;
}
.cta-in{
  flex:1;background:transparent;border:none;
  padding:1rem 1.4rem;color:white;
  font-size:.9rem;outline:none;font-family:var(--sans);
}
.cta-in::placeholder{color:rgba(255,255,255,.3)}
.cta-btn{
  background:var(--gold2);color:var(--dark);border:none;
  padding:.9rem 1.6rem;font-weight:700;font-size:.85rem;
  cursor:pointer;font-family:var(--sans);white-space:nowrap;
  transition:background .3s;
}
.cta-btn:hover{background:#FFB930}
.cta-note{margin-top:1.2rem;font-size:.76rem;color:rgba(255,255,255,.28)}
.cta-note span{color:var(--gold2)}

/* ─── FOOTER ─── */
footer{background:var(--gold2);padding:5rem 0 2rem}
.fg{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:4rem;margin-bottom:4rem}
/* Logo on gold: show the dark version of the logo */
.fl img{height:30px;filter:brightness(0);display:block;margin-bottom:1.1rem}
.fl p{color:rgba(15,5,0,.55);font-size:.84rem;line-height:1.75}
.fl-soc{display:flex;gap:.5rem;margin-top:1.3rem}
.soc-btn{
  width:32px;height:32px;background:rgba(15,5,0,.1);
  border:1px solid rgba(15,5,0,.15);border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(15,5,0,.55);text-decoration:none;font-size:.78rem;
  transition:all .3s;
}
.soc-btn:hover{background:var(--dark);color:var(--gold2);border-color:var(--dark)}
.fc h5{font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(15,5,0,.45);margin-bottom:1.3rem}
.fc ul{list-style:none;display:flex;flex-direction:column;gap:.65rem}
.fc a{color:rgba(15,5,0,.65);text-decoration:none;font-size:.85rem;transition:color .3s}
.fc a:hover{color:var(--dark)}
.fb{
  padding-top:2rem;border-top:1px solid rgba(15,5,0,.12);
  display:flex;justify-content:space-between;align-items:center;
}
.fb p{font-size:.76rem;color:rgba(15,5,0,.4)}
.fb span{color:var(--dark);font-weight:700}

/* ─── ANIMATIONS ─── */
.rv,.rv-l,.rv-r{opacity:0;transition:opacity .7s ease,transform .75s cubic-bezier(.22,1,.36,1)}
.rv{transform:translateY(28px)}.rv-l{transform:translateX(-28px)}.rv-r{transform:translateX(28px)}
.rv.in,.rv-l.in,.rv-r.in{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}
.d4{transition-delay:.28s}.d5{transition-delay:.35s}

/* ─── RESPONSIVE ─── */
@media(max-width:1100px){
  .nav,.nav.scrolled{padding:1rem 1.5rem}
  .wrap{padding:0 1.5rem}
  .hero-top{padding:120px 1.5rem 40px}
  .hero-search{padding:1.2rem 1.5rem;flex-wrap:wrap;gap:.8rem;max-width:100%;overflow:hidden}
  .hs-divider{display:none}
  .hs-field{min-width:calc(50% - 1.6rem)}
  .stats-row{padding:1.5rem}
  .about-grid,.why-grid{grid-template-columns:1fr;gap:3rem}
  /* About: switch from absolute to relative so text flows beneath */
  .about-pill{bottom:-1rem;left:1rem;top:auto;right:auto;transform:none}
  .fg{grid-template-columns:1fr 1fr;gap:2rem}
  /* Events: main full width top, two thumbs side by side */
}
@media(max-width:768px){
  .nav-center,.nav-link-sm{display:none}
  .hero-title{font-size:clamp(2.4rem,10vw,3rem)}
  .hero-search{border-radius:0}
  .hero-brand-strip{gap:0}
  .hbs-item{padding:0 .9rem}
  .hbs-item:first-child{padding-left:0}
  .hbs-label{font-size:.54rem}
  .hbs-value{font-size:.78rem}
  .stats-inner{flex-wrap:wrap;gap:0}
  .st{min-width:50%;border-right:none;border-bottom:1px solid rgba(15,5,0,.08);padding:.8rem}
  /* Events: stack vertically, tall enough for portrait photos */
  /* About: natural flow, no overlap */
  .fg{grid-template-columns:1fr 1fr;gap:2rem}
  .fl{grid-column:1 / -1}
  .fb{flex-direction:column;gap:.6rem;text-align:center}
}

/* ════════════════════════════════
   LOADING SCREEN — matches cream hero
════════════════════════════════ */
#rp-loader{
  position:fixed;inset:0;z-index:999999;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:2rem;
  transition:opacity .7s cubic-bezier(.4,0,.2,1),visibility .7s;
}
#rp-loader.loaded{opacity:0;visibility:hidden;pointer-events:none}
.ldr-mark{
  position:relative;
  width:72px;height:72px;
  display:flex;align-items:center;justify-content:center;
}
/* 3 concentric rings matching the logo arcs */
.ldr-ring{
  position:absolute;border-radius:50%;
  border:2px solid transparent;
  border-top-color:var(--gold);
  animation:ldrSpin 1.4s cubic-bezier(.6,0,.4,1) infinite;
}
.ldr-ring.r1{
  inset:0;
  border-top-color:var(--gold);
  animation-duration:1.2s;
}
.ldr-ring.r2{
  inset:14px;
  border-top-color:rgba(200,133,26,.5);
  animation-duration:1.6s;
  animation-direction:reverse;
}
.ldr-ring.r3{
  inset:28px;
  border-top-color:rgba(200,133,26,.25);
  animation-duration:2s;
}
.ldr-dot{
  width:10px;height:10px;
  background:var(--gold);border-radius:50%;
  animation:ldrBreath 1.4s ease-in-out infinite;
}
@keyframes ldrSpin{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
@keyframes ldrBreath{
  0%,100%{transform:scale(1);opacity:.7}
  50%{transform:scale(1.35);opacity:1}
}
.ldr-wordmark{
  font-family:var(--serif);font-style:italic;
  font-size:1.6rem;color:var(--dark);
  letter-spacing:.06em;
  animation:ldrWord 1s ease .2s both;
}
.ldr-tagline{
  font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
  /* Was -.5rem, which pulled the line up into the wordmark descenders */
  margin-top:12px;
  animation:ldrWord 1s ease .5s both;
}
@keyframes ldrWord{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

/* ════════════════════════════════
   CINEMATIC ANIMATIONS
════════════════════════════════ */

/* Image clip-path reveal */
.img-reveal{
  clip-path:inset(100% 0 0 0);
  transition:clip-path .9s cubic-bezier(.22,1,.36,1);
}
.img-reveal.in{clip-path:inset(0% 0 0 0)}

/* Scale-in for cards */
.scale-in{
  opacity:0;transform:scale(.96) translateY(20px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.22,1,.36,1);
}
.scale-in.in{opacity:1;transform:none}

/* Slide-up text lines */
.line-reveal{overflow:hidden}
.line-reveal .line-inner{
  display:block;
  transform:translateY(100%);opacity:0;
  transition:transform .75s cubic-bezier(.22,1,.36,1),opacity .5s ease;
}
.line-reveal.in .line-inner{transform:translateY(0);opacity:1}

/* Parallax wrapper */
.para-img{will-change:transform;transition:transform .1s linear}

/* Floating animation for stat cards */
@keyframes floatUp{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
.stat-card-float{animation:floatUp 4s ease-in-out infinite}
.stat-card-float:nth-child(2){animation-delay:.5s}
.stat-card-float:nth-child(3){animation-delay:1s}
.stat-card-float:nth-child(4){animation-delay:1.5s}
.stat-card-float:nth-child(5){animation-delay:2s}

/* Enhanced stagger delays for cards */
.stagger-1{transition-delay:.06s!important}
.stagger-2{transition-delay:.13s!important}
.stagger-3{transition-delay:.2s!important}

/* Shimmer on gold elements */
@keyframes shimmer{
  0%{background-position:-200% center}
  100%{background-position:200% center}
}
.gold-shimmer{
  background:linear-gradient(90deg,#C8851A 0%,#F5A623 40%,#FFD166 50%,#F5A623 60%,#C8851A 100%);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 4s linear infinite;
}

/* Magnetic button hover */
.mag-btn{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease}

/* Section divider line animation */
.line-draw{
  height:1px;background:var(--border);
  width:0;transition:width 1s cubic-bezier(.22,1,.36,1);
}
.line-draw.in{width:100%}

/* Prop card cinematic hover */

/* About images parallax wrapper */
.about-img-parallax{overflow:hidden;border-radius:var(--radius)}
.about-img-parallax img{
  transition:transform .1s linear;
  will-change:transform;
}

/* Text gradient on section headings (on hover of section) */
.section-h em{
  transition:all .4s ease;
}

/* Progress bar at top on scroll */
#scroll-bar{
  position:fixed;top:0;left:0;height:2px;width:0%;
  background:linear-gradient(90deg,#C8851A,#F5A623,#FFD166);
  z-index:9999;
  transition:width .1s linear;
  box-shadow:0 0 8px rgba(245,166,35,.5);
}

/* ══════════════════════════════════════════════════════
   ADDITIONS. Existing rules above are untouched.
   Uses only custom properties already defined at :root.
══════════════════════════════════════════════════════ */

/* Ghost button, dark-on-light. Mirrors .btn-ghost-w geometry
   exactly; only the colourway differs so it reads on light bg. */
.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--brown);padding:.83rem 1.6rem;border-radius:8px;
  font-weight:500;font-size:.88rem;text-decoration:none;
  border:1px solid rgba(61,31,10,.25);transition:all .3s;
}
.btn-ghost:hover{color:var(--dark);border-color:rgba(61,31,10,.55);background:rgba(61,31,10,.05)}

/* Image placeholders, standing in for client photography */
/* No width/height here on purpose. .why-img and .thumb-mini
   already carry explicit dimensions; a blanket height:100% would come
   later in the cascade and collapse them, since a div has none of the
   intrinsic sizing the <img> it replaced had. */
.ph-block{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--brown) 0%,var(--dark) 100%);
  overflow:hidden;
}
/* These two sit in parents that define the box, so they fill it. */
.ph-lg,.ph-md{position:absolute;inset:0;width:100%;height:100%}
.ph-mark{display:flex;color:var(--gold2);opacity:.16}

/* Placeholder frames name the file they are waiting for, so the intended
   photo is unambiguous. The <img> beside it points at that exact path and
   removes itself when the file is absent, which means dropping
   assets/<name> in makes the photo appear with no code change. */
.ph-block,.abtus-frame,.invest-frame{flex-direction:column}
.ph-name{
  margin-top:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;line-height:1;text-align:center;
  color:rgba(255,255,255,.45);
  position:relative;z-index:1;
  padding:0 .5rem;word-break:break-all;
}
.ph-real{
  position:absolute;inset:0;z-index:2;
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Thumbnails are too small for a filename to be readable. */
.ph-mini .ph-name{display:none}

/* ── 3. INVESTMENT OPPORTUNITY ─────────────────────── */
.invest{background:var(--white);padding:6rem 0 0}
.invest .wrap>.eyebrow{justify-content:flex-start}
.invest-pitch{
  font-size:1rem;line-height:1.85;color:var(--muted);
  max-width:62ch;margin-top:1.4rem;
}
.invest-cta{padding-top:2.5rem;padding-bottom:6rem;display:flex;justify-content:center}
.invest-grid{display:grid;grid-template-columns:55fr 45fr;gap:3.5rem;align-items:center}
.invest-copy{min-width:0}
.invest-frame{
  position:relative;height:420px;border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(150deg,var(--brown) 0%,var(--dark) 100%);
  display:flex;align-items:center;justify-content:center;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.invest-frame:hover{transform:scale(1.02)}
@media(max-width:1023px){
  .invest-grid{grid-template-columns:1fr;gap:2.2rem}
  .invest-frame{height:260px}
}

/* ── 4. LISTINGS button ────────────────────────────── */
.props-cta{display:flex;justify-content:center;margin-top:3rem}

/* ── 6. TESTIMONIALS ───────────────────────────────── */
.tstm{padding:7rem 0;background:var(--bg)}
.tstm-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1.6rem;margin-top:3rem;
}
.tstm-card{
  position:relative;background:var(--white);
  border-radius:var(--radius);padding:2.2rem 2rem 1.6rem;
  box-shadow:var(--card-shadow);
  display:flex;flex-direction:column;
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s;
}
.tstm-card:hover{transform:translateY(-4px);box-shadow:var(--card-hover)}

/* Gold contrast variant — Peace and Ifedada */
.tstm-card--gold{
  background:var(--gold2);
  box-shadow:0 4px 24px rgba(200,133,26,.18);
}
.tstm-card--gold .tstm-mark{color:rgba(15,5,0,.3);opacity:1}
.tstm-card--gold .tstm-quote{color:rgba(15,5,0,.82)}
.tstm-card--gold .tstm-person{border-top-color:rgba(15,5,0,.12)}
.tstm-card--gold .tstm-name{color:var(--dark)}
.tstm-card--gold .tstm-loc{color:rgba(15,5,0,.55)}
.tstm-card--gold .tstm-avatar{background:var(--dark)}
.tstm-card--gold:hover{box-shadow:0 12px 40px rgba(200,133,26,.28)}
.tstm-mark{
  position:absolute;top:.6rem;left:1.4rem;
  font-family:var(--serif);font-size:4.5rem;line-height:1;
  color:var(--gold2);opacity:.22;pointer-events:none;
}
.tstm-quote{
  position:relative;z-index:1;
  font-size:.94rem;line-height:1.85;color:var(--brown2);
  margin-bottom:1.6rem;flex:1;
}
.tstm-person{
  display:flex;align-items:center;gap:.9rem;
  padding-top:1.2rem;border-top:1px solid rgba(15,5,0,.08);
}
/* Fixed geometry so an <img class="tstm-photo"> can replace
   the initials span later without touching the layout. */
.tstm-avatar{
  width:46px;height:46px;flex-shrink:0;border-radius:50%;
  overflow:hidden;background:var(--dark);
  display:flex;align-items:center;justify-content:center;
}
.tstm-initials{
  font-size:.82rem;font-weight:700;letter-spacing:.04em;
  color:var(--gold2);
}
.tstm-photo{width:100%;height:100%;object-fit:cover}
/* Video sits below the card rail, not inside it, at every width. */
.tv-block{
  margin-top:40px;padding-top:40px;
  border-top:1px solid rgba(245,166,35,.28);
  display:flex;flex-direction:column;align-items:center;
}
.tv-eyebrow{
  font-size:.7rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem;
}
.tv-frame{
  position:relative;width:100%;max-width:680px;aspect-ratio:16/9;
  border-radius:var(--radius);overflow:hidden;
  background:var(--cocoa);line-height:0;
}
.tv-player{width:100%;height:100%;object-fit:cover;display:block;background:var(--cocoa)}
/* Overlay is the manual fallback. JS hides it once playback actually starts,
   so a browser that blocks autoplay still gives the user something to tap. */
.tv-overlay{
  position:absolute;inset:0;z-index:2;border:none;cursor:pointer;
  background:rgba(26,4,0,.42);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .3s ease;
}
.tv-overlay.is-hidden{opacity:0;pointer-events:none}
.tv-play{
  width:64px;height:64px;border-radius:50%;
  background:var(--gold2);color:var(--dark);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 28px rgba(245,166,35,.4);
  transition:transform .3s ease;
}
.tv-overlay:hover .tv-play{transform:scale(1.08)}
.tv-overlay:focus-visible{outline:2px solid var(--gold2);outline-offset:-4px}
.tstm-name{font-size:.92rem;font-weight:700;color:var(--dark)}
.tstm-loc{font-size:.78rem;color:var(--muted);margin-top:.15rem}

/* ── 7. ABOUT US ───────────────────────────────────── */
.abtus{padding:7rem 0;background:var(--bg2)}
.abtus-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:5rem;align-items:start;
}
/* A grid track's automatic minimum is its content size. The marquee track is
   max-content (~5100px), which stretched this column to match, squashed the
   paragraph to one line and pushed 93% of every element off-screen, so the
   reveal observer never reached its 0.1 threshold and the text stayed at
   opacity 0. min-width:0 lets the track shrink to the viewport. */
.abtus-grid > *{min-width:0}
.abtus-marquee{max-width:100%;overflow:hidden}
.abtus-body{
  font-size:1rem;line-height:1.85;color:var(--muted);margin-top:1.5rem;
}
.abtus-media{display:flex;flex-direction:column;gap:20px}
.abtus-row{display:flex;gap:20px;align-items:flex-start}
.abtus-frame{
  position:relative;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(150deg,var(--brown) 0%,var(--dark) 100%);
  display:flex;align-items:center;justify-content:center;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
/* Cocoa wash keeps future photography inside the brand palette */
.abtus-frame::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(160deg,rgba(61,31,10,.18) 0%,rgba(15,5,0,.32) 100%);
}
.abtus-frame:hover{transform:scale(1.02)}
.abtus-anchor{
  width:100%;height:320px;
  border:1px solid rgba(245,166,35,.28);
}
/* Vertical offsets are what stop this reading as a flat grid. The row uses
   align-items:flex-start so a margin actually shifts one frame against the
   other instead of both stretching to equal height. */
.abtus-wide{width:48%;height:200px}
.abtus-rise{margin-top:28px}

/* Frames under the left text column */
.abtus-textrow{margin-top:40px}
.abtus-l55{width:55%;height:180px}
.abtus-l42{width:42%;height:180px}
.abtus-rise24{margin-top:-24px}
.abtus-mark{position:relative;z-index:1;display:flex;color:var(--gold2);opacity:.18}
/* Real photograph in a frame. The ::after cocoa wash still sits above it,
   so the image reads inside the brand palette like the placeholders do. */
.abtus-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.abtus-has-img{background:var(--dark)}

/* ── 8. FOUNDERS ───────────────────────────────────── */
/* Two equal square blocks. Identical geometry on both, since unequal
   frames implied one founder outranked the other. Photo sits over the
   initials so the fallback survives a missing file. */
/* Left column: one portrait frame carrying both founders. */
.fd-portrait{
  position:relative;width:100%;aspect-ratio:4/5;
  border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(150deg,var(--brown) 0%,var(--dark) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.fd-portrait .ph-real{object-position:top center}

/* Right column: the two headshots, under the copy and press line. */
.fd-cards{display:flex;gap:16px;margin-top:1.8rem;padding-top:1.8rem;
  border-top:1px solid rgba(255,255,255,.1)}
.fd-card{
  flex:1;min-width:0;display:flex;align-items:center;gap:.8rem;
  background:rgba(255,255,255,.05);
  border-radius:10px;padding:.9rem 1rem;
}
.fd-thumb{
  position:relative;width:72px;height:72px;flex-shrink:0;
  border-radius:8px;overflow:hidden;background:var(--gold2);
  display:flex;align-items:center;justify-content:center;
}
.fd-initials{
  font-family:var(--sans);font-weight:700;
  font-size:1.1rem;color:var(--dark);position:relative;z-index:0;
}
.fd-thumb img{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:cover;object-position:top center;
}
.fd-info{min-width:0}
.fd-nameline{display:flex;align-items:center;gap:.4rem}
.fd-name{font-size:14px;font-weight:600;color:var(--bg)}
.fd-role{font-size:12px;color:rgba(255,255,255,.42);margin-top:.2rem;line-height:1.4}

/* Sits below both blocks rather than overlapping a frame. */
.fd-pill{
  position:static;margin:1.8rem auto 0;
  display:inline-flex;align-items:baseline;gap:.4rem;
  width:auto;text-align:center;
}
.f-li{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  color:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.2);
  transition:color .3s,border-color .3s,background .3s;
}
.f-li:hover{color:var(--gold2);border-color:var(--gold2);background:rgba(245,166,35,.1)}
/* Collapses cleanly while bio copy is outstanding */

/* ── NAV: Verify Staff ─────────────────────────────── */
/* Kept live: the 7 preserved verify pages still use this in their own nav. */
.nav-verify{display:inline-flex;align-items:center;gap:.35rem}
.nav-verify svg{flex-shrink:0}

/* VERIFY HIDDEN: homepage verify section. Re-enable by removing this @media wrapper. */
@media not all {
  /* ── VERIFY STAFF SECTION ──────────────────────────── */
  .vfy{padding:7rem 0;background:var(--dark)}
  .vfy-grid{display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}
  .vfy-copy{min-width:0}
  .vfy .section-h{color:#fff}
  .vfy-body{
    font-size:1rem;line-height:1.85;
    color:rgba(255,255,255,.55);margin-top:1.4rem;max-width:56ch;
  }
  .vfy-points{margin-top:2rem;margin-bottom:2.2rem}
  .vfy-point{
    display:flex;align-items:center;gap:.9rem;
    padding:1rem 0;font-size:.92rem;color:rgba(255,255,255,.78);
    border-bottom:1px solid rgba(255,255,255,.09);
  }
  .vfy-point:first-child{border-top:1px solid rgba(255,255,255,.09)}
  .vfy-ico{display:flex;color:var(--gold2);flex-shrink:0}
  .vfy-btn{align-self:flex-start}

  /* Mockup of a verification result. Static, filler content only. */
  .vfy-demo{display:flex;flex-direction:column;align-items:center}
  .vfy-card{
    width:100%;max-width:380px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.12);
    border-radius:var(--radius);padding:1.6rem;
  }
  .vfy-pill{
    display:inline-flex;align-items:center;gap:.4rem;
    background:rgba(37,211,102,.13);color:#3ddc84;
    border:1px solid rgba(37,211,102,.32);
    padding:.4rem .9rem;border-radius:999px;
    font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    margin-bottom:1.3rem;
  }
  .vfy-person{display:flex;align-items:center;gap:.9rem;margin-bottom:1.3rem}
  .vfy-avatar{
    width:52px;height:52px;border-radius:10px;flex-shrink:0;
    background:linear-gradient(150deg,var(--brown) 0%,var(--dark) 100%);
    border:1px solid rgba(255,255,255,.1);
  }
  .vfy-name{font-size:.95rem;font-weight:600;color:var(--bg)}
  .vfy-role{font-size:.8rem;color:rgba(255,255,255,.42);margin-top:.15rem}
  .vfy-lines{display:flex;flex-direction:column;gap:.6rem}
  .vfy-line{height:9px;border-radius:4px;background:rgba(255,255,255,.09)}
  .vfy-line.short{width:62%}
  .vfy-caption{
    margin-top:.9rem;font-size:12px;
    color:rgba(255,255,255,.35);text-align:center;
  }

  @media(max-width:1023px){
    .vfy-grid{grid-template-columns:1fr;gap:2.6rem}
    .vfy-card{max-width:100%}
  }
  @media(max-width:768px){
    .vfy{padding:4rem 0}
  }
}

/* ── WhatsApp ──────────────────────────────────────── */
/* Matches the .cta-note line beneath the form. */
.cta-wa-line{margin-top:1rem;font-size:13px}
.cta-wa-line a{
  color:var(--gold2);text-decoration:none;
  border-bottom:1px solid rgba(245,166,35,.3);
  padding-bottom:1px;transition:color .25s,border-color .25s;
}
.cta-wa-line a:hover{color:#FFD166;border-color:#FFD166}

.wa-float{
  position:fixed;bottom:24px;right:24px;z-index:999;
  width:52px;height:52px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(37,211,102,.4);
  transition:transform .25s ease,box-shadow .25s ease;
}
.wa-float:hover{transform:scale(1.08);box-shadow:0 6px 22px rgba(37,211,102,.55)}
.wa-float:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}

/* ── Focus states for new interactive elements ─────── */
.btn-ghost:focus-visible,
.props-cta .btn-gold:focus-visible,
.f-li:focus-visible,
.soc-btn:focus-visible{
  outline:2px solid var(--gold2);
  outline-offset:3px;
}

/* ── Responsive ────────────────────────────────────── */
@media(max-width:1024px){
  .abtus-grid{gap:3rem}
  .tstm-grid{gap:1.2rem}
}

@media(max-width:900px){
  .abtus-grid{grid-template-columns:1fr;gap:2.5rem}
  .abtus-media{max-width:520px}
}

@media(max-width:768px){
  .invest{padding-top:4rem}
  .invest-cta{padding-bottom:4rem}
  .tstm,.abtus{padding:4rem 0}

  /* Horizontal rail with snap points, per spec */
  .tstm-scroll{
    overflow-x:auto;margin:0 -1.5rem;padding:0 1.5rem .5rem;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .tstm-scroll::-webkit-scrollbar{display:none}
  .tstm-grid{
    grid-template-columns:none;
    grid-auto-flow:column;grid-auto-columns:calc(100vw - 48px);
    gap:1rem;margin-top:2rem;
  }
  .tstm-card{scroll-snap-align:start;max-width:calc(100vw - 48px)}
  /* In the rail the video card is one more item, not a full-width row. */
  .tstm-video{grid-column:auto;padding:1.2rem}
  .tv-player{max-height:220px}

  /* All five frames stack full width, in source order. Staggering only
     reads as intentional when the frames sit side by side. */
  .abtus-row{flex-direction:column;gap:20px}
  .abtus-wide,.abtus-l55,.abtus-l42{width:100%}
  .abtus-rise,.abtus-rise24{margin-top:0}
  /* about-04 and about-05 belong to the desktop staggered grid. On mobile the
     marquee is the only imagery, so these two do not render at all. */
  .abtus-textrow{display:none}

  /* Headshot cards stack once 72px photo plus name no longer fits in half
     a 375px viewport. The portrait frame above stays full width. */
  .fd-cards{flex-direction:column;gap:12px}
  .fd-name{font-size:13px}
  .fd-role{font-size:11px}

  .props-cta{margin-top:2rem}
  .wa-float{bottom:16px;right:16px}
}

@media(max-width:420px){
  .tstm-grid{grid-auto-columns:calc(100vw - 48px)}
  .abtus-row{gap:12px}
  .abtus-media{gap:12px}
}

/* ── Reduced motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .tstm-card,.abtus-frame,.btn-ghost,.f-li,.wa-float{transition:none}
  .tstm-card:hover,.abtus-frame:hover,.wa-float:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════
   SUBPAGES (estates, events, news)
   Shares every token above. Nav and footer are identical to index.
═══════════════════════════════════════════════════════ */
.sub-hero{
  position:relative;height:480px;margin-top:0;
  background:linear-gradient(150deg,var(--brown) 0%,var(--dark) 100%);
  overflow:hidden;display:flex;align-items:flex-end;
}
.sub-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.sub-hero::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(26,4,0,.92) 0%,rgba(26,4,0,.35) 55%,rgba(26,4,0,.55) 100%);
}
.sub-hero-inner{position:relative;z-index:2;width:100%;max-width:1300px;margin:0 auto;padding:0 3rem 3rem}
.sub-hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.1;color:#fff;margin-top:.8rem;
}
.sub-hero .prop-chip{position:static;display:inline-block}
.sub-main{background:var(--bg);padding:4rem 0 5rem}
.sub-nav-back{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.85rem;font-weight:600;color:var(--brown2);
  text-decoration:none;margin-bottom:2rem;
}
.sub-nav-back:hover{color:var(--gold)}
.sub-cols{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.sub-panel{
  background:var(--white);border-radius:var(--radius);
  padding:1.8rem;box-shadow:var(--card-shadow);
}
.sub-row{padding:.85rem 0;border-bottom:1px solid rgba(15,5,0,.07);display:flex;flex-direction:column;gap:.25rem}
.sub-row:last-of-type{border-bottom:none}
.sub-k{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sub-v{font-size:.95rem;color:var(--dark);font-weight:500;line-height:1.6}
.sub-price-tbl{display:flex;flex-direction:column;gap:.45rem;margin-top:.3rem}
.sub-price-row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.sub-price-row span:first-child{font-size:.88rem;color:var(--muted)}
.sub-price-row span:last-child{font-family:var(--serif);font-size:1.1rem;color:var(--dark)}
.sub-desc h2{font-family:var(--serif);font-weight:400;font-size:2rem;color:var(--dark);margin-bottom:1rem;line-height:1.2}
.sub-desc p{font-size:.98rem;line-height:1.9;color:var(--muted)}
.sub-wide{margin-top:4rem}
.sub-wide h2{font-family:var(--serif);font-weight:400;font-size:1.8rem;color:var(--dark);margin-bottom:1.4rem}
.sub-pdf{width:100%;height:700px;border:none;border-radius:12px;background:var(--bg2)}
.sub-dl{display:inline-block;margin-top:1rem;font-size:.86rem;color:var(--gold);font-weight:600}
.sub-dl:hover{text-decoration:underline}
.sub-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.6rem}
.sub-gallery img{width:100%;height:260px;object-fit:cover;object-position:top center;border-radius:var(--radius);display:block}
.sub-article{max-width:760px;margin:0 auto}
.sub-article .sub-meta{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.sub-article h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.15;color:var(--dark);margin-bottom:1.2rem}
.sub-article p{font-size:1rem;line-height:1.9;color:var(--muted);margin-bottom:1.2rem}
.sub-cta-box{
  margin-top:2.5rem;padding:1.8rem;border-radius:var(--radius);
  background:var(--white);box-shadow:var(--card-shadow);
}
.sub-cta-box p{margin-bottom:1rem;color:var(--brown2);font-size:.95rem}
.sub-form{display:flex;flex-direction:column;gap:.8rem;max-width:420px}
.sub-form input{
  width:100%;padding:.85rem 1rem;border-radius:8px;
  border:1px solid rgba(15,5,0,.12);background:var(--bg);
  font-family:var(--sans);font-size:.9rem;color:var(--dark);
}
.sub-form input:focus{outline:2px solid var(--gold2);outline-offset:1px;border-color:var(--gold2)}
.sub-form button{border:none;cursor:pointer;font-family:var(--sans);justify-content:center}

@media(max-width:900px){
  .sub-cols{grid-template-columns:1fr;gap:2.4rem}
  .sub-gallery{grid-template-columns:1fr}
  .sub-hero{height:360px}
  .sub-hero-inner{padding:0 1.5rem 2rem}
  .sub-pdf{height:520px}
}

/* ═══════════════════════════════════════════════════════
   ABOUT MARQUEE (mobile only)
   Desktop keeps the staggered 5-frame grid untouched.
═══════════════════════════════════════════════════════ */
.abtus-marquee{display:none}
.mq-row{overflow:hidden;max-width:100%}
.mq-row + .mq-row{margin-top:10px}
.mq-track{display:flex;gap:10px;width:max-content;animation:mqLeft 30s linear infinite both;will-change:transform}
.mq-track-rev{animation:mqRight 36s linear infinite both}
.mq-row:hover .mq-track{animation-play-state:paused}
.mq-tile{
  position:relative;flex:0 0 160px;width:160px;min-width:160px;height:120px;
  border-radius:10px;overflow:hidden;
  background:linear-gradient(150deg,var(--brown) 0%,var(--dark) 100%);
}
.mq-tile img{width:100%;height:100%;object-fit:cover;display:block}
/* Keeps unloaded tiles inside the brand palette. */
.mq-tile::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(61,31,10,.3) 0%,rgba(15,5,0,.3) 100%);
  opacity:.3;
}
@keyframes mqLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}

@media(max-width:768px){
  /* Swap the stacked frames for the two-row marquee. */
  .abtus-media{display:none}
  .abtus-marquee{
    display:block;
    /* Full bleed. max-width:100% from the base rule resolves against the
       padded .wrap and would clamp 100vw straight back to 342px. */
    width:100vw;max-width:none;
    margin-left:calc(-50vw + 50%);overflow:hidden;
  }
  /* Testimonial rail: card is viewport minus 32px each side, so the next
     card peeks and signals that the rail scrolls. */

  .tv-block{margin-top:32px;padding-top:32px}
}

@media (prefers-reduced-motion: reduce){
  .mq-row{overflow:visible}
  .mq-track{animation:none;flex-wrap:wrap;width:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .mq-track .mq-tile:nth-child(n+5){display:none}
  .mq-tile{width:100%}
  .mq-row + .mq-row{display:none}
}

/* ═══════════════════════════════════════════════════════
   MOBILE MENU
═══════════════════════════════════════════════════════ */
.nav-burger{
  display:none;background:transparent;border:none;cursor:pointer;
  width:24px;height:18px;padding:0;position:relative;flex-shrink:0;
}
.nav-burger span{
  position:absolute;left:0;width:24px;height:2px;border-radius:2px;
  background:var(--brown);transition:transform .3s ease,opacity .3s ease,top .3s ease;
}
.nav-burger span:nth-child(1){top:0}
.nav-burger span:nth-child(2){top:8px}
.nav-burger span:nth-child(3){top:16px}
.nav-burger.is-open span:nth-child(1){top:8px;transform:rotate(45deg)}
.nav-burger.is-open span:nth-child(2){opacity:0}
.nav-burger.is-open span:nth-child(3){top:8px;transform:rotate(-45deg)}
/* Hero is now cream, so burger bars stay dark at all scroll positions. */
.nav:not(.scrolled) .nav-burger span{background:var(--brown)}

.nav-overlay{
  position:fixed;inset:0;z-index:900;
  background:rgba(15,5,0,.97);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
}
.nav-overlay.is-open{opacity:1;visibility:visible}
.nav-overlay-links{
  list-style:none;display:flex;flex-direction:column;
  align-items:center;text-align:center;
}
.nav-overlay-links a{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  font-size:clamp(24px,5vw,32px);line-height:48px;
  color:var(--bg);text-decoration:none;transition:color .25s ease;
}
.nav-overlay-links a:hover{color:var(--gold2)}
.nav-overlay .nav-btn{margin-top:1.6rem;font-size:.95rem;padding:.85rem 2rem}
.nav-close{
  position:absolute;top:1.4rem;right:1.4rem;
  width:40px;height:40px;border-radius:50%;
  background:transparent;border:1px solid rgba(255,255,255,.22);
  color:var(--bg);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,border-color .25s ease;
}
.nav-close:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.nav-burger:focus-visible,.nav-close:focus-visible,
.nav-overlay-links a:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}

@media(max-width:1023px){
  .nav-burger{display:block}
  .nav-right .nav-link-sm,.nav-right .nav-btn{display:none}
}

@media (prefers-reduced-motion: reduce){
  .nav-burger span{transition:opacity .01ms}
  .nav-burger.is-open span:nth-child(1),
  .nav-burger.is-open span:nth-child(3){transform:none;top:0}
  .nav-burger.is-open span:nth-child(1){top:0}
  .nav-burger.is-open span:nth-child(3){top:16px}
  .nav-overlay{transition:none}
}

/* ═══════════════════════════════════════════════════════
   VERIFY PAGES (verify.html + verify/*.html)
   Prefixed vr- so nothing collides with the dark .vfy-*
   mockup on the homepage.
═══════════════════════════════════════════════════════ */
.vr-page{background:var(--bg);min-height:100vh;padding:9rem 0 5rem}
.wrap-narrow{max-width:760px}
.vr-head{margin-bottom:2.4rem}
.vr-h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2rem,5vw,3.2rem);line-height:1.12;
  color:var(--dark);margin-bottom:1rem;
}
.vr-h1 em{font-style:italic;color:var(--gold)}
.vr-lede{font-size:1rem;line-height:1.85;color:var(--muted);max-width:62ch}

.vr-search{margin-bottom:2rem}
.vr-label{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.55rem;
}
.vr-input{
  width:100%;padding:1rem 1.1rem;border-radius:10px;
  border:1px solid rgba(15,5,0,.1);background:var(--white);
  box-shadow:var(--card-shadow);
  font-family:var(--sans);font-size:1rem;color:var(--dark);
  transition:border-color .2s,box-shadow .2s;
}
.vr-input:focus{outline:none;border-color:var(--gold2);box-shadow:0 0 0 3px rgba(245,166,35,.2)}
.vr-hint{font-size:.78rem;color:var(--muted);margin-top:.5rem}
.vr-results{display:flex;flex-direction:column;gap:1.4rem;margin-bottom:2.4rem}

/* No accent stripe. The badge is the signal; the card carries a faint
   tint and an all-round hairline instead of a coloured left bar. */
.vr-card{
  background:var(--white);border-radius:var(--radius);
  padding:1.8rem;box-shadow:var(--card-shadow);
  border:1px solid rgba(15,5,0,.07);
}
.vr-ok{background:rgba(34,197,94,.04);border-color:rgba(34,197,94,.15)}
.vr-bad{background:rgba(239,68,68,.04);border-color:rgba(239,68,68,.15)}
.vr-pending{background:rgba(245,158,11,.04);border-color:rgba(245,158,11,.15)}
.vr-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1.1rem;border-radius:999px;margin-bottom:1.3rem;
  font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.vr-badge-ok{background:rgba(21,128,61,.09);color:#15803D;border:1px solid rgba(21,128,61,.3)}
.vr-badge-bad{background:rgba(185,28,28,.07);color:#B91C1C;border:1px solid rgba(185,28,28,.28)}

.vr-person{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.3rem}
.vr-avatar{
  position:relative;width:88px;height:88px;flex-shrink:0;
  border-radius:12px;overflow:hidden;background:var(--cocoa);
  display:flex;align-items:center;justify-content:center;
}
.vr-initials{font-family:var(--sans);font-weight:700;font-size:1.4rem;color:var(--gold2);position:relative;z-index:0}
.vr-avatar img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top center}
.vr-name{font-family:var(--serif);font-weight:400;font-size:1.7rem;line-height:1.15;color:var(--dark)}
.vr-role{font-size:.92rem;font-weight:600;color:var(--gold);margin-top:.2rem}
.vr-since{font-size:.8rem;color:var(--muted);margin-top:.45rem}

.vr-contact{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  padding:1.2rem;border-radius:10px;background:var(--bg);margin-bottom:1.2rem;
}
.vr-contact dt{
  font-size:.66rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.35rem;
}
.vr-contact dd{font-size:.95rem;font-weight:600;color:var(--dark);overflow-wrap:anywhere}
.vr-contact a{color:inherit;text-decoration:none}
.vr-contact a:hover{color:var(--gold);text-decoration:underline}
.vr-note{
  font-size:.83rem;line-height:1.7;color:var(--brown2);
  padding:.9rem 1.1rem;border-radius:8px;
  background:var(--gold-bg);border:1px solid rgba(245,166,35,.22);
}
.vr-headline{font-family:var(--serif);font-size:1.4rem;color:var(--dark);margin-bottom:.8rem;line-height:1.3}
.vr-official{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid rgba(15,5,0,.08)}
.vr-official h3{
  font-size:.66rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.8rem;
}
.vr-official ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.vr-official a{font-size:.92rem;color:var(--dark);text-decoration:none;font-weight:600}
.vr-official a:hover{color:var(--gold);text-decoration:underline}
.vr-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-top:1.4rem}
.vr-profile-link{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.84rem;font-weight:600;color:var(--brown);text-decoration:none;
  padding:.6rem 1.1rem;border:1px solid rgba(61,31,10,.2);border-radius:8px;
  transition:background .22s,color .22s,border-color .22s;
}
.vr-profile-link:hover{background:var(--cocoa);border-color:var(--cocoa);color:var(--gold2)}
.copy-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--dark);color:var(--white);border:none;
  padding:.65rem 1.3rem;border-radius:8px;cursor:pointer;
  font-family:var(--sans);font-size:.84rem;font-weight:600;
  transition:background .25s,transform .25s;
}
.copy-btn:hover{background:var(--brown);transform:translateY(-1px)}
.verify-search-link{
  font-size:.86rem;font-weight:600;color:var(--brown);text-decoration:none;
  padding:.65rem 1.2rem;border:1px solid rgba(61,31,10,.22);border-radius:8px;
}
.verify-search-link:hover{background:var(--cocoa);border-color:var(--cocoa);color:var(--gold2)}
/* No vertical accent bar. The tinted panel carries it on its own. */
.verify-warn{
  margin-top:2rem;padding:1.2rem 1.4rem;border-radius:10px;
  background:var(--gold-bg);
  font-size:.88rem;line-height:1.75;color:var(--brown2);
}
.verify-warn strong{color:var(--dark)}
.verify-warn a{color:var(--brown);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.vc-wa{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#25D366;color:#0A2E17;text-decoration:none;
  padding:.7rem 1.3rem;border-radius:8px;font-size:.86rem;font-weight:700;
  transition:filter .25s,transform .25s;
}
.vc-wa:hover{filter:brightness(1.06);transform:translateY(-1px)}

/* Individual profile page */
.vr-profile{background:var(--bg);min-height:100vh}
.vr-hero{
  padding:9rem 1.5rem 2.8rem;color:#fff;
  background:linear-gradient(160deg,#0B4A2E 0%,#15803D 100%);
}
.vr-hero-inner{max-width:760px;margin:0 auto}
.vr-hero .vr-badge{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.34)}
.vr-hero .vr-person{margin-bottom:0}
.vr-photo{
  position:relative;width:120px;height:120px;flex-shrink:0;
  border-radius:16px;overflow:hidden;background:rgba(255,255,255,.12);
  border:3px solid rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;
}
.vr-photo .vr-initials{color:#fff;font-size:2rem}
.vr-photo img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top center}
.vr-hero .vr-name{color:#fff;font-size:clamp(1.8rem,5vw,2.6rem)}
.vr-hero .vr-role{color:rgba(255,255,255,.85)}
.vr-hero .vr-since{color:rgba(255,255,255,.62)}
.vr-body{padding:2.5rem 0 5rem}
.vr-block-title{
  font-size:.66rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:1rem;
}

@media(max-width:768px){
  .vr-page{padding:7rem 0 3.5rem}
  .vr-card{padding:1.4rem}
  .vr-person{flex-direction:column;align-items:flex-start;gap:1rem}
  .vr-contact{grid-template-columns:1fr;gap:.9rem}
  .vr-hero{padding:7rem 1.25rem 2.2rem}
  .vr-photo{width:96px;height:96px}
  .vr-actions{flex-direction:column;align-items:stretch}
  .copy-btn,.verify-search-link{justify-content:center;text-align:center}
}

/* ═══════════════════════════════════════════════════════
   PRESS LINK — BusinessDay inline link in the about section
═══════════════════════════════════════════════════════ */
.press-link{
  color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.3);
  padding-bottom:1px;transition:border-color .25s,color .25s;
}
.press-link:hover{color:var(--gold2);border-color:var(--gold2)}

/* ═══════════════════════════════════════════════════════
   VIDEO LANDSCAPE PLAYER + LIGHTBOX
═══════════════════════════════════════════════════════ */
/* Lightbox — desktop only */
.tv-lightbox{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;
}
/* JS sets style.display to none/flex — no [hidden] override needed */
.tv-lb-backdrop{
  position:absolute;inset:0;
  background:rgba(10,2,0,.88);
  backdrop-filter:blur(12px);
  cursor:pointer;
}
.tv-lb-inner{
  position:relative;z-index:1;
  /* Portrait reel proportions */
  width:min(360px, 92vw);
  aspect-ratio:9/16;
  border-radius:20px;overflow:hidden;
  background:#000;
  box-shadow:0 24px 80px rgba(0,0,0,.6);
}
.tv-lb-vid{
  width:100%;height:100%;
  object-fit:cover;display:block;
  background:#000;
}
.tv-lb-close{
  position:absolute;top:-48px;right:0;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s;z-index:2;
}
.tv-lb-close:hover{background:rgba(255,255,255,.22)}
.tv-lb-close:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}

/* ═══════════════════════════════════════════════════════
   VISION · MISSION · VALUES
   Alternating zigzag layout. Cream + gold palette.
   Spiral fading rings sit in the background.
═══════════════════════════════════════════════════════ */
.vmv{
  position:relative;
  padding:8rem 0;
  background:var(--bg);
  overflow:hidden;
}

/* Background spirals — pure SVG, no slop */
.vmv-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  overflow:hidden;
}
.vmv-spiral{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:min(900px,110vw);height:min(900px,110vw);
  animation:vmvSpin 80s linear infinite;
}
.vmv-spiral-2{
  position:absolute;top:20%;right:-10%;
  transform:none;left:auto;
  width:min(600px,70vw);height:min(600px,70vw);
  animation:vmvSpin 120s linear infinite reverse;
}
@keyframes vmvSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Each row is a zigzag pair */
.vmv-row{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:center;
  padding:5rem 0;
  border-bottom:1px solid rgba(200,133,26,.1);
}
.vmv-row:last-child{border-bottom:none}
/* Flip: text left, image right */
.vmv-row--flip .vmv-text-col{order:1}
.vmv-row--flip .vmv-img-col{order:2}

.vmv-label{
  font-size:.65rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:1rem;
}
.vmv-heading{
  font-family:var(--serif);
  font-size:clamp(1.9rem,3.5vw,3rem);
  font-weight:500;line-height:1.15;
  color:var(--dark);margin-bottom:1.4rem;
  letter-spacing:-.01em;
}
.vmv-heading em{font-style:italic;color:var(--gold)}
.vmv-body{
  font-size:1rem;line-height:1.85;color:var(--muted);max-width:52ch;
}

/* Image frames — three distinct styles for variety */
.vmv-img-frame{
  position:relative;width:100%;aspect-ratio:16/9;
  border-radius:18px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;
}
.vmv-img-gold{background:linear-gradient(145deg,var(--gold) 0%,var(--gold2) 100%)}
.vmv-img-cream{background:var(--bg2);border:1px solid rgba(200,133,26,.2)}
.vmv-img-dark{background:linear-gradient(145deg,var(--dark2) 0%,var(--brown) 100%)}
.vmv-img-frame .ph-mark{opacity:.2}

/* Core Values list */
.vmv-values{display:flex;flex-direction:column;gap:0;margin-top:1.6rem}
.vmv-value-item{
  display:flex;gap:1.2rem;align-items:flex-start;
  padding:1.1rem 0;
  border-bottom:1px solid rgba(15,5,0,.07);
}
.vmv-value-item:last-child{border-bottom:none}
.vmv-val-num{
  font-family:var(--serif);font-size:1.4rem;font-style:italic;
  color:var(--gold);line-height:1;flex-shrink:0;min-width:2rem;
}
.vmv-val-title{font-size:.9rem;font-weight:600;color:var(--dark);margin-bottom:.2rem}
.vmv-val-desc{font-size:.84rem;color:var(--muted);line-height:1.65}

/* Responsive */
@media(max-width:1023px){
  .vmv-row,.vmv-row--flip{
    grid-template-columns:1fr;gap:2.8rem;
    padding:3.5rem 0;
  }
  .vmv-row--flip .vmv-text-col{order:2}
  .vmv-row--flip .vmv-img-col{order:1}
  .vmv-img-frame{aspect-ratio:16/9;border-radius:14px}
  .vmv{padding:5rem 0}
}
@media(max-width:768px){
  .vmv-spiral{width:140vw;height:140vw}
  .vmv-spiral-2{display:none}
}

/* ═════════════════════════════════════════════════════
   HERO ORBITAL CAROUSEL
   Two columns from 1024 up: copy and CTAs left, composition right.
   The composition is a tinted disc bleeding off the right edge, one
   large anchored image inside it, and small circular thumbnails
   riding an invisible arc around its top, left and bottom.
   Every position is written by JS. No perspective, no rotateY,
   no keyframes on the thumbnails, no drawn path.
═════════════════════════════════════════════════════ */
.hero-grid{
  position:relative;z-index:2;
  width:100%;max-width:1300px;margin:0 auto;
}
.hero-left{min-width:0;position:relative;z-index:2}
.hero-right{
  position:relative;width:100%;
  height:380px;margin:40px 0 24px;
}
.hero-orbital-wrap{
  position:relative;width:100%;height:100%;
  pointer-events:none;z-index:1;
  /* The mobile arc is wider than its column, so it must not clip */
  overflow:visible;
}
#heroOrbitalStage{position:absolute;inset:0;overflow:visible}

/* Tinted disc. Height drives the circle, aspect-ratio squares it, and
   the hero's own overflow clips it where it runs past the right edge. */
.orb-disc{
  position:absolute;border-radius:50%;
  background:var(--bg2);
  height:max(80%,55vw);aspect-ratio:1/1;
  left:82%;top:50%;transform:translate(-50%,-50%);
}
/* Travelling thumbnails. left, top, width, height, opacity and
   z-index are written by JS every frame. */
/* border-radius, left, top, width, height, opacity and z-index are
   all written by JS every frame. Only the ring and shadow are CSS. */
.orb-img{
  position:absolute;overflow:hidden;
  background:var(--bg2);
  border:3px solid var(--white);
  box-shadow:0 10px 26px rgba(15,5,0,.16);
}
.orb-img img{
  width:100%;height:100%;
  object-fit:cover;display:block;pointer-events:none;
}

@media(min-width:1024px){
  .hero-grid{
    display:grid;grid-template-columns:42fr 58fr;
    gap:2rem;align-items:center;
    padding:130px 3rem 60px;min-height:700px;
  }
  .hero-left{display:flex;flex-direction:column;align-items:flex-start}
  .hero-top{padding:0;text-align:left;align-items:flex-start}
  .hero-title{margin-left:0;margin-right:0}
  .hero-sub{margin-left:0;margin-right:0}
  .hero-actions{justify-content:flex-start;padding:28px 0 0}
  /* The wrap covers the whole hero so the disc can bleed off its
     right edge. Static cell, so inset resolves against .hero. */
  .hero-right{position:static;height:auto;margin:0}
  .hero-orbital-wrap{position:absolute;inset:0}
  .orb-disc{height:92%;left:95%;top:47%}
}

/* ── MOBILE (below 768) ──────────────────────────────────
   Headline and description run full width, then the two CTAs sit in
   a left column beside the carousel rather than above it. .hero-left
   is display:contents so its two children become grid items directly,
   which keeps the desktop DOM and the desktop rules untouched. */
@media(max-width:768px){
  .hero-grid{
    display:grid;
    grid-template-columns:44% 1fr;
    gap:12px;align-items:center;
    /* Left/right padding here, top padding on .hero-top so the
       headline still clears the fixed nav. */
    padding:0 20px 20px;
  }
  .hero-left{display:contents}
  .hero-top{
    grid-column:1 / -1;grid-row:1;
    padding:100px 0 0;text-align:center;align-items:center;
  }
  .hero-actions{
    grid-column:1;grid-row:2;
    flex-direction:column;align-items:stretch;
    gap:10px;padding:0;margin-top:16px;
  }
  .hero-actions .btn-gold,
  .hero-actions .btn-ghost-w{
    width:100%;justify-content:center;text-align:center;
    white-space:nowrap;font-size:.85rem;padding:12px 10px;
  }
  .hero-right{
    grid-column:2;grid-row:2;
    height:280px;margin:16px 0 0;
    min-width:0;
  }
}
/* Continuous motion is exactly what this setting is for. JS parks a
   single image at the focal point and never starts the frame loop. */
@media (prefers-reduced-motion: reduce){
  .orb-img{transition:none}
}

/* === TEAM SECTION === */
/* Editorial portrait grid. The photo is the card: no background, no
   border, no accent bar. A dark gradient sits in the bottom 40% so the
   name and role stay legible over any portrait. */
.team-section{padding:80px 0;background:var(--bg)}
.team-intro{
  font-size:.9rem;color:var(--muted);line-height:1.8;
  max-width:52ch;margin-top:.7rem;margin-bottom:2.5rem;
  font-weight:300;
}
.team-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.tm-card{
  position:relative;display:block;overflow:hidden;
  border-radius:12px;text-decoration:none;
  height:380px;
  background:var(--bg2);
  transition:transform .3s ease;
}
.tm-card:hover{transform:scale(1.025)}
.tm-photo-wrap{position:absolute;inset:0}

.tm-photo{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:top center;
  display:block;
}
/* Bottom 40% only, fading upward to nothing */
.tm-overlay{
  position:absolute;left:0;right:0;bottom:0;
  height:40%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.1rem 1.1rem 1.2rem;
  background:linear-gradient(to top,rgba(42,7,0,.88) 0%,rgba(42,7,0,0) 55%);
  transition:background .3s ease;
}
.tm-card:hover .tm-overlay{
  background:linear-gradient(to top,rgba(42,7,0,.95) 0%,rgba(42,7,0,.1) 55%);
}
.tm-badge{
  align-self:flex-start;
  background:#F8C000;color:var(--dark);
  font-family:var(--sans);font-size:.62rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:999px;
  margin-bottom:.5rem;
}
.tm-name{
  font-family:var(--serif);font-weight:600;
  font-size:1rem;line-height:1.25;color:#fff;
  letter-spacing:-.01em;
}
.tm-role{
  font-size:.72rem;font-weight:600;color:#F8C000;
  letter-spacing:.07em;text-transform:uppercase;
  margin-top:.3rem;line-height:1.4;
}

/* Tablet */
@media(max-width:1023px){
  .tm-card{height:320px}
}
/* Mobile */
@media(max-width:767px){
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .tm-card{height:260px}
  .tm-overlay{padding:.85rem .8rem .9rem}
  .tm-name{font-size:.95rem}
  .tm-role{font-size:.62rem;letter-spacing:.06em}
  .tm-badge{font-size:.55rem;padding:.22rem .5rem}
}
@media (prefers-reduced-motion: reduce){
  .tm-card{transition:none}
  .tm-card:hover{transform:none}
}


/* ═══════════════════════════════════════════════════════
   $50K PREMIUM POLISH — surgical refinements
═══════════════════════════════════════════════════════ */

/* --- Typography micro-refinements --- */
/* Sub-headings in body sections use Poppins Light for elegance */
.invest-pitch,.abtus-body,.vfy-body,.vmv-body{
  font-weight:300;letter-spacing:.015em;line-height:1.9;
}
.feat-h{font-size:.88rem;font-weight:600;letter-spacing:.01em}
.feat-p{font-size:.8rem;font-weight:300;letter-spacing:.01em;line-height:1.75}

/* --- Investment section --- */
.invest{padding:8rem 0 0;background:var(--bg)}
.invest-grid{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center}
.invest-pitch{font-size:.88rem;color:var(--muted);max-width:48ch;margin:1.4rem 0 2rem}
.invest-frame{
  height:480px;border-radius:var(--radius);overflow:hidden;
  position:relative;background:var(--bg2);
  box-shadow:0 8px 48px rgba(15,5,0,.1);
}
.invest-frame img{width:100%;height:100%;object-fit:cover;object-position:center}
.invest-cta{padding:3rem 0 5rem}

/* --- Why section --- */
.why{padding:8rem 0;background:var(--bg2)}
.why-feat{
  display:flex;gap:1.4rem;align-items:flex-start;
  padding:1.4rem 1.2rem;border-radius:10px;
  border-bottom:1px solid rgba(15,5,0,.06);
  transition:all .3s cubic-bezier(.4,0,.2,1);cursor:default;
}
.why-feat:last-child{border-bottom:none}
.why-feat:hover{background:rgba(255,255,255,.8);transform:translateX(4px)}
.feat-ico{
  width:44px;height:44px;background:var(--white);
  border-radius:10px;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;
  box-shadow:0 1px 8px rgba(15,5,0,.07);transition:all .3s;
}
.why-feat:hover .feat-ico{background:var(--gold2);box-shadow:0 4px 16px rgba(245,166,35,.25)}

/* --- About section --- */
.about-body{font-size:.88rem;letter-spacing:.01em}
.press-line{font-size:.8rem}

/* --- Testimonial cards — tighter, more premium --- */
.tstm-card{
  padding:2rem 1.8rem 1.5rem;
  border-radius:var(--radius);
  border:1px solid rgba(15,5,0,.05);
}
.tstm-mark{font-family:var(--serif);font-size:3rem;color:var(--gold2);line-height:1;opacity:.6;display:block;margin-bottom:.4rem}
.tstm-quote{font-size:.85rem;line-height:1.8;color:var(--brown2);font-weight:300;letter-spacing:.01em}
.tstm-name{font-family:var(--serif);font-size:1rem;font-weight:400;color:var(--dark)}
.tstm-loc{font-size:.7rem;color:var(--muted);letter-spacing:.04em}

/* --- Eyebrow on dark sections --- */
.about .eyebrow,.cta .eyebrow{letter-spacing:.22em}

/* --- CTA section refinements --- */
.cta-h{
  font-family:var(--serif);
  font-size:clamp(2rem,4.5vw,3.8rem);
  letter-spacing:-.02em;font-weight:400;
}
.cta-p{font-size:.88rem;font-weight:300;letter-spacing:.015em;line-height:1.85}
.cta-in{font-size:.85rem;font-weight:300;letter-spacing:.01em}
.cta-btn{font-size:.8rem;letter-spacing:.04em}

/* --- Footer refinements --- */
footer{padding:5rem 0 2.5rem}
.fc h5{font-size:.62rem;letter-spacing:.18em}
.fc a{font-size:.82rem;font-weight:300;letter-spacing:.01em}
.fl p{font-size:.82rem;font-weight:300;line-height:1.8}

/* --- Property tags --- */
.ptag{
  background:rgba(15,5,0,.04);color:var(--brown2);
  padding:.2rem .65rem;border-radius:5px;
  font-size:.68rem;font-weight:400;letter-spacing:.02em;
  border:1px solid rgba(15,5,0,.06);
}

/* --- Card location row --- */
.prop-loc-row{
  display:flex;align-items:center;gap:.4rem;
  font-size:.7rem;color:var(--muted);font-weight:400;
  letter-spacing:.02em;margin-bottom:.1rem;
}

/* --- VMV section headings --- */
.vmv-heading{
  font-family:var(--serif);
  font-size:clamp(1.8rem,3.2vw,2.8rem);
  font-weight:400;line-height:1.18;
  color:var(--dark);margin-bottom:1.3rem;
  letter-spacing:-.015em;
}
.vmv-heading em{font-style:italic;color:var(--gold)}
.vmv-body{font-size:.88rem;font-weight:300;letter-spacing:.01em}
.vmv-val-title{font-size:.88rem;font-weight:500;letter-spacing:.01em}
.vmv-val-desc{font-size:.8rem;font-weight:300;letter-spacing:.01em;line-height:1.7}

/* --- Verify section --- */
.vfy-body{font-size:.88rem}
.vfy-point span:last-child{font-size:.84rem;font-weight:300;letter-spacing:.01em}

/* --- Sub-pages refinement --- */
.sub-desc h2{font-family:var(--serif);font-weight:400;letter-spacing:-.015em}
.sub-desc p{font-size:.88rem;font-weight:300;letter-spacing:.01em;line-height:1.9}
.sub-k{letter-spacing:.14em}
.sub-v{font-size:.9rem;font-weight:400;letter-spacing:.01em}

/* --- Scroll reveal more natural --- */
.rv,.rv-l,.rv-r{
  opacity:0;
  transition:opacity .8s ease,transform .85s cubic-bezier(.22,1,.36,1);
}
.rv{transform:translateY(24px)}
.rv-l{transform:translateX(-24px)}
.rv-r{transform:translateX(24px)}
.rv.in,.rv-l.in,.rv-r.in{opacity:1;transform:none}

/* --- Ghost button on dark backgrounds --- */
.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--brown);padding:.78rem 1.5rem;border-radius:7px;
  font-weight:500;font-size:.82rem;letter-spacing:.02em;
  text-decoration:none;
  border:1px solid rgba(61,31,10,.2);
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.btn-ghost:hover{color:var(--dark);border-color:rgba(61,31,10,.45);background:rgba(61,31,10,.04)}

/* --- Community/press section --- */
.cmty{padding:8rem 0;background:var(--white)}
.crd-title{font-size:.9rem;font-weight:500;letter-spacing:.01em;line-height:1.4}
.crd-desc{font-size:.78rem;font-weight:300;letter-spacing:.01em;line-height:1.65}
.crd-more{font-size:.76rem;font-weight:500;letter-spacing:.03em}

/* --- Mobile responsive corrections --- */
@media(max-width:1100px){
  .invest-grid{grid-template-columns:1fr;gap:3rem}
  .invest-frame{height:320px}
}
@media(max-width:768px){
  .team-grid{grid-template-columns:1fr 1fr}
  .stats-row{padding:0 1.5rem}
  .st{padding:1.5rem .8rem}
  .st-icon{width:34px;height:34px}
}

/* === DIASPORA FLAGS === */
/* Windows browsers do not render country flag emoji, so these are images. */
.diaspora-flags{
  display:inline-flex;align-items:center;gap:6px;margin-top:4px;
}
.diaspora-flags img{border-radius:2px;display:block}

/* === TESTIMONIAL AVATAR ICON === */
/* Neutral mark. The old circular photographs were not real customers. */
.testimonial-avatar-icon{
  width:44px;height:44px;border-radius:50%;
  background:rgba(42,7,0,.08);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--cocoa,#2A0700);
}
.tstm-card--gold .testimonial-avatar-icon{background:rgba(42,7,0,.12)}

/* === IMAGE SKELETON === */
/* Shimmer sits on ::before because .abtus-frame::after is already the
   cocoa wash. JS strips .img-loading on load or error. */
.img-loading{position:relative;background:#e8e3db;overflow:hidden}
.img-loading::before{
  content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.45) 50%,transparent 100%);
  background-size:200% 100%;
  animation:shimmer 1.6s ease-in-out infinite;
}
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
@media (prefers-reduced-motion: reduce){
  .img-loading::before{animation:none}
}

/* === SEARCH PANEL CONTROLS === */
/* Selects inherit the look of the static values they replaced. */
.hs-select{
  appearance:none;-webkit-appearance:none;
  border:none;background:transparent;
  font-family:var(--sans);font-size:.9rem;font-weight:600;
  color:var(--dark);cursor:pointer;
  width:100%;padding:0 1.1rem 0 0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%238B7355' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center;
}
.hs-select:focus{outline:2px solid var(--gold2);outline-offset:3px;border-radius:3px}
.hs-select option{background:var(--white);color:var(--dark)}
.hs-tab-btn{cursor:pointer}

/* Brief gold ring on the estate a search lands on */
.prop-highlight{
  outline:2px solid #F8C000;
  outline-offset:3px;
  transition:outline .3s ease;
}

/* === VERIFY SECTION BACKGROUND === */
/* Faint people image behind the cocoa, so the panel is not a flat slab. */
/* VERIFY HIDDEN: homepage verify section background. Re-enable by removing this @media wrapper. */
@media not all {
  .vfy{position:relative;overflow:hidden}
  .vfy::before{
    content:'';position:absolute;inset:0;
    background-image:url('assets/team.jpg');
    background-size:cover;background-position:center top;
    opacity:.09;z-index:0;pointer-events:none;
  }
  .vfy > *{position:relative;z-index:1}
}

/* === VIDEO TRIGGER === */
.video-trigger{cursor:pointer}
.video-trigger:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
/* The overlay is decoration only. It must never take the click, because JS
   fades it out once autoplay starts. */
.tv-overlay{pointer-events:none}

/* === PAYMENT TABLE (eco-ibadan) === */
.payment-table{
  width:100%;border-collapse:collapse;margin:16px 0;font-size:.9rem;
}
.payment-table th,
.payment-table td{
  padding:10px 12px;text-align:right;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.payment-table th:first-child,
.payment-table td:first-child{
  text-align:left;color:var(--cocoa,#2A0700);font-weight:600;
}
.payment-table thead th{
  font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brown2,#6B4226);
  border-bottom:2px solid var(--gold2,#F8C000);
}
@media (max-width:480px){
  .payment-table{font-size:.78rem}
  .payment-table th,.payment-table td{padding:8px 6px}
}

/* === SPLASH LOGO === */
.splash-logo-img{
  display:block;
  width:140px;height:auto;
  margin:0 auto 14px auto;
}

/* === PROPERTY PAGE HERO === */
/* The banner bleeds the full width at its own ratio. The dark bars down the
   sides were this section's background showing beside a 960px capped image,
   so the cap is gone. Nav is fixed and measures 69px, hence the 72px offset
   that keeps the top of the flyer clear of it. */
.property-page-hero{
  width:100%;background:#0d0503;
  padding-top:72px;
  overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
}
.property-page-hero-img{
  width:100%;max-width:100%;height:auto;
  object-fit:unset;display:block;
}
/* Chip and title sit below the banner rather than over it, so the flyer
   artwork is never obscured. */
.property-page-hero .sub-hero-inner{
  position:relative;z-index:2;width:100%;max-width:1300px;margin:0 auto;
  padding:1.5rem 3rem 1.9rem;
}
.property-page-hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.1;color:#fff;margin-top:.7rem;
}
.property-page-hero .prop-chip{position:static;display:inline-block}
@media(max-width:768px){
  .property-page-hero .sub-hero-inner{padding:1.1rem 1.5rem 1.4rem}
}

/* === FOUNDER BIO MODAL === */
.founder-modal-backdrop{
  position:fixed;inset:0;z-index:9998;
  background:rgba(10,3,0,.80);
  display:flex;align-items:center;justify-content:center;
  padding:20px;opacity:0;
  transition:opacity .25s ease;pointer-events:none;
}
.founder-modal-backdrop:not([hidden]){opacity:1;pointer-events:all;visibility:visible}
.founder-modal-backdrop[hidden]{display:flex!important;visibility:hidden}
.founder-modal{
  background:#fff;border-radius:16px;
  width:100%;max-width:600px;max-height:88vh;overflow-y:auto;
  padding:36px 36px 40px;position:relative;
  box-shadow:0 32px 80px rgba(0,0,0,.35);
  transform:translateY(12px);transition:transform .25s ease;
}
.founder-modal-backdrop:not([hidden]) .founder-modal{transform:translateY(0)}
.founder-modal-close{
  position:absolute;top:16px;right:16px;
  background:rgba(42,7,0,.07);border:none;border-radius:50%;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#2A0700;transition:background .2s ease;flex-shrink:0;
}
.founder-modal-close:hover{background:rgba(42,7,0,.15)}
.founder-modal-header{display:flex;align-items:center;gap:20px;margin-bottom:20px}
.founder-modal-photo-wrap{
  flex-shrink:0;width:88px;height:88px;border-radius:50%;
  overflow:hidden;background:#e8e3db;border:3px solid #F8C000;
}
.founder-modal-photo{
  width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
}
.founder-modal-identity{display:flex;flex-direction:column;gap:4px}
.founder-modal-badge{
  display:inline-block;background:#F8C000;color:#2A0700;
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 10px;border-radius:20px;width:fit-content;
}
.founder-modal-name{
  font-size:1.25rem;font-weight:700;color:#2A0700;margin:0;line-height:1.2;
}
.founder-modal-role{
  font-size:.78rem;color:#8a6a5a;text-transform:uppercase;
  letter-spacing:.07em;margin:0;
}
.founder-modal-divider{height:1px;background:rgba(42,7,0,.10);margin-bottom:20px}
.founder-modal-bio{
  font-size:.93rem;line-height:1.75;color:#3a2218;margin:0;white-space:pre-line;
}
@media (max-width:600px){
  .founder-modal{padding:28px 20px 32px;border-radius:12px}
  .founder-modal-header{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (prefers-reduced-motion: reduce){
  .founder-modal-backdrop,.founder-modal{transition:none}
}

/* Non founder team cards are plain divs: no pointer, no hover lift. The
   overlay gradient is untouched so they still match the founder cards. */
.tm-card--static{cursor:default}
.tm-card--static:hover{transform:none}

/* === TEASER CARDS === */
/* Same 300px slot as .crd so the marquee period stays an exact multiple. */
.teaser-card{
  flex:0 0 300px;width:300px;min-width:300px;height:380px;
  margin-right:1.2rem;
  border-radius:12px;overflow:hidden;position:relative;
  background:var(--cocoa,#2A0700);
}
.teaser-card-inner{
  width:100%;height:100%;position:relative;
  display:flex;align-items:center;justify-content:center;
}
.teaser-card-blur{
  position:absolute;inset:0;
  background:repeating-linear-gradient(
      135deg,
      rgba(248,192,0,.06) 0px,
      rgba(248,192,0,.06) 1px,
      transparent 1px,
      transparent 12px
    ),
    linear-gradient(
      160deg,
      rgba(42,7,0,.95) 0%,
      rgba(80,20,0,.85) 60%,
      rgba(42,7,0,.98) 100%
    );
  animation:teaser-shimmer 3.5s ease-in-out infinite;
}
@keyframes teaser-shimmer{
  0%,100%{opacity:1}
  50%{opacity:.75}
}
.teaser-card-content{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:10px;text-align:center;padding:24px;
}
.teaser-pill{
  display:inline-block;
  background:var(--gold2,#F8C000);color:var(--cocoa,#2A0700);
  font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 14px;border-radius:20px;
}
.teaser-label{
  color:rgba(255,255,255,.45);
  font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;margin:0;
}
@media (prefers-reduced-motion: reduce){
  .teaser-card-blur{animation:none}
}