:root{
  --bg:#050912;--navy:#0B1628;
  --ivory:#F3F0E7;--ivory-dim:#A9AFBC;
  --gold-1:#8A6A1F;--gold-2:#C9A227;--gold-3:#E8C87A;--gold-4:#FBF0CE;
  --line:rgba(232,200,122,.16);--glass:rgba(255,255,255,.035);
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ivory);font-family:var(--sans);font-weight:300;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--gold-2);color:#000}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}

#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
.aurora{position:fixed;inset:-30%;z-index:-1;pointer-events:none;filter:blur(110px);opacity:.30}
.aurora i{position:absolute;display:block;border-radius:50%;mix-blend-mode:screen}
.a1{width:60vw;height:60vw;left:-10%;top:-5%;background:radial-gradient(circle,rgba(201,162,39,.30),transparent 62%);animation:d1 26s ease-in-out infinite}
.a2{width:55vw;height:55vw;right:-8%;top:18%;background:radial-gradient(circle,rgba(29,72,140,.42),transparent 62%);animation:d2 32s ease-in-out infinite}
.a3{width:48vw;height:48vw;left:22%;bottom:-12%;background:radial-gradient(circle,rgba(232,200,122,.18),transparent 62%);animation:d3 38s ease-in-out infinite}
@keyframes d1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9vw,7vh) scale(1.15)}}
@keyframes d2{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-8vw,10vh) scale(.9)}}
@keyframes d3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,-9vh) scale(1.2)}}
.grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.022;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.vign{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 80% at 50% 0%,transparent 30%,rgba(0,0,0,.55) 100%)}
#glow{position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(circle,rgba(232,200,122,.09),transparent 62%);transform:translate(-50%,-50%);opacity:0;transition:opacity .4s}
@media(hover:hover){#glow{opacity:1}}
main,header,footer{position:relative;z-index:3}

.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;font-weight:500;color:var(--gold-3);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:'';width:36px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-2))}
.eyebrow.center::after{content:'';width:36px;height:1px;background:linear-gradient(90deg,var(--gold-2),transparent)}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:300;letter-spacing:-.01em;line-height:1.05}
h2{font-size:clamp(2.3rem,4.6vw,3.9rem)}
.gold{background:linear-gradient(100deg,var(--gold-1) 0%,var(--gold-3) 22%,var(--gold-4) 40%,var(--gold-3) 58%,var(--gold-2) 80%,var(--gold-1) 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:sh 7s linear infinite}
@keyframes sh{0%{background-position:180% 0}100%{background-position:-80% 0}}
.lede{color:var(--ivory-dim);font-size:clamp(1rem,1.3vw,1.14rem);max-width:62ch}
section{padding:clamp(80px,10vw,140px) 0;position:relative}
.hr{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.rv{opacity:0;transform:translateY(32px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}

.btn{position:relative;display:inline-flex;align-items:center;gap:11px;padding:17px 34px;border:none;border-radius:2px;
  cursor:pointer;font-size:12px;letter-spacing:.19em;text-transform:uppercase;font-weight:600;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background-position .5s}
.btn-gold{color:#0B0A05;background:linear-gradient(115deg,var(--gold-1),var(--gold-3) 38%,var(--gold-4) 50%,var(--gold-3) 62%,var(--gold-1));
  background-size:220% 100%;box-shadow:0 12px 40px -12px rgba(201,162,39,.55)}
.btn-gold:hover{background-position:100% 0;transform:translateY(-3px);box-shadow:0 22px 60px -14px rgba(201,162,39,.75)}
.btn-gold:disabled{opacity:.6;cursor:wait;transform:none}
.btn-ghost{color:var(--ivory);background:transparent;box-shadow:inset 0 0 0 1px rgba(232,200,122,.30)}
.btn-ghost:hover{background:rgba(232,200,122,.07);transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(232,200,122,.6)}
.arw{transition:transform .45s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}

header{position:fixed;top:0;left:0;right:0;z-index:1000;transition:all .55s var(--ease)}
header.solid{background:rgba(5,9,18,.86);backdrop-filter:blur(22px);border-bottom:1px solid rgba(232,200,122,.11)}
.nav{display:flex;align-items:center;justify-content:space-between;height:88px;transition:height .55s var(--ease)}
header.solid .nav{height:70px}
.brand{display:flex;align-items:center;gap:13px}
.brand img{height:38px;width:auto;transition:height .55s var(--ease);filter:drop-shadow(0 0 14px rgba(232,200,122,.35))}
header.solid .brand img{height:32px}
.brand-txt{font-family:var(--serif);font-size:20px;letter-spacing:.30em;text-transform:uppercase;line-height:1;padding-top:3px}
.brand-txt small{display:block;font-family:var(--sans);font-size:8px;letter-spacing:.36em;color:var(--gold-3);margin-top:5px;font-weight:500}
.links{display:flex;gap:34px;align-items:center}
.links a{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--ivory-dim);font-weight:400;position:relative;padding:6px 0;transition:color .35s}
.links a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold-3);transition:width .45s var(--ease)}
.links a:hover{color:var(--ivory)}
.links a:hover::after{width:100%}
.links a.cur{color:var(--gold-3)}
.links a.cur::after{width:100%}
.nav-cta{padding:13px 24px!important;font-size:10px!important}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:9px}
.burger span{width:24px;height:1.5px;background:var(--ivory);display:block}
.mob{position:fixed;inset:0;background:rgba(5,9,18,.98);backdrop-filter:blur(26px);z-index:999;display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:26px;opacity:0;pointer-events:none;transition:opacity .5s}
.mob.open{opacity:1;pointer-events:all}
.mob a{font-family:var(--serif);font-size:30px}

/* hero */
.hero{min-height:100vh;display:flex;align-items:center;padding-top:110px;padding-bottom:70px}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;width:100%}
.hero h1{font-size:clamp(2.9rem,6.6vw,5.8rem);margin:26px 0 26px;line-height:.99}
.hero h1 em{font-style:italic;font-weight:400}
.hero-cta{display:flex;gap:16px;margin-top:42px;flex-wrap:wrap}
.hero-meta{display:flex;gap:32px;margin-top:50px;flex-wrap:wrap;padding-top:32px;border-top:1px solid rgba(255,255,255,.07)}
.hero-meta div{font-size:12px;color:var(--ivory-dim);letter-spacing:.05em;display:flex;align-items:center;gap:9px}
.dot{width:5px;height:5px;border-radius:50%;background:var(--gold-3);box-shadow:0 0 12px var(--gold-3);animation:pl 2.4s ease-in-out infinite}
@keyframes pl{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
50%{transform:translateY(-20px)}}
}
50%{opacity:1;transform:scale(1.14)}}
.scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:11px;
  font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--ivory-dim)}
.scroll-cue i{display:block;width:1px;height:52px;background:linear-gradient(180deg,var(--gold-3),transparent);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.3);opacity:.3;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}

/* page hero (inner pages) */
.phero{padding:190px 0 clamp(60px,7vw,100px);text-align:center;position:relative}
.phero h1{font-size:clamp(2.6rem,6vw,4.8rem);margin:24px 0 24px}
.phero .lede{margin:0 auto}
.phero::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(760px,80%);height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}

.marq{border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);padding:24px 0;overflow:hidden;background:rgba(255,255,255,.012)}
.marq-track{display:flex;gap:64px;width:max-content;animation:sl 44s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes sl{to{transform:translateX(-50%)}}
.marq span{font-family:var(--serif);font-size:19px;letter-spacing:.16em;color:rgba(243,240,231,.42);white-space:nowrap;display:flex;align-items:center;gap:64px}
.marq span::after{content:'\2726';color:var(--gold-2);font-size:11px}

.shead{max-width:780px;margin-bottom:68px}
.shead.center{margin-left:auto;margin-right:auto;text-align:center}
.shead h2{margin:24px 0 22px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:22px}
.card{position:relative;padding:44px 36px 40px;background:var(--glass);border:1px solid rgba(255,255,255,.07);border-radius:3px;overflow:hidden;
  transition:transform .6s var(--ease),border-color .6s,background .6s}
.card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .5s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(232,200,122,.13),transparent 60%)}
.card:hover{transform:translateY(-9px);border-color:rgba(232,200,122,.34);background:rgba(255,255,255,.05)}
.card:hover::before{opacity:1}
.card-ico{width:50px;height:50px;display:grid;place-items:center;border:1px solid rgba(232,200,122,.30);border-radius:2px;
  margin-bottom:26px;color:var(--gold-3);position:relative;z-index:2;transition:.5s;font-size:18px}
.card:hover .card-ico{background:rgba(232,200,122,.10);box-shadow:0 0 26px -6px rgba(232,200,122,.5)}
.card h3{font-size:1.55rem;margin-bottom:12px;position:relative;z-index:2}
.card p{font-size:.93rem;color:var(--ivory-dim);position:relative;z-index:2}
.card.link-card{cursor:pointer}
.card .go{margin-top:22px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-3);position:relative;z-index:2;display:inline-flex;gap:9px;align-items:center}

.steps{display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.steps::before{content:'';position:absolute;top:34px;left:11%;right:11%;height:1px;background:rgba(232,200,122,.16)}
.steps::after{content:'';position:absolute;top:34px;left:11%;height:1px;background:linear-gradient(90deg,var(--gold-2),var(--gold-4));width:0;transition:width 2.6s var(--ease) .3s}
.steps.in::after{width:78%}
.step{text-align:center;padding:0 26px}
.step b{width:68px;height:68px;margin:0 auto 30px;display:grid;place-items:center;border-radius:50%;background:var(--bg);
  border:1px solid rgba(232,200,122,.32);font-family:var(--serif);font-size:1.5rem;color:var(--gold-3);position:relative;z-index:2;transition:.6s}
.step:hover b{background:linear-gradient(140deg,var(--gold-1),var(--gold-3));color:#0B0A05;box-shadow:0 0 40px -6px rgba(232,200,122,.65);transform:scale(1.08)}
.step h3{font-size:1.5rem;margin-bottom:12px}
.step p{font-size:.92rem;color:var(--ivory-dim)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:74px;align-items:center}
.pkg{list-style:none;display:grid;gap:0}
.pkg li{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.07);transition:.4s;font-size:.97rem}
.pkg li:hover{padding-left:10px;border-color:rgba(232,200,122,.35)}
.pkg li:last-child{border-bottom:none}
.pkg .tick{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(232,200,122,.4);color:var(--gold-3);font-size:11px;margin-top:1px}
.pkg b{font-weight:500;display:block}
.pkg p{font-size:.86rem;color:var(--ivory-dim)}

.band{background:linear-gradient(140deg,rgba(201,162,39,.11),rgba(11,22,40,.65) 55%,rgba(201,162,39,.07));
  border:1px solid rgba(232,200,122,.22);border-radius:3px;padding:clamp(44px,6vw,78px);position:relative;overflow:hidden}
.band::after{content:'';position:absolute;width:520px;height:520px;right:-160px;top:-190px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,200,122,.16),transparent 66%);filter:blur(30px)}
.band-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center;position:relative;z-index:2}
.mailbox{padding:26px 28px;border:1px dashed rgba(232,200,122,.35);border-radius:3px;background:rgba(0,0,0,.25)}
.mailbox+.mailbox{margin-top:16px}
.mailbox small{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ivory-dim);display:block;margin-bottom:8px}
.mailbox a{font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.8rem);color:var(--gold-3);word-break:break-all}
.mailbox a:hover{color:var(--gold-4)}

.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{padding:44px 36px;border:1px solid rgba(255,255,255,.07);background:var(--glass);border-radius:3px;transition:.6s var(--ease)}
.quote:hover{border-color:rgba(232,200,122,.3);transform:translateY(-7px)}
.quote .stars{color:var(--gold-3);letter-spacing:4px;font-size:12px;margin-bottom:20px}
.quote p{font-family:var(--serif);font-size:1.26rem;line-height:1.45;margin-bottom:26px}
.quote cite{font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-dim)}
.quote cite b{display:block;color:var(--gold-3);margin-bottom:4px;font-weight:500}

/* form */
.form-shell{max-width:880px;margin:0 auto;border:1px solid rgba(232,200,122,.2);border-radius:3px;
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));padding:clamp(34px,5vw,62px)}
.prog{display:flex;gap:12px;margin-bottom:42px}
.prog div{flex:1;height:2px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.prog div::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--gold-2),var(--gold-4));transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.prog div.on::after{transform:scaleX(1)}
.fstep{display:none;animation:fd .6s var(--ease)}
.fstep.on{display:block}
@keyframes fd{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.frow.one{grid-template-columns:1fr}
.finput label{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-dim);margin-bottom:2px}
.finput label em{font-style:normal;color:var(--gold-3)}
.finput input,.finput select,.finput textarea{width:100%;padding:16px 2px;background:transparent;border:none;
  border-bottom:1px solid rgba(255,255,255,.16);outline:none;font-size:.98rem;font-weight:300;transition:.4s;resize:vertical}
.finput select option{background:var(--navy);color:var(--ivory)}
.finput input:focus,.finput select:focus,.finput textarea:focus{border-color:var(--gold-3)}
.finput input.bad,.finput select.bad{border-color:#C9847A}
.chks{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.chk-pill input{position:absolute;opacity:0;pointer-events:none}
.chk-pill span{display:inline-block;padding:11px 18px;border:1px solid rgba(255,255,255,.13);border-radius:2px;font-size:11px;
  letter-spacing:.11em;color:var(--ivory-dim);cursor:pointer;transition:.35s;text-transform:uppercase}
.chk-pill input:checked+span{border-color:var(--gold-2);color:var(--gold-3);background:rgba(232,200,122,.1)}
.consent{display:flex;gap:13px;align-items:flex-start;margin-top:30px;font-size:.83rem;color:var(--ivory-dim);line-height:1.65}
.consent input{margin-top:4px;accent-color:var(--gold-2);width:16px;height:16px;flex:0 0 auto}
.fnav{display:flex;justify-content:space-between;gap:14px;margin-top:36px;align-items:center;flex-wrap:wrap}
.fmini{font-size:11px;color:var(--ivory-dim)}
.err{color:#E0A79C;font-size:12px;margin-top:16px;display:none}
.err.on{display:block}
.done{text-align:center;padding:22px 0}
.done .ck{width:76px;height:76px;margin:0 auto 26px;border-radius:50%;display:grid;place-items:center;font-size:30px;color:#0B0A05;
  background:linear-gradient(140deg,var(--gold-2),var(--gold-4));box-shadow:0 0 50px -8px rgba(232,200,122,.7)}

.faq{max-width:880px;margin:0 auto}
.q{border-bottom:1px solid rgba(255,255,255,.09)}
.q button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:30px 0;background:none;border:none;
  cursor:pointer;text-align:left;font-family:var(--serif);font-size:1.3rem;color:var(--ivory);transition:color .4s}
.q button:hover{color:var(--gold-3)}
.q .pm{flex:0 0 auto;width:26px;height:26px;position:relative;transition:transform .5s var(--ease)}
.q .pm::before,.q .pm::after{content:'';position:absolute;background:var(--gold-3);transition:.5s var(--ease)}
.q .pm::before{left:0;right:0;top:50%;height:1px}
.q .pm::after{top:0;bottom:0;left:50%;width:1px}
.q.open .pm{transform:rotate(135deg)}
.q.open .pm::after{opacity:0}
.q .ans{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)}
.q .ans p{padding:0 0 30px;color:var(--ivory-dim);font-size:.96rem;max-width:70ch}

.finale{text-align:center;padding:clamp(100px,12vw,170px) 0}
.finale h2{font-size:clamp(2.5rem,6vw,4.8rem);margin:26px auto 28px;max-width:17ch}

footer{border-top:1px solid rgba(255,255,255,.08);padding:76px 0 40px;background:rgba(0,0,0,.32)}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:50px;margin-bottom:56px}
.fgrid h5{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-3);margin-bottom:22px;font-weight:500}
.fgrid ul{list-style:none;display:grid;gap:13px}
.fgrid ul a{font-size:.9rem;color:var(--ivory-dim);transition:color .3s}
.fgrid ul a:hover{color:var(--gold-3)}
.fbrand img{height:62px;width:auto;margin-bottom:22px;filter:drop-shadow(0 0 20px rgba(232,200,122,.25))}
.fbrand p{font-size:.88rem;color:var(--ivory-dim);max-width:32ch}
.fbot{border-top:1px solid rgba(255,255,255,.07);margin-top:54px;padding-top:34px;display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap}
.fbot p{font-size:11px;color:rgba(169,175,188,.7);max-width:78ch;line-height:1.8}
.fbot .cr{font-size:11px;letter-spacing:.14em;color:var(--ivory-dim);white-space:nowrap}

@media(max-width:1024px){
  .hero-grid,.split,.band-grid{grid-template-columns:1fr}
    .hero{padding-top:130px;min-height:auto}
  .quotes{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:52px}
  .steps::before,.steps::after{display:none}
  .fgrid{grid-template-columns:1fr 1fr}
  .split{gap:52px}
  .phero{padding-top:160px}
}
@media(max-width:768px){
  .links,.nav-cta{display:none}
  .burger{display:flex}
  .wrap{padding:0 22px}
  .frow{grid-template-columns:1fr}
  .hero-meta{gap:16px}
  .fgrid{grid-template-columns:1fr}
  #glow{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}.rv{opacity:1;transform:none}}

/* ══ footer brand — centred lockup ════════════════════════════════ */
.fgrid{grid-template-columns:1fr;gap:0}
.fbrand{text-align:center;display:flex;flex-direction:column;align-items:center;
  padding-bottom:52px;margin-bottom:48px;border-bottom:1px solid rgba(255,255,255,.08)}
.fbrand img{height:86px;width:auto;margin:0 auto 22px;
  filter:drop-shadow(0 0 26px rgba(232,200,122,.28));transition:.6s var(--ease)}
.fbrand:hover img{filter:drop-shadow(0 0 38px rgba(232,200,122,.45));transform:translateY(-3px)}
.fbrand p{max-width:46ch;margin:0 auto;font-size:.92rem;color:var(--ivory-dim);line-height:1.8}
.fcols{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.fcols h5{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-3);margin-bottom:22px;font-weight:500}
.fcols ul{list-style:none;display:grid;gap:13px}
.fcols ul a{font-size:.9rem;color:var(--ivory-dim);transition:color .3s;
  display:inline-flex;align-items:center;gap:9px;line-height:1.5}
.fcols ul a:hover{color:var(--gold-3)}
.fcols ul a .fe{width:16px;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;line-height:1;opacity:.85;flex:0 0 auto}
.fcols ul a:hover .fe{opacity:1}
@media(max-width:768px){
  .fcols{grid-template-columns:1fr;gap:34px;text-align:center}
  .fcols ul a{justify-content:center}
  .fbrand img{height:72px}
}

/* ══ unified emoji system — every glyph optically centred ═════════ */
.card-ico,.trio .te,.srv-row .se{
  width:46px;height:46px;display:grid;place-items:center;line-height:1;
  border:1px solid rgba(232,200,122,.26);
  background:linear-gradient(150deg,rgba(232,200,122,.09),rgba(255,255,255,.012));
  font-family:var(--sans);font-size:19px;font-variant-emoji:text;
  transition:.55s var(--ease);position:relative;z-index:2;text-align:center;padding:0}
.card-ico{margin-bottom:22px}
.trio .te{margin-bottom:22px}
.srv-row .se{margin-bottom:16px}
.card:hover .card-ico,.trio > div:hover .te,.srv-row:hover .se{
  border-color:rgba(232,200,122,.55);
  background:linear-gradient(150deg,rgba(232,200,122,.18),rgba(255,255,255,.03));
  box-shadow:0 0 26px -8px rgba(232,200,122,.55);transform:translateY(-3px)}

/* centred contexts: step / metric / tile / tab */
.step .se,.metric .me,.ctile .ci{
  display:flex;align-items:center;justify-content:center;width:100%;line-height:1;text-align:center}
.step .se{font-size:20px;margin-bottom:0;margin-top:14px;height:24px}
.metric .me{font-size:16px;margin-bottom:14px;height:20px;opacity:.9}
.ctile .ci{font-size:26px;margin-bottom:16px;height:32px}
.tabs button{line-height:1}
.tabs button .te{display:inline-flex;align-items:center;justify-content:center;line-height:1;height:16px}

/* emoji inside buttons and footer links sit on the text baseline cleanly */
.btn{line-height:1}
.fgrid ul a{display:inline-flex;align-items:center;gap:9px;line-height:1.5}
.fgrid ul a .fe{width:16px;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;line-height:1;opacity:.85;flex:0 0 auto}
.fgrid ul a:hover .fe{opacity:1}

/* ══ avra-style layer ═════════════════════════════════════════════ */
/* emoji icon tiles */
.card:hover .card-ico{animation:iconpop .6s var(--ease)}
@keyframes iconpop{0%{transform:translateY(0)}40%{transform:translateY(-6px) scale(1.12)}100%{transform:translateY(0)}}

/* contact info tiles */
.ctiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:64px}
.ctile{padding:38px 32px;border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  backdrop-filter:blur(6px);transition:.55s var(--ease);text-align:center}
.ctile:hover{transform:translateY(-7px);border-color:rgba(232,200,122,.34);background:rgba(255,255,255,.055)}
.ctile .ci{transition:transform .55s var(--ease)}
.ctile:hover .ci{transform:scale(1.16) translateY(-3px)}
.ctile h4{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-3);margin-bottom:10px;font-weight:500}
.ctile a,.ctile span.v{font-family:var(--serif);font-size:1.32rem;color:var(--ivory);transition:color .35s}
.ctile a:hover{color:var(--gold-3)}
@media(max-width:768px){.ctiles{grid-template-columns:1fr}}

/* tabbed forms */
.tabs{display:flex;gap:0;position:relative;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:44px}
.tabs button{flex:1;background:none;border:none;cursor:pointer;padding:20px 16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ivory-dim);transition:color .4s;display:flex;align-items:center;justify-content:center;gap:10px}
.tabs button .te{font-size:15px;transition:transform .45s var(--ease)}
.tabs button:hover{color:var(--ivory)}
.tabs button.on{color:var(--gold-3)}
.tabs button.on .te{transform:scale(1.2)}
.tabs .ink{position:absolute;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--gold-2),var(--gold-4));
  transition:left .55s var(--ease),width .55s var(--ease);box-shadow:0 0 14px rgba(232,200,122,.7)}
@media(max-width:600px){.tabs button{font-size:9px;letter-spacing:.14em;padding:16px 8px}}

.pane{display:none;animation:panein .55s var(--ease)}
.pane.on{display:block}
@keyframes panein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* animated gradient border on form shell */
.form-shell{position:relative;overflow:hidden}
.form-shell::before{content:'';position:absolute;inset:-1px;padding:1px;pointer-events:none;
  background:linear-gradient(120deg,transparent 20%,rgba(232,200,122,.55) 45%,rgba(251,240,206,.8) 50%,rgba(232,200,122,.55) 55%,transparent 80%);
  background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:borderrun 7s linear infinite;opacity:.65}
@keyframes borderrun{0%{background-position:200% 0}100%{background-position:-100% 0}}

/* shine sweep on gold buttons */
.btn-gold::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-22deg)}
.btn-gold:hover::after{animation:sweep .85s var(--ease)}
@keyframes sweep{to{left:150%}}

/* lit step badges */
.step b{transition:background .7s var(--ease),color .7s var(--ease),box-shadow .7s var(--ease),transform .7s var(--ease)}
.step.lit b{background:linear-gradient(140deg,var(--gold-1),var(--gold-3));color:#0B0A05;
  box-shadow:0 0 34px -8px rgba(232,200,122,.6)}
.step .se{transition:opacity .6s var(--ease),transform .6s var(--ease);opacity:0;transform:translateY(10px)}
.step.lit .se{opacity:1;transform:translateY(0)}
.step:hover .se{transform:translateY(-4px) scale(1.1)}

/* form section legend */
.leg{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:rgba(232,200,122,.7);
  display:block;margin:34px 0 18px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08)}
.leg:first-of-type{margin-top:0}

/* success state */
.sent{text-align:center;padding:30px 0;display:none;animation:panein .6s var(--ease)}
.sent.on{display:block}
.sent .ck{width:74px;height:74px;margin:0 auto 24px;display:grid;place-items:center;font-size:30px;color:#0B0A05;
  background:linear-gradient(140deg,var(--gold-2),var(--gold-4));box-shadow:0 0 46px -8px rgba(232,200,122,.7);
  animation:pop .7s var(--ease)}
@keyframes pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}

/* ══ futurist layer ═══════════════════════════════════════════════ */
:root{--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace}

/* scroll progress */
#pbar{position:fixed;top:0;left:0;right:0;height:2px;z-index:1001;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--gold-1),var(--gold-3),var(--gold-4));box-shadow:0 0 14px rgba(232,200,122,.6)}

/* perspective grid floor */
.hgrid{position:fixed;left:0;right:0;bottom:0;height:40vh;z-index:0;pointer-events:none;opacity:.16;
  background-image:linear-gradient(rgba(232,200,122,.20) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(232,200,122,.20) 1px,transparent 1px);
  background-size:78px 78px;
  transform:perspective(380px) rotateX(68deg);transform-origin:bottom center;
  mask-image:linear-gradient(180deg,transparent,#000 55%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);
  animation:floorrun 12s linear infinite}
@keyframes floorrun{to{background-position:0 78px,0 0}}

/* mono micro-label */
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.3em;font-weight:400}
.idx{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:rgba(232,200,122,.55);display:block;margin-bottom:14px}

/* HUD corner brackets */
.hud{position:relative}
.hud::before,.hud::after{content:'';position:absolute;width:16px;height:16px;pointer-events:none;
  border-color:rgba(232,200,122,.45);transition:.55s var(--ease);opacity:.7}
.hud::before{top:-1px;left:-1px;border-top:1px solid;border-left:1px solid}
.hud::after{bottom:-1px;right:-1px;border-bottom:1px solid;border-right:1px solid}
.hud:hover::before,.hud:hover::after{width:26px;height:26px;opacity:1;border-color:var(--gold-3)}

/* refined card */
.card{border-radius:0;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.card:hover{transform:translateY(-7px)}
.card-ico{border-radius:0;font-family:var(--mono);font-size:15px}
.card h3{font-size:1.42rem;letter-spacing:-.005em}
.card .kicker{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(232,200,122,.7);display:block;margin-bottom:10px;position:relative;z-index:2}

/* trio */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(232,200,122,.14);border:1px solid rgba(232,200,122,.14)}
.trio > div{background:var(--bg);padding:52px 40px;transition:background .5s;position:relative}
.trio > div:hover{background:rgba(232,200,122,.045)}
.trio h3{font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;font-weight:500;color:var(--gold-3);margin-bottom:20px}
.trio p{font-family:var(--serif);font-size:1.5rem;line-height:1.28;font-weight:300}
.trio small{display:block;margin-top:16px;font-size:.87rem;color:var(--ivory-dim);font-family:var(--sans);line-height:1.68}
@media(max-width:1024px){.trio{grid-template-columns:1fr}}

/* four-step process */
.steps.four{grid-template-columns:repeat(4,1fr)}
.steps.four::before,.steps.four::after{left:8%;right:8%}
.steps.four.in::after{width:84%}
.step b{border-radius:0;font-family:var(--mono);font-size:1rem;letter-spacing:.05em;width:60px;height:60px}
.step h3{font-size:1.32rem}
@media(max-width:1024px){.steps.four{grid-template-columns:1fr}}

/* metrics band */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(232,200,122,.14);border:1px solid rgba(232,200,122,.14)}
.metric{background:var(--bg);padding:48px 26px;text-align:center;transition:background .5s}
.metric:hover{background:rgba(232,200,122,.045)}
.metric b{display:block;font-family:var(--serif);font-size:clamp(2.3rem,4.2vw,3.5rem);font-weight:400;line-height:1;margin-bottom:12px}
.metric span{font-family:var(--mono);font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--ivory-dim)}
@media(max-width:1024px){.metrics{grid-template-columns:1fr 1fr}}

/* basics strip */
.basics{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:14px}
.basics div{padding:30px 28px;border:1px solid rgba(255,255,255,.09);background:var(--glass);transition:.5s var(--ease)}
.basics div:hover{border-color:rgba(232,200,122,.32);transform:translateY(-5px)}
.basics b{display:block;font-family:var(--serif);font-size:1.6rem;color:var(--gold-3);margin-bottom:6px;font-weight:400}
.basics span{font-size:.88rem;color:var(--ivory-dim)}
@media(max-width:768px){.basics{grid-template-columns:1fr}}

/* pull statement */
.pull{max-width:920px;margin:0 auto;text-align:center}
.pull p{font-family:var(--serif);font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.32;font-weight:300}
.pull p em{font-style:italic;color:var(--gold-3)}

/* two-column prose */
.prose2{display:grid;grid-template-columns:1fr 1fr;gap:66px;align-items:start}
.prose2 p{color:var(--ivory-dim);margin-bottom:20px;font-size:1rem;line-height:1.85}
.prose2 p:last-child{margin-bottom:0}
@media(max-width:1024px){.prose2{grid-template-columns:1fr;gap:26px}}

/* service rows */
.srv{border-top:1px solid rgba(255,255,255,.1)}
.srv-row{display:grid;grid-template-columns:auto 1fr auto;gap:38px;align-items:center;padding:44px 0;
  border-bottom:1px solid rgba(255,255,255,.1);transition:.55s var(--ease)}
.srv-row:hover{padding-left:16px;background:linear-gradient(90deg,rgba(232,200,122,.05),transparent 60%)}
.srv-row .n{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:rgba(232,200,122,.6)}
.srv-row h3{font-size:1.85rem;margin-bottom:10px}
.srv-row p{color:var(--ivory-dim);font-size:.95rem;max-width:62ch}
.srv-row .rng{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--gold-3);white-space:nowrap;text-align:right}
@media(max-width:768px){.srv-row{grid-template-columns:1fr;gap:14px;padding:34px 0}.srv-row .rng{text-align:left}}

/* nav density for 7 links */
.links{gap:24px}
.links a{font-size:11px;letter-spacing:.13em}
@media(max-width:1160px){.links{gap:18px}.links a{font-size:10px;letter-spacing:.1em}}

/* buttons squared */
.btn{border-radius:0;font-size:11px;letter-spacing:.2em;padding:18px 36px}
.mailbox,.form-shell,.band,.tiers,.quote{border-radius:0}

/* ══ clean pass ═══════════════════════════════════════════════════ */
/* calmer ambient emblem */

/* disciplined type scale */
h2{font-size:clamp(2.15rem,4.1vw,3.4rem);letter-spacing:-.015em}
.hero h1{font-size:clamp(2.7rem,5.9vw,5rem);letter-spacing:-.02em;line-height:1.02}
.phero h1{font-size:clamp(2.3rem,5vw,4rem);letter-spacing:-.02em}
.lede{font-size:clamp(.98rem,1.15vw,1.08rem);line-height:1.78}
.shead{margin-bottom:60px}
section{padding:clamp(76px,8.5vw,124px) 0}
.finale{padding:clamp(90px,10vw,140px) 0}
.finale h2{font-size:clamp(2.2rem,4.8vw,3.8rem)}

/* quieter marquee */
.marq{padding:20px 0}
.marq span{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:rgba(243,240,231,.34)}
.marq span::after{font-size:9px;color:rgba(232,200,122,.5)}
.marq-track{gap:52px}
.marq span{gap:52px}

/* tighter cards */
.card{padding:38px 32px 34px}
.card-ico{width:42px;height:42px;margin-bottom:22px;font-size:12px;letter-spacing:.06em}
.card p{font-size:.9rem;line-height:1.72}
.cards{gap:18px}

/* hairline section rules */
.hr{background:linear-gradient(90deg,transparent,rgba(232,200,122,.22),transparent)}

/* quotes */
.quote{padding:38px 32px}
.quote p{font-size:1.15rem}

/* metrics */
.metric{padding:42px 24px}
.metric b{font-size:clamp(2.1rem,3.6vw,3rem)}

/* trio */
.trio > div{padding:46px 36px}
.trio p{font-size:1.38rem}

/* nav polish */
header.solid{background:rgba(5,9,18,.9);border-bottom:1px solid rgba(232,200,122,.09)}
.brand-txt{font-size:19px;letter-spacing:.28em}
.brand-txt small{letter-spacing:.30em;font-size:7.5px}

/* footer */
footer{padding:66px 0 34px}
.fgrid{margin-bottom:48px;gap:44px}


/* ══════════════════════════════════════════════════════════════════
   EMOJI — FINAL AUTHORITY. This block is last in the stylesheet on
   purpose: colour-emoji fonts carry their own ascent/descent metrics,
   so every glyph gets a fixed box, an explicit emoji font stack, and
   line-height:1. Nothing here may be overridden above.
   ══════════════════════════════════════════════════════════════════ */
.card-ico,
.trio .te,
.srv-row .se,
.step .se,
.metric .me,
.ctile .ci,
.tabs button .te,
.fcols ul a .fe{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji",sans-serif;
  font-variant-emoji:emoji;
  font-weight:400;
  line-height:1;
  letter-spacing:0;
  font-style:normal;
  text-indent:0;
  overflow:hidden;
  -webkit-font-smoothing:auto;
}

/* boxed tiles: card / trio / services */
.card-ico,
.trio .te,
.srv-row .se{
  width:48px;height:48px;min-width:48px;min-height:48px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  border:1px solid rgba(232,200,122,.26);
  background:linear-gradient(150deg,rgba(232,200,122,.09),rgba(255,255,255,.012));
  transition:border-color .55s var(--ease),background .55s var(--ease),
             box-shadow .55s var(--ease),transform .55s var(--ease);
  position:relative;z-index:2;padding:0;margin-left:0;margin-right:0;
}
.card-ico{margin-bottom:24px}
.trio .te{margin-bottom:24px}
.srv-row .se{margin-bottom:18px}
.card:hover .card-ico,
.trio > div:hover .te,
.srv-row:hover .se{
  border-color:rgba(232,200,122,.55);
  background:linear-gradient(150deg,rgba(232,200,122,.18),rgba(255,255,255,.03));
  box-shadow:0 0 26px -8px rgba(232,200,122,.55);
  transform:translateY(-3px);
}
.card:hover .card-ico{animation:none}

/* centred, unboxed contexts */
.step .se,
.metric .me,
.ctile .ci{
  display:flex;align-items:center;justify-content:center;
  width:100%;border:none;background:none;padding:0;
}
.step .se{font-size:22px;height:26px;margin:16px auto 0}
.metric .me{font-size:17px;height:20px;margin:0 auto 14px;opacity:.9}
.ctile .ci{font-size:28px;height:34px;margin:0 auto 18px}

/* inline contexts */
.tabs button .te{display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;height:16px;width:auto;border:none;background:none}

/* emoji sitting inline inside buttons */
.btn{font-variant-emoji:emoji}
.fcols ul a .fe{display:inline-flex;align-items:center;justify-content:center;
  width:17px;height:14px;font-size:12px;border:none;background:none;opacity:.85;flex:0 0 auto}
.fcols ul a:hover .fe{opacity:1}

@media(max-width:768px){
  .card-ico,.trio .te,.srv-row .se{width:44px;height:44px;min-width:44px;min-height:44px;font-size:18px}
}

/* ══════════════════════════════════════════════════════════════════
   HORIZONTAL CENTRING — every emoji tile sits in the middle of its
   column, with the text block centred under it so the whole unit
   reads as one balanced stack.
   ══════════════════════════════════════════════════════════════════ */

/* Fast / Simple / Secure trio */
.trio > div{text-align:center}
.trio .te{margin-left:auto;margin-right:auto}
.trio h3{margin-left:auto;margin-right:auto}
.trio small{max-width:44ch;margin-left:auto;margin-right:auto}

/* why-choose-us + routing cards */
.card{text-align:center}
.card-ico{margin-left:auto;margin-right:auto}
.card .kicker{text-align:center}
.card h3{text-align:center}
.card p{margin-left:auto;margin-right:auto;max-width:38ch}
.card .go{justify-content:center;width:100%}

/* services rows */
.srv-row > div{text-align:center}
.srv-row .se{margin-left:auto;margin-right:auto}
.srv-row p{margin-left:auto;margin-right:auto}
.srv-row:hover{padding-left:0;background:linear-gradient(90deg,transparent,rgba(232,200,122,.05) 50%,transparent)}

/* already-centred contexts stay centred */
.step .se,.metric .me,.ctile .ci{margin-left:auto;margin-right:auto}

/* ══════════════════════════════════════════════════════════════════
   BYZ LAYER — bolder modern fintech pass. Sans headlines, badge
   pills, softened geometry, feature strip, stat statement.
   ══════════════════════════════════════════════════════════════════ */

/* headlines go bold sans, tight tracking */
h1,h2,.hero h1,.phero h1,.finale h2{
  font-family:var(--sans);font-weight:700;letter-spacing:-.035em;line-height:1.03}
h3{font-family:var(--sans);font-weight:600;letter-spacing:-.02em}
.hero h1{font-size:clamp(2.9rem,6.2vw,5.1rem)}
.phero h1{font-size:clamp(2.4rem,5.2vw,4.1rem);margin-top:26px}
h2{font-size:clamp(2.2rem,4.4vw,3.5rem)}
.finale h2{font-size:clamp(2.3rem,5vw,4rem)}
.hero h1 em,h1 em,h2 em{font-style:normal;font-weight:700}
/* serif kept where it earns its place */
.pull p,.brand-txt,.metric b,.basics b,.fx b{font-family:var(--serif)}
.gold{letter-spacing:-.035em}

/* softened modern geometry */
.card,.ctile,.form-shell,.mailbox,.trio,.metrics,.basics div,.band,.fxstrip{border-radius:12px}
.btn{border-radius:8px}
.card-ico,.trio .te,.srv-row .se{border-radius:12px}
.step b{border-radius:14px}

/* badge pill */
.badge{display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 14px;
  border:1px solid rgba(232,200,122,.34);border-radius:999px;
  background:linear-gradient(120deg,rgba(232,200,122,.14),rgba(255,255,255,.02));
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-3);backdrop-filter:blur(6px);
  box-shadow:0 0 30px -12px rgba(232,200,122,.65)}
.badge .bd{display:none!important}
@keyframes badgepulse{
  0%{box-shadow:0 0 0 0 rgba(232,200,122,.6)}
  70%{box-shadow:0 0 0 9px rgba(232,200,122,0)}
  100%{box-shadow:0 0 0 0 rgba(232,200,122,0)}}
.badge .be{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:13px;line-height:1}

/* feature strip */
.fxstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(232,200,122,.14);border:1px solid rgba(232,200,122,.14);overflow:hidden}
.fx{background:var(--bg);padding:34px 24px;text-align:center;transition:background .5s var(--ease)}
.fx:hover{background:rgba(232,200,122,.05)}
.fx .fxe{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;height:24px;margin-bottom:14px}
.fx b{display:block;font-size:1.45rem;font-weight:400;color:var(--gold-3);line-height:1;margin-bottom:8px}
.fx span{font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ivory-dim)}
@media(max-width:900px){.fxstrip{grid-template-columns:1fr 1fr}}

/* stat statement */
.statement{max-width:960px;margin:0 auto;text-align:center}
.statement h2{margin-bottom:26px}
.statement p{color:var(--ivory-dim);font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.85;max-width:62ch;margin:0 auto}
.statement .big{color:var(--gold-3);font-weight:600}

/* long-form "why" block */
.why{max-width:820px;margin:0 auto;text-align:center}
.why p{color:var(--ivory-dim);font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.9}
.why p strong{color:var(--ivory);font-weight:600}

/* bolder trio */
.trio h3{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.28em}
.trio p{font-family:var(--sans);font-size:1.22rem;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.trio .te{width:54px;height:54px;min-width:54px;min-height:54px;font-size:23px}

/* reassurance lines */
.reassure{display:grid;gap:14px;max-width:760px;margin:44px auto 0;text-align:center}
.reassure p{color:var(--ivory-dim);font-size:.98rem;display:flex;align-items:center;justify-content:center;gap:11px}
.reassure .re{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:14px;line-height:1}

/* nav + buttons a touch heavier */
.btn{font-weight:700;letter-spacing:.14em;font-size:11.5px}
.links a{font-weight:500}


/* ══ off: grid floor and scroll cue ═══════════════════════════════ */
.hgrid,.scroll-cue{display:none!important}

/* ══ dual-audience split ══════════════════════════════════════════ */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.path{position:relative;overflow:hidden;padding:52px 44px 46px;border-radius:14px;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  backdrop-filter:blur(6px);transition:.6s var(--ease);text-align:center}
.path::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .55s;
  background:radial-gradient(520px circle at 50% 0%,rgba(232,200,122,.14),transparent 65%)}
.path:hover{transform:translateY(-8px);border-color:rgba(232,200,122,.4);
  box-shadow:0 26px 70px -34px rgba(232,200,122,.5)}
.path:hover::before{opacity:1}
.path > *{position:relative;z-index:2}
.path .pe{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:26px;line-height:1;width:64px;height:64px;border-radius:16px;margin:0 auto 24px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(232,200,122,.3);
  background:linear-gradient(150deg,rgba(232,200,122,.12),rgba(255,255,255,.015));
  transition:.55s var(--ease)}
.path:hover .pe{transform:translateY(-4px) scale(1.06);border-color:rgba(232,200,122,.6);
  box-shadow:0 0 30px -8px rgba(232,200,122,.6)}
.path .pk{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold-3);display:block;margin-bottom:14px}
.path h3{font-size:1.75rem;margin-bottom:14px}
.path p{color:var(--ivory-dim);font-size:.96rem;line-height:1.75;max-width:40ch;margin:0 auto 26px}
.path ul{list-style:none;display:grid;gap:11px;margin:0 auto 30px;max-width:34ch;text-align:left}
.path ul li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--ivory-dim)}
.path ul li .pt{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:12px;line-height:1.5;flex:0 0 auto}
@media(max-width:900px){.paths{grid-template-columns:1fr}}

/* faq audience groups */
.faqgroup{margin-bottom:64px}
.faqgroup > .gh{display:flex;align-items:center;gap:13px;margin-bottom:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-3)}
.faqgroup > .gh .ge{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:15px;line-height:1}
.faqgroup > .gs{display:block;color:var(--ivory-dim);font-size:.95rem;margin-bottom:26px}





/* ══════════════════════════════════════════════════════════════════
   EDITORIAL PASS — the last word on type, colour and restraint.
   Goal: looks commissioned, not generated. Fewer effects, better
   typography, real spacing rhythm, confident detail.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --display:'Instrument Serif',"Iowan Old Style",Georgia,serif;
  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --bg:#04070E;
  --ink:#F4F1EA;
  --ink-2:#9AA3B2;
  --ink-3:#6B7382;
  --gold-1:#7E6220;--gold-2:#BE9A33;--gold-3:#DFC182;--gold-4:#F4E6BE;
  --hair:rgba(244,241,234,.10);
  --hair-gold:rgba(223,193,130,.22);
}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-weight:400;font-size:16.5px;line-height:1.65;letter-spacing:-.006em}

/* display type — the single biggest change */
h1,h2,.hero h1,.phero h1,.finale h2,.pull p,.statement h2{
  font-family:var(--display);font-weight:400;letter-spacing:-.018em;line-height:1.04}
.hero h1{font-size:clamp(3.1rem,6.8vw,5.9rem);line-height:.98}
.phero h1{font-size:clamp(2.6rem,5.6vw,4.5rem)}
h2{font-size:clamp(2.3rem,4.6vw,3.7rem)}
.finale h2{font-size:clamp(2.5rem,5.4vw,4.3rem)}
h1 em,h2 em,.hero h1 em{font-style:italic;font-weight:400}
h3{font-family:var(--sans);font-weight:600;letter-spacing:-.018em}

/* gold: refined static gradient, no shimmer animation */
.gold{
  background:linear-gradient(96deg,var(--gold-2) 0%,var(--gold-4) 46%,var(--gold-3) 100%);
  background-size:100% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:none!important;letter-spacing:-.018em}

/* labels: tracked small caps in the body face, not mono */
.eyebrow,.idx,.kicker,.leg,.fcols h5,.trio h3,.metric span,.fx span,.ctile h4,.path .pk{
  font-family:var(--sans)!important;font-weight:600!important;
  font-size:10.5px!important;letter-spacing:.2em!important;text-transform:uppercase}
.eyebrow::before,.eyebrow.center::after{width:26px;background:var(--gold-3);opacity:.5}
.idx{color:var(--ink-3);margin-bottom:18px}
.badge{font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.16em;
  padding:10px 18px;border-color:var(--hair-gold);
  background:rgba(223,193,130,.07);box-shadow:none;backdrop-filter:none}
.badge .bd{display:none!important}

/* body copy */
.lede{color:var(--ink-2);font-size:clamp(1.02rem,1.15vw,1.14rem);line-height:1.72;font-weight:400}
.card p,.step p,.trio small,.path p,.srv-row p,.q .ans p,.statement p,.why p,.prose2 p{
  color:var(--ink-2);font-weight:400}
.fmini{color:var(--ink-3)}

/* restraint: kill the generated-looking effects */
.aurora{opacity:.16;filter:blur(140px)}
.grain{opacity:.014}
#glow{display:none!important}
.form-shell::before{display:none!important}
.btn-gold::after{display:none!important}
.hud::before,.hud::after{opacity:.35;border-color:var(--hair-gold)}
.hud:hover::before,.hud:hover::after{opacity:.8;border-color:var(--gold-3)}
.vign{background:radial-gradient(130% 90% at 50% 0%,transparent 34%,rgba(0,0,0,.5) 100%)}

/* surfaces: flatter, more confident */
.card,.ctile,.path,.basics div,.quote{
  background:rgba(244,241,234,.022);border:1px solid var(--hair);
  backdrop-filter:none;border-radius:4px;box-shadow:none}
.card:hover,.ctile:hover,.path:hover,.basics div:hover{
  background:rgba(244,241,234,.038);border-color:var(--hair-gold);
  transform:translateY(-4px);box-shadow:none}
.trio,.metrics,.fxstrip{background:var(--hair);border:1px solid var(--hair);border-radius:4px}
.trio > div,.metric,.fx{background:var(--bg)}
.trio > div:hover,.metric:hover,.fx:hover{background:rgba(223,193,130,.03)}
.form-shell,.band,.mailbox{border-radius:4px;border-color:var(--hair-gold);box-shadow:none}
.btn{border-radius:3px}
.card-ico,.trio .te,.srv-row .se,.path .pe{
  border-radius:4px;border-color:var(--hair-gold);
  background:rgba(223,193,130,.055);box-shadow:none!important}
.card:hover .card-ico,.trio > div:hover .te,.srv-row:hover .se,.path:hover .pe{
  background:rgba(223,193,130,.11);border-color:var(--gold-3);box-shadow:none!important;
  transform:translateY(-2px)}
.step b{border-radius:4px;font-family:var(--sans);font-weight:600;font-size:.95rem;
  letter-spacing:.06em;border-color:var(--hair-gold)}
.step.lit b{box-shadow:none}

/* numbers keep the display face — they read as brand */
.metric b,.fx b,.basics b{font-family:var(--display);font-weight:400;letter-spacing:-.01em}
.metric b{font-size:clamp(2.4rem,4vw,3.3rem)}
.fx b{font-size:1.6rem}
.basics b{font-size:1.85rem}

/* editorial rhythm */
section{padding:clamp(84px,9vw,132px) 0}
.shead{margin-bottom:56px}
.wrap{max-width:1180px}
.hr{background:linear-gradient(90deg,transparent,var(--hair-gold),transparent)}

/* marquee: quieter, wider */
.marq{border-color:var(--hair);background:transparent;padding:22px 0}
.marq span{font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.2em;
  color:var(--ink-3)}
.marq span::after{content:'/';color:var(--gold-3);opacity:.45;font-size:11px}

/* nav */
header.solid{background:rgba(4,7,14,.92);border-bottom:1px solid var(--hair)}
.links a{font-family:var(--sans);font-weight:500;font-size:12.5px;letter-spacing:.02em;
  text-transform:none;color:var(--ink-2)}
.links a.cur{color:var(--ink)}
.links a::after{background:var(--gold-3)}
.brand-txt{font-family:var(--display);font-size:21px;letter-spacing:.2em;font-weight:400}
.brand-txt small{font-family:var(--sans);font-weight:600;font-size:8px;letter-spacing:.34em;color:var(--gold-3)}
.nav-cta{font-size:10.5px!important;letter-spacing:.12em!important}
.btn{font-family:var(--sans);font-weight:600;letter-spacing:.1em;font-size:11.5px;
  text-transform:uppercase;padding:17px 32px}

/* pull quote */
.pull p{font-size:clamp(1.8rem,3.6vw,2.9rem);line-height:1.22;letter-spacing:-.02em}
.pull p em{font-style:italic;color:var(--gold-3)}

/* statement */
.statement p{font-size:clamp(1.04rem,1.25vw,1.18rem);line-height:1.78}
.statement .big{color:var(--ink);font-weight:600}

/* services list reads like an index */
.srv-row{border-color:var(--hair)}
.srv-row:hover{background:linear-gradient(90deg,transparent,rgba(223,193,130,.035) 50%,transparent)}
.srv-row .n{font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.2em;color:var(--ink-3)}
.srv-row h3{font-family:var(--display);font-weight:400;font-size:2rem;letter-spacing:-.018em}
.srv-row .rng{font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.14em;color:var(--gold-3)}

/* cards */
.card h3{font-size:1.3rem}
.card .kicker{color:var(--gold-3);opacity:.85}
.trio p{font-family:var(--display);font-weight:400;font-size:1.55rem;letter-spacing:-.018em;line-height:1.18}
.trio h3{color:var(--gold-3)}
.path h3{font-family:var(--display);font-weight:400;font-size:1.95rem;letter-spacing:-.018em}

/* faq */
.q{border-color:var(--hair)}
.q button{font-family:var(--display);font-weight:400;font-size:1.4rem;letter-spacing:-.015em}
.faqgroup > .gh{font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.2em;color:var(--gold-3)}
.faqgroup > .gs{color:var(--ink-3)}

/* forms */
.finput label{font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.18em;color:var(--ink-3)}
.finput input,.finput select,.finput textarea{font-weight:400;border-bottom-color:var(--hair)}
.finput input:focus,.finput select:focus,.finput textarea:focus{border-bottom-color:var(--gold-3)}
.leg{color:var(--gold-3);border-bottom-color:var(--hair)}
.chk-pill span{border-radius:3px;border-color:var(--hair);font-weight:600;letter-spacing:.08em}
.ctile a,.ctile span.v{font-family:var(--display);font-weight:400;font-size:1.4rem;letter-spacing:-.01em}
.mailbox a{font-family:var(--display);font-weight:400;letter-spacing:-.01em}
.mailbox small{font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.2em;color:var(--ink-3)}

/* quotes */
.quote p{font-family:var(--display);font-weight:400;font-size:1.35rem;letter-spacing:-.015em;line-height:1.32}
.quote cite b{font-family:var(--sans);font-weight:600;letter-spacing:.1em}

/* footer */
.fbrand p{color:var(--ink-2);font-size:.95rem;max-width:44ch}
.fcols h5{color:var(--gold-3)}
.fcols ul a{color:var(--ink-2);font-size:.92rem;font-weight:400}
.fbot p{color:var(--ink-3);font-size:11.5px;line-height:1.75}
.fbot .cr{color:var(--ink-3);font-family:var(--sans);font-weight:500;letter-spacing:.1em}
footer{background:rgba(0,0,0,.24);border-top:1px solid var(--hair)}

/* emblem: quieter */

/* progress bar: thinner, calmer */
#pbar{height:1.5px;box-shadow:none;
  background:linear-gradient(90deg,var(--gold-2),var(--gold-4))}

/* selection */
::selection{background:var(--gold-3);color:#08060A}

@media(max-width:768px){
  body{font-size:16px}
  .hero h1{font-size:clamp(2.6rem,10vw,3.4rem)}
}


/* ══════════════════════════════════════════════════════════════════
   TYPE — Inter throughout, the Byzfunder treatment: heavy geometric
   sans, tight negative tracking, no serif anywhere.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --display:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --mono:'Inter',ui-monospace,monospace;
}
body{font-family:var(--sans);font-weight:400;font-size:16.5px;
  line-height:1.6;letter-spacing:-.011em;font-feature-settings:'cv11','ss01'}

/* headlines: heavy, tight, flat */
h1,h2,h3,.hero h1,.phero h1,.finale h2,.statement h2,.pull p,
.srv-row h3,.path h3,.trio p,.q button,.quote p,
.metric b,.fx b,.basics b,.ctile a,.ctile span.v,.mailbox a,.brand-txt{
  font-family:var(--sans)!important}
h1,h2,.hero h1,.phero h1,.finale h2,.statement h2{
  font-weight:800!important;letter-spacing:-.042em!important;line-height:1.02}
h3{font-weight:700!important;letter-spacing:-.028em!important}
.hero h1{font-size:clamp(2.9rem,6.4vw,5.3rem)}
.phero h1{font-size:clamp(2.4rem,5.2vw,4.1rem)}
h2{font-size:clamp(2.15rem,4.3vw,3.5rem)}
.finale h2{font-size:clamp(2.3rem,5vw,3.9rem)}
/* no italics — bold instead */
h1 em,h2 em,.hero h1 em,.pull p em{font-style:normal;font-weight:800}
.gold{letter-spacing:-.042em}

/* numerals: heavy + tabular */
.metric b,.fx b,.basics b{font-weight:800!important;letter-spacing:-.04em!important;
  font-variant-numeric:tabular-nums}
.metric b{font-size:clamp(2.3rem,3.9vw,3.2rem)}
.fx b{font-size:1.55rem}
.basics b{font-size:1.8rem}

/* supporting type */
.pull p{font-weight:800!important;font-size:clamp(1.6rem,3.2vw,2.5rem);
  letter-spacing:-.04em;line-height:1.18}
.pull p em{color:var(--gold-3)}
.trio p{font-weight:700!important;font-size:1.2rem;letter-spacing:-.028em;line-height:1.28}
.srv-row h3{font-weight:700!important;font-size:1.7rem;letter-spacing:-.03em}
.path h3{font-weight:700!important;font-size:1.65rem;letter-spacing:-.03em}
.q button{font-weight:600!important;font-size:1.14rem;letter-spacing:-.022em}
.quote p{font-weight:600!important;font-size:1.15rem;letter-spacing:-.022em;line-height:1.45}
.card h3{font-size:1.24rem}
.ctile a,.ctile span.v{font-weight:700!important;font-size:1.16rem;letter-spacing:-.024em}
.mailbox a{font-weight:700!important;font-size:clamp(1.05rem,1.9vw,1.35rem);letter-spacing:-.024em}
.brand-txt{font-weight:800!important;font-size:17px;letter-spacing:.16em}
.brand-txt small{font-weight:700;font-size:7.5px;letter-spacing:.3em}

/* labels */
.eyebrow,.idx,.kicker,.leg,.fcols h5,.trio h3,.metric span,.fx span,
.ctile h4,.path .pk,.marq span,.faqgroup > .gh,.srv-row .n,.srv-row .rng,
.finput label,.mailbox small,.quote cite b{
  font-family:var(--sans)!important;font-weight:700!important;
  letter-spacing:.13em!important;text-transform:uppercase}
.eyebrow,.idx,.kicker,.leg,.fcols h5,.metric span,.fx span,.ctile h4,
.path .pk,.marq span,.faqgroup > .gh,.srv-row .n,.srv-row .rng,.mailbox small{font-size:10.5px!important}
.trio h3{font-size:11px!important;letter-spacing:.2em!important}
.badge{font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:.13em}
.btn{font-family:var(--sans);font-weight:700;letter-spacing:.1em;font-size:11.5px}
.lede{font-weight:400;letter-spacing:-.008em}
.links a{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:-.004em}

@media(max-width:768px){.hero h1{font-size:clamp(2.5rem,9.5vw,3.3rem)}}


/* ══════════════════════════════════════════════════════════════════
   CRAFT PASS — accessibility, comparison table, capability strip,
   sticky mobile CTA, optical detail.
   ══════════════════════════════════════════════════════════════════ */

/* accessibility: visible focus + skip link */
.skip{position:fixed;top:-60px;left:16px;z-index:1200;padding:12px 18px;
  background:var(--gold-3);color:#08060A;font-weight:700;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;border-radius:3px;transition:top .3s var(--ease)}
.skip:focus{top:14px}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold-3);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}

/* optical detail: hanging punctuation + tighter big type */
.hero h1,.finale h2,.statement h2{text-wrap:balance}
.lede,.statement p,.why p,.card p,.trio small{text-wrap:pretty}
.hero h1{margin-left:-.02em}

/* capability strip */
.caps{display:flex;flex-wrap:wrap;justify-content:center;gap:0;
  border:1px solid var(--hair);border-radius:4px;overflow:hidden}
.caps > div{flex:1 1 200px;padding:26px 22px;text-align:center;
  border-right:1px solid var(--hair);transition:background .45s var(--ease)}
.caps > div:last-child{border-right:none}
.caps > div:hover{background:rgba(223,193,130,.03)}
.caps b{display:block;font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-3);margin-bottom:8px}
.caps span{font-size:.87rem;color:var(--ink-3);letter-spacing:-.004em}
@media(max-width:768px){.caps > div{border-right:none;border-bottom:1px solid var(--hair)}
  .caps > div:last-child{border-bottom:none}}


/* sticky mobile CTA */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:900;display:none;gap:10px;
  padding:12px 14px;background:rgba(4,7,14,.94);backdrop-filter:blur(18px);
  border-top:1px solid var(--hair)}
.stickybar .btn{flex:1;justify-content:center;padding:15px 12px;font-size:10.5px}
@media(max-width:768px){
  .stickybar{display:flex}
  footer{padding-bottom:96px}
}

/* card hover stays a clean border shift — no gradient edge */
.card,.path{position:relative}

/* section rule with a node */
.rule{display:flex;align-items:center;gap:0;margin:0}
.rule i{flex:1;height:1px;background:var(--hair)}
.rule s{width:5px;height:5px;border-radius:50%;background:var(--gold-3);
  opacity:.6;text-decoration:none;flex:0 0 auto}

/* smoother reveal */
.rv{transform:translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease)}

/* link underlines in prose */
.why a,.prose2 a,.statement a{text-decoration:none;
  border-bottom:1px solid rgba(223,193,130,.4);padding-bottom:1px;transition:border-color .3s}
.why a:hover,.prose2 a:hover,.statement a:hover{border-color:var(--gold-3)}

/* selects get a chevron so they don't look like broken inputs */
.finput select{appearance:none;-webkit-appearance:none;padding-right:26px;
  background-image:linear-gradient(45deg,transparent 50%,rgba(223,193,130,.75) 50%),
                   linear-gradient(135deg,rgba(223,193,130,.75) 50%,transparent 50%);
  background-position:calc(100% - 12px) calc(50% + 2px),calc(100% - 7px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}

/* print */
@media print{
  .aurora,#stars,.grain,.vign,#pbar,.stickybar,header,.marq{display:none!important}
  body{background:#fff;color:#000}
}


/* ══ industries grid ══════════════════════════════════════════════ */
.inds{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:4px;overflow:hidden}
.ind{background:var(--bg);padding:30px 24px;transition:background .45s var(--ease)}
.ind:hover{background:rgba(223,193,130,.035)}
.ind b{display:block;font-weight:700;font-size:.99rem;letter-spacing:-.022em;margin-bottom:6px}
.ind span{font-size:.83rem;color:var(--ink-3);letter-spacing:-.004em;line-height:1.6;display:block}
@media(max-width:1024px){.inds{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.inds{grid-template-columns:1fr}}

/* two-column editorial section header on wide screens */
@media(min-width:1000px){
  .shead.split-head{display:grid;grid-template-columns:.34fr .66fr;gap:44px;
    align-items:start;max-width:none;text-align:left}
  .shead.split-head .idx{margin-bottom:0;padding-top:.6em}
  .shead.split-head h2{margin-top:0}
  .shead.split-head .lede{margin-left:0}
}


/* ══════════════════════════════════════════════════════════════════
   HOUSE STYLE — the marks of a site somebody actually art-directed:
   asymmetry, an index system, hanging quotes, footnotes, a desk
   status line. Fewer centred grids, more editorial structure.
   ══════════════════════════════════════════════════════════════════ */

/* index numerals sit in the margin, oversized and quiet */
.shead.split-head{display:block}
@media(min-width:1000px){
  .shead.split-head{display:grid;grid-template-columns:120px 1fr;gap:36px;
    align-items:start;max-width:none;text-align:left}
  .shead.split-head .idx{margin:0;padding-top:.75em;font-size:10.5px!important;color:var(--ink-3)}
  .shead.split-head h2{margin-top:0}
  .shead.split-head .lede{margin-left:0;max-width:56ch}
}

/* steps carry a ghost numeral behind them */
.step{position:relative}
.step::before{content:attr(data-n);position:absolute;top:-18px;left:50%;
  transform:translateX(-50%);font-weight:800;font-size:5.4rem;letter-spacing:-.05em;
  color:rgba(244,241,234,.028);pointer-events:none;z-index:0;line-height:1}
.step > *{position:relative;z-index:1}

/* hanging quote on pull statements */
.pull{position:relative}
.pull.quoted::before{content:'C';position:absolute;top:-.34em;left:50%;
  transform:translateX(-50%);font-size:6rem;line-height:1;color:rgba(223,193,130,.13);
  pointer-events:none;font-weight:800}


/* footnote line — the detail template sites never bother with */
.fnote{margin-top:22px;font-size:11.5px;color:var(--ink-3);line-height:1.7;
  max-width:74ch;letter-spacing:-.002em}
.fnote sup{color:var(--gold-3);font-weight:700;margin-right:4px}

/* asymmetric hero: copy column narrower, headline allowed to run wide */
@media(min-width:1000px){
  .hero-grid{grid-template-columns:1.22fr .78fr;gap:52px}
  .hero .lede{max-width:46ch}
  .hero h1{margin-right:-4%}
}

/* the trio picks up a rule + index rather than sitting as three equal boxes */
.trio > div{position:relative;padding-top:52px}
.trio > div::after{content:attr(data-i);position:absolute;top:22px;right:24px;
  font-weight:700;font-size:10.5px;letter-spacing:.16em;color:var(--ink-3);opacity:.7}

/* services index numerals get weight */
.srv-row .n{font-size:11px!important;color:var(--gold-3)!important;opacity:.75}


/* small caps lead-in on the first paragraph of long-form blocks */
.why > p:first-child::first-line{letter-spacing:.01em}

/* nav: current page gets a marker rather than only colour */
.links a.cur::before{content:'';position:absolute;left:-11px;top:50%;width:3px;height:3px;
  border-radius:50%;background:var(--gold-3);transform:translateY(-50%)}
.links a{position:relative}



/* the moving group: ring + mark travel together */

/* ring sits inside the group and no longer moves independently */

/* the mark itself: no separate float, and comfortably inside the ring */


@media(prefers-reduced-motion:reduce){}



/* bigger circle: sits almost at the edge of the emblem box */

/* bigger mark, still clear of the ring on every side */


@media(max-width:1024px){
  }
@media(max-width:600px){
    }
@media(prefers-reduced-motion:reduce){}



/* the drifting group — square, sized so the ring hugs the artwork */

/* the collar: fills the group exactly, so it tracks the mark's size */

/* the mark: as large as it can be while staying inside the collar */


@media(max-width:1024px){}
@media(max-width:600px){}
@media(prefers-reduced-motion:reduce){}



/* fixed ring — rotates in place, never travels */

/* only the mark hovers */


@media(max-width:1024px){}
@media(max-width:600px){  }
@media(prefers-reduced-motion:reduce){}



/* 1 — breathing halo */

/* 2 — the fixed ring */

/* 3 — a gold arc sweeping around that ring */

/* 4 — the dot, on its own slow track */

/* 5 — the mark, levitating */

@media(max-width:1024px){}
@media(max-width:600px){}
@media(prefers-reduced-motion:reduce){
    }



/* the mark: simple, slow float — nothing else moves with it */

@media(max-width:1024px){}
@media(max-width:600px){}
@media(prefers-reduced-motion:reduce){}

/* ══ cursor-follow glow, back on ═══════════════════════════════════ */
#glow{display:block!important;position:fixed;width:520px;height:520px;border-radius:50%;
  pointer-events:none;z-index:2;transform:translate(-50%,-50%);opacity:0;
  transition:opacity .4s;
  background:radial-gradient(circle,rgba(223,193,130,.085),transparent 62%)}
@media(hover:hover){#glow{opacity:1}}
@media(max-width:768px){#glow{display:none!important}}

/* ══ the drifting specks, back on ══════════════════════════════════ */
#stars{display:block!important;position:fixed;inset:0;z-index:0;pointer-events:none}



/* the mark: large, with a real 20px rise */

@media(max-width:1024px){}
@media(max-width:600px){}
@media(prefers-reduced-motion:reduce){
  }

/* ══════════════════════════════════════════════════════════════════
   HERO EMBLEM — two clearly separated circles.
   Previously they were 8% apart and read as a single line; they are
   now 17% apart, both well inside the box, and both brighter.

   radius as % of the emblem box
     inner circle 32%   (inset 18%)
     dot track    39.5% (inset 10.5%) <- exact midpoint
     outer circle 47%   (inset  3%)
     mark rests low and reaches 27.6% at the top of its lift
   ══════════════════════════════════════════════════════════════════ */
.emblem{position:relative;display:grid;place-items:center;
  aspect-ratio:1;width:100%;overflow:visible}

.emblem .halo{position:absolute;inset:26%;border-radius:50%;display:block;z-index:0;
  background:radial-gradient(circle,rgba(232,200,122,.20),transparent 68%);
  filter:blur(26px);
  animation:emblemBreathe 7s cubic-bezier(.42,0,.58,1) infinite}
@keyframes emblemBreathe{
  0%,100%{opacity:.58;transform:scale(1)}
  50%    {opacity:1;transform:scale(1.10)}
}

/* outer circle */
.emblem .r2{position:absolute;inset:3%;border-radius:50%;display:block;z-index:1;
  border:1.5px solid rgba(232,200,122,.46)}
/* inner circle */
.emblem .r1{position:absolute;inset:18%;border-radius:50%;display:block;z-index:1;
  border:1.2px solid rgba(232,200,122,.40)}

/* dot track — invisible, exactly halfway between the two circles */
.emblem .track{position:absolute;inset:10.5%;border-radius:50%;display:block;z-index:2;
  animation:emblemSpin 30s linear infinite}
@keyframes emblemSpin{to{transform:rotate(360deg)}}
.emblem .orb{position:absolute;top:-4px;left:50%;margin-left:-4px;display:block;
  width:8px;height:8px;border-radius:50%;background:#F4E6BE;
  box-shadow:0 0 18px 4px rgba(232,200,122,.7)}

/* cast shadow, sitting low in the inner circle */
.emblem .cast{position:absolute;z-index:1;display:block;
  left:50%;bottom:31%;width:26%;height:3.6%;margin-left:-13%;
  border-radius:50%;background:rgba(0,0,0,.66);filter:blur(10px);
  animation:emblemCast 7s cubic-bezier(.42,0,.58,1) infinite}
@keyframes emblemCast{
  0%,100%{transform:scale(1);opacity:.66}
  50%    {transform:scale(.68);opacity:.28}
}

/* the mark — rests lower in the circle, lifts from there */
.emblem img{position:relative;z-index:3;display:block;
  width:36%;max-width:36%;height:auto;
  filter:drop-shadow(0 0 40px rgba(232,200,122,.38));
  animation:emblemLift 7s cubic-bezier(.42,0,.58,1) infinite;
  will-change:transform}
@keyframes emblemLift{
  0%   {transform:translateY(9px)   scale(1)}
  50%  {transform:translateY(-10px) scale(1.03)}
  100% {transform:translateY(9px)   scale(1)}
}


@media(max-width:1024px){.emblem{max-width:400px;margin:0 auto}}
@media(max-width:600px){.emblem{max-width:310px}}
@media(prefers-reduced-motion:reduce){
  .emblem img,.emblem .cast,.emblem .halo,.emblem .track{animation:none}}


/* ══ header contact strip, four-tab nav ═══════════════════════════ */
.navside{display:flex;align-items:center;gap:20px}
.navtel,.navmail{font-size:12.5px;font-weight:500;color:var(--ink-2);
  letter-spacing:-.004em;transition:color .3s;white-space:nowrap}
.navtel:hover,.navmail:hover{color:var(--gold-3)}
.navmail{padding-right:20px;border-right:1px solid var(--hair)}
.links{gap:34px}
.links a{font-size:13px}
@media(max-width:1240px){.navmail{display:none}}
@media(max-width:1080px){.navtel{display:none}}
.mobtel,.mobmail{font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink-2)}


/* ══ stacked button label (title over subtitle) ═══════════════════ */
.btn-stack{flex-direction:row;align-items:center;gap:12px;padding:15px 26px;text-align:left}
.btn-stack b{display:block;font-weight:700;font-size:11.5px;letter-spacing:.1em;line-height:1.3}
.btn-stack small{display:block;font-weight:500;font-size:10px;letter-spacing:.04em;
  text-transform:none;opacity:.72;line-height:1.3}
.btn-stack b,.btn-stack small{margin:0}


@media(max-width:600px){
    }


/* ══ header: brand left, nav dead-centre, contact stacked right ═══
   The nav is positioned rather than gridded: with a grid the wider
   right-hand column stole space and shifted the tabs off centre. */
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{flex:0 0 auto}
.links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  gap:34px;margin:0;white-space:nowrap}
.navside{flex:0 0 auto;display:flex;align-items:center;gap:18px;margin-left:auto}

/* phone sits directly above the email so the block centres cleanly */
.navcontact{display:flex;flex-direction:column;align-items:flex-end;
  justify-content:center;gap:2px;line-height:1.35}
.navtel,.navmail{display:block;font-size:12px;font-weight:500;color:var(--ink-2);
  letter-spacing:-.004em;white-space:nowrap;transition:color .3s;
  border:0!important;padding:0!important;margin:0}
.navtel{font-weight:600;color:var(--ink)}
.navtel:hover,.navmail:hover{color:var(--gold-3)}

@media(max-width:1240px){.links{gap:24px}}
@media(max-width:1120px){.navcontact{display:none}}
@media(max-width:1180px){.links{gap:26px}}
@media(max-width:980px){.links{position:static;transform:none;margin:0 auto}}
@media(max-width:768px){.links{display:none}}


/* ══ header alignment — everything on one optical centre line ═════
   The brand lockup is two stacked lines, the contact block is two
   stacked lines, and the button is one. Each is centred inside a
   fixed-height bar so all three share the same middle. */
header .nav{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:24px;height:92px;transition:height .55s var(--ease)}
header.solid .nav{height:74px}

/* brand: mark and wordmark centred against each other */
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;line-height:1}
.brand img{height:38px;width:auto;display:block;transition:height .55s var(--ease)}
header.solid .brand img{height:33px}
.brand-txt{display:flex;flex-direction:column;justify-content:center;gap:5px;
  line-height:1;padding:0;margin:0}
.brand-txt small{margin:0;line-height:1}

/* tabs: locked to the exact centre of the header, vertically centred */
header .links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:34px;margin:0;padding:0;white-space:nowrap}
header .links a{display:flex;align-items:center;line-height:1;padding:4px 0}

/* right side: contact stack and button centred on the same line */
.navside{flex:0 0 auto;display:flex;align-items:center;gap:20px;margin-left:auto;line-height:1}
.navcontact{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  gap:4px;line-height:1}
.navtel,.navmail{display:block;line-height:1;margin:0;padding:0!important;border:0!important}
.nav-cta{display:inline-flex;align-items:center;line-height:1}

@media(max-width:1180px){header .links{gap:26px}}
@media(max-width:1040px){.navcontact{display:none}}
@media(max-width:860px){header .links{position:static;transform:none;margin:0 auto}}
@media(max-width:768px){header .links{display:none}header .nav{height:76px}}


/* ══════════════════════════════════════════════════════════════════
   PALETTE — brand navy ground.
   #061A33 is the navy sampled from the logo (#03162D), lifted a few
   steps for text contrast. Gold reads warmer on it and the ivory in
   the mark stops going grey.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#061A33;
  --navy:#0A2244;
  --hair:rgba(244,241,234,.12);
  --hair-gold:rgba(223,193,130,.26);
  --ink-2:#A6B0C0;
  --ink-3:#75839A;
}
body{background:var(--bg)}

/* depth: a soft vertical gradient rather than a flat field */
body::before{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,#08203E 0%,#061A33 42%,#04142A 100%)}

/* the ambient layers need re-balancing against a lighter ground */
.aurora{opacity:.22;filter:blur(150px)}
.a2{background:radial-gradient(circle,rgba(38,86,158,.40),transparent 62%)}
.vign{background:radial-gradient(135% 95% at 50% 0%,transparent 32%,rgba(2,9,20,.62) 100%)}
.grain{opacity:.018}

/* panels lift slightly so they separate from the navy */
.card,.ctile,.path,.basics div,.quote,.ind,.form-shell{
  background:rgba(255,255,255,.035)}
.card:hover,.ctile:hover,.path:hover,.basics div:hover,.ind:hover{
  background:rgba(255,255,255,.058)}
.trio > div,.metric,.fx{background:rgba(4,18,38,.55)}
.trio > div:hover,.metric:hover,.fx:hover{background:rgba(223,193,130,.05)}
.trio,.metrics,.fxstrip,.inds{background:var(--hair)}

header.solid{background:rgba(6,26,51,.93)}
.mob{background:rgba(6,26,51,.98)}
.stickybar{background:rgba(6,26,51,.95)}
footer{background:rgba(2,10,22,.42)}
.finput select option{background:#0A2244}
::selection{background:var(--gold-3);color:#061A33}
.btn-gold{color:#08111F}
.sent .ck,.done .ck{color:#08111F}


/* ══════════════════════════════════════════════════════════════════
   HEADER — name on one line, descriptor beneath, exactly as a
   funding brand lockup should read. Splitting "Clase" and "Capital"
   across two lines was making the whole bar look misaligned.
   ══════════════════════════════════════════════════════════════════ */
header .nav{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:28px;height:88px;transition:height .5s var(--ease)}
header.solid .nav{height:72px}

.brand{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.brand img{height:40px;width:auto;display:block;flex:0 0 auto;transition:height .5s var(--ease)}
header.solid .brand img{height:34px}
.brand-txt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:4px;line-height:1;font-family:var(--sans);font-weight:800;
  font-size:16px;letter-spacing:.02em;text-transform:none;color:var(--ink)}
.brand-txt small{font-family:var(--sans);font-weight:600;font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-3);line-height:1;margin:0}

/* tabs locked to the exact centre of the bar */
header .links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:36px;margin:0;padding:0;white-space:nowrap}
header .links a{display:flex;align-items:center;line-height:1;padding:5px 0;
  font-size:13.5px;font-weight:500}

/* right side sits on the same centre line */
.navside{flex:0 0 auto;display:flex;align-items:center;gap:20px;margin-left:auto}
.navcontact{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  gap:4px;line-height:1}
.navtel,.navmail{display:block;line-height:1;margin:0;padding:0!important;border:0!important;
  font-size:12px}
.navtel{font-weight:600;color:var(--ink)}
.navmail{font-weight:500;color:var(--ink-2)}

@media(max-width:1200px){header .links{gap:28px}}
@media(max-width:1060px){.navcontact{display:none}}
@media(max-width:900px){header .links{position:static;transform:none;margin:0 auto}}
@media(max-width:768px){
  header .links{display:none}
  header .nav{height:74px}
  .brand-txt{font-size:15px}
}


/* ══════════════════════════════════════════════════════════════════
   HEADER — tabs centred in the gap between the brand and the
   contact block. Page-centring put them under the logo because the
   right side is much wider than the left; centring them in the
   available space is what actually looks balanced.
   ══════════════════════════════════════════════════════════════════ */
header .nav{position:relative;display:flex;align-items:center;gap:20px;
  height:88px;transition:height .5s var(--ease)}
header.solid .nav{height:72px}

.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand img{height:38px;width:auto;display:block;flex:0 0 auto;transition:height .5s var(--ease)}
header.solid .brand img{height:33px}
.brand-txt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:5px;line-height:1;font-family:var(--sans);font-weight:800;font-size:17px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.brand-txt small{font-family:var(--sans);font-weight:700;font-size:8px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold-3);line-height:1;margin:0}

/* the tabs take the whole middle and centre themselves inside it */
header .links{position:static;transform:none;flex:1 1 auto;
  display:flex;align-items:center;justify-content:center;
  gap:36px;margin:0;padding:0;white-space:nowrap}
header .links a{display:flex;align-items:center;line-height:1;padding:5px 0;
  font-size:13.5px;font-weight:500}

.navside{flex:0 0 auto;display:flex;align-items:center;gap:18px;margin-left:0}
.navcontact{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  gap:4px;line-height:1}
.navtel,.navmail{display:block;line-height:1;margin:0;padding:0!important;border:0!important;font-size:12px}
.navtel{font-weight:600;color:var(--ink)}
.navmail{font-weight:500;color:var(--ink-2)}

@media(max-width:1200px){header .links{gap:26px}}
@media(max-width:1060px){.navcontact{display:none}}
@media(max-width:768px){
  header .links{display:none}
  header .nav{height:74px;justify-content:space-between}
}


/* ══════════════════════════════════════════════════════════════════
   HEADER — equal-width side columns.
   The brand and the contact block are both given the same flex
   basis, so they occupy identical widths regardless of content.
   With symmetric sides the tabs land dead centre and stay there.
   ══════════════════════════════════════════════════════════════════ */
header .nav{position:relative;display:flex;align-items:center;gap:16px;
  height:88px;transition:height .5s var(--ease)}
header.solid .nav{height:72px}

.brand{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:12px;justify-content:flex-start}
.brand img{height:38px;width:auto;display:block;flex:0 0 auto;transition:height .5s var(--ease)}
header.solid .brand img{height:33px}
.brand-txt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:5px;line-height:1;font-family:var(--sans);font-weight:800;font-size:17px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.brand-txt small{font-family:var(--sans);font-weight:700;font-size:8px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold-3);line-height:1;margin:0}

/* the tabs take only the space they need and sit between the two equal sides */
header .links{position:static;transform:none;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  gap:34px;margin:0;padding:0;white-space:nowrap}
header .links a{display:flex;align-items:center;line-height:1;padding:5px 0;
  font-size:13.5px;font-weight:500}

.navside{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:flex-end;
  gap:18px;margin-left:0}
.navcontact{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  gap:4px;line-height:1}
.navtel,.navmail{display:block;line-height:1;margin:0;padding:0!important;border:0!important;font-size:12px}
.navtel{font-weight:600;color:var(--ink)}
.navmail{font-weight:500;color:var(--ink-2)}

/* anchored sections clear the fixed header */
#formTop,#submit,#faq{scroll-margin-top:104px}

@media(max-width:1240px){header .links{gap:26px}}
@media(max-width:1100px){.navcontact{display:none}}
@media(max-width:900px){.brand-txt{font-size:15px;letter-spacing:.14em}}
@media(max-width:768px){
  header .links{display:none}
  header .nav{height:74px}
  .brand,.navside{flex:0 0 auto}
  header .nav{justify-content:space-between}
}


/* ══ cycling headline word ════════════════════════════════════════ */
.rot{display:inline-block;will-change:transform,opacity,filter;
  transition:opacity .34s cubic-bezier(.42,0,.58,1),
             transform .44s cubic-bezier(.34,1.3,.5,1),
             filter .34s ease}
.rot.out{opacity:0;transform:translateY(-14px) scale(.96);filter:blur(5px)}
.rot.in{opacity:0;transform:translateY(16px) scale(1.04);filter:blur(5px)}
@media(prefers-reduced-motion:reduce){.rot{transition:none}.rot.out,.rot.in{opacity:1;transform:none;filter:none}}


/* ══════════════════════════════════════════════════════════════════
   CALM PASS — smaller headline, plainer word swap, quieter emblem.
   ══════════════════════════════════════════════════════════════════ */

/* headline down a size */
.hero h1{font-size:clamp(2.3rem,4.4vw,3.6rem);line-height:1.06;letter-spacing:-.035em}
.hero .lede{font-size:clamp(.98rem,1.05vw,1.06rem);max-width:50ch}

/* the word swap is now a simple fade — no blur, no scale, no bounce */
.rot{display:inline-block;transition:opacity .45s ease}
.rot.out{opacity:0;transform:none;filter:none}
.rot.in{opacity:0;transform:none;filter:none}

/* emblem: shorter travel, steadier glow */
.emblem img{animation:emblemLift 9s cubic-bezier(.42,0,.58,1) infinite}
@keyframes emblemLift{
  0%   {transform:translateY(5px)  scale(1)}
  50%  {transform:translateY(-7px) scale(1)}
  100% {transform:translateY(5px)  scale(1)}
}
.emblem .halo{animation:none;opacity:.8}
.emblem .cast{animation:none;opacity:.42;transform:scale(.9)}

/* ambient layers settle down */
.aurora{opacity:.15}
@media(prefers-reduced-motion:reduce){.rot{transition:none}}


/* ══════════════════════════════════════════════════════════════════
   SUBMIT PAGE — the funding inbox, given room to breathe.
   ══════════════════════════════════════════════════════════════════ */
.mailcard{max-width:820px;margin:0 auto;text-align:center;padding:52px 44px 44px;
  border:1px solid var(--hair-gold);border-radius:6px;
  background:linear-gradient(160deg,rgba(223,193,130,.09),rgba(255,255,255,.02))}
.mailcard-label{display:block;font-weight:700;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-3);margin-bottom:20px}
.mailcard-addr{display:block;font-weight:800;letter-spacing:-.03em;color:var(--ink);
  font-size:clamp(1.3rem,3.4vw,2.35rem);word-break:break-word;transition:color .3s;margin-bottom:30px}
.mailcard-addr:hover{color:var(--gold-3)}
.mailcard-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:0}
.mailcard-note{display:block;font-size:12px;color:var(--ink-3)}

.subjectbox{max-width:820px;margin:20px auto 0;padding:26px 30px;text-align:center;
  border:1px dashed var(--hair-gold);border-radius:6px;background:rgba(255,255,255,.02)}
.sb-label{display:block;font-weight:700;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.sb-code{display:block;font-family:'IBM Plex Mono',monospace;font-size:clamp(.9rem,1.6vw,1.12rem);
  color:var(--gold-3);letter-spacing:.01em;margin:0}
.sb-hint{display:block;font-size:11.5px;color:var(--ink-3)}
.sb-note{display:block;margin-top:12px;font-size:12px;font-weight:500;
  color:var(--ink-2);letter-spacing:-.002em}

/* the four documents, evenly spaced */
.docgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.doc{position:relative;padding:34px 26px 30px;border:1px solid var(--hair);border-radius:6px;
  background:rgba(255,255,255,.035);text-align:center;transition:.5s var(--ease)}
.doc:hover{transform:translateY(-5px);border-color:var(--hair-gold);background:rgba(255,255,255,.058)}
.doc-n{position:absolute;top:14px;left:16px;font-family:'IBM Plex Mono',monospace;
  font-size:10px;letter-spacing:.16em;color:var(--ink-3);opacity:.75}
.doc-ico{display:flex;align-items:center;justify-content:center;height:34px;
  font-size:26px;line-height:1;margin:6px auto 18px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.doc b{display:block;font-weight:700;font-size:1rem;letter-spacing:-.02em;margin-bottom:9px}
.doc p{font-size:.85rem;color:var(--ink-2);line-height:1.65;margin:0}
@media(max-width:1000px){.docgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.docgrid{grid-template-columns:1fr}}

/* contact row */
.contactrow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:20px}
.crow{padding:26px 24px;border:1px solid var(--hair);border-radius:6px;
  background:rgba(255,255,255,.028);text-align:center;transition:.5s var(--ease)}
.crow:hover{border-color:var(--hair-gold);background:rgba(255,255,255,.05)}
.crow-ico{display:flex;align-items:center;justify-content:center;height:24px;font-size:19px;
  line-height:1;margin:0 auto 12px;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.crow-label{display:block;font-weight:700;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.crow a,.crow-val{font-weight:700;font-size:1.02rem;letter-spacing:-.02em;color:var(--ink);transition:color .3s}
.crow a:hover{color:var(--gold-3)}
@media(max-width:760px){.contactrow{grid-template-columns:1fr}}

#inbox{scroll-margin-top:104px}


/* ══════════════════════════════════════════════════════════════════
   HEADER v2 — two rows.
   Row 1 is a thin utility bar for phone / email / hours.
   Row 2 is the brand, the tabs, and one button. With only three
   items and equal side columns the tabs sit dead centre, and there
   is room for five of them without crowding.
   ══════════════════════════════════════════════════════════════════ */
header{background:transparent}
header.solid{background:rgba(6,26,51,.94);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--hair)}

/* row 1 — utility bar */
.topbar{border-bottom:1px solid rgba(244,241,234,.07);
  transition:height .45s var(--ease),opacity .35s var(--ease);
  height:38px;overflow:hidden}
.topbar-in{display:flex;align-items:center;justify-content:flex-end;gap:16px;height:38px}
.topbar-in a,.tb-hours{font-family:var(--sans);font-size:11.5px;font-weight:500;
  letter-spacing:-.002em;color:var(--ink-2);line-height:1;transition:color .3s;white-space:nowrap}
.topbar-in a:hover{color:var(--gold-3)}
.tb-hours{color:var(--ink-3)}
.tb-sep{width:1px;height:11px;background:rgba(244,241,234,.16);flex:0 0 auto}
header.solid .topbar{height:0;opacity:0;border-bottom-color:transparent}

/* row 2 — main bar */
header .nav{position:relative;display:flex;align-items:center;gap:20px;
  height:74px;transition:height .45s var(--ease)}
header.solid .nav{height:66px}

.brand{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:12px;justify-content:flex-start}
.brand img{height:36px;width:auto;display:block;flex:0 0 auto;transition:height .45s var(--ease)}
header.solid .brand img{height:32px}
.brand-txt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:5px;line-height:1;font-family:var(--sans);font-weight:800;font-size:16px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.brand-txt small{font-family:var(--sans);font-weight:700;font-size:7.5px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold-3);line-height:1;margin:0}

header .links{position:static;transform:none;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;gap:30px;margin:0;padding:0;white-space:nowrap}
header .links a{display:flex;align-items:center;line-height:1;padding:6px 0;
  font-size:13px;font-weight:500}

.navside{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:flex-end}

/* a quieter, better-proportioned CTA */
.nav-cta{padding:11px 20px!important;font-size:10.5px!important;letter-spacing:.12em!important;
  border-radius:3px;box-shadow:0 6px 20px -10px rgba(201,162,39,.6)}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 26px -10px rgba(201,162,39,.75)}

@media(max-width:1180px){header .links{gap:22px}header .links a{font-size:12.5px}}
@media(max-width:980px){.tb-hours,.tb-sep:last-of-type{display:none}}
@media(max-width:900px){
  header .links{display:none}
  .brand,.navside{flex:0 0 auto}
  header .nav{justify-content:space-between}
  .topbar-in{justify-content:center}
}
@media(max-width:600px){.topbar{height:34px}.topbar-in{height:34px;gap:12px}
  .topbar-in a{font-size:10.5px}.nav-cta{display:none}}

/* ══ gradient text was clipping its ascenders ═════════════════════ */
.gold{padding-bottom:.06em;padding-top:.02em}
.hero h1,.phero h1,h2{padding-bottom:.04em}
.rot{display:inline-block;line-height:1.18;padding:.06em 0}
.hero h1{line-height:1.12;overflow:visible}


/* ══════════════════════════════════════════════════════════════════
   HERO ENTRANCE — each element rises and fades in on load, one
   after the next. Delay is set per element with --d.
   ══════════════════════════════════════════════════════════════════ */
.pop{opacity:0;transform:translateY(26px);
  animation:popUp .95s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:var(--d,0s);will-change:transform,opacity}
@keyframes popUp{
  0%  {opacity:0;transform:translateY(26px)}
  100%{opacity:1;transform:translateY(0)}
}
/* the headline words sit on one line and rise together with their own delays */
.hero h1 .pop{display:inline-block}
.hero h1 .pop + .pop{margin-left:.28em}
.hero h1{line-height:1.14;padding-bottom:.06em}

/* the emblem drifts only after it has arrived */
.emblem.pop{animation:popUp 1.1s cubic-bezier(.16,1,.3,1) forwards;animation-delay:var(--d)}

@media(prefers-reduced-motion:reduce){
  .pop{opacity:1;transform:none;animation:none}
}


/* ══════════════════════════════════════════════════════════════════
   HERO ENTRANCE v2 — line masks.
   Each headline line sits in a hidden box and slides up from behind
   its own edge, so the words are revealed rather than faded in.
   The mask carries padding (and matching negative margin) so tall
   letters and the gold gradient are never clipped.
   ══════════════════════════════════════════════════════════════════ */
.hero h1{line-height:1.1;padding-bottom:0}
.mask{display:block;overflow:hidden;
  padding:.14em 0 .16em;margin:-.14em 0 -.16em}
.riser{display:block;transform:translateY(112%);
  animation:riseUp 1.05s cubic-bezier(.19,1,.22,1) forwards;
  animation-delay:var(--d,0s);will-change:transform}
@keyframes riseUp{
  0%  {transform:translateY(112%)}
  100%{transform:translateY(0)}
}

/* everything else fades up behind the headline */
.pop{opacity:0;transform:translateY(20px);
  animation:popUp .9s cubic-bezier(.19,1,.22,1) forwards;
  animation-delay:var(--d,0s);will-change:transform,opacity}
@keyframes popUp{to{opacity:1;transform:translateY(0)}}

/* the emblem eases in rather than sliding */
.emblem.pop{opacity:0;transform:scale(.94);
  animation:emblemIn 1.3s cubic-bezier(.19,1,.22,1) forwards;animation-delay:var(--d)}
@keyframes emblemIn{to{opacity:1;transform:scale(1)}}

@media(prefers-reduced-motion:reduce){
  .riser{transform:none;animation:none}
  .pop,.emblem.pop{opacity:1;transform:none;animation:none}
}


/* ══════════════════════════════════════════════════════════════════
   HERO ENTRANCE v3 — quick spring.
   Elements travel up and overshoot their resting point slightly
   before settling. That overshoot is the "pop"; a plain ease has
   none, which is why the earlier versions felt flat.
   Half a second each, tight stagger.
   ══════════════════════════════════════════════════════════════════ */
.pop{opacity:0;transform:translateY(30px);
  animation:popIn .52s cubic-bezier(.34,1.46,.64,1) forwards;
  animation-delay:var(--d,0s);will-change:transform,opacity}
@keyframes popIn{
  0%  {opacity:0;transform:translateY(30px)}
  60% {opacity:1}
  100%{opacity:1;transform:translateY(0)}
}
.hero h1 .pop{display:inline-block}
.hero h1{line-height:1.12;padding-bottom:.06em}

/* masks retired */
.mask{display:inline;overflow:visible;padding:0;margin:0}
.riser{display:inline;transform:none;animation:none}

/* the emblem springs in scale rather than position */
.emblem.pop{opacity:0;transform:scale(.92);
  animation:emblemIn .68s cubic-bezier(.34,1.4,.64,1) forwards;animation-delay:var(--d)}
@keyframes emblemIn{to{opacity:1;transform:scale(1)}}

/* scroll reveals match the same snap */
.rv{opacity:0;transform:translateY(24px);
  transition:opacity .5s cubic-bezier(.34,1.4,.64,1),transform .5s cubic-bezier(.34,1.4,.64,1)}
.rv.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .pop,.emblem.pop{opacity:1;transform:none;animation:none}
}


/* ══════════════════════════════════════════════════════════════════
   CYCLING HEADLINE — word-by-word arrival.
   Each word rises and settles with a small overshoot, 75ms apart,
   so the phrase assembles itself instead of appearing all at once.
   The gold gradient is applied per word so the transforms cannot
   break the background-clip rendering.
   ══════════════════════════════════════════════════════════════════ */
.rot{display:inline-block;
  transition:opacity .85s cubic-bezier(.4,0,.25,1),
             transform .85s cubic-bezier(.4,0,.25,1),
             filter .85s cubic-bezier(.4,0,.25,1);
  -webkit-text-fill-color:currentColor;background:none;animation:none}
.rot .w{display:inline-block;opacity:0;transform:translateY(.34em) scale(.985);
  filter:blur(7px);will-change:transform,opacity,filter;
  animation:wordIn 1.02s cubic-bezier(.16,.88,.24,1) forwards;
  background:linear-gradient(96deg,var(--gold-2) 0%,var(--gold-4) 52%,var(--gold-3) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  padding-bottom:.06em;margin-bottom:-.06em}
.rot .w + .w{margin-left:.26em}
@keyframes wordIn{
  0%  {opacity:0;transform:translateY(.34em) scale(.985);filter:blur(7px)}
  45% {opacity:.85}
  70% {filter:blur(0)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
/* the line lifts away as one piece — per-word exits fought the
   entrance animations and left a ragged gap between phrases */
.rot.leaving{opacity:0;transform:translateY(-.16em) scale(.99);filter:blur(9px)}
@media(prefers-reduced-motion:reduce){
  .rot .w{opacity:1;transform:none;animation:none}
  .rot.leaving{opacity:1;transform:none}
}


/* ══════════════════════════════════════════════════════════════════
   MOBILE — stop the hero reflowing, and centre the drawer button.
   The cycling phrase changes length as it swaps; on a narrow screen
   that re-wraps the line and shoves everything below it up and down.
   Reserving the height stops the page from moving at all.
   ══════════════════════════════════════════════════════════════════ */
.rotline{display:inline-block}

@media(max-width:768px){
  .hero{padding-top:120px;padding-bottom:56px;min-height:0}
  .hero h1{font-size:clamp(1.95rem,8.2vw,2.5rem);line-height:1.16}

  /* the cycling line gets its own block with a fixed height */
  .hero h1 .rotline{display:block;width:100%;min-height:2.34em;margin-top:.1em}
  .rot{display:block}
  .rot .w{white-space:nowrap}

  .hero .lede{font-size:.97rem;max-width:none}
  .hero-cta{gap:12px}
  .hero-cta .btn{width:100%;justify-content:center}
  .btn-stack{justify-content:center;text-align:center}
  .emblem{max-width:230px;margin:30px auto 0}
}
@media(max-width:400px){
  .hero h1 .rotline{min-height:3.5em}
}

/* ══ mobile drawer ════════════════════════════════════════════════ */
.mob{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:22px;padding:32px}
.mob > a{display:block;width:auto}
.mob .btn{display:inline-flex;align-items:center;justify-content:center;
  margin:8px auto 0;min-width:230px;text-align:center}
.mobtel,.mobmail{display:block;text-align:center;margin:0 auto}


/* ══════════════════════════════════════════════════════════════════
   MOBILE HERO — locked height, nothing can move.
   The phrase does not cycle below 769px, and the line is given a
   fixed height with hidden overflow so even a re-wrap cannot push
   the content underneath it.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  .hero h1{font-size:clamp(1.9rem,7.6vw,2.35rem);line-height:1.14;
    padding-bottom:.04em;margin:20px 0 18px}
  .hero h1 .rotline{display:block;width:100%;height:auto;min-height:0;margin-top:.06em}
  .rot{display:block}
  .rot .w{white-space:nowrap}
  .badge{font-size:9.5px;letter-spacing:.1em;padding:9px 14px}
  .hero .lede{font-size:.95rem;line-height:1.65}
  .hero-cta{gap:10px;margin-top:26px}
  .hero-cta .btn{width:100%;justify-content:center;padding:15px 18px}
  .emblem{max-width:220px;margin:26px auto 0}
  /* the entrance still animates, but only with transforms, so it
     cannot change the height of anything */
  .pop{will-change:transform,opacity}
}
@media(max-width:400px){
  .hero h1{font-size:clamp(1.7rem,7.4vw,2rem)}
}