/* ═══════════════════════════════════════════════════════════════
   ABOUT V2 — Gold accent · luxury editorial
   Logo showcase, principle cards, glass stats, values grid.
   ═══════════════════════════════════════════════════════════════ */

/* ─── HOME NAV — unified with every other page (shared .plat-nav from core-v2.css), no page-specific override ─── */

/* ─── HERO ─── */
.ab-hero{
  padding:calc(var(--nav-h) + 60px) 0 var(--sp-4);
  min-height:76vh;display:flex;flex-direction:column;justify-content:center;
  position:relative;
}
.ab-hero-inner{max-width:760px}
.ab-hero-inner--center{text-align:center;margin:0 auto}

/* ─── HERO MAIN LOGO ─── */
.ab-hero-main-logo{
  width:320px;height:auto;margin:0 auto;display:block;
}

/* ─── HERO STUDIO NAME ─── */
.ab-hero-studio-name{
  display:block;margin-top:6px;
  font-family:'Cinzel',serif;font-weight:700;
  font-size:clamp(1.4rem,3vw,2.4rem);
  letter-spacing:8px;text-transform:uppercase;color:var(--ink);
}

/* ─── HERO SUPPORT — bottom of hero, smaller, softer ─── */
.ab-hero-support{
  margin-top:auto;margin-bottom:var(--sp-1);
  font-size:clamp(0.78rem,1.05vw,0.9rem);
  color:#6b6b6b;font-weight:500;line-height:1.45;
  max-width:880px;margin-left:auto;margin-right:auto;
}
@media(max-width:640px){
  .ab-hero-support{margin-top:auto;margin-bottom:8px;font-size:0.75rem}
}

/* ─── HERO TITLE — give breathing room below ─── */
.ab-hero-title{margin-bottom:clamp(60px,8vh,120px)}

/* ─── HERO ACTION LINE — moved down, grouped with support ─── */
.ab-hero-action-line,.ab-hero-support{opacity:0;transform:translateY(14px);animation:heroContentIn .7s cubic-bezier(.16,1,.3,1) 1.5s forwards}
.ab-hero-action-line{
  margin-bottom:var(--sp-4);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-family:'Sora',sans-serif;font-weight:700;color:var(--ink-dim);
  line-height:1.2;
}
@keyframes heroContentIn{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .ab-hero-action-line,.ab-hero-support{opacity:1;transform:none;animation:none}
}
.ab-hero-action-prefix{
  display:block;
  font-size:clamp(1.1rem,2.4vw,1.6rem);font-weight:600;letter-spacing:0.02em;
}
.ab-hero-action-pill{
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;
  padding:10px 28px;border-radius:999px;overflow:hidden;
  background:linear-gradient(90deg,rgba(26,136,152,0.08) 0%,rgba(255,255,255,0.2) 40%,rgba(255,255,255,0.24) 60%,rgba(26,136,152,0.08) 100%);
  backdrop-filter:blur(24px) saturate(1.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);
  border:1px solid rgba(255,255,255,0.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 2px rgba(0,0,0,0.03),
    0 2px 10px rgba(18,107,120,0.06),
    0 6px 24px rgba(18,107,120,0.04);
  height:clamp(2.6rem,5vw,3.8rem);
}
.ab-hero-action-pill::before{
  content:'';position:absolute;top:0;left:14%;right:14%;height:38%;
  background:linear-gradient(to bottom,rgba(255,255,255,0.18),transparent);
  border-radius:999px 999px 0 0;pointer-events:none;
}
.ab-hero-action-pill::after{
  content:'';position:absolute;bottom:0;left:10%;right:10%;height:28%;
  background:linear-gradient(to top,rgba(0,0,0,0.02),transparent);
  border-radius:0 0 999px 999px;pointer-events:none;
}
.ab-hero-action-pill .ab-hero-action-stage{
  position:relative;display:block;overflow:hidden;
  pointer-events:none;z-index:2;
}
.ab-hero-action-pill .ab-hero-action-track{
  display:flex;flex-direction:column;
  transition:transform .3s ease-in-out;will-change:transform;
}
.ab-hero-action-pill .ab-hero-action-word{
  display:block;flex-shrink:0;
  white-space:nowrap;text-align:center;
  font-size:clamp(1.3rem,3vw,2rem);
}
@media(prefers-reduced-motion:reduce){
  .ab-hero-action-track{transition:none}
}

/* ─── HERO CTA ─── */
/* ─── SCROLL INDICATOR ─── */
.ab-scroll-indicator{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  position:relative;margin:0 auto;width:fit-content;
  color:var(--ink-muted);text-decoration:none;
}
.ab-scroll-line{
  width:1px;height:22px;background:var(--hair-strong);
  overflow:hidden;position:relative;
}
.ab-scroll-line::after{
  content:'';position:absolute;left:0;top:-100%;width:100%;height:100%;
  background:var(--ink);animation:abScrollDrip 1.8s var(--ease) infinite;
}
.ab-scroll-text{
  font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--ink-muted);
}
@keyframes abScrollDrip{
  0%{top:-100%}
  60%{top:100%}
  100%{top:100%}
}
@media(prefers-reduced-motion:reduce){
  .ab-scroll-line::after{animation:none;top:0}
}
@media(max-width:640px){
  .ab-hero-main-logo{width:168px}
  .ab-hero{min-height:auto}
}

/* ─── STORY / PRINCIPLE CARDS ─── */
.ab-story-head{max-width:680px;margin-bottom:var(--sp-5)}
.ab-story-head .gv-h2{margin-top:var(--sp-3)}
.ab-principle-grid{margin-top:var(--sp-4)}
.ab-principle-card{display:flex;flex-direction:column;gap:14px;border-color:var(--hair);transition:transform .5s var(--ease),border-color .4s var(--ease),box-shadow .5s var(--ease)}
.ab-principle-card:hover{border-color:var(--accent);box-shadow:0 24px 60px -30px rgba(100,116,139,0.12)}
.ab-principle-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--accent-tint);color:var(--accent);flex-shrink:0}
.ab-principle-icon svg{width:22px;height:22px}

/* ─── STUDIO / STATS (DARK) ─── */
.ab-studio{padding:var(--sp-6) 0}
.ab-studio-head{max-width:600px;margin-bottom:var(--sp-5)}
.ab-studio-head .gv-h2{margin-top:var(--sp-3)}
.ab-stats-grid{gap:var(--sp-3)}
.ab-stat-card{text-align:center;padding:var(--sp-4) var(--sp-3)}
.ab-stat-card-num{font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:-0.02em;color:var(--on-ink);margin-bottom:6px}
.ab-stat-card-label{font-size:var(--fs-small);color:var(--on-ink-dim);letter-spacing:1px;text-transform:uppercase}
@media(max-width:768px){.ab-stats-grid{grid-template-columns:repeat(2,1fr)}}

/* ─── VALUES GRID ─── */
.ab-values-head{max-width:620px;margin-bottom:var(--sp-5)}
.ab-values-head .gv-h2{margin-top:var(--sp-3)}
.ab-values-grid{gap:var(--sp-3)}
.ab-value-card{display:flex;flex-direction:column;gap:12px;transition:transform .5s var(--ease),border-color .4s var(--ease)}
.ab-value-card:hover{border-color:var(--accent);transform:translateY(-4px)}
.ab-value-num{font-family:'Inter',sans-serif;font-size:11px;font-weight:500;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:4px}

/* ─── CTA ─── */
.ab-cta-block{max-width:620px;text-align:center;margin:0 auto}
.ab-cta-block .gv-h2{margin-bottom:var(--sp-1)}
.ab-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

@media(max-width:480px){
  .about-stage{padding:16px}
  .about-card{padding:28px 20px}
}
@media(max-width:360px){
  .about-stage{padding:12px}
  .about-card{padding:20px 16px}
  .about-title{font-size:1.3rem}
  .about-text{font-size:.85rem}
}