/*
Theme Name: OB Distributions
Theme URI: https://obdistributions.com
Author: OB Distributions
Description: Custom golden-dark wholesale theme for OB Distributions. Dark canvas, rationed gold accent, clean grotesque type, hairline structure. Editable in WordPress.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: obdist
*/

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

/* ============ Tokens ============ */
:root{
  --canvas:#0a0a0a;
  --paper:#161618;
  --pill:#1c1c20;
  --ink:#ffffff;
  --mist:#dadada;
  --hairline:#333333;
  --gold:#fbbf24;
  --gold-2:#f59e0b;
  --gold-3:#fde68a;
  --orange:#f97316;
  --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Geist Mono',ui-monospace,Menlo,Consolas,monospace;
  --container:1200px;
  --radius-card:16px;
}

/* ============ Reset ============ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--canvas);color:var(--mist);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,p{margin:0;}
button{font-family:inherit;}
ul{margin:0;padding:0;list-style:none;}

/* ============ Global background (dot grid + gold glow + vignette) ============ */
.ob-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--canvas);}
.ob-bg::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:26px 26px;opacity:.5;}
.ob-bg::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 40% at 20% 10%, rgba(251,191,36,.10), transparent 60%),
    radial-gradient(50% 45% at 85% 80%, rgba(249,115,22,.08), transparent 60%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* ============ Layout ============ */
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.section{padding:80px 0;border-top:1px solid var(--hairline);}
.section:first-of-type{border-top:0;}
@media(max-width:640px){.section{padding:56px 0;}}

.eyebrow{font-family:var(--sans);font-size:.75rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.2em;color:var(--gold);}
.h1{font-size:clamp(2.25rem,6vw,3.5rem);line-height:1.05;letter-spacing:-.02em;color:var(--ink);
  font-weight:600;text-wrap:balance;}
.h2{font-size:clamp(1.6rem,4vw,2.5rem);line-height:1.1;letter-spacing:-.02em;color:var(--ink);
  font-weight:600;text-wrap:balance;}
.h3{font-size:1.25rem;line-height:1.25;color:var(--ink);font-weight:600;}
.lede{font-size:1.0625rem;line-height:1.7;color:var(--mist);}
.muted{color:var(--mist);}
.center{text-align:center;}
.mx-auto{margin-left:auto;margin-right:auto;}
.maxw-2xl{max-width:42rem;}
.maxw-3xl{max-width:48rem;}
.mt-3{margin-top:.75rem;}.mt-4{margin-top:1rem;}.mt-5{margin-top:1.25rem;}
.mt-6{margin-top:1.5rem;}.mt-8{margin-top:2rem;}.mt-10{margin-top:2.5rem;}.mt-12{margin-top:3rem;}

/* ============ Buttons ============ */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-size:.9375rem;
  font-weight:500;padding:12px 24px;transition:all .2s ease;cursor:pointer;border:1px solid transparent;line-height:1;}
.btn-primary{background:var(--ink);color:var(--canvas);padding:8px 8px 8px 24px;}
.btn-primary .arw{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px;background:var(--canvas);color:var(--ink);}
.btn-primary:hover{opacity:.9;}
.btn-primary:hover .arw{transform:translateX(2px);}
.btn-ghost{background:var(--paper);color:var(--mist);border-color:rgba(255,255,255,.15);}
.btn-ghost:hover{border-color:rgba(255,255,255,.3);color:var(--ink);}
.btn-white{background:#fff;color:var(--canvas);}
.btn-white:hover{opacity:.9;}
.arw svg{width:14px;height:14px;transition:transform .2s;}

/* ============ Header / Nav ============ */
.site-header{position:sticky;top:0;z-index:50;padding:16px 0;}
.announce{background:#000;border-bottom:1px solid var(--hairline);font-size:.8125rem;color:var(--mist);padding:9px 0;}
.announce-row{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.announce .an-left{color:var(--gold);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;white-space:nowrap;}
.announce .an-left b{font-weight:600;}
.announce .an-mid{flex:1;text-align:center;}
.announce .an-right{color:var(--ink);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;transition:color .2s;}
.announce .an-right:hover{color:var(--gold);}
@media(max-width:820px){.announce .an-left,.announce .an-right{display:none;}}
.navpill{display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:rgba(28,28,32,.72);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.10);
  border-radius:999px;padding:12px 14px 12px 22px;box-shadow:0 20px 50px -30px rgba(0,0,0,.9);}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--ink);font-size:1.05rem;}
.brand .mk{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:transparent;
  border:1.5px solid var(--gold);color:var(--gold);font-weight:800;font-size:.72rem;}
.brand img{height:30px;width:auto;}
.mainmenu{display:flex;gap:6px;}
.mainmenu a{color:var(--mist);padding:8px 14px;border-radius:10px;font-size:.9375rem;transition:color .2s,background .2s;}
.mainmenu a:hover,.mainmenu .current-menu-item>a{color:var(--ink);}
/* The Wholesale Program CTA lives in the white pill only — never as a menu link (any page). */
.mainmenu li:has(> a[href*="wholesale-program"]){display:none;}
.mainmenu a[href*="wholesale-program"]{display:none;}
.nav-right{display:flex;align-items:center;gap:10px;}
.navtoggle{display:none;background:none;border:0;color:var(--ink);padding:8px;cursor:pointer;}
@media(max-width:900px){
  .mainmenu,.nav-right .btn{display:none;}
  .navtoggle{display:inline-flex;}
  .navpill.open .mainmenu{display:flex;position:absolute;left:16px;right:16px;top:74px;flex-direction:column;
    background:var(--pill);border:1px solid var(--hairline);border-radius:18px;padding:10px;}
  .navpill{position:relative;}
}

/* ============ Hero ============ */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--hairline);text-align:center;
  padding:96px 0 150px;}
/* Animated golden water wave hugging the bottom of the hero (matches old build). */
.hero::after{content:"";position:absolute;left:50%;bottom:-8%;transform:translateX(-50%);
  width:150%;height:70%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side, rgba(251,191,36,.30), rgba(249,115,22,.10) 55%, rgba(10,10,10,0) 76%);
  filter:blur(38px);}
.hero-wave{position:absolute;left:0;right:0;bottom:0;height:70%;z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(to top,#000 48%,rgba(0,0,0,.35) 74%,transparent 100%);
  mask-image:linear-gradient(to top,#000 48%,rgba(0,0,0,.35) 74%,transparent 100%);}
.hero-wave svg{position:absolute;left:-6%;bottom:-8%;width:112%;height:112%;display:block;}
@media(prefers-reduced-motion:reduce){.hero-wave animate{display:none;}}
.badge{display:inline-flex;align-items:center;gap:8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:var(--paper);padding:6px 16px;font-size:.8125rem;color:var(--mist);}
.badge .dot{width:6px;height:6px;border-radius:999px;background:var(--gold);}
.hero .container{position:relative;z-index:1;}

/* ============ Cards ============ */
.card{background:var(--paper);border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-card);
  padding:28px;transition:border-color .3s,transform .3s;}
.card:hover{border-color:rgba(255,255,255,.22);}
.card .ico{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  background:rgba(251,191,36,.15);border:1px solid rgba(251,191,36,.30);color:var(--gold);margin-bottom:18px;}
.card .ico svg{width:20px;height:20px;}
.card h3{margin-bottom:10px;}
.card p{color:var(--mist);font-size:.9375rem;}
.grid{display:grid;gap:22px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.grid-2,.grid-3{grid-template-columns:1fr;}}

/* two-column split */
.split{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:start;}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px;}}

/* ============ Stats ============ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline);
  border:1px solid var(--hairline);border-radius:14px;overflow:hidden;}
.stats .stat{background:var(--canvas);padding:22px;}
.stats .num{font-size:1.9rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;}
.stats .lbl{margin-top:8px;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mist);}
@media(max-width:640px){.stats{grid-template-columns:1fr 1fr;}}

/* ============ Feature list (how we help) ============ */
.feat{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-card);padding:28px;}
.feat .pts{margin-top:18px;display:grid;gap:10px;border-top:1px solid var(--hairline);padding-top:18px;}
.feat .pts li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--mist);}
.feat .pts li::before{content:"";flex:none;width:10px;height:6px;border-left:2px solid var(--gold);
  border-bottom:2px solid var(--gold);transform:rotate(-45deg);margin-top:6px;}

/* ============ Categories ============ */
.cat-row{display:flex;align-items:center;gap:18px;padding:26px;border:1px solid var(--hairline);
  border-radius:var(--radius-card);background:var(--paper);transition:border-color .25s,background .25s;}
.cat-row:hover{border-color:rgba(251,191,36,.35);}
.cat-row .ico{flex:none;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  background:rgba(251,191,36,.15);border:1px solid rgba(251,191,36,.30);color:var(--gold);}
.cat-row .arw2{margin-left:auto;color:var(--gold);opacity:0;transition:opacity .2s;}
.cat-row:hover .arw2{opacity:1;}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.chip{font-size:.8125rem;color:var(--mist);border:1px solid var(--hairline);border-radius:999px;padding:5px 12px;}

/* ============ Testimonials ============ */
.reviews{display:grid;gap:22px;grid-template-columns:repeat(3,1fr);}
@media(max-width:900px){.reviews{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){.reviews{grid-template-columns:1fr;}}
.review{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-card);
  padding:24px;backdrop-filter:blur(6px);}
.review .stars{color:var(--gold);letter-spacing:2px;font-size:.9rem;}
.review blockquote{margin:14px 0 0;color:var(--mist);font-size:.9375rem;line-height:1.6;}
.review .who{margin-top:18px;display:flex;align-items:center;gap:12px;}
.review .av{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;flex:none;
  background:rgba(251,191,36,.15);border:1px solid rgba(251,191,36,.30);color:var(--gold);font-size:.75rem;font-weight:600;}
.review .who b{color:var(--ink);font-size:.9375rem;display:block;}
.review .who span{color:var(--mist);font-size:.8125rem;}

/* ============ Statement / highlight ============ */
.statement{font-size:clamp(1.3rem,3vw,1.7rem);line-height:1.5;color:var(--mist);text-align:center;font-weight:500;}
.statement .hl{color:var(--gold);font-weight:700;}

/* ============ CTA banner ============ */
.cta{border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:56px 32px;text-align:center;
  background:radial-gradient(60% 100% at 50% 0%,rgba(251,191,36,.12),transparent 70%),var(--paper);position:relative;overflow:hidden;}

/* ============ Forms ============ */
.formcard{border:1px solid rgba(255,255,255,.12);border-radius:20px;background:rgba(255,255,255,.03);
  backdrop-filter:blur(8px);padding:32px;}
.field{margin-bottom:18px;}
.field label{display:block;margin-bottom:8px;font-size:.8125rem;font-weight:500;color:var(--mist);}
.field .req{color:var(--gold);}
.field input,.field textarea,.field select{
  width:100%;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:var(--canvas);
  color:var(--ink);padding:12px 16px;font-family:var(--sans);font-size:.9375rem;transition:border-color .2s;}
.field input::placeholder,.field textarea::placeholder{color:rgba(218,218,218,.45);}
.field input:hover,.field textarea:hover,.field select:hover{border-color:rgba(255,255,255,.25);}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(251,191,36,.15);}
.field textarea{resize:vertical;min-height:120px;}
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media(max-width:640px){.form-2col{grid-template-columns:1fr;}}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:.875rem;color:var(--mist);}
.consent input{width:16px;height:16px;margin-top:3px;accent-color:var(--gold);flex:none;}
.notice{border-radius:12px;padding:14px 16px;font-size:.9rem;margin-bottom:18px;}
.notice.ok{background:rgba(156,207,126,.12);border:1px solid rgba(156,207,126,.35);color:#bfe3a6;}
.notice.err{background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.35);color:var(--gold);}

/* contact detail rows */
.detail{display:flex;gap:16px;align-items:flex-start;border:1px solid rgba(255,255,255,.10);
  border-radius:14px;background:rgba(255,255,255,.02);padding:16px;}
.detail .ico{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
  background:rgba(251,191,36,.15);border:1px solid rgba(251,191,36,.30);color:var(--gold);}
.detail .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(218,218,218,.7);font-family:var(--mono);}
.detail .val{margin-top:3px;color:var(--ink);}

/* ============ FAQ ============ */
.faq details{border-bottom:1px solid var(--hairline);padding:18px 0;}
.faq summary{cursor:pointer;list-style:none;color:var(--ink);font-weight:500;font-size:1.0625rem;
  display:flex;justify-content:space-between;gap:16px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--gold);font-size:1.3rem;line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq p{margin-top:12px;color:var(--mist);font-size:.9375rem;}

/* ============ Footer ============ */
.site-footer{border-top:1px solid var(--hairline);background:var(--paper);padding:56px 0 32px;margin-top:0;}
.footcols{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:40px;}
@media(max-width:800px){.footcols{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.footcols{grid-template-columns:1fr;}}
.site-footer h4{color:var(--ink);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:16px;font-family:var(--mono);}
.site-footer a{color:var(--mist);display:block;padding:5px 0;transition:color .2s;}
.site-footer a:hover{color:var(--ink);}
.footbar{margin-top:40px;padding-top:24px;border-top:1px solid var(--hairline);font-size:.8125rem;color:rgba(218,218,218,.7);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* ============ Reveal animation ============ */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}

/* WP alignment helpers */
.screen-reader-text{position:absolute;left:-9999px;}

/* ============ Growth in Motion: sticky stacking cards + rail ============ */
.gim-grid{display:grid;grid-template-columns:.82fr 1.4fr;gap:56px;}
@media(max-width:900px){.gim-grid{grid-template-columns:1fr;gap:32px;}}
.gim-left{align-self:start;}
@media(min-width:901px){.gim-left{position:sticky;top:96px;}}
.rail{position:relative;margin-top:30px;}
.rail-track,.rail-fill{position:absolute;left:17px;width:1px;}
.rail-track{top:20px;bottom:22px;background:var(--hairline);}
.rail-fill{top:6px;height:0;background:var(--gold);transition:height .15s ease-out;box-shadow:0 0 8px rgba(251,191,36,.5);}
.rail-item{display:grid;grid-template-columns:35px 1fr;align-items:center;gap:14px;width:100%;background:none;border:0;cursor:pointer;text-align:left;padding:0;font-family:inherit;}
.rail-node{position:relative;z-index:2;justify-self:center;width:10px;height:10px;border-radius:50%;background:#3a3a42;box-shadow:0 0 0 4px var(--canvas);transition:all .25s;}
.rail-label{font-size:.9375rem;color:var(--mist);padding:12px 0;transition:color .2s;}
.rail-item:hover .rail-label{color:var(--ink);}
.rail-item.on .rail-node{width:12px;height:12px;background:var(--gold);box-shadow:0 0 0 4px var(--canvas),0 0 0 8px rgba(251,191,36,.16);}
.rail-item.done .rail-node{background:var(--gold);}
.rail-item.on .rail-label{color:var(--ink);font-weight:500;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:14px;overflow:hidden;margin-top:30px;}
.stat-grid .stat{background:var(--canvas);padding:18px;}

.stack{position:relative;}
.stackcard{position:sticky;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(28,28,32,.72);
  backdrop-filter:blur(14px);padding:24px;margin-bottom:24px;transform-origin:center top;transition:transform .3s;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.09);}
.stack-tail{height:22vh;}
@media(max-width:900px){.stackcard{position:static;transform:none!important;margin-bottom:18px;}.stack-tail{display:none;}}
.stackcard .top{display:flex;align-items:center;gap:14px;}
.stackcard .top .ico{width:40px;height:40px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:rgba(251,191,36,.15);border:1px solid rgba(251,191,36,.3);color:var(--gold);margin:0;}
.stackcard .top .ico svg{width:18px;height:18px;}
.stackcard h3{font-size:1.35rem;}
.stackcard .body-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:26px;align-items:center;margin-top:18px;}
@media(max-width:640px){.stackcard .body-grid{grid-template-columns:1fr;gap:18px;}}
.illus{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.15);background:var(--canvas);}
.illus .grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:36px 36px;opacity:.7;}
.illus .glow{position:absolute;inset:0;background:radial-gradient(60% 70% at 100% 0%,rgba(251,191,36,.28),transparent 60%);}
.illus .bigico{position:absolute;right:-14px;bottom:-18px;width:130px;height:130px;color:rgba(255,255,255,.06);}
.illus .badge2{position:absolute;bottom:16px;left:16px;border-radius:10px;border:1px solid rgba(255,255,255,.15);background:var(--pill);padding:11px 15px;}
.illus .badge2 .l{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--mist);}
.illus .badge2 .v{margin-top:4px;font-size:1.3rem;font-weight:600;color:var(--gold);line-height:1;}

/* ============ Marquee testimonials ============ */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.marquee-track{display:flex;gap:20px;width:max-content;animation:ob-mq 60s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee .review{width:340px;flex:none;}
@keyframes ob-mq{from{transform:translateX(0);}to{transform:translateX(calc(-50% - 10px));}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;flex-wrap:wrap;justify-content:center;}}

/* ============ Blur-in statement ============ */
.blur-words .w{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(.25em);
  transition:opacity .6s ease,filter .6s ease,transform .6s ease;}
.blur-words.in .w{opacity:1;filter:blur(0);transform:none;}
@media(prefers-reduced-motion:reduce){.blur-words .w{opacity:1;filter:none;transform:none;}}

/* ============ Cursor glare ============ */
.glare{position:relative;}
.glare::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;border-radius:inherit;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(251,191,36,.14),transparent 65%);}
.glare:hover::after{opacity:1;}

/* ============ Services: ambient light + stat labels ============ */
.gim{position:relative;}
.gim::before{content:"";position:absolute;left:-8%;top:34%;width:60%;height:26%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(251,191,36,.16),rgba(249,115,22,.05) 55%,transparent 78%);filter:blur(26px);}
.gim .container{position:relative;z-index:1;}
.stat-grid .num{font-size:1.9rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;}
.stat-grid .lbl{margin-top:8px;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mist);}

/* ============ About Us (5-card layout) ============ */
.gold{color:var(--gold);}
.about{position:relative;}
.about-specks{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(251,191,36,.55) 1px,transparent 1.6px);background-size:58px 58px;
  opacity:.07;-webkit-mask-image:radial-gradient(circle at 50% 42%,#000,transparent 72%);
  mask-image:radial-gradient(circle at 50% 42%,#000,transparent 72%);}
.about .container{position:relative;z-index:1;}
.about-grid{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:22px;align-items:stretch;}
.about-col{display:grid;grid-template-rows:1fr 1fr;gap:22px;}
.about-card{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--radius-card);
  padding:26px;transition:border-color .25s,transform .25s;}
.about-card:hover{border-color:rgba(251,191,36,.35);}
.about-card .ico{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  background:rgba(251,191,36,.15);border:1px solid rgba(251,191,36,.30);color:var(--gold);}
.about-card .ico svg{width:20px;height:20px;}
.about-card p{color:var(--mist);font-size:.9375rem;}
.about-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;border:1px solid rgba(251,191,36,.22);border-radius:20px;padding:44px 30px;
  background:radial-gradient(120% 85% at 50% 122%,rgba(251,191,36,.24),transparent 58%),var(--paper);}
.about-hero .chip{display:inline-flex;align-items:center;gap:7px;border-radius:999px;border:1px solid rgba(251,191,36,.35);
  background:rgba(251,191,36,.10);color:var(--gold);padding:6px 14px;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.14em;font-family:var(--mono);}
.about-hero .chip-ico{display:inline-grid;place-items:center;}
.about-hero .chip-ico svg{width:14px;height:14px;}
.about-hero-title{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15;color:var(--ink);font-weight:600;letter-spacing:-.02em;}
.about-hero p{color:var(--mist);font-size:.95rem;max-width:36ch;}
@media(max-width:900px){
  .about-grid{grid-template-columns:1fr;}
  .about-hero{order:-1;}
}
@media(max-width:560px){.about-col{grid-template-rows:auto auto;}}

/* ============ How We Help: node + animated tree connectors ============ */
.help-tree{margin-top:44px;display:flex;flex-direction:column;align-items:center;}
.node-ring{position:relative;z-index:2;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:var(--pill);border:1px solid rgba(251,191,36,.45);color:var(--gold);
  box-shadow:0 0 0 6px rgba(251,191,36,.07),0 0 34px rgba(251,191,36,.30);}
.node-ring svg{width:26px;height:26px;}
.help-connectors{width:100%;height:96px;margin-top:-2px;pointer-events:none;}
.help-connectors svg{width:100%;height:100%;display:block;overflow:visible;
  filter:drop-shadow(0 0 6px rgba(251,191,36,.5));}
.help-connectors .wire{stroke-dasharray:100;stroke-dashoffset:100;}
.help-tree.in .wire{animation:wire-draw 1.1s ease forwards;}
@keyframes wire-draw{to{stroke-dashoffset:0;}}
/* Dots pop at the tip of each line right as it finishes drawing. */
.help-connectors .wire-dots circle{opacity:0;transform-box:fill-box;transform-origin:center;}
.help-tree.in .wire-dots circle{animation:wire-dot .3s ease forwards;animation-delay:1.05s;}
@keyframes wire-dot{from{opacity:0;transform:scale(.2);}to{opacity:1;transform:scale(1);}}
.help-grid{margin-top:0;}
.help-grid .feat{text-align:center;}
.help-grid .feat .ico{margin-bottom:4px;}
.help-grid .feat .pts{text-align:left;}
@media(prefers-reduced-motion:reduce){
  .help-connectors .wire{stroke-dashoffset:0;}
  .help-connectors .wire-dots circle{opacity:1;}
}
@media(max-width:900px){
  .help-connectors{display:none;}
  .help-tree{margin-bottom:8px;}
  .help-grid{margin-top:2.5rem;}
}

/* ============ Categories: flowing hover-reveal menu ============ */
.flowmenu{border-top:1px solid var(--hairline);}
.flow-item{position:relative;overflow:hidden;border-bottom:1px solid var(--hairline);}
.flow-link{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:18px;
  height:clamp(82px,10vw,120px);text-align:center;color:var(--ink);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.35rem,3.2vw,2.35rem);letter-spacing:-.01em;line-height:1;transition:color .3s ease;}
.flow-link .flow-ico{display:inline-grid;place-items:center;width:1em;height:1em;color:var(--gold);opacity:.55;transition:opacity .3s;}
.flow-link .flow-ico svg{width:.78em;height:.78em;}
.flow-item:hover .flow-link{color:rgba(255,255,255,.35);}
.flow-marquee{position:absolute;inset:0;z-index:2;display:flex;align-items:center;overflow:hidden;
  background:var(--gold);color:var(--canvas);transform:translateY(101%);
  transition:transform .5s cubic-bezier(.19,1,.22,1);will-change:transform;pointer-events:none;}
.flow-marquee-inner{display:flex;align-items:center;white-space:nowrap;animation:flow-scroll 55s linear infinite;}
.flow-seg{display:inline-flex;align-items:center;gap:26px;padding-right:26px;
  font-size:clamp(1.35rem,3.2vw,2.15rem);font-weight:700;text-transform:uppercase;line-height:1;}
.flow-seg-blurb{text-transform:none;font-weight:500;font-size:.5em;color:rgba(10,10,10,.72);}
.flow-dot{display:inline-grid;place-items:center;color:rgba(10,10,10,.8);}
.flow-dot svg{width:.7em;height:.7em;}
@keyframes flow-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.flow-item:hover .flow-marquee-inner{animation-play-state:running;}
@media(hover:none){
  .flow-marquee{display:none;}
  .flow-link{justify-content:flex-start;padding:0 24px;font-size:clamp(1.15rem,6vw,1.6rem);}
}
@media(prefers-reduced-motion:reduce){.flow-marquee-inner{animation:none;}}