/* ============================================================
   Brand Story (page-brand-story.php)
   Design system: bg #0a0a0a / gold #F1B300 / white text / Roboto
   ============================================================ */

.bs-page { background:#0a0a0a; color:#fff; overflow:hidden; }
.bs-inner { width:min(1350px,100%); margin:0 auto; padding:0 32px; }

/* solid dark background for the content sections (hexagon texture removed) */
.bs-intro, .bs-hist, .bs-comm, .bs-ipsc {
    position:relative; background-color:#0a0a0a;
}

/* ---------- Hero ---------- */
.bs-hero {
    position:relative; display:flex; align-items:center; justify-content:center;
    min-height:560px; padding:150px 0 90px; overflow:hidden; background:#0d0d0d;
}
.bs-hero__bg {
    position:absolute; inset:0; background-size:cover; background-position:center;
    background-repeat:no-repeat; filter:grayscale(1);
}
.bs-hero::after {
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(6,6,6,.0) 0%, rgba(6,6,6,.0) 45%, rgba(10,10,10,.0) 100%);
}
.bs-hero__inner { position:relative; z-index:2; width:min(1100px,100%); padding:0 32px; text-align:center; }
.bs-hero__kicker {
    display:block; color:#F1B300; font-size:14px; font-weight:700;
    letter-spacing:2px; margin-bottom:18px;
}
.bs-hero__title {
    color:#fff; font-size:clamp(40px,7vw,86px); font-weight:900;
    line-height:1.02; letter-spacing:1px; text-transform:uppercase;
    margin:0; text-shadow:0 6px 30px rgba(0,0,0,.55);
}

/* ---------- Intro ---------- */
.bs-intro { padding:84px 0 40px; }
.bs-intro__inner {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:56px; align-items:start;
}
.bs-intro__title {
    color:#fff; font-size:clamp(28px,3.6vw,44px); font-weight:700;
    line-height:1.28; letter-spacing:.2px; margin:0;
}
.bs-intro__desc { color:#a9a9a9; font-size:15px; line-height:1.9; margin:6px 0 0; }

/* ---------- Pillars (three tall flat gold rectangles) ---------- */
.bs-pillars { padding:34px 0 96px; }
.bs-pillars__grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch;
}
.bs-pillar {
    position:relative;
    background:
        linear-gradient(115deg, #EFEC8F 0%, rgba(222,180,67,0) 12%),
        linear-gradient(295deg, #F0ED8C 0%, rgba(222,180,67,0) 15%),
        #DEB443;
    border-radius:6px;
    padding:42px 30px 46px;
    min-height:500px;
    display:flex; flex-direction:column;
    transition:transform .3s ease, box-shadow .3s ease;
}
.bs-pillar:hover { transform:translateY(-4px); box-shadow:0 16px 38px rgba(0,0,0,.5); }
.bs-pillar__icon { display:block; width:64px; height:64px; color:#fff; margin-bottom:30px; }
.bs-pillar__icon svg { width:100%; height:100%; display:block; }
.bs-pillar__title {
    color:#fff; font-size:25px; font-weight:800; letter-spacing:1px;
    text-transform:uppercase; margin:0 0 14px;
}
.bs-pillar__desc { color:rgba(255,255,255,.95); font-size:18px; line-height:1.62; margin:0; }

/* ---------- Product history ---------- */
.bs-hist { padding:64px 0 96px; }
.bs-hist__head {
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:40px; margin-bottom:52px;
}
.bs-hist__title {
    color:#F1B300; font-size:clamp(30px,4.4vw,54px); font-weight:900;
    line-height:1.02; letter-spacing:1px; text-transform:uppercase; margin:0 0 16px;
}
.bs-hist__desc { color:#8f8f8f; font-size:13px; line-height:1.7; margin:0; max-width:430px; }
.bs-hist__range {
    flex:0 0 auto; color:#F1B300; font-size:clamp(30px,4.4vw,54px);
    font-weight:900; letter-spacing:1px; line-height:1.02; white-space:nowrap;
}

.bs-hist__grid { display:flex; flex-direction:column; gap:36px; }
.bs-hist__row { display:grid; gap:26px; }
.bs-hist__row--2 { grid-template-columns:repeat(2,1fr); width:66%; margin:0 auto; }
.bs-hist__row--3 { grid-template-columns:repeat(3,1fr); }

.bs-hexcard { margin:0; }
.bs-hex {
    position:relative; display:block; width:100%; aspect-ratio:866 / 1000;
    clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    overflow:hidden; background:#c9c9c9;
}
.bs-hex img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .5s ease;
}
.bs-hexcard:hover .bs-hex img { transform:scale(1.06); }
.bs-hex__ph { position:absolute; inset:0; background:linear-gradient(150deg,#d2d2d2,#b8b8b8); }
.bs-hexcard__cap { display:flex; flex-direction:column; gap:2px; padding-top:12px; }
.bs-hexcard__year { color:#fff; font-size:17px; font-weight:800; letter-spacing:.6px; }
.bs-hexcard__model { color:#F1B300; font-size:11.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; }

/* ---------- Community ---------- */
.bs-comm { padding:80px 0 96px; }
.bs-comm__inner {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:48px; align-items:center;
}
/* community visual = two stacked background layers: avatars (front) + world map (back) */
.bs-comm__inner--bg {
    display:flex; align-items:flex-start; min-height:640px; padding-top:56px;
    background-image:var(--comm-av, none), var(--comm-map, none);
    background-repeat:no-repeat, no-repeat;
    background-position:right center, right top;
    background-size:contain, 68% auto;
}
/* text sits in the empty left area of the artwork, pulled towards the image */
.bs-comm__inner--bg .bs-comm__text { flex:0 0 auto; max-width:640px; padding-left:72px; }
.bs-comm__title {
    color:#fff; font-size:clamp(28px,3.6vw,46px); font-weight:700;
    line-height:1.22; letter-spacing:.2px; margin:0 0 20px;
}
.bs-comm__desc { color:#a2a2a2; font-size:14px; line-height:1.85; margin:0; max-width:430px; }

.bs-comm__visual { position:relative; width:100%; aspect-ratio:1 / 0.78; }
.bs-comm__map {
    position:absolute; inset:0; background-position:center; background-size:contain;
    background-repeat:no-repeat; opacity:.55;
}
.bs-comm__map--ph {
    opacity:1;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' viewBox='0 0 600 300'%3E%3Cg fill='%23F1B300' fill-opacity='0.16'%3E%3Ccircle cx='90' cy='110' r='3'/%3E%3Ccircle cx='150' cy='90' r='3'/%3E%3Ccircle cx='210' cy='130' r='3'/%3E%3Ccircle cx='270' cy='100' r='3'/%3E%3Ccircle cx='330' cy='140' r='3'/%3E%3Ccircle cx='390' cy='110' r='3'/%3E%3Ccircle cx='450' cy='150' r='3'/%3E%3Ccircle cx='510' cy='120' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
.bs-comm__avatars { position:absolute; inset:0; }
.bs-comm__av {
    position:absolute; display:block; overflow:hidden; background:#1a1a1a;
    clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    aspect-ratio:866 / 1000;
}
.bs-comm__av img { width:100%; height:100%; object-fit:cover; display:block; }
.bs-comm__avph { position:absolute; inset:0; background:linear-gradient(150deg,#2a2a2a,#3a3a3a); }
.bs-comm__av--1 { left:4%;  top:6%;  width:20%; }
.bs-comm__av--2 { left:26%; top:0;   width:23%; }
.bs-comm__av--3 { left:51%; top:5%;  width:22%; }
.bs-comm__av--4 { left:74%; top:14%; width:21%; }
.bs-comm__av--5 { left:14%; top:40%; width:24%; }
.bs-comm__av--6 { left:38%; top:46%; width:22%; }
.bs-comm__av--7 { left:60%; top:52%; width:23%; }
.bs-comm__av--8 { left:34%; top:76%; width:22%; }

/* ---------- IPSC ---------- */
.bs-ipsc { padding:88px 0 104px; text-align:center; }
.bs-ipsc__title {
    color:#F1B300; font-size:clamp(32px,5vw,62px); font-weight:900;
    letter-spacing:2px; text-transform:uppercase; margin:0 0 28px; line-height:1.08;
}
.bs-ipsc__desc { color:#cfcfcf; font-size:15px; line-height:1.85; max-width:940px; margin:0 auto; }

/* ---------- Responsive ---------- */
@media (max-width:1099px) {
    .bs-hero { min-height:440px; padding:120px 0 70px; }
    .bs-intro__inner { grid-template-columns:1fr; gap:24px; }
    .bs-pillars__grid { grid-template-columns:1fr; gap:20px; }
    .bs-pillar { min-height:340px; }
    .bs-hist__row--2 { width:100%; }
    .bs-comm__inner { grid-template-columns:1fr; gap:36px; }
    .bs-comm__visual { max-width:640px; }
    .bs-comm__inner--bg { min-height:520px; align-items:flex-start; background-position:center bottom; }
    .bs-comm__inner--bg .bs-comm__text { max-width:none; padding-left:0; }
}
@media (max-width:680px) {
    .bs-inner { padding-left:20px; padding-right:20px; }
    .bs-hero { padding:104px 0 60px; }
    .bs-hero__inner { padding:0 20px; }
    .bs-intro { padding:60px 0 24px; }
    .bs-pillars { padding:24px 0 60px; }
    .bs-hist { padding:48px 0 64px; }
    .bs-hist__head { flex-direction:column; gap:14px; margin-bottom:34px; }
    .bs-hist__row--2, .bs-hist__row--3 { grid-template-columns:repeat(2,1fr); width:100%; gap:16px; }
    .bs-hist__grid { gap:22px; }
    .bs-comm { padding:56px 0 64px; }
    .bs-ipsc { padding:56px 0 70px; }
    .bs-pillar { padding:30px 22px 34px; min-height:300px; }
}