/* about — refactored component styles (rename + reorganize + dedupe; values byte-identical) */

/* Shared with the other views and defined once in components.css:
   .about-hero-container / .about-container / … (centred column),
   .about-breadcrumb*, .about-*-eyebrow, .about-*-cta-primary/-secondary,
   the hero glow + grid overlay, and every :hover state. Only the values that
   differ from that baseline live below. */

/* --- Hero --- */
.about-hero{ position:relative;padding:clamp(9rem,15vh,11.5rem) 0 clamp(3.5rem,7vh,6rem);overflow:hidden; }
.about-hero-glow{ top:-14%;left:-8%;width:56vw;height:56vw;max-width:760px;max-height:760px;background:radial-gradient(circle,var(--accent),transparent 62%);opacity:.12;filter:blur(26px); }
.about-hero-grid-overlay{ -webkit-mask-image:radial-gradient(ellipse 80% 60% at 55% 25%,#000,transparent 75%);mask-image:radial-gradient(ellipse 80% 60% at 55% 25%,#000,transparent 75%); }
.about-hero-container{ max-width:1300px;position:relative; }
.about-hero-grid{ display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4.5rem);align-items:center; }
.about-hero-title{ margin:0;font-size:clamp(2.5rem,6vw,5rem);line-height:1.03;letter-spacing:-.02em;font-weight:800; }
.about-hero-title-sub{ display:block;font-weight:300;color:#B8BECC; }
.about-hero-title-line{ display:block; }
.about-accent{ color:var(--accent); }
.about-hero-lead{ margin:clamp(1.5rem,2.6vw,2rem) 0 0;max-width:48ch;font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.7;color:#9BA3B4;font-weight:400; }
.about-hero-cta-row{ display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(1.9rem,3vw,2.6rem); }
.about-visual{ display:none;position:relative;min-height:clamp(360px,42vw,500px); }
.about-orbit{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;aspect-ratio:1;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(47,212,190,.2),transparent 40%,rgba(91,141,239,.16),transparent 70%,rgba(123,92,255,.16),transparent);filter:blur(18px);animation:strixSpin 30s linear infinite;z-index:0; }
.about-emblem-glow{ position:absolute;top:50%;left:50%;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(47,212,190,.2),transparent 68%);animation:abPulse 6s ease-in-out infinite;z-index:0; }
.about-emblem{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(140px,15vw,176px);z-index:2;color:#ECEFF4;filter:drop-shadow(0 0 34px rgba(47,212,190,.4)); }

/* Hero chips — shell in components.css; each one's berth and drift are here. */
.about-chip-1{ top:9%;right:11%;animation:abFloat 9s ease-in-out infinite; }
.about-chip-2{ top:26%;left:2%;animation:abFloat2 11s ease-in-out .6s infinite; }
.about-chip-3{ bottom:20%;right:0%;animation:abFloat 10.5s ease-in-out 1.1s infinite; }
.about-chip-4{ bottom:8%;left:14%;animation:abFloat2 8.5s ease-in-out .3s infinite; }
.about-chip-5{ top:52%;left:-3%;animation:abFloat 12s ease-in-out .9s infinite; }

/* --- Statement --- */
.about-statement{ border-block:1px solid rgba(255,255,255,.07);background:#0A0C10;padding:clamp(3.5rem,8vh,6rem) 0;position:relative;overflow:hidden; }
.about-statement-glow{ top:50%;right:-6%;width:38vw;height:38vw;max-width:480px;max-height:480px;transform:translateY(-50%);background:radial-gradient(circle,var(--blue),transparent 66%);opacity:.08;filter:blur(28px); }
.about-statement-container{ max-width:1100px;position:relative; }
.about-statement-text{ margin:0;font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.3;letter-spacing:-.015em;font-weight:600;color:#ECEFF4;text-wrap:pretty; }

/* --- Story --- */
.about-story{ padding:clamp(5rem,12vh,8.5rem) 0;position:relative; }
.about-container{ max-width:1300px; }
.about-split{ display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4.5rem);align-items:start; }
/* .about-story-sticky turns sticky with the split at 64em — see the breakpoint
   block. Stacked in one column it would float the heading over its own text. */
.about-story-title{ margin:0;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.08;letter-spacing:-.02em;font-weight:700; }
.about-title-muted{ color:#7C8494;font-weight:300; }
.about-story-lead{ margin:0;font-size:clamp(1.12rem,1.6vw,1.4rem);line-height:1.75;color:#C3C9D4; }
.about-story-text{ margin:1.5rem 0 0;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.75;color:#9BA3B4; }
.about-chip-row{ display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem; }
.about-chip{ display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:.5rem 1rem;font-size:.98rem;color:#C3C9D4; }

/* --- Values --- */
.about-values{ padding:clamp(4.5rem,10vh,7.5rem) 0;background:#0A0C10;border-block:1px solid rgba(255,255,255,.06); }
.about-values-head{ max-width:62ch;margin-bottom:clamp(2.5rem,5vw,3.5rem); }
.about-values-title{ margin:0;font-size:clamp(2rem,4.2vw,3.3rem);line-height:1.08;letter-spacing:-.02em;font-weight:700; }
.about-values-lead{ margin:1.3rem 0 0;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.7;color:#9BA3B4; }
.about-values-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:1.1rem; }
/* Each value carries its own three colours; they ride as custom properties on
   the tile rather than a full inline style="" (shell lives in components.css). */
.about-values-grid .val-ico{ background:var(--ico-bg);border-color:var(--ico-border); }
.about-value-title{ margin:.3rem 0 0;font-size:1.24rem;font-weight:600; }
.about-value-text{ margin:0;font-size:1.02rem;line-height:1.6;color:#8A93A6; }

/* --- CTA --- */
.about-cta{ position:relative;padding:clamp(5rem,12vh,8rem) 0;overflow:hidden; }
.about-cta-glow{ bottom:-30%;right:15%;width:48vw;height:48vw;max-width:640px;max-height:640px;background:radial-gradient(circle,var(--accent),transparent 62%);opacity:.12;filter:blur(30px); }
.about-cta-container{ max-width:900px;position:relative;text-align:center; }
.about-cta-title{ margin:0 auto;max-width:18ch;font-size:clamp(2.2rem,5.4vw,4.2rem);line-height:1.06;letter-spacing:-.02em;font-weight:800; }
.about-cta-lead{ margin:1.6rem auto 0;max-width:46ch;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.65;color:#9BA3B4; }
.about-cta-row{ display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;margin-top:2.2rem; }

/* --- Breakpoints — one block per breakpoint, ascending --- */
@media (min-width: 64em){
  /* Hero */
  .about-hero-grid{ grid-template-columns:1.08fr .92fr; }
  .about-visual{ display:block; }
  /* Story */
  .about-split{ grid-template-columns:.82fr 1.18fr; }
  .about-story-sticky{ position:sticky;top:110px; }
}