/* story3d/film/story.css — the "Managed IT, explained" 3D story (The Hive, 2026-10-18).

   Two modes on one markup (story3d/shell.py):
   - Default: the seven scenes stacked as ordinary sections (copy, a still, the label words). This is
     what no-JS, reduced motion, no WebGL2 and every failure show, so it is designed, not a leftover.
   - Film (.story3d.is-film, set by film/engine.js): one pinned stage, 100svh minus the sticky header,
     a full-bleed canvas, the copy card on the left (a bottom sheet on phones), projected label pills
     with leader lines, the chapter nav and the pause toggle.
   Tokens come from the site (site/assets/site.css): navy and ink carry text, amber and orange are
   shapes, fills and light only (amber pills carry black text). Inter only. */

.story3d{
  --s3d-top:68px;                                   /* sticky header height; the engine measures it */
  --s3d-gut:clamp(24px,4.4vw,64px);                 /* stage gutter on desktop */
  --s3d-card-w:clamp(320px,calc(38vw - 64px),460px);
  --s3d-ease:cubic-bezier(.22,1,.36,1);
  position:relative;background:var(--canvas,#F7F7F7);padding:80px 0 88px;overflow-x:clip;
}
.story3d *,.story3d *::before,.story3d *::after{box-sizing:border-box;}

/* ---------------------------------------------------------------- shared */
.story3d-skip{
  position:absolute;left:16px;top:12px;z-index:40;
  display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;
  background:var(--navy,#1E3A5F);color:#fff;font-size:15px;font-weight:600;text-decoration:none;
  box-shadow:0 10px 24px -10px rgba(30,58,95,.5);
}
.story3d-skip:not(:focus):not(:focus-visible){
  width:1px;height:1px;min-height:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.story3d-skip:focus-visible{outline:2px solid var(--amber,#E4B723);outline-offset:3px;}

.story3d .eyebrow{margin-bottom:16px;}
.story3d-copy h2{font-size:clamp(30px,3.3vw,42px);max-width:18ch;text-wrap:balance;}
.story3d-body{margin-top:18px;font-size:17px;line-height:1.6;color:var(--ink,#2E2E2E);max-width:46ch;}

/* the label words, as a quiet chip list */
.story3d-list{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none;}
.story3d-list li{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:600;line-height:1.3;color:var(--navy,#1E3A5F);
  background:var(--paper,#fff);border:1px solid var(--rule,#E4E4E4);border-radius:999px;padding:7px 13px;
}
.story3d-list .sub{font-weight:500;color:var(--muted,#5E6670);}
.story3d-list .sub::before{content:"\2014\00a0";}
.story3d-steps{counter-reset:s3dstep;}
.story3d-steps li{counter-increment:s3dstep;padding-left:7px;}
.story3d-steps li::before{
  content:counter(s3dstep);display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--navy,#1E3A5F);color:#fff;font-size:11.5px;font-weight:700;
}
.story3d-list + .story3d-list{margin-top:10px;}
.story3d-note{margin-top:10px;font-size:13px;line-height:1.5;color:var(--muted,#5E6670);}

.story3d-actions{align-items:center;}
.cta-dot{
  flex:none;width:14px;height:14px;border-radius:50%;background:var(--amber,#E4B723);
  box-shadow:0 0 0 5px rgba(228,183,35,.22);margin-right:4px;
}

/* ---------------------------------------------------------------- default: stacked fallback */
.story3d-stage,.story3d-chapters,.story3d-pause{display:none;}
.story3d-head{max-width:var(--page,1180px);margin:0 auto 48px;padding:0 32px;}
.story3d-intro{
  display:flex;align-items:center;gap:12px;margin:0;
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--navy,#1E3A5F);
}
.story3d-intro::before{content:"";flex:none;width:22px;height:3px;border-radius:2px;background:var(--amber,#E4B723);}
.story3d-scenes{max-width:var(--page,1180px);margin:0 auto;padding:0 32px;display:grid;gap:88px;}
.story3d-scene{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(32px,5vw,72px);align-items:center;}
.story3d-scene:nth-child(even) .story3d-copy{order:2;}
.story3d-still{
  margin:0;position:relative;aspect-ratio:4/3;border-radius:28px;overflow:hidden;
  background:linear-gradient(160deg,#FFFFFF 0%,#F1F3F6 100%);
  box-shadow:0 1px 2px rgba(30,58,95,.05),0 24px 60px -30px rgba(30,58,95,.28);
}
.story3d-still img{display:block;width:100%;height:100%;object-fit:cover;}
/* until the stills are rendered: a soft hex and the amber drop, quiet and on purpose */
.story3d-ph{position:absolute;inset:0;display:grid;place-items:center;}
.story3d-ph-hex{
  width:46%;aspect-ratio:1.1547;opacity:.9;
  background:linear-gradient(160deg,#FFFFFF,#E9EDF2);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  filter:drop-shadow(0 18px 30px rgba(30,58,95,.16));
}
.story3d-ph-dot{
  position:absolute;width:9%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#F3D46A 0%,#E4B723 45%,#C99A12 100%);
  box-shadow:0 10px 18px -8px rgba(30,58,95,.45);
}

@media (max-width:760px){
  .story3d{padding:56px 0 64px;}
  .story3d-head{padding:0 16px;margin-bottom:28px;}
  .story3d-scenes{padding:0 16px;gap:56px;}
  .story3d-scene{grid-template-columns:minmax(0,1fr);gap:22px;}
  .story3d-scene:nth-child(even) .story3d-copy{order:0;}
  .story3d-copy h2{font-size:30px;}
  .story3d-body{font-size:16px;}
  .story3d-still{border-radius:22px;}
  .story3d-actions .btn{padding:13px 22px;font-size:16px;}
}

/* ---------------------------------------------------------------- film */
.story3d.is-film{padding:0;background:var(--canvas,#F7F7F7);}
.story3d.is-film .story3d-head,
.story3d.is-film .story3d-list,
.story3d.is-film .story3d-note{
  position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.story3d.is-film .story3d-still{display:none;}
.story3d.is-film .story3d-pin{
  position:relative;height:calc(100svh - var(--s3d-top));min-height:520px;overflow:hidden;
  background:var(--canvas,#F7F7F7);
}
.story3d.is-prep .story3d-pin{opacity:0;}
.story3d.is-film .story3d-stage{display:block;position:absolute;inset:0;}
.story3d-canvas,.story3d-gl{position:absolute;inset:0;width:100%;height:100%;display:block;}
.story3d-leaders,.story3d-labels{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}

/* the copy card: every scene's copy shares one grid cell, so the card never changes size */
.story3d.is-film .story3d-scenes{
  position:absolute;z-index:5;left:var(--s3d-gut);top:calc(50% - 28px);transform:translateY(-50%);
  width:var(--s3d-card-w);max-width:none;max-height:calc(100% - 132px);margin:0;padding:42px 42px 38px;
  display:grid;gap:0;background:var(--paper,#fff);border:1px solid transparent;border-radius:28px;
  box-shadow:0 1px 2px rgba(30,58,95,.05),0 24px 60px -24px rgba(30,58,95,.28);overflow:hidden;overflow:clip;
  opacity:var(--s3d-in,1);translate:0 calc((1 - var(--s3d-in,1)) * 18px);
}
.story3d.is-film .story3d-chapters{opacity:var(--s3d-in,1);}
.story3d.is-film .story3d-scene{grid-area:1/1;display:block;pointer-events:none;}
.story3d.is-film .story3d-scene.is-active{pointer-events:auto;}
.story3d.is-film .story3d-copy h2{font-size:clamp(28px,2.9vw,42px);line-height:1.08;max-width:none;}
.story3d.is-film .story3d-body{margin-top:18px;max-width:none;}
.story3d.is-film .story3d-actions{position:relative;margin-top:24px;gap:12px;}
.story3d.is-film .story3d-actions .btn{padding:12px 22px;font-size:16px;}
/* the dot hangs in the card's margin beside the primary button: the bee lands here at the end */
.story3d.is-film .cta-dot{position:absolute;left:-27px;top:19px;margin:0;}
.s3dline-mask{padding-bottom:.09em;margin-bottom:-.09em;}   /* room for descenders inside the line masks */

/* night: the card turns navy and its words white at night >= 0.5 exactly (never mid-contrast) */
.story3d.is-night .story3d-scenes{background:var(--navy,#1E3A5F);border-color:rgba(255,255,255,.16);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);}
.story3d.is-night .story3d-copy h2,.story3d.is-night .story3d-copy .eyebrow{color:#fff;}
.story3d.is-night .story3d-copy .eyebrow::before{background:var(--amber,#E4B723);}
.story3d.is-night .story3d-body{color:#E3E9F1;}
.story3d.is-night .btn-ghost{--btn-text:#fff;--btn-border:rgba(255,255,255,.7);--btn-hover:#fff;--btn-hover-text:var(--navy,#1E3A5F);}

/* label pills, projected from 3D each frame (aria-hidden: the copy and the lists carry the words) */
.s3d-label{
  position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity;white-space:nowrap;
  display:flex;align-items:center;gap:8px;
  background:#fff;color:var(--navy,#1E3A5F);font-family:var(--sans);font-size:14px;font-weight:600;
  letter-spacing:-.005em;line-height:1;padding:9px 14px;border-radius:999px;border:1px solid rgba(30,58,95,.10);
  box-shadow:0 1px 2px rgba(30,58,95,.08),0 10px 24px -10px rgba(30,58,95,.35);
}
.s3d-label small{font-size:13px;font-weight:500;color:var(--muted,#5E6670);}
.s3d-label.has-sub{flex-direction:column;align-items:flex-start;gap:5px;border-radius:16px;padding:10px 15px 11px;}
.s3d-label.has-sub small{font-size:12.5px;}
.s3d-label.kind-pill-amber{background:var(--amber,#E4B723);color:#000;border-color:rgba(0,0,0,.06);
  box-shadow:0 1px 2px rgba(30,58,95,.08),0 12px 26px -12px rgba(140,100,0,.45);}
.s3d-label.kind-pill-amber small{color:#2b2400;}
.s3d-label.kind-step{padding-left:7px;}
.s3d-num{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;
  background:var(--navy,#1E3A5F);color:#fff;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;}
.s3d-sw{flex:none;width:18px;height:4px;border-radius:2px;background:var(--amber,#E4B723);}
.s3d-sw.sw-orange{background:var(--orange,#F58220);}
.s3d-sw.sw-navy{background:var(--navy,#1E3A5F);}
.s3d-sw.sw-white{background:#fff;box-shadow:inset 0 0 0 1px rgba(30,58,95,.35);}
.s3d-sw.sw-dots{background:radial-gradient(circle,var(--navy,#1E3A5F) 1.6px,transparent 2px) 0 50%/6px 4px repeat-x;}
.story3d.is-night .s3d-label{border-color:rgba(255,255,255,.6);box-shadow:0 10px 26px -10px rgba(0,0,0,.55);}
.story3d-leaders{color:rgba(30,58,95,.9);}
.story3d-leaders line{stroke:currentColor;stroke-width:1;}
.story3d-leaders circle{fill:var(--navy,#1E3A5F);stroke:#fff;stroke-width:1.5;}
.story3d.is-night .story3d-leaders{color:rgba(255,255,255,.85);}
.story3d.is-night .story3d-leaders circle{fill:#fff;stroke:var(--navy,#1E3A5F);}

/* chapter nav: seven bars under the card; the active one fills with the scene */
.story3d.is-film .story3d-chapters{display:flex;align-items:center;gap:14px;position:absolute;z-index:6;
  left:calc(var(--s3d-gut) - 6px);bottom:18px;}
.story3d-chapters ol{display:flex;margin:0;padding:0;list-style:none;}
.story3d-ch{position:relative;display:flex;align-items:center;justify-content:center;width:36px;height:44px;
  border-radius:8px;text-decoration:none;}
.ch-bar{display:block;width:24px;height:3px;border-radius:2px;background:rgba(30,58,95,.18);overflow:hidden;
  transition:width .35s var(--s3d-ease),background-color .2s ease;}
.ch-bar i{display:block;width:100%;height:100%;background:var(--amber,#E4B723);transform-origin:0 50%;transform:scaleX(var(--p,0));}
.story3d-ch[aria-current] .ch-bar{width:30px;}
.ch-label{position:absolute;left:50%;bottom:calc(100% + 2px);transform:translate(-50%,4px);white-space:nowrap;
  padding:6px 10px;border-radius:8px;background:var(--navy,#1E3A5F);color:#fff;font-size:12.5px;font-weight:600;line-height:1;
  opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;}
@media (hover:hover){ .story3d-ch:hover .ch-label{opacity:1;transform:translate(-50%,0);} }
.story3d-ch:focus-visible .ch-label{opacity:1;transform:translate(-50%,0);}
.story3d-ch:focus-visible{outline:2px solid var(--navy,#1E3A5F);outline-offset:-2px;}
.story3d-now{display:flex;align-items:baseline;gap:10px;margin:0;font-size:13px;font-weight:600;color:var(--navy,#1E3A5F);white-space:nowrap;}
.story3d-now .now-n{color:var(--muted,#5E6670);font-weight:500;font-variant-numeric:tabular-nums;}
.story3d.is-night .ch-bar{background:rgba(255,255,255,.24);}
.story3d.is-night .story3d-now{color:#fff;}
.story3d.is-night .story3d-now .now-n{color:#C9D3E0;}
.story3d.is-night .story3d-ch:focus-visible{outline-color:#fff;}

/* pause / play motion */
.story3d.is-film .story3d-pause{display:grid;place-items:center;position:absolute;z-index:6;right:20px;bottom:18px;
  width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
  background:#fff;color:var(--navy,#1E3A5F);border:1px solid rgba(30,58,95,.14);
  box-shadow:0 1px 2px rgba(30,58,95,.06),0 10px 22px -12px rgba(30,58,95,.4);}
.story3d-pause .i-play{display:none;}
.story3d-pause[data-paused] .i-pause{display:none;}
.story3d-pause[data-paused] .i-play{display:block;}
.story3d-pause:focus-visible{outline:2px solid var(--navy,#1E3A5F);outline-offset:3px;}
.story3d.is-night .story3d-pause{background:var(--navy,#1E3A5F);color:#fff;border-color:rgba(255,255,255,.5);}
.story3d.is-night .story3d-pause:focus-visible{outline-color:#fff;}

/* stepper (optional): Back, Next and Pause together at the bottom left, in place of the chapter bars;
   Next is the filled one */
.story3d-step{display:none;}
.story3d.is-film .story3d-step{display:flex;gap:8px;position:absolute;z-index:6;left:var(--s3d-gut);bottom:18px;}
.story3d.is-film .story3d-step .story3d-pause{position:static;}
.story3d.is-film .story3d-step{align-items:center;}
.story3d-skipto{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;margin-left:4px;border-radius:8px;
  font-size:14px;font-weight:600;color:var(--navy,#1E3A5F);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
@media (hover:hover) and (pointer:fine){ .story3d-skipto:hover{text-decoration-thickness:2px;} }
.story3d-skipto:focus-visible{outline:2px solid var(--navy,#1E3A5F);outline-offset:2px;}
.story3d.is-night .story3d-skipto{color:#fff;}
.story3d.is-night .story3d-skipto:focus-visible{outline-color:#fff;}
.story3d-step button{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
  background:#fff;color:var(--navy,#1E3A5F);border:1px solid rgba(30,58,95,.14);
  box-shadow:0 1px 2px rgba(30,58,95,.06),0 10px 22px -12px rgba(30,58,95,.4);
  transition:background-color .2s ease,color .2s ease,opacity .2s ease,transform .16s cubic-bezier(.23,1,.32,1);}
.story3d-step .story3d-next{background:var(--navy,#1E3A5F);color:#fff;border-color:var(--navy,#1E3A5F);}
.story3d-step button:active:not(:disabled):not([aria-disabled="true"]){transform:scale(.96);}
.story3d-step button:disabled{opacity:.35;cursor:default;box-shadow:none;}
.story3d-step button[aria-disabled="true"]{opacity:.55;cursor:default;}
.story3d-step button:focus-visible{outline:2px solid var(--navy,#1E3A5F);outline-offset:3px;}
@media (hover:hover) and (pointer:fine){
  .story3d-step .story3d-prev:hover:not(:disabled):not([aria-disabled="true"]){background:#F7F7F7;}
  .story3d-step .story3d-next:hover:not(:disabled):not([aria-disabled="true"]){background:#162C48;}
}
.story3d.is-night .story3d-step .story3d-prev{background:var(--navy,#1E3A5F);color:#fff;border-color:rgba(255,255,255,.5);}
.story3d.is-night .story3d-step .story3d-next{background:#fff;color:var(--navy,#1E3A5F);border-color:#fff;}
.story3d.is-night .story3d-step button:focus-visible{outline-color:#fff;}

/* controls v2 (Sean, 2026-10-27; Managed IT first, data-ctrl2): centered under the animation, bigger buttons, a
   "3/7" chapter count, and Next filled amber with "Continue" above it while there is more story. At the end
   (.is-end) "Continue" hides and the skip link reads "Continue below". The amber Next keeps a navy edge so the
   button holds 3:1 against the page (WCAG 1.4.11); its navy arrow is 6:1 on amber. */
.story3d.is-film .story3d-step.ctrl2{left:50%;right:auto;transform:translateX(-50%);bottom:calc(16px + var(--consent-h, 0px));gap:12px;align-items:flex-end;
  transition:bottom .25s cubic-bezier(.23,1,.32,1);}   /* above the analytics notice while it shows (site.js sets --consent-h) */
.story3d-step.ctrl2 button{width:52px;height:52px;}
.story3d-step.ctrl2 button svg{width:24px;height:24px;}
.story3d-step.ctrl2 .btn{display:inline-flex;align-items:center;justify-content:center;width:auto;height:52px;min-height:52px;
  padding:0 28px;border-radius:999px;font-size:17px;font-weight:600;line-height:1;box-shadow:none;
  background:var(--btn);color:var(--btn-text);border:1.5px solid var(--btn-border);}   /* the site's pill buttons (Sean, 2026-10-27) */
.story3d-step.ctrl2 .btn-ghost{background:#fff;}
.story3d-step.ctrl2 .btn:disabled{opacity:.35;pointer-events:none;}
.story3d-step.ctrl2 .btn[aria-disabled="true"]{opacity:.6;pointer-events:none;}
.story3d.is-night .story3d-step.ctrl2 .btn-ghost{--btn-text:#fff;--btn-border:rgba(255,255,255,.7);--btn-hover:#fff;--btn-hover-text:var(--navy,#1E3A5F);
  background:var(--navy,#1E3A5F);color:var(--btn-text);border-color:var(--btn-border);}
.story3d.is-night .story3d-step.ctrl2 .btn-primary{--btn-border:var(--amber,#E4B723);--btn-hover:#fff;--btn-hover-text:var(--navy,#1E3A5F);
  background:var(--btn);color:var(--btn-text);border-color:var(--btn-border);}   /* beats the old night rule that turned Next white */
.story3d-nextwrap{display:flex;flex-direction:column;align-items:center;gap:5px;}
.story3d-cont{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1;color:var(--navy,#1E3A5F);
  transition:opacity .2s ease;}
.story3d.is-end .story3d-cont{opacity:0;}
.story3d-count{display:flex;align-items:center;justify-content:center;height:52px;min-width:46px;
  font-size:17px;font-weight:600;color:var(--navy,#1E3A5F);font-variant-numeric:tabular-nums;}
.story3d-count b{font-weight:700;}
.story3d-step.ctrl2 .story3d-skipto{min-height:52px;}
.story3d.is-night .story3d-cont,.story3d.is-night .story3d-count{color:#fff;}

/* landscape tablets and short laptop screens (Sean, 2026-10-24): at 1024x768 the 325px card needed 657px for the
   longest chapter with 567px available. A wider card, a little less padding and a little more height fit every
   chapter on every service page (measured in WebKit at 1024x768, 1180x820, 1366x1024). */
@media (min-aspect-ratio:9/10) and (max-width:1279px),(min-aspect-ratio:9/10) and (max-height:860px){
  .story3d{--s3d-card-w:clamp(360px,40vw,470px);}
  .story3d.is-film .story3d-scenes{padding:32px 32px 30px;max-height:calc(100% - 104px);}
  .story3d.is-film .story3d-copy h2{font-size:clamp(26px,2.7vw,36px);}
  .story3d.is-film .story3d-body{margin-top:14px;font-size:16px;line-height:1.5;}
  .story3d.is-film .story3d-actions{margin-top:18px;}
}
@media (min-aspect-ratio:9/10) and (max-height:800px){
  .story3d.is-film .story3d-copy h2{font-size:clamp(24px,2.5vw,32px);}
  .story3d.is-film .story3d-body{font-size:15px;line-height:1.48;}
}

/* phones and portrait tablets: the card docks as a bottom sheet (the engine uses the same query) */
@media (max-width:760px),(max-aspect-ratio:9/10){
  .story3d.is-film .story3d-scenes{
    left:16px;right:16px;top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:none;
    width:auto;max-height:40svh;padding:20px 20px 18px;border-radius:24px;overflow-y:auto;overscroll-behavior:contain;
  }
  .story3d.is-film .story3d-copy .eyebrow{font-size:11.5px;letter-spacing:.12em;margin-bottom:10px;gap:10px;}
  .story3d.is-film .story3d-copy .eyebrow::before{width:18px;}
  .story3d.is-film .story3d-copy h2{font-size:24px;line-height:28px;}
  .story3d.is-film .story3d-body{font-size:15px;line-height:22px;margin-top:10px;}
  .story3d.is-film .story3d-actions{margin-top:14px;gap:10px;}
  .story3d.is-film .story3d-actions .btn{padding:11px 18px;font-size:15px;}
  .story3d.is-film .cta-dot{width:10px;height:10px;left:-15px;top:20px;box-shadow:0 0 0 3px rgba(228,183,35,.22);}
  .story3d.is-film .story3d-chapters{left:16px;right:68px;top:10px;bottom:auto;}
  .story3d.is-film .story3d-chapters ol{flex:1;}
  .story3d.is-film .story3d-chapters li{flex:1;}
  .story3d.is-film .story3d-ch{width:100%;}
  .story3d.is-film .ch-bar,.story3d.is-film .story3d-ch[aria-current] .ch-bar{width:calc(100% - 6px);}
  .story3d.is-film .story3d-now{display:none;}
  .story3d.is-film .ch-label{bottom:auto;top:calc(100% + 2px);}
  .story3d.is-film .story3d-pause{right:16px;top:10px;bottom:auto;}
  .story3d.is-film .story3d-step{left:16px;top:10px;bottom:auto;gap:6px;}
  .s3d-label{font-size:12.5px;padding:7px 11px;gap:6px;}
  .s3d-label small{font-size:11.5px;}
  .s3d-num{width:20px;height:20px;font-size:11px;}
}

/* controls v2 on phones and portrait tablets: centered across the top (the text sheet is at the bottom) */
@media (max-width:760px),(max-aspect-ratio:9/10){
  .story3d.is-film .story3d-step.ctrl2{top:8px;bottom:auto;gap:8px;flex-wrap:wrap;justify-content:center;width:calc(100% - 24px);row-gap:0;}
  .story3d-step.ctrl2 button{width:46px;height:46px;}
  .story3d-step.ctrl2 .btn{height:46px;min-height:46px;padding:0 20px;font-size:16px;}
  .story3d-step.ctrl2 button svg{width:22px;height:22px;}
  .story3d-count{height:46px;}
  .story3d-step.ctrl2 .story3d-skipto{min-height:36px;flex-basis:100%;justify-content:center;margin:0;}
}

/* portrait tablets (Sean, 2026-10-24): every chapter fits the sheet (measured in WebKit at 768x1024 and 820x1180),
   so the sheet never scrolls (overflow:clip, which, unlike hidden, cannot be scrolled by focus or script). Scrolling only ever exposed the tallest chapter's empty space: a swipe moved the words
   out of view and took the bee's landing dot with them. Phones keep scrolling; a small phone needs it. */
@media (min-width:600px) and (max-aspect-ratio:9/10){
  .story3d.is-film .story3d-scenes{overflow:hidden;overflow:clip;}
}

/* short phones (iPhone SE and similar, Sean 2026-10-24): the longest chapters needed up to 123px more than the
   40svh sheet. A taller sheet and slightly tighter type fit every chapter, so the sheet never scrolls here either. */
@media (max-width:760px) and (max-height:720px){
  .story3d.is-film .story3d-scenes{max-height:58svh;padding:16px 16px 14px;overflow:hidden;overflow:clip;}
  .story3d.is-film .story3d-copy .eyebrow{font-size:11px;margin-bottom:8px;}
  .story3d.is-film .story3d-copy h2{font-size:21px;line-height:25px;}
  .story3d.is-film .story3d-body{font-size:14px;line-height:20px;margin-top:8px;}
  .story3d.is-film .story3d-actions{margin-top:12px;gap:8px;}
  .story3d.is-film .story3d-actions .btn{padding:10px 16px;font-size:14px;}
}

/* still-render mode (?capture=1): the stage alone fills the viewport */
html.s3d-capture,html.s3d-capture body{overflow:hidden;}
.story3d.is-capture .story3d-pin{position:fixed;inset:0;height:100vh;min-height:0;z-index:1000;}
.story3d.is-capture .story3d-skip{display:none;}
.story3d.is-capture.no-ui .story3d-scenes,
.story3d.is-capture.no-ui .story3d-chapters,
.story3d.is-capture.no-ui .story3d-pause{display:none;}
.story3d.no-labels .story3d-labels,.story3d.no-labels .story3d-leaders{display:none;}

@media (prefers-reduced-motion:reduce){
  .ch-bar,.ch-label{transition:none;}
}