/* #reel – dark studio stage, floating 3D phone playing the owner's warehouse footage, lightbox with the APEX film.
   B02: the pin continues, the phone turns sideways (.reel--turn, desktop and phones) and its screen becomes the film's play button
   (desktop: the inline player .rpl; phones: lightbox + fullscreen). */
.reel{position:relative;--rx:64%;--studio:var(--bg0);--studio2:var(--bg3)}   /* light studio stage (owner 7 Oct: white page) */
.reel__track{position:relative;height:235vh}
.reel__sticky{position:sticky;top:var(--nav);height:calc(100vh - var(--nav) - var(--strip));height:calc(100svh - var(--nav) - var(--strip));min-height:620px;   /* under the nav, sized so the whole view (brand strip included) is on screen at the page top (owner, 9 Oct) */overflow:hidden;display:flex;align-items:center;
  background:linear-gradient(180deg,var(--bg) 0%,var(--studio2) 12%,var(--studio) 40%,var(--studio) 82%,var(--bg) 100%)}
.reel__studio{position:absolute;inset:0;pointer-events:none}
.reel__spot{position:absolute;left:50%;top:-30%;width:1100px;height:120%;margin-left:-200px;background:radial-gradient(closest-side,rgba(47,123,224,.07),rgba(47,123,224,.02) 55%,transparent)}   /* gradient only, no blur filter on a 1100 px element */
.reel__floor{position:absolute;left:0;right:0;top:76%;bottom:0;
  background:radial-gradient(42% 70% at var(--rx) 0%,rgba(47,123,224,.08),transparent 70%),radial-gradient(30% 45% at var(--rx) 0%,rgba(245,132,31,.07),transparent 70%),
  linear-gradient(180deg,rgba(var(--ink-rgb),.02),transparent 60%)}
.reel__floor::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(var(--ink-rgb),.07) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ink-rgb),.07) 1px,transparent 1px);background-size:80px 80px;transform:perspective(500px) rotateX(62deg);transform-origin:50% 0;
  -webkit-mask-image:radial-gradient(60% 90% at var(--rx) 0%,#000,transparent 75%);mask-image:radial-gradient(60% 90% at var(--rx) 0%,#000,transparent 75%)}
.reel__horizon{position:absolute;left:8%;right:8%;top:76%;height:1px;background:linear-gradient(90deg,transparent,rgba(245,132,31,.45) 40%,rgba(47,123,224,.45) 70%,transparent)}
.reel__giant{position:absolute;left:0;right:0;top:50%;margin:0;transform:translateY(-58%);text-align:center;white-space:nowrap;pointer-events:none;
  font:900 clamp(120px,21vw,340px)/1 Inter,sans-serif;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(var(--ink-rgb),.08);
  background:linear-gradient(180deg,rgba(var(--ink-rgb),.05),rgba(var(--ink-rgb),0) 75%);-webkit-background-clip:text;background-clip:text}
.reel__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:center;width:100%;height:100%}
.reel__copy{position:relative;z-index:3;padding-bottom:4vh}
.reel__h{font-size:clamp(40px,5.4vw,84px);line-height:1;letter-spacing:-.035em;text-wrap:balance}
.reel__w{display:inline-block;will-change:transform,opacity}
.reel__w.grad{padding-bottom:.08em}
.reel__h--anim .reel__w{opacity:.1;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i) * 90ms)}
.reel__h--anim.is-in .reel__w{opacity:1;transform:none}
.reel__lead{margin:26px 0 32px;max-width:480px}.reel__lead b{color:var(--text);font-weight:700}
.reel__act{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.reel__play{display:flex;align-items:center;gap:16px;padding:8px 26px 8px 8px;border-radius:999px;border:1px solid var(--line2);background:var(--card2);text-align:left;transition:border-color .25s,background .25s,transform .3s var(--ease),box-shadow .3s}
.reel__play:hover{border-color:rgba(245,132,31,.6);background:rgba(245,132,31,.1);transform:translateY(-2px);box-shadow:0 20px 40px -24px rgba(245,132,31,.35)}
.reel__thumb{position:relative;flex:none;width:92px;height:56px;border-radius:999px;background:var(--bg0) center/cover no-repeat;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.reel__thumb i{position:absolute;inset:0;display:grid;place-items:center;background:rgba(var(--ink-rgb),.22)}   /* veil on the poster itself */
.reel__thumb svg{width:26px;height:26px;padding:6px;border-radius:50%;fill:#1b0d00;background:var(--orange);box-shadow:0 0 0 6px rgba(245,132,31,.25);transition:transform .3s var(--ease)}
.reel__play:hover .reel__thumb svg{transform:scale(1.12)}
.reel__pt b{display:block;font-size:16px;color:var(--text)}.reel__pt small{font-size:13px;color:var(--muted)}
.reel__now{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:13px;color:var(--muted);transition:color .2s}
.reel__now:hover{color:var(--text)}.reel__now .mono{color:var(--orange2);font-weight:700}
.reel__stage{position:relative;height:100%}
.reel__3d{position:absolute!important;left:0;right:0;top:7%;height:69%;width:auto!important;-webkit-box-reflect:below 0 linear-gradient(transparent 58%,rgba(0,0,0,.14))}
.reel__3d::before{background:radial-gradient(ellipse 22% 3% at 50% 97%,rgba(var(--ink-rgb),.3),transparent),radial-gradient(circle at 50% 50%,rgba(47,123,224,.09),rgba(245,132,31,.04) 34%,transparent 56%)}
.reel__3d.no-webgl,.reel__3d.gl-wait{background:none}
/* flat fallback (no WebGL): a phone frame that plays the same film */
.reel__flat{position:absolute;left:0;top:0;width:2px;height:2px;opacity:.01;overflow:hidden;pointer-events:none}
.reel--flat .reel__flat{left:50%;top:12%;width:auto;height:64%;opacity:1;transform:translateX(-50%) rotate(-6deg);-webkit-box-reflect:below 18px linear-gradient(transparent 62%,rgba(0,0,0,.12))}
.reel__phone{height:100%;aspect-ratio:720/1560;padding:2.2%;border-radius:12% / 5.6%;background:linear-gradient(140deg,#9a978f,#4c4b48 40%,#8e8b84);box-shadow:0 40px 80px -30px rgba(var(--ink-rgb),.35),0 0 0 1px rgba(255,255,255,.15) inset}
.reel__phone video{display:block;width:100%;height:100%;object-fit:cover;border-radius:10% / 4.7%;background:#000}
.reel__srcs{position:absolute;left:0;top:0;width:2px;height:2px;opacity:.01;overflow:hidden;pointer-events:none}
.reel__srcs video{width:2px;height:2px}

/* desktop: the canvas spans the container (the phone is placed in its grid column by sec-reel.js and can travel to the centre) */
@media (min-width:901px){
  .reel:not(.reel--flat) .reel__stage{position:static}
  .reel--turn .reel__track{height:380vh}
  .reel__3d::before{background:radial-gradient(140px 19px at var(--px,50%) 97%,rgba(var(--ink-rgb),.3),transparent),radial-gradient(450px circle at var(--px,50%) 50%,rgba(47,123,224,.09),rgba(245,132,31,.04) 34%,transparent 56%)}
}

/* round play button: its box is the projected screen (whole screen = hit area), the disc sits in the middle */
.reel__hud{position:absolute;left:0;right:0;top:7%;height:69%;z-index:4;pointer-events:none}
/* owner (6 Oct): the 3D note sits under the floating module (above its reflection), hidden while the screen turns into the film */
.reel__note{bottom:auto;top:calc(76% + 6px)}
.reel--turn .reel__note{opacity:0;transition:opacity .3s}
@media (max-width:900px){.reel__note{top:calc(84% + 4px)}}
.reel__disc{position:absolute;left:0;top:0;width:0;height:0;display:grid;place-items:center;padding:0;border:0;background:none;color:var(--text);
  pointer-events:auto;visibility:hidden;opacity:0;transition:opacity .35s var(--ease),visibility 0s .35s;-webkit-tap-highlight-color:transparent}
.reel__disc.is-on{visibility:visible;opacity:1;transition:opacity .45s var(--ease)}
.reel__disc.is-away{opacity:0;pointer-events:none}
.reel__disc:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.reel__disc-b{position:relative;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,var(--orange),#ff9d3f);
  box-shadow:0 18px 44px -14px rgba(245,132,31,.5),0 0 0 8px rgba(245,132,31,.16),inset 0 0 0 1px rgba(255,255,255,.3);transform:scale(.55);
  transition:transform .55s var(--ease),translate .35s var(--ease),box-shadow .3s}
.reel__disc.is-on .reel__disc-b{transform:none}
.reel__disc:hover .reel__disc-b{transform:scale(1.08);box-shadow:0 22px 50px -14px rgba(245,132,31,.55),0 0 0 12px rgba(245,132,31,.2),inset 0 0 0 1px rgba(255,255,255,.35)}
.reel__disc:active .reel__disc-b{transform:scale(.94)}
.reel__disc-b svg{width:30px;height:30px;margin-left:4px;fill:#1b0d00}
.reel__disc-b i{position:absolute;inset:-12px;border-radius:50%;border:1.5px solid rgba(245,132,31,.7);animation:reel-ring 2.6s var(--ease) infinite}
@keyframes reel-ring{0%{transform:scale(.86);opacity:.95}100%{transform:scale(1.5);opacity:0}}
html.user-idle .reel__disc-b i{animation-play-state:paused}
.reel__disc:not(.is-on) .reel__disc-b i{animation:none}   /* the ring loops only while the play disc is shown */

/* inline player: a full-viewport modal whose box starts on the phone's screen and grows to the container width */
.rpl{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;color:var(--text);
  background:rgba(var(--ink-rgb),0);transition:background-color .5s var(--ease)}
.rpl::backdrop{background:transparent}
.rpl.is-big{background:rgba(var(--ink-rgb),.78)}   /* dark scrim only while the film plays over the page */
.rpl__box{position:absolute;left:0;top:0;transform-origin:50% 50%;clip-path:inset(0 round 24px);background:#000;will-change:transform,clip-path}
.rpl__v{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.rpl__x{position:absolute;top:14px;right:14px;z-index:2;width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(var(--bg-rgb),.72);
  box-shadow:inset 0 0 0 1px var(--line2);opacity:0;transform:scale(.8);transition:opacity .3s,transform .4s var(--ease),background .2s}
.rpl.is-on .rpl__x,.rpl__x:focus-visible{opacity:1;transform:none}
.rpl__x:hover{background:var(--orange)}.rpl__x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}

/* lightbox */
.rlb{width:min(1180px,calc(100vw - 32px));max-width:none;max-height:none;padding:0;border:0;background:none;color:var(--text);overflow:visible}
.rlb::backdrop{background:rgba(var(--ink-rgb),.78)}
.rlb[open]{animation:rlb-in .35s var(--ease)}
@keyframes rlb-in{from{opacity:0;transform:translateY(14px) scale(.98)}}
.rlb__box{position:relative;border-radius:22px;background:#000;box-shadow:0 50px 120px -30px rgba(var(--ink-rgb),.4),0 0 0 1px var(--line2);overflow:hidden}
.rlb__v{display:block;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 140px);background:#000}
.rlb__cap{padding:14px 20px;font-size:13px;color:var(--muted);background:var(--surface-solid)}.rlb__cap b{color:var(--text)}
.rlb__x{position:absolute;top:12px;right:12px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(var(--bg-rgb),.75);box-shadow:inset 0 0 0 1px var(--line2);transition:background .2s}
.rlb__x:hover{background:var(--orange)}.rlb__x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
html.rlb-open{overflow:hidden}
.rlb__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

@media (max-width:900px){
  .reel__track{height:auto}
  .reel__sticky{position:relative;height:auto;min-height:0;display:block;padding:40px 0 70px}
  .reel__in{grid-template-columns:minmax(0,1fr);height:auto;gap:8px}
  .reel__stage{order:-1;height:min(68svh,600px);min-height:420px;margin:0 calc(-1 * var(--gut))}
  .reel__3d,.reel__hud{top:0;height:84%}
  .reel__disc-b{width:68px;height:68px}.reel__disc-b svg{width:26px;height:26px;margin-left:3px}.reel__disc-b i{inset:-9px}
  .reel__floor,.reel__horizon{top:auto}
  .reel__floor{bottom:auto;top:calc(40px + min(68svh,600px) * .84);height:320px}
  .reel__horizon{top:calc(40px + min(68svh,600px) * .84)}
  .reel__giant{top:calc(40px + min(68svh,600px) * .42);font-size:31vw}
  .reel__spot{left:0;margin-left:-20%;width:140%;height:70%}
  .reel__copy{text-align:center;padding:0}
  .reel__h{font-size:clamp(36px,10vw,56px)}
  .reel__lead{margin:18px auto 26px}
  .reel__act{align-items:center}
  .reel--flat .reel__flat{top:3%;height:78%}
}
/* phones with the sideways turn (sec-reel.js .reel--turn): the stage sticks for 320 % of the screen height – the phone lifts,
   turns to landscape and its screen becomes the film's play button; the copy sits under the stage and steps aside */
@media (max-width:900px){
  .reel--turn .reel__track{height:320vh;height:320svh}
  .reel--turn .reel__sticky{position:sticky;top:0;height:100vh;height:100svh;min-height:0;display:flex;flex-direction:column;padding:calc(var(--nav) + 2px) 0 16px}
  .reel--turn .reel__in{flex:1 1 auto;display:flex;flex-direction:column;align-items:stretch;height:auto;min-height:0;gap:6px}
  .reel--turn .reel__stage{width:auto;margin:0 calc(-1 * var(--gut))}
  .reel--turn .reel__stage{flex:1 1 auto;height:auto;min-height:0}
  .reel--turn .reel__3d,.reel--turn .reel__hud{top:0;height:92%}
  .reel--turn .reel__copy{flex:none}
  .reel--turn .reel__lead{margin:12px auto 16px}
  .reel--turn .reel__act{gap:6px}
  .reel--turn .reel__floor{top:58%;height:42%}
  .reel--turn .reel__horizon{top:58%}
  .reel--turn .reel__giant{top:34%}
  .reel--turn.reel--flat .reel__flat{top:2%;height:86%}
}
.reel__hint{display:none}
@media (max-width:900px){.reel--turn .reel__hint{position:absolute;left:0;right:0;top:calc(58% + 18px);z-index:3;display:block;margin:0;text-align:center;font-size:14px;font-weight:600;color:var(--muted);opacity:var(--hint,0);transform:translateY(calc((1 - var(--hint,0)) * 12px));pointer-events:none}}
@media (max-width:900px) and (max-height:720px){.reel--turn .reel__lead{display:none}.reel--turn .reel__h{font-size:clamp(30px,8.6vw,44px)}}
@media (max-width:600px){.reel__play{padding-right:20px}.reel__now{font-size:12px;text-align:center}.reel__now .pulse{display:none}.rlb{width:calc(100vw - 16px)}.rlb__box{border-radius:16px}}
@media (prefers-reduced-motion:reduce){.reel__track{height:auto}.reel__sticky{position:relative}.rlb[open]{animation:none}.reel__disc-b i{animation:none;opacity:.5}.reel__disc,.reel__disc-b{transition:none}}
/* SPEC budget: below the high tier no backdrop blur – over the sticky film stage it would be recomputed every frame, and the dialog backdrop is fixed and full-screen */
/* (no backdrop blur on any tier any more – the rules that removed it below "high" are gone) */
html:not([data-q=high]) .rpl__x,html:not([data-q=high]) .rlb__x{background-color:rgba(var(--bg-rgb),.94)}
/* phones (9 Oct): the sticky view sits under the nav and is sized so that at the page top – strip and nav still in flow – the whole
   view, the four claims included, is on screen; while pinned it leaves the strip's height free at the bottom */
@media (max-width:900px){.reel--turn .reel__sticky{top:var(--nav);height:calc(100vh - var(--nav) - var(--strip));height:calc(100svh - var(--nav) - var(--strip));padding-top:2px;padding-bottom:46px}}
/* desktop (9 Oct): the sticky view carries paddings (--pt strip, --pb brand strip, set in home.css) – the floor line stays where the 3D canvas ends (76 % of the stage), so the phone stands on it */
@media (min-width:901px){.reel__floor,.reel__horizon{top:calc(var(--pt,0px) + (100% - var(--pt,0px) - var(--pb,0px)) * .76)}}