/* ============ Shared Brand Case-Study Template ============ */
/* Used by every licensed-program page (brands/*.html). Each brand's
   own stylesheet (assets/brands/<brand>.css) supplies palette tokens
   and a texture variant; this file provides the shared structure so
   we aren't rebuilding hero/story/style-grid/CTA markup from scratch
   for every brand. Framed intentionally as a portfolio / case-study
   (past-tense, capability-led copy) rather than a live storefront —
   safe to publish regardless of whether a program is still active. */

body.bp-page{ background:var(--bg); }

/* ============ Texture utilities ============ */
/* Each brand css defines --tex-base/--tex-1/--tex-2/--tex-3; the HTML
   picks which motif fits the brand (camo / waves / dots / stripes). */
.bp-texture{ background-color:var(--tex-base); }

.bp-texture-camo{
  background-image:
    radial-gradient(ellipse 55% 30% at 10% 15%, var(--tex-1) 45%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 80% 8%, var(--tex-2) 45%, transparent 62%),
    radial-gradient(ellipse 50% 45% at 45% 55%, var(--tex-3) 45%, transparent 62%),
    radial-gradient(ellipse 60% 35% at 95% 68%, var(--tex-1) 45%, transparent 60%),
    radial-gradient(ellipse 40% 38% at 15% 82%, var(--tex-2) 45%, transparent 62%),
    radial-gradient(ellipse 48% 42% at 60% 32%, var(--tex-3) 45%, transparent 62%),
    radial-gradient(ellipse 35% 30% at 30% 5%, var(--tex-2) 45%, transparent 60%);
  background-size: 620px 560px;
  background-repeat: repeat;
  filter: blur(14px) saturate(1.05) contrast(1.08);
}

.bp-texture-waves{
  background-image: repeating-linear-gradient(115deg,
    var(--tex-1) 0px, var(--tex-1) 60px,
    var(--tex-2) 60px, var(--tex-2) 120px,
    var(--tex-3) 120px, var(--tex-3) 180px);
  filter: blur(22px) saturate(1.1);
}

.bp-texture-dots{
  background-image:
    radial-gradient(circle at 15% 25%, var(--tex-1) 0 70px, transparent 71px),
    radial-gradient(circle at 75% 15%, var(--tex-2) 0 55px, transparent 56px),
    radial-gradient(circle at 40% 70%, var(--tex-3) 0 90px, transparent 91px),
    radial-gradient(circle at 90% 65%, var(--tex-1) 0 60px, transparent 61px),
    radial-gradient(circle at 10% 85%, var(--tex-2) 0 50px, transparent 51px);
  background-size: 460px 460px;
  filter: blur(6px);
}

.bp-texture-stripes{
  background-image: repeating-linear-gradient(45deg,
    var(--tex-1) 0px, var(--tex-1) 26px,
    var(--tex-2) 26px, var(--tex-2) 52px);
  filter: blur(1px);
}

/* ============ Hero ============ */
.bp-hero{
  position:relative;
  min-height:92vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  overflow:hidden;
}
.bp-hero-texture{ position:absolute; inset:0; z-index:0; opacity:.9; }
.bp-hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(6,6,6,.55), rgba(6,6,6,.88) 70%, rgba(6,6,6,1));
}
.bp-hero-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }

.bp-breadcrumb{
  font-size:13px; color:var(--text-faint); margin-bottom:34px;
  display:flex; gap:8px; align-items:center;
}
.bp-breadcrumb a{ color:var(--text-faint); transition:color .2s ease; }
.bp-breadcrumb a:hover{ color:var(--lime); }
.bp-breadcrumb strong{ color:var(--text-muted); font-weight:600; }

.bp-eyebrow-tag{
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--lime); margin-bottom:16px;
}

.bp-lockup{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center;
  font-weight:800; letter-spacing:.02em;
  font-size:clamp(15px,2vw,20px);
  color:var(--text-faint);
  margin-bottom:18px;
}
.bp-lockup-visione{ color:var(--text-muted); }
.bp-lockup-x{ color:var(--lime); font-weight:400; }
.bp-lockup-brand{ color:var(--text); }

.bp-tagline{
  font-family:var(--ff);
  font-size:clamp(38px,7vw,76px);
  font-weight:900;
  color:var(--text);
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:1.08;
  max-width:920px;
}
.bp-sub{
  margin-top:22px;
  max-width:620px;
  color:var(--text-muted);
  font-size:17px;
}
.bp-hero .hero-actions{ margin-top:38px; }

/* ============ Media split (photo + copy) ============ */
.bp-media{ background:var(--bg); }
.bp-media-inner{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.bp-media--reverse .bp-media-image{ order:2; }
.bp-media-image{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
  background:var(--panel);
}
.bp-media-image img{ width:100%; height:100%; object-fit:contain; display:block; }
.bp-media-copy p{ color:var(--text-muted); font-size:16px; margin-bottom:16px; }
.bp-media .slider{ margin-top:40px; }

/* ============ Story / Heritage ============ */
.bp-story{ background:var(--bg-soft); }
.bp-story-inner{
  display:grid; grid-template-columns:1fr 1fr; gap:60px;
}
.bp-timeline-list{ margin-top:36px; display:flex; flex-direction:column; gap:22px; }
.bp-timeline-item{
  border-left:2px solid var(--lime);
  padding-left:20px;
}
.bp-timeline-year{
  display:block; font-weight:800; color:var(--lime);
  font-size:14px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px;
}
.bp-timeline-item p{ color:var(--text-muted); font-size:15px; }

.bp-story-copy{ display:flex; flex-direction:column; justify-content:center; gap:20px; }
.bp-story-copy p{ color:var(--text-muted); font-size:16px; }
.bp-pullquote{
  margin:10px 0 0;
  padding:26px 28px;
  border-left:3px solid var(--lime);
  background:color-mix(in srgb, var(--lime) 8%, transparent);
  border-radius:0 var(--radius) var(--radius) 0;
  color:var(--text);
  font-size:17px;
  font-style:italic;
  font-weight:500;
}

/* ============ Style / collection grid ============ */
.bp-styles{ background:var(--bg); }
.bp-style-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  margin-top:44px;
}
.bp-style-card{
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--panel);
  transition:transform .2s ease, border-color .2s ease;
}
.bp-style-card:hover{ transform:translateY(-4px); border-color:var(--lime); }
.bp-swatch{ aspect-ratio:4/3; }
.bp-style-card h3{ font-size:15px; padding:18px 16px; }
.bp-swatch--a{ background-position: 10% 20%; filter:brightness(1.15) saturate(.9) contrast(1.05); }
.bp-swatch--b{ background-position: 60% 70%; filter:brightness(.92) saturate(1.2) hue-rotate(-6deg); }
.bp-swatch--c{ background-position: 40% 0%; filter:brightness(.7) contrast(1.2) saturate(.9); }
.bp-swatch--d{ background-position: 85% 45%; filter:brightness(1.1) saturate(.85) hue-rotate(6deg); }

.bp-product-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:24px;
}

/* ============ Program highlights (reuses .why-grid/.why-card look) ============ */
.bp-highlights{ background:var(--bg-soft); }

/* ============ Retail footprint ============ */
.bp-footprint{ background:var(--bg); }

/* ============ CTA banner ============ */
.bp-cta{
  background:linear-gradient(120deg, var(--lime-dim), var(--lime));
  padding:80px 0;
  text-align:center;
}
.bp-cta-inner h2{ color:#141308; font-size:clamp(26px,4vw,38px); margin-bottom:14px; }
.bp-cta-inner p{ color:#2c2c14; font-size:16px; margin-bottom:30px; max-width:560px; margin-left:auto; margin-right:auto; }
.bp-cta .btn-lime{ background:#141308; color:var(--lime); }
.bp-cta .btn-lime:hover{ opacity:.85; }

/* ============ Responsive ============ */
@media (max-width: 980px){
  .bp-story-inner{ grid-template-columns:1fr; }
  .bp-media-inner{ grid-template-columns:1fr; }
  .bp-media--reverse .bp-media-image{ order:0; }
  .bp-style-grid{ grid-template-columns:repeat(2,1fr); }
  .bp-product-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 600px){
  .bp-style-grid, .bp-product-grid{ grid-template-columns:1fr; }
}