/* ============================================================
   S&B TOOLS — BRAND LANDING PAGE (reusable template)
   Loads AFTER styles.css. Reuses the shared design tokens.
   Only NEW components live here; everything else (header, footer,
   buttons, .benefits, .cat-card, .prod-card, .testi-card,
   .final-cta) is reused from styles.css.
   ============================================================ */

.sb-brand-page{background:var(--color-off-white)}

/* ---------- BRAND HERO ---------- */
.sb-brand-hero{position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(90deg,rgba(8,8,8,.96) 0%,rgba(8,8,8,.82) 38%,rgba(10,10,10,.55) 62%,rgba(10,10,10,.25) 100%),
  url('/sb-assets/hero-banner.png');background-size:cover;background-position:center right}
.sb-brand-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--gradient-orange-performance)}
.sb-brand-hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center;
  min-height:clamp(430px,52vh,520px);padding-top:clamp(40px,5vw,68px);padding-bottom:clamp(40px,5vw,68px)}
.sb-brand-hero__content{max-width:600px}
.sb-brand-badge{display:inline-flex;align-items:center;gap:.7rem;background:rgba(0,0,0,.45);border:1px solid var(--color-line);border-radius:var(--radius-card);padding:.5rem .9rem;margin-bottom:1.1rem}
.sb-brand-badge .bb-mark{width:30px;height:30px;border-radius:5px;background:var(--gradient-orange-diagonal);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-style:italic;font-weight:700;color:#1a0d00;font-size:.95rem}
.sb-brand-badge b{font-family:var(--font-display);font-style:italic;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:.95rem;color:#fff}
.sb-brand-hero__headline{font-family:var(--font-display);font-weight:700;font-style:italic;text-transform:uppercase;
  font-size:clamp(2.4rem,5.4vw,4rem);line-height:.96;margin:.3rem 0 1rem}
.sb-brand-hero p.lead{max-width:42ch;color:#cfcfcf;margin-bottom:1.6rem}
.sb-brand-hero__visual{position:relative;display:flex;align-items:center;justify-content:center}
.sb-brand-hero__plate{width:100%;max-width:430px;aspect-ratio:4/3;border:1px solid var(--color-line);border-radius:var(--radius-card);
  background:linear-gradient(135deg,#1d1d1d,#0c0c0c);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;position:relative;overflow:hidden}
.sb-brand-hero__plate::after{content:"";position:absolute;right:-40px;bottom:-40px;width:220px;height:220px;background:var(--gradient-orange-diagonal);opacity:.16;border-radius:50%}
.sb-brand-hero__plate .pl-mark{position:relative;font-family:var(--font-display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:clamp(1.6rem,3vw,2.2rem);color:#fff;letter-spacing:.02em;text-align:center;padding:0 1rem;line-height:1}
.sb-brand-hero__plate small{position:relative;color:var(--color-golden-orange);font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;font-weight:700}

/* ---------- ABOUT BRAND (dark statement card + value bullets) ---------- */
.sb-about-card{background:linear-gradient(135deg,#1d1d1d,#0c0c0c);border:1px solid var(--color-line);border-radius:var(--radius-card);
  padding:2.5rem;min-height:320px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.sb-about-card::after{content:"";position:absolute;right:-40px;top:-40px;width:200px;height:200px;background:var(--gradient-orange-diagonal);opacity:.16;border-radius:50%}
.sb-about-card .ac-tag{position:relative;font-family:var(--font-display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:1rem;color:var(--color-golden-orange);letter-spacing:.04em;margin-bottom:.6rem}
.sb-about-card .ac-mark{position:relative;font-family:var(--font-display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:clamp(1.7rem,3.2vw,2.4rem);color:#fff;line-height:1;margin-bottom:1rem}
.sb-about-card p{position:relative;color:#cfcfcf;font-size:1.05rem;line-height:1.5}
.sb-brand-values{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 1.6rem;margin-top:1.6rem}
.sb-brand-value{display:flex;gap:.85rem;align-items:flex-start}
.sb-brand-value .ic{flex:none;width:40px;height:40px;border-radius:var(--radius-btn);background:rgba(249,115,22,.12);color:var(--color-tool-orange);display:flex;align-items:center;justify-content:center}
.sb-brand-value .ic svg{width:21px;height:21px}
.sb-brand-value b{display:block;font-family:var(--font-display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:1rem;color:var(--color-charcoal);line-height:1.1;margin-bottom:.15rem}
.sb-brand-value small{font-size:.82rem;color:#666;line-height:1.4}

/* ---------- WHY BUY FROM S&B (5-up outline-icon strip) ---------- */
.sb-brand-why{display:grid;grid-template-columns:repeat(5,1fr);border:var(--border-light);border-radius:var(--radius-card);overflow:hidden;background:#fff}
.sb-brand-why .bw-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem;padding:1.7rem 1rem}
.sb-brand-why .bw-item+.bw-item{border-left:var(--border-light)}
.sb-brand-why .ic{width:40px;height:40px;color:var(--color-charcoal)}
.sb-brand-why .ic svg{width:100%;height:100%}
.sb-brand-why b{font-family:var(--font-display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:.95rem;color:var(--color-charcoal);line-height:1.1}
.sb-brand-why small{font-size:.74rem;color:var(--color-muted)}

/* ---------- BUILT FOR EVERY INDUSTRY (reuses .cat-card, 5-up) ---------- */
.sb-industry-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
/* 6-up category grid override for the brand page */
.cat-grid.cols-6{grid-template-columns:repeat(6,1fr)}

/* ---------- REBATE / DEALS BANNER ---------- */
.sb-promo-banner{position:relative;background:linear-gradient(120deg,#0d0d0d 0%,#1c1c1c 60%,#0d0d0d 100%);border-radius:var(--radius-card);overflow:hidden;color:#fff}
.sb-promo-banner::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--gradient-orange-performance)}
.sb-promo-banner .pb-inner{display:flex;align-items:center;gap:1.6rem;padding:2rem 2.4rem;flex-wrap:wrap}
.sb-promo-banner .pb-tag{flex:none;width:54px;height:54px;border-radius:var(--radius-card);background:rgba(249,115,22,.14);color:var(--color-golden-orange);display:flex;align-items:center;justify-content:center}
.sb-promo-banner .pb-tag svg{width:28px;height:28px}
.sb-promo-banner .pb-text{flex:1;min-width:240px}
.sb-promo-banner h2{font-family:var(--font-display);font-style:italic;font-weight:700;text-transform:uppercase;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.05;color:#fff}
.sb-promo-banner p{color:#c2c2c2;font-size:.95rem;margin-top:.3rem}
.sb-promo-banner .btn{flex:none}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .sb-brand-hero .wrap{grid-template-columns:1fr}
  .sb-brand-hero__visual{order:-1;max-width:380px;margin:0 auto}
  .cat-grid.cols-6{grid-template-columns:repeat(3,1fr)}
  .sb-industry-grid{grid-template-columns:repeat(3,1fr)}
  .sb-brand-why{grid-template-columns:repeat(3,1fr)}
  .sb-brand-why .bw-item:nth-child(3n+1){border-left:none}
  .sb-brand-why .bw-item:nth-child(n+4){border-top:var(--border-light)}
}
@media (max-width:768px){
  .sb-brand-values{grid-template-columns:1fr}
}
@media (max-width:560px){
  .cat-grid.cols-6,.sb-industry-grid{grid-template-columns:repeat(2,1fr)}
  .sb-brand-why{grid-template-columns:repeat(2,1fr)}
  .sb-brand-why .bw-item{border-left:none!important}
  .sb-brand-why .bw-item:nth-child(n+3){border-top:var(--border-light)}
  .sb-promo-banner .pb-inner{padding:1.6rem}
  .sb-promo-banner .btn{width:100%}
}
@media (max-width:400px){
  .cat-grid.cols-6,.sb-industry-grid,.sb-brand-why{grid-template-columns:1fr}
}