/* WhitstoneVerified.com — assets/style.css */
/* Inter font, black/white only, no emojis, Font Awesome icons */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:#fff;color:#0a0a0a;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ── REVEAL ── */
.rv{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
.rv.on{opacity:1;transform:translateY(0)}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}.rv.d5{transition-delay:.5s}

/* ── NAV ── */
nav#main-nav{position:fixed;top:0;left:0;right:0;z-index:999;height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 52px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid #ebebeb}
.nl{display:flex;align-items:center;gap:11px;text-decoration:none}
.nm{width:34px;height:34px;background:#0a0a0a;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;transition:transform .2s}
.nl:hover .nm{transform:rotate(-6deg)}
.nm-wv{font-size:15px;font-weight:900;letter-spacing:-.04em;font-style:italic;border-radius:9px}

/* ── Supplier logo B&W → colour on hover ── */
.sup-logo{width:100%;height:72px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;border-bottom:1px solid #ebebeb;padding-bottom:16px;overflow:hidden}
.sup-logo img{max-height:52px;max-width:100%;object-fit:contain;filter:grayscale(100%) contrast(0.8);transition:filter .3s ease}
.sup-card:hover .sup-logo img,.sup-card-wrap:hover .sup-logo img{filter:grayscale(0%) contrast(1)}
.sup-logo-init{width:52px;height:52px;background:#0a0a0a;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:#fff;letter-spacing:-.04em;font-style:italic}
/* ── Supplier profile page logo (hero) ── */
.sup-profile-logo{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 24px;position:relative;cursor:default;min-width:120px;min-height:60px}
.sup-profile-logo img{max-height:44px;max-width:180px;object-fit:contain;display:block}
#sup-logo-bw{filter:grayscale(100%) brightness(2) contrast(.8);transition:opacity .4s ease;position:relative;z-index:1}
#sup-logo-color{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-height:44px;max-width:180px;object-fit:contain;opacity:0;transition:opacity .4s ease;z-index:2}
.sup-profile-logo:hover #sup-logo-bw{opacity:0}
.sup-profile-logo:hover #sup-logo-color{opacity:1}

/* ── Sidebar filter styles ── */
.sup-sidebar{background:#fff;border:1px solid #ebebeb;border-radius:14px;padding:0;overflow:hidden;position:sticky;top:100px}
.ssb-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #ebebeb;font-size:12px;font-weight:800;color:#0a0a0a;letter-spacing:.04em;text-transform:uppercase}
.ssb-clear{font-size:11px;font-weight:600;color:#aaa;text-decoration:none;display:flex;align-items:center;gap:4px}
.ssb-clear:hover{color:#0a0a0a}
.ssb-block{padding:16px 20px;border-bottom:1px solid #f5f5f5}
.ssb-block:last-child{border-bottom:none}
.ssb-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#aaa;margin-bottom:10px}
.ssb-check{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:7px;cursor:pointer;font-size:13px;font-weight:500;color:#555;transition:all .15s;border:1px solid transparent}
.ssb-check:hover{background:#f5f5f5;color:#0a0a0a}
.ssb-check.active{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.ssb-check.active i{color:#fff}
.ssb-check i{font-size:11px;color:#aaa;width:14px;text-align:center}
.ssb-check input{display:none}
.ssb-input{width:100%;padding:9px 12px;font-size:13px;border:1.5px solid #e8e8e8;border-radius:8px;outline:none;font-family:inherit;color:#0a0a0a;background:#fff;-webkit-appearance:none;transition:border .15s}
.ssb-input:focus{border-color:#0a0a0a}

/* ── Grid/List view toggle ── */
.view-toggle{display:flex;background:#f0f0f0;border-radius:8px;padding:3px;gap:2px}
.vt-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;border:none;background:none;cursor:pointer;font-size:12px;color:#888;transition:all .15s}
.vt-btn.on{background:#fff;color:#0a0a0a;box-shadow:0 1px 4px rgba(0,0,0,.1)}

/* ── List view card ── */
.sup-list .sup-card-wrap{flex-direction:row!important}
.sup-list .sup-card{flex-direction:row!important;align-items:center;gap:20px;border-radius:12px 0 0 12px;padding:20px 24px}
.sup-list .sup-logo{width:80px;height:60px;min-width:80px;border-bottom:none;border-right:1px solid #ebebeb;margin-bottom:0;padding-bottom:0;padding-right:16px;margin-right:4px}
.sup-list .sup-cat-badge{margin-bottom:6px}
.sup-list .sup-name{font-size:16px;margin-bottom:4px}
.sup-list .sup-desc{margin-bottom:0;-webkit-line-clamp:1}
.sup-list .req-btn{width:auto;min-width:130px;border-radius:0 12px 12px 0;padding:0 20px;flex-shrink:0;height:100%}

/* ── Market badges on cards ── */
.sup-market{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.sup-market-badge{display:inline-flex;align-items:center;gap:4px;background:#f0f0f0;border-radius:4px;padding:3px 8px;font-size:10px;font-weight:600;color:#666;letter-spacing:.04em}
.sup-market-badge i{font-size:9px}
.nw{font-size:15px;font-weight:800;color:#0a0a0a;letter-spacing:-.025em}
.nr{display:flex;align-items:center;gap:32px}
.nlinks{list-style:none;display:flex;gap:28px}
.nlinks a{font-size:13px;font-weight:500;color:#666;text-decoration:none;transition:color .15s}
.nlinks a:hover,.nlinks a.active{color:#0a0a0a;font-weight:700}
.napply{background:#0a0a0a;color:#fff;padding:9px 20px;border-radius:7px;font-size:12px;font-weight:700;text-decoration:none;letter-spacing:.02em;transition:opacity .2s;display:flex;align-items:center;gap:7px}
.napply:hover{opacity:.72}

/* ── PAGE WRAPPER ── */
.page-wrap{padding-top:62px}

/* ── SECTION BASE ── */
.sec{padding:120px 52px}
.sec-inner{max-width:1100px;margin:0 auto}
.ey{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#aaa;margin-bottom:18px;display:flex;align-items:center;gap:9px}
.ey i{font-size:9px}
h1.ph{font-size:clamp(42px,6vw,80px);font-weight:900;line-height:.93;letter-spacing:-.04em;color:#0a0a0a}
h2.sh{font-size:clamp(36px,5vw,66px);font-weight:900;line-height:.95;letter-spacing:-.04em;color:#0a0a0a}
h2.sh .it{font-style:italic;font-weight:300}
h3.sth{font-size:clamp(22px,2.5vw,32px);font-weight:800;letter-spacing:-.03em;color:#0a0a0a}
.sbody{font-size:16px;font-weight:400;color:#777;line-height:1.72}
.dark-ey{color:rgba(255,255,255,.22)}
.dark-ey i{color:rgba(255,255,255,.22)}

/* ── BUTTONS ── */
.bs{background:#0a0a0a;color:#fff;padding:14px 28px;border-radius:8px;font-size:13px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px;border:2px solid #0a0a0a;transition:opacity .2s}
.bs:hover{opacity:.7}
.bl{background:transparent;color:#0a0a0a;padding:14px 28px;border-radius:8px;font-size:13px;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:8px;border:2px solid #d4d4d4;transition:border-color .2s}
.bl:hover{border-color:#0a0a0a}
.bw{background:#fff;color:#0a0a0a;padding:14px 28px;border-radius:8px;font-size:13px;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;gap:8px;border:2px solid #fff;transition:opacity .2s;letter-spacing:.01em}
.bw:hover{opacity:.8}
.bgw{background:transparent;color:rgba(255,255,255,.55);padding:14px 28px;border-radius:8px;font-size:13px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px;border:2px solid rgba(255,255,255,.15);transition:all .2s}
.bgw:hover{border-color:rgba(255,255,255,.4);color:#fff}
button.bs,button.bl,button.bw{cursor:pointer;font-family:'Inter',sans-serif}

/* ── TICKER ── */
.ticker{background:#0a0a0a;padding:13px 0;overflow:hidden;position:relative}
.ticker::before,.ticker::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2}
.ticker::before{left:0;background:linear-gradient(to right,#0a0a0a,transparent)}
.ticker::after{right:0;background:linear-gradient(to left,#0a0a0a,transparent)}
.ttrack{display:flex;width:max-content;animation:tick 30s linear infinite}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ti{display:inline-flex;align-items:center;gap:10px;padding:0 24px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.35);white-space:nowrap}
.tdot{width:3px;height:3px;background:rgba(255,255,255,.2);border-radius:50%;flex-shrink:0}

/* ── PAGE HERO (inner pages) ── */
.page-hero{background:#0a0a0a;padding:100px 52px 80px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.05)}
.page-hero::before{content:attr(data-bg);position:absolute;font-size:clamp(120px,18vw,260px);font-weight:900;color:rgba(255,255,255,.025);letter-spacing:-.04em;right:0;top:50%;transform:translateY(-50%);pointer-events:none;user-select:none;white-space:nowrap;font-style:italic}
.page-hero-in{max-width:1100px;margin:0 auto;position:relative;z-index:1}
.page-hero .ey{color:rgba(255,255,255,.3)}
.page-hero h1{color:#fff}
.page-hero .hsub{font-size:18px;font-weight:300;color:rgba(255,255,255,.5);line-height:1.65;max-width:560px;margin-top:18px}

/* ── FORMS ── */
.form-sec{background:#fff;border-bottom:1px solid #ebebeb}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-grid.cols3{grid-template-columns:1fr 1fr 1fr}
.form-full{grid-column:1/-1}
.fgroup{display:flex;flex-direction:column;gap:7px}
label.flabel{font-size:12px;font-weight:700;color:#0a0a0a;letter-spacing:.02em}
label.flabel span.req{color:#c00}
input.finput,select.finput,textarea.finput{
  width:100%;padding:12px 16px;font-family:'Inter',sans-serif;font-size:14px;font-weight:400;
  color:#0a0a0a;background:#fff;border:1.5px solid #e0e0e0;border-radius:8px;outline:none;
  transition:border-color .2s;-webkit-appearance:none;
}
input.finput:focus,select.finput:focus,textarea.finput:focus{border-color:#0a0a0a}
textarea.finput{resize:vertical;min-height:120px}
.form-note{font-size:12px;color:#aaa;line-height:1.5;margin-top:3px}
.form-section-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0a0a0a;padding:20px 0 14px;grid-column:1/-1;border-top:1px solid #ebebeb;margin-top:8px}
.form-section-title:first-of-type{border-top:none;margin-top:0}
.checkbox-row{display:flex;align-items:flex-start;gap:12px;grid-column:1/-1;padding:14px 0 0}
.checkbox-row input[type=checkbox]{width:18px;height:18px;flex-shrink:0;margin-top:2px;accent-color:#0a0a0a;cursor:pointer}
.checkbox-row label{font-size:13px;color:#555;line-height:1.6;cursor:pointer}
.checkbox-row label a{color:#0a0a0a;font-weight:600}
.form-error{background:#fef2f2;border:1px solid #fca5a5;border-radius:8px;padding:14px 18px;font-size:13px;color:#c00;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.form-success{background:#f0fdf4;border:1px solid #86efac;border-radius:8px;padding:18px 22px;font-size:14px;color:#166534;margin-bottom:20px}
.form-success h3{font-size:16px;font-weight:800;margin-bottom:6px}

/* ── SUPPLIER CARDS ── */
.sup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sup-card{background:#fff;border:1px solid #ebebeb;border-radius:16px;padding:28px;transition:all .2s;text-decoration:none;color:inherit;display:block}
.sup-card:hover{border-color:#0a0a0a;transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.07)}
.sup-cat-badge{display:inline-flex;align-items:center;gap:6px;background:#f5f5f5;border-radius:6px;padding:4px 10px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#666;margin-bottom:16px}
.sup-cat-badge i{font-size:10px;color:#0a0a0a}
.sup-name{font-size:18px;font-weight:800;color:#0a0a0a;letter-spacing:-.02em;margin-bottom:6px;line-height:1.15}
.sup-location{font-size:12px;color:#aaa;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.sup-desc{font-size:13px;color:#777;line-height:1.6;margin-bottom:16px}
.sup-meta{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid #f5f5f5}
.sup-score{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:#0a0a0a}
.sup-score i{font-size:11px;color:#0a0a0a}
.sup-badge{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0a0a0a}
.sup-badge i{font-size:11px}

/* ── FILTER BAR ── */
.filter-bar{background:#fafafa;border-bottom:1px solid #ebebeb;padding:20px 52px}
.filter-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.filter-inner select,.filter-inner input{padding:10px 14px;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;color:#0a0a0a;background:#fff;border:1.5px solid #e0e0e0;border-radius:8px;outline:none;transition:border-color .2s;-webkit-appearance:none;cursor:pointer}
.filter-inner select:focus,.filter-inner input:focus{border-color:#0a0a0a}
.filter-inner input{min-width:260px}
.filter-inner select{min-width:180px}
.filter-count{font-size:13px;font-weight:500;color:#aaa;margin-left:auto}

/* ── DARK SECTIONS ── */
.dark-sec{background:#0a0a0a;position:relative;overflow:hidden}
.dark-sec::before{content:attr(data-bg-text);position:absolute;font-size:clamp(120px,18vw,260px);font-weight:900;color:rgba(255,255,255,.02);letter-spacing:-.04em;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;user-select:none;white-space:nowrap;font-style:italic}
.dark-ey{color:rgba(255,255,255,.25)}
.dark-h{color:#fff}
.dark-body{color:rgba(255,255,255,.38)}

/* ── PILLAR CARDS ── */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pillar{background:#f8f8f8;border-radius:12px;padding:22px;border:1px solid #ebebeb;transition:all .2s}
.pillar:hover{border-color:#0a0a0a;background:#fff;transform:translateY(-2px)}
.pico{width:38px;height:38px;background:#fff;border:1px solid #e0e0e0;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;transition:all .2s}
.pillar:hover .pico{background:#0a0a0a;border-color:#0a0a0a}
.pico i{font-size:14px;color:#0a0a0a;transition:color .2s}
.pillar:hover .pico i{color:#fff}
.pillar h4{font-size:13px;font-weight:700;color:#0a0a0a;margin-bottom:5px}
.pillar p{font-size:12px;color:#888;line-height:1.55}

/* Dark pillars */
.dark-pillar{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:22px;transition:background .2s}
.dark-pillar:hover{background:rgba(255,255,255,.07)}
.dark-pico{width:38px;height:38px;border:1px solid rgba(255,255,255,.1);border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.dark-pico i{font-size:14px;color:rgba(255,255,255,.45)}
.dark-pillar h4{font-size:13px;font-weight:700;color:#fff;margin-bottom:5px}
.dark-pillar p{font-size:12px;color:rgba(255,255,255,.32);line-height:1.55}

/* ── STATS ROW ── */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #ebebeb;border-radius:16px;overflow:hidden}
.stat-box{padding:36px 32px;border-right:1px solid #ebebeb;transition:background .2s}
.stat-box:last-child{border-right:none}
.stat-box:hover{background:#fafafa}
.stat-n{font-size:clamp(30px,3.5vw,46px);font-weight:900;color:#0a0a0a;line-height:1;margin-bottom:8px;letter-spacing:-.03em}
.stat-n sup{font-size:50%;font-weight:700}
.stat-l{font-size:11px;font-weight:600;color:#aaa;letter-spacing:.07em;text-transform:uppercase;line-height:1.4}

/* ── PHASES ACCORDION ── */
.phases{border:1px solid #ebebeb;border-radius:16px;overflow:hidden}
.ph{border-bottom:1px solid #ebebeb;transition:background .2s}
.ph:last-child{border-bottom:none}
.ph:hover{background:#fafafa}
.ph-head{padding:22px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;user-select:none}
.ph-left{display:flex;align-items:center;gap:16px}
.ph-n{font-size:10px;font-weight:700;letter-spacing:.1em;color:#ccc;min-width:22px}
.ph-ico{width:40px;height:40px;background:#f5f5f5;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.ph:hover .ph-ico,.ph.open .ph-ico{background:#0a0a0a}
.ph-ico i{font-size:15px;color:#0a0a0a;transition:color .2s}
.ph:hover .ph-ico i,.ph.open .ph-ico i{color:#fff}
.ph-title{font-size:15px;font-weight:700;color:#0a0a0a}
.ph-tag{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:4px 10px;border-radius:100px;background:#f0f0f0;color:#888;white-space:nowrap;flex-shrink:0}
.ph-body{padding:0 28px 0 74px;max-height:0;overflow:hidden;transition:all .45s cubic-bezier(.16,1,.3,1)}
.ph.open .ph-body{max-height:300px;padding-bottom:24px}
.ph-desc{font-size:13px;color:#888;line-height:1.7;margin-bottom:14px}
.pchecks{display:flex;flex-wrap:wrap;gap:7px}
.pck{display:flex;align-items:center;gap:6px;background:#f8f8f8;border:1px solid #ebebeb;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:600;color:#555}
.pck i{font-size:9px;color:#0a0a0a}

/* ── BADGE SVG SCREEN ── */
.badge-sc{background:#0a0a0a;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:100px 52px;position:relative;overflow:hidden}
.badge-sc::before{content:'VERIFIED';position:absolute;font-size:clamp(120px,20vw,280px);font-weight:900;color:rgba(255,255,255,.022);letter-spacing:-.04em;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;user-select:none;white-space:nowrap}
.bsci{max-width:760px;text-align:center;position:relative;z-index:1}
.bsvgw{margin:0 auto 44px;width:160px;height:160px}
.btag{font-size:clamp(34px,5vw,60px);font-weight:900;color:#fff;line-height:.95;letter-spacing:-.04em;margin-bottom:20px}
.btag .it{font-style:italic;font-weight:300;color:rgba(255,255,255,.45)}
.bsub{font-size:16px;font-weight:400;color:rgba(255,255,255,.36);line-height:1.65;margin-bottom:52px}
.bpts{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:left}
.bp{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:18px 20px;display:flex;align-items:flex-start;gap:12px;transition:background .2s}
.bp:hover{background:rgba(255,255,255,.07)}
.bpic{width:30px;height:30px;border:1px solid rgba(255,255,255,.1);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bpic i{font-size:11px;color:rgba(255,255,255,.4)}
.bp h5{font-size:12px;font-weight:700;color:#fff;margin-bottom:3px}
.bp p{font-size:11px;color:rgba(255,255,255,.3);line-height:1.45}

/* ── CATEGORY SLIDER ── */
.cat-sec{background:#fff;border-top:1px solid #ebebeb;padding:120px 52px}
.cat-top{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:52px;flex-wrap:wrap;gap:20px}
.catarrs{display:flex;gap:10px}
.carr{width:44px;height:44px;border:1.5px solid #e0e0e0;border-radius:10px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:#0a0a0a;transition:all .2s}
.carr:hover{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.cat-vp{overflow:hidden;border-radius:16px;border:1px solid #ebebeb}
.cat-track{display:flex;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.cslide{min-width:100%;display:grid;grid-template-columns:1fr 1fr;background:#fff}
.csl{padding:68px 60px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid #ebebeb;min-height:420px}
.csl-num{font-size:11px;font-weight:700;letter-spacing:.12em;color:#ddd;text-transform:uppercase;padding-bottom:28px}
.csl-ico{width:60px;height:60px;border:1.5px solid #ebebeb;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.csl-ico i{font-size:24px;color:#0a0a0a}
.csl-name{font-size:clamp(26px,3.2vw,42px);font-weight:900;color:#0a0a0a;letter-spacing:-.03em;line-height:1.05;margin-bottom:14px}
.csl-desc{font-size:15px;color:#777;line-height:1.65;max-width:380px}
.csr{padding:68px 60px;background:#fafafa;display:flex;flex-direction:column;justify-content:space-between;min-height:420px}
.csr-big{font-size:clamp(52px,7vw,96px);font-weight:900;color:#0a0a0a;line-height:1;letter-spacing:-.04em;margin-bottom:8px}
.csr-big sup{font-size:45%;font-weight:700}
.csr-label{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#aaa;margin-bottom:36px}
.cchecks{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.cchk{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:#555}
.cchk i{font-size:11px;color:#0a0a0a;flex-shrink:0}
.cdots{display:flex;gap:6px;margin-top:22px;justify-content:center}
.cdot{width:6px;height:6px;border-radius:50%;background:#ddd;transition:all .3s;cursor:pointer}
.cdot.on{background:#0a0a0a;width:22px;border-radius:3px}

/* ── SERVE CARDS ── */
.serve-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:52px}
.sv{background:#fff;border:1px solid #ebebeb;border-radius:16px;padding:38px;transition:all .2s}
.sv:hover{border-color:#0a0a0a;transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.06)}
.sv-ico{width:50px;height:50px;background:#f5f5f5;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:all .2s}
.sv:hover .sv-ico{background:#0a0a0a}
.sv-ico i{font-size:20px;color:#0a0a0a;transition:color .2s}
.sv:hover .sv-ico i{color:#fff}
.sv-title{font-size:20px;font-weight:800;color:#0a0a0a;margin-bottom:10px;letter-spacing:-.02em}
.sv-desc{font-size:14px;color:#777;line-height:1.72;margin-bottom:20px}
.sv-tags{display:flex;flex-wrap:wrap;gap:6px}
.sv-tag{background:#f5f5f5;border-radius:5px;padding:4px 10px;font-size:11px;font-weight:600;color:#555}

/* ── TESTIMONIALS ── */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.tc{background:#fff;border:1px solid #ebebeb;border-radius:16px;padding:32px;transition:all .2s}
.tc:hover{border-color:#0a0a0a;transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.06)}
.tqm{font-size:44px;line-height:1;color:#e8e8e8;margin-bottom:10px;font-family:Georgia,serif}
.tq{font-size:15px;color:#333;line-height:1.7;font-style:italic;margin-bottom:22px}
.tau{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid #f5f5f5}
.tav{width:38px;height:38px;background:#0a0a0a;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0}
.tan{font-size:13px;font-weight:700;color:#0a0a0a;margin-bottom:2px}
.tar{font-size:11px;color:#aaa}

/* ── CTA DARK ── */
.cta-dark{background:#0a0a0a;padding:140px 52px;text-align:center;position:relative;overflow:hidden}
.cta-dark::before{content:attr(data-bg);position:absolute;font-size:clamp(140px,22vw,300px);font-weight:900;color:rgba(255,255,255,.018);letter-spacing:-.05em;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;user-select:none;white-space:nowrap}
.cta-in{max-width:660px;margin:0 auto;position:relative;z-index:1}
.cta-ey{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.22);margin-bottom:20px;display:flex;align-items:center;justify-content:center;gap:9px}
.cta-h{font-size:clamp(48px,7vw,96px);font-weight:900;color:#fff;line-height:.92;letter-spacing:-.04em;margin-bottom:22px}
.cta-h .it{font-style:italic;font-weight:300;color:rgba(255,255,255,.42)}
.cta-sub{font-size:16px;color:rgba(255,255,255,.36);line-height:1.65;margin-bottom:48px}
.cta-btns{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:26px;flex-wrap:wrap}
.cta-note{font-size:11px;color:rgba(255,255,255,.18);letter-spacing:.06em}

/* ── FOOTER ── */
footer{background:#0a0a0a;border-top:1px solid rgba(255,255,255,.05);padding:64px 52px 32px}
.fi{max-width:1100px;margin:0 auto}
.ft{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:52px}
.fdesc{font-size:13px;color:rgba(255,255,255,.28);line-height:1.7;max-width:250px;margin:14px 0 18px}
.fstamp{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:7px;padding:7px 12px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.22)}
.fch{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.18);margin-bottom:16px}
.flinks{list-style:none;display:flex;flex-direction:column;gap:10px}
.flinks a{font-size:13px;color:rgba(255,255,255,.32);text-decoration:none;transition:color .15s}
.flinks a:hover{color:rgba(255,255,255,.8)}
.fb{display:flex;align-items:center;justify-content:space-between;padding-top:26px;border-top:1px solid rgba(255,255,255,.05);flex-wrap:wrap;gap:12px}
.fcopy{font-size:12px;color:rgba(255,255,255,.18)}
.fsocs{display:flex;gap:8px}
.fsoc{width:32px;height:32px;background:rgba(255,255,255,.04);border-radius:7px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.22);font-size:12px;text-decoration:none;transition:all .15s}
.fsoc:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7)}

/* ── PORTAL ── */
.portal-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#fafafa;padding:40px 20px}
.portal-box{background:#fff;border:1px solid #ebebeb;border-radius:16px;padding:48px;width:100%;max-width:440px}
.portal-logo{display:flex;align-items:center;gap:11px;text-decoration:none;margin-bottom:36px;justify-content:center}
.portal-title{font-size:24px;font-weight:900;color:#0a0a0a;letter-spacing:-.03em;margin-bottom:6px;text-align:center}
.portal-sub{font-size:14px;color:#888;text-align:center;margin-bottom:32px}
.portal-divider{height:1px;background:#ebebeb;margin:24px 0}
.portal-link{font-size:13px;color:#666;text-align:center;display:block}
.portal-link a{color:#0a0a0a;font-weight:600;text-decoration:none}
.portal-link a:hover{text-decoration:underline}

/* ── BREADCRUMB ── */
.bc{display:flex;align-items:center;gap:8px;font-size:12px;color:#aaa;margin-bottom:28px;flex-wrap:wrap}
.bc a{color:#aaa;text-decoration:none;transition:color .15s}
.bc a:hover{color:#0a0a0a}
.bc i{font-size:9px}

/* ── PAGINATION ── */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;padding-top:52px}
.pag-btn{width:40px;height:40px;border:1.5px solid #e0e0e0;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#666;text-decoration:none;transition:all .2s}
.pag-btn:hover,.pag-btn.on{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.pag-btn.dots{border:none;pointer-events:none;color:#ccc}

/* ── UTILITY ── */
.text-center{text-align:center}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}.mt-64{margin-top:64px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.mb-32{margin-bottom:32px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.flex-between{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}
.tag{background:#f5f5f5;border-radius:5px;padding:4px 10px;font-size:11px;font-weight:600;color:#555;display:inline-block}
.tag-dark{background:rgba(255,255,255,.06);border-radius:5px;padding:4px 10px;font-size:11px;font-weight:600;color:rgba(255,255,255,.4);display:inline-block}
.sep{height:1px;background:#ebebeb;margin:0}
.empty-state{text-align:center;padding:80px 40px}
.empty-state i{font-size:40px;color:#ddd;margin-bottom:20px}
.empty-state h3{font-size:20px;font-weight:800;color:#0a0a0a;margin-bottom:10px}
.empty-state p{font-size:14px;color:#aaa}

/* ── SUPPLIER CARD WRAP (for request button) ── */
.sup-card-wrap{position:relative}
.sup-card-wrap .sup-card{border-radius:16px 16px 0 0;border-bottom:none}
.req-btn{width:100%;background:#0a0a0a;color:#fff;border:none;padding:11px 18px;font-family:'Inter',sans-serif;font-size:12px;font-weight:700;cursor:pointer;border-radius:0 0 16px 16px;display:flex;align-items:center;justify-content:center;gap:7px;transition:opacity .15s;letter-spacing:.02em}
.req-btn:hover{opacity:.75}
.req-btn i{font-size:11px}


/* ─────────────────────────────────────────────
   MOBILE — base rules (desktop overrides above)
   ───────────────────────────────────────────── */
.nav-hamburger { display: none; }
.mobile-nav-drawer { display: none; position: fixed; top: 56px; left: 0; right: 0; bottom: 0; z-index: 998; background: #fff; border-top: 1px solid #ebebeb; padding: 20px 20px 40px; flex-direction: column; gap: 2px; overflow-y: auto; }
.mobile-nav-drawer.open { display: flex; }
.mobile-nav-drawer a { display: flex; align-items: center; padding: 14px 16px; font-size: 15px; font-weight: 600; color: #0a0a0a; text-decoration: none; border-radius: 8px; }
.mobile-nav-drawer a:hover { background: #f5f5f5; }
.mobile-nav-drawer .mnd-apply { margin-top: 12px; background: #0a0a0a; color: #fff; border-radius: 10px; justify-content: center; font-weight: 700; }

/* ─────────────────────────────────────────────
   TABLET  ≤ 900px
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .tgrid { grid-template-columns: 1fr 1fr !important; }
  .serve-grid { grid-template-columns: 1fr 1fr !important; }
  .stats-row { grid-template-columns: 1fr 1fr !important; }
  .stat-box { border-bottom: 1px solid #ebebeb; }
  .pillars { grid-template-columns: 1fr 1fr !important; }
  .bpts { grid-template-columns: 1fr 1fr !important; }
  .cslide { grid-template-columns: 1fr !important; }
  .csr { padding: 32px 40px !important; }
}

/* ─────────────────────────────────────────────
   MOBILE  ≤ 768px
   ───────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Nav */
  nav#main-nav { padding: 0 16px; height: 56px; }
  .nlinks { display: none; }
  .napply { display: none; }
  .nr { gap: 0; }
  .nav-hamburger { display: flex !important; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; background: none; cursor: pointer; font-size: 20px; color: #0a0a0a; padding: 0; flex-shrink: 0; }
  .page-wrap { padding-top: 56px; }

  /* Hero */
  .hero { padding: 72px 16px 48px !important; min-height: auto !important; }
  .hero h1 { font-size: clamp(40px, 11vw, 60px) !important; }

  /* Page hero (inner pages) */
  .page-hero { padding: 60px 16px 44px !important; }
  .page-hero h1 { font-size: clamp(28px, 8vw, 44px) !important; }

  /* General sections */
  .sec { padding-left: 0 !important; padding-right: 0 !important; }
  .sec-inner { padding: 52px 16px !important; max-width: 100%; }

  /* All inline 2-col grids → 1 col */
  .sec-inner [style*="grid-template-columns:1fr 1fr"],
  .sec-inner [style*="grid-template-columns: 1fr 1fr"] { display: block !important; }
  .sec-inner [style*="grid-template-columns:1fr 1fr"] > *,
  .sec-inner [style*="grid-template-columns: 1fr 1fr"] > * { margin-bottom: 28px; }

  /* Dark rejection section */
  section[style*="background:#0a0a0a"][style*="padding:140px"] { padding: 60px 16px !important; }
  section[style*="background:#0a0a0a"] .sec-inner { display: block !important; padding: 0 !important; }
  section[style*="background:#0a0a0a"] .sec-inner > .rv:first-child { margin-bottom: 36px; }
  section[style*="background:#0a0a0a"] .sec-inner > .rv:last-child { display: flex !important; flex-direction: column !important; gap: 10px !important; }

  /* Pillars 3→1 col */
  .pillars { grid-template-columns: 1fr !important; }

  /* Stats 4→2 col */
  .stats-row { grid-template-columns: 1fr 1fr !important; }
  .stat-box { padding: 24px 16px !important; border-bottom: 1px solid #ebebeb; }

  /* Serve grid 2→1 */
  .serve-grid { grid-template-columns: 1fr !important; margin-top: 32px; }
  .sv { padding: 24px !important; }

  /* Testimonials 3→1 */
  .tgrid { grid-template-columns: 1fr !important; margin-top: 32px; }

  /* Badge section */
  .badge-sc { padding: 60px 16px !important; min-height: auto !important; }
  .bpts { grid-template-columns: 1fr !important; }

  /* Category slider */
  .cat-sec { padding: 60px 16px !important; }
  .cslide { grid-template-columns: 1fr !important; }
  .csl { padding: 32px 24px !important; min-height: auto !important; border-right: none !important; border-bottom: 1px solid #ebebeb; }
  .csr { padding: 32px 24px !important; }

  /* Process accordion */
  .ph-head { padding: 16px 16px !important; }
  .ph-body { padding-left: 16px !important; }
  .ph-tag { display: none; }
  .ph-title { font-size: 13px !important; }

  /* CTA */
  .cta-dark { padding: 64px 16px !important; }
  .cta-h { font-size: clamp(36px, 9vw, 56px) !important; }
  .cta-btns { flex-direction: column; gap: 10px; }
  .cta-btns a { justify-content: center; }

  /* Footer */
  footer { padding: 48px 16px 28px !important; }
  .ft { grid-template-columns: 1fr 1fr !important; gap: 32px 24px !important; }
  .fb { flex-direction: column; align-items: flex-start; gap: 14px; }

  /* Stats row in hero */
  .rv[style*="display:flex;gap:0;border-top"] { flex-wrap: wrap; gap: 0; }
  .rv[style*="display:flex;gap:0;border-top"] > div { flex: 0 0 50%; padding: 20px 16px !important; border-left: none !important; border-top: 1px solid #ebebeb; }
  .rv[style*="display:flex;gap:0;border-top"] > div:nth-child(2) { border-left: 1px solid #ebebeb !important; }

  /* Suppliers page layout */
  .sl-wrap { grid-template-columns: 1fr !important; padding: 0 0 60px !important; gap: 0 !important; }
  .sidebar { position: static !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; border-top: none !important; }
  .sb-head { cursor: pointer; }
  .sb-sections-wrap { display: none; }
  .sidebar.sb-open .sb-sections-wrap { display: block; }

  /* Supplier cards */
  .sup-grid-v4 { grid-template-columns: 1fr 1fr !important; gap: 12px !important; padding: 12px 12px 0 !important; }
  .results-toolbar { padding: 16px 12px 0 !important; }
  .list-v .sc-inner { gap: 12px !important; padding: 14px !important; }
  .list-v .sc-req { min-width: 80px !important; padding: 0 12px !important; font-size: 11px !important; }

  /* About page inline grids */
  .sec-inner [style*="display:grid"] { display: block !important; }
  .sec-inner [style*="display:grid"] > * { margin-bottom: 24px; }
  .sec-inner [style*="display:grid"] > *:last-child { margin-bottom: 0; }
}

/* ─────────────────────────────────────────────
   SMALL PHONE  ≤ 480px
   ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .sup-grid-v4 { grid-template-columns: 1fr !important; }
  .ft { grid-template-columns: 1fr !important; gap: 28px !important; }
  .stats-row { grid-template-columns: 1fr 1fr !important; }
  .tgrid { grid-template-columns: 1fr !important; }
  .results-toolbar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .results-toolbar > div:last-child { width: 100%; justify-content: space-between; }
  .sort-select { flex: 1; }
  .list-v .sc-logo { display: none !important; }
}