:root{
    --ink:#ffffff; --dim:rgba(255,255,255,.62); --dim2:rgba(255,255,255,.40);
    --rule:rgba(255,255,255,.14); --aqua:#67e8f0; --aqua-2:#9fdcf7;
    --panel-glass:rgba(255,255,255,.055);
  }
  [data-theme="light"]{
    --ink:#04181d; --dim:rgba(4,24,29,.68); --dim2:rgba(4,24,29,.45);
    --rule:rgba(4,24,29,.16); --panel-glass:rgba(4,24,29,.05);
    --aqua:#0a6b7e; --aqua-2:#1190a8;
  }
  [data-theme="light"] .book{background:linear-gradient(135deg,#0a6b7e,#1190a8);color:#fff;box-shadow:0 10px 30px rgba(10,107,126,.28)}
  [data-theme="light"] .book:hover{box-shadow:0 0 0 6px rgba(10,107,126,.12),0 14px 40px rgba(10,107,126,.35)}
  [data-theme="light"] .brands span{background:rgba(255,255,255,.45)}

  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{background:#04080b;color:#fff;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;line-height:1.45;overflow:hidden}
  ::selection{background:var(--aqua);color:#04181d}

  /* ---------- backdrop ---------- */
  .bg{position:fixed;inset:0;z-index:0;opacity:0;transition:opacity 1.1s cubic-bezier(.4,0,.2,1);will-change:opacity}
  .bg.on{opacity:1}
  .grain{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:.13;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
  /* long, even falloff so the glow never draws a visible edge through the glass cards */
  .orb{position:fixed;z-index:1;width:104vmax;height:104vmax;left:50%;top:50%;pointer-events:none;
    background:radial-gradient(circle,
      rgba(103,232,240,.15) 0%, rgba(103,232,240,.115) 16%, rgba(103,232,240,.082) 31%,
      rgba(103,232,240,.054) 45%, rgba(103,232,240,.031) 58%, rgba(103,232,240,.015) 70%,
      rgba(103,232,240,.005) 82%, rgba(103,232,240,0) 100%);
    filter:blur(46px);will-change:transform;transform:translate(-50%,-50%)}

  .aurora{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
    transition:opacity 1.4s cubic-bezier(.4,0,.2,1);overflow:hidden}
  .aurora.on{opacity:1}
  .aurora b{position:absolute;display:block;border-radius:50%;filter:blur(72px);mix-blend-mode:screen;will-change:transform}
  .aurora b:nth-child(1){width:54vmax;height:54vmax;left:-10%;top:-16%;
    background:radial-gradient(circle,rgba(103,232,240,.5),rgba(103,232,240,.12) 45%,transparent 72%);animation:au1 17s ease-in-out infinite alternate}
  .aurora b:nth-child(2){width:44vmax;height:44vmax;right:-12%;top:4%;
    background:radial-gradient(circle,rgba(159,220,247,.44),rgba(159,220,247,.1) 45%,transparent 72%);animation:au2 23s ease-in-out infinite alternate}
  .aurora b:nth-child(3){width:62vmax;height:62vmax;left:26%;bottom:-32%;
    background:radial-gradient(circle,rgba(20,170,200,.52),rgba(20,170,200,.12) 45%,transparent 72%);animation:au3 29s ease-in-out infinite alternate}
  @keyframes au1{to{transform:translate3d(20vw,12vh,0) scale(1.2)}}
  @keyframes au2{to{transform:translate3d(-16vw,16vh,0) scale(.82)}}
  @keyframes au3{to{transform:translate3d(12vw,-14vh,0) scale(1.25)}}
  .aurora i{position:absolute;inset:-40%;display:block;opacity:.3;mix-blend-mode:screen;filter:blur(30px);
    background:conic-gradient(from 0deg,transparent 0deg,rgba(103,232,240,.2) 42deg,transparent 96deg,transparent 360deg);
    animation:sweep 26s linear infinite;will-change:transform}
  @keyframes sweep{to{transform:rotate(360deg)}}

  /* ---------- morphing subject stage ---------- */
  .stage{position:fixed;inset:0;z-index:2;pointer-events:none;will-change:transform;transition:z-index 0s}
  .stage.front{z-index:5}
  .subj{position:absolute;opacity:0;
    transition:opacity 1s cubic-bezier(.4,0,.2,1),transform 1.5s cubic-bezier(.22,1,.36,1);
    will-change:opacity,transform}
  .subj.on{opacity:var(--o,1)}
  .subj.on.dim{opacity:.5}
  .subj img{width:100%;display:block;filter:drop-shadow(0 26px 60px rgba(0,0,0,.55)) contrast(1.05);
    -webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 86%,transparent 100%)}

  #sj-smile2{right:-1%;bottom:-5%;width:clamp(210px,29vw,430px);transform:translateY(7%) scale(.95)}
  #sj-smile2.on{transform:none}
  #sj-jab{right:-1%;bottom:-2%;width:clamp(200px,25vw,360px);transform:translateY(7%) scale(.95)}
  #sj-jab.on{transform:none}
  /* vignette the figure so it sits in the foreground but melts into the gradient */
  #sj-jab img{-webkit-mask-image:radial-gradient(ellipse 72% 70% at 56% 46%,#000 30%,rgba(0,0,0,.6) 60%,transparent 88%);
    mask-image:radial-gradient(ellipse 72% 70% at 56% 46%,#000 30%,rgba(0,0,0,.6) 60%,transparent 88%);
    filter:drop-shadow(0 20px 54px rgba(0,0,0,.5)) contrast(1.08)}
  /* the float lives on the image, so entering and leaving the panel stays a clean transition */
  #sj-lens{right:-4%;bottom:6%;width:clamp(260px,38vw,560px);transform:translateY(8%) scale(.9) rotate(-5deg)}
  #sj-lens.on{transform:rotate(-2deg)}
  #sj-lens img{-webkit-mask-image:none;mask-image:none;animation:float 9s ease-in-out infinite;
    filter:drop-shadow(0 30px 70px rgba(0,0,0,.75)) drop-shadow(0 0 40px rgba(103,232,240,.16)) contrast(1.06)}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
  /* the subject sits centre-right in this cutout with only track trailing left, so a big
     negative right offset pushes the person off-screen and leaves a bare rail. Keep it in. */
  #sj-dolly{right:-1%;bottom:-3%;width:clamp(260px,36vw,560px);transform:translateY(9%) scale(.93)}
  #sj-dolly.on{transform:none}
  #sj-dolly img{-webkit-mask-image:none;mask-image:none}

  /* ---------- scroller ---------- */
  .deck{position:relative;z-index:3;height:100%;overflow-y:auto;overflow-x:hidden;
    scroll-snap-type:y mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
  .deck::-webkit-scrollbar{display:none}
  .panel{min-height:100%;scroll-snap-align:start;scroll-snap-stop:always;
    display:flex;align-items:center;position:relative;
    padding:clamp(66px,9vh,100px) clamp(20px,5vw,72px) clamp(44px,7vh,68px);color:var(--ink)}
  @media (min-width:981px){ .panel{padding-right:clamp(84px,8.5vw,158px)} }
  .inner{width:100%;max-width:1240px;margin:0 auto;position:relative}

  .rise{opacity:0;transform:perspective(1100px) rotateX(7deg) translateY(34px);
    transition:opacity .85s cubic-bezier(.22,1,.36,1),transform .95s cubic-bezier(.22,1,.36,1);transform-origin:50% 100%}
  .in .rise{opacity:1;transform:perspective(1100px) rotateX(0) translateY(0)}
  .in .rise:nth-child(1){transition-delay:.06s}
  .in .rise:nth-child(2){transition-delay:.15s}
  .in .rise:nth-child(3){transition-delay:.24s}
  .in .rise:nth-child(4){transition-delay:.33s}
  .in .rise:nth-child(5){transition-delay:.42s}

  /* ---------- top bar ---------- */
  .bar{position:fixed;z-index:20;top:0;left:0;right:0;display:flex;align-items:center;
    justify-content:space-between;gap:16px;padding:clamp(13px,2.2vh,22px) clamp(20px,5vw,72px);
    color:var(--ink);transition:color .9s ease}
  .leftgrp{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px)}
  .mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
  .mark img{height:26px;width:auto;display:block}
  .mark b{font-size:clamp(12px,1.35vw,14px);font-weight:800;letter-spacing:.1em}
  .mark b i{font-style:normal;color:var(--aqua)}
  /* phones: the page scrolls under the top bar, so the bar gets a frosted backing that follows the light and dark sections */
  @media (max-width:640px){
    .bar{background:rgba(4,12,16,.84);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
      border-bottom:1px solid var(--rule);transition:color .9s ease,background-color .9s ease}
    [data-theme="light"] .bar{background:rgba(240,247,249,.86)}
  }
  .enter{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);
    font-size:clamp(8.5px,.95vw,10px);font-weight:800;letter-spacing:.2em;text-transform:uppercase;
    padding:8px 15px;border-radius:999px;border:1px solid var(--rule);opacity:.8;
    transition:opacity .3s,border-color .3s,transform .25s}
  .enter:hover{opacity:1;border-color:var(--aqua);transform:translateY(-1px)}
  .enter u{text-decoration:none;color:var(--aqua)}
  .enter s{text-decoration:none;width:6px;height:6px;border-radius:50%;background:var(--aqua);animation:pulse 2.6s ease-out infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(103,232,240,.55)}70%{box-shadow:0 0 0 8px rgba(103,232,240,0)}100%{box-shadow:0 0 0 0 rgba(103,232,240,0)}}
  .book{display:inline-flex;align-items:center;gap:9px;text-decoration:none;border:0;cursor:pointer;
    font-family:inherit;font-size:clamp(10px,1.1vw,11.5px);font-weight:800;letter-spacing:.22em;text-transform:uppercase;
    padding:11px 24px;border-radius:999px;color:#04181d;
    background:linear-gradient(135deg,var(--aqua),var(--aqua-2));
    box-shadow:0 0 0 0 rgba(103,232,240,.5),0 10px 30px rgba(103,232,240,.22);
    transition:transform .2s,box-shadow .3s}
  .book:hover{transform:translateY(-2px);box-shadow:0 0 0 6px rgba(103,232,240,.14),0 14px 40px rgba(103,232,240,.34)}

  /* ---------- dot nav ---------- */
  .dots{position:fixed;z-index:20;right:clamp(12px,2vw,26px);top:50%;transform:translateY(-50%);
    display:flex;flex-direction:column;gap:13px;align-items:flex-end}
  .dot{display:flex;align-items:center;gap:9px;cursor:pointer;background:none;border:0;padding:0;color:var(--ink)}
  .dot span{font-size:9px;letter-spacing:.2em;text-transform:uppercase;opacity:0;transform:translateX(6px);
    transition:opacity .3s,transform .3s;white-space:nowrap;font-weight:700}
  .dot i{display:block;width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.3;
    transition:opacity .3s,transform .3s,background .3s}
  .dot:hover span{opacity:.75;transform:translateX(0)}
  .dot:hover i{opacity:.6}
  .dot.active i{opacity:1;background:var(--aqua);transform:scale(1.6);box-shadow:0 0 12px rgba(103,232,240,.8)}
  .dot.active span{opacity:1;transform:translateX(0);color:var(--aqua)}

  /* ---------- type ---------- */
  .eyebrow{display:flex;align-items:center;gap:11px;font-size:clamp(9px,1vw,10.5px);
    letter-spacing:.34em;text-transform:uppercase;color:var(--dim2);font-weight:700;margin-bottom:clamp(10px,1.8vh,18px)}
  .eyebrow em{font-style:normal;color:var(--aqua)}
  .eyebrow::before{content:"";width:clamp(18px,3vw,40px);height:1px;background:var(--aqua);opacity:.8}
  h1{font-size:clamp(30px,6.2vw,80px);line-height:.94;font-weight:800;letter-spacing:-.035em;text-transform:uppercase;max-width:15ch}
  h1 span{background:linear-gradient(120deg,var(--aqua),var(--aqua-2) 55%,#fff);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  h2{font-size:clamp(22px,3.5vw,48px);line-height:1.02;font-weight:800;letter-spacing:-.028em;text-transform:uppercase;max-width:20ch}
  h2 i{font-style:normal;color:var(--dim2);display:block;font-size:.58em;letter-spacing:-.01em;
    text-transform:none;font-weight:700;margin-bottom:.32em}
  .sub{color:var(--dim);font-size:clamp(13px,1.35vw,16px);line-height:1.62;max-width:46ch;margin-top:clamp(11px,2vh,20px)}

  .pill{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);
    margin-top:clamp(14px,2.4vh,22px);
    font-size:clamp(8.5px,.95vw,10px);font-weight:800;letter-spacing:.2em;text-transform:uppercase;
    padding:9px 18px;border-radius:999px;border:1px solid rgba(103,232,240,.45);
    background:rgba(103,232,240,.07);transition:background .3s,border-color .3s,transform .25s,box-shadow .3s}
  .pill svg{width:13px;height:13px;color:var(--aqua)}
  .pill:hover{background:rgba(103,232,240,.16);border-color:var(--aqua);transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(103,232,240,.22)}
  .hero-cue{position:absolute;left:50%;bottom:clamp(6px,2vh,18px);transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--dim2);
    font-size:9px;letter-spacing:.26em;text-transform:uppercase;font-weight:700}
  .chev{width:26px;height:26px;animation:bob 2.1s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(7px);opacity:1}}
  .hero-meta{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,44px);margin-top:clamp(18px,3.2vh,36px);
    padding-top:clamp(13px,2.2vh,22px);border-top:1px solid var(--rule);max-width:680px}
  .hero-meta div b{display:block;font-size:clamp(17px,2.2vw,26px);font-weight:800;letter-spacing:-.02em;
    background:linear-gradient(120deg,var(--aqua),var(--aqua-2));-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero-meta div span{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim2);margin-top:3px;font-weight:700}

  /* ---------- work grid ---------- */
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.2vw,16px);margin-top:clamp(14px,2.2vh,26px)}
  .tile{position:relative;display:block;aspect-ratio:16/9;border-radius:clamp(11px,1.2vw,17px);
    overflow:hidden;border:1px solid var(--rule);background:#061219;text-decoration:none;cursor:pointer;
    transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .4s}
  .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    filter:saturate(.92) contrast(1.04);transition:transform .7s cubic-bezier(.22,1,.36,1),filter .4s}
  .tile::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background:linear-gradient(to top,rgba(1,7,10,.97) 0%,rgba(1,7,10,.90) 22%,rgba(1,7,10,.55) 44%,rgba(1,7,10,.12) 66%,transparent 82%);
    opacity:.22;transition:opacity .4s}
  .tile:hover,.tile:focus-visible{transform:translateY(-5px);border-color:rgba(103,232,240,.7);
    box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 0 1px rgba(103,232,240,.3);outline:none}
  .tile:hover img,.tile:focus-visible img{transform:scale(1.07);filter:saturate(1) contrast(1.02) brightness(.88)}
  .tile:hover::after,.tile:focus-visible::after{opacity:1}
  .tmeta{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(11px,1.6vw,20px);
    opacity:0;transform:translateY(12px);transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1)}
  .tile:hover .tmeta,.tile:focus-visible .tmeta{opacity:1;transform:none}
  .tmeta b{display:block;color:#fff;font-size:clamp(12.5px,1.35vw,17px);font-weight:800;
    letter-spacing:-.012em;text-transform:uppercase;line-height:1.14;
    text-shadow:0 2px 14px rgba(0,0,0,.95),0 1px 3px rgba(0,0,0,.9)}
  .tmeta span{display:block;color:#a6f4f8;font-size:clamp(9px,.95vw,11px);font-weight:800;
    letter-spacing:.2em;text-transform:uppercase;margin-top:6px;
    text-shadow:0 2px 12px rgba(0,0,0,.95),0 1px 3px rgba(0,0,0,.9)}
  .play{position:absolute;top:clamp(8px,1.1vw,14px);right:clamp(8px,1.1vw,14px);z-index:3;
    width:clamp(24px,2.6vw,34px);height:clamp(24px,2.6vw,34px);border-radius:50%;
    border:1px solid rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;
    opacity:0;transform:scale(.8);transition:opacity .35s,transform .35s;backdrop-filter:blur(4px);
    background:rgba(4,24,29,.5)}
  .play::before{content:"";border-left:8px solid #fff;border-top:5px solid transparent;
    border-bottom:5px solid transparent;margin-left:2px}
  .tile:hover .play,.tile:focus-visible .play{opacity:1;transform:none}

  /* the press strip on row three */
  .tile.wide{grid-column:1 / -1;aspect-ratio:7/1;height:auto}
  .tile.wide img{object-position:center 26%}
  .tile.wide::after{opacity:.92;
    background:linear-gradient(to right,rgba(1,7,10,.96) 0%,rgba(1,7,10,.8) 34%,rgba(1,7,10,.2) 64%,transparent 84%)}
  .tile.wide:hover::after{opacity:1}
  .tile.wide .tmeta{opacity:1;transform:none;bottom:auto;top:50%;translate:0 -50%;right:auto;
    width:min(64%,460px);display:flex;align-items:baseline;gap:clamp(8px,1.4vw,18px);flex-wrap:wrap}
  .tile.wide .tmeta b{font-size:clamp(12px,1.3vw,16px)}
  .tile.wide .tmeta span{margin-top:0}
  .tile.wide .play{top:50%;translate:0 -50%;opacity:.55}
  .tile.wide:hover .play{opacity:1}

  /* two-col */
  .duo2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3.4vw,54px);margin-top:clamp(18px,3.2vh,36px);max-width:840px}
  .duo2 b{display:block;font-size:clamp(14px,1.5vw,17px);margin-bottom:6px;font-weight:800;letter-spacing:-.01em}
  .duo2 p{color:var(--dim);font-size:clamp(12.5px,1.25vw,14.5px);line-height:1.6}

  /* page 02 */
  .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,44px);
    margin-top:clamp(18px,3.2vh,36px);max-width:1080px}
  .trio b{display:block;font-size:clamp(14px,1.5vw,17.5px);margin-bottom:7px;font-weight:800;letter-spacing:-.012em}
  .trio p{color:var(--dim);font-size:clamp(12.5px,1.22vw,14.5px);line-height:1.62}
  .chips{display:flex;flex-wrap:wrap;gap:clamp(6px,.8vw,10px);margin-top:clamp(20px,3.4vh,40px)}
  .chips span{border:1px solid var(--rule);border-radius:999px;padding:clamp(7px,1vw,10px) clamp(13px,1.6vw,20px);
    font-size:clamp(9px,1vw,11px);font-weight:800;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink);opacity:.72;background:var(--panel-glass);transition:opacity .3s,border-color .3s,transform .3s}
  .chips span:hover{opacity:1;border-color:rgba(103,232,240,.6);transform:translateY(-2px)}
  @media (max-width:860px){ .trio{grid-template-columns:1fr;gap:16px} }

  /* phases: solid glass, no backdrop blur (it was picking up the glow's edge) */
  .phases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,20px);margin-top:clamp(18px,3.2vh,38px)}
  .ph{border:1px solid var(--rule);border-radius:16px;padding:clamp(15px,2.3vw,27px);
    background:linear-gradient(165deg,rgba(255,255,255,.075),rgba(255,255,255,.028));
    position:relative;overflow:hidden;transition:border-color .35s,transform .35s}
  .ph::after{content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
    background:linear-gradient(160deg,rgba(103,232,240,.16),transparent 55%);opacity:0;transition:opacity .35s}
  .ph:hover{transform:translateY(-5px);border-color:rgba(103,232,240,.5)}
  .ph:hover::after{opacity:1}
  .ph i{font-style:normal;font-size:clamp(26px,3.6vw,46px);font-weight:800;letter-spacing:-.04em;
    color:transparent;-webkit-text-stroke:1px var(--aqua);opacity:.65;display:block;line-height:1}
  .ph h3{font-size:clamp(14px,1.6vw,19px);font-weight:800;letter-spacing:-.01em;margin:clamp(7px,1.3vh,13px) 0 7px;text-transform:uppercase}
  .ph p{color:var(--dim);font-size:clamp(11.5px,1.15vw,13.5px);line-height:1.58}

  /* services explorer */
  .make{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(18px,3.4vw,52px);
    margin-top:clamp(14px,2.4vh,30px);align-items:start}
  .slist{border-top:1px solid var(--rule)}
  .srow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
    background:none;border:0;border-bottom:1px solid var(--rule);color:var(--ink);font-family:inherit;
    padding:clamp(8px,1.4vh,14px) 2px;cursor:pointer;text-align:left;
    font-size:clamp(13px,1.7vw,21px);font-weight:800;letter-spacing:-.018em;text-transform:uppercase;
    opacity:.44;transition:opacity .3s,padding-left .3s,color .3s}
  .srow:hover{opacity:.8;padding-left:9px}
  .srow.on{opacity:1;color:var(--aqua);padding-left:9px}
  .srow em{font-style:normal;font-size:9px;letter-spacing:.18em;opacity:.55;font-weight:700;white-space:nowrap}
  .sdetail{border:1px solid var(--rule);border-radius:18px;padding:clamp(17px,2.6vw,30px);
    background:rgba(4,20,26,.5);min-height:clamp(170px,28vh,250px);position:relative;overflow:hidden}
  .sdetail::before{content:"";position:absolute;inset:0;background:linear-gradient(150deg,rgba(103,232,240,.14),transparent 60%);pointer-events:none}
  .sdetail .k{position:relative;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--aqua);font-weight:700}
  .sdetail h3{position:relative;font-size:clamp(19px,2.6vw,32px);font-weight:800;letter-spacing:-.025em;
    text-transform:uppercase;margin:9px 0 clamp(7px,1.3vh,13px)}
  .sdetail p{position:relative;color:rgba(255,255,255,.82);font-size:clamp(12.5px,1.3vw,15px);line-height:1.65}
  .fade{animation:sw .45s cubic-bezier(.22,1,.36,1)}
  @keyframes sw{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

  /* trusted */
  .brands{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,.9vw,11px);margin-top:clamp(16px,2.8vh,32px)}
  .brands span{border:1px solid var(--rule);border-radius:11px;background:var(--panel-glass);
    padding:clamp(11px,2vh,21px) 8px;text-align:center;font-size:clamp(8.5px,.95vw,11.5px);
    font-weight:800;letter-spacing:.12em;color:var(--ink);opacity:.78;
    transition:opacity .3s,border-color .3s,transform .3s}
  .brands span:hover{opacity:1;border-color:rgba(103,232,240,.6);transform:translateY(-3px)}

  /* clocks */
  .clocks{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,2vw,26px);margin-top:clamp(16px,3.2vh,38px)}
  .cb{text-align:center}
  .face{position:relative;width:min(116px,100%);aspect-ratio:1;margin:0 auto clamp(8px,1.4vh,14px);
    border:1px solid var(--rule);border-radius:50%;background:var(--panel-glass)}
  .face .h,.face .m{position:absolute;left:50%;top:50%;transform-origin:50% 100%;background:var(--aqua);border-radius:2px}
  .face .h{width:2.5px;height:26%;margin-left:-1.25px;margin-top:-26%}
  .face .m{width:1.5px;height:37%;margin-left:-.75px;margin-top:-37%;opacity:.85}
  .face .pin{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:var(--aqua);transform:translate(-50%,-50%)}
  .cb b{display:block;font-size:clamp(8.5px,.95vw,10.5px);letter-spacing:.14em;font-weight:800}
  .cb span{display:block;font-size:9.5px;color:var(--dim2);margin-top:3px;letter-spacing:.06em;font-weight:600}

  /* cta */
  .cta{text-align:center}
  .cta h2{max-width:none;margin:0 auto;font-size:clamp(28px,6vw,74px)}
  .cta .row{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:clamp(18px,3.2vh,32px)}
  .ghost{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);
    font-size:clamp(10px,1.1vw,11.5px);font-weight:800;letter-spacing:.22em;text-transform:uppercase;
    padding:11px 24px;border-radius:999px;border:1px solid var(--rule);transition:border-color .3s,color .3s}
  .ghost:hover{border-color:var(--aqua);color:var(--aqua)}
  .foot{margin-top:clamp(20px,3.6vh,40px);padding-top:16px;border-top:1px solid var(--rule);
    display:flex;justify-content:center;gap:clamp(12px,3vw,34px);flex-wrap:wrap;
    font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim2);font-weight:700}

  /* ---------- FAQ (panel 09) ---------- */
  .faq{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1vw,14px) clamp(18px,2.6vw,38px);
    margin-top:clamp(14px,2.4vh,30px);max-width:1080px;align-content:start;align-items:start}
  .faq details{border-top:1px solid var(--rule);padding:clamp(9px,1.3vh,15px) 0}
  .faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:12px;
    font-size:clamp(12.5px,1.35vw,15px);font-weight:800;letter-spacing:-.01em;color:var(--ink);
    transition:color .25s}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";margin-left:auto;font-weight:700;font-size:16px;line-height:1;
    color:var(--aqua);transition:transform .3s ease}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq summary:hover{color:var(--aqua)}
  .faq details p{margin-top:9px;padding-right:26px;font-size:clamp(11.5px,1.15vw,13.5px);
    line-height:1.65;color:var(--dim2)}
  @media (max-width:860px){ .faq{grid-template-columns:1fr} }

  .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(7px,1.1vw,14px);margin-top:clamp(14px,2.4vh,28px);max-width:740px}
  .strip figure{border-radius:12px;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--rule);position:relative}
  .strip img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.82) contrast(1.05);
    transition:transform .6s cubic-bezier(.22,1,.36,1)}
  .strip figure:hover img{transform:scale(1.07)}

  .progress{position:fixed;z-index:21;left:0;top:0;height:2px;width:0;
    background:linear-gradient(90deg,var(--aqua),var(--aqua-2));transition:width .35s ease;box-shadow:0 0 12px rgba(103,232,240,.7)}

  /* ---------- modals ---------- */
  .modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
    padding:clamp(16px,4vw,60px);background:rgba(1,6,9,.94);backdrop-filter:blur(14px);
    opacity:0;transition:opacity .35s ease}
  .modal.open{opacity:1}
  .modal[hidden]{display:none}
  .m-close{position:absolute;top:clamp(12px,2.5vw,26px);right:clamp(12px,2.5vw,26px);
    width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
    background:rgba(255,255,255,.07);color:#fff;font-size:22px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;z-index:3;
    transition:background .25s,border-color .25s,transform .25s}
  .m-close:hover{background:rgba(255,255,255,.16);border-color:var(--aqua);transform:rotate(90deg)}

  .lb-wrap{width:min(1180px,100%);transform:scale(.96);transition:transform .4s cubic-bezier(.22,1,.36,1)}
  .modal.open .lb-wrap{transform:none}
  .lb-stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
    background:#000;box-shadow:0 40px 110px rgba(0,0,0,.7),0 0 0 1px rgba(103,232,240,.25)}
  .lb-stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .lb-cap{display:flex;gap:14px;align-items:baseline;margin-top:15px;
    font-size:13px;font-weight:700;letter-spacing:.04em;color:#fff}
  .lb-cap em{font-style:normal;color:#a6f4f8;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:800}

  /* booking */
  .bk-wrap{width:min(860px,100%);max-height:100%;overflow-y:auto;border-radius:18px;
    border:1px solid rgba(103,232,240,.22);background:linear-gradient(165deg,#07161c,#040d11);
    box-shadow:0 40px 120px rgba(0,0,0,.75);padding:clamp(22px,3.4vw,44px);
    transform:scale(.96);transition:transform .4s cubic-bezier(.22,1,.36,1);scrollbar-width:none}
  .bk-wrap::-webkit-scrollbar{display:none}
  .modal.open .bk-wrap{transform:none}
  .bk-wrap h3{font-size:clamp(24px,3.4vw,40px);font-weight:800;letter-spacing:-.03em;text-transform:uppercase;line-height:1}
  .bk-wrap .k{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--aqua);font-weight:800;margin-bottom:10px}
  .bk-wrap .lede{color:rgba(255,255,255,.62);font-size:14px;margin:12px 0 22px;max-width:52ch}
  #bkForm{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
  #bkForm .f{display:flex;flex-direction:column;min-width:0}
  #bkForm .f.full{grid-column:1 / -1}
  #bkForm label{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:6px;font-weight:700}
  #bkForm input,#bkForm select,#bkForm textarea{background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.14);color:#fff;padding:11px 13px;font-size:14px;
    font-family:inherit;border-radius:8px;outline:none;transition:border-color .25s,background .25s;min-width:0}
  #bkForm input:focus,#bkForm select:focus,#bkForm textarea:focus{border-color:var(--aqua);background:rgba(103,232,240,.07)}
  /* phones zoom into any box with text under 16px and stay zoomed */
  @media (pointer:coarse){ #bkForm input,#bkForm select,#bkForm textarea{font-size:16px} }
  #bkForm textarea{resize:none;min-height:88px}
  #bkForm option{background:#07161c;color:#fff}
  #bkForm .optin{margin-top:2px}
  #bkForm .cb{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin:0}
  #bkForm .cb input{width:17px;height:17px;flex:0 0 17px;margin:1px 0 0;padding:0;background:none;border:0;border-radius:0;accent-color:var(--aqua);cursor:pointer}
  #bkForm .cb span{font-size:12.5px;line-height:1.45;letter-spacing:0;text-transform:none;font-weight:400;color:rgba(255,255,255,.62)}
  #bkForm .send{grid-column:1 / -1;margin-top:6px;justify-content:center}
  .bk-alt{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);
    font-size:12.5px;color:rgba(255,255,255,.5)}
  .bk-alt a{color:#fff;text-decoration:none;border-bottom:1px solid var(--aqua)}
  .bk-done{text-align:center;padding:clamp(20px,5vh,54px) 0}
  .bk-done h3{font-size:clamp(30px,5vw,58px);
    background:linear-gradient(120deg,var(--aqua),var(--aqua-2) 60%,#fff);
    -webkit-background-clip:text;background-clip:text;color:transparent}
  .bk-done p{color:rgba(255,255,255,.62);margin:14px 0 26px;font-size:14.5px}
  @media (max-width:640px){ #bkForm{grid-template-columns:1fr} }

  /* ---------- responsive ---------- */
  @media (max-width:980px){
    .make{grid-template-columns:1fr;gap:16px}
    .brands{grid-template-columns:repeat(3,1fr)}
    .clocks{grid-template-columns:repeat(3,1fr)}
    .grid{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-height:660px) and (min-width:641px){
    .tile{aspect-ratio:auto;height:clamp(96px,24vh,150px)}
    .tile.wide{aspect-ratio:11/1}
    .panel h2{font-size:clamp(20px,3vw,34px)}
  }
  @media (max-width:640px){
    body{overflow:auto}
    .deck{height:auto;overflow:visible;scroll-snap-type:none}
    .panel{min-height:auto;padding:84px 20px 58px;scroll-snap-align:none}
    .dots,.enter,.hero-cue{display:none}
    .duo2,.phases,.strip{grid-template-columns:1fr}
    .grid{grid-template-columns:1fr}
    .tile.wide{grid-column:auto;aspect-ratio:16/9;height:auto}
    .tile.wide .tmeta{top:auto;bottom:0;translate:none;width:auto;right:0}
    .tile.wide::after{background:linear-gradient(to top,rgba(1,7,10,.97) 0%,rgba(1,7,10,.9) 22%,rgba(1,7,10,.55) 44%,transparent 82%)}
    .brands{grid-template-columns:repeat(2,1fr)}
    .clocks{grid-template-columns:repeat(2,1fr)}
    .subj{opacity:0!important}
    h1{max-width:none}
    .rise{opacity:1;transform:none}
    .tmeta{opacity:1;transform:none}
    .tile::after{opacity:1}
    .lb-cap{justify-content:center}
  }
  @media (max-height:470px) and (min-width:641px){
    .deck{scroll-snap-type:none}
    .panel{min-height:470px}
  }
  @media (prefers-reduced-motion:reduce){
    .rise{opacity:1!important;transform:none!important}
    .chev,.aurora b,.aurora i,#sj-lens img{animation:none}
    .deck{scroll-behavior:auto}
  }


  /* ================= additions for the rebuilt pages ================= */

  /* a grid that looks deliberate whether it holds one tile or six */
  .grid[data-n="1"]{grid-template-columns:minmax(0,min(720px,100%));max-width:720px}
  .grid[data-n="2"]{grid-template-columns:repeat(2,1fr);max-width:1020px}
  .grid[data-n="4"]{grid-template-columns:repeat(2,1fr);max-width:1020px}
  @media (min-width:981px){ .grid[data-n="4"]{grid-template-columns:repeat(2,1fr)} }

  /* posters are portrait; sit them on a blurred bed of themselves so the row stays 16:9 */
  .tile.poster{background:#040c11}
  .tile.poster .pbg{position:absolute;inset:-12%;background-size:cover;background-position:center;
    filter:blur(26px) saturate(.6) brightness(.42);transform:scale(1.1)}
  .tile.poster img{position:relative;inset:auto;width:auto;height:100%;margin:0 auto;display:block;
    object-fit:contain;filter:none;box-shadow:0 14px 40px rgba(0,0,0,.6)}
  .tile.poster:hover img,.tile.poster:focus-visible img{transform:scale(1.04);filter:none}
  .tile.poster::after{opacity:.5}

  /* a category that has nothing in it yet says so honestly */
  .soon{border:1px dashed var(--rule);border-radius:clamp(11px,1.2vw,17px);background:var(--panel-glass);
    padding:clamp(22px,3.4vw,42px);max-width:720px;margin-top:clamp(14px,2.2vh,26px)}
  .soon b{display:block;font-size:clamp(13px,1.4vw,16px);font-weight:800;letter-spacing:-.01em;margin-bottom:8px}
  .soon p{color:var(--dim);font-size:clamp(12.5px,1.25vw,14.5px);line-height:1.62;max-width:52ch}

  /* pager, for a category holding more than six */
  .pager{display:flex;align-items:center;gap:12px;margin-top:clamp(12px,2vh,20px)}
  .pager button{width:34px;height:34px;border-radius:50%;border:1px solid var(--rule);background:var(--panel-glass);
    color:var(--ink);cursor:pointer;font:inherit;font-size:13px;line-height:1;
    display:flex;align-items:center;justify-content:center;transition:border-color .3s,opacity .3s,transform .25s}
  .pager button:hover:not(:disabled){border-color:var(--aqua);transform:translateY(-2px)}
  .pager button:disabled{opacity:.28;cursor:default}
  .pager em{font-style:normal;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
    color:var(--dim2);font-weight:800}
  .gpage{display:none}
  .gpage.on{display:grid}

  /* spec columns, used by the lens page */
  .specs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,3.2vw,50px);
    margin-top:clamp(18px,3.2vh,34px);max-width:960px}
  .specs h3{font-size:clamp(11px,1.1vw,12px);letter-spacing:.24em;text-transform:uppercase;
    color:var(--aqua);font-weight:800;margin-bottom:12px}
  .specs ul{list-style:none;display:flex;flex-direction:column;gap:9px}
  .specs li{color:var(--dim);font-size:clamp(12.5px,1.22vw,14.5px);line-height:1.5;
    padding-left:17px;position:relative}
  .specs li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1px;background:var(--aqua);opacity:.8}
  @media (max-width:820px){ .specs{grid-template-columns:1fr;gap:22px} }

  /* a short stat/credit row that is not the hero */
  .creds{display:grid;grid-template-columns:repeat(3,1fr);
    gap:clamp(14px,2.4vw,30px);margin-top:clamp(18px,3vh,32px);max-width:1060px}
  @media (max-width:900px){ .creds{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .creds{grid-template-columns:1fr} }
  .creds div{border-top:1px solid var(--rule);padding-top:13px}
  .creds b{display:block;font-size:clamp(12.5px,1.3vw,15px);font-weight:800;letter-spacing:-.01em;margin-bottom:5px}
  .creds p{color:var(--dim);font-size:clamp(11.5px,1.15vw,13.5px);line-height:1.58}

  .lead{color:var(--dim);font-size:clamp(13px,1.35vw,16px);line-height:1.62;max-width:56ch;
    margin-top:clamp(11px,2vh,20px)}
  .row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(10px,1.6vw,18px);margin-top:clamp(16px,2.6vh,28px)}

  @media (max-width:860px){
    .grid{grid-template-columns:repeat(2,1fr)}
    .grid[data-n="1"]{grid-template-columns:1fr}
  }
  @media (max-width:560px){
    .grid{grid-template-columns:1fr}
  }

  /* ---------- cross-page nav in the top bar ---------- */
  .rightgrp{display:flex;align-items:center;gap:clamp(10px,1.8vw,26px)}
  .pagenav{display:flex;align-items:center;gap:clamp(9px,1.5vw,20px)}
  .navlink{text-decoration:none;color:var(--ink);opacity:.55;
    font-size:clamp(8.5px,.95vw,10px);font-weight:800;letter-spacing:.2em;text-transform:uppercase;
    padding:5px 0;border-bottom:1px solid transparent;transition:opacity .3s,border-color .3s,color .3s;white-space:nowrap}
  .navlink:hover{opacity:1;border-color:var(--aqua)}
  .navlink.on{opacity:1;color:var(--aqua);border-color:var(--aqua)}
  @media (max-width:1100px){ .pagenav{display:none} }
  @media (max-width:640px){ .bar .enter{display:none} }
  /* the single invitation into JabrielOS, at the very bottom of the page */
  .foot-os{display:flex;justify-content:center;margin-top:clamp(14px,2vh,22px)}
  .foot-os .enter{opacity:.72;font-size:clamp(9px,1vw,10.5px);padding:9px 17px}
  .foot-os .enter:hover{opacity:1}
  /* phones: this is the only way from the classic site back to the front door, so it stays, at a size a thumb can hit */
  @media (max-width:640px){ .foot-os .enter{display:inline-flex;font-size:11px;padding:12px 20px} }

  /* the closing panel centres itself */
  .inner.cta{text-align:center;display:flex;flex-direction:column;align-items:center}
  .inner.cta h2{max-width:none}

  /* ---------- poster wall: one strip of eight, so it never outgrows a panel ---------- */
  .posters{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(7px,1vw,13px);
    margin-top:clamp(14px,2.2vh,26px);max-width:min(560px,100%)}
  .posters figure{position:relative;aspect-ratio:2/3;border-radius:clamp(7px,.8vw,11px);overflow:hidden;
    border:1px solid var(--rule);background:#040c11;
    transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .35s,box-shadow .4s}
  .posters figure:hover{transform:translateY(-6px);border-color:rgba(103,232,240,.7);
    box-shadow:0 18px 44px rgba(0,0,0,.55);z-index:2}
  .posters .pbg{position:absolute;inset:-14%;background-size:cover;background-position:center;
    filter:blur(20px) saturate(.55) brightness(.42);transform:scale(1.12)}
  .posters img{position:relative;display:block;width:100%;height:100%;object-fit:contain}
  .posters figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:8px 8px 7px;
    font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;line-height:1.24;
    color:#dff8fb;background:linear-gradient(to top,rgba(1,7,10,.96),rgba(1,7,10,.75) 55%,transparent);
    opacity:0;transform:translateY(6px);transition:opacity .3s,transform .35s}
  .posters figure:hover figcaption{opacity:1;transform:none}
  @media (max-width:860px){ .posters{max-width:none} }

  /* ---------- inline players, for videos with no usable thumbnail ---------- */
  .players{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,2vw,26px);
    margin-top:clamp(14px,2.2vh,26px);max-width:1020px}
  .players figure{position:relative;aspect-ratio:16/9;border-radius:clamp(11px,1.2vw,17px);
    overflow:hidden;border:1px solid var(--rule);background:#000}
  .players iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .players>div{min-width:0}
  .players figcaption{margin-top:9px;font-size:clamp(9px,.95vw,11px);font-weight:800;
    letter-spacing:.2em;text-transform:uppercase;color:var(--dim2)}
  .players figcaption b{color:var(--ink);display:block;letter-spacing:-.01em;text-transform:none;
    font-size:clamp(12.5px,1.3vw,15px);margin-bottom:4px}
  @media (max-width:820px){ .players{grid-template-columns:1fr} }

  /* ---------- short viewports: keep every panel inside one screen ----------
     A snapping deck only works if the content fits the screen it snaps to, so
     the grids and the type step down as the window gets shorter. */
  @media (min-width:861px) and (max-height:940px){
    .panel h2{font-size:clamp(20px,2.9vw,38px)}
    .gwrap{max-width:1000px}
    .creds{gap:clamp(11px,1.8vw,22px)}
    .players{max-width:900px}
  }
  @media (min-width:861px) and (max-height:820px){
    .gwrap{max-width:880px}
    .grid[data-n="1"]{max-width:600px}
    .grid[data-n="2"]{max-width:880px}
    .grid.mv{max-width:700px}
    .panel .sub{margin-top:10px;line-height:1.55}
    .creds p{font-size:12.5px;line-height:1.5}
    .players{max-width:800px}
    .posters{max-width:880px}
  }
  @media (min-width:861px) and (max-height:730px){
    .panel h1{font-size:clamp(26px,4.6vw,54px)}
    .hero-meta{margin-top:14px;padding-top:12px;gap:clamp(12px,2.2vw,30px)}
    .hero-meta div b{font-size:clamp(15px,1.8vw,21px)}
    .panel h2{font-size:clamp(18px,2.4vw,30px)}
    .gwrap{max-width:740px}
    .grid[data-n="1"]{max-width:500px}
    .grid[data-n="2"]{max-width:740px}
    .grid.mv{max-width:540px}
    .grid{gap:9px}
    .eyebrow{margin-bottom:8px}
    .players{max-width:640px}
    .players figcaption{margin-top:7px}
    .posters{max-width:740px}
    .specs{gap:18px 34px}
    .specs li{font-size:12.5px}
  }
  @media (min-width:861px) and (max-height:640px){
    .gwrap{max-width:620px}
    .grid[data-n="1"]{max-width:420px}
    .panel .sub{font-size:12.5px}
    .creds{gap:9px 18px}
  }

  /* ---------- tiles with no artwork yet: a branded card, never a broken frame ---------- */
  .tile .nz{display:none}
  .tile.noart{background:linear-gradient(150deg,#0a3a47 0%,#062028 52%,#04121a 100%)}
  .tile.noart img{display:none}
  .tile.noart .nz{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
    align-items:center;justify-content:flex-end;text-align:center;
    padding:clamp(11px,1.6vw,20px);gap:6px}
  .tile.noart .nz b{font-size:clamp(12.5px,1.35vw,17px);font-weight:800;letter-spacing:-.012em;
    text-transform:uppercase;line-height:1.14;color:#fff}
  .tile.noart .nz em{font-style:normal;font-size:clamp(9px,.95vw,11px);font-weight:800;
    letter-spacing:.2em;text-transform:uppercase;color:#a6f4f8}
  .tile.noart .tmeta{display:none}
  .tile.noart::after{background:radial-gradient(ellipse 90% 70% at 80% 10%,rgba(103,232,240,.16),transparent 70%);opacity:1}

  .tile .nsfw{position:absolute;top:clamp(8px,1.1vw,14px);left:clamp(8px,1.1vw,14px);z-index:4;
    font-size:9px;font-weight:800;letter-spacing:.18em;padding:4px 8px;border-radius:5px;
    background:rgba(255,107,107,.9);color:#2a0606}

  /* ---------- films: three across, features as tall posters ---------- */
  .grid.films{grid-template-columns:repeat(3,1fr);max-width:1180px}
  /* the feature posters keep the same 16:9 frame as everything else and are cropped to
     fill it, so there is no blank space down the sides */
  .grid.films .tile.poster .pbg{display:none}
  .grid.films .tile.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.04)}
  .grid.films .tile.poster:hover img{transform:scale(1.07);filter:saturate(1) contrast(1.02) brightness(.88)}

  /* ---------- three wide tiles read better than three narrow ones ---------- */
  .grid.wide3{grid-template-columns:repeat(3,1fr);max-width:1180px}

  /* ---------- music videos: four, bigger ---------- */
  .grid.mv{grid-template-columns:repeat(2,1fr);max-width:min(780px,100%)}


  /* ---------- speaker pulse, for the music video panel ---------- */
  .pulse{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
    transition:opacity 1.2s cubic-bezier(.4,0,.2,1);overflow:hidden}
  .pulse.on{opacity:1}
  .pulse s{position:absolute;left:50%;top:54%;display:block;border-radius:50%;
    border:2px solid rgba(103,232,240,.85);box-shadow:0 0 34px rgba(103,232,240,.5),inset 0 0 34px rgba(103,232,240,.3);
    transform:translate(-50%,-50%) scale(0);
    width:56vmax;height:56vmax;animation:ring 1.7s cubic-bezier(.16,.75,.3,1) infinite}
  .pulse s:nth-child(3){animation-delay:.566s}
  .pulse s:nth-child(4){animation-delay:1.133s}
  @keyframes ring{
    0%{transform:translate(-50%,-50%) scale(.1);opacity:0}
    10%{opacity:1}
    100%{transform:translate(-50%,-50%) scale(1.75);opacity:0}
  }
  .pulse b{position:absolute;left:50%;top:54%;display:block;width:74vmax;height:74vmax;
    transform:translate(-50%,-50%);border-radius:50%;filter:blur(58px);mix-blend-mode:screen;
    background:radial-gradient(circle,rgba(103,232,240,.62),rgba(20,170,200,.26) 40%,transparent 70%);
    animation:thump 1.7s cubic-bezier(.2,.95,.35,1) infinite}
  @keyframes thump{0%,100%{transform:translate(-50%,-50%) scale(.82);opacity:.5}
    14%{transform:translate(-50%,-50%) scale(1.16);opacity:1}
    42%{transform:translate(-50%,-50%) scale(.93);opacity:.72}}
  .pulse i{position:absolute;left:0;right:0;bottom:0;height:46vh;display:flex;align-items:flex-end;
    justify-content:center;gap:clamp(4px,.7vw,11px);opacity:.85;padding:0 3vw;mix-blend-mode:screen}
  .pulse i u{display:block;flex:1;max-width:44px;border-radius:5px 5px 0 0;
    background:linear-gradient(180deg,rgba(190,240,255,.95),rgba(103,232,240,.5) 42%,rgba(103,232,240,0));
    box-shadow:0 0 22px rgba(103,232,240,.55);
    animation:bar 1.13s cubic-bezier(.3,.9,.35,1) infinite}
  /* stagger every bar so the row reads as a spectrum, not a single block */
  .pulse i u:nth-child(3n){animation-duration:.85s}
  .pulse i u:nth-child(3n+1){animation-duration:1.42s}
  .pulse i u:nth-child(4n){animation-delay:-.38s}
  .pulse i u:nth-child(4n+2){animation-delay:-.72s}
  .pulse i u:nth-child(5n){animation-delay:-.21s}
  .pulse i u:nth-child(5n+3){animation-delay:-.95s}
  @keyframes bar{0%,100%{height:7%}18%{height:62%}36%{height:19%}58%{height:88%}78%{height:31%}}
  @media (prefers-reduced-motion:reduce){
    .pulse s,.pulse b,.pulse i u{animation:none}
  }

  /* ---------- portrait video in the lightbox, no pillarbox ---------- */
  .lb-wrap.portrait{width:auto;max-width:min(520px,100%);margin:0 auto}
  .lb-wrap.portrait .lb-stage{aspect-ratio:9/16;max-height:78vh;width:auto;margin:0 auto}

  @media (max-width:860px){
    .grid.films,.grid.wide3,.grid.mv{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:560px){
    .grid.films,.grid.wide3,.grid.mv{grid-template-columns:1fr}
  }

  /* ---------- short-viewport overrides, last so they win over the grid rules above ---------- */
  @media (min-width:861px) and (max-height:940px){
    .grid.mv{max-width:min(760px,100%)}
    .grid.wide3{max-width:1080px}
  }
  @media (min-width:861px) and (max-height:820px){
    .grid.mv{max-width:min(680px,100%)}
    .grid.wide3{max-width:980px}
  }
  @media (min-width:861px) and (max-height:730px){
    .grid.mv{max-width:min(560px,100%)}
    .grid.wide3{max-width:860px}
  }
  @media (min-width:861px) and (max-height:640px){
    .grid.mv{max-width:min(470px,100%)}
    .grid.wide3{max-width:720px}
  }

  /* ---------- the lens travels the right-hand corner, turning as the deck advances ---------- */
  #sj-lens{transition:opacity 1s cubic-bezier(.4,0,.2,1),
                      transform 1.6s cubic-bezier(.22,1,.36,1),
                      right 1.6s cubic-bezier(.22,1,.36,1),
                      bottom 1.6s cubic-bezier(.22,1,.36,1),
                      width 1.6s cubic-bezier(.22,1,.36,1)}
  [data-panel="0"] #sj-lens.on{right:-4%;bottom:4%;transform:rotate(-2deg)}
  /* 01 The glass: push the front element forward and face-on so the glass reads */
  [data-panel="1"] #sj-lens.on{right:-13%;bottom:2%;transform:rotate(2deg) scale(1.34)}
  /* 02 X-Flare: tilted up, with the flare sweeping across */
  [data-panel="2"] #sj-lens.on{right:-6%;bottom:6%;transform:rotate(-17deg) scale(1.06)}
  [data-panel="3"] #sj-lens.on{right:2%;bottom:24%;transform:rotate(17deg) scale(.7)}
  [data-panel="4"] #sj-lens.on{right:-5%;bottom:2%;transform:rotate(-7deg) scale(.95)}
  [data-panel="5"] #sj-lens.on{right:-2%;bottom:12%;transform:rotate(22deg) scale(.8)}
  [data-panel="6"] #sj-lens.on{right:-6%;bottom:-2%;transform:rotate(-4deg)}

  /* ---------- poster tiles fill their frame, no letterboxing ---------- */
  .posters .tile{cursor:pointer;aspect-ratio:2/3;border-radius:clamp(7px,.8vw,11px)}
  .posters .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none}
  .posters .tile.c-right img{object-position:58% center}
  .posters .tile:hover img{transform:scale(1.05);filter:brightness(.82)}
  .posters .cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:9px 9px 8px;
    opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .4s cubic-bezier(.22,1,.36,1);
    font-size:clamp(8.5px,.85vw,10px);font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    line-height:1.24;color:#dff8fb;text-align:left;
    background:linear-gradient(to top,rgba(1,7,10,.96),rgba(1,7,10,.7) 58%,transparent)}
  .posters .tile:hover .cap,.posters .tile:focus-visible .cap{opacity:1;transform:none}

  /* a panel that only earns its place on a phone */
  @media (min-width:861px){ .panel.phone-only{display:none} }

  /* ---------- client wall: grouped columns read faster than one long chip run ---------- */
  .wall{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.6vw,40px);
    margin-top:clamp(16px,2.6vh,30px);max-width:1100px}
  .wall h3{font-size:clamp(9px,.95vw,10.5px);letter-spacing:.26em;text-transform:uppercase;
    color:var(--aqua);font-weight:800;margin-bottom:11px;padding-bottom:9px;border-bottom:1px solid var(--rule)}
  .wall ul{list-style:none;display:flex;flex-direction:column;gap:6px;padding:0}
  .wall li{color:var(--ink);opacity:.8;font-size:clamp(11.5px,1.15vw,13.5px);font-weight:700;
    letter-spacing:-.005em;transition:opacity .25s,color .25s}
  .wall li:hover{opacity:1;color:var(--aqua)}
  @media (max-width:900px){ .wall{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:460px){ .wall{grid-template-columns:1fr;gap:14px} .wall ul{gap:4px} }
  @media (min-width:861px) and (max-height:820px){ .wall li{font-size:12px;gap:4px} .wall ul{gap:4px} }
  @media (min-width:861px) and (max-height:730px){ .wall li{font-size:11.5px} .wall h3{margin-bottom:8px;padding-bottom:6px} }

  @media (max-width:860px){ .desk-only{display:none} }

  @media (min-width:861px) and (max-height:1000px){ .posters{max-width:min(470px,100%)} }
  @media (min-width:861px) and (max-height:880px){ .posters{max-width:min(430px,100%)} }
  @media (min-width:861px) and (max-height:790px){ .posters{max-width:min(380px,100%)} }
  @media (min-width:861px) and (max-height:700px){ .posters{max-width:min(320px,100%)} }

  /* ---------- rainbow flare, for the X-Flare panel ---------- */
  .flare{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;
    transition:opacity 1.1s cubic-bezier(.4,0,.2,1);overflow:hidden;mix-blend-mode:screen}
  .flare.on{opacity:1}
  .flare i{position:absolute;left:-40%;top:50%;width:180%;height:clamp(60px,11vh,130px);
    display:block;transform:translateY(-50%) rotate(-8deg);filter:blur(16px);
    background:linear-gradient(90deg,
      transparent 0%, rgba(255,90,90,.0) 8%,
      rgba(255,96,96,.55) 22%, rgba(255,196,88,.6) 33%, rgba(126,255,164,.55) 45%,
      rgba(103,232,240,.7) 57%, rgba(126,150,255,.55) 68%, rgba(208,120,255,.5) 79%,
      rgba(255,120,200,.0) 92%, transparent 100%);
    animation:flaresweep 7.5s cubic-bezier(.5,0,.5,1) infinite}
  .flare b{position:absolute;left:-40%;top:50%;width:180%;height:2px;display:block;
    transform:translateY(-50%) rotate(-8deg);filter:blur(1.5px);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.9) 50%,transparent);
    animation:flaresweep 7.5s cubic-bezier(.5,0,.5,1) infinite}
  @keyframes flaresweep{
    0%{transform:translate(-62%,-50%) rotate(-8deg);opacity:0}
    12%{opacity:1}
    78%{opacity:1}
    100%{transform:translate(62%,-50%) rotate(-8deg);opacity:0}
  }
  @media (prefers-reduced-motion:reduce){ .flare i,.flare b{animation:none} }

  /* the poster wall has the panel to itself now, so let it breathe */

  /* a gentler exit for the dolly, so leaving the panel does not read as a jump */
  #sj-dolly{transition:opacity 1.15s cubic-bezier(.4,0,.2,1),transform 1.5s cubic-bezier(.33,0,.3,1)}
  #sj-dolly:not(.on){transform:translateY(4%) scale(.985)}

  /* ---------- roomy screens ----------
     Width alone is not enough: a wide, short window still has to fit two rows inside
     one panel. Each grid is capped by the height it actually has to play with. */
  @media (min-width:1500px){
    .inner{max-width:1480px}
    .gwrap,.grid.wide3,.grid.films{max-width:min(1420px, calc(2.1 * 100vh - 870px))}
    .grid.mv{max-width:min(1180px, calc(1.6 * 100vh - 740px))}
    .posters{max-width:min(760px, calc(100vh - 470px))}
  }
  @media (min-width:1500px) and (min-height:1150px){
    .panel h2{font-size:clamp(28px,3.1vw,50px)}
  }

  /* ---------- poster wall on a wide screen ----------
     On a laptop the wall sits under the copy. On a big monitor that left half of
     the panel filled up and the right half sat empty, so above 1200px the copy
     and the wall stand side by side and the panel fills out. */
  @media (min-width:1200px){
    .inner.pwall{display:flex;align-items:center;gap:clamp(30px,4vw,74px)}
    .inner.pwall .pw-copy{flex:0 1 42%;min-width:0}
    .inner.pwall .pw-copy .sub{max-width:44ch}
    .inner.pwall .posters{flex:1 1 58%;min-width:0;
      margin-top:0;max-width:min(780px, calc(100vh - 250px))}
  }