/* ───────────────────────────────────────────────────────────────────────────
   Revo Sportswear Group — trade-only site.

   Palette is Revo's own — black, cyan and white — which is what the logo, the
   eblasts and the Marketing Hub already use, so the site and the campaign
   finally read as one brand. The consumer storefront runs the same scheme.
   Layout language is Heather's Marketing Hub — hairline rules, uppercase
   eyebrows, generous vertical rhythm. Copy is the Private Label campaign.

   The old page spoke to end users ("your gear", "Start a Design", "Browse
   Catalog") on a site that sells to nobody but the trade. Every CTA here is a
   dealer action, and a visitor who is not a dealer is routed to one.
   ─────────────────────────────────────────────────────────────────────────── */
:root{
  /* Revo's own colours — black, cyan, white (Ken + the graphic team, 2026-08-26).
     This is the palette Heather's campaign and the Revo logo already use, so the
     site, the eblasts and the marketing hub finally read as one brand.

     ⚠ Revo cyan is BRIGHT: #00AEEF on white is 2.53:1, which fails for text.
     So the cyan splits into three jobs and they are not interchangeable —
       --accent      fills, graphics, and text on a DARK ground (7.6:1 there)
       --accent-ink  cyan TEXT on white (5.2:1, passes AA)
       --on-accent   the label that sits ON a cyan fill — near-black, 7.6:1
                     (white on cyan is 2.5:1 and must never be used) */
  --paper:#ffffff; --paper-2:#f1f5f8; --surface:#ffffff;
  --ink:#0b0f14; --ink-soft:#232c36; --muted:#55606d; --soft:#66727f;
  --accent:#00AEEF; --accent-ink:#00769c; --accent-deep:#0086b8; --on-accent:#0b0f14;
  --band:#0b0f14;
  --rule:rgba(11,15,20,.11); --rule-soft:rgba(11,15,20,.06);
  --max:1240px; --radius:18px;
  --shadow:0 1px 2px rgba(11,15,20,.05), 0 10px 30px rgba(11,15,20,.08);
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
     font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{text-wrap:balance;margin:0;letter-spacing:-.02em;font-weight:800;line-height:1.08}
h1{font-size:clamp(2.5rem,6vw,4.4rem)}
h2{font-size:clamp(1.9rem,3.8vw,3rem)}
h3{font-size:1.16rem;letter-spacing:-.01em;line-height:1.3}
p{margin:0 0 1.1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
         color:var(--accent-ink);margin:0 0 14px}
.lede{font-size:clamp(1.06rem,1.5vw,1.24rem);color:var(--muted);max-width:62ch}
.sec{padding-block:clamp(64px,8vw,110px);border-top:1px solid var(--rule-soft)}
.sec:first-of-type{border-top:0}

/* ── header ─────────────────────────────────────────────────────────────── */
.trade{background:var(--band);color:#c8d4e0;font-size:12px;letter-spacing:.09em;
       text-transform:uppercase;font-weight:700;text-align:center;padding:9px 16px}
.trade b{color:#fff}
header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
       backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;gap:26px;height:74px}
.nav img{height:30px;width:auto}
.nav nav{display:flex;gap:24px;margin-left:auto;font-size:14.5px;font-weight:600}
.nav nav a{text-decoration:none;color:var(--ink-soft);padding:6px 0;border-bottom:2px solid transparent}
.nav nav a:hover{color:var(--accent-ink);border-bottom-color:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--on-accent);
     text-decoration:none;font-weight:700;font-size:14.5px;padding:12px 22px;border-radius:99px;
     border:1px solid var(--accent);white-space:nowrap;transition:background .15s,transform .15s}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--accent-ink);border-color:rgba(0,118,156,.38)}
.btn.ghost:hover{background:rgba(0,174,239,.09);color:var(--accent-ink);transform:none}
.btn.light{background:#fff;color:var(--accent-ink);border-color:#fff}
.btn.light:hover{background:#e6f6fd;color:var(--accent-ink)}
.btn.big{font-size:16px;padding:15px 30px}
.menu{display:none;margin-left:auto;background:none;border:1px solid var(--rule);
      border-radius:10px;padding:8px 12px;font:700 14px var(--font);cursor:pointer;color:var(--ink)}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{padding-top:clamp(46px,6vw,84px);padding-bottom:clamp(40px,5vw,64px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,68px);align-items:center}
.hero h1{margin-bottom:20px}
.hero h1 span{color:var(--accent-ink)}
.hero .lede{font-size:clamp(1.1rem,1.6vw,1.32rem);margin-bottom:28px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-art{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--surface)}
.trust{margin-top:clamp(40px,5vw,60px);padding-top:26px;border-top:1px solid var(--rule);
       display:flex;gap:14px 40px;flex-wrap:wrap;align-items:center}
.trust span{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.trust b{color:var(--accent-ink)}

/* ── pillars ────────────────────────────────────────────────────────────── */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pillar{background:var(--surface);border:1px solid var(--rule-soft);border-radius:var(--radius);
        padding:26px 24px 28px;box-shadow:var(--shadow)}
.pillar img{width:74px;margin-bottom:16px}
.pillar h3{font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:8px}
.pillar p{font-size:14.5px;color:var(--muted);margin:0}

/* ── two-column feature ─────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.split.rev .col-art{order:-1}
.col-art img{border-radius:var(--radius);box-shadow:var(--shadow)}
.checks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.checks li{position:relative;padding-left:30px;font-size:15.5px;color:var(--ink-soft)}
.checks li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.4 11.6 3 8.2l1.1-1.1 2.3 2.3 5.5-5.5L13 5z' fill='black'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.4 11.6 3 8.2l1.1-1.1 2.3 2.3 5.5-5.5L13 5z' fill='black'/></svg>") center/contain no-repeat}

/* ── dark band ──────────────────────────────────────────────────────────── */
.band{background:var(--band);color:#e8eef4;border-top:0}
.band .eyebrow{color:var(--accent)}
.band h2{color:#fff}
.band .lede{color:#b6c2ce}
.band .checks li{color:#c8d4e0}
.band .checks li::before{background:var(--accent)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;
          padding-top:36px;border-top:1px solid rgba(255,255,255,.13)}
.stat b{display:block;font-size:clamp(2rem,3.4vw,2.9rem);font-weight:800;color:#fff;
        letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:9px;font-size:13.5px;color:#a8b5c2;max-width:30ch}

/* ── IQ studio ──────────────────────────────────────────────────────────── */
.iq-head{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:34px}
.iq-head img{width:min(300px,62vw)}
.iq{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.iq-card{background:var(--surface);border:1px solid var(--rule-soft);border-radius:var(--radius);
         padding:26px 24px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.iq-card img{width:132px;margin-bottom:18px}
.iq-card p{font-size:14.8px;color:var(--muted);flex:1}
.iq-card a{margin-top:14px;align-self:flex-start}
.note{margin-top:22px;font-size:14px;color:var(--soft)}

/* ── categories ─────────────────────────────────────────────────────────── */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin-top:34px}
.cat{background:var(--surface);border:1px solid var(--rule-soft);border-radius:14px;padding:18px 20px}
.cat b{display:block;font-size:15px}
.cat span{font-size:13px;color:var(--soft)}

/* ── not-a-dealer ───────────────────────────────────────────────────────── */
.route{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius);
       padding:clamp(26px,3.5vw,38px);display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.route div{flex:1;min-width:260px}
.route h3{font-size:1.3rem;margin-bottom:8px}
.route p{margin:0;color:var(--muted);font-size:15.5px}

/* ── footer ─────────────────────────────────────────────────────────────── */
footer{background:var(--band);color:#9aa7b4;padding:60px 0 40px;font-size:14.5px}
footer img{height:28px;margin-bottom:22px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;padding-bottom:34px;
        border-bottom:1px solid rgba(255,255,255,.12)}
footer h4{margin:0 0 12px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#fff;font-weight:800}
footer a{color:#c8d4e0;text-decoration:none;display:block;padding:4px 0}
footer a:hover{color:var(--accent)}
.creds{display:flex;gap:12px 30px;flex-wrap:wrap;padding-top:26px;font-size:12.5px;
       letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:#8593a1}
.creds b{color:var(--accent)}
.legal{margin-top:22px;font-size:13px;color:#7a8794}

@media (max-width:960px){
  .hero-grid,.split{grid-template-columns:1fr}
  .split.rev .col-art{order:0}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .iq{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr;gap:26px}
  .f-grid{grid-template-columns:1fr 1fr}
  .nav nav{display:none}
  .nav nav.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;
    background:var(--paper);border-bottom:1px solid var(--rule);padding:16px 28px;gap:4px}
  .menu{display:block}
  .nav .btn{display:none}
}
@media (max-width:560px){ .pillars{grid-template-columns:1fr} .f-grid{grid-template-columns:1fr} }

/* ── the range ──────────────────────────────────────────────────────────── */
.range{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:34px}
.rcat{background:var(--surface);border:1px solid var(--rule-soft);border-radius:14px;
      box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;
      text-decoration:none;color:inherit;cursor:pointer;
      transition:border-color .16s,box-shadow .16s,transform .16s}
.rcat:hover,.rcat:focus-visible{border-color:var(--accent);transform:translateY(-2px);
      box-shadow:0 6px 24px rgba(11,15,20,.13)}
.rcat:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rcat-img img{transition:transform .3s ease}
.rcat:hover .rcat-img img{transform:scale(1.045)}
.rcat-go{display:flex;align-items:center;gap:5px;margin-top:auto;padding-top:9px;
      font-size:12.5px;font-weight:800;letter-spacing:.04em;color:var(--accent-ink)}
.rcat:hover .rcat-go{gap:9px}
.rcat-go span{transition:transform .16s}
.rcat:hover .rcat-go span{transform:translateX(3px)}
/* fixed-height media box: the source art is a mix of squares and 2:3 portraits,
   so let the box crop rather than let the row heights go ragged */
.rcat-img{aspect-ratio:4/3;background:var(--paper-2);position:relative;flex:0 0 auto}
.rcat-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rcat-txt{padding:15px 18px 17px;display:flex;flex-direction:column;gap:3px;flex:1}
.rcat b{font-size:15.5px}
.rcat span{font-size:13px;color:var(--soft)}
.rcat i{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--soft);
        margin-top:6px;font-variant-numeric:tabular-nums}
.methods{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.method{background:var(--paper-2);border:1px solid var(--rule);border-radius:99px;
        padding:8px 16px;font-size:13.5px;font-weight:700;color:var(--ink-soft)}
.method em{font-style:normal;color:var(--soft);font-weight:500}

/* ── white-label catalog dialog ─────────────────────────────────────────── */
.wl-back{position:fixed;inset:0;background:rgba(11,15,20,.55);z-index:200;display:flex;
         align-items:center;justify-content:center;padding:22px}
.wl-box{background:var(--surface);border-radius:var(--radius);max-width:610px;width:100%;
        padding:clamp(26px,3.6vw,38px);box-shadow:0 24px 60px rgba(11,15,20,.35);
        max-height:90vh;overflow:auto}
.wl-box .eyebrow{margin-bottom:10px}
.wl-box h3{font-size:clamp(1.4rem,2.4vw,1.85rem);font-weight:800;letter-spacing:-.02em;margin:0 0 12px}
.wl-box p{font-size:15.5px;color:var(--muted)}
.wl-point{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--rule-soft)}
.wl-point b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:2px}
.wl-point span{font-size:14px;color:var(--muted)}
.wl-point .tick{flex:0 0 20px;height:20px;margin-top:2px;border-radius:50%;background:var(--accent);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.4 11.6 3 8.2l1.1-1.1 2.3 2.3 5.5-5.5L13 5z' fill='black'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.4 11.6 3 8.2l1.1-1.1 2.3 2.3 5.5-5.5L13 5z' fill='black'/></svg>") center/contain no-repeat}
.wl-link{display:flex;gap:8px;align-items:center;margin:20px 0 6px;background:var(--paper-2);
         border:1px solid var(--rule);border-radius:10px;padding:9px 9px 9px 14px;flex-wrap:wrap}
.wl-link code{flex:1;min-width:180px;font-size:13px;color:var(--ink-soft);word-break:break-all;
              font-family:ui-monospace,Menlo,monospace}
.wl-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;padding-top:20px;border-top:1px solid var(--rule-soft)}