/* ===== ABOUT — dark premium · statement hero, stats, timeline, values, team, locations ===== */
.ab-main{background:var(--black); color:var(--fg); overflow:hidden}

/* shared section rhythm */
.ab-sec{padding:clamp(3.4rem,7vw,6.4rem) 0; position:relative}
.ab-idx{font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-mute); display:flex; align-items:center; gap:.8em; margin-bottom:1.7rem}
.ab-idx b{color:var(--fg); font-weight:500}
.ab-idx .ln{flex:1; height:1px; background:var(--line); max-width:90px}

/* ---------- HERO ---------- */
.ab-hero{position:relative; padding:clamp(4.4rem,9vw,8rem) 0 clamp(3rem,5vw,4.6rem); border-bottom:1px solid var(--line-2)}
.ab-hero-bg{position:absolute; inset:0; z-index:0; overflow:hidden}
.ab-hero-bg img{width:100%; height:100%; object-fit:cover; object-position:center 35%; opacity:.34}
.ab-hero-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,11,11,.55) 0%,rgba(11,11,11,.78) 55%,var(--black) 100%)}
.ab-hero .container{position:relative; z-index:1}
.ab-eyebrow{font-family:var(--mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-dim); display:inline-flex; align-items:center; gap:.7em}
.ab-eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--brand)}
.ab-hero h1{font-size:clamp(2.6rem,6.4vw,5.4rem); letter-spacing:-.04em; line-height:1.0; font-weight:500; margin:1.3rem 0 0; max-width:17ch}
.ab-hero h1 em{font-style:normal; color:var(--brand)}
.ab-hero .lead{max-width:60ch; margin-top:1.5rem; color:var(--fg-dim); font-size:clamp(1.05rem,1.45vw,1.25rem); line-height:1.6}
.ab-hero-actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.1rem}
.ab-hero-chips{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2.4rem}

/* ---------- MISSION (oversized statement) ---------- */
.ab-mission{border-bottom:1px solid var(--line-2)}
.ab-mission .container{display:grid; grid-template-columns:.34fr 1fr; gap:clamp(1.4rem,4vw,4rem); align-items:start}
.ab-mission .label{font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-mute); padding-top:.7rem}
.ab-mission p{font-size:clamp(1.55rem,3.2vw,2.6rem); letter-spacing:-.025em; line-height:1.2; font-weight:400; color:var(--fg)}
.ab-mission p b{color:var(--fg); font-weight:500}
.ab-mission p .mute{color:var(--fg-mute)}
@media(max-width:760px){.ab-mission .container{grid-template-columns:1fr; gap:1.1rem}}

/* ---------- STATS BAND ---------- */
.ab-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden}
.ab-statc{background:var(--black); padding:clamp(1.6rem,3vw,2.4rem) 1.4rem}
.ab-statc .n{font-size:clamp(2.4rem,4.5vw,3.7rem); font-weight:400; letter-spacing:-.04em; line-height:1}
.ab-statc .n .u{color:var(--brand)}
.ab-statc .l{margin-top:.7rem; font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--fg-dim); line-height:1.4}
@media(max-width:760px){.ab-stats{grid-template-columns:1fr 1fr}}

/* ---------- TIMELINE ---------- */
.ab-tl-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; margin-bottom:2.4rem}
.ab-tl-head h2{font-size:clamp(1.9rem,4vw,3rem); letter-spacing:-.03em; font-weight:500; max-width:16ch}
.ab-tl-head p{color:var(--fg-dim); max-width:42ch; line-height:1.6; font-size:.96rem}
.ab-timeline{display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid var(--line)}
.ab-mile{position:relative; padding:1.7rem 1.4rem 0 0; border-right:1px solid var(--line-2)}
.ab-mile:last-child{border-right:0}
.ab-mile::before{content:""; position:absolute; top:-1px; left:0; width:9px; height:9px; border-radius:50%; background:var(--g700); transform:translateY(-50%)}
.ab-mile.is-now::before{background:var(--brand); box-shadow:0 0 0 4px rgba(255,86,10,.16)}
.ab-mile .yr{font-family:var(--mono); font-size:.86rem; font-weight:500; letter-spacing:.02em; color:var(--fg)}
.ab-mile.is-now .yr{color:var(--brand)}
.ab-mile h3{font-size:1.04rem; letter-spacing:-.015em; line-height:1.2; margin:.7rem 0 .4rem; font-weight:500}
.ab-mile p{font-family:var(--sans); font-size:.86rem; color:var(--fg-mute); line-height:1.5}
@media(max-width:920px){
  .ab-timeline{grid-template-columns:1fr; border-top:0}
  .ab-mile{border-right:0; border-left:1px solid var(--line-2); padding:0 0 1.8rem 1.5rem}
  .ab-mile::before{top:6px; left:-1px; transform:translateX(-50%)}
}

/* ---------- VALUES ---------- */
.ab-values{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-md)}
.ab-val{background:var(--g950); border:1px solid var(--line); border-radius:var(--r-marketing); padding:1.7rem 1.5rem; display:flex; flex-direction:column; gap:.55rem; transition:border-color .15s var(--ease)}
.ab-val:hover{border-color:var(--g700)}
.ab-val .ico{width:38px; height:38px; border:1px solid var(--line); border-radius:var(--r-lg); display:grid; place-items:center; color:var(--brand); margin-bottom:.6rem}
.ab-val .vn{font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--fg-mute)}
.ab-val h3{font-size:1.18rem; letter-spacing:-.02em; font-weight:500}
.ab-val p{font-size:.9rem; color:var(--fg-dim); line-height:1.55}
@media(max-width:980px){.ab-values{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ab-values{grid-template-columns:1fr}}

/* ---------- TEAM ---------- */
.ab-team{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden}
.ab-person{background:var(--black); padding:1.7rem 1.6rem; display:flex; flex-direction:column; gap:.2rem; transition:background .15s}
.ab-person:hover{background:var(--g950)}
.ab-person .av{width:52px; height:52px; border-radius:var(--r-md); display:grid; place-items:center; background:var(--g900); border:1px solid var(--line); font-family:var(--mono); font-size:1rem; font-weight:500; letter-spacing:.02em; color:var(--fg); margin-bottom:1rem}
.ab-person h3{font-size:1.1rem; letter-spacing:-.015em; font-weight:500}
.ab-person .role{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--brand); margin-top:.25rem}
.ab-person p{font-size:.86rem; color:var(--fg-mute); line-height:1.55; margin-top:.7rem}
@media(max-width:880px){.ab-team{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ab-team{grid-template-columns:1fr}}

/* ---------- LOCATIONS ---------- */
.ab-loc{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.6rem); border-top:1px solid var(--line); padding-top:2.4rem}
.ab-office .ot{font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--brand); display:flex; align-items:center; gap:.6em}
.ab-office .ot .dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.ab-office h3{font-size:1.3rem; letter-spacing:-.02em; font-weight:500; margin:.7rem 0 .5rem}
.ab-office address{font-style:normal; color:var(--fg-dim); font-size:.92rem; line-height:1.65}
.ab-office .ph{font-family:var(--mono); font-size:.8rem; color:var(--fg-mute); margin-top:.7rem}
.ab-office .ph a{color:var(--fg-dim)} .ab-office .ph a:hover{color:var(--fg)}
@media(max-width:760px){.ab-loc{grid-template-columns:1fr; gap:1.8rem}}

/* ---------- CERT / DISTRIBUTOR LOGO WALL ---------- */
.ab-cert{border-top:1px solid var(--line-2)}
.ab-cert-head{display:flex; align-items:baseline; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; margin-bottom:1.8rem}
.ab-cert-head .k{font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-mute)}
.ab-cert-head .k b{color:var(--fg); font-weight:500}
.ab-logos{display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line-2); border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden}
.ab-logo{background:#fff; aspect-ratio:16/9; display:grid; place-items:center; padding:1.3rem}
.ab-logo img{max-height:34px; max-width:78%; object-fit:contain}
.ab-logo.is-link{background:var(--black)}
.ab-logo .more{font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; color:var(--brand); display:inline-flex; align-items:center; gap:.5em}
@media(max-width:880px){.ab-logos{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.ab-logos{grid-template-columns:repeat(2,1fr)}}

/* ---------- CTA ---------- */
.ab-cta{padding:clamp(3rem,6vw,5.4rem) 0 clamp(3.4rem,7vw,6rem)}
.ab-cta-inner{border:1px solid var(--line); border-radius:var(--r-marketing); background:var(--g950); padding:clamp(2.2rem,4.5vw,3.8rem); display:flex; align-items:center; justify-content:space-between; gap:1.6rem; flex-wrap:wrap}
.ab-cta-inner h2{font-size:clamp(1.7rem,3.4vw,2.6rem); letter-spacing:-.03em; font-weight:500; max-width:18ch}
.ab-cta-inner p{color:var(--fg-dim); max-width:42ch; margin-top:.7rem; line-height:1.6}
.ab-cta-actions{display:flex; gap:.8rem; flex-wrap:wrap}

@media(max-width:760px){.ab-hero h1{max-width:none}}