
/* BlackLeaf design system v1: taken from the "Back online Monday" landing page. Dark only, by choice. */
:root{--black:#050505;--ink:#0b0c0e;--panel:#0f1217;--panel2:#15181d;--slate:#1d242d;--slate2:#2b3440;--grey:#566070;--muted:#8d96a1;--text2:#b5bac2;--silver:#c3c7cd;--silver2:#e6e8eb;--white:#f6f7f8;--line:rgba(195,199,205,.14);--line2:rgba(195,199,205,.25);--line3:rgba(195,199,205,.4);--bad:#d9a3a3;--ok:#a8c7b4;--ease:cubic-bezier(.22,.8,.2,1);--wrap:1200px;--r:6px;color-scheme:dark}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--black);color:var(--silver2);font-family:Inter,system-ui,sans-serif;font-weight:300;line-height:1.6;min-height:100vh;overflow-x:hidden;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--silver);outline-offset:3px}
/* Playfair Display is for the HOME HERO main title only: <h1 class="hero-title"> */
.hero-title{font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:clamp(34px,6vw,70px);line-height:1.08;color:var(--white);letter-spacing:-.01em;text-wrap:balance}
.hero-title em{font-style:italic;background:linear-gradient(100deg,#8e96a1,#f2f4f6 45%,#9aa3ad 70%,#e6e8eb);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:sheen 6s linear infinite}
@keyframes sheen{to{background-position:-200% 0}}
/* all other headings: Inter light */
h1,h2,h3,h4{font-family:Inter,system-ui,sans-serif;font-weight:300;color:var(--white);line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(30px,4.6vw,52px)}h2{font-size:clamp(26px,3.4vw,40px)}h3{font-size:clamp(18px,2vw,22px);font-weight:400}h4{font-size:15px;font-weight:500}
.lead{max-width:620px;font-size:clamp(15px,1.6vw,18px);color:var(--text2)}
p{max-width:68ch}
.num{font-variant-numeric:tabular-nums}
/* background stack: fixed photo or black, diamond lattice, grain */
.bg{position:fixed;inset:0;z-index:-3;background:var(--black)}
.bg .poster{position:absolute;inset:0;background-size:cover;background-position:center}
.bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 40%,rgba(5,5,5,.55),rgba(5,5,5,.9) 70%,#050505),linear-gradient(180deg,rgba(5,5,5,.7),rgba(5,5,5,.35) 40%,rgba(5,5,5,.95))}
.lattice{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.lattice::before,.lattice::after,.lattice .glow{content:"";position:absolute;inset:0}
.lattice::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><g fill='none' stroke='%23566070' stroke-width='1.2'><path d='M0 120 120 0 240 120 120 240Z'/><path d='M60 120 120 60 180 120 120 180Z'/></g></svg>");background-size:240px;opacity:.6;-webkit-mask-image:radial-gradient(ellipse 90% 85% at 50% 0%,#000,transparent 78%);mask-image:radial-gradient(ellipse 90% 85% at 50% 0%,#000,transparent 78%);animation:latA 90s linear infinite}
.lattice::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%239AA3AD' stroke-width='.8'><path d='M0 40 40 0 80 40 40 80Z'/><path d='M40 27C47 35 47 46 40 57 33 46 33 35 40 27Z'/><path d='M40 57V64'/></g></svg>");background-size:80px;opacity:.35;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000,transparent 72%);mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000,transparent 72%);animation:latB 45s linear infinite,breathe 7s ease-in-out infinite}
.lattice .glow{background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),rgba(195,199,205,.09),transparent 70%)}
@keyframes latA{to{background-position:240px 240px}}@keyframes latB{to{background-position:-80px 80px}}@keyframes breathe{50%{opacity:.18}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
/* layout primitives */
.w{max-width:var(--wrap);width:100%;margin:0 auto}
.sec{padding-block:clamp(56px,8vw,104px)}
.sec+.sec{border-top:1px solid var(--line)}
.sec-dark{background:rgba(5,5,5,.55)}
.sec-panel{background:linear-gradient(180deg,rgba(15,18,23,.8),rgba(5,5,5,.7))}
.grid{display:grid;gap:14px;min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--silver);display:inline-flex;align-items:center;gap:16px;margin-bottom:22px}
.eyebrow::before,.eyebrow::after{content:"";width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--silver))}
.eyebrow::after{transform:scaleX(-1)}
.eyebrow.left::before{display:none}
.label{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--grey)}
.small{font-size:12px;color:var(--muted)}
/* glass card */
.card{display:block;text-align:left;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(160deg,rgba(29,36,45,.7),rgba(5,5,5,.75));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .25s ease-out,border-color .4s;min-width:0}
a.card:hover,button.card:hover,.card.hov:hover{border-color:var(--line3);transform:translateY(-2px)}
.card small,.card .label{display:block;margin-bottom:8px}
.card b{display:block;font-weight:400;font-size:15px;color:var(--white)}
.card span.sub{display:block;font-size:13px;color:var(--muted);margin-top:4px}
/* pill button: silver gradient, uppercase tracked */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;font:500 12px Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;padding:15px 26px;border-radius:999px;color:#050505;background:linear-gradient(180deg,#f2f4f6,#b9bec6);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 6px 14px -6px rgba(0,0,0,.9);transition:transform .35s var(--ease),filter .3s;overflow:hidden;white-space:nowrap}
.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-20deg);transition:left .7s var(--ease)}
.btn:hover{transform:translateY(-2px)}.btn:hover::after{left:130%}.btn:active{transform:scale(.98)}
.btn .arr{display:inline-block;width:22px;height:22px;border-radius:50%;background:#050505;color:#e6e8eb;line-height:22px;text-align:center;font-size:11px;letter-spacing:0;margin-right:-12px}
.btn-ghost{background:rgba(5,5,5,.5);color:var(--silver2);border:1px solid var(--line2);box-shadow:none;backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--silver)}.btn-ghost::after{display:none}
.btn-sm{padding:11px 18px;font-size:11px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.link{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--silver);border-bottom:1px solid var(--line2);padding-bottom:3px}
.link:hover{border-color:var(--silver)}
/* forms */
.fld{display:block;margin-bottom:16px}
.fld>span{display:block;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.in,.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld input[type=search],.fld input[type=number],.fld select,.fld textarea{width:100%;background:rgba(5,5,5,.55);border:1px solid var(--line2);border-radius:var(--r);padding:13px 16px;color:var(--white);font-size:15px;font-weight:400;outline:0;transition:border-color .3s,box-shadow .3s}
.fld textarea{min-height:120px;resize:vertical}
.in:focus,.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--silver);box-shadow:0 0 0 4px rgba(195,199,205,.08)}
.in::placeholder,.fld input::placeholder,.fld textarea::placeholder{color:#7b8591}
.fld select option{background:#0b0c0e;color:#e6e8eb}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:var(--bad)}
.errmsg{display:block;margin-top:6px;font-size:13px;color:var(--bad)}
.chk{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--text2);margin-bottom:14px;cursor:pointer}
.chk input{margin-top:4px;accent-color:#c3c7cd;width:16px;height:16px;flex:none}
.pillfield{display:flex;border:1px solid var(--line2);border-radius:999px;padding:5px;background:rgba(5,5,5,.55);backdrop-filter:blur(8px);transition:border-color .3s,box-shadow .3s}
.pillfield:focus-within{border-color:var(--silver);box-shadow:0 0 0 4px rgba(195,199,205,.08)}
.pillfield input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--white);font:400 15px Inter,sans-serif;padding:0 20px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
/* tables */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);font-weight:500;text-align:left;padding:14px 16px;border-bottom:1px solid var(--line2);white-space:nowrap}
td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
.tag{display:inline-block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--silver);border:1px solid var(--line2);border-radius:999px;padding:4px 10px;white-space:nowrap}
/* corient-style chrome */
.skip{position:absolute;left:-9999px;top:0;background:var(--silver2);color:#050505;padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}
.notice{border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:9px 0}
.util{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--silver)}
.hdr{position:sticky;top:0;z-index:50;background:rgba(5,5,5,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px))}
.hdr-in{display:flex;align-items:center;gap:28px;min-height:68px}
.brand{display:flex;align-items:center;gap:12px}.brand img{height:34px;width:auto}
.nav{display:flex;gap:26px;margin-left:auto;align-items:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.nav a,.nav button{background:none;border:0;cursor:pointer;color:var(--silver);padding:8px 0;border-bottom:1px solid transparent;font-size:inherit;letter-spacing:inherit;text-transform:inherit}
.nav a:hover,.nav button:hover,.nav [aria-current]{color:var(--white);border-color:var(--silver)}
.menu-btn{display:none}
.mega{position:absolute;left:0;right:0;top:100%;background:rgba(11,12,14,.97);border-bottom:1px solid var(--line);padding:28px max(16px,env(safe-area-inset-left,0px))}
.mega[hidden]{display:none}
.mega a{display:block;padding:8px 0;font-size:14px;color:var(--text2);letter-spacing:0;text-transform:none}
.mega a:hover{color:var(--white)}
/* hero and bands */
.hero{padding-block:clamp(64px,10vw,128px);position:relative}
.hero .lead{margin-top:24px}
.hero .cta{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}
.band{position:relative;padding-block:clamp(64px,9vw,120px);border-top:1px solid var(--line);overflow:hidden}
.band>.w{position:relative;z-index:1}
.band .photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.5}
.band .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.88),rgba(5,5,5,.55) 50%,rgba(5,5,5,.92))}
.stats{display:flex;gap:clamp(24px,6vw,72px);flex-wrap:wrap;margin-top:44px}
.stat b{display:block;font-weight:300;font-size:clamp(30px,4vw,48px);color:var(--white);font-variant-numeric:tabular-nums;line-height:1}
.stat span{display:block;margin-top:10px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--grey)}
.blocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
.blocks .card{padding:26px 24px;display:flex;flex-direction:column;gap:10px;min-height:170px}
.blocks .card .go{margin-top:auto;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--silver)}
.crumbs{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:22px 0 0}
.crumbs a:hover{color:var(--white)}
.disc{font-size:12px;color:var(--grey);line-height:1.7;max-width:90ch}
.foot{border-top:1px solid var(--line);padding-block:48px 28px;background:rgba(5,5,5,.7)}
.foot h4{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--grey);font-weight:500;margin-bottom:14px}
.foot a{display:block;font-size:14px;color:var(--text2);padding:4px 0}.foot a:hover{color:var(--white)}
.legal{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;margin-top:36px;padding-top:22px;border-top:1px solid var(--line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6e7884}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line2);padding:12px 20px;border-radius:999px;font-size:13px;z-index:90}
/* entrance: complete at rest, motion is additive only */
.rv{animation:rv .9s var(--ease) both;animation-delay:calc(var(--d,0)*120ms)}
@keyframes rv{from{opacity:.001;translate:0 18px}to{opacity:1;translate:0 0}}
@media (max-width:900px){.g3,.g4,.blocks{grid-template-columns:repeat(2,minmax(0,1fr))}.nav{display:none}.nav.open{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;background:rgba(5,5,5,.97);padding:20px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line)}.menu-btn{display:inline-flex;margin-left:auto}}
@media (max-width:640px){.g2,.g3,.g4,.blocks{grid-template-columns:1fr}.pillfield{flex-direction:column;border-radius:18px;padding:8px;gap:8px}.pillfield input{padding:14px 16px}.btn{max-width:100%;white-space:normal;text-align:center}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}

