/* ==========================================================================
   Arigato Show — site styles
   Type: Helvetica (tracking -25 = -0.025em), Dash Horizon for highlights only.
   Drop licensed Helvetica files in assets/fonts/ (see README); until then the
   system Helvetica / Helvetica Neue is used.
   ========================================================================== */

@font-face{font-family:"Dash Horizon";src:url("../fonts/DashHorizon.otf") format("opentype");font-display:swap}
@font-face{font-family:"Arigato Helvetica";font-weight:300;font-display:swap;
  src:url("../fonts/Helvetica-Light.woff2") format("woff2"),local("Helvetica Light"),local("HelveticaNeue-Light"),local("Helvetica Neue Light")}
@font-face{font-family:"Arigato Helvetica";font-weight:400;font-display:swap;
  src:url("../fonts/Helvetica.woff2") format("woff2"),local("Helvetica"),local("Helvetica Neue")}
@font-face{font-family:"Arigato Helvetica";font-weight:700;font-display:swap;
  src:url("../fonts/Helvetica-Bold.woff2") format("woff2"),local("Helvetica Bold"),local("Helvetica-Bold"),local("HelveticaNeue-Bold")}

:root{
  --blue:#0100a6;          /* matches the kaiju render backdrops exactly */
  --blue-deep:#00008c;
  --blue-line:rgba(255,255,255,.18);
  --red:#ff0000;
  --red-press:#d60000;
  --white:#fff;
  --muted:rgba(255,255,255,.72);
  --sans:"Arigato Helvetica","Helvetica Neue",Helvetica,Arial,sans-serif;
  --jp:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
  --dh:"Dash Horizon","Arigato Helvetica",Helvetica,sans-serif;
  --track:-0.025em;
  /* The only three type sizes on the site */
  --fs-h:clamp(40px,5.6vw,84px);     /* headers */
  --fs-s:clamp(21px,2vw,28px);       /* sub */
  --fs-b:17px;                       /* body */
  --gutter:clamp(20px,5vw,72px);
  --max:1320px;
  --sec:clamp(88px,12vw,168px);
  --r:18px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --hdr:72px;
  color-scheme:dark;       /* single brand look: always Arigato blue */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 16px);-webkit-text-size-adjust:100%;background:var(--blue)}
body{margin:0;background:var(--blue);color:var(--white);font:300 var(--fs-b)/1.55 var(--sans);letter-spacing:var(--track);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
[lang="ja"]{font-family:var(--jp);letter-spacing:0}
em{font-style:italic}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.skip{position:absolute;left:16px;top:-60px;z-index:100;background:#fff;color:var(--blue);padding:10px 16px;border-radius:99px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

.wrap{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Type ---------- */
.dh{font-family:var(--dh);font-weight:400;text-transform:uppercase;letter-spacing:var(--track);line-height:.9}
.h2{font-weight:400;font-size:var(--fs-h);line-height:1;letter-spacing:var(--track);text-wrap:balance}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:400;font-size:var(--fs-b);line-height:1;letter-spacing:var(--track);text-transform:uppercase;color:var(--muted)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(255,0,0,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(255,0,0,0)}100%{box-shadow:0 0 0 0 rgba(255,0,0,0)}}

/* ---------- Buttons ---------- */
.btn{--h:52px;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:var(--h);padding:0 28px;border-radius:99px;
  font:400 var(--fs-b)/1 var(--sans);letter-spacing:var(--track);text-decoration:none;border:0;cursor:pointer;white-space:nowrap;
  transition:background-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
.btn:active{transform:scale(.97)}
.btn .arr{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-press)}
.btn--white{background:#fff;color:var(--blue)}
.btn--white:hover{background:rgba(255,255,255,.86)}
.btn--sm{--h:40px;padding:0 20px;font-size:var(--fs-b)}
.btn--lg{--h:60px;padding:0 34px;font-size:var(--fs-b)}
.btn--block{width:100%}
.link{font-size:var(--fs-b);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px;transition:background-size .35s var(--ease)}
.link:hover{background-size:0 1px;background-position:100% 100%}

/* ---------- Header ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:50;height:var(--hdr);padding-top:env(safe-area-inset-top);
  transition:transform .45s var(--ease),background-color .3s,box-shadow .3s}
.hdr.is-solid{background:rgba(1,0,166,.7);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.hdr__in{height:100%;display:flex;align-items:center;gap:32px;max-width:calc(var(--max) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.hdr__logo img{height:40px;width:auto}
.hdr__nav{display:flex;gap:4px;margin-left:auto}
.hdr__nav a{font-size:var(--fs-b);text-decoration:none;padding:10px 14px;border-radius:99px;transition:background-color .2s}
.hdr__nav a:hover,.hdr__nav a.is-active{background:rgba(255,255,255,.12)}
.hdr__burger{display:none;margin-left:12px;width:44px;height:44px;border:0;background:transparent;color:#fff;cursor:pointer;position:relative}
.hdr__burger span{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;transition:transform .35s var(--ease)}
.hdr__burger span:first-child{top:17px}.hdr__burger span:last-child{top:26px}
.hdr__burger[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.hdr__burger[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:40;background:var(--blue);display:flex;flex-direction:column;justify-content:center;gap:40px;
  padding:calc(var(--hdr) + 24px) var(--gutter) calc(32px + env(safe-area-inset-bottom));
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s}
.menu.is-open{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
.menu nav{display:flex;flex-direction:column}
.menu nav a{font-weight:400;font-size:var(--fs-h);line-height:1.15;letter-spacing:var(--track);text-decoration:none;padding:6px 0;
  transform:translateY(16px);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease)}
.menu.is-open nav a{transform:none;opacity:1}
.menu.is-open nav a:nth-child(2){transition-delay:.04s}.menu.is-open nav a:nth-child(3){transition-delay:.08s}.menu.is-open nav a:nth-child(4){transition-delay:.12s}
.menu__foot{color:var(--muted);font-size:var(--fs-b)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:100%}
.hero>*{min-width:0}
/* Full photo, never cropped: the box follows the image's own ratio */
.hero__photo{grid-area:1/1;position:relative;margin:0;width:100%;aspect-ratio:1675/939;max-width:100%}
.hero__photo img{display:block;width:100%;height:auto}
.hero__photo::before,.hero__photo::after{content:"";position:absolute;inset-inline:0;pointer-events:none}
.hero__photo::before{top:0;height:28%;background:linear-gradient(rgba(1,0,166,.55),rgba(1,0,166,0))}
.hero__photo::after{bottom:0;height:62%;background:linear-gradient(rgba(1,0,166,0),var(--blue))}
.hero__title{font-family:var(--sans);font-weight:400;letter-spacing:var(--track);line-height:.92;font-size:var(--fs-h)}
/* Desktop: title sits on the photo's lower edge, same grid cell */
/* Sit the title higher on the photo, and lift it further when the photo runs past the fold,
   so it is always in view on load (photo height = 939/1675 of the width) */
.hero__head{grid-area:1/1;align-self:end;position:relative;z-index:1;width:100%;
  padding-bottom:max(12vw,calc(56.06vw - 100svh + 40px))}
.hero__grid{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px clamp(24px,4vw,64px);padding-top:clamp(20px,2.4vw,36px)}
.hero__lead{font-size:var(--fs-s);line-height:1.45;max-width:38ch;color:var(--muted)}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(40px,6vw,72px);padding-block:28px clamp(40px,5vw,64px)}
.facts>div{padding:20px 20px 0 0;border-top:1px solid var(--blue-line)}
.facts dt{font-size:var(--fs-b);letter-spacing:var(--track);text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.facts dd{font-size:var(--fs-s);font-weight:400}

/* ---------- Instagram ---------- */
/* Follows The Night on the same blue, so its top spacing comes from that section */
.sec--ig{padding-top:0}
.ig__follow{justify-self:end}
.ig{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,16px)}
.ig__post{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border-radius:6px;background:var(--blue-deep)}
.ig img,.ig video{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
a.ig__post::after{content:"";position:absolute;inset:0;background:rgba(1,0,166,0);transition:background .4s var(--ease)}
.ig__icon{position:absolute;z-index:1;right:12px;bottom:12px;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--red);color:#fff;
  transform:translateY(6px);opacity:0;transition:transform .4s var(--ease),opacity .4s var(--ease)}
a.ig__post:hover :is(img,video),a.ig__post:focus-visible :is(img,video){transform:scale(1.04)}
a.ig__post:hover::after,a.ig__post:focus-visible::after{background:rgba(1,0,166,.25)}
.ig__post:hover .ig__icon,.ig__post:focus-within .ig__icon{transform:none;opacity:1}
@media (hover:none){.ig__icon{transform:none;opacity:1}}
/* Carousel tile: swipe or arrows inside the frame; the icon links to the post */
.ig__track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.ig__track::-webkit-scrollbar{display:none}
.ig__track img{flex:0 0 100%;scroll-snap-align:start;transition:none}
.ig__nav{position:absolute;z-index:2;top:50%;translate:0 -50%;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.88);color:var(--blue);
  font:400 22px/1 var(--sans);display:grid;place-items:center;padding:0 0 3px;cursor:pointer;opacity:0;transition:opacity .3s var(--ease)}
.ig__nav--prev{left:10px}.ig__nav--next{right:10px}
.ig__nav[hidden]{display:none}
.ig__car:hover .ig__nav,.ig__nav:focus-visible{opacity:1}
.ig__dots{position:absolute;z-index:2;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:5px;pointer-events:none}
.ig__dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);transition:background .3s}
.ig__dots span.on{background:#fff}
@media (hover:none){.ig__nav{display:none}}
/* Video tiles: one plays at a time; paused tiles show a play button */
.ig__vid{cursor:pointer}
@media (max-width:860px){.ig__car .ig__track{cursor:zoom-in}}
.ig__play{position:absolute;z-index:2;left:50%;top:50%;translate:-50% -50%;width:48px;height:48px;border:0;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--blue);display:grid;place-items:center;padding:0 0 0 3px;cursor:pointer;transition:scale .3s var(--ease),opacity .3s var(--ease)}
.ig__play svg{width:21px;height:21px}
.ig__vid:hover .ig__play{scale:1.08}
.ig__vid.is-playing .ig__play{opacity:0;pointer-events:none}
.ig__mute{position:absolute;z-index:2;left:12px;bottom:12px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;
  display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s}
.ig__mute:hover{background:rgba(0,0,0,.65)}
.ig__mute .on,.ig__mute[aria-pressed="true"] .off{display:none}
.ig__mute[aria-pressed="true"] .on{display:block}
/* Mobile: tiles open a full-screen pop-up instead of playing in the grid */
.vmodal{position:fixed;inset:0;z-index:90;background:rgba(0,0,40,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:calc(env(safe-area-inset-top,0px) + 64px) 16px calc(env(safe-area-inset-bottom,0px) + 84px)}
.vmodal video{display:block;width:100%;height:100%;object-fit:contain}
/* The video pop-up fills the whole screen; the controls sit on top */
.vmodal{padding:0;background:#000}
.vmodal:not(.gmodal) video{object-fit:cover}
/* Photos use the whole screen too, scaled to fit: full width or full height, whichever the phone's shape allows */
.vmodal .ig__play{width:64px;height:64px}
.vmodal .ig__play svg{width:28px;height:28px}
.vmodal.is-playing .ig__play,.vmodal.is-loading .ig__play{opacity:0;pointer-events:none}
.vmodal::after{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
  border:3px solid rgba(255,255,255,.25);border-top-color:#fff;opacity:0;pointer-events:none;transition:opacity .2s;animation:spin .8s linear infinite}
.vmodal.is-loading::after{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}
.gmodal__track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.gmodal__track::-webkit-scrollbar{display:none}
.gmodal__track img{flex:0 0 100%;width:100%;height:100%;object-fit:contain;scroll-snap-align:center}
.gmodal .ig__dots{bottom:calc(env(safe-area-inset-bottom,0px) + 38px)}
.vmodal .ig__mute{left:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);width:48px;height:48px}
.vmodal .ig__icon{right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);width:48px;height:48px;opacity:1;transform:none}
.vmodal__close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:16px;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;cursor:pointer}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;background:var(--red);padding-block:18px}
.marquee__track{--mg:32px;display:flex;align-items:center;gap:var(--mg);width:max-content;animation:marquee 38s linear infinite}
.marquee span{font-size:var(--fs-s);font-weight:400;letter-spacing:var(--track);white-space:nowrap}
.marquee i{font-style:normal;font-family:var(--jp);font-size:var(--fs-b);opacity:.75;white-space:nowrap}
@keyframes marquee{to{transform:translateX(calc(-50% - var(--mg) / 2))}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ---------- Feature photo bands ---------- */
.feature{position:relative;min-height:clamp(560px,86vh,860px);display:flex;align-items:center;overflow:hidden;isolation:isolate}
.feature__img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;z-index:-2;will-change:transform}
.feature::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(1,0,166,.55),rgba(1,0,166,0) 60%)}
.feature--quote::after{background:linear-gradient(270deg,rgba(1,0,166,.6),rgba(1,0,166,0) 60%)}
.feature__in{display:flex;padding-block:var(--sec)}
.panel{background:rgba(1,0,166,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:clamp(28px,4vw,56px);border-radius:var(--r);max-width:620px;display:flex;flex-direction:column;gap:18px}
.panel p{color:var(--muted);font-size:var(--fs-b)}
.panel .h2{font-size:var(--fs-h);margin-bottom:6px}
.panel--right{margin-left:auto}
.panel blockquote{font-size:var(--fs-s);line-height:1.12;letter-spacing:var(--track);font-style:italic;font-weight:300}
.panel figcaption{color:var(--muted);font-size:var(--fs-b)}

/* ---------- Sections ---------- */
.sec{padding-block:var(--sec)}
.sec--deep{background:var(--blue-deep)}
.sec__head{display:flex;flex-direction:column;gap:20px;max-width:820px;margin-bottom:clamp(48px,7vw,96px)}
.sec__head--split{max-width:none;display:grid;grid-template-columns:1.3fr 1fr;align-items:end;gap:24px 64px}
.sec__head--split>div{display:flex;flex-direction:column;gap:20px}
.sec__sub{font-size:var(--fs-s);color:var(--muted);max-width:52ch}
.sec__sub a{color:#fff;white-space:nowrap}

/* Flow / timeline */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:clamp(64px,9vw,120px);counter-reset:f}
.flow li{position:relative;padding:28px 28px 0 0;border-top:1px solid var(--blue-line)}
.flow li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--red)}
.flow time{display:block;font-size:var(--fs-s);letter-spacing:var(--track);line-height:1;margin-bottom:18px;font-variant-numeric:tabular-nums}
.flow h3{font-size:var(--fs-b);font-weight:400;margin-bottom:6px}
.flow p{color:var(--muted);font-size:var(--fs-b);max-width:30ch}

/* Tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.tile{display:flex;flex-direction:column;gap:6px}
.tile img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);margin-bottom:14px;transition:transform .6s var(--ease)}
.tile:hover img{transform:scale(1.03)}
.tile h3{font-size:var(--fs-b);font-weight:400}
.tile p{color:var(--muted);font-size:var(--fs-b)}

/* ---------- Tickets ---------- */
.tix{display:grid;grid-template-columns:.9fr 1fr;gap:clamp(40px,6vw,96px);align-items:start}
.tix__poster{position:sticky;top:calc(var(--hdr) + 24px)}
.tix__poster img{width:100%;border-radius:var(--r);box-shadow:0 40px 80px -30px rgba(0,0,0,.55)}
.tix__body{display:flex;flex-direction:column;gap:18px}
.tix__date{font-size:var(--fs-h);color:#fff;margin-top:6px}
.tix__venue{font-size:var(--fs-b);color:var(--muted);margin-bottom:18px}
/* Highlighted cards: brand blue with a 1pt red stroke and white type */
.card{background:var(--blue);color:#fff;box-shadow:inset 0 0 0 1px var(--red);border-radius:var(--r);padding:clamp(24px,3vw,36px);transition:scale .5s var(--ease)}
.card:hover{scale:1.02}
/* The red glow from the package dots, at a random spot along the edges of the highlight card (site.js) */
.card{position:relative;overflow:hidden;isolation:isolate}
.card:not(.card--line)::before{content:"";position:absolute;z-index:-1;left:var(--gx,100%);top:var(--gy,0%);translate:-50% -50%;width:180px;height:180px;border-radius:50%;
  background:rgba(255,0,0,.405);filter:blur(52px);pointer-events:none}
.card--line{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.card__head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.card__head h3{font-size:var(--fs-s);font-weight:400;letter-spacing:var(--track)}
.card__note{margin-top:8px;font-size:var(--fs-b);color:inherit;opacity:.85}
.tag{font-size:var(--fs-b);letter-spacing:var(--track);text-transform:uppercase;padding:7px 12px;border-radius:99px;background:rgba(255,255,255,.16)}
.tiers{margin-top:18px}
.tiers li{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-top:1px solid rgba(255,255,255,.3);font-size:var(--fs-b)}
.tiers b{font-weight:400;font-size:var(--fs-s);letter-spacing:var(--track);font-variant-numeric:tabular-nums}
.fine{font-size:var(--fs-b);color:var(--muted);margin-block:4px 8px}

/* ---------- Talent ---------- */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px)}
.person{display:flex;flex-direction:column;gap:20px}
.person img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);filter:grayscale(1) contrast(1.05);transition:filter .5s}
.person:hover img{filter:grayscale(0)}
.person h3{font-size:var(--fs-s);font-weight:400}
.person .role{font-style:italic;color:var(--muted);margin:2px 0 10px;font-size:var(--fs-b)}
.person p{font-size:var(--fs-b);color:var(--muted)}

/* ---------- Private packages ---------- */
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.pkg{position:relative;overflow:hidden;border-radius:var(--r);padding:clamp(28px,3vw,40px);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--blue-line);
  display:flex;flex-direction:column;transition:scale .5s var(--ease),background-color .3s}
.pkg:hover{scale:1.02;background:rgba(255,255,255,.08)}
.pkg__sun{width:112px;height:112px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff3b3b,var(--red) 45%,#b00000);
  display:grid;place-items:center;margin-bottom:32px;box-shadow:0 20px 40px -12px rgba(255,0,0,.45)}
.pkg__sun span{font-size:var(--fs-b);font-weight:400}
.pkg h3{font-size:var(--fs-s)}
.pkg__sub{font-style:italic;color:var(--muted);margin:10px 0 24px}
.pkg ul{display:flex;flex-direction:column;border-top:1px solid var(--blue-line)}
.pkg li{padding:11px 0;border-bottom:1px solid var(--blue-line);font-size:var(--fs-b)}
.pkg--hi{background:var(--blue);box-shadow:inset 0 0 0 1px var(--red)}
.pkg--hi:hover{background:var(--blue)}

.extras{margin-top:clamp(64px,8vw,112px);display:flex;flex-direction:column;gap:24px}
.extras__row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,24px)}
.extras figure{display:flex;flex-direction:column;gap:12px}
.extras img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r);background:var(--blue)}
.extras figcaption{font-size:var(--fs-b)}

.contact{margin-top:clamp(56px,7vw,96px);padding-top:40px;border-top:1px solid var(--blue-line);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.contact__lead{font-size:var(--fs-s);letter-spacing:var(--track);font-weight:400}
.contact__who{color:var(--muted);margin-top:6px}
.contact__who a{text-decoration:none;color:#fff}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(40px,6vw,96px);align-items:start}
.faq>div:first-child{display:flex;flex-direction:column;gap:20px;position:sticky;top:calc(var(--hdr) + 24px)}
.acc details{border-top:1px solid var(--blue-line)}
.acc details:last-child{border-bottom:1px solid var(--blue-line)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;
  font-size:var(--fs-s);font-weight:400;letter-spacing:var(--track);transition:opacity .2s}
.acc summary:hover{opacity:.75}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:none;width:36px;height:36px;border-radius:50%;
  background:linear-gradient(#fff,#fff) center/12px 1.5px no-repeat,linear-gradient(#fff,#fff) center/1.5px 12px no-repeat,rgba(255,255,255,.1);
  transition:transform .35s var(--ease),background-color .3s}
.acc details[open] summary::after{transform:rotate(45deg);background-color:var(--red)}
.acc__body{overflow:hidden}
.acc__body p{padding-bottom:26px;color:var(--muted);max-width:60ch}
.acc__body a{color:#fff}

/* ---------- Proof ---------- */
.proof{padding-bottom:clamp(56px,7vw,96px);display:flex;flex-direction:column;gap:28px}
.proof__row{display:grid;grid-template-columns:160px 1fr;align-items:center;gap:24px;padding-top:28px;border-top:1px solid var(--blue-line)}
.press{display:flex;flex-wrap:wrap;gap:10px 40px}
.press li{font-size:var(--fs-s);letter-spacing:var(--track)}
.press a{text-decoration:none;opacity:.9;transition:opacity .2s}
.press a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.pmarquee{position:relative;overflow:hidden;background:var(--red);padding-block:26px}
/* Fixed heading on the left; the logos run in behind it */
.pmarquee__label{position:absolute;z-index:1;left:0;top:0;bottom:0;display:flex;align-items:center;margin:0;
  padding-inline:var(--gutter) 32px;background:var(--red);font-size:var(--fs-s);font-weight:400;white-space:nowrap}
.pmarquee__track{--mg:72px;animation-duration:32s}
.pmarquee img{width:auto;max-width:none;flex:none}
.pmarquee .logo-bg{height:44px}
.pmarquee .logo-gt{height:24px}
.pmarquee .logo-sq{height:56px}
.pmarquee .logo-el{height:44px}

/* ---------- Footer ---------- */
.ftr{background:var(--blue-deep);padding-top:var(--sec)}
.ftr__hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.ftr__kaiju{width:min(440px,80vw);aspect-ratio:1;border-radius:50%;object-fit:cover;background:var(--blue)}
.ftr__jp{font-size:var(--fs-s);font-weight:300}
.ftr__title{font-size:var(--fs-h);margin-bottom:16px;text-wrap:balance}
.ftr__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:clamp(72px,10vw,140px);padding-top:40px;border-top:1px solid var(--blue-line)}
.ftr__cols div{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.ftr__cols a{text-decoration:none;font-size:var(--fs-b)}
.ftr__cols a:hover{text-decoration:underline;text-underline-offset:4px}
.ftr__h{font-size:var(--fs-b);letter-spacing:var(--track);text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ftr__fine{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-block:48px calc(40px + env(safe-area-inset-bottom));font-size:var(--fs-b);color:var(--muted)}

/* ---------- Mobile dock ---------- */
.dock{display:none}

/* ---------- Reveal ---------- */
/* Content stays readable at rest; the reveal is only a gentle rise into place. */
/* Rise-in only in the hero and the footer; the rest of the page stays put while scrolling */
.js .r{transition:transform .9s var(--ease),scale .5s var(--ease),background-color .3s;transition-delay:var(--d,0s),0s,0s}
.js :is(.hero,.ftr) .r{transform:translateY(20px)}
.js :is(.hero,.ftr) .r.in{transform:none}
/* Mask reveal: each word rises into view from behind its own clipping line */
.js :is(.hero,.ftr) .r.mask{transform:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .1em .18em;margin:0 -.1em -.18em}
.js .mask .mi{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * .09s + .1s)}
.js .mask.in .mi{transform:none}
@media (prefers-reduced-motion:reduce){.js .r{opacity:1;transform:none;transition:none}.js .mask .mi{transform:none;transition:none}}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(2,1fr);row-gap:40px}
  .pkgs{grid-template-columns:1fr;max-width:620px}
  .people{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  :root{--hdr:64px}
  .hdr__nav{display:none}
  .hdr__cta{display:none}
  .hdr__burger{margin-left:auto}
  .hdr__burger{display:block}
  .hdr__logo img{height:34px}
  .hero__photo{margin-top:var(--hdr)}
  .hero__head{grid-area:auto;padding-top:28px;padding-bottom:0}
  .hero__grid{grid-template-columns:1fr;gap:20px}
  .facts{grid-template-columns:1fr 1fr;row-gap:8px}
  .sec__head--split,.tix,.faq{grid-template-columns:1fr}
  .tix__poster{position:static;max-width:420px}
  .faq>div:first-child{position:static}
  .people{grid-template-columns:1fr;gap:28px}
  .ig{grid-template-columns:1fr 1fr}
  .ig__vid .ig__mute{display:none}
  .marquee{padding-block:12px}
  .marquee span{font-size:var(--fs-b)}
  .marquee__track{--mg:22px}
  .pmarquee{padding-block:18px}
  .pmarquee__label{font-size:var(--fs-b);padding-right:20px}
  .pmarquee__track{--mg:44px}
  .pmarquee .logo-bg,.pmarquee .logo-el{height:34px}
  .pmarquee .logo-gt{height:19px}
  .pmarquee .logo-sq{height:44px}
  .ig__follow{justify-self:start}
  .person{flex-direction:row;align-items:center;gap:20px}
  .person img{width:120px;flex:none}
  .feature{min-height:0}
  .feature__in{padding-block:clamp(220px,50vw,360px) 32px}
  .feature::after,.feature--quote::after{background:linear-gradient(180deg,rgba(1,0,166,0) 30%,rgba(1,0,166,.85))}
  .panel,.panel--right{margin-left:0}
  .proof__row{grid-template-columns:1fr;gap:14px}
  .ftr__cols{grid-template-columns:1fr 1fr}
  .dock{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:45;display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:8px 8px 8px 20px;border-radius:99px;background:rgba(0,0,140,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    box-shadow:0 10px 30px -8px rgba(0,0,0,.5),inset 0 0 0 1px var(--blue-line);text-decoration:none;font-size:var(--fs-b);
    transform:translateY(calc(100% + 24px));transition:transform .5s var(--ease)}
  .dock.is-on{transform:none}
  .dock b{font-weight:400}
  .dock__btn{background:var(--red);border-radius:99px;padding:12px 20px}
  .ftr__fine{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media (max-width:520px){
  .btn--lg{--h:56px}
  .hero__actions{width:100%}
  .hero__actions .btn{width:100%}
  .tiles{gap:14px}
  .extras__row{gap:12px}
  .ftr__cols{grid-template-columns:1fr}
  .contact .btn{width:100%}
}