/* Self-hosted (audit: GDPR + no external font requests). latin subset.
   Weights match the original Google Fonts request exactly. IBM Plex Mono 700
   and Source Serif 4 700 are used on the page but deliberately NOT shipped —
   the original did not load them either, so the browser synthesises both.
   Adding them would render differently from the current design. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-mono-600.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/archivo-400.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/archivo-600.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/archivo-700.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/source-serif-4-400.woff2') format('woff2')}

/* ============================================================
   NYPPEX — Design Tokens
   ============================================================ */
:root{
  --ink:        #0A1B2E;
  --ink-deep:   #06131F;
  --body:       #1F2E3D;
  --muted:      #45586B;
  --paper:      #FFFFFF;
  --mist:       #F1F4F7;
  --rule:       #D7DFE7;
  --rule-dark:  rgba(255,255,255,.16);
  --accent:     #C8102E;
  --soft:       #FDECEF;

  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 56px);
  --sec: clamp(76px, 9vw, 130px);
  --ease: cubic-bezier(.16,1,.3,1);

  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:104px}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--display); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.locked{overflow:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; color:var(--ink); font-weight:700; letter-spacing:-.03em; line-height:1.05}
p{margin:0}
/* The mock never resets this, but the page it lives on is wrapped in WordPress,
   whose normalize zeroes it. Without it the UA's 1em/40px figure margin shrinks
   every .fig by 80px, and an aspect-ratio box turns that into lost height. */
figure{margin:0}
button{font:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); position:relative}
.sec{padding:var(--sec) 0; position:relative}
.sec--mist{background:var(--mist)}
.sec--tight{padding-top:calc(var(--sec) * .6)}

.on-dark{color:rgba(255,255,255,.9)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.on-dark .lead{color:rgba(255,255,255,.9)}

.eyebrow{
  font-family:var(--mono); font-size:.84rem; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:.8em;
}
.eyebrow::after{content:''; flex:1; height:1px; background:var(--rule); max-width:120px}
.on-dark .eyebrow::after{background:var(--rule-dark)}

.h2{font-size:clamp(2.05rem,3.9vw,3.35rem)}
.h2--lg{font-size:clamp(2.25rem,4.6vw,3.9rem)}
.h2--sm{font-size:clamp(1.35rem,2.05vw,1.8rem); text-wrap:balance}
.lead{font-family:var(--serif); font-size:clamp(1.08rem,1.45vw,1.28rem); line-height:1.62; color:var(--body)}
.on-dark .lead{color:rgba(255,255,255,.86)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:.8rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  padding:15px 26px; border:1px solid transparent; border-radius:1px;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease);
}
.btn--primary{background:var(--accent); color:#fff}
.btn--primary:hover{background:#a50d25; transform:translateY(-2px)}
.btn--ghost{border-color:var(--rule); color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink); background:var(--ink); color:#fff; transform:translateY(-2px)}
.btn--ghost-light{border-color:var(--rule-dark); color:#fff}
.btn--ghost-light:hover{background:#fff; color:var(--ink); border-color:#fff; transform:translateY(-2px)}
.arw{transition:transform .25s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}

/* ============================================================
   MOTION
   ============================================================ */
.rv{opacity:0; transform:translateY(26px); transition:opacity .85s ease, transform .85s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv[data-d="1"]{transition-delay:.09s} .rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s} .rv[data-d="4"]{transition-delay:.36s}

.w{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.14em; margin-bottom:-.14em}
.w > span{display:inline-block; transform:translateY(115%); opacity:0;
  transition:transform .95s var(--ease), opacity .7s ease}
.rvw.in .w > span{transform:none; opacity:1}

.fig{position:relative; overflow:hidden; aspect-ratio:var(--ar,3/2);
  background:linear-gradient(140deg,#0E2337,#1B3A5A);
  clip-path:inset(0 0 100% 0); transition:clip-path 1.1s var(--ease)}
.fig.in{clip-path:inset(0 0 0 0)}
.fig-in{position:absolute; left:0; top:-9%; width:100%; height:118%; will-change:transform}
.fig img{width:100%; height:100%; object-fit:cover;
  transform:scale(1.16); transition:transform 1.5s var(--ease)}
.fig.in img{transform:scale(1)}
.fig.in:hover img{transform:scale(1.05)}

#tape{position:fixed; top:0; left:0; height:2px; width:0; background:var(--accent); z-index:200}

/* ============================================================
   1. DISCLAIMER GATE
   ============================================================ */
#gate{position:fixed; inset:0; z-index:1000; background:var(--ink-deep); color:#fff;
  display:flex; overflow-y:auto; padding:clamp(40px,6vh,72px) 0;
  transition:opacity .7s ease, visibility .7s ease}
.gate-stack{position:relative; width:100%; margin:auto 0}
#gate.away{opacity:0; visibility:hidden; pointer-events:none}
.gate-bg{position:absolute; inset:0; overflow:hidden}
.gate-bg img{width:100%; height:100%; object-fit:cover; opacity:.28; filter:grayscale(.5);
  animation:drift 34s ease-in-out infinite alternate}
.gate-bg::after{content:''; position:absolute; inset:0;
  background:radial-gradient(1100px 620px at 20% 20%, rgba(200,16,46,.28), transparent 60%),
             linear-gradient(180deg, rgba(6,19,31,.76), rgba(6,19,31,.95))}
@keyframes drift{from{transform:scale(1.05)} to{transform:scale(1.18) translateY(-2%)}}

.gate-inner{position:relative; width:100%; max-width:780px; margin:0 auto; padding:0 var(--gut)}
#gate .gate-logo{height:58px; width:auto; max-width:330px; object-fit:contain;
  filter:brightness(0) invert(1); margin-bottom:38px}
.gate-inner h2{color:#fff; font-size:clamp(2.2rem,4.8vw,3.5rem); margin-bottom:24px}
.gate-strong{font-family:var(--mono); font-size:.86rem; line-height:1.75; font-weight:500;
  letter-spacing:.03em; color:#fff; padding:17px 0 19px;
  border-top:1px solid var(--rule-dark); border-bottom:1px solid var(--rule-dark); margin-bottom:24px}
.gate-body{font-family:var(--serif); font-size:1.06rem; line-height:1.7; color:rgba(255,255,255,.88); margin-bottom:34px}
.gate-body a{color:#fff; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--accent)}

.gate-wall{position:relative; width:100%; margin-top:clamp(48px,7vh,92px); padding-top:44px;
  border-top:1px solid var(--rule-dark)}
.gate-wall p{text-align:center; font-family:var(--mono); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:30px; padding:0 var(--gut); line-height:1.8}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex; width:max-content; animation:slide 46s linear infinite}
/* every logo gets an identical box and is scaled to fit inside it, so a
   compact mark (Bessemer, NUS) reads at the same size as a wide wordmark */
.marquee-track img{width:168px; height:60px; margin:0 16px; object-fit:contain; flex:none;
  filter:brightness(0) invert(1); opacity:.82; transition:opacity .3s ease}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track img:hover{opacity:1}
.marquee{padding:4px 0}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ============================================================
   2. HEADER
   ============================================================ */
.hdr{position:sticky; top:0; z-index:90; background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule); transition:box-shadow .3s ease}
.hdr.stuck{box-shadow:0 2px 24px rgba(10,27,46,.09)}
.hdr .wrap{display:flex; align-items:center; justify-content:space-between; height:94px; gap:20px}
#hdr .brand img{height:54px; width:auto; max-width:300px; object-fit:contain; transition:opacity .25s ease}
.brand:hover img{opacity:.72}
.nav{display:flex; align-items:center; gap:24px}
.nav a{font-family:var(--mono); font-size:.76rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--body); padding:6px 0; position:relative; transition:color .2s ease; white-space:nowrap}
.nav a::after{content:''; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--accent); transition:right .3s var(--ease)}
.nav a:hover{color:var(--ink)} .nav a:hover::after{right:0}
.hdr .btn{padding:12px 20px; flex:none}
.burger{display:none; background:none; border:0; padding:8px; color:var(--ink)}
.burger span{display:block; width:22px; height:2px; background:currentColor; margin:4px 0; transition:transform .3s var(--ease), opacity .2s ease}
.burger.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{display:none; border-top:1px solid var(--rule); background:#fff}
.mnav.open{display:block}
.mnav a{display:block; padding:16px var(--gut); border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:.82rem; letter-spacing:.12em; text-transform:uppercase}

/* ============================================================
   3. HERO
   ============================================================ */
.hero{position:relative; background:var(--ink); overflow:hidden}
.hero-bg{position:absolute; inset:0; overflow:hidden}
.hero-bg img{width:100%; height:112%; object-fit:cover; opacity:.32; filter:grayscale(.35);
  animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.06) translateY(0)} to{transform:scale(1.2) translateY(-2.5%)}}
.hero-bg::after{content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(10,27,46,.96) 22%, rgba(10,27,46,.74) 58%, rgba(10,27,46,.58)),
             radial-gradient(800px 460px at 82% 8%, rgba(200,16,46,.26), transparent 62%)}
.hero .wrap{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(36px,5vw,72px); align-items:center;
  padding-top:clamp(76px,8vw,112px); padding-bottom:clamp(76px,8vw,112px); z-index:2}
.hero h1{font-size:clamp(2.3rem,4.4vw,3.9rem); margin:26px 0 22px; letter-spacing:-.038em}
.hero .lead{max-width:48ch}
.hero .lead + .lead{margin-top:14px}
.hero-cta{margin-top:36px; display:flex; flex-wrap:wrap; gap:14px}

.hero-art{position:relative}
.hero-art .a{--ar:4/5; box-shadow:0 34px 80px rgba(0,0,0,.42)}
.hero-art .b{--ar:4/3; position:absolute; right:-4%; bottom:-11%; width:56%;
  border:7px solid var(--ink); box-shadow:0 26px 60px rgba(0,0,0,.44)}
.hero-art .rule{position:absolute; left:-26px; top:34px; width:3px; height:110px; background:var(--accent)}

/* ============================================================
   4. OFFERING SECTIONS (fund interests / pre-IPO securities)
   ============================================================ */
.offer{display:grid; grid-template-columns:1.32fr .68fr; gap:clamp(32px,4.5vw,64px); align-items:start}
.offer.rev .offer-art{order:2}
.offer-art{position:relative}
.offer-art .a{--ar:5/4; box-shadow:0 26px 60px rgba(10,27,46,.16)}
.offer-art .b{--ar:1/1; position:absolute; left:-9%; bottom:-13%; width:42%; border:8px solid #fff;
  box-shadow:0 22px 50px rgba(10,27,46,.2)}
.offer.rev .offer-art .b{left:auto; right:-9%}
.offer-copy .lead{margin-top:20px}
.offer-copy .lead + .lead{margin-top:14px}

.benefits{list-style:none; margin:28px 0 0; padding:0}
.benefits li{position:relative; padding:12px 0 12px 30px; border-top:1px solid var(--rule); font-size:.98rem; line-height:1.5}
.benefits li:first-child{border-top:0}
.benefits li::before{content:''; position:absolute; left:0; top:22px; width:11px; height:2px; background:var(--accent)}

.price-tag{display:inline-flex; align-items:baseline; gap:8px; margin-top:28px; padding:14px 20px;
  background:var(--mist); border-left:2.5px solid var(--accent)}
.price-tag b{font-family:var(--mono); font-size:1.35rem; font-weight:600; color:var(--ink); letter-spacing:-.02em}
.price-tag span{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

/* ============================================================
   5. WHO WE SERVE — three columns
   ============================================================ */
.band{position:relative; overflow:hidden; background:var(--ink)}
.band-bg{position:absolute; inset:0; overflow:hidden}
.band-bg .fig-in{top:-12%; height:124%}
.band-bg img{width:100%; height:100%; object-fit:cover; opacity:.2; filter:grayscale(.5)}
.band-bg::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(6,19,31,.93),rgba(6,19,31,.96))}
.band .wrap{z-index:2}
.serve3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule-dark);
  border:1px solid var(--rule-dark); margin-top:clamp(48px,5.5vw,70px)}
.serve3 > div{background:var(--ink-deep); padding:32px 28px}
.serve3 h3{color:#fff; font-size:1.15rem; margin-bottom:14px; letter-spacing:-.015em}
.serve3 p{font-family:var(--serif); font-size:.98rem; line-height:1.62; color:rgba(255,255,255,.8)}
.serve3 > div::before{content:''; display:block; width:24px; height:2px; background:var(--accent); margin-bottom:18px}


/* ============================================================
   7. PRICING CARDS
   ============================================================ */
.pricing-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule);
  border:1px solid var(--rule); margin-top:clamp(48px,5.5vw,70px)}
.pcard{background:var(--paper); padding:44px 38px; transition:transform .4s var(--ease), box-shadow .4s ease}
.pcard:hover{transform:translateY(-6px); box-shadow:0 24px 54px rgba(10,27,46,.13); z-index:2}
.pcard .kicker{font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.pcard h3{font-size:1.5rem; margin-top:12px}
.pprice{display:flex; align-items:baseline; gap:8px; margin:22px 0 6px}
.pprice b{font-family:var(--mono); font-size:2.6rem; font-weight:600; letter-spacing:-.03em; color:var(--ink)}
.pprice span{font-family:var(--mono); font-size:.82rem; color:var(--muted)}
.pcard .desc{font-family:var(--serif); font-size:.98rem; line-height:1.6; color:var(--body); margin:14px 0 26px}
.pcard .btn{width:100%; justify-content:center}
.pnote{margin-top:22px; font-family:var(--mono); font-size:.76rem; letter-spacing:.04em; color:var(--muted); text-align:center}

/* ============================================================
   8. ORDER + CONTACT
   ============================================================ */
.get-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,52px); align-items:start}
.get-card{border:1px solid var(--rule); padding:clamp(28px,3.4vw,40px)}
.get-card h3{font-size:1.35rem}
.get-card .sub{font-family:var(--serif); font-size:.94rem; color:var(--muted); margin-top:10px; line-height:1.55}

.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px 20px; margin-top:28px}
.f-full{grid-column:1/-1}
label{display:block; font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px}
label em{color:var(--accent); font-style:normal}
input,select,textarea{width:100%; font:inherit; font-size:.94rem; color:var(--ink);
  padding:13px 14px; background:#fff; border:1px solid var(--rule); border-radius:1px;
  transition:border-color .25s ease, box-shadow .25s ease}
textarea{min-height:104px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--ink); box-shadow:0 0 0 3px rgba(10,27,46,.08)}
input[type="file"]{padding:11px 12px; font-size:.84rem; cursor:pointer}
input[type="file"]::file-selector-button{font-family:var(--mono); font-size:.68rem; letter-spacing:.08em;
  text-transform:uppercase; border:0; background:var(--mist); color:var(--ink); padding:7px 12px; margin-right:12px; cursor:pointer}
.check{display:flex; gap:12px; align-items:flex-start; font-size:.9rem; line-height:1.5; color:var(--body);
  font-family:var(--display); font-weight:400; text-transform:none; letter-spacing:0; margin-bottom:0}
.check b{font-weight:600; color:var(--ink)}
.check input{width:16px; height:16px; flex:none; margin-top:3px; accent-color:var(--accent)}
.msg{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-top:14px; min-height:1.2em}

.estimate{display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  background:var(--mist); border-left:2.5px solid var(--accent); padding:14px 18px; margin-top:22px}
.estimate span{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.estimate b{font-family:var(--mono); font-size:1.5rem; font-weight:600; color:var(--ink); letter-spacing:-.02em}


/* ============================================================
   9. CLOSING CTA
   ============================================================ */
.closing{position:relative; overflow:hidden; background:var(--ink)}
.closing-bg{position:absolute; inset:0; overflow:hidden}
.closing-bg .fig-in{top:-12%; height:124%}
.closing-bg img{width:100%; height:100%; object-fit:cover; opacity:.22; filter:grayscale(.4)}
.closing-bg::after{content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(10,27,46,.95) 30%, rgba(10,27,46,.7)),
             radial-gradient(700px 400px at 85% 15%, rgba(200,16,46,.24), transparent 60%)}
.closing .wrap{z-index:2; text-align:center; max-width:760px}
.closing .lead{max-width:56ch; margin:20px auto 0}
.closing-cta{margin-top:36px; display:flex; justify-content:center; flex-wrap:wrap; gap:14px}

/* ============================================================
   10. FOOTER
   ============================================================ */
.ft{background:var(--ink-deep); color:rgba(255,255,255,.78); padding-top:clamp(58px,6vw,86px)}
.ft-top{display:grid; grid-template-columns:1.4fr .8fr .8fr; gap:44px; padding-bottom:52px; border-bottom:1px solid var(--rule-dark)}
.ft-logo{height:38px; width:auto; max-width:210px; object-fit:contain; filter:brightness(0) invert(1); margin-bottom:26px}
.ft-tag{font-family:var(--serif); font-size:1.08rem; line-height:1.6; color:rgba(255,255,255,.88); max-width:40ch}
.ft-loc{font-family:var(--mono); font-size:.82rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:#fff; margin-top:26px}
/* Nothing on the site showed a contact address; the form was the only route. */
.ft-mail{font-family:var(--mono); font-size:.86rem; margin-top:10px}
.ft-mail a{color:rgba(255,255,255,.82); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.28)}
.ft-mail a:hover{color:#fff; border-bottom-color:#fff}
.social{display:flex; gap:10px; margin-top:28px}
.social a{width:38px; height:38px; border:1px solid var(--rule-dark); display:grid; place-items:center;
  transition:background .3s ease, border-color .3s ease, transform .3s var(--ease)}
.social a:hover{background:var(--accent); border-color:var(--accent); transform:translateY(-3px)}
.social svg{width:15px; height:15px; fill:#fff}
.ft h3,.ft h4{font-family:var(--mono); font-size:.8rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin-bottom:22px}
.ft ul{list-style:none; margin:0; padding:0}
.ft li{margin-bottom:12px}
.ft li a{font-size:.95rem; transition:color .25s ease, padding-left .25s ease}
.ft li a:hover{color:#fff; padding-left:5px}
/* The one deliberate departure from the mock: the mock ships this at .8rem,
   which reads as unreadable fine print. Everything else matches it exactly. */
.ft-legal{padding:32px 0 44px; font-size:.925rem; line-height:1.85; color:rgba(255,255,255,.62)}
.ft-legal p{margin:0 0 14px}
.ft-legal p:last-child{margin-bottom:0}
.ft-legal b{color:rgba(255,255,255,.88); font-weight:600}


/* ============================================================
   8b. ORDER FORM
   ============================================================ */
.order{margin-top:clamp(36px,4.5vw,56px)}
.ord-block{background:var(--paper); border:1px solid var(--rule); padding:clamp(24px,3vw,36px); margin-bottom:20px}
.ord-h{font-family:var(--mono); font-size:.78rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); padding-bottom:14px; border-bottom:1px solid var(--rule)}
.ord-sub{font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink); margin-bottom:14px}
.hint{font-family:var(--mono); font-size:.68rem; line-height:1.6; color:var(--muted); margin-top:9px}

/* line item grid — shared column template */
.li-head,.li-row{display:grid;
  grid-template-columns:1fr .95fr 1.4fr 1.1fr .45fr .62fr .8fr .85fr 30px;
  gap:10px; align-items:center}
.li-head{margin-top:22px; padding:0 0 10px; border-bottom:1px solid var(--rule)}
.li-head span{font-family:var(--mono); font-size:.62rem; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted)}
.li-row{padding:14px 0; border-bottom:1px solid var(--rule)}
.li-row input,.li-row select{padding:10px 10px; font-size:.88rem}
.li-ro{font-family:var(--mono); font-size:.82rem; color:var(--body); line-height:1.35}
.li-amt{font-family:var(--mono); font-size:.95rem; font-weight:600; color:var(--ink); text-align:right}
.li-del{background:none; border:1px solid var(--rule); color:var(--muted); width:30px; height:30px;
  border-radius:1px; line-height:1; font-size:1rem; transition:all .2s ease}
.li-del:hover{border-color:var(--accent); color:var(--accent)}
.li-add{margin-top:18px; background:none; border:1px dashed var(--rule); color:var(--ink);
  font-family:var(--mono); font-size:.74rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase;
  padding:12px 20px; border-radius:1px; transition:all .2s ease}
.li-add:hover{border-color:var(--accent); color:var(--accent); border-style:solid}

/* totals */
.tot{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,48px);
  margin-top:28px; padding-top:24px; border-top:2px solid var(--ink); align-items:start}
.tot-opt{font-size:.9rem}
.tot-rows{display:flex; flex-direction:column; gap:10px}
.tot-r{display:flex; justify-content:space-between; align-items:baseline; gap:16px}
.tot-r span{font-family:var(--mono); font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.tot-r b{font-family:var(--mono); font-size:1rem; font-weight:500; color:var(--ink)}
#t-discRow b{color:var(--accent)}
.tot-due{padding-top:12px; border-top:1px solid var(--rule)}
.tot-due span{color:var(--ink); font-weight:600}
.tot-due b{font-size:1.6rem; font-weight:600; letter-spacing:-.02em}
.tot-note{font-family:var(--mono); font-size:.7rem; line-height:1.6; color:var(--muted); margin-top:4px}

/* wire block */
.wire{background:var(--mist); border-left:2.5px solid var(--accent); padding:20px 22px}
.wire-grid{display:grid; gap:9px}
.wire-grid div{display:flex; gap:14px; align-items:baseline}
.wire-grid span{flex:0 0 74px; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted)}
.wire-grid b{font-family:var(--mono); font-size:.85rem; font-weight:500; color:var(--ink)}

@media (max-width:900px){
  .li-head{display:none}
  .li-row{grid-template-columns:1fr 1fr; gap:14px; padding:20px 0; position:relative}
  .li-row > div{display:flex; flex-direction:column; gap:6px}
  .li-row > div::before{content:attr(data-l); font-family:var(--mono); font-size:.6rem; font-weight:600;
    letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
  .li-amt{text-align:left}
  .li-del{position:absolute; top:14px; right:0}
  .tot{grid-template-columns:1fr}
}

/* ============================================================
   License term picker
   ============================================================ */
.terms{margin-top:22px; padding:22px 24px; background:var(--mist); border-left:2.5px solid var(--accent)}
.terms-h{font-family:var(--mono); font-size:.76rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink)}
.terms-h span{font-weight:400; text-transform:none; letter-spacing:.02em; color:var(--muted)}
.terms-row{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:16px}
.term{position:relative; text-align:left; background:var(--paper); border:1px solid var(--rule);
  border-radius:1px; padding:16px 14px 14px; cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s var(--ease)}
.term:hover{border-color:var(--ink); transform:translateY(-2px)}
.term b{display:block; font-family:var(--display); font-size:.98rem; font-weight:700;
  letter-spacing:-.01em; color:var(--ink)}
.term span{display:block; margin-top:5px; font-family:var(--mono); font-size:.64rem;
  letter-spacing:.06em; color:var(--muted); line-height:1.4}
.term-tag{position:absolute; top:-9px; right:10px; background:var(--accent); color:#fff;
  font-family:var(--mono); font-size:.56rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 7px; font-style:normal}
.term[aria-checked="true"]{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.term[aria-checked="true"] b{color:var(--accent)}
.terms-note{margin-top:14px; font-family:var(--mono); font-size:.68rem; line-height:1.6; color:var(--muted)}

/* ---------- required documents ---------- */
.doc{display:grid; grid-template-columns:1.05fr 1.35fr; gap:14px; align-items:center;
  padding:15px 0; border-bottom:1px solid var(--rule)}
.doc:first-child{border-top:1px solid var(--rule)}
.doc-n{font-size:.92rem; line-height:1.4; color:var(--ink); font-weight:600}
.doc-n em{display:block; margin-top:4px; font-family:var(--mono); font-size:.64rem; font-style:normal;
  font-weight:400; letter-spacing:.04em; color:var(--muted); line-height:1.5}
.doc-n i{color:var(--accent); font-style:normal}
.doc-n a{color:var(--accent); text-decoration:underline; text-underline-offset:2px; font-weight:500}
.doc input[type="file"]{font-size:.8rem; padding:9px 10px}
.doc-none{padding:16px 0; font-family:var(--mono); font-size:.72rem; color:var(--muted); line-height:1.6}
.doc-n sup{color:var(--accent); font-size:.62em; font-weight:600}
.foot{margin-top:16px; padding-top:14px; border-top:1px solid var(--rule);
  font-size:.84rem; line-height:1.6; color:var(--body)}
.foot sup{color:var(--accent); font-weight:600}
.foot + .hint{margin-top:8px}

@media (max-width:900px){
  .terms-row{grid-template-columns:repeat(2,1fr)}
  .term--single{grid-column:1/-1}
  .doc{grid-template-columns:1fr; gap:8px}
}

/* ---------- home contact split ---------- */
.contact-split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start}
@media (max-width:900px){ .contact-split{grid-template-columns:1fr} }

/* ---------- order page header band ---------- */
.pagehead{position:relative; background:var(--ink); padding:clamp(56px,7vw,92px) 0 clamp(48px,6vw,72px)}
.pagehead::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(720px 380px at 82% 10%, rgba(200,16,46,.24), transparent 62%)}
.pagehead .wrap{z-index:2}
.pagehead h1{font-size:clamp(1.9rem,3.6vw,3rem); letter-spacing:-.035em; margin:20px 0 18px}
.pagehead .lead{max-width:60ch}
.crumb{margin-top:26px; font-family:var(--mono); font-size:.74rem; letter-spacing:.11em; text-transform:uppercase}
.crumb a{color:rgba(255,255,255,.75); transition:color .2s ease}
.crumb a:hover{color:#fff}
.ordpage{padding-top:clamp(34px,4vw,52px)}

/* ---------- legal / long-form text pages ---------- */
/* --mono is deliberate on .updated: it is a data-style label, not reading text.
   .legal a keeps the accent because a link is a control, not decoration. */
.legal{max-width:78ch}
.legal h2{font-size:clamp(1.15rem,1.9vw,1.5rem); margin:38px 0 12px}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 14px; font-size:1rem; line-height:1.72; color:var(--body)}
.legal ul{margin:0 0 16px; padding-left:20px}
.legal li{margin-bottom:8px; line-height:1.65}
.legal a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.legal h3{font-size:clamp(1rem,1.45vw,1.15rem); margin:26px 0 10px; letter-spacing:-.015em}
.legal ul ul{margin:8px 0 4px; padding-left:20px}
.legal ul ul li{margin-bottom:5px; color:var(--muted)}
.legal .caps{font-size:.92rem; line-height:1.7; letter-spacing:.01em}
.legal .updated{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); padding-bottom:18px; margin-bottom:26px;
  border-bottom:1px solid var(--rule)}
.ordpage .order{margin-top:0}

/* ============================================================
   E-E-A-T SECTIONS (About, Leadership, Case Studies, Global)
   ============================================================ */
.eeat{position:relative; overflow:hidden}
.eeat-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4.5vw,64px); align-items:start;
  margin-top:clamp(48px,5.5vw,70px)}
.eeat-card{background:var(--paper); border:1px solid var(--rule); padding:clamp(28px,3.4vw,40px);
  transition:transform .4s var(--ease), box-shadow .4s ease}
.eeat-card:hover{transform:translateY(-4px); box-shadow:0 20px 48px rgba(10,27,46,.1)}
.eeat-card::before{content:''; display:block; width:28px; height:2px; background:var(--accent); margin-bottom:18px}
.eeat-card h3{font-size:1.2rem; margin-bottom:12px}
.eeat-card p{font-family:var(--serif); font-size:.96rem; line-height:1.62; color:var(--body)}
.eeat-card p + p{margin-top:12px}

/* Stats row inside E-E-A-T */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule-dark);
  border:1px solid var(--rule-dark); margin-top:clamp(48px,5.5vw,70px)}
.stat{background:var(--ink-deep); padding:28px 24px; text-align:center}
.stat b{display:block; font-family:var(--mono); font-size:clamp(1.8rem,3vw,2.8rem); font-weight:600;
  color:#fff; letter-spacing:-.03em; line-height:1.1}
.stat span{display:block; margin-top:8px; font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.7)}

/* Leadership bio */
.leader{display:flex; gap:clamp(24px,3vw,40px); align-items:flex-start; margin-top:clamp(40px,5vw,60px);
  padding:clamp(28px,3.4vw,40px); background:var(--ink-deep); border:1px solid var(--rule-dark)}
.leader-img{flex:0 0 120px; width:120px; height:120px; border-radius:50%; overflow:hidden;
  background:linear-gradient(140deg,#0E2337,#1B3A5A); border:3px solid var(--accent)}
.leader-img img{width:100%; height:100%; object-fit:cover}
.leader-copy h3{color:#fff; font-size:1.2rem; margin-bottom:4px}
.leader-copy .title{font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:#fff; margin-bottom:14px}
.leader-copy p{font-family:var(--serif); font-size:.94rem; line-height:1.62; color:rgba(255,255,255,.82)}

@media (max-width:900px){
  .eeat-grid{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .leader{flex-direction:column; align-items:center; text-align:center}
}

/* ============================================================
   STATUS PAGES (success, cancel)
   ============================================================ */
.status-page{position:relative; background:var(--ink); min-height:60vh; display:flex; align-items:center; justify-content:center}
.status-page::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 400px at 50% 30%, rgba(200,16,46,.18), transparent 60%)}
.status-page .wrap{z-index:2; text-align:center; max-width:680px; padding-top:clamp(60px,8vw,100px); padding-bottom:clamp(60px,8vw,100px)}
.status-icon{display:inline-flex; align-items:center; justify-content:center; width:80px; height:80px;
  border-radius:50%; margin-bottom:28px}
.status-icon--ok{background:rgba(40,167,69,.15); border:2px solid rgba(40,167,69,.4)}
.status-icon--ok svg{color:#28a745}
.status-icon--fail{background:rgba(200,16,46,.12); border:2px solid rgba(200,16,46,.3)}
.status-icon--wait{background:rgba(214,158,46,.14); border:2px solid rgba(214,158,46,.42)}
.status-icon--wait svg{color:#B7791F}
.status-icon--fail svg{color:var(--accent)}
.status-page h1{font-size:clamp(2rem,3.6vw,3rem); margin-bottom:18px}
.status-page .lead{max-width:50ch; margin:0 auto}
.status-cta{margin-top:36px; display:flex; justify-content:center; flex-wrap:wrap; gap:14px}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1200px){
  .hdr .wrap{height:84px; gap:14px}
  #hdr .brand img{height:44px; max-width:230px}
  .nav{gap:16px}
  .nav a{font-size:.7rem; letter-spacing:.07em}
  .hdr .btn{padding:11px 15px; font-size:.72rem}
  html{scroll-padding-top:94px}
}
@media (max-width:1000px){
  .hero .wrap,.offer,.get-grid{grid-template-columns:1fr}
  .hero-art{margin-top:16px}
  .hero-art .b{width:48%; right:0; bottom:-8%}
  .hero-art .rule{display:none}
  .offer-art{margin-top:20px; order:1 !important}
  .offer-art .b{left:0 !important; right:auto !important; bottom:-8%; width:38%}
  .serve3{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .nav,.hdr .btn{display:none}
  .burger{display:block}
}
@media (max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .ft-top{grid-template-columns:1fr; gap:38px}
  .hero-art .b,.offer-art .b{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .rv{opacity:1; transform:none}
  .fig{clip-path:none} .fig img{transform:none}
  .w > span{transform:none; opacity:1}
  #tape{display:none}
}

/* Honeypot. Positioned off-screen rather than display:none, because
   bots commonly skip fields that are outright hidden. */
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px;
  overflow:hidden; opacity:0; pointer-events:none}

/* Secondary note under a status message: present, but not competing with the
   invoice number, which is the thing the customer actually needs to keep. */
.lead--note{font-size:.92rem;opacity:.82;margin-top:14px}