/* ════════════════════════════════════════════════════════════════
   Gallery v2 — ARCHETYPES-ABOUT.CSS
   Premium light-shell About (.about2) + 5 archetypes (.aarch-1..5).
   Re-skinned per .sys-N. Self-contains the closing-CTA card (.pcta*)
   since archetypes-product.css isn't loaded here.
   ════════════════════════════════════════════════════════════════ */

.about2{background:var(--paper);color:var(--ink)}

/* ───────── hero ───────── */
.ahero{position:relative;text-align:center;padding:clamp(132px,20vh,232px) clamp(20px,5vw,40px) clamp(56px,8vh,104px);overflow:hidden}
.ahero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 30% at 50% 20%,color-mix(in srgb,var(--accent-light) 7%,transparent),transparent 70%),
    radial-gradient(120% 84% at 50% -10%,#fff 0%,var(--paper) 52%,var(--paper2) 100%)}
.ahero .eyebrow{justify-content:center;margin-bottom:20px}
.ahero h1{font-family:var(--disp);font-weight:800;line-height:1.03;letter-spacing:-.038em;font-size:var(--step-6);max-width:18ch;margin:0 auto}
.ahero h1 .accent{color:var(--accent-light)}
.ahero-sub{font-size:var(--step-2);line-height:1.6;color:var(--ink-soft);max-width:54ch;margin:22px auto 0}
.ahero .hero-actions{display:flex;align-items:center;justify-content:center;gap:var(--s-4);flex-wrap:wrap;margin-top:var(--s-7)}

/* ───────── why we built this ───────── */
.why2-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,72px);align-items:start}
.why2-copy .eyebrow{margin-bottom:14px}
.why2-copy h2{font-family:var(--disp);font-weight:800;letter-spacing:-.026em;line-height:1.05;font-size:var(--step-5);margin-bottom:20px}
.why2-copy h2 em{font-style:normal;color:var(--accent-light)}
.why2-lead{font-size:var(--step-2);line-height:1.66;color:var(--ink);font-weight:450}
.why2-body{font-size:15.5px;line-height:1.7;color:var(--ink-soft);margin-top:16px}
.thesis2{display:flex;flex-direction:column;gap:22px;padding-top:6px}
.thesis2-pt{display:flex;gap:16px;align-items:flex-start}
.thesis2-dot{width:9px;height:9px;border-radius:50%;background:var(--accent-light);flex:none;margin-top:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-light) 14%,transparent)}
.thesis2-pt p{font-size:15px;line-height:1.62;color:var(--ink-soft)}
.thesis2-pt p strong{color:var(--ink);font-weight:600}

/* ───────── three engines ───────── */
.engines2{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
.eng-j{--ec:var(--janus)} .eng-c{--ec:var(--caposeo-lift)} .eng-l{--ec:#1f9d57}
.engine2{position:relative;display:flex;flex-direction:column;gap:16px;background:var(--paper2);border:1px solid var(--hairline);
  border-radius:var(--r-bezel);padding:clamp(24px,2.8vw,32px);box-shadow:var(--shadow-md);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.engine2::before{content:"";position:absolute;left:0;top:clamp(24px,2.8vw,32px);bottom:clamp(24px,2.8vw,32px);width:3px;border-radius:0 3px 3px 0;background:var(--ec)}
.engine2:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--hairline-strong)}
.engine2-logo{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--hairline);border-radius:10px;padding:8px 13px;width:fit-content;box-shadow:var(--shadow-sm)}
.engine2-logo img{display:block;object-fit:contain;width:auto}
.engine2-desc{font-size:14px;line-height:1.62;color:var(--ink-soft);flex:1}
.engine2-stats{display:flex;gap:10px;flex-wrap:wrap}
.estat{flex:1;min-width:78px;background:var(--paper);border:1px solid var(--hairline);border-radius:11px;padding:11px 13px}
.estat .v{display:block;font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--ec);font-variant-numeric:tabular-nums}
.estat .l{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);margin-top:5px}
.engine2-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;
  color:#1f9d57;background:rgba(51,209,122,.08);border:1px solid rgba(51,209,122,.24);border-radius:7px;padding:5px 11px;width:fit-content}
.engine2-live i{width:6px;height:6px;border-radius:50%;background:var(--ls);box-shadow:0 0 7px var(--ls);animation:livePulse 2.4s infinite}
.engine2-link{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13.5px;color:var(--ec);border-top:1px solid var(--hairline);padding-top:14px;margin-top:2px}
.engine2-link .ar{transition:transform .3s var(--ease)}
.engine2-link:hover .ar{transform:translateX(4px)}

/* ───────── principles ───────── */
.principles2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5)}
.principle2{background:var(--paper2);border:1px solid var(--hairline);border-radius:var(--r-core);padding:clamp(22px,2.6vw,30px);box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.principle2:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--hairline-strong)}
.principle2-i{display:inline-block;font-size:20px;color:var(--accent-light);margin-bottom:13px}
.principle2 h4{font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--ink);margin-bottom:9px}
.principle2 p{font-size:14px;line-height:1.64;color:var(--ink-soft)}

/* ───────── closing CTA card (self-contained) ───────── */
.pcta-card{position:relative;max-width:740px;margin:0 auto;text-align:center;border-radius:26px;padding:clamp(36px,5vw,60px);
  background:linear-gradient(150deg,#fff,rgba(241,239,234,.7));border:1px solid var(--hairline);box-shadow:var(--shadow-lg),var(--inset-hi)}
.pcta-card .eyebrow{justify-content:center;margin-bottom:14px}
.pcta-card h2{font-family:var(--disp);font-weight:800;letter-spacing:-.025em;line-height:1.06;font-size:var(--step-5);margin-bottom:14px}
.pcta-card h2 em{font-style:normal;color:var(--accent-light)}
.pcta-sub{color:var(--ink-soft);font-size:var(--step-2);line-height:1.6;max-width:50ch;margin:0 auto 26px}
.pcta-card .hero-actions{justify-content:center;display:flex;gap:14px;flex-wrap:wrap}
.pcta-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.4px;color:var(--muted);margin-top:22px}

/* ════════ ARCHETYPES ════════ */
/* aarch-1 · Editorial Split — left-aligned hero + heads (why grid stays 2-col) */
.aarch-1 .ahero{text-align:left;padding-left:clamp(28px,8vw,120px);padding-right:clamp(28px,8vw,120px)}
.aarch-1 .ahero .eyebrow{justify-content:flex-start}
.aarch-1 .ahero h1,.aarch-1 .ahero-sub{margin-left:0}
.aarch-1 .ahero .hero-actions{justify-content:flex-start}
.aarch-1 .ahero h1::before{content:"";display:block;width:56px;height:3px;background:var(--accent-light);border-radius:2px;margin:0 0 24px}
.aarch-1 .section-head{text-align:left;margin-left:0;max-width:680px}
.aarch-1 .section-head .eyebrow,.aarch-1 .section-head h2,.aarch-1 .section-head p{justify-content:flex-start}

/* aarch-2 · Centered Statement — oversized centered hero + single centered why column */
.aarch-2 .ahero h1{font-size:clamp(3rem,2rem + 5vw,5.4rem);max-width:16ch}
.aarch-2 .why2-grid{grid-template-columns:1fr;justify-items:center;text-align:center;max-width:820px;margin:0 auto;gap:clamp(28px,3vw,44px)}
.aarch-2 .why2-copy{max-width:680px}
.aarch-2 .thesis2{max-width:680px}
.aarch-2 .thesis2-pt{justify-content:center;text-align:left}

/* aarch-3 · Manifesto — oversized thesis type, editorial measure */
.aarch-3 .why2-copy h2{font-size:clamp(2.4rem,1.6rem + 3vw,3.6rem)}
.aarch-3 .why2-lead{font-size:clamp(1.2rem,1rem + .8vw,1.6rem);line-height:1.5;color:var(--ink);font-weight:500}
.aarch-3 .ahero h1{letter-spacing:-.044em}

/* aarch-4 · Z-Axis Cascade — engine + principle depth/rotation */
.aarch-4 .engine2:nth-child(1){transform:rotate(-1.1deg)}
.aarch-4 .engine2:nth-child(2){transform:translateY(-18px);z-index:2}
.aarch-4 .engine2:nth-child(3){transform:rotate(1.1deg)}
.aarch-4 .engine2:hover{transform:translateY(-8px) rotate(0);z-index:4}
.aarch-4 .principle2{box-shadow:var(--shadow-md)}
.aarch-4 .principle2:nth-child(odd){transform:rotate(-.7deg)}
.aarch-4 .principle2:nth-child(even){transform:rotate(.7deg)}
.aarch-4 .principle2:hover{transform:translateY(-5px) rotate(0)}
@media(max-width:900px){.aarch-4 .engine2,.aarch-4 .engine2:nth-child(n),.aarch-4 .principle2,.aarch-4 .principle2:nth-child(n){transform:none}}

/* aarch-5 · Soft Structural — airy, big type, soft surfaces */
.aarch-5 .ahero h1{font-weight:800;letter-spacing:-.044em}
.aarch-5 .section{padding-top:clamp(100px,13vw,180px);padding-bottom:clamp(100px,13vw,180px)}
.aarch-5 .engine2,.aarch-5 .principle2{background:var(--paper);box-shadow:0 2px 10px rgba(17,21,28,.04),0 26px 60px rgba(17,21,28,.07);border-color:var(--hairline-2)}
.aarch-5 .engine2:hover,.aarch-5 .principle2:hover{transform:translateY(-8px)}
.aarch-5 .section-head h2{font-size:clamp(2rem,1.4rem + 2.6vw,3rem)}

/* ───────── responsive ───────── */
@media(max-width:900px){
  .why2-grid{grid-template-columns:1fr;gap:32px}
  .engines2{grid-template-columns:1fr}
  .principles2{grid-template-columns:1fr}
}