/* ============================================================
   BWAG SYSTEMS - About page (page-specific)
   Zone 1 hero band, Zone 2 who we are, Zone 3 divider strip,
   the person behind BWAG, and the final invitation.
   ============================================================ */
/* overflow-x:clip contains stray overflow without creating a
   scroll container, so in-page anchors still land correctly. */
.about-page{ overflow-x:clip; }
/* ---------- Shared primitives ---------- */
.ab-sec{ position:relative; padding:clamp(56px,6vw,88px) 0; }
.ab-sec--tint{ background:var(--bwag-tint); }
.ab-label{
  display:block; margin-bottom:20px;
  font-size:0.74rem; font-weight:800; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--bwag-blue);
}
.ab-h3{ font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.14; letter-spacing:-0.03em; font-weight:800; color:var(--bwag-navy); }
.ab-h3--sub{ margin-top:clamp(30px,3.6vw,44px); font-size:clamp(1.28rem,2.1vw,1.7rem); }
/* ============================================================
   ZONE 1 - Hero: compact centred band
   ============================================================ */
.ab-hero{ padding:0; }
.ab-hero__band{
  position:relative; overflow:hidden; isolation:isolate;
  padding:calc(var(--nav-h) + clamp(18px,2.4vw,32px)) 0 clamp(22px,2.8vw,38px);
  background:var(--bwag-navy);
}
/* Brand-blue geometry over the navy field. Alpha is raised well above the
   old 5-7% so the shapes read as colour, not as a faded tint. */
.ab-hero__band::before,
.ab-hero__band::after{ content:""; position:absolute; z-index:-1; pointer-events:none; }
.ab-hero__band::before{
  top:0; bottom:0; left:0; width:clamp(220px,30vw,400px);
  background:linear-gradient(160deg,var(--bwag-blue) 0%,var(--bwag-blue-dark) 100%);
  opacity:.55;
  clip-path:polygon(0 0,100% 0,58% 44%,88% 100%,0 100%);
}
.ab-hero__band::after{
  top:0; bottom:0; right:0; width:clamp(220px,30vw,400px);
  background:linear-gradient(200deg,var(--bwag-blue) 0%,var(--bwag-blue-dark) 100%);
  opacity:.42;
  clip-path:polygon(42% 0,100% 0,100% 100%,14% 100%,0 52%);
}
.ab-hero__inner{ position:relative; text-align:center; display:grid; justify-items:center; }
.ab-hero h1{
  margin-bottom:12px;
  font-size:clamp(1.6rem,3.4vw,2.5rem); line-height:1.1; letter-spacing:-0.035em; font-weight:800;
  color:var(--bwag-white); max-width:20ch; text-wrap:balance;
}
.ab-hero__sub{
  max-width:52ch; color:#C3CDE0;
  font-size:clamp(0.94rem,1.2vw,1.05rem); line-height:1.58; text-wrap:pretty;
}
/* ============================================================
   ZONE 2 - Who we are: two-column block
   ============================================================ */
/* align-items:start keeps the image at the top of the row instead of
   floating mid-height beside a long text column. */
.ab-who{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:start; }
/* The image carries its own white background and shadow, so the card
   supplies padding only. Width/height attrs hold the 1.84:1 ratio and
   prevent layout shift while the file loads. */
.ab-who__media{
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,2.4vw,32px);
  background:var(--bwag-surface); border-radius:var(--radius); box-shadow:var(--shadow);
}
.ab-who__media img{ width:100%; max-width:460px; height:auto; border-radius:4px; }
/* The stated belief, set apart in brand blue and bold */
.ab-belief{ color:var(--bwag-blue); font-weight:700; }
.ab-who__body{ text-align:center; }
.ab-who__body p{ margin-top:1em; color:var(--bwag-muted); font-size:1.03rem; line-height:1.72; }
.ab-who__body > p:first-of-type{ margin-top:clamp(18px,2.2vw,24px); }
.ab-who__close{ color:var(--bwag-blue) !important; font-weight:700 !important; }
/* ============================================================
   THE PERSON BEHIND BWAG
   ============================================================ */
.ab-founder{ display:grid; grid-template-columns:auto 1fr; gap:clamp(32px,5vw,84px); align-items:start; }
.ab-founder__mark{ display:flex; flex-direction:column; gap:20px; width:clamp(112px,14vw,164px); }
.ab-founder__mono{ font-size:clamp(2.1rem,4.6vw,3rem); font-weight:800; letter-spacing:-0.055em; line-height:1; color:var(--bwag-navy); }
.ab-founder__rule{ display:block; width:100%; height:2px; background:var(--bwag-blue); }
.ab-founder__h1{ max-width:20ch; }
.ab-founder__name{ margin-top:clamp(24px,3vw,34px); font-size:clamp(1.2rem,2vw,1.5rem); font-weight:700; letter-spacing:-0.02em; color:var(--bwag-navy); }
.ab-founder__role{ margin-top:6px; font-size:0.78rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:var(--bwag-blue); }
.ab-founder__more{ margin-top:clamp(24px,3vw,34px); max-width:62ch; }
/* Collapsed: a short, quiet excerpt that invites the click */
.ab-founder__teaser{
  cursor:pointer; list-style:none;
  color:var(--bwag-muted); font-size:0.94rem; line-height:1.72;
  padding-bottom:14px; border-bottom:1px solid var(--bwag-border-s);
  transition:color .35s var(--ease-out);
}
.ab-founder__teaser::-webkit-details-marker{ display:none; }
.ab-founder__teaser:hover{ color:var(--bwag-navy); }
.ab-founder__teaser:focus-visible{ outline:2px solid var(--bwag-blue); outline-offset:4px; border-radius:3px; }
.ab-founder__teaser-text{ display:block; }
/* The click cue sits under the excerpt, not inside the prose */
.ab-founder__cue{
  display:inline-flex; align-items:center; gap:8px; margin-top:12px;
  font-size:0.72rem; font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--bwag-blue);
}
.ab-founder__cue::after{
  content:"\2193"; font-size:0.9rem; letter-spacing:0; transition:transform .35s var(--ease-out);
}
.ab-founder__more[open] .ab-founder__cue::after{ transform:rotate(180deg); }
/* Expanded: the full story. The excerpt is dropped so it is not read twice. */
.ab-founder__more[open] .ab-founder__teaser-text{ display:none; }
.ab-founder__more[open] .ab-founder__teaser{ padding-bottom:0; border-bottom:0; }
.ab-founder__prose{ margin-top:clamp(24px,3vw,32px); display:grid; gap:1.05em; }
.ab-founder__prose p{ color:var(--bwag-muted); font-size:0.94rem; line-height:1.72; }
.ab-founder__more{ margin-inline:0; }
.ab-founder__cue{ display:inline-flex; align-items:center; justify-content:flex-start; gap:8px; }
.ab-founder__mark{ align-self:start; }
/* The closing four lines carry the argument, so they read heavier */
.ab-founder__prose p:nth-last-child(-n+4){ color:var(--bwag-navy); font-weight:600; font-size:0.99rem; }
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1020px){
  .ab-hero h1{ max-width:24ch; }
  .ab-who{ grid-template-columns:1fr; }
  .ab-who__media{ max-width:460px; margin-inline:auto; }
  .ab-founder__mark{ width:126px; }
}
@media (max-width:680px){
  .ab-founder{ grid-template-columns:1fr; gap:26px; }
  .ab-founder__mark{ flex-direction:row; align-items:center; width:100%; gap:16px; }
  .ab-founder__rule{ width:auto; flex:1; }
}
/* Grid child: allow long words to shrink instead of forcing overflow */
.ab-founder__body{ min-width:0; text-align:left; }