: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 2px 24px rgba(15,5,0,.08);
  --card-hover:0 16px 64px rgba(15,5,0,.16);
  --serif:'Instrument Serif',serif;
  --sans:'Geist','DM Sans',sans-serif;
  --radius:14px;
  --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:1.2rem 3rem;
  display:flex;align-items:center;justify-content:space-between;
  transition:all .4s ease;
}
.nav.scrolled{
  background:rgba(237,234,228,.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(61,31,10,.08);
  box-shadow:0 2px 32px rgba(15,5,0,.06);
}
/* Unscrolled the nav sits over the hero photograph, whose sky is bright
   on the right and dark on the left. A frosted underlay plus white links
   reads against both. The .scrolled state is untouched. */
.nav:not(.scrolled){
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.nav:not(.scrolled) .nav-center a,
.nav:not(.scrolled) .nav-link-sm{
  color:rgba(255,255,255,.90);
}
.nav:not(.scrolled) .nav-center a:hover,
.nav:not(.scrolled) .nav-link-sm:hover{color:#fff}

.nav-logo img{height:32px}
.nav-center{display:flex;gap:2rem;list-style:none}
.nav-center a{color:var(--brown2);text-decoration:none;font-size:.85rem;font-weight:500;letter-spacing:.01em;transition:color .25s}
.nav-center a:hover{color:var(--dark)}
.nav-right{display:flex;align-items:center;gap:.8rem}
.nav-link-sm{color:var(--brown2);text-decoration:none;font-size:.85rem;font-weight:500;transition:color .25s}
.nav-link-sm:hover{color:var(--dark)}
.nav-btn{background:var(--dark);color:var(--white);border:none;padding:.6rem 1.4rem;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer;font-family:var(--sans);transition:all .3s}
.nav-btn:hover{background:var(--brown);transform:translateY(-1px);box-shadow:0 6px 20px rgba(15,5,0,.25)}

/* ─── HERO ─── */
.hero{
  position:relative;min-height:100vh;
  background:var(--dark);overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding-bottom:0;
}
.hero-bg{
  position:absolute;inset:0;
  /* Layer order is top-down: vertical wash, then horizontal wash, then
     the photograph. Anchored center right because the usable shadow sits
     on the left of the image, so the headline keeps a dark bed as the
     viewport narrows and the frame crops inward from the left. */
  background:
    linear-gradient(to bottom,
      rgba(26,4,0,.35) 0%,
      transparent 30%,
      transparent 65%,
      rgba(26,4,0,.90) 100%),
    linear-gradient(to right,
      rgba(26,4,0,.88) 0%,
      rgba(26,4,0,.70) 30%,
      rgba(26,4,0,.42) 55%,
      rgba(26,4,0,.30) 100%),
    url('assets/hero-land.png') center right/cover no-repeat;
  transform-origin:center;animation:heroZoom 12s ease-in-out infinite alternate;
}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.04)}}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(15,5,0,.95) 0%,rgba(15,5,0,.5) 40%,rgba(15,5,0,.15) 100%);
}
.hero-inner{
  position:relative;z-index:2;
  padding:140px 3rem 60px;
  max-width:1300px;margin:0 auto;width:100%;
}
/* Two columns from 1024 up. Below that the panel drops under the copy
   and the hero grows rather than the panel overlapping anything. */
@media(min-width:1024px){
  .hero-inner{
    display:grid;grid-template-columns:55fr 45fr;
    gap:3.5rem;align-items:center;
  }
}
.hero-copy{min-width:0}
.hero-actions{margin-bottom:0}
/* Hero editorial brand strip — not a pill badge */
.hero-brand-strip{
  display:flex;align-items:stretch;gap:0;
  margin-bottom:2.2rem;width:fit-content;
  animation:heroFadeUp .7s cubic-bezier(.22,1,.36,1) .1s both;
}
.hbs-item{
  display:flex;flex-direction:column;gap:.2rem;
  padding:0 1.4rem;border-right:1px solid rgba(255,255,255,.13);
}
.hbs-item:first-child{padding-left:0}
.hbs-item:last-child{border-right:none}
.hbs-label{font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.3);line-height:1}
.hbs-value{font-size:.86rem;font-weight:500;color:rgba(255,255,255,.82);line-height:1}
.hbs-value.gold{color:var(--gold2);font-weight:600}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(14px)}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(12px)}to{opacity:1;transform:none}}
.hero-title{
  font-family:var(--serif);
  font-size:clamp(3.5rem,7vw,7.5rem);
  color:var(--white);line-height:1.02;
  font-weight:400;margin-bottom:1.4rem;
}
.hero-title .line{display:block;overflow:hidden}
.hero-title .w{display:inline-block;animation:heroWordUp .9s cubic-bezier(.22,1,.36,1) both}
.hero-title .line:nth-child(1) .w:nth-child(1){animation-delay:.25s}
.hero-title .line:nth-child(1) .w:nth-child(2){animation-delay:.33s}
.hero-title .line:nth-child(2) .w:nth-child(1){animation-delay:.41s}
.hero-title .line:nth-child(2) .w:nth-child(2){animation-delay:.49s}
.hero-title .line:nth-child(3) .w:nth-child(1){animation-delay:.57s}
.hero-title .line:nth-child(3) .w:nth-child(2){animation-delay:.65s}
.hero-title em{font-style:italic;color:var(--gold2)}
.hero-sub{
  font-size:1rem;color:rgba(255,255,255,.6);
  max-width:460px;line-height:1.8;margin-bottom:2.5rem;
  animation:heroFadeIn .8s ease .75s both;
}
.hero-actions{
  display:flex;gap:.8rem;align-items:center;
  margin-bottom:3.5rem;
  animation:heroFadeIn .8s ease .9s both;
}
.btn-gold{
  background:var(--gold2);color:var(--dark);
  padding:.85rem 2rem;border-radius:8px;
  font-weight:600;font-size:.88rem;text-decoration:none;
  transition:all .3s;display:inline-flex;align-items:center;gap:.5rem;
}
.btn-gold:hover{background:#FFB930;transform:translateY(-2px);box-shadow:0 10px 32px rgba(245,166,35,.35)}
.btn-ghost-w{
  color:rgba(255,255,255,.75);padding:.83rem 1.6rem;border-radius:8px;
  font-weight:500;font-size:.88rem;text-decoration:none;
  border:1px solid rgba(255,255,255,.2);transition:all .3s;
}
.btn-ghost-w:hover{color:white;border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06)}

/* ─── STATS ROW ─── */
.stats-row{
  background:var(--white);
  border-bottom:1px solid rgba(15,5,0,.06);
  padding:2rem 3rem;
}
.stats-inner{
  max-width:1300px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;
}
.st{text-align:center;flex:1;padding:0 1rem;border-right:1px solid rgba(15,5,0,.08)}
.st:last-child{border-right:none}
.st-n{font-family:var(--serif);font-size:2.4rem;font-weight:400;color:var(--dark);line-height:1;display:block}
.st-n em{font-style:italic;color:var(--gold)}
.st-l{font-size:.75rem;color:var(--muted);margin-top:.25rem;font-weight:500;letter-spacing:.04em}

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

/* ─── 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. Whole card is the link. */
.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;
  transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s;
}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--card-hover)}
.pcard-img{position:relative;height:280px;overflow:hidden;flex-shrink:0}
.pcard-ph{position:absolute;inset:0;width:100%;height:100%}
.pcard-img .ph-real{transition:transform .6s ease}
.pcard:hover .ph-real{transform:scale(1.03)}
.pcard-body{padding:1.4rem;display:flex;flex-direction:column;flex:1}
.pcard-name{font-family:var(--serif);font-size:1.45rem;font-weight:400;color:var(--dark);margin:.5rem 0 .5rem}
.pcard-desc{font-size:.83rem;color:var(--muted);line-height:1.65;margin-bottom:1rem}
.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,.07);
}
.pcard-price{font-family:var(--serif);font-size:1.2rem;color:var(--dark)}
.pcard-arrow{
  width:34px;height:34px;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;
}
.pcard:hover .pcard-arrow{background:var(--gold2);color:var(--dark)}

/* ─── 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)}
.map-card-loc .licon svg{width:14px;height:14px;stroke:var(--gold);stroke-width:2;fill:none}
.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)}

/* ─── MAP STRIP ─── */
.map-strip{
  position:relative;
  height:500px;
  overflow:hidden;
  display:flex;
  align-items:center;
}
#riparo-map{
  position:absolute;inset:0;z-index:1;
  filter:saturate(.9) brightness(.95);
}
.map-vignette{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(to right,rgba(15,5,0,.82) 0%,rgba(15,5,0,.55) 30%,rgba(15,5,0,.1) 55%,transparent 75%);
  pointer-events:none;
}
.map-card{
  position:relative;z-index:3;
  background:var(--white);
  border-radius:var(--radius);
  padding:2.2rem 2.5rem;
  max-width:340px;
  margin-left:8%;
  box-shadow:0 20px 80px rgba(0,0,0,.4);
}
.map-card-tag{
  font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.9rem;
}
.map-card-title{
  font-family:var(--serif);font-size:1.55rem;
  color:var(--dark);margin-bottom:.6rem;line-height:1.2;
}
.map-card-sub{font-size:.85rem;color:var(--muted);line-height:1.7;margin-bottom:1.6rem}
.map-markers{display:flex;flex-direction:column;gap:.6rem}
.map-card-loc{
  display:flex;align-items:center;gap:.7rem;
  font-size:.84rem;color:var(--brown2);
  padding:.5rem .6rem;border-radius:6px;
  transition:background .25s;
}
.map-card-loc:hover{background:var(--bg)}
.map-card-loc.soon-loc{color:rgba(61,31,10,.38)}
.map-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;position:relative}
.map-dot.act{background:var(--gold2)}
.map-dot.act::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  border:1.5px solid var(--gold2);opacity:.45;
  animation:ringPulse 2.2s ease-in-out infinite;
}
.map-dot.soon{background:rgba(61,31,10,.18)}
@keyframes ringPulse{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.7);opacity:0}}
/* Leaflet custom marker */
.rp-marker{position:relative;display:flex;flex-direction:column;align-items:center}
.rp-pin{
  width:22px;height:22px;background:#F5A623;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  border:3px solid white;
  box-shadow:0 4px 20px rgba(245,166,35,.55);
  cursor:default;
}
.rp-pin::after{
  content:'';position:absolute;
  top:50%;left:50%;
  width:8px;height:8px;background:white;border-radius:50%;
  transform:translate(-50%,-50%) rotate(45deg);
}
.rp-ring{
  position:absolute;top:-9px;left:-9px;
  width:40px;height:40px;border-radius:50%;
  border:2px solid rgba(245,166,35,.5);
  animation:leafRing 2.2s ease-in-out infinite;
}
@keyframes leafRing{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.6);opacity:0}}
.leaflet-popup-content-wrapper{
  border-radius:10px!important;border:1px solid rgba(200,133,26,.2)!important;
  box-shadow:0 8px 32px rgba(0,0,0,.15)!important;
  font-family:var(--sans)!important;
}
.leaflet-popup-content{font-size:.84rem!important;color:var(--dark)!important;line-height:1.5!important}
.leaflet-popup-content b{color:var(--gold)!important;display:block;margin-bottom:.2rem}

/* ─── 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{
  width:100%;max-width:100%;height:auto;
  object-fit:contain;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:1.2rem;
}
/* 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;gap:1.2rem;width:max-content;animation:railA 40s linear infinite}
.rail-track-b{animation-name:railB}
.rail:hover .rail-track,.rail-track:focus-within{animation-play-state:paused}
.rail-clone{display:flex;gap:1.2rem}
@keyframes railA{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes railB{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.crd{
  width:300px;height:380px;flex-shrink:0;
  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.png') center/cover no-repeat;
  opacity:.18;
}
.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:#0A0200;padding:5rem 0 2rem}
.fg{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:4rem;margin-bottom:4rem}
.fl img{height:30px;filter:brightness(0) invert(1);display:block;margin-bottom:1.1rem}
.fl p{color:rgba(255,255,255,.35);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(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.4);text-decoration:none;font-size:.78rem;
  transition:all .3s;
}
.soc-btn:hover{background:var(--gold2);color:var(--dark);border-color:var(--gold2)}
.fc h5{font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:1.3rem}
.fc ul{list-style:none;display:flex;flex-direction:column;gap:.65rem}
.fc a{color:rgba(255,255,255,.35);text-decoration:none;font-size:.85rem;transition:color .3s}
.fc a:hover{color:var(--gold2)}
.fb{
  padding-top:2rem;border-top:1px solid rgba(255,255,255,.06);
  display:flex;justify-content:space-between;align-items:center;
}
.fb p{font-size:.76rem;color:rgba(255,255,255,.2)}
.fb span{color:var(--gold2)}

/* ─── 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-inner{padding:0 1.5rem;padding-top:120px}
  .stats-row{padding:1.5rem}
  .map-card{margin-left:5%;max-width:300px}
  .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-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
════════════════════════════════ */
#rp-loader{
  position:fixed;inset:0;z-index:999999;
  background:var(--dark);
  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;
}
/* The 3 concentric rings that mimic the logo arcs */
.ldr-ring{
  position:absolute;border-radius:50%;
  border:2px solid transparent;
  border-top-color:#F5A623;
  animation:ldrSpin 1.4s cubic-bezier(.6,0,.4,1) infinite;
}
.ldr-ring.r1{
  inset:0;
  border-top-color:#F5A623;
  animation-duration:1.2s;
}
.ldr-ring.r2{
  inset:14px;
  border-top-color:rgba(245,166,35,.65);
  animation-duration:1.6s;
  animation-direction:reverse;
}
.ldr-ring.r3{
  inset:28px;
  border-top-color:rgba(245,166,35,.35);
  animation-duration:2s;
}
.ldr-dot{
  width:10px;height:10px;
  background:#F5A623;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:rgba(255,255,255,.9);
  letter-spacing:.06em;
  animation:ldrWord 1s ease .2s both;
}
.ldr-tagline{
  font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.3);
  margin-top:-.5rem;
  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)}
.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 ─────────────────────────────── */
.nav-verify{display:inline-flex;align-items:center;gap:.35rem}
.nav-verify svg{flex-shrink:0}

/* ── 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}
}

/* ── HERO SEARCH PANEL ─────────────────────────────── */
.hero-panel{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  padding:28px;
  animation:heroFadeIn .8s ease 1s both;
}
.hp-eyebrow{
  font-size:.65rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold2);margin-bottom:.5rem;
}
.hp-title{
  font-family:var(--serif);font-weight:400;
  font-size:20px;line-height:1.2;color:#fff;margin-bottom:1.4rem;
}
.hp-field{display:flex;flex-direction:column;margin-bottom:14px}
.hp-label{
  font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold2);margin-bottom:.4rem;
}
.hp-control{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  padding:.72rem .9rem;
  font-family:var(--sans);font-size:.88rem;color:#fff;
  appearance:none;-webkit-appearance:none;
  cursor:pointer;transition:border-color .25s,background .25s;
  /* Chevron drawn inline so the control needs no external asset. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23F5A623' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .9rem center;
  padding-right:2.2rem;
}
.hp-control:hover{border-color:rgba(255,255,255,.24)}
.hp-control:focus{outline:none;border-color:var(--gold2);background-color:rgba(255,255,255,.10)}
.hp-control:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
/* Native option lists render in the OS palette, so force dark text there. */
.hp-control option{background:var(--dark);color:#fff}
.hp-btn{
  width:100%;justify-content:center;
  margin-top:.4rem;border:none;cursor:pointer;
  font-family:var(--sans);
}
.hp-foot{
  margin-top:.9rem;text-align:center;
  font-size:.74rem;color:rgba(255,255,255,.45);
}

/* ── 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){
  /* Hero text centres at this width, so a left-weighted horizontal wash
     no longer sits under it. Flat overlay instead. The vertical wash is
     kept because the transition into the next section is unrelated to
     where the text sits. */
  .hero-bg{
    background:
      linear-gradient(to bottom,
        rgba(26,4,0,.35) 0%,
        transparent 30%,
        transparent 65%,
        rgba(26,4,0,.90) 100%),
      linear-gradient(rgba(26,4,0,.72), rgba(26,4,0,.72)),
      url('assets/hero-land.png') center right/cover no-repeat;
  }

  .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}
.mq-track-rev{animation:mqRight 36s linear infinite}
.mq-row:hover .mq-track{animation-play-state:paused}
.mq-tile{
  position:relative;width:160px;height:120px;flex-shrink:0;
  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}
  /* 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)}
/* Unscrolled the bars sit on the hero photograph, so they go light. */
.nav:not(.scrolled) .nav-burger span{background:rgba(255,255,255,.92)}

.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}
}