/* ============================================================
   ABOUT — ART DIRECTION

   Shares the design system built for Contact (.cx-h1, .cx-say,
   .cx-kick, .cx-no, .cx-rows — all defined in contact.css, which is
   now the system's home file) so the two pages read as one website.
   What differs is the composition and the story.

   Contact assembles the mark out of its own pixels: an arrival.
   About starts with the mark already whole, the five capabilities
   turning around it, and loosens it as you scroll — identity opening
   out into the system. Same asset, same motion quality, opposite
   direction, and the composition is asymmetric rather than centred.

   Scoped under .ab-* so it cannot reach any other page.
   ============================================================ */

/* ---------- 1. THE OPENING: identity, whole ------------------- */
.ab-hero{
  position:relative;isolation:isolate;
  min-height:190svh;                 /* room for the mark to loosen */
  background:
    radial-gradient(110% 70% at 76% 22%, rgba(6,44,199,.22), transparent 62%),
    linear-gradient(180deg,#04060B,#05080F 55%,#04060B);
}
.ab-hero__pin{
  position:sticky;top:0;height:100svh;
  overflow:clip;display:grid;align-content:center;
  padding-block:clamp(96px,14vh,150px) clamp(50px,8vh,96px);
  padding-inline:var(--gut);
}
.ab-hero__fx{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block;
  pointer-events:none;
  opacity:0;animation:ab-fx 2.2s var(--ease-out) .3s forwards;
}
@keyframes ab-fx{to{opacity:1;}}

.ab-hero__in{
  position:relative;z-index:3;
  width:100%;max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:clamp(26px,3.4vw,52px);
  /* --p is published by the stage on scroll */
  transform:translateY(calc(var(--p,0) * -9vh));
  opacity:calc(1 - var(--p,0) * 1.05);
  will-change:transform,opacity;
}
@media (min-width:1000px){
  .ab-hero__in{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center;}
}
/* the type takes the left half; the mark lives in the right half */
.ab-hero__say{min-width:0;}   /* the measure belongs on the paragraph, not the column */
.ab-hero .cx-h1{margin:0;max-width:14ch;text-align:left;
  font-size:clamp(2.1rem,4.6vw,3.9rem);}
.ab-hero .cx-say{margin:clamp(18px,2.4vh,26px) 0 0;text-align:left;max-width:44ch;
  font-size:clamp(.96rem,1.2vw,1.08rem);}
.ab-hero .cx-kick{margin-bottom:clamp(18px,2.6vh,28px);}
.ab-hero .cx-kick::after{display:none;}
.ab-hero .acts{margin-top:clamp(20px,2.8vh,30px);}

/* the facts, as a technical read-out under the type */
.ab-spec{
  margin:clamp(22px,3vh,34px) 0 0;
  border-top:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  max-width:34ch;
}
.ab-spec > div{
  display:grid;gap:3px;padding:10px 0;
  border-bottom:1px solid rgba(168,210,236,.1);
}
@media (min-width:560px){
  .ab-spec > div{grid-template-columns:minmax(96px,.42fr) minmax(0,1fr);
    gap:0 18px;align-items:baseline;}
}
html.js .ab-spec > div{
  clip-path:inset(0 100% 0 0);
  transition:clip-path .9s var(--ease-out);
  transition-delay:calc(var(--si,0) * 120ms + 780ms);
}
html.js .is-in .ab-spec > div{clip-path:inset(0 0 0 0);}
.ab-spec dt{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 60%,#8494AE);
}
.ab-spec dd{margin:0;font-size:.9rem;line-height:1.5;color:rgba(208,220,240,.96);}

/* a folio down the right edge, as on a printed opening */
.ab-folio{
  position:absolute;z-index:4;right:calc(var(--gut) * .3);top:50%;
  transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;font-weight:700;letter-spacing:.38em;text-transform:uppercase;
  color:rgba(110,124,150,.75);
  display:flex;align-items:center;gap:14px;
  opacity:calc(1 - var(--p,0) * 2);
}
.ab-folio::before{content:"";width:1px;height:52px;
  background:linear-gradient(180deg,transparent,rgba(168,210,236,.5));}
@media (max-width:1180px){.ab-folio{display:none;}}

.ab-cue{
  position:absolute;left:50%;bottom:clamp(18px,3.6vh,38px);translate:-50% 0;z-index:4;
  display:grid;justify-items:center;gap:9px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(130,145,170,.85);
  opacity:calc(1 - var(--p,0) * 3);
}
.ab-cue i{
  display:block;width:1px;height:38px;
  background:linear-gradient(180deg,var(--accent),transparent);
  animation:cx-cue 2.8s var(--ease-io) infinite;
}

/* ---------- 1b. WHAT WE BELIEVE: a pinned heading -------------
   A third composition again: the heading holds while the beliefs
   pass it, so the section reads as one statement with four proofs
   rather than four equal boxes. */
.ab-bel{position:relative;padding-inline:var(--gut);
  padding-block:clamp(60px,9vh,120px);}
.ab-bel__in{max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:clamp(28px,4vw,70px);align-items:start;}
@media (min-width:1000px){
  .ab-bel__in{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);}
  .ab-bel__hd{position:sticky;top:clamp(110px,18vh,190px);}
}
.ab-bel__r{
  position:relative;padding:clamp(26px,4vh,44px) 0;
  border-top:1px solid rgba(168,210,236,.14);
}
.ab-bel__r:last-child{border-bottom:1px solid rgba(168,210,236,.14);}
html.js .ab-bel__r{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1s var(--ease-out);
  transition-delay:calc(var(--si,0) * 110ms);
}
html.js .ab-bel.is-in .ab-bel__r{clip-path:inset(0 0 0 0);}
.ab-bel__n{
  position:absolute;right:0;top:clamp(20px,3.4vh,36px);
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:.8;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1px rgba(168,210,236,.22);
  pointer-events:none;transition:color .6s var(--ease-out),
    -webkit-text-stroke-color .6s var(--ease-out);
}
.ab-bel__r:hover .ab-bel__n{color:var(--accent);-webkit-text-stroke-color:transparent;}
.ab-bel__h{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.16rem,2vw,1.6rem);line-height:1.15;letter-spacing:-.03em;
  color:#F1F6FF;margin:0 0 12px;max-width:20ch;
}
.ab-bel__p{margin:0;font-size:.95rem;line-height:1.76;color:rgba(168,182,205,.95);max-width:52ch;}

/* ---------- 1c. MILESTONES: a measured strip ------------------ */
.ab-num{
  display:grid;gap:1px;margin-top:clamp(30px,5vh,54px);
  background:rgba(168,210,236,.13);
  border:1px solid rgba(168,210,236,.13);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:880px){.ab-num{grid-template-columns:repeat(4,minmax(0,1fr));}}
.ab-num__c{
  position:relative;background:#05070C;padding:clamp(22px,3vw,34px);
  transition:background .6s var(--ease-out);
}
.ab-num__c::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s var(--ease-out);
  transition-delay:calc(var(--si,0) * 120ms);
}
html.js .ab-num.is-in .ab-num__c::after{transform:scaleX(1);}
.ab-num__c:hover{background:#080D17;}
.ab-num__n{
  display:block;font-family:var(--font-display);font-weight:800;line-height:.92;
  font-size:clamp(2rem,3.6vw,3rem);letter-spacing:-.05em;color:#F1F6FF;
  font-variant-numeric:tabular-nums;
  transition:color .5s var(--ease-out), text-shadow .6s var(--ease-out);
}
.ab-num__c:hover .ab-num__n{
  color:#fff;text-shadow:0 0 46px color-mix(in srgb,var(--accent) 76%,transparent);
}
.ab-num__l{display:block;margin-top:12px;font-size:.85rem;line-height:1.55;
  color:rgba(148,162,187,.95);}

/* ---------- 2. THE STORY: pinned canvas, scrolling argument ----
   The section is tall on purpose. The canvas sticks for its whole
   height while the chapters pass over it, so one transformation
   carries four beats instead of four sections each with an effect. */
.ab-story{
  position:relative;
  background:linear-gradient(180deg,#04060B,#060911 40%,#04060B);
  border-block:1px solid rgba(168,210,236,.14);
}
.ab-story__pin{
  position:sticky;top:0;height:100svh;
  overflow:clip;display:grid;place-items:center;
}
.ab-story__fx{position:absolute;inset:0;width:100%;height:100%;display:block;}
/* the chapters ride over it */
.ab-story__flow{
  position:relative;z-index:3;
  margin-top:-100svh;                 /* sit on top of the pinned canvas */
  padding-inline:var(--gut);
  display:grid;
}
.ab-ch{
  min-height:100svh;
  display:grid;align-content:center;
  max-width:var(--maxw);margin-inline:auto;width:100%;
}
.ab-ch__box{
  width:min(470px, 100%);
  background:linear-gradient(160deg, rgba(6,9,16,.9), rgba(4,6,11,.82));
  border:1px solid rgba(168,210,236,.16);
  border-left:2px solid var(--accent);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  padding:clamp(24px,3vw,38px);
}
.ab-ch:nth-child(even) .ab-ch__box{margin-left:auto;}
html.js .ab-ch__box{
  opacity:0;transform:translateY(38px);
  transition:opacity 1s var(--ease-out), transform 1.15s var(--ease-out);
}
html.js .ab-ch.is-in .ab-ch__box{opacity:1;transform:none;}
.ab-ch__k{
  display:flex;align-items:center;gap:11px;margin:0 0 16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 72%,#fff);
}
.ab-ch__k::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent),
             0 0 16px var(--accent);
}
.ab-ch__h{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.4rem,2.5vw,2.05rem);line-height:1.12;letter-spacing:-.032em;
  color:#F2F7FF;margin:0 0 14px;max-width:20ch;
}
.ab-ch__p{margin:0;font-size:.97rem;line-height:1.75;color:rgba(176,189,211,.95);}
.ab-ch__p + .ab-ch__p{margin-top:12px;}
.ab-ch__p strong{color:#EAF2FF;font-weight:600;}
.ab-ch__m{
  margin:18px 0 0;padding-top:13px;
  border-top:1px solid rgba(168,210,236,.16);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(124,139,164,.92);
}
@media (max-width:720px){
  .ab-story__pin{height:72svh;top:14svh;}
  .ab-story__flow{margin-top:-72svh;}
  .ab-ch{min-height:86svh;}
  .ab-ch__box{width:100%;}
  .ab-ch:nth-child(even) .ab-ch__box{margin-left:0;}
}

@media (prefers-reduced-motion:reduce){
  .ab-hero__fx{animation:none;opacity:.55;}
  html.js .ab-h1 .ln2 > i{transform:none;}
  html.js .ab-spec > div{opacity:1;transform:none;}
  html.js .ab-ch__box{opacity:1;transform:none;}
  .ab-story__pin{position:relative;height:70svh;}
  .ab-story__flow{margin-top:0;}
  .ab-ch{min-height:0;padding-block:clamp(40px,7vh,80px);}
}

/* ---------- 4. THE LEDGER: rows, not cards -------------------- */
.ab-led{border-top:1px solid rgba(168,210,236,.2);margin-top:clamp(34px,5vh,60px);}
.ab-led__r{
  position:relative;display:grid;gap:10px clamp(20px,3vw,54px);
  padding:clamp(26px,4.2vh,46px) 0;
  border-bottom:1px solid rgba(168,210,236,.11);
  transition:background .6s var(--ease-out);
}
@media (min-width:880px){
  .ab-led__r{
    /* the numeral column is gone; the row is heading and body now */
    grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);
    align-items:start;
  }
}
.ab-led__r::before{           /* the accent edge, drawn on approach */
  content:"";position:absolute;left:calc(var(--gut) * -.5);top:0;bottom:0;width:2px;
  background:var(--accent);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .7s var(--ease-out);
}
.ab-led__r:hover::before{transform:scaleY(1);}
.ab-led__r:hover{background:linear-gradient(90deg,
  color-mix(in srgb,var(--accent) 7%,transparent), transparent 62%);}
.ab-led__n{
  font-family:var(--font-display);font-weight:800;line-height:.82;
  font-size:clamp(2rem,4.2vw,3.4rem);letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1px rgba(168,210,236,.32);
  font-variant-numeric:tabular-nums;
  transition:color .55s var(--ease-out), -webkit-text-stroke-color .55s var(--ease-out),
             transform .7s var(--ease-out);
}
.ab-led__r:hover .ab-led__n{
  color:var(--accent);-webkit-text-stroke-color:transparent;transform:translateX(7px);
}
.ab-led__h{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.06rem,1.6vw,1.3rem);letter-spacing:-.02em;
  color:#EEF4FF;margin:0;max-width:22ch;
}
.ab-led__p{margin:0;font-size:.96rem;line-height:1.74;color:rgba(166,180,203,.95);max-width:58ch;}
html.js .ab-led__r{opacity:0;transform:translateY(20px);
  transition:opacity .85s var(--ease-out), transform .95s var(--ease-out), background .6s var(--ease-out);
  transition-delay:calc(var(--si,0) * 90ms);}
html.js .ab-led.is-in .ab-led__r{opacity:1;transform:none;}

/* ---------- 5. PRINCIPLES: plates on rules, offset ------------ */
.ab-prin{display:grid;gap:clamp(22px,3vw,46px);margin-top:clamp(36px,6vh,64px);}
@media (min-width:900px){
  .ab-prin{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ab-prin > *:nth-child(2){margin-top:clamp(40px,7vh,104px);}
  .ab-prin > *:nth-child(3){margin-top:calc(clamp(40px,7vh,104px) * -.5);}
  .ab-prin > *:nth-child(4){margin-top:clamp(16px,3vh,44px);}
}
.ab-pr{
  position:relative;padding-top:22px;
  border-top:1px solid rgba(168,210,236,.24);
}
.ab-pr::after{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:0;
  background:var(--accent);transition:width 1.1s var(--ease-out);
}
.ab-pr.is-in::after,.is-in .ab-pr::after{width:46%;}
.ab-pr__n{
  position:absolute;right:0;top:16px;
  font-family:var(--font-display);font-weight:800;font-size:clamp(2.6rem,5vw,4.4rem);
  line-height:.8;letter-spacing:-.06em;color:transparent;
  -webkit-text-stroke:1px rgba(168,210,236,.16);
  user-select:none;pointer-events:none;
}
.ab-pr__h{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.2rem,2.1vw,1.72rem);line-height:1.16;letter-spacing:-.03em;
  color:#F1F6FF;margin:0 0 14px;max-width:17ch;position:relative;
}
.ab-pr__p{margin:0;font-size:.96rem;line-height:1.74;color:rgba(164,178,202,.95);max-width:48ch;}

/* ---------- 6. FIGURES: a broken grid, not four equal cells --- */
.ab-fig{
  display:grid;gap:1px;margin-top:clamp(34px,5vh,58px);
  background:rgba(168,210,236,.13);border:1px solid rgba(168,210,236,.13);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:880px){
  .ab-fig{grid-template-columns:1.55fr 1fr 1fr;grid-template-rows:auto auto;}
  .ab-fig > *:nth-child(1){grid-row:1 / span 2;display:flex;flex-direction:column;justify-content:flex-end;}
  .ab-fig > *:nth-child(4){grid-column:2 / span 2;}
}
.ab-fig__c{background:#05070C;padding:clamp(22px,3vw,34px);transition:background .5s var(--ease-out);}
.ab-fig__c:hover{background:#080D17;}
.ab-fig__n{
  display:block;font-family:var(--font-display);font-weight:800;line-height:.92;
  font-size:clamp(1.9rem,3.2vw,2.7rem);letter-spacing:-.05em;color:#F1F6FF;
  font-variant-numeric:tabular-nums;
  transition:color .5s var(--ease-out), text-shadow .6s var(--ease-out);
}
.ab-fig > *:nth-child(1) .ab-fig__n{font-size:clamp(3rem,6.4vw,5.4rem);}
.ab-fig__c:hover .ab-fig__n{color:#fff;text-shadow:0 0 46px color-mix(in srgb,var(--accent) 74%,transparent);}
.ab-fig__l{display:block;margin-top:12px;font-size:.85rem;line-height:1.55;color:rgba(148,162,187,.95);}

/* ---------- 7. section heads set on a rule -------------------- */
.ab-head{
  display:grid;gap:clamp(16px,3vw,52px);
  padding-bottom:clamp(10px,2vh,20px);
}
@media (min-width:900px){
  .ab-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;}
}
.ab-head__no{
  font-family:var(--font-display);font-size:.72rem;font-weight:800;
  letter-spacing:.28em;text-transform:uppercase;color:rgba(120,135,161,.9);
  display:flex;align-items:center;gap:12px;margin:0 0 16px;
}
.ab-head__no::after{content:"";flex:1;height:1px;max-width:120px;
  background:linear-gradient(90deg,rgba(168,210,236,.4),transparent);}

@media (prefers-reduced-motion:reduce){
  html.js .ab-seam{transform:scaleY(1);}
  html.js .ab-h1 .ln2 > i{transform:none;}
  html.js .ab-spec > div{opacity:1;transform:none;}
  html.js .ab-led__r{opacity:1;transform:none;}
  .ab-plate__q u{background-size:100% 2px;}
}