/* =====================================================================
   Bright Future Homes — Glass / 3D design layer (brightfuturehomes.us)
   Loads AFTER each page's inline base CSS and re-skins it: dark luxe
   canvas, frosted-glass surfaces, metallic gold, 3D tilt + depth.
   Content, markup and class names are untouched — this file only
   restyles them, so every page (EN + ES + blog) inherits the look.
   ===================================================================== */

:root{
  --bg:#060608; --bg-2:#0b0b0e; --panel:rgba(255,255,255,.04); --panel-2:rgba(255,255,255,.07);
  --ink:#f6f1e7; --soft:#d8d2c4; --mute:#a9a397; --faint:#807a6f;
  --line:rgba(245,215,122,.13); --line-2:rgba(245,215,122,.26);
  --gold:#d4a73f; --gold-lt:#f5d77a; --gold-dk:#c49530;
  --black:#060608; --black-2:#17171c;

  --g-grad:linear-gradient(135deg,#fff4c9 0%,#f5d77a 20%,#dcae47 46%,#b5872e 70%,#efcd6a 100%);
  --g-text:linear-gradient(100deg,#fbe6a2 0%,#f5d77a 25%,#cf9d38 52%,#fff0bf 75%,#f5d77a 100%);
  --glass:linear-gradient(158deg,rgba(255,255,255,.115) 0%,rgba(255,255,255,.03) 34%,rgba(255,255,255,.018) 62%,rgba(255,255,255,.05) 100%);
  --glass-strong:linear-gradient(158deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.05) 38%,rgba(255,255,255,.03) 64%,rgba(255,255,255,.08) 100%);
  --rim:linear-gradient(145deg,rgba(255,255,255,.42),rgba(255,255,255,.07) 26%,rgba(255,255,255,0) 50%,rgba(245,215,122,.10) 74%,rgba(245,215,122,.5));
  --glass-dark:linear-gradient(150deg,rgba(22,22,27,.74),rgba(8,8,10,.58));
  --edge:rgba(255,255,255,.07);
  --edge-gold:rgba(245,215,122,.38);
  --blur:blur(30px) saturate(185%);
  --r:22px; --r-lg:32px;
  --hi:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(255,255,255,.02);
  --shadow:0 30px 80px -24px rgba(0,0,0,.8);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- canvas, ambient light, grain ---------- */
html{background:var(--bg);color-scheme:dark}
body{background:transparent;color:var(--ink)}
body:before{content:"";position:fixed;inset:-18vmax;z-index:-1;pointer-events:none;
  background:
    radial-gradient(36vmax 28vmax at 14% 16%,rgba(212,167,63,.24),transparent 62%),
    radial-gradient(30vmax 26vmax at 86% 34%,rgba(245,215,122,.13),transparent 62%),
    radial-gradient(42vmax 32vmax at 62% 94%,rgba(196,149,48,.18),transparent 60%),
    radial-gradient(26vmax 22vmax at 32% 66%,rgba(255,236,190,.04),transparent 60%);
  animation:bfh-drift 28s ease-in-out infinite alternate}
@keyframes bfh-drift{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(3vmax,-2vmax,0) rotate(5deg)}
  100%{transform:translate3d(-2vmax,2.5vmax,0) rotate(-4deg)}}
body:after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
::selection{background:var(--gold-lt);color:#120d04}

/* cursor spotlight (desktop) */
.bfh-spot{position:fixed;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;z-index:1;pointer-events:none;
  border-radius:50%;background:radial-gradient(circle,rgba(245,215,122,.085),rgba(245,215,122,.03) 35%,transparent 65%);
  opacity:0;transition:opacity .6s;mix-blend-mode:screen;will-change:transform}
.bfh-spot.on{opacity:1}

/* ---------- type ---------- */
h1,h2,h3,h4{letter-spacing:-.012em}
h2.sec{color:#fbf7ef}
.lead{color:var(--soft)}
.hero h1 em,.phero h1 em,h2.sec em,.cta-final h2 em,.stat-item b,.split .badge b,.vals .v .vn,.scard .num{
  background:var(--g-text);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;animation:bfh-sheen 9s linear infinite}
@keyframes bfh-sheen{to{background-position:220% 0}}
.hero h1,.phero h1,.cta-final h2{text-shadow:none;filter:drop-shadow(0 6px 34px rgba(0,0,0,.55))}

/* kicker + eyebrow = glass chips with a live gold dot */
.kicker,.hero .eyebrow,.phero .eyebrow{display:inline-flex;align-items:center;gap:12px;padding:9px 18px 9px 14px;border-radius:999px;
  background:var(--glass);border:1px solid var(--line-2);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  color:var(--gold-lt);font-size:.64rem;letter-spacing:.28em;box-shadow:var(--hi);line-height:1.4}
.kicker:before,.hero .eyebrow:before,.phero .eyebrow:before{width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--gold-lt);box-shadow:0 0 0 4px rgba(245,215,122,.12),0 0 14px rgba(245,215,122,.85);animation:bfh-pulse 2.6s ease-in-out infinite}
@keyframes bfh-pulse{50%{box-shadow:0 0 0 7px rgba(245,215,122,.05),0 0 22px rgba(245,215,122,.95)}}
@media(max-width:680px){.hero .eyebrow{padding:8px 14px;letter-spacing:.12em}.hero .eyebrow:before{display:block}}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;border-radius:999px;border:1px solid rgba(255,241,200,.6);
  background:var(--g-grad);background-size:180% 180%;background-position:0 0;color:#150f04;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 8px rgba(110,72,8,.35),0 16px 36px -12px rgba(212,167,63,.7);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-position .9s var(--ease),color .3s,border-color .3s}
.btn:after{content:"";position:absolute;top:-10%;bottom:-10%;left:-70%;width:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-22deg);transition:left 1s var(--ease)}
.btn:hover{background:var(--g-grad);background-size:180% 180%;background-position:100% 100%;color:#150f04;border-color:rgba(255,246,215,.95);
  transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -3px 8px rgba(110,72,8,.3),0 22px 48px -12px rgba(232,184,74,.85)}
.btn:hover:after{left:135%}
.btn-line,.btn-ghost{background:var(--glass);color:#fff;border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--hi),0 12px 30px -14px rgba(0,0,0,.7)}
.btn-line:hover,.btn-ghost:hover{background:rgba(245,215,122,.12);color:var(--gold-lt);border-color:var(--edge-gold);
  box-shadow:var(--hi),0 18px 44px -14px rgba(212,167,63,.45)}

/* ---------- nav: floating glass capsule ---------- */
header.nav{transition:padding .45s var(--ease)}
header.nav.solid{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0;padding-top:12px}
.nav-inner{transition:height .45s var(--ease),background .45s,border-color .45s,box-shadow .45s,padding .45s;border:1px solid transparent;border-radius:26px}
header.nav.solid .nav-inner{height:80px;padding:0 18px 0 10px;background:var(--glass-dark);border-color:rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);
  box-shadow:0 22px 60px -22px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.08)}
.brand img{transition:height .45s var(--ease),width .45s var(--ease),filter .45s;filter:drop-shadow(0 6px 18px rgba(212,167,63,.35))}
header.nav.solid .brand img{height:64px;width:64px}
header.nav.solid .brand .tag{display:none}
.navlinks{gap:34px}
.nav.solid .navlinks a{color:var(--soft)}
.navlinks a:hover,.nav.solid .navlinks a:hover{color:var(--gold-lt)}
.navlinks a.cta,.nav.solid .navlinks a.cta{border-radius:999px;border:1px solid var(--edge-gold);color:var(--gold-lt);padding:11px 22px;
  background:rgba(245,215,122,.07);box-shadow:var(--hi)}
.navlinks a.cta:hover,.nav.solid .navlinks a.cta:hover{background:var(--g-grad);color:#150f04;border-color:rgba(255,241,200,.7)}
.submenu{background:rgba(14,14,18,.82);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:10px;
  -webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);
  box-shadow:0 40px 90px -24px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07)}
.submenu a{border-radius:12px;border-left:0;color:var(--soft)}
.submenu a:hover{background:rgba(245,215,122,.09);color:var(--gold-lt)}
.langtog,.nav.solid .langtog{border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.langtog button,.nav.solid .langtog button{color:var(--soft);border-radius:999px}
.langtog button.on{background:var(--g-grad);color:#150f04}
.burger span,.nav.solid .burger span{background:var(--ink)}
@media(max-width:1180px){
  header.nav.solid .nav-inner{height:68px}
  header.nav.solid .brand img{height:52px;width:52px}
  .mobile{background:rgba(12,12,15,.9);border:1px solid rgba(255,255,255,.09);border-radius:22px;margin:8px 16px 0;padding:10px 22px;
    -webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%);box-shadow:0 30px 70px -20px rgba(0,0,0,.9)}
  .mobile a{color:var(--soft);border-bottom-color:rgba(255,255,255,.07)}
  header.nav.menu-open{background:transparent}
}

/* ---------- hero (home) ---------- */
.hero{background:#030304}
.hero .bg,.phero .bg{inset:-5%;will-change:transform;transition:transform .35s ease-out;transform:scale(1.06)}
.hero .bg img{opacity:.8;filter:saturate(1.06) contrast(1.06)}
.hero .bg:after{background:linear-gradient(96deg,rgba(4,4,6,.97) 0%,rgba(4,4,6,.84) 33%,rgba(4,4,6,.38) 63%,rgba(4,4,6,.58) 100%)}
.hero .bg:before{background:linear-gradient(0deg,var(--bg) 0%,rgba(6,6,8,.65) 16%,transparent 42%)}
.hero p{color:#e9e3d6}
.hero-trust{gap:10px}
.hero-trust > span{padding:8px 14px 8px 11px;border-radius:999px;background:var(--glass);border:1px solid var(--edge);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);color:rgba(240,235,224,.86);font-size:.62rem;box-shadow:var(--hi)}

/* the live 3D layer (injected by bfh-glass.js) */
.bfh-3d{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity 1.8s var(--ease)}
.bfh-3d.on{opacity:1}
.bfh-3d canvas{display:block;width:100%;height:100%}
.phero .bfh-3d{z-index:1}
@media(max-width:900px){
  .hero.bfh-has3d .wrap{padding-top:calc(var(--h3d,300px) + 18px)}
}

/* stat bar = floating glass strip over the hero edge */
.stat-bar{background:transparent;border-bottom:0;margin-top:-78px;z-index:6}
.stat-inner{position:relative;border-radius:28px;overflow:hidden;background:var(--glass-strong);border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);box-shadow:var(--shadow),var(--hi)}
.stat-inner:before{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,var(--gold-lt),transparent);opacity:.8}
.stat-item{padding:32px 20px}
.stat-item b{font-size:2.6rem;letter-spacing:-.02em}
.stat-item span{color:var(--mute)}
.stat-div{background:linear-gradient(transparent,rgba(245,215,122,.35),transparent)}
@media(max-width:680px){.stat-bar{margin-top:-40px}.stat-item b{font-size:2rem}}

/* ---------- shared glass surfaces ---------- */
.hcard,.scard,.vals .v,.why-item,.bpost,.abox,.callout,.cform,.bk-panel,.faq details,.cinfo{
  background:var(--glass);border:1px solid var(--edge);border-radius:var(--r);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--shadow),var(--hi)}

/* hero service cards */
.hcards{gap:22px}
.hcard{position:relative;overflow:hidden}
.hcard:hover,.scard:hover,.why-item:hover,.bpost:hover{background:var(--glass-strong);border-color:var(--edge-gold);transform:none}
.hcard:hover h3,.scard:hover h3,.why-item:hover .why-title,.bpost:hover h3{color:#fff}
.hcard:hover p,.scard:hover p,.why-item:hover .why-desc,.bpost:hover .bexc{color:var(--soft)}
.hcard .ic,.why-icon{display:grid;place-items:center;width:58px;height:58px;padding:14px;border-radius:18px;
  background:radial-gradient(circle at 30% 20%,rgba(245,215,122,.28),rgba(245,215,122,.04) 70%);border:1px solid rgba(245,215,122,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 26px -12px rgba(212,167,63,.6)}
.hcard .ic svg,.why-icon svg{stroke:var(--gold-lt)}
.why-icon{width:52px;height:52px;padding:13px;margin-bottom:20px}
.hcard h3,.scard h3{color:#fbf7ef}
.hcard p,.scard p,.why-desc,.vals .v p{color:var(--mute)}
.hcard .more,.scard .more,.proj .more,.bpost .more{color:var(--gold-lt)}

/* service grid */
.cards{gap:24px;background:transparent;border:0}
.scard{overflow:hidden}
.scard.has-img .simg{margin:10px 10px 0;border-radius:16px;background:#0c0c0f}
.scard.has-img .sbody,.scard.has-img:hover .sbody{background:transparent}
.scard.has-img:hover{background:var(--glass-strong)}
.scard.has-img:hover h3{color:#fff}.scard.has-img:hover p{color:var(--soft)}
.scard .num{font-style:normal;font-size:1.05rem;letter-spacing:.14em;font-weight:600}

/* values + why */
.vals,.why-grid{gap:22px;background:transparent;border:0}
.vals .v{padding:48px 36px;position:relative;overflow:hidden}
.vals .v .vn{font-size:3.6rem;line-height:1;margin-bottom:26px}
.vals .v h3{color:#fbf7ef}
.why-item{position:relative;overflow:hidden}
.why-title{color:#fbf7ef}

/* split / about image */
.split .imgcard{border-radius:var(--r-lg);border:1px solid var(--edge-gold);background:#0c0c0f;box-shadow:0 50px 110px -34px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03)}
.split .imgcard:before{inset:14px;border-radius:22px;border-color:rgba(255,236,190,.28)}
.split .badge{bottom:20px;right:20px;border-radius:20px;background:rgba(10,10,12,.5);border:1px solid var(--edge-gold);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:var(--hi),0 20px 50px -20px rgba(0,0,0,.8)}
.split .badge span{color:var(--soft)}

/* checklist + chips */
.checks li{color:var(--soft);border-bottom-color:rgba(255,255,255,.07)}
.checks li:before{border-color:var(--gold-lt);background:rgba(245,215,122,.25);box-shadow:0 0 10px rgba(245,215,122,.6)}
.chips{gap:10px;border-top:0}
.chips span{margin:0;padding:10px 18px;border-radius:999px;background:var(--glass);border:1px solid var(--edge);color:var(--soft);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.chips span:hover{color:var(--gold-lt);border-color:var(--edge-gold)}

/* project + location tiles: photo with a glass caption */
.proj,.loc{border-radius:var(--r-lg);border:1px solid var(--edge);padding:20px;box-shadow:0 40px 90px -30px rgba(0,0,0,.85)}
.proj > div,.loc > div{width:100%;padding:26px 28px;border-radius:22px;background:rgba(8,8,10,.38);border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);box-shadow:var(--hi)}
.proj:before{background:linear-gradient(0deg,rgba(6,6,8,.75) 10%,rgba(6,6,8,.15) 60%,rgba(6,6,8,.05))}
.proj p{max-width:none}
.loc{padding:16px}
.loc > div{padding:22px 24px}
.loc .more{color:var(--soft)}
.loc .ln{top:26px;right:26px;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;font-size:1rem;color:var(--gold-lt);
  background:rgba(8,8,10,.35);border:1px solid var(--edge-gold);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* gallery */
.gallery{gap:16px}
.gallery a{border-radius:20px;border:1px solid var(--edge);background:#0c0c0f}
.gallery a:before{border-radius:12px}

/* bands */
.band{background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.008));border-top:1px solid rgba(255,255,255,.045);border-bottom:1px solid rgba(255,255,255,.03)}
.dark{background:transparent}

/* FAQ */
.faq details{padding:0 28px;margin-bottom:14px;border-bottom:1px solid var(--edge);transition:background .4s,border-color .4s}
.faq details[open]{background:var(--glass-strong);border-color:var(--edge-gold)}
.faq summary{color:#fbf7ef;font-size:1.28rem;padding:24px 52px 24px 0}
.faq summary:hover{color:var(--gold-lt)}
.faq summary:after{top:50%;right:0;width:34px;height:34px;margin-top:-17px;display:grid;place-items:center;border-radius:50%;
  font-size:1.25rem;line-height:1;color:var(--gold-lt);border:1px solid var(--edge-gold);background:rgba(245,215,122,.07)}
.faq p{color:var(--mute);padding-right:52px}

/* CTA: a glass slab over the photo */
.cta-final{background:#030304}
.cta-final .bg img{opacity:.42}
.cta-final .bg:after{background:radial-gradient(ellipse 70% 90% at 50% 50%,rgba(6,6,8,.35),rgba(6,6,8,.92))}
.cta-final .wrap{max-width:1000px;width:calc(100% - 44px);margin:0 auto;padding:84px 64px;border-radius:38px;
  background:var(--glass);border:1px solid var(--edge-gold);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 0 0 1px rgba(255,255,255,.03),0 50px 120px -30px rgba(0,0,0,.9),0 0 90px -30px rgba(212,167,63,.45),var(--hi)}
.cta-final p{color:#e9e3d6}
@media(max-width:680px){.cta-final .wrap{padding:56px 24px;border-radius:28px}}

/* contact + booking */
.cinfo{padding:6px 30px}
.cinfo .row{border-bottom-color:rgba(255,255,255,.07)}
.cinfo .row:last-child{border-bottom:0}
.cinfo .row .val{color:#fbf7ef}
.cform{padding:14px}
.cform iframe,.bk-panel iframe{border-radius:14px}
.cform input,.cform select,.cform textarea{color:var(--ink);border-bottom-color:rgba(255,255,255,.16)}
.cform select option{background:#121216;color:var(--ink)}
.booking{background:transparent;border-color:rgba(255,255,255,.05)}
.bk-tab{border-radius:999px;background:var(--glass);border:1px solid var(--edge);color:var(--soft);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.bk-tab:hover{border-color:var(--edge-gold);color:var(--gold-lt)}
.bk-tab.on{background:var(--g-grad);color:#150f04;border-color:rgba(255,241,200,.7)}
.bk-note{color:var(--mute)}.bk-note a{color:var(--gold-lt);border-bottom-color:var(--line-2)}

/* interior page hero */
.phero{background:#030304}
.phero .bg img{opacity:.6}
.phero .bg:after{background:linear-gradient(96deg,rgba(4,4,6,.95),rgba(4,4,6,.66) 58%,rgba(4,4,6,.5)),linear-gradient(0deg,var(--bg),rgba(6,6,8,.25) 55%)}
.phero p{color:#e9e3d6}
.crumb{color:var(--faint)}

/* blog */
.bloglist{gap:26px}
.bpost{overflow:hidden}
.bpost .bimg{margin:10px 10px 0;border-radius:16px}
.bpost h3{color:#fbf7ef}
.abox.dark{background:var(--glass-dark);border-color:var(--edge-gold)}
.abox h4,.callout h4{color:#fbf7ef}
.callout{border-left:3px solid var(--gold-lt)}
.prose{color:var(--soft)}
.prose h2,.prose h3,.prose p strong,.prose li strong,.prose blockquote{color:#fbf7ef}
.prose h2{border-top-color:rgba(255,255,255,.07)}
.prose a{color:var(--gold-lt)}
.prose img{border-radius:20px;border:1px solid var(--edge)}
.prose table{border-radius:16px;overflow:hidden;border:1px solid var(--edge)}
.prose th{background:rgba(245,215,122,.1);color:var(--gold-lt)}
.prose td{border-bottom-color:rgba(255,255,255,.07)}
.prose tr:hover td{background:rgba(255,255,255,.04)}
.toc a{color:var(--mute);border-bottom-color:rgba(255,255,255,.07)}
.toc a:hover{color:var(--gold-lt)}
.nextread{border-top-color:rgba(255,255,255,.07)}

/* footer */
footer.site{position:relative;background:linear-gradient(180deg,rgba(10,10,12,.55),#030304 60%);border-top:1px solid rgba(245,215,122,.16);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
footer.site:before{content:"";position:absolute;top:-1px;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-lt),transparent);box-shadow:0 0 26px 2px rgba(245,215,122,.45)}
footer.site .fbrand img{filter:drop-shadow(0 8px 22px rgba(212,167,63,.4))}
footer.site .fbottom{border-top-color:rgba(255,255,255,.06)}

/* ---------- 3D motion ---------- */
.reveal{transform:perspective(1200px) translate3d(0,46px,0) rotateX(13deg) scale(.985);transform-origin:50% 100%;
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{transform:none}

.bfh-tilt{position:relative;will-change:transform;
  transition:opacity 1.1s var(--ease),transform .8s var(--ease),background .5s,border-color .5s,box-shadow .5s}
.bfh-tilt.tilt-on{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,-6px,0) !important;
  transition:transform .14s linear,background .5s,border-color .5s,box-shadow .5s !important;
  border-color:var(--edge-gold);
  box-shadow:0 46px 100px -28px rgba(0,0,0,.9),0 0 0 1px rgba(245,215,122,.22),0 22px 70px -34px rgba(212,167,63,.6),var(--hi)}
.bfh-glare{position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s;mix-blend-mode:screen;
  background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%),rgba(255,236,186,.17),transparent 45%)}
.tilt-on > .bfh-glare{opacity:1}

@media(prefers-reduced-motion:reduce){
  body:before,.kicker:before,.hero .eyebrow:before,.phero .eyebrow:before,
  .hero h1 em,.phero h1 em,h2.sec em,.cta-final h2 em,.stat-item b,.split .badge b,.vals .v .vn,.scard .num{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .hero .bg,.phero .bg{transition:none}
}

/* =====================================================================
   v2 — sleeker, sharper, glassier
   ===================================================================== */

/* crisp light-catching rim on every glass surface (top-left white → bottom-right gold) */
.hcard,.scard,.vals .v,.why-item,.bpost,.abox,.callout,.cform,.cinfo,.faq details,.bk-panel,.stat-inner,.cta-final .wrap{position:relative}
.hcard:after,.scard:after,.vals .v:after,.why-item:after,.bpost:after,.abox:after,.callout:after,.cform:after,.cinfo:after,
.faq details:after,.bk-panel:after,.stat-inner:after,.cta-final .wrap:after,header.nav .nav-inner:after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;background:var(--rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.bfh-tilt.tilt-on:after{background:linear-gradient(145deg,rgba(255,255,255,.6),rgba(255,255,255,.1) 30%,rgba(245,215,122,.15) 70%,rgba(245,215,122,.75))}
.stat-inner:before{z-index:4}

/* nav: a glass capsule from the first pixel, tighter when scrolled */
header.nav{padding-top:14px}
header.nav .nav-inner{position:relative;height:96px;padding:0 20px 0 12px;background:linear-gradient(158deg,rgba(28,28,34,.42),rgba(10,10,12,.22));
  border-color:transparent;-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  box-shadow:0 20px 60px -26px rgba(0,0,0,.7)}
header.nav .brand img{height:78px;width:78px}
header.nav.solid{padding-top:10px}
header.nav.solid .nav-inner{height:74px;background:var(--glass-dark)}
header.nav.solid .brand img{height:58px;width:58px}
.brand .tag{top:calc(100% - 4px);font-size:.48rem;letter-spacing:.2em}
.navlinks{gap:30px}
.navlinks a{font-size:.72rem;letter-spacing:.16em;font-weight:500}
@media(max-width:1180px){
  header.nav{padding-top:10px}
  header.nav .nav-inner{height:72px;padding:0 16px 0 8px}
  header.nav .brand img{height:56px;width:56px}
  header.nav.solid .nav-inner{height:64px}
  header.nav.solid .brand img{height:48px;width:48px}
}
@media(max-width:680px){header.nav .wrap{padding:0 12px}}

/* sharper type: heavier display weights, tighter tracking, solid body text */
.hero h1{font-weight:600;letter-spacing:-.03em;line-height:.98;font-size:clamp(2.3rem,4.6vw,4.3rem)}
.hero h1 em{font-weight:700;letter-spacing:-.028em}
.phero h1{font-weight:600;letter-spacing:-.03em;line-height:1}
h2.sec,.cta-final h2{font-weight:600;letter-spacing:-.028em;line-height:1}
h2.sec em,.cta-final h2 em,.phero h1 em{font-weight:700}
.hcard h3,.scard h3,.vals .v h3,.bpost h3,.proj h3,.loc h3{font-weight:600;letter-spacing:-.018em}
.lead,.hero p,.phero p,.hcard p,.scard p,.vals .v p,.why-desc,.faq p,.prose,.cta-final p,.checks li,.bexc,footer.site p,footer.site a{font-weight:400}
.lead{font-size:1.12rem;color:#d3cdbf}

/* photo tiles: glass inner ring + crisper shadow */
.proj:after,.loc:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.18)}
.gallery a{box-shadow:0 24px 60px -30px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.06)}
.scard.has-img .simg,.bpost .bimg{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

/* gold scroll-progress hairline */
.bfh-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:70;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#a07828,#f5d77a 60%,#fff4c9);box-shadow:0 0 12px rgba(245,215,122,.7)}

/* hero: room for the 3D mark on phones */
@media(max-width:900px){.hero.bfh-has3d .wrap{padding-top:calc(var(--h3d,300px) + 26px)}}

/* light pools behind each section, so frosted glass has warmth to diffuse */
section{background:radial-gradient(46vmax 34vmax at 6% 72%,rgba(212,167,63,.10),transparent 70%)}
.band{background:radial-gradient(44vmax 32vmax at 94% 28%,rgba(245,215,122,.11),transparent 70%),
  linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.008))}
section.hero-cards{background:radial-gradient(40vmax 26vmax at 50% 40%,rgba(212,167,63,.09),transparent 70%)}

/* nav capsule: tagline lives in the footer, keep the bar clean */
header.nav .brand .tag{display:none}

/* hero fits above the fold: compact chips, wider measure */
.hero .wrap{padding-top:140px}
.hero-inner{max-width:680px}
.hero h1{font-size:clamp(2.3rem,4.4vw,3.95rem);margin-bottom:24px}
.hero p{max-width:560px;margin-bottom:30px}
.hero-trust{gap:8px;margin-bottom:30px}
.hero-trust > span{padding:6px 12px 6px 10px;font-size:.58rem;letter-spacing:.14em}
@media(max-width:680px){.hero .wrap{padding-top:120px}.hero-trust > span{font-size:.54rem}}