/* =====================================================================
   CodeCraft — /about (the trust page). Loaded only on /about.
   Builds on services.css (.cc-svc tokens, [data-reveal-svc] clip wipes,
   .cc-rw per-word fills, .cc-count, .svc-cta). No 3D — motion + SVG only.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 · HERO — split: text left, self-drawing monogram right
   ------------------------------------------------------------------- */
.ab-hero{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(120px,16vh,180px) var(--pad) clamp(50px,8vh,80px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,72px);
  align-items:center;min-height:84vh;
}
.ab-hero__text{ max-width:46ch;min-width:0; }
.ab-hero__cta{ margin-top:32px;display:flex;gap:14px;flex-wrap:wrap; }
.ab-hero__cta .cc-btn{ padding:15px 26px;font-size:.98rem; }

/* Real-time model stage (about3d.js renders the canvas in here). */
.ab-stage{
  position:relative;width:100%;max-width:480px;aspect-ratio:1;margin-inline:auto;
  display:grid;place-items:center;border-radius:50%;
}
.ab-stage__canvas{
  position:relative;z-index:1;display:block;
  width:100% !important;height:100% !important;
  opacity:0;transition:opacity .9s var(--ease-expo);
}
.ab-stage.is-live .ab-stage__canvas{ opacity:1; }
.ab-stage__glow{
  position:absolute;inset:4%;z-index:0;border-radius:50%;
  background:radial-gradient(circle at 50% 46%, color-mix(in srgb,var(--peri) 50%,transparent), transparent 62%);
  filter:blur(34px);opacity:.7;pointer-events:none;
}
/* poster = instant fallback; also what stays if WebGL is unavailable */
.ab-stage__poster{
  position:absolute;inset:12%;z-index:0;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb,var(--peri-bright) 30%,transparent), transparent 60%),
    conic-gradient(from 200deg, transparent, color-mix(in srgb,var(--peri) 40%,transparent), transparent 62%);
  border:1px solid color-mix(in srgb,var(--peri-bright) 28%,transparent);
  opacity:.92;transition:opacity .6s ease;
}
.ab-stage.is-live .ab-stage__poster{ opacity:0; }
.ab-stage__cap{
  position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);z-index:2;
  color:var(--mute);font-size:.6rem;letter-spacing:.16em;white-space:nowrap;
}

/* ---------------------------------------------------------------------
   2 · STORY
   ------------------------------------------------------------------- */
.ab-story__grid{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px);
  align-items:start;max-width:var(--maxw);margin-inline:auto;
}
.ab-story__head h2{ margin-top:14px; }
.ab-story__body p{ color:var(--mute);font-size:1.06rem;line-height:1.7;margin-bottom:18px;max-width:62ch; }
.ab-story__body p:last-child{ margin-bottom:0;color:color-mix(in srgb,var(--bone) 80%,var(--mute)); }

.ab-pull{
  max-width:var(--maxw);margin:clamp(40px,7vh,72px) auto 0;
  padding:clamp(30px,5vw,54px);border-radius:24px;
  background:linear-gradient(165deg, color-mix(in srgb,var(--peri) 24%,var(--slate-panel)), var(--slate-panel));
  border:1px solid color-mix(in srgb,var(--peri-bright) 28%,transparent);
  position:relative;overflow:hidden;
}
.ab-pull::before{
  content:"\201C";position:absolute;top:-18px;left:18px;font-family:var(--font-display);
  font-size:9rem;color:color-mix(in srgb,var(--peri-bright) 30%,transparent);line-height:1;pointer-events:none;
}
.ab-pull blockquote{
  position:relative;font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.18;color:var(--bone);max-width:26ch;
}

/* ---------------------------------------------------------------------
   3 · PHILOSOPHY — card-fan carousel. SSR / no-JS / reduced default is a
   readable centered stack; about.js adds .is-live to fan the cards out.
   Compact (a single band) — replaced the old tall pinned statements.
   ------------------------------------------------------------------- */
.ab-beliefs{
  position:relative;z-index:1;display:flex;justify-content:center;overflow-x:clip;
  padding:clamp(36px,7vh,84px) var(--pad) clamp(28px,5vh,56px);
}
.ab-fan{ position:relative;width:100%;max-width:min(1200px,96vw);margin-inline:auto; }

/* default (no-JS / reduced): readable centered stack */
.ab-fan__deck{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:16px; }
.ab-fancard{
  --cw:clamp(230px,72vw,420px);width:var(--cw);
  display:flex;flex-direction:column;justify-content:center;gap:16px;
  padding:clamp(28px,4vh,42px) clamp(24px,3vw,34px);
  border-radius:26px;text-align:center;color:var(--bone);
  background:
    linear-gradient(180deg, #20243440 0%, transparent 30%),
    linear-gradient(180deg, var(--slate-raise) 0%, color-mix(in srgb,var(--peri) 14%, var(--slate-panel)) 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 26px 60px -22px rgba(5,7,14,.72), inset 0 1px 0 rgba(255,255,255,.05);
}
.ab-fancard__n{
  color:var(--accent);font-size:.74rem;letter-spacing:.3em;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
}
.ab-fancard__n::before,.ab-fancard__n::after{ content:"";width:26px;height:1px;background:color-mix(in srgb,var(--accent) 50%,transparent); }
.ab-fancard__line{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.08;
  font-size:clamp(1.5rem,3.2vw,2.5rem);color:var(--bone);
}
/* active card — periwinkle highlight (front of the fan) */
.ab-fancard.is-active{
  border-color:transparent;
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--peri) 8%,#fff) 0%, transparent 24%),
    linear-gradient(165deg, color-mix(in srgb,var(--peri) 40%, var(--slate-panel)) 0%, color-mix(in srgb,var(--peri) 18%, var(--slate-panel)) 60%, var(--slate-raise) 100%);
  box-shadow:0 40px 90px -24px rgba(5,7,14,.8), 0 0 70px color-mix(in srgb,var(--peri) 26%,transparent);
}
.ab-fancard.is-active .ab-fancard__line{ color:#fff; }
.ab-fancard.is-active .ab-fancard__n{ color:#fff; }
.ab-fancard.is-active .ab-fancard__n::before,.ab-fancard.is-active .ab-fancard__n::after{ background:rgba(255,255,255,.5); }

.ab-fan__dots{ display:none;justify-content:center;gap:10px;margin-top:26px; }
.ab-fan__dot{
  width:9px;height:9px;border-radius:50%;cursor:pointer;border:0;padding:0;
  background:color-mix(in srgb,var(--accent) 32%,transparent);
  transition:transform .3s,background .3s,box-shadow .3s;
}
.ab-fan__dot.is-active{ background:var(--accent);transform:scale(1.5);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent); }
.ab-fan__dot:focus-visible{ outline:2px solid var(--glow);outline-offset:3px; }

/* live fan (about.js + GSAP) — cards absolutely centred & stacked; GSAP owns
   each card's transform (x/y/rotation/scale), so there is NO CSS transition
   here (it would fight GSAP). Portrait cards, like the reference. */
.ab-fan.is-live .ab-fan__deck{
  position:relative;display:block;height:clamp(440px,62vh,600px);
}
.ab-fan.is-live .ab-fancard{
  --cw:clamp(190px,18vw,250px);--ch:clamp(300px,46vh,420px);
  position:absolute;left:50%;top:50%;
  width:var(--cw);height:var(--ch);min-height:0;justify-content:center;
  margin-left:calc(var(--cw) / -2);margin-top:calc(var(--ch) / -2);
  transform-origin:50% 50%;transition:none;will-change:transform;cursor:default;
}
.ab-fan.is-live .ab-fancard__line{ font-size:clamp(1.15rem,1.4vw,1.55rem); }
@media (max-width:980px){ .cc-svc--about .cc-spine{ display:none; } }

/* ---------------------------------------------------------------------
   4 · THE STACK
   ------------------------------------------------------------------- */
.ab-stack__grid{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  max-width:var(--maxw);margin-inline:auto;
}
.ab-tool{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:24px;border-radius:18px;background:var(--slate-panel);border:1px solid var(--hairline);
  opacity:0;transform:translateY(14px);
  transition:opacity .6s var(--ease-expo),transform .6s var(--ease-expo),border-color .3s;
  transition-delay:calc(var(--d,0) * .07s);
}
[data-reveal-svc].is-in .ab-tool{ opacity:1;transform:none; }
.ab-tool:hover{ transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 35%,transparent); }
.ab-mark{ width:44px;height:44px;display:grid;place-items:center;margin-bottom:8px; }
.ab-mark svg{ width:40px;height:40px; }
.ab-tool__name{ font-family:var(--font-display);font-weight:800;font-size:1.1rem;color:var(--bone); }
.ab-tool__note{ color:var(--mute);font-size:.88rem; }

/* ---------------------------------------------------------------------
   5 · NUMBERS
   ------------------------------------------------------------------- */
.ab-numbers__grid{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  max-width:var(--maxw);margin-inline:auto;
}
.ab-stat{
  padding:30px 24px;border-radius:18px;text-align:center;
  background:linear-gradient(165deg, color-mix(in srgb,var(--peri) 10%,var(--slate-panel)), var(--slate-panel));
  border:1px solid var(--hairline);
}
.ab-stat__n{
  display:block;font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(2.4rem,5vw,3.4rem);color:var(--accent);line-height:1;font-variant-numeric:tabular-nums;
}
.ab-stat__label{ display:block;margin-top:12px;color:var(--mute);font-size:.9rem;line-height:1.4; }

/* ---------------------------------------------------------------------
   6 · CREDENTIALS
   ------------------------------------------------------------------- */
.ab-trusted__head{ max-width:52ch;margin-bottom:26px; }
.ab-trusted__head p{ margin-top:14px;color:var(--mute);font-size:1.02rem;line-height:1.6; }
.ab-trusted__strip{
  list-style:none;display:flex;flex-wrap:wrap;gap:14px;max-width:var(--maxw);margin-inline:auto;
}
.ab-client{
  flex:1 1 210px;display:flex;flex-direction:column;gap:4px;
  padding:20px 24px;border-radius:16px;background:var(--glass);border:1px solid var(--hairline);
  transition:border-color .3s,transform .3s var(--ease-expo);
}
.ab-client:hover{ border-color:color-mix(in srgb,var(--accent) 40%,transparent);transform:translateY(-3px); }
.ab-client__t{ font-family:var(--font-display);font-weight:800;font-size:1.12rem;color:var(--bone);letter-spacing:-.01em; }
.ab-client__s{ color:var(--mute);font-size:.82rem; }

/* ---------------------------------------------------------------------
   RESPONSIVE — hero stacks (visual ABOVE text, simplified)
   ------------------------------------------------------------------- */
@media (max-width:900px){
  .ab-hero{ grid-template-columns:1fr;min-height:auto;gap:24px;text-align:left; }
  .ab-stage{ order:-1;max-width:320px; }
  .ab-story__grid{ grid-template-columns:1fr;gap:18px; }
  .ab-stack__grid{ grid-template-columns:repeat(2,1fr); }
  .ab-numbers__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .ab-stack__grid{ grid-template-columns:1fr; }
  .ab-fan.is-live .ab-fan__deck{ height:clamp(380px,64vh,480px); }
  .ab-fan.is-live .ab-fancard{ --cw:clamp(150px,52vw,200px);--ch:clamp(240px,46vh,330px); }
  .ab-fan.is-live .ab-fancard__line{ font-size:clamp(1.05rem,4.4vw,1.4rem); }
}

/* ---------------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .ab-stage__canvas{ transition:none; }
  .ab-tool{ opacity:1;transform:none;transition:none; }
}
.cc-reduced .ab-tool{ opacity:1;transform:none; }

/* =====================================================================
   LIGHT particles re-skin — on-background text → ink; dark cards (pull-quote,
   tools, stats) keep light text; glass client chips become light cards.
   (Hero/story headings reuse .svc-* and are already handled in services.css.)
   ===================================================================== */
.ab-story__body p{ color:#4a5170; }
/* (philosophy is now dark fan cards — they keep their own light text, no ink override) */
.ab-trusted__head p{ color:#4a5170; }
.ab-stage__cap{ color:#565d77; }
.ab-pull,.ab-tool,.ab-stat{ color:var(--bone); }
.ab-client{ background:#fff;border-color:rgba(92,103,149,.16); }
.ab-client__t{ color:var(--ink); }
.ab-client__s{ color:#565d77; }