/* ═══════════════════════════════════════════════════════════════════
   GLAMMBOX 2026 — ABOUT (Builder 2)
   The opening film chapter (built like welcome.html's v2-hero, minus
   the pin/liquid — that signature stays home-page only) and the
   "Four ideas" essay, moved here from welcome.html so the home page
   can stay a pure showcase.
   ─────────────────────────────────────────────────────────────────── */

/* ══ THE OPENING FILM ═══════════════════════════════════════════════ */
.ab-hero{
  position:relative;
  min-height:calc(100svh - var(--top-h));
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:1fr auto;
  align-items:end;
  padding:var(--s-6) var(--gutter) var(--s-6);
  isolation:isolate;
  overflow:clip;
}
.ab-hero-film{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;display:block;object-fit:cover;
  filter:saturate(.78) contrast(1.06);
}
.ab-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,8,10,.74) 0%,rgba(7,8,10,.2) 30%,rgba(7,8,10,.08) 54%,rgba(7,8,10,.88) 100%),
    linear-gradient(90deg,rgba(7,8,10,.62) 0%,rgba(7,8,10,.12) 56%,transparent 84%);
}
.ab-hero-copy{max-width:min(56rem,100%);align-self:end;min-width:0}
.ab-hero h1{
  font-size:clamp(2.6rem,7.6vw,6rem);
  font-weight:600;line-height:.96;
  letter-spacing:var(--tr-mega);
  margin:0 0 var(--s-5);
  text-wrap:balance;
}
.ab-hero .gb-lede{max-width:52ch;margin:0}
@media (min-width:900px){
  .ab-hero{padding-bottom:var(--s-7)}
  .ab-hero-copy{max-width:min(62rem,86%)}
}
@media (max-width:768px){
  .ab-hero h1{font-size:clamp(2.2rem,10vw,3.4rem)}
}

/* ══ THE FOUR IDEAS ═══════════════════════════════════════════════ */
.ab-beats{display:grid;gap:0}
.ab-beat{
  padding-block:var(--s-8);
  border-top:1px solid var(--gb-line-soft);
}
.ab-beat:first-child{border-top:0;padding-top:0}
.ab-beat-num{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.24em;color:var(--gb-ember);
  display:block;margin-bottom:var(--s-3);
}
.ab-beat h3{
  font-size:var(--t-xl);letter-spacing:var(--tr-head);max-width:20ch;margin:0 0 var(--s-4);
}
.ab-keep{
  font-family:var(--f-serif);font-style:italic;font-size:clamp(1.15rem,1.8vw,1.5rem);
  color:var(--gb-bone);letter-spacing:-.01em;line-height:1.4;
  margin:0 0 var(--s-5);padding-left:var(--s-4);border-left:2px solid var(--gb-ember);
}
.ab-beat-copy{max-width:var(--measure);display:grid;gap:var(--s-4)}
@media (min-width:1100px){
  .ab-beat{display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:var(--s-8)}
  .ab-beat-lead{position:sticky;top:calc(var(--top-h) + 2rem);align-self:start}
  .ab-beat-lead h3{max-width:none;text-wrap:balance}
}

/* chat vs agent — a split, not two boxes */
.ab-compare{
  display:grid;gap:var(--s-6);
  margin-top:var(--s-7);
}
@media (min-width:820px){.ab-compare{grid-template-columns:1fr 1fr;gap:var(--s-8)}}
.ab-compare > div{border-top:1px solid var(--gb-line-strong);padding-top:var(--s-5)}
.ab-compare > div:last-child{border-top-color:var(--gb-ember)}
.ab-compare h4{
  font-family:var(--f-display);font-size:var(--t-lg);font-weight:580;letter-spacing:var(--tr-head);
  margin:0 0 var(--s-2);
}
.ab-compare > div:last-child h4{color:var(--gb-ember-lift)}
.ab-tagline{
  display:inline-block;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gb-mute);margin:0 0 var(--s-5);
}
.ab-compare dl{margin:0;display:grid;gap:var(--s-4)}
.ab-compare dl > div{display:grid;gap:.25rem;padding-top:var(--s-3);border-top:1px solid var(--gb-line-soft)}
.ab-compare dt{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gb-mute)}
.ab-compare dd{margin:0;font-size:.98rem;line-height:1.5;color:var(--gb-bone-soft)}

/* the jobs beat */
.ab-walk{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-5)}
.ab-walk li{display:grid;grid-template-columns:2rem 1fr;gap:var(--s-4);align-items:start}
.ab-walk i{
  font-style:normal;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;
  color:var(--gb-ember);padding-top:.28rem;
}
.ab-walk b{display:block;font-weight:600;color:var(--gb-bone);margin-bottom:.3rem;font-size:1.02rem;letter-spacing:-.015em}
.ab-walk p{margin:0;font-size:.96rem}

.ab-source{
  margin:var(--s-8) 0 0;padding-top:var(--s-5);
  border-top:1px solid var(--gb-line);
}
.ab-source p{font-size:.92rem;color:var(--gb-dim);max-width:70ch}
.ab-source .ab-src{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gb-mute);margin-top:var(--s-3)}
.ab-source a{color:var(--gb-bone-soft);text-decoration:underline;text-underline-offset:.22em}
.ab-source a:hover{color:var(--gb-ember)}