/* =========================================================
   ABOUT PAGE — A Brand Perception Studio
   Scoped to about.php. Relies on global tokens from style.css:
   --blue --red --bg --white --ink --muted --line --ease
========================================================= */

/* ============ SECTION 1 — HERO ============ */
.ab-hero { padding:210px 0 140px; position:relative; overflow:hidden; background:var(--white); }
.ab-hero .hero-grid {
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px),
                   linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px; opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
          mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 75%);
}
.ab-hero .wrap { position:relative; z-index:2; }
.ab-hero-layout { display:grid; grid-template-columns:1.05fr 0.95fr; gap:80px; align-items:center; }
.ab-hero-content .hero-badge { margin-bottom:34px; }
.ab-hero-title {
  font-family:'Manrope',sans-serif; font-weight:800;
  font-size:clamp(2.5rem,5vw,4.1rem); line-height:1.05;
  letter-spacing:-.03em; color:var(--ink); margin-bottom:30px;
}
.ab-hero-title .line { display:block; }
.ab-hero-title .line:last-child span { color:var(--blue); }
.ab-hero-sub { font-size:1.12rem; line-height:1.7; color:var(--ink); max-width:540px; margin-bottom:18px; font-weight:500; }
.ab-hero-sub2 { font-size:1rem; line-height:1.8; color:var(--muted); max-width:540px; margin-bottom:40px; }
.ab-hero .hero-actions { display:flex; gap:16px; flex-wrap:wrap; }

/* Founder portrait placeholder */
.ab-portrait { position:relative; max-width:420px; margin:0 auto; }
.ab-portrait-inner {
  position:relative; aspect-ratio:4/5; border-radius:36px;
  border:1px solid var(--line); background:var(--white);
  box-shadow:0 30px 80px rgba(7,62,129,.08);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  overflow:hidden;
}
.ab-portrait-inner::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(7,62,129,.04) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(7,62,129,.04) 1px, transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%, #000, transparent 72%);
          mask-image:radial-gradient(circle at 50% 40%, #000, transparent 72%);
}
.ab-portrait-mark {
  position:relative; width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,0,51,.06); border:1px solid rgba(255,0,51,.16);
}
.ab-portrait-mark svg { width:20px; height:auto; animation:play-heartbeat 5s ease-in-out infinite; }
.ab-portrait-label {
  position:relative; font-family:'Manrope',sans-serif; font-weight:700;
  font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.ab-portrait-cap {
  position:absolute; left:24px; bottom:22px; display:flex; flex-direction:column; gap:2px;
  background:rgba(255,255,255,.7); backdrop-filter:blur(6px);
  padding:10px 16px; border-radius:14px; border:1px solid var(--line);
}
.ab-portrait-cap strong { font-family:'Manrope',sans-serif; font-weight:800; font-size:.98rem; color:var(--ink); }
.ab-portrait-cap span { font-size:.78rem; color:var(--muted); }

/* ============ SECTION 2 — WE SAW A PATTERN ============ */
.ab-pattern { background:var(--white); transition:background-color .9s var(--ease);
  --sig-dim:rgba(7,62,129,.4); --sig-bright:var(--ink); }
.ab-pattern.is-blue { --sig-dim:rgba(255,255,255,.4); --sig-bright:#fff; }
.ab-pattern-inner { max-width:820px; margin:0 auto; text-align:center; }
.ab-pattern .eyebrow { transition:color .9s var(--ease); }
.ab-pattern .eyebrow::before { transition:background-color .9s var(--ease); }
.ab-pattern.is-blue .eyebrow { color:rgba(255,255,255,.6); }
.ab-pattern.is-blue .eyebrow::before { background:rgba(255,255,255,.4); }
.ab-pattern-head {
  font-family:'Manrope',sans-serif; font-weight:800;
  font-size:clamp(2.2rem,5vw,3.6rem); letter-spacing:-.03em; color:var(--ink);
  margin:18px 0 40px; transition:color .9s var(--ease);
}
.ab-pattern.is-blue .ab-pattern-head { color:#fff; }
.ab-pattern-body { text-align:left; }
.ab-pattern-body > p { font-size:1.2rem; line-height:1.75; color:var(--ink); margin-bottom:24px; transition:color .9s var(--ease); }
.ab-pattern.is-blue .ab-pattern-body > p { color:rgba(255,255,255,.9); }
.ab-signals {
  display:flex; flex-direction:column; gap:12px;
  margin:36px 0; padding-left:26px; border-left:2px solid var(--line);
  transition:border-color .9s var(--ease);
}
.ab-pattern.is-blue .ab-signals { border-left-color:rgba(255,255,255,.18); }
/* looping highlight: each line brightens in turn with a red line-bullet on the left */
.ab-signal {
  position:relative; font-family:'Manrope',sans-serif; font-weight:700; font-size:1.15rem; letter-spacing:-.01em;
  color:var(--sig-dim);
  animation:sig-text 7s linear infinite;
}
.ab-signal::before {
  content:''; position:absolute; left:-26px; top:50%; transform:translateY(-50%);
  width:0; height:2px; border-radius:2px; background:var(--red);
  animation:sig-bar 7s linear infinite; animation-delay:inherit;
}
.ab-signal:nth-child(1) { animation-delay:0s; }
.ab-signal:nth-child(2) { animation-delay:1.4s; }
.ab-signal:nth-child(3) { animation-delay:2.8s; }
.ab-signal:nth-child(4) { animation-delay:4.2s; }
.ab-signal:nth-child(5) { animation-delay:5.6s; }
@keyframes sig-text { 0%,20%,100% { color:var(--sig-dim); } 5%,15% { color:var(--sig-bright); } }
@keyframes sig-bar  { 0%,20%,100% { width:0; } 5%,15% { width:16px; } }
.ab-pattern-turn { font-size:1.25rem; line-height:1.7; color:var(--muted); margin-bottom:24px; transition:color .9s var(--ease); }
.ab-pattern.is-blue .ab-pattern-turn { color:rgba(255,255,255,.7); }
.ab-pattern-resolve {
  font-family:'Manrope',sans-serif; font-weight:800;
  font-size:clamp(1.4rem,2.6vw,1.9rem); line-height:1.45; letter-spacing:-.02em; color:var(--blue);
  transition:color .9s var(--ease);
}
.ab-pattern.is-blue .ab-pattern-resolve { color:#fff; }

/* ============ SECTION 3 — THE PROBLEM WAS NEVER DESIGN ============ */
.ab-shift { background:var(--white); }
.ab-shift-head { max-width:720px; margin:0 auto 60px; text-align:center; }
.ab-shift-head h2 { font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.02em; color:var(--ink); margin-top:16px; }
.ab-compare { display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch; }
.ab-compare-card {
  border:1px solid var(--line); border-radius:30px; padding:42px 40px; background:var(--bg);
}
.ab-compare-tag { display:block; font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.ab-compare-card h3 { font-family:'Manrope',sans-serif; font-weight:800; font-size:1.7rem; color:var(--ink); letter-spacing:-.02em; margin-bottom:24px; }
.ab-compare-card ul { list-style:none; display:flex; flex-direction:column; gap:14px; }
.ab-compare-card li { font-size:1rem; line-height:1.5; color:var(--muted); padding-left:20px; position:relative; }
.ab-compare-card li::before { content:''; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:rgba(7,62,129,.25); }
.ab-compare-card-accent { background:var(--blue); border-color:var(--blue); }
.ab-compare-card-accent .ab-compare-tag { color:rgba(255,255,255,.6); }
.ab-compare-card-accent h3 { color:#fff; }
.ab-compare-card-accent li { color:rgba(255,255,255,.82); }
.ab-compare-card-accent li::before { background:var(--red); }
.ab-compare-bridge { display:flex; flex-direction:column; align-items:center; justify-content:center; width:96px; position:relative; }
.ab-compare-bridge-line { width:100%; height:1.5px; background:rgba(7,62,129,.18); }
.ab-compare-bridge-glyph {
  position:absolute; width:40px; height:40px; border-radius:50%;
  background:var(--blue); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(7,62,129,.25);
}
.ab-compare-bridge-glyph svg { width:13px; height:auto; }
.ab-shift-note { max-width:760px; margin:56px auto 0; text-align:center; }
.ab-shift-note p { font-size:1.08rem; line-height:1.8; color:var(--muted); margin-bottom:16px; }
.ab-shift-note-em { font-family:'Manrope',sans-serif; font-weight:800; font-size:1.25rem; line-height:1.5; color:var(--ink); letter-spacing:-.01em; }

/* ============ SECTION 4 — WHY 8D? ============ */
.ab-why { background:var(--white); }
.ab-why-head { max-width:720px; margin:0 auto 64px; text-align:center; }
.ab-why-head h2 { font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.02em; color:var(--ink); margin:14px 0 18px; }
.ab-why-head p { font-size:1.05rem; line-height:1.8; color:var(--muted); }
.ab-principles { display:grid; grid-template-columns:0.85fr 2fr; gap:48px; align-items:center; }
.ab-principle-logo {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  padding:48px 32px; background:var(--white); border:1px solid var(--line); border-radius:30px;
  box-shadow:0 20px 60px rgba(7,62,129,.06); text-align:center;
}
.ab-principle-logo img { width:100%; max-width:150px; height:auto; }
.ab-principle-logo span { font-family:'Manrope',sans-serif; font-weight:700; font-size:.92rem; color:var(--blue); }
.ab-principle-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ab-principle {
  background:var(--white); border:1px solid var(--line); border-radius:20px; padding:24px 20px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.ab-principle:hover { transform:translateY(-4px); border-color:rgba(7,62,129,.16); box-shadow:0 18px 38px rgba(7,62,129,.1); }
.ab-principle-icon { display:inline-flex; width:40px; height:40px; margin-bottom:14px; color:var(--blue); }
.ab-principle-icon svg { width:100%; height:100%; fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; }
.ab-principle-icon svg .fill { fill:var(--red); stroke:none; }
.ab-principle h3 { font-family:'Manrope',sans-serif; font-weight:800; font-size:1.05rem; color:var(--ink); margin-bottom:6px; letter-spacing:-.01em; }
.ab-principle p { font-size:.82rem; line-height:1.55; color:var(--muted); }
.ab-why-close { text-align:center; margin-top:60px; }
.ab-why-close p { font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(1.5rem,3vw,2.2rem); letter-spacing:-.02em; line-height:1.3; color:var(--muted); }
.ab-why-close-em { color:var(--blue); }

/* ============ SECTION 5 — BRAND PERCEPTION FRAMEWORK ============ */
.ab-framework { background:var(--white); }
.ab-framework-grid { display:grid; grid-template-columns:1fr 0.8fr; gap:90px; align-items:center; }
.ab-framework-copy h2 { font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(2rem,3.4vw,2.9rem); line-height:1.12; letter-spacing:-.02em; color:var(--ink); margin:18px 0 26px; }
.ab-framework-copy p { font-size:1.02rem; line-height:1.85; color:var(--muted); max-width:480px; margin-bottom:18px; }
.ab-framework-ip { font-family:'Manrope',sans-serif; font-weight:700; color:var(--blue); font-size:1.05rem; }

/* "Our First / Second Framework" kicker — signals proprietary IP */
.ab-fw-kicker {
  display:block; font-family:'Manrope',sans-serif; font-weight:800;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--red); margin:8px 0 12px;
}
.ab-fw-kicker-dark { color:#fff; opacity:.65; }

/* vertical flow with a descending pulse */
.ab-framework-flow { position:relative; display:flex; flex-direction:column; gap:30px; padding:6px 0 6px 6px; }
.ab-flow-spine { position:absolute; left:12px; top:14px; bottom:14px; width:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.ab-flow-pulse {
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:2px; height:42px; border-radius:2px;
  background:linear-gradient(to bottom, transparent, var(--blue), transparent);
  animation:ab-flow-travel 4.5s var(--ease) infinite;
}
@keyframes ab-flow-travel { 0%{ top:-42px; } 70%,100%{ top:100%; } }
.ab-flow-node { position:relative; display:flex; align-items:center; gap:16px; padding-left:2px; }
.ab-flow-dot {
  width:14px; height:14px; border-radius:50%; flex-shrink:0; background:var(--white);
  border:2px solid rgba(7,62,129,.3); position:relative; z-index:1;
  animation:ab-flow-ignite 4.5s var(--ease) infinite;
}
.ab-flow-node:nth-child(2) .ab-flow-dot { animation-delay:.55s; }
.ab-flow-node:nth-child(3) .ab-flow-dot { animation-delay:1.1s; }
.ab-flow-node:nth-child(4) .ab-flow-dot { animation-delay:1.65s; }
.ab-flow-node:nth-child(5) .ab-flow-dot { animation-delay:2.2s; }
.ab-flow-node:nth-child(6) .ab-flow-dot { animation-delay:2.75s; }
@keyframes ab-flow-ignite {
  0%,100% { border-color:rgba(7,62,129,.3); background:var(--white); }
  10%     { border-color:var(--blue); background:var(--blue); box-shadow:0 0 0 5px rgba(7,62,129,.1); }
  30%     { border-color:rgba(7,62,129,.3); background:var(--white); box-shadow:none; }
}
.ab-flow-label { display:flex; flex-direction:column; }
.ab-flow-label strong { font-family:'Manrope',sans-serif; font-weight:800; font-size:1.15rem; color:var(--ink); letter-spacing:-.01em; }
.ab-flow-label span { font-size:.85rem; color:var(--muted); }
.ab-flow-node-end .ab-flow-dot { border-color:var(--red); }
.ab-flow-node-end .ab-flow-label strong { color:var(--blue); }

/* ============ SECTION 6 — GROWTH ARCHITECTURE (dark, ascending) ============ */
/* white skin by default; .is-blue (on scroll) = blue skin. --cap drives the
   staircase cap colour so the pulse works in both skins. */
.ab-arch { background:var(--white); color:var(--ink); transition:background-color .9s var(--ease);
  --cap:var(--blue); --capglow:rgba(7,62,129,.45); }
.ab-arch.is-blue { background:var(--blue); --cap:#fff; --capglow:rgba(255,255,255,.7); }
.ab-arch-head { max-width:720px; margin:0 auto 70px; text-align:center; }
.ab-arch-head h2 { font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.02em; color:var(--ink); margin:14px 0 18px; transition:color .9s var(--ease); }
.ab-arch.is-blue .ab-arch-head h2 { color:#fff; }
.ab-arch-head p { font-size:1.05rem; line-height:1.8; color:var(--muted); transition:color .9s var(--ease); }
.ab-arch.is-blue .ab-arch-head p { color:rgba(255,255,255,.72); }

.ab-stair {
  position:relative; display:flex; align-items:flex-end; gap:20px;
  height:380px; max-width:920px; margin:0 auto;
  padding:0 14px 54px; /* room for names below baseline */
  border-bottom:1.5px solid rgba(7,62,129,.16);
  transition:border-color .9s var(--ease);
}
.ab-arch.is-blue .ab-stair { border-bottom-color:rgba(255,255,255,.16); }
.ab-stair-axis { position:absolute; font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(7,62,129,.4); transition:color .9s var(--ease); }
.ab-arch.is-blue .ab-stair-axis { color:rgba(255,255,255,.4); }
.ab-stair-axis-y { left:-2px; top:-6px; }
.ab-stair-axis-x { right:0; bottom:18px; }
.ab-step {
  position:relative; flex:1; height:var(--h);
  background:rgba(7,62,129,.05); border:1px solid rgba(7,62,129,.12);
  border-bottom:none; border-radius:16px 16px 0 0;
  display:flex; align-items:flex-start; justify-content:center;
  transition:background-color .9s var(--ease), border-color .9s var(--ease);
}
.ab-arch.is-blue .ab-step { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); }
.ab-step-cap {
  position:absolute; top:-1px; left:8%; right:8%; height:3px; border-radius:3px;
  background:var(--cap); transition:background-color .9s var(--ease);
  animation:ab-step-pulse 7s var(--ease) infinite;
}
.ab-stair .ab-step:nth-child(4) .ab-step-cap { animation-delay:0s; }
.ab-stair .ab-step:nth-child(5) .ab-step-cap { animation-delay:.7s; }
.ab-stair .ab-step:nth-child(6) .ab-step-cap { animation-delay:1.4s; }
.ab-stair .ab-step:nth-child(7) .ab-step-cap { animation-delay:2.1s; }
.ab-stair .ab-step:nth-child(8) .ab-step-cap { animation-delay:2.8s; }
@keyframes ab-step-pulse {
  0%,100% { opacity:.55; box-shadow:none; }
  6%      { opacity:1; box-shadow:0 0 14px var(--capglow); }
  20%     { opacity:.55; box-shadow:none; }
}
.ab-step-no { margin-top:16px; font-family:'Manrope',sans-serif; font-weight:800; font-size:.82rem; color:var(--muted); transition:color .9s var(--ease); }
.ab-arch.is-blue .ab-step-no { color:rgba(255,255,255,.55); }
.ab-step-name {
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  margin-top:16px; white-space:nowrap; text-align:center;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:.82rem; color:var(--ink); transition:color .9s var(--ease);
}
.ab-arch.is-blue .ab-step-name { color:rgba(255,255,255,.85); }
.ab-step-peak { background:rgba(255,0,51,.10); border-color:rgba(255,0,51,.35); }
.ab-arch.is-blue .ab-step-peak { background:rgba(255,0,51,.14); border-color:rgba(255,0,51,.4); }
.ab-step-peak .ab-step-cap { background:var(--red); }
.ab-step-peak .ab-step-no { color:var(--red); }
.ab-arch.is-blue .ab-step-peak .ab-step-no { color:#fff; }
.ab-stair-climber {
  position:absolute; left:10%; bottom:33%; width:30px; height:30px; transform:translate(-50%,50%);
  display:flex; align-items:center; justify-content:center;
  background:var(--blue); border-radius:50%; box-shadow:0 8px 22px rgba(7,62,129,.3);
  animation:ab-climb 7s var(--ease) infinite; transition:background-color .9s var(--ease);
}
.ab-arch.is-blue .ab-stair-climber { background:#fff; box-shadow:0 8px 22px rgba(0,0,0,.3); }
.ab-stair-climber svg { width:11px; height:auto; }
/* bottom % already account for the names' padding band beneath the baseline */
@keyframes ab-climb {
  0%   { left:10%; bottom:33%; opacity:0; }
  6%   { opacity:1; }
  25%  { left:30%; bottom:48%; }
  50%  { left:50%; bottom:64%; }
  75%  { left:70%; bottom:79%; }
  92%  { left:90%; bottom:96%; opacity:1; }
  100% { left:90%; bottom:96%; opacity:0; }
}
.ab-arch-steps { max-width:760px; margin:54px auto 0; text-align:center; }
.ab-arch-steps p { font-size:1.1rem; line-height:1.9; color:var(--muted); transition:color .9s var(--ease); }
.ab-arch.is-blue .ab-arch-steps p { color:rgba(255,255,255,.8); }
.ab-arch-steps strong { color:var(--ink); font-weight:700; transition:color .9s var(--ease); }
.ab-arch.is-blue .ab-arch-steps strong { color:#fff; }

/* ============ SECTION 7 — WHAT WE BELIEVE ============ */
/* ============ QUOTE DIVIDER ============ */
.ab-quote { background:var(--white); }  /* quote visuals now global .pull-quote */

.ab-believe { background:var(--white); padding:90px 0 0; }
.ab-believe-head { max-width:680px; margin:0 auto 10px; text-align:center; }
.ab-believe-head h2 { font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.02em; color:var(--ink); margin-top:14px; }
.ab-believe-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ab-belief {
  position:relative; background:var(--white); border:1px solid var(--line); border-radius:24px;
  padding:42px 36px; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.ab-belief::after {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--red);
  transform:scaleY(0); transform-origin:top; transition:transform .45s var(--ease);
}
.ab-belief:hover { transform:translateY(-5px); border-color:rgba(7,62,129,.16); box-shadow:0 24px 50px rgba(7,62,129,.1); }
.ab-belief:hover::after { transform:scaleY(1); }
.ab-belief-no { display:block; font-family:'Manrope',sans-serif; font-weight:800; font-size:.9rem; color:var(--red); margin-bottom:18px; }
.ab-belief h3 { font-family:'Manrope',sans-serif; font-weight:800; font-size:1.3rem; color:var(--ink); letter-spacing:-.02em; line-height:1.25; margin-bottom:6px; }
.ab-belief p { font-size:1.05rem; line-height:1.4; color:var(--muted); font-weight:500; }

/* ============ SECTION 9 — WHAT MAKES US EXCITED (scroll-driven constellation) ============ */
.ab-cst { position:relative; height:calc(var(--n) * 52vh + 100vh); }
.ab-cst-stage {
  position:absolute; top:0; left:0; width:100%; height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:6vw; padding:0 7vw;
}
.ab-cst-stage.is-fixed  { position:fixed;    top:0; }
.ab-cst-stage.is-bottom { position:absolute; top:auto; bottom:0; }
.ab-cst-svg { width:min(440px,44vw); height:auto; flex:0 0 auto; overflow:visible; }
.ab-cst-core { transform-box:fill-box; transform-origin:center; animation:play-heartbeat 5s ease-in-out infinite; }
.ab-cst-detail { flex:0 0 360px; max-width:360px; transition:opacity .35s var(--ease); }
.ab-cst-tag {
  display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); padding:5px 12px; border:1px solid rgba(255,0,51,.18); border-radius:100px; margin-bottom:18px;
}
.ab-cst-title { font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(1.8rem,3vw,2.6rem); color:var(--ink); letter-spacing:-.02em; line-height:1.2; margin-bottom:14px; }
.ab-cst-desc { font-size:1.1rem; line-height:1.6; color:var(--muted); }

.ab-cst-list { display:none; }
@media (max-width:860px), (prefers-reduced-motion: reduce) {
  .ab-cst { height:auto; }
  .ab-cst-stage { display:none; }
  .ab-cst-list { display:flex; flex-direction:column; gap:14px; max-width:560px; margin:0 auto; padding:0 24px; }
  .ab-cst-li { background:var(--white); border:1px solid var(--line); border-radius:20px; padding:24px 26px; }
  .ab-cst-li h3 { font-family:'Manrope',sans-serif; font-weight:800; font-size:1.1rem; color:var(--ink); letter-spacing:-.01em; margin-bottom:6px; }
  .ab-cst-li p { font-size:.9rem; line-height:1.55; color:var(--muted); }
}

/* ============ SECTION 8 — FOUNDER ============ */
.ab-founder { background:var(--white); }
.ab-founder-card { display:grid; grid-template-columns:0.8fr 1.2fr; gap:60px; align-items:center; max-width:1060px; margin:0 auto; }
.ab-founder-photo {
  position:relative; aspect-ratio:4/5; border-radius:30px;
  border:1px solid var(--line); background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
}
.ab-founder-body .eyebrow { margin-bottom:24px; }
/* Quote leads the section — noticeably larger than the supporting bio */
.ab-founder-quote {
  font-family:'Manrope',sans-serif; font-weight:800;
  font-size:clamp(2rem,4vw,3.2rem); line-height:1.22; letter-spacing:-.025em; color:var(--ink);
  margin-bottom:30px;
}
.ab-founder-bio { font-size:1rem; line-height:1.8; color:var(--muted); max-width:520px; margin-bottom:28px; }
.ab-founder-name { display:flex; flex-direction:column; gap:3px; padding-left:18px; border-left:2px solid var(--red); }
.ab-founder-name strong { font-family:'Manrope',sans-serif; font-weight:800; font-size:1.1rem; color:var(--ink); }
.ab-founder-name span { font-size:.9rem; color:var(--muted); }

/* ============ TEAM — THE PEOPLE BEHIND THE WORK (supportive, understated) ============ */
.ab-team { background:var(--white); }
.ab-team-head { max-width:620px; margin:0 auto 44px; text-align:center; }
.ab-team-head p { font-size:1rem; line-height:1.7; color:var(--muted); margin-top:14px; }
.ab-team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:1040px; margin:0 auto; }
.ab-team-card {
  background:var(--bg); border:1px solid var(--line); border-radius:20px;
  padding:30px 24px; text-align:center;
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.ab-team-card:hover { transform:translateY(-3px); border-color:rgba(7,62,129,.14); }
.ab-team-ph {
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; margin-bottom:16px; border-radius:50%;
  background:rgba(7,62,129,.05); border:1px solid var(--line);
}
.ab-team-ph svg { width:14px; height:auto; opacity:.6; }
.ab-team-card h3 { font-family:'Manrope',sans-serif; font-weight:800; font-size:1rem; color:var(--ink); letter-spacing:-.01em; line-height:1.25; margin-bottom:8px; }
.ab-team-card p { font-size:.84rem; line-height:1.55; color:var(--muted); }

/* ============ SECTION 9 — WHAT MAKES US EXCITED ============ */
.ab-vision { background:var(--bg); }
.ab-vision-head { max-width:760px; margin:0 auto 56px; text-align:center; }
.ab-vision-head h2 { font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.02em; color:var(--ink); margin-top:14px; }
.ab-vision-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.ab-vision-card {
  background:var(--white); border:1px solid var(--line); border-radius:22px; padding:30px 26px;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.ab-vision-card:hover { transform:translateY(-4px); border-color:rgba(7,62,129,.16); box-shadow:0 18px 40px rgba(7,62,129,.1); }
.ab-vision-tag { display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-bottom:16px; padding:5px 12px; border:1px solid rgba(255,0,51,.18); border-radius:100px; }
.ab-vision-card h3 { font-family:'Manrope',sans-serif; font-weight:800; font-size:1.08rem; color:var(--ink); letter-spacing:-.01em; margin-bottom:8px; line-height:1.3; }
.ab-vision-card p { font-size:.86rem; line-height:1.55; color:var(--muted); }
.ab-vision-close { max-width:720px; margin:56px auto 0; text-align:center; }
.ab-vision-close p { font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(1.4rem,2.6vw,1.9rem); line-height:1.5; letter-spacing:-.02em; color:var(--blue); }

/* ============ SECTION 10 — client logos placeholder ============ */
.ab-logos { text-align:center; margin:48px 0 26px; }
.ab-logos-label { display:block; font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:22px; }
.ab-logos-row { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; }
.ab-logo-ph {
  width:130px; height:56px; border-radius:14px;
  border:1px dashed rgba(7,62,129,.18); background:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:600; letter-spacing:.08em; color:rgba(7,62,129,.3);
}

/* ============ SECTION 11 — FINAL CTA ============ */
.ab-final { background:var(--white); }
/* white card by default; .is-blue (on scroll) = blue card */
.ab-final-card {
  background:var(--white); border:1px solid var(--line); border-radius:40px; padding:96px 48px; text-align:center; color:var(--ink);
  transition:background-color .9s var(--ease), border-color .9s var(--ease);
}
.ab-final-card.is-blue { background:var(--blue); border-color:var(--blue); color:#fff; }
.ab-final-card h2 { font-family:'Manrope',sans-serif; font-weight:800; font-size:clamp(2.2rem,4.5vw,3.4rem); line-height:1.1; letter-spacing:-.03em; color:var(--ink); margin:18px 0 22px; transition:color .9s var(--ease); }
.ab-final-card.is-blue h2 { color:#fff; }
.ab-final-card p { font-size:1.08rem; line-height:1.7; color:var(--muted); max-width:560px; margin:0 auto 40px; transition:color .9s var(--ease); }
.ab-final-card.is-blue p { color:rgba(255,255,255,.8); }
.ab-final-card .cta-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
/* primary button: blue (default white skin) -> white (blue skin) */
.ab-final-card.is-blue .btn-primary { background:#fff; color:var(--blue); }
.ab-final-card.is-blue .btn-primary:hover { box-shadow:0 18px 38px rgba(0,0,0,.25); }
/* secondary outline: dark (default white skin) -> light (blue skin) */
.ab-final-card.is-blue .ab-btn-light { border-color:rgba(255,255,255,.4); color:#fff; }
.ab-final-card.is-blue .ab-btn-light:hover { background:#fff; color:var(--blue); }

/* =========================================================
   STICKY CARD STACK — Why 8D / What We Believe / What Makes Us Excited
   Each card pins a little lower than the last (var(--i) * --stack-step),
   so the card body is overlapped but its title strip stays visible.
   Later cards paint over earlier ones (DOM order) and reverse on scroll-up.
========================================================= */
.ab-stack { position:relative; max-width:860px; margin:0 auto; --stack-top:104px; --stack-step:88px; }
.ab-stack-principles { --stack-step:60px; }
.ab-stack-believe    { --stack-step:94px; }
.ab-stack-excited    { --stack-step:90px; }

.ab-stack-card {
  position:sticky; top:calc(var(--stack-top) + var(--i) * var(--stack-step));
  margin-bottom:22px; overflow:hidden;
  background:var(--white); border:1px solid var(--line); border-radius:26px;
  box-shadow:0 -10px 24px rgba(7,62,129,.03), 0 24px 52px rgba(7,62,129,.09);
}
.ab-stack-card:last-child { margin-bottom:0; }

.ab-sc-head {
  display:flex; flex-direction:column; justify-content:center; gap:7px;
  min-height:var(--stack-step); padding:16px 38px 8px;
}
.ab-stack-card.is-row .ab-sc-head { flex-direction:row; align-items:center; gap:16px; padding-bottom:16px; }
.ab-sc-head h3 { font-family:'Manrope',sans-serif; font-weight:800; font-size:1.2rem; color:var(--ink); letter-spacing:-.01em; line-height:1.22; }
.ab-sc-body { padding:0 38px 34px; }
.ab-sc-body p { font-size:.95rem; line-height:1.65; color:var(--muted); }

/* number / tag / icon accents */
.ab-sc-no { font-family:'Manrope',sans-serif; font-weight:800; font-size:.82rem; color:var(--red); }
.ab-sc-tag { align-self:flex-start; font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--red); padding:5px 12px; border:1px solid rgba(255,0,51,.18); border-radius:100px; }
.ab-sc-icon { display:inline-flex; width:30px; height:30px; flex-shrink:0; }
.ab-sc-icon svg { width:100%; height:100%; fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; }
.ab-sc-icon svg .fill { fill:var(--red); stroke:none; }

/* logo / intro card (first in the Why 8D stack) */
.ab-stack-card.is-logo .ab-sc-head { flex-direction:row; align-items:center; justify-content:center; gap:16px; min-height:0; padding:18px 38px; }
.ab-sc-logo { height:30px; width:auto; }
.ab-sc-logo-tag { font-family:'Manrope',sans-serif; font-weight:700; font-size:1rem; color:var(--blue); }

/* =========================================================
   PINNED ONE-AT-A-TIME REVEAL (Why 8D? — Apple-style)
   .ab-pin is tall; .ab-pin-stage pins (sticky) for its duration.
   JS maps scroll progress -> active index; CSS animates each card in.
   --n = number of states (intro + 8 principles). Height ≈ ~half screen/card.
========================================================= */
.ab-pin { position:relative; height:calc(var(--n) * 52vh + 100vh); }
/* JS pins the stage: absolute (at section top) -> fixed (while scrolling through)
   -> absolute bottom (after). It can never bleed outside its own section. */
.ab-pin-stage {
  position:absolute; top:0; left:0; width:100%; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center;
}
.ab-pin-stage.is-fixed  { position:fixed;    top:0; }
.ab-pin-stage.is-bottom { position:absolute; top:auto; bottom:0; }

/* accumulating title list at the top */
.ab-pin-titles {
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:8px 22px; max-width:780px; margin:0 auto;
  padding:120px 24px 0; min-height:150px;
}
.ab-pin-titles span {
  font-family:'Manrope',sans-serif; font-weight:800; font-size:.92rem; letter-spacing:-.01em;
  color:var(--ink); opacity:0; transform:translateY(6px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .9s var(--ease);
}
.ab-pin-titles span.is-revealed { opacity:.32; transform:none; }
.ab-pin-titles span.is-active { opacity:1; color:var(--red); }

/* centered focus-card area */
.ab-pin-cards { position:relative; flex:1; width:100%; }
.ab-pin-card {
  position:absolute; left:50%; top:50%; width:min(440px,86vw);
  text-align:center;
  border:1px solid var(--line); border-radius:30px; padding:52px 42px;
  box-shadow:0 36px 80px rgb(0 49 109 / 35%);
  opacity:0; transform:translate(-50%,-50%) translateY(28px) scale(.94);
  pointer-events:none; will-change:opacity, transform;
  transition:opacity .6s var(--ease), transform .7s var(--ease), border-color .9s var(--ease);
}
.ab-pin-card.is-active { opacity:1; transform:translate(-50%,-50%) translateY(0) scale(1); }
.ab-pin-card.is-past  { opacity:0; transform:translate(-50%,-50%) translateY(-28px) scale(.94); }
.ab-pin-icon { display:inline-flex; width:56px; height:56px; margin-bottom:24px; }
.ab-pin-icon svg { width:100%; height:100%; fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; }
.ab-pin-icon svg .fill { fill:var(--red); stroke:none; }
.ab-pin-card h3 { font-family:'Manrope',sans-serif; font-weight:800; font-size:1.9rem; color:var(--ink); letter-spacing:-.02em; margin-bottom:14px; }
.ab-pin-card p { font-size:1.06rem; line-height:1.7; color:var(--muted); }
.ab-pin-card.is-intro .ab-pin-logo { display:block; height:46px; width:auto; margin:0 auto 18px; }
.ab-pin-logo-tag { font-family:'Manrope',sans-serif; font-weight:700; font-size:1.25rem; color:var(--blue); }

.ab-pin-no { display:block; font-family:'Manrope',sans-serif; font-weight:800; font-size:.85rem; color:var(--red); margin-bottom:14px; }

/* ----- side-index variant (What We Believe) — index pinned LEFT, card centred right ----- */
.ab-pin-side .ab-pin-stage,
.ab-believe .ab-pin-stage { flex-direction:row !important; align-items:center; justify-content:center; gap:64px; padding:0 7vw; }
.ab-pin-index { display:flex; flex-direction:column; gap:16px; flex:0 0 290px; max-width:300px; }
.ab-pin-index span {
  position:relative; padding-left:0;
  font-family:'Manrope',sans-serif; font-weight:800; font-size:1.18rem; letter-spacing:-.01em; line-height:1.25;
  color:var(--ink); opacity:.28;
  transition:opacity .4s var(--ease), color .9s var(--ease), padding-left .4s var(--ease);
}
.ab-pin-index span::before {
  content:''; position:absolute; left:0; top:.62em; width:0; height:2px; background:var(--red);
  transition:width .4s var(--ease);
}
.ab-pin-index span.is-active { opacity:1; color:var(--blue); padding-left:30px; }
.ab-pin-index span.is-active::before { width:18px; }
.ab-pin-side .ab-pin-cards,
.ab-believe .ab-pin-cards { flex:0 0 460px; max-width:460px; }

/* ===== White ⇄ blue skins for Why 8D? + What We Believe (.is-blue toggled on scroll) =====
   Default = white skin (dark text). .is-blue (added when the section reaches centre) = blue
   skin (white text). Everything that changes colour crossfades over .9s. */
.ab-pin-stage::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(7,62,129,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,62,129,.06) 1px, transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 50%, #000 55%, transparent 100%);
          mask-image:radial-gradient(ellipse 90% 80% at 50% 50%, #000 55%, transparent 100%);
}
.ab-pin-cards, .ab-pin-titles, .ab-pin-index, .ab-pin-progress { position:relative; z-index:1; }

/* section backgrounds + crossfade timing */
.ab-why, .ab-believe { background:var(--white); transition:background-color .9s var(--ease); }
.ab-why.is-blue, .ab-believe.is-blue, .ab-pattern.is-blue { background:var(--blue); }
.ab-why .eyebrow, .ab-believe .eyebrow,
.ab-why-head h2, .ab-believe-head h2, .ab-why-head p, .ab-why-close p, .ab-why-close-em,
.ab-pin-card h3, .ab-pin-card p, .ab-pin-logo-tag, .ab-pin-no { transition:color .9s var(--ease); }
.ab-why .eyebrow::before, .ab-believe .eyebrow::before { transition:background-color .9s var(--ease); }
.ab-pin-icon svg { transition:stroke .9s var(--ease); }
.ab-pin-logo { transition:filter .9s var(--ease); }

/* --- blue skin overrides --- */
.ab-why.is-blue .eyebrow, .ab-believe.is-blue .eyebrow { color:rgba(255,255,255,.6); }
.ab-why.is-blue .eyebrow::before, .ab-believe.is-blue .eyebrow::before { background:rgba(255,255,255,.4); }
.ab-why.is-blue .ab-why-head h2, .ab-believe.is-blue .ab-believe-head h2 { color:#fff; }
.ab-why.is-blue .ab-why-head p { color:rgba(255,255,255,.72); }
.ab-why.is-blue .ab-why-close p { color:rgba(255,255,255,.5); }
.ab-why.is-blue .ab-why-close-em { color:#fff; }
.is-blue .ab-pin-card { border-color:rgba(255,255,255,.14); }
.is-blue .ab-pin-card h3 { color:#fff; }
.is-blue .ab-pin-card p { color:rgba(255,255,255,.72); }
.is-blue .ab-pin-icon svg { stroke:#fff; }
.is-blue .ab-pin-logo { filter:brightness(0) invert(1); }
.is-blue .ab-pin-logo-tag { color:#fff; }
.is-blue .ab-pin-titles span { color:rgba(255,255,255,.9); }
.is-blue .ab-pin-titles span.is-active { color:#fff; }
.is-blue .ab-pin-index span { color:#fff; }
.is-blue .ab-pin-index span.is-active { color:#fff; }
.ab-believe.is-blue .ab-pin-no { color:rgba(255,255,255,.7); }

/* progress dots — dark on white skin, white on blue skin */
.ab-pin-progress { display:flex; gap:9px; padding:0 0 40px; }
.ab-pin-progress span { width:7px; height:7px; border-radius:50%; background:rgba(7,62,129,.2); transition:background-color .9s var(--ease), transform .3s ease; }
.ab-pin-progress span.is-revealed { background:rgba(7,62,129,.45); }
.ab-pin-progress span.is-active { background:var(--red); transform:scale(1.25); }
.is-blue .ab-pin-progress span { background:rgba(255,255,255,.55); }
.is-blue .ab-pin-progress span.is-revealed { background:#fff; }
.is-blue .ab-pin-progress span.is-active { background:var(--red); }

/* fallback: no pinning on small screens / reduced-motion — clean vertical list */
@media (max-width:760px), (prefers-reduced-motion: reduce) {
  .ab-pin { height:auto; }
  .ab-pin-stage { position:static; height:auto; display:block; overflow:visible; }
  .ab-pin-side .ab-pin-stage { padding:0; }
  .ab-pin-titles, .ab-pin-progress, .ab-pin-index { display:none; }
  .ab-pin-cards { display:flex; flex-direction:column; gap:16px; }
  .ab-pin-card,
  .ab-pin-card.is-active,
  .ab-pin-card.is-past {
    position:static; opacity:1; transform:none; pointer-events:auto;
    width:100%; max-width:520px; margin:0 auto; padding:34px 30px; text-align:left;
  }
  .ab-pin-card .ab-pin-icon { margin-bottom:14px; width:40px; height:40px; }
  .ab-pin-card h3 { font-size:1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-portrait-mark svg, .ab-flow-pulse, .ab-flow-dot,
  .ab-step-cap, .ab-stair-climber { animation:none; }
  .ab-stair-climber { display:none; }
  /* no pinning when motion is reduced — cards read as a simple list */
  .ab-stack-card { position:static; }
  .ab-sc-head { min-height:0; }
}

/* On small screens, drop the pinning so the stack reads as a clean vertical list */
@media (max-width:760px) {
  .ab-stack-card { position:static; }
  .ab-sc-head { min-height:0; padding:24px 28px 0; }
  .ab-sc-body { padding:6px 28px 26px; }
}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px) {
  .ab-hero-layout { gap:56px; }
  .ab-principles { grid-template-columns:1fr; gap:36px; }
  .ab-principle-logo { flex-direction:row; gap:24px; justify-content:flex-start; padding:28px 32px; }
  .ab-principle-logo img { max-width:120px; }
  .ab-framework-grid { gap:60px; }
}
@media (max-width:960px) {
  .ab-hero { padding:170px 0 110px; }
  .ab-hero-layout { grid-template-columns:1fr; gap:56px; }
  .ab-portrait { max-width:380px; }
  .ab-framework-grid { grid-template-columns:1fr; gap:50px; }
  .ab-founder-card { grid-template-columns:1fr; gap:40px; }
  .ab-founder-photo { max-width:360px; }
  .ab-vision-grid { grid-template-columns:repeat(2,1fr); }
  .ab-believe-grid { grid-template-columns:1fr 1fr; }
  .ab-principle-grid { grid-template-columns:repeat(3,1fr); }
  .ab-team-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px) {
  .ab-compare { grid-template-columns:1fr; gap:18px; }
  .ab-compare-bridge { width:100%; height:48px; flex-direction:row; }
  .ab-compare-bridge-line { width:1.5px; height:100%; }
  .ab-principle-grid { grid-template-columns:repeat(2,1fr); }
  .ab-believe-grid { grid-template-columns:1fr; }
  .ab-stair { height:300px; gap:10px; padding-bottom:62px; }
  .ab-step-name { font-size:.66rem; white-space:normal; width:90%; line-height:1.2; }
  .ab-step-no { font-size:.7rem; }
}
@media (max-width:560px) {
  .ab-pattern-body > p { font-size:1.08rem; }
  .ab-compare-card { padding:34px 28px; }
  .ab-compare-card h3 { font-size:1.45rem; }
  .ab-vision-grid { grid-template-columns:1fr; }
  .ab-principle-grid { grid-template-columns:1fr 1fr; }
  .ab-final-card { padding:72px 28px; border-radius:32px; }
  .ab-stair { height:260px; }
  .ab-team-grid { grid-template-columns:1fr; }
}