/* ==== About v3 (2026-10-25): cinematic scrolling story. PROTOTYPE, local only; never deployed ====
   Loaded only by /about/ (layouts/about.html). Builds on sub.css tokens, .sp-label, .sp-badge, .btn and the footer.
   Patterns reused from the approved home prototypes: [data-reveal] fade-and-rise with --stagger (home style.css),
   .rule-orn diamond ornament and centred close band (home .close), Bodoni intro statement + 56px gold rule (home .intro),
   gold Bodoni numerals with a hairline (home .area-idx), panel cards with the gold edge (subpage blocks).
   Classes only, no inline styles. Motion = opacity / transform / stroke-dashoffset / filter, all out of layout (CLS 0). */
:root{--t-reveal:1.1s;--stagger:.11s;--fs-d2:clamp(36px,4.2vw,64px)}

/* ---- scroll reveals (home pattern). Armed by sub-head.js (html.rv-armed) unless reduced motion; no JS = shown ---- */
[data-d="0"]{--d:0}[data-d="1"]{--d:1}[data-d="2"]{--d:2}[data-d="3"]{--d:3}[data-d="4"]{--d:4}
.rv-armed [data-reveal]{opacity:0;transform:translate3d(0,18px,0);
  transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out);transition-delay:calc(var(--d,0) * var(--stagger))}
.rv-armed [data-reveal].in{opacity:1;transform:none}

.ab-wrap{width:100%;max-width:calc(var(--maxw) + 2 * var(--pad));margin:0 auto;padding:0 var(--pad)}
.rule-orn{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto}
.rule-orn::before,.rule-orn::after{content:"";width:64px;height:1px;background:linear-gradient(90deg,transparent,var(--hair-strong))}
.rule-orn::after{background:linear-gradient(90deg,var(--hair-strong),transparent)}
.rule-orn i{width:5px;height:5px;transform:rotate(45deg);border:1px solid var(--gold)}

/* ---- hero: full viewport, the eagle large, headline + badge + intro centred under it ---- */
.ab-hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--nav-h,76px) + clamp(8px,2vh,24px)) var(--pad) clamp(72px,10vh,112px);text-align:center;overflow:hidden}
.ab-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(48% 42% at 50% 36%,rgba(198,165,104,.085),transparent 72%),radial-gradient(90% 70% at 50% 110%,rgba(5,9,17,.6),transparent 70%)}
.ab-hero-in{position:relative;width:100%;max-width:var(--maxw);display:flex;flex-direction:column;align-items:center}
/* width is also capped by viewport height so the headline, badge and intro always sit inside the first view */
.ab-eagle{margin:0 0 clamp(12px,2.6vh,36px);width:min(960px,100%,calc((100vh - 480px) * 2.073));aspect-ratio:852/411}
.ab-eagle .eg{display:block;width:100%;height:100%;overflow:visible}
.ab-label{justify-content:center;margin-bottom:var(--s5)}
.ab-label::before{content:"";width:48px;height:1px;background:var(--gold);flex:none}
.ab-h{font-family:var(--disp);font-weight:400;font-size:clamp(44px,5.2vw,84px);line-height:1.02;letter-spacing:-.015em;margin:0 0 var(--s5);color:var(--ink);text-wrap:balance}
.ab-intro{margin:0 0 var(--s6);font-family:var(--disp);font-size:clamp(20px,1.75vw,26px);line-height:1.4;color:var(--ink-2);text-wrap:balance}
/* credential unit: the badge and the Marine line read as one quiet line under the subheadline */
.ab-cred{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 22px}
.ab-badge{margin:0}
.ab-marine{margin:0;font-family:var(--disp);font-size:17px;line-height:1.45;letter-spacing:.005em;color:rgba(243,238,228,.62)}
/* scroll cue: one gold hairline with a travelling glint */
.ab-cue{position:absolute;left:50%;bottom:clamp(20px,3.4vh,36px);width:1px;height:44px;margin-left:-.5px;overflow:hidden;
  background:linear-gradient(180deg,rgba(198,165,104,0),rgba(198,165,104,.45))}
.ab-cue span{position:absolute;left:0;top:0;width:1px;height:14px;background:#f1dcaa;transform:translate3d(0,-14px,0);animation:ab-cue 2.4s cubic-bezier(.65,0,.35,1) 2.6s infinite}
@keyframes ab-cue{0%{transform:translate3d(0,-14px,0)}70%,100%{transform:translate3d(0,44px,0)}}
@media (max-height:760px){.ab-cue{display:none}}

/* ---- eagle: Etch-A-Sketch trace with a lead spark (eagle-trace.js drives it; see that file) ----
   Default = finished drawing, no spark (no JS / reduced motion). sub-head.js adds html.eg-armed: the strokes wait hidden
   until the single tip reaches them. .eg-tracing shows the spark; .eg-done settles the warm glow. */
.eg-armed .ab-eagle .eg-m{visibility:hidden}
.ab-eagle .eg-glow{filter:drop-shadow(0 0 1.6px rgba(232,190,110,.42)) drop-shadow(0 0 9px rgba(222,168,80,.14))}   /* settled warm glow */
.eg-armed .ab-eagle .eg-glow{filter:none}
.eg-armed .ab-eagle.eg-done .eg-glow{filter:drop-shadow(0 0 1.6px rgba(232,190,110,.42)) drop-shadow(0 0 9px rgba(222,168,80,.14));transition:filter 1.4s var(--ease-out)}
.eg-spark{display:none;opacity:0;pointer-events:none}
.ab-eagle.eg-tracing .eg-spark{display:inline}
.ab-eagle.eg-out .eg-spark{transition:opacity .7s var(--ease-out)}
.eg-core{fill:#fffaf0}
.eg-tl{fill:#f4d89c}
.eg-tl:nth-child(1){opacity:.55}.eg-tl:nth-child(2){opacity:.42}.eg-tl:nth-child(3){opacity:.31}.eg-tl:nth-child(4){opacity:.21}.eg-tl:nth-child(5){opacity:.13}.eg-tl:nth-child(6){opacity:.07}
.eg-em{fill:#f6dca3;opacity:0}

/* ---- sections: one vertical rhythm ---- */
.ab-sec{padding:clamp(96px,14vh,168px) 0}
.ab-sec+.ab-sec{border-top:1px solid var(--hair-faint)}
.ab-sec .sp-label{margin-bottom:clamp(32px,5vh,56px)}

/* Background: the section label, then the three beats (the Marine line now lives in the hero) */
.ab-beats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,56px)}
.ab-beat{padding-top:var(--s5);border-top:1px solid var(--hair)}
.ab-idx{display:flex;align-items:center;gap:16px;margin:0 0 var(--s5);font-family:var(--disp);font-size:28px;line-height:1;color:var(--gold)}
.ab-idx::after{content:"";width:40px;height:1px;background:var(--gold-d)}
.ab-beat p{margin:0;max-width:34ch;font-size:17px;line-height:1.75;color:var(--ink-2);text-wrap:pretty}

/* advisor line: a centred pull quote between hairlines, on a slightly lifted band */
.ab-quote{padding:clamp(96px,14vh,160px) 0;text-align:center;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  background:radial-gradient(60% 80% at 50% 50%,rgba(198,165,104,.05),transparent 70%),linear-gradient(180deg,var(--bg),#0c1626 50%,var(--bg))}
.ab-quote .rule-orn{margin-bottom:clamp(36px,5vh,56px)}
.ab-pull{margin:0 auto}
.ab-pull p{margin:0 auto;max-width:19em;font-family:var(--disp);font-weight:400;font-size:clamp(30px,3.3vw,52px);line-height:1.18;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}

/* How we work: two principles side by side */
.ab-principles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,5vw,96px)}
.ab-principle{padding-top:var(--s5);border-top:1px solid var(--hair)}
.ab-principle p{margin:0;max-width:22em;font-family:var(--disp);font-size:clamp(24px,2.1vw,32px);line-height:1.3;color:var(--ink);text-wrap:balance}
/* v9.1 (owner): bold lead phrase + regular text for an even read. Same words, same size; the rest drops to the body ivory */
.ab-principle p{color:var(--ink-2)}
.ab-principle .ab-lead{font-weight:600;color:var(--ink)}

/* Areas: three cards with the area hairline visuals at a meaningful size */
.ab-area-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,28px)}
.ab-area{position:relative;display:flex;flex-direction:column;padding:clamp(24px,2.4vw,36px) clamp(24px,2.4vw,36px) clamp(28px,2.6vw,40px);
  background:linear-gradient(180deg,rgba(17,31,53,.55),rgba(13,24,41,.3));border:1px solid var(--hair-faint);border-top-color:var(--hair)}
.ab-area::before{content:"";position:absolute;top:-1px;left:-1px;width:48px;height:1px;background:var(--gold)}
.ab-area-vis{display:block;margin:0 0 var(--s6);aspect-ratio:5/3;border-bottom:1px solid var(--hair-faint)}
.ab-area-vis img{display:block;width:100%;height:100%}
.ab-area-h{margin:0 0 var(--s4);font-family:var(--disp);font-weight:400;font-size:clamp(26px,2.1vw,32px);line-height:1.15;color:var(--ink)}
.ab-area-list{list-style:none;margin:auto 0 0;padding:0;border-top:1px solid var(--hair)}
.ab-area-list li{border-bottom:1px solid var(--hair-faint)}
.ab-area-a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0;text-decoration:none}
.ab-area-t{font-size:15px;line-height:1.45;color:var(--gold);transition:color var(--t-fast) var(--ease-out)}
.ab-area-a .arr{flex:none;font-size:13px;color:var(--muted);transition:transform var(--t-med) var(--ease-out),color var(--t-fast)}
.ab-area-a:hover .ab-area-t,.ab-area-a:focus-visible .ab-area-t{color:#e6cf9c}
.ab-area-a:hover .arr,.ab-area-a:focus-visible .arr{transform:translateX(3px);color:var(--gold)}
.ab-area-a:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

/* closing band (home .close): ornament, Request Service, the small print */
.ab-close{padding:clamp(112px,16vh,176px) 0 clamp(72px,10vh,112px);text-align:center;border-top:1px solid var(--hair)}
.ab-close .rule-orn{margin-bottom:clamp(40px,6vh,64px)}
.ab-small{margin:clamp(40px,6vh,56px) auto 0;max-width:46ch;font-size:12.5px;line-height:1.7;letter-spacing:.02em;color:var(--muted)}

@media (max-width:1023px){
  .ab-beats{grid-template-columns:1fr;gap:var(--s6)}
  .ab-area-grid{grid-template-columns:1fr;max-width:560px}
}
@media (max-width:760px){
  .ab-hero{min-height:auto;padding:calc(var(--nav-h,64px) + 40px) var(--pad) var(--s8)}
  .ab-hero::before{background:radial-gradient(70% 34% at 50% 24%,rgba(198,165,104,.09),transparent 72%)}
  .ab-eagle{width:calc(100% + 24px);margin:0 -12px var(--s6)}
  .ab-h{font-size:clamp(38px,11vw,52px)}
  .ab-cred{flex-direction:column;gap:14px}
  .ab-marine{font-size:16px;text-wrap:balance}
  .ab-badge{font-size:10.5px;letter-spacing:.22em;padding:10px 14px}
  .ab-cue{display:none}
  .ab-sec{padding:var(--s9) 0}
    .ab-beat p{font-size:16px}
  .ab-quote{padding:var(--s9) 0}
  .ab-pull p{font-size:clamp(26px,7.2vw,32px)}
  .ab-principles{grid-template-columns:1fr;gap:var(--s6)}
  .ab-principle p{font-size:24px}
  .ab-close{padding:var(--s9) 0 var(--s8)}
  .ab-close .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .ab-cue span{animation:none;transform:none}
  .ab-area-t,.ab-area-a .arr{transition:none}
}