/* the first section under a banner opens at the banner's own bottom inset (Bryan, 09/28) */
section.phead + section.sec{padding-top:clamp(40px,4vw,60px)}

/* ---------- subpage hero banner (sections15.py), modeled on tools/pages15.py's .phead / .phead--photo ---------- */
.phead{position:relative;background:var(--slate);color:var(--paper);padding:clamp(72px,8vw,120px) 0 clamp(56px,6vw,88px);margin-top:var(--navh)}
/* banner titles matched to tools/pages15.py's h1 size exactly (Bryan, 09/25): the default h1 rule (clamp
   42/5.4vw/84px) reads too large stacked over a photo banner at this height. */
.phead h1{margin:0;font-size:clamp(34px,3.6vw,54px)}
/* inner pages: nav solid from the start, like tools/pages15.py (the homepage's transparent state washes out over the banner) */
.nav,.nav.solid{background:rgba(21,24,26,.96);border-bottom-color:var(--line-dark-soft)}
.nav::before,.nav.solid::before{opacity:0}
.phead .deck{margin-top:clamp(18px,2vw,28px);max-width:64ch;color:rgba(245,243,237,.86)}
/* ---------- subpage banner, Option A (dark ombre), 09/28: the photo runs full bleed and is graded toward Argon
   Navy; a flat Navy field holds the headline column and ramps out into the photo on an eased curve. The type
   sits on the flat part of the field, never on the ramp, so contrast does not depend on the photo. Each page
   sets --pos (desktop crop), --pos-m (390 crop), --grade (how far the photo is pulled toward Navy), --origin (the subject the drift pushes in on, so nothing slides out of frame) and optionally --dx/--dy. ---------- */
.phead--photo{overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(340px,27vw,420px);padding-top:clamp(64px,6vw,96px);padding-bottom:clamp(44px,4vw,60px);background:#102A56}
.phead--photo .wrap{position:relative;z-index:2;width:100%}
.phead--photo h1{max-width:11.5em}
.phead--photo .deck{max-width:36ch;color:#F6F4EF}
.phead--photo::before{content:"";position:absolute;inset:-5% -4%;z-index:0;background-image:linear-gradient(rgba(16,42,86,var(--grade,.3)),rgba(16,42,86,var(--grade,.3))),var(--photo);background-blend-mode:multiply,normal;background-size:cover;background-position:var(--pos,center 55%);background-repeat:no-repeat;transform-origin:var(--origin,70% 50%)}
.phead--photo::after{content:"";position:absolute;inset:0;z-index:1;background-image:linear-gradient(90deg,#102A56 0%,#102A56 40%,rgba(16,42,86,.93) 45%,rgba(16,42,86,.78) 50%,rgba(16,42,86,.55) 56%,rgba(16,42,86,.32) 62%,rgba(16,42,86,.14) 68%,rgba(16,42,86,.04) 73%,rgba(16,42,86,0) 78%)}
@keyframes photo-drift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.07) translate3d(var(--dx,0%),var(--dy,0%),0)}}
.js .phead--photo::before{animation:photo-drift 42s ease-in-out infinite alternate}
/* scroll parallax: the photo trails the page; --sy is set by the script below, and only once the banner's top edge is under the fixed nav, so the uncovered strip stays hidden */
.js .phead--photo::before{translate:0 var(--sy,0px)}
@media(prefers-reduced-motion:reduce){.js .phead--photo::before{animation:none;transform:none;translate:none}}
@media(max-width:1000px){.phead--photo .deck{max-width:30ch}.phead--photo::after{background-image:linear-gradient(90deg,#102A56 0%,#102A56 54%,rgba(16,42,86,.93) 59%,rgba(16,42,86,.78) 64%,rgba(16,42,86,.55) 70%,rgba(16,42,86,.32) 76%,rgba(16,42,86,.14) 82%,rgba(16,42,86,.04) 87%,rgba(16,42,86,0) 92%)}}
@media(max-width:640px){
  .phead--photo{min-height:0;display:block;padding-top:54vw;padding-bottom:40px}
  .phead--photo h1,.phead--photo .deck{max-width:none}
  .phead--photo::before{top:-12px;left:-4%;right:-4%;bottom:auto;height:calc(64vw + 12px);background-position:var(--pos-m,var(--pos,center))}
  .phead--photo::after{background-image:linear-gradient(180deg,rgba(16,42,86,0) 0,rgba(16,42,86,0) 28vw,rgba(16,42,86,.3) 35vw,rgba(16,42,86,.62) 42vw,rgba(16,42,86,.87) 48vw,#102A56 52vw,#102A56 100%)}
}

/* ---------- how-we-deliver.html: the seven stages as body copy, not cards and not the slider ---------- */
.sec.stages-section{border-top:1px solid var(--line);padding-top:clamp(48px,5.5vw,72px)}
.sec.stages-section h2{margin-bottom:clamp(24px,2.5vw,32px)}
.stagelist{list-style:none;margin-top:clamp(40px,4.5vw,64px)}
.stagelist li{padding:clamp(28px,3vw,40px) 0;border-bottom:1px solid var(--line-soft)}
.stagelist li:first-child{border-top:1px solid var(--line-soft);padding-top:clamp(28px,3vw,40px)}
.stagelist h3{display:flex;align-items:baseline;gap:16px;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.006em;margin-bottom:10px}
.stagelist-n{flex:0 0 auto;font-stretch:76%;font-weight:600;font-size:clamp(26px,2.3vw,32px);color:var(--amber);line-height:1}
.stagelist p{max-width:70ch;font-size:17px;line-height:1.6;color:var(--ink-soft)}

/* ---------- capabilities.html: h2 spacing for "What sets Argon apart" ---------- */
.sec h2{margin-bottom:clamp(22px,2.4vw,34px)}

/* ---------- capabilities.html: placeholder sections for detail we still need from Kim ---------- */
.cap-placeholder h2{margin-bottom:clamp(14px,1.6vw,20px);font-size:18px;font-weight:600;color:var(--slate)}
.cap-placeholder p{max-width:70ch;color:var(--ink-soft)}
.cap-placeholder ul{margin-top:12px;margin-left:20px;max-width:70ch;color:var(--ink-soft);line-height:1.6}
.cap-placeholder ul li{margin-bottom:8px}

/* ---------- capabilities.html: tighter spacing between differentiators and panels ---------- */
.sec.cap-panels{padding-top:clamp(24px,2.5vw,32px)}
.sec.cap-panels + .sec.cap-panels{margin-top:24px}

/* ============ how-we-deliver.html, 09/28 layout v2 (sections15.py) ============ */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 1. hero: Navy on a very faint blueprint grid (the stage band's grid, about a third of its
   strength), the one H1 and intro left, the reel poster right and top-aligned. No photo, no ombre. ---------- */
.hwd-hero + #queue{padding-top:clamp(40px,4vw,60px)}
.hwd-hero{position:relative;margin-top:var(--navh);background-color:#102A56;color:#F6F4EF;padding:clamp(48px,5vw,80px) 0 clamp(72px,7vw,112px);background-image:linear-gradient(rgba(199,204,209,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(199,204,209,.04) 1px,transparent 1px),linear-gradient(rgba(199,204,209,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(199,204,209,.018) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:center -1px}
.hwd-hero-grid{display:grid;grid-template-columns:minmax(0,41fr) minmax(0,59fr);grid-template-rows:auto auto 1fr;grid-template-areas:"h v" "d v" ". v";column-gap:clamp(40px,4.4vw,76px)}
.hwd-hero h1{grid-area:h;margin:0;font-size:clamp(34px,3.6vw,54px);color:#F6F4EF;text-shadow:none;max-width:none}
.hwd-hero .deck{grid-area:d;margin:clamp(20px,2vw,30px) 0 0;max-width:42ch;font-size:clamp(18px,1.36vw,20px);line-height:1.58;color:#F6F4EF}
.reel{grid-area:v;min-width:0;align-self:start}
.reel-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#1A1D21;box-shadow:0 34px 70px -24px rgba(8,14,28,.75);outline:1px solid rgba(199,204,209,.22);outline-offset:-1px}
.reel-still{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;object-fit:cover;object-position:50% 46%;transform-origin:58% 44%;filter:saturate(.72) contrast(1.06) brightness(.82)}
.reel-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(20deg,rgba(16,42,86,.72) 0%,rgba(16,42,86,.28) 34%,rgba(16,42,86,0) 58%)}
@keyframes reel-drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-2.2%,-1.4%,0)}}
.js .reel-still{animation:reel-drift 22s ease-in-out infinite alternate}
.reel.is-playing .reel-still,.reel.is-pending .reel-still{animation-play-state:paused}
.reel-video{position:absolute;inset:0;width:100%;height:100%;background:#1A1D21;z-index:3}
.reel-play{position:absolute;left:0;bottom:0;z-index:2;width:clamp(72px,7.4vw,112px);height:clamp(72px,7.4vw,112px);border:0;background:#007BFF;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background-color .2s ease}
.reel-play-ico{width:100%}
.reel-play-ico svg{display:block;width:38%;min-width:26px;margin:0 auto;fill:currentColor;transform:translateX(6%)}
.reel-play:hover,.reel-play:focus-visible{background:#0052AD}
.reel-play:focus-visible{outline:3px solid #F6F4EF;outline-offset:-6px}
.reel-label{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;min-height:58px;padding:0 24px;border:1.5px solid rgba(246,244,239,.9);color:#fff;font-weight:700;font-size:16.5px;letter-spacing:.02em;white-space:nowrap;background:rgba(16,42,86,.28);pointer-events:none;transition:border-color .2s ease,background-color .2s ease}
.reel-frame{cursor:pointer}
.reel-frame:hover .reel-label{border-color:#007BFF;background:rgba(0,123,255,.55)}
.reel-len{position:absolute;z-index:2;left:clamp(72px,7.4vw,112px);bottom:0;height:40px;padding:0 16px;display:flex;align-items:center;background:rgba(26,29,33,.9);color:#F6F4EF;font-weight:600;font-size:16px;letter-spacing:.02em;pointer-events:none}
.reel.is-playing .reel-play,.reel.is-playing .reel-len,.reel.is-playing .reel-frame::after,.reel.is-pending .reel-play,.reel.is-pending .reel-len{display:none}
.reel-note{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:clamp(22px,3vw,44px);background:linear-gradient(0deg,rgba(16,42,86,.97) 0%,rgba(16,42,86,.9) 58%,rgba(16,42,86,.55) 100%);color:#F6F4EF;font-size:17px;line-height:1.5}
.reel-note[hidden]{display:none}
.reel-note:focus{outline:none}
.reel-note-t{font-weight:700;font-stretch:106%;text-transform:uppercase;font-size:clamp(20px,1.9vw,28px);line-height:1.08;letter-spacing:-.004em;color:#fff}
.reel-note p{max-width:46ch}
.reel-note-x{align-self:flex-start;margin-top:8px;background:none;border:0;border-bottom:1.5px solid rgba(246,244,239,.6);padding:4px 0;color:#F6F4EF;font:inherit;font-weight:600;font-size:16px;cursor:pointer}
.reel-note-x:hover,.reel-note-x:focus-visible{border-bottom-color:#007BFF;outline:none}
@media(max-width:1240px){.hwd-hero-grid{grid-template-columns:minmax(0,44fr) minmax(0,56fr)}}
@media(max-width:1000px){
  .hwd-hero-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"h" "d" "v"}
  .hwd-hero .deck{max-width:60ch}
  .reel{margin-top:clamp(28px,4vw,40px)}
}
@media(max-width:640px){
  .reel{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad))}
  .reel-len{height:34px;padding:0 12px;font-size:15px}
}
@media(prefers-reduced-motion:reduce){.js .reel-still{animation:none;transform:scale(1.04)}}

/* ---------- 2. the delivery-window chart on its own band, larger; bars stagger in (content untouched) ---------- */
#queue{background:#F6F4EF;border-top:0;padding:clamp(96px,9.5vw,148px) 0 clamp(88px,8.5vw,132px)}
#queue .head{display:block}
#queue .head h2{grid-column:1/-1;margin:0;font-size:clamp(26px,2.75vw,40px);line-height:1.06}
#queue .head .deck{margin:clamp(20px,2vw,28px) 0 0;max-width:60ch;font-size:clamp(18px,1.36vw,20px);line-height:1.58;color:#43464a}
#queue .timeline{--tlpad:270px;margin-top:clamp(60px,6.5vw,104px)}
#queue .tl-axis{height:36px}
#queue .tl-axis b{font-size:15px;bottom:9px;color:#1A1D21}
#queue .tl-now{top:-38px;bottom:-258px;width:2px;background:#102A56}
#queue .tl-now i{font-size:16px;color:#102A56}
#queue .tl-lane{min-height:128px}
#queue .tl-lane .lbl b{font-size:21px;font-weight:700;line-height:1.2}
#queue .tl-lane .lbl span{font-size:16px;color:#43464a;margin-top:6px}
#queue .tl-track{height:128px;background:linear-gradient(90deg,transparent calc(8.2% - .5px),rgba(22,23,25,.12) calc(8.2% - .5px),rgba(22,23,25,.12) calc(8.2% + .5px),transparent calc(8.2% + .5px),transparent calc(26.5% - .5px),rgba(22,23,25,.12) calc(26.5% - .5px),rgba(22,23,25,.12) calc(26.5% + .5px),transparent calc(26.5% + .5px),transparent calc(44.8% - .5px),rgba(22,23,25,.12) calc(44.8% - .5px),rgba(22,23,25,.12) calc(44.8% + .5px),transparent calc(44.8% + .5px),transparent calc(63.1% - .5px),rgba(22,23,25,.12) calc(63.1% - .5px),rgba(22,23,25,.12) calc(63.1% + .5px),transparent calc(63.1% + .5px),transparent calc(81.4% - .5px),rgba(22,23,25,.12) calc(81.4% - .5px),rgba(22,23,25,.12) calc(81.4% + .5px),transparent calc(81.4% + .5px))}
#queue .tl-bar{top:34px;height:60px;font-size:17px;padding:0 20px}
#queue .tl-argon{font-size:21px}
#queue .tl-oem{background:#1A1D21}
#queue .tl-oem::before{left:-72px;width:72px;background:linear-gradient(to right,rgba(26,29,33,0),#1A1D21)}
#queue .tl-foot{font-size:15px;color:#43464a;margin-top:20px}
.js #queue .tl-now{transform-origin:50% 0;transform:scaleY(0);transition:transform .9s cubic-bezier(.3,.7,.2,1) .15s}
.js #queue .timeline.drawn .tl-now{transform:none}
.js #queue .tl-oem{transition-delay:.85s,.85s,1.5s}
/* the OEM bar's lead-in fade is a ::before hung OUTSIDE the bar (left:-72px), so it painted while the bar was
   still at width 0; it now stays hidden until the chart is drawn and fades in as the bar starts to grow */
.js #queue .tl-oem::before{opacity:0;transition:opacity .5s ease .85s}
.js #queue .timeline.drawn .tl-oem::before{opacity:1}
.js #queue .tl-bar{padding-left:0;padding-right:0}
.js #queue .timeline.drawn .tl-bar{padding-left:20px;padding-right:20px}
@media(prefers-reduced-motion:reduce){.js #queue .tl-now{transform:none;transition:none}.js #queue .tl-bar{padding-left:20px;padding-right:20px}.js #queue .tl-oem::before{opacity:1;transition:none}}
@media(max-width:1000px){#queue .head{grid-template-columns:minmax(0,1fr)}#queue .head .deck{grid-column:1}#queue .timeline{--tlpad:210px}}
@media(max-width:820px){
  #queue .timeline{--tlpad:0px}
  #queue .tl-now{bottom:0}
  #queue .tl-lane{min-height:0}
  #queue .tl-track{height:48px;background:none}
  #queue .tl-bar{top:0;height:48px;font-size:14px}
  #queue .tl-argon{font-size:15px}
  #queue .tl-lane .lbl b{font-size:18px}
  #queue .tl-lane .lbl span{font-size:15px}
  .js #queue .timeline.drawn .tl-bar,.js #queue .tl-bar,#queue .tl-bar{padding-left:0;padding-right:0}
}

/* ---------- 3. the seven stages: Graphite band, section H2, phase rail beside the cards, 3 / 2 / 2 ---------- */
.stg-band{position:relative;background-color:#1A1D21;color:#F6F4EF;padding:clamp(96px,9.5vw,148px) 0 clamp(104px,10vw,160px)}
.stg-band-h{color:#fff;max-width:none;margin:0 0 clamp(48px,5vw,80px);font-size:clamp(26px,2.75vw,40px);line-height:1.06}
.phase{display:grid;grid-template-columns:minmax(0,24fr) minmax(0,76fr);column-gap:clamp(28px,3vw,52px)}
.phase + .phase{margin-top:clamp(72px,7vw,112px)}
.phase-rail{position:relative;padding-left:26px}
.phase-rail::before{content:"";position:absolute;left:0;top:6px;bottom:0;border-left:1px solid rgba(199,204,209,.42)}
.phase-rail::after{content:"";position:absolute;left:-7px;width:15px;top:6px;bottom:0;border-top:1px solid rgba(199,204,209,.42);border-bottom:1px solid rgba(199,204,209,.42)}
.phase-h{position:sticky;top:calc(var(--navh) + 40px);margin:0;color:#fff;font-weight:700;font-stretch:100%;text-transform:uppercase;font-size:clamp(22px,2.15vw,31px);line-height:1;letter-spacing:.01em}
.phase-span{position:sticky;top:calc(var(--navh) + 40px + clamp(34px,3vw,44px));margin-top:10px;font-size:17px;font-weight:500;color:rgba(246,244,239,.88)}
.phase-cards{list-style:none;display:grid;gap:clamp(16px,1.5vw,24px);margin:0}
.phase--secure .phase-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.phase--move .phase-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.phase--deliver .phase-cards{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.stg{min-width:0}
.stg article{height:100%;display:flex;flex-direction:column;background:#102A56;border:1px solid rgba(199,204,209,.2);transition:border-color .25s ease}
.stg:hover article,.stg:focus-within article{border-color:rgba(199,204,209,.46)}
.stg-fig{position:relative;overflow:hidden;aspect-ratio:16/10;border-bottom:1px solid rgba(199,204,209,.2)}
.stg-body{flex:1;display:flex;flex-direction:column;padding:clamp(20px,1.8vw,28px) clamp(20px,1.8vw,28px) clamp(22px,2vw,30px)}
.stg-head{display:flex;align-items:flex-start;gap:clamp(12px,1.1vw,18px);margin-bottom:14px}
.stg-n{flex:0 0 auto;font-weight:800;font-stretch:112%;font-size:clamp(64px,5.4vw,92px);line-height:.74;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.4px rgba(199,204,209,.86);paint-order:stroke;transition:color .35s ease,-webkit-text-stroke-color .35s ease}
.stg:hover .stg-n,.stg:focus-within .stg-n{color:#007BFF;-webkit-text-stroke-color:#007BFF}
.stg h4{margin:0;padding-top:2px;color:#fff;font-weight:700;font-size:clamp(20px,1.55vw,24px);line-height:1.18;letter-spacing:-.006em;text-wrap:balance}
.stg-p{font-size:16.5px;line-height:1.6;color:#F6F4EF}
.js .stg-p.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines,4);overflow:hidden}
.stg-foot{margin-top:auto;padding-top:18px;display:flex}
.stg-more{background:none;border:0;padding:4px 0;color:rgba(246,244,239,.9);font:inherit;font-weight:600;font-size:15.5px;cursor:pointer;border-bottom:1px solid rgba(199,204,209,.5)}
.stg-more::after{content:" +"}
.stg-more[aria-expanded="true"]::after{content:" \2212"}
.stg-more:hover,.stg-more:focus-visible{color:#fff;border-bottom-color:#007BFF;outline:none}
@media(max-width:1180px){
  .phase{grid-template-columns:minmax(0,1fr)}
  .phase-rail{padding-left:0;margin-bottom:28px;display:flex;align-items:baseline;gap:22px;overflow:hidden}
  .phase-rail::before,.phase-rail::after{display:none}
  .phase-h,.phase-span{position:static}
  .phase-span{margin:0;white-space:nowrap}
  .phase-span::after{content:"";display:inline-block;vertical-align:middle;width:2000px;margin-left:22px;border-top:1px solid rgba(199,204,209,.42)}
}
@media(max-width:900px){
  .phase--secure .phase-cards,.phase--move .phase-cards,.phase--deliver .phase-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phase--secure .stg:first-child{grid-column:1/-1}
}
@media(max-width:640px){
  .phase--secure .phase-cards,.phase--move .phase-cards,.phase--deliver .phase-cards{grid-template-columns:minmax(0,1fr)}
  .phase-rail{flex-wrap:wrap;gap:6px 18px}
  .stg-p{font-size:16px}
}

/* Layout A: blueprint cards. Graphite band on a faint two-scale blueprint grid; Navy cards; each figure a
   technical line drawing (tools/hwd_drawings.py) in two stroke weights that draws in on entry and shifts to
   Electric Blue on hover. No JS or reduced motion: drawings show finished. */
.stg-band--blueprint{background-image:linear-gradient(rgba(199,204,209,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(199,204,209,.075) 1px,transparent 1px),linear-gradient(rgba(199,204,209,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(199,204,209,.035) 1px,transparent 1px);background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:center -1px}
.stg-band--blueprint .stg-fig{background-image:linear-gradient(rgba(199,204,209,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(199,204,209,.06) 1px,transparent 1px);background-size:20px 20px;background-position:-1px -1px}
.stg-band--blueprint .stg-fig::before{content:"";position:absolute;inset:10px;border:1px solid rgba(199,204,209,.16);pointer-events:none}
.drw{position:absolute;inset:0;width:100%;height:100%;display:block;padding:16px 18px;fill:none;stroke:#F6F4EF;stroke-width:var(--sw,2);stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:6;transition:stroke .35s ease}
.drw .h{stroke:rgba(199,204,209,.8);stroke-width:calc(var(--sw,2) * .55);transition:stroke .35s ease}
.drw .cl{stroke-dasharray:14 3 2 3}
.drw .hid{stroke-dasharray:5 3}
.stg:hover .drw,.stg:focus-within .drw{stroke:#007BFF}
.stg:hover .drw .h,.stg:focus-within .drw .h{stroke:rgba(0,123,255,.85)}
.stg-anim .stg .drw path:not(.cl):not(.hid):not(.ht){stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s cubic-bezier(.45,.05,.25,1) calc(var(--i) * 22ms + 60ms),stroke .35s ease}
.stg-anim .stg.is-drawn .drw path:not(.cl):not(.hid):not(.ht){stroke-dashoffset:0}
.stg-anim .stg .drw .cl,.stg-anim .stg .drw .hid,.stg-anim .stg .drw .ht{opacity:0;transition:opacity .9s ease 1.05s,stroke .35s ease}
.stg-anim .stg.is-drawn .drw .cl,.stg-anim .stg.is-drawn .drw .hid,.stg-anim .stg.is-drawn .drw .ht{opacity:1}

/* ---------- 09/30 r2: the reel opens in a lightbox (native dialog), not inline ---------- */
.reel-dialog{padding:0;border:0;background:transparent;color:#F6F4EF;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh;overflow:hidden}
.reel-dialog[open]{display:flex;align-items:center;justify-content:center}
.reel-dialog::backdrop{background:rgba(10,12,15,.85)}
.reel-lb-frame{position:relative;width:min(92vw,1200px);aspect-ratio:16/9;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.reel-lb-video{display:block;width:100%;height:100%;background:#000;object-fit:contain}
.reel-lb-x{position:absolute;top:14px;right:14px;z-index:5;width:46px;height:46px;display:grid;place-items:center;border:1.5px solid rgba(246,244,239,.7);background:rgba(15,16,17,.7);color:#F6F4EF;cursor:pointer;padding:0;transition:background-color .2s,border-color .2s}
.reel-lb-x:hover,.reel-lb-x:focus-visible{background:#007BFF;border-color:#007BFF;outline:none}
.reel-lb-x:focus-visible{outline:2px solid #F6F4EF;outline-offset:2px}
.reel-lb-x svg{width:18px;height:18px}
html.lb-open,html.lb-open body{overflow:hidden}