/* ════════════════════════════════════════════════════════════════════════
   About — immersive "film" beats (Views/about.php, content/about-beats.php).
   Loaded only on /company/about (page-scoped stylesheet). Everything is scoped
   under .about-* / html.is-about so none of these generic ideas touch the rest
   of the site. Tokens come from tokens.css; buttons/cue reuse app.css. Root
   scroll-snap (mandatory) is the same mechanism the homepage film uses — it is
   switched on app-wide by initScrollSnap() on first interaction (.snap-on).
   ════════════════════════════════════════════════════════════════════════ */

html.is-about.snap-on{scroll-snap-type:y mandatory;}
@media (max-height:680px){ html.is-about.snap-on{scroll-snap-type:y proximity;} }
html.is-about .site-footer{scroll-snap-align:start;}

.about-beat{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding-block:var(--s-9);overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;}
.about-bg{position:absolute;inset:0;z-index:0;}
.about-bg--img{background-size:cover;background-position:center;background-color:var(--ink-900);}
.about-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 18% 100%, rgba(0,0,0,.55), transparent 55%),
             linear-gradient(90deg, rgba(10,11,13,.86) 0%, rgba(10,11,13,.5) 42%, rgba(10,11,13,.15) 100%);}
.about-grain{position:absolute;inset:0;z-index:1;opacity:.06;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}

.about-content{position:relative;z-index:2;}
.about-content > *{max-width:54ch;}
.about-eyebrow{font-family:var(--font-mono);font-size:var(--t-eyebrow);letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin:0 0 var(--s-4);}
.about-h1{font:600 var(--t-display-xl)/1.03 var(--font-display);letter-spacing:-.02em;margin:0 0 var(--s-4);color:var(--on-ink-hi);max-width:16ch;}
.about-h2{font:600 var(--t-h1)/1.05 var(--font-display);letter-spacing:-.02em;margin:0 0 var(--s-4);color:var(--on-ink-hi);max-width:20ch;}
.about-sub{font-size:var(--t-body-lg);line-height:1.5;color:var(--on-ink-mid);margin:0;max-width:46ch;}
.about-body{font-size:var(--t-body);line-height:1.6;color:var(--on-ink-mid);margin:0;}

.about-eco{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s-6);max-width:62ch;}
.about-eco span{border:var(--b-hairline) solid var(--ink-700);border-radius:var(--r-sm);padding:8px 12px;font-size:.86rem;
  color:var(--on-ink-hi);display:inline-flex;gap:8px;align-items:baseline;background:rgba(18,21,25,.5);}
.about-eco span em{font-family:var(--font-mono);font-style:normal;font-size:10px;letter-spacing:.06em;color:var(--accent);}

.about-ctas{margin-top:var(--s-7);}
.about-credo{margin-top:var(--s-6);font-size:var(--t-caption);color:var(--on-ink-mid);line-height:1.6;max-width:52ch;}
.about-cue{z-index:3;}

/* Progress rail — fixed, right side; real in-page anchors (work without JS). */
.about-rail{position:fixed;right:clamp(10px,2.4vw,30px);top:50%;transform:translateY(-50%);z-index:var(--z-sticky);
  display:flex;flex-direction:column;align-items:center;}
.about-rail-line{position:absolute;top:6px;bottom:6px;width:1px;background:var(--ink-700);}
.about-rail-fill{position:absolute;top:6px;width:1px;height:0;background:var(--accent);box-shadow:0 0 8px var(--accent);
  transition:height var(--dur-slow) var(--ease-standard),background var(--dur-slow) var(--ease-standard);}
.about-dot{position:relative;width:26px;height:30px;display:flex;align-items:center;justify-content:center;text-decoration:none;}
.about-dot i{width:7px;height:7px;border-radius:50%;background:var(--ink-600);border:1px solid var(--ink-700);
  transition:transform var(--dur) var(--ease-standard),background var(--dur) var(--ease-standard),border-color var(--dur) var(--ease-standard),box-shadow var(--dur) var(--ease-standard);}
.about-dot.is-current i{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px var(--accent);transform:scale(1.25);}
.about-dot-label{position:absolute;right:32px;white-space:nowrap;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-ink-mid);opacity:0;transform:translateX(6px);
  transition:opacity var(--dur) var(--ease-standard),transform var(--dur) var(--ease-standard);pointer-events:none;}
.about-dot:hover .about-dot-label,.about-dot:focus-visible .about-dot-label,.about-dot.is-current .about-dot-label{opacity:1;transform:none;}

/* Reveal: self-contained (no dependency on the global [data-reveal] system).
   Content lifts in when its beat becomes active; the first beat ships active so
   it paints immediately. With no JS the html.js gate never applies, so all
   content is simply visible. */
html.js .about-content{opacity:0;transform:translateY(var(--reveal-y));
  transition:opacity var(--dur-slow) var(--ease-cine),transform var(--dur-slow) var(--ease-cine);}
html.js .about-beat.is-active .about-content{opacity:1;transform:none;}

@media (max-width:760px){
  .about-rail{right:10px;}
  .about-dot-label{display:none;}
  /* Reserve a gutter so wrapped prose never runs under the fixed rail. */
  .about-content{padding-right:clamp(40px,10vw,48px);}
  .about-content > *{max-width:none;}
}
@media (prefers-reduced-motion:reduce){
  html.is-about{scroll-snap-type:none;}
  .about-content{opacity:1!important;transform:none!important;}
  .about-rail-fill{transition:none;}
}
html.no-motion.is-about{scroll-snap-type:none;}
html.no-motion.is-about .about-content{opacity:1;transform:none;}