/* ============================================================
   Cubcoats — Landing
   Standalone. No build step.
   ============================================================ */

:root{
  /* Straight from the Cubcoats brand guide, page 13.
     Neutral palette */
  --secret-cubhouse:#50576A;
  --cubcoats-cheer:#FFB89A;
  --after-dark:#666565;
  /* Storybook palette */
  --windy-woods:#156A6F;
  --magic-meadow:#5691A1;
  --crystal-caves:#99C6EE;
  --sing-song-sea:#5C88DA;
  --misty-mountain:#8162AA;

  /* roles */
  --ink:#50576A;
  --ink-2:#3E4455;
  --night:#2F3442;
  --paper:#F7F9FC;
  --cream:#FDF4EE;

  --soft-blue:#99C6EE;
  --deep-blue:#5C88DA;
  --accent:#FFB89A;

  /* Guide, page 12: Riya Black for main headlines, Little Explorer for
     call-outs, Montserrat for body. Montserrat is never a main headline. */
  --font-head:"Riya Black","Chalkboard SE","Chalkboard","Chewy",ui-rounded,system-ui,cursive;
  --font-callout:"Little Explorer","Montserrat",ui-rounded,system-ui,sans-serif;
  --font-body:"Montserrat","Avenir Next",system-ui,-apple-system,sans-serif;
  --font-cartoon:var(--font-head);

  --pad:clamp(1.25rem,4vw,4rem);
  --maxw:78rem;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-rail:cubic-bezier(.76,0,.24,1);
  --edge-w:clamp(84px,8vw,132px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,p,figure,form,ol,li{margin:0}
ol{padding:0;list-style:none}
img,svg,video{display:block;max-width:100%}
[hidden]{display:none!important}
button,input,textarea{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}

body{
  font-family:var(--font-body);
  background:var(--paper);color:var(--ink);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

.eyebrow{
  font-size:clamp(.68rem,1.4vw,.78rem);font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:1.1rem;
}
.eyebrow--light{color:rgba(255,255,255,.72)}

.h2{
  font-family:var(--font-cartoon);
  font-size:clamp(2.1rem,6vw,4.4rem);line-height:1.02;letter-spacing:-.01em;
  text-wrap:balance;
}
.h2--light{color:#fff}

.lede{
  margin-top:1.35rem;max-width:46ch;
  font-size:clamp(1rem,1.9vw,1.16rem);line-height:1.66;
  color:color-mix(in srgb,var(--ink) 70%,transparent);text-wrap:pretty;
}
.lede--light{color:rgba(255,255,255,.76)}

.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .82s var(--ease),transform .82s var(--ease);
  transition-delay:calc(var(--d,0)*90ms);
}
.reveal.in{opacity:1;transform:none}

/* ---------- chrome ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:120;background:rgba(38,48,75,.09)}
.progress__bar{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--accent),var(--cubcoats-cheer),var(--magic-meadow));
  transition:width .12s linear;
}

/* Always present, never sliding away. Clear over the hero, picks up a bar once
   real content is underneath, so nothing ever reads as overlap. */
.head{
  position:fixed;top:0;left:0;right:0;z-index:110;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  min-height:clamp(70px,8vh,86px);
  padding-block:.7rem;padding-inline:var(--pad);
  transition:background .4s ease,box-shadow .4s ease,min-height .4s ease;
}
.head__brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
/* One mark, painted through a mask, so it is always the same shape and the
   colour simply follows the section behind the header. */
.head__mark{
  display:block;
  width:clamp(112px,11vw,158px);
  aspect-ratio:1000/172;
  background-color:var(--ink);
  -webkit-mask:url("../img/art/logo-white.webp") center/contain no-repeat;
  mask:url("../img/art/logo-white.webp") center/contain no-repeat;
  transition:background-color .35s ease;
}
.head[data-tone="dark"] .head__mark{background-color:var(--crystal-caves);filter:drop-shadow(0 2px 10px rgba(46,52,66,.45))}

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.head.is-solid{
  min-height:clamp(64px,7vh,76px);
  background:rgba(252,250,245,.9);
  backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);
  box-shadow:0 1px 0 rgba(38,48,75,.08),0 12px 34px rgba(38,48,75,.07);
}
.head.is-solid[data-tone="dark"]{
  background:rgba(92,136,218,.82);
  box-shadow:0 1px 0 rgba(255,255,255,.08),0 12px 34px rgba(0,0,0,.3);
}
.head.is-solid[data-tone="dark"] .head__mark{background-color:#fff;filter:none}

.nav{display:none;align-items:center;gap:clamp(1.1rem,2.2vw,2rem)}
@media(min-width:900px){.nav{display:flex}}
.nav__link{
  position:relative;text-decoration:none;
  font-size:.86rem;font-weight:500;color:var(--ink);
  padding-block:.3rem;transition:color .25s ease;
}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__link:hover::after{transform:scaleX(1)}
.head[data-tone="dark"] .nav__link{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.4)}
.nav__cta{
  padding:.6rem 1.15rem;border-radius:999px;
  background:var(--crystal-caves);color:#2F3442;
  font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  transition:background .25s ease,transform .25s var(--ease);
}
.nav__cta:hover{background:var(--sing-song-sea);color:#fff;transform:translateY(-1px)}
.head[data-tone="dark"] .nav__cta{background:var(--crystal-caves);color:#2F3442}
.head[data-tone="dark"] .nav__cta:hover{background:#fff;color:var(--sing-song-sea)}

.burger{
  display:grid;gap:5px;padding:.6rem;border-radius:.6rem;
}
@media(min-width:900px){.burger{display:none}}
.burger span{display:block;width:22px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s ease}
.head[data-tone="dark"] .burger span{background:#fff}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
/* The open drawer is light even while the story beneath it is dark. */
.head.menu-open .head__mark,.head.menu-open .burger span{background-color:var(--ink)}

.drawer{
  position:fixed;top:0;left:0;right:0;z-index:105;
  display:grid;gap:.2rem;
  padding:calc(clamp(58px,7vh,74px) + 1rem) var(--pad) 1.4rem;
  background:rgba(252,250,245,.97);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 40px rgba(38,48,75,.14);
  transform:translateY(-102%);transition:transform .45s var(--ease);
}
.drawer.is-open{transform:none}
.drawer__link{
  text-decoration:none;color:var(--ink);font-size:1.05rem;font-weight:500;
  padding:.75rem .2rem;border-bottom:1px solid rgba(38,48,75,.08);
}
.drawer__cta{
  margin-top:.9rem;justify-self:start;padding:.75rem 1.3rem;border-radius:999px;
  background:var(--ink);color:#fff;font-size:.75rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
}

/* soft cartoon blobs used on the light sections */
.blob{position:absolute;z-index:0;border-radius:50%;filter:blur(70px);pointer-events:none}
.blob--a{width:38vw;height:38vw;left:-8vw;top:-6vw;background:rgba(168,216,248,.5)}
.blob--b{width:32vw;height:32vw;right:-6vw;top:18vw;background:rgba(248,168,183,.42)}
.blob--c{display:none}

.layer{position:relative;isolation:isolate}

/* ============================================================
   1 · HERO
   ============================================================ */
.hero{
  min-height:100svh;display:grid;place-items:center;
  padding:clamp(6rem,14vh,9rem) var(--pad) clamp(5rem,10vh,7rem);
  overflow:hidden;background:var(--crystal-caves);
}
.collage{
  position:absolute;inset:-14% -12%;z-index:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
  transform:rotate(-3deg) scale(1.26);will-change:transform;
}
@media(min-width:720px){.collage{grid-template-columns:repeat(6,1fr)}}
@media(min-width:1240px){.collage{grid-template-columns:repeat(8,1fr)}}
.col{display:flex;flex-direction:column;gap:2px;animation:drift linear infinite}
.col--down{animation-direction:reverse}
.col img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:0;filter:brightness(1.08) saturate(1.04)}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(-50%)}}

.hero__veil{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(52% 40% at 50% 46%,rgba(46,52,66,.42) 0%,rgba(46,52,66,.16) 60%,rgba(46,52,66,0) 84%),
    linear-gradient(180deg,rgba(46,52,66,.24) 0%,rgba(46,52,66,0) 18%,rgba(46,52,66,0) 84%,rgba(46,52,66,.2) 100%);
}
.hero__inner{position:relative;z-index:2;text-align:center;max-width:60rem}
.hero__title{
  font-family:var(--font-cartoon);
  font-size:clamp(3rem,13vw,10.5rem);line-height:.9;letter-spacing:-.02em;color:#fff;
  -webkit-text-stroke:2px rgba(46,52,66,.48);paint-order:stroke fill;
  text-shadow:0 3px 0 rgba(46,52,66,.52),0 14px 34px rgba(20,29,52,.56);
}
.line{display:block}
.word{
  display:inline-block;opacity:0;transform:translateY(.5em) rotate(-3deg);
  animation:wordIn .95s var(--ease) forwards;animation-delay:calc(.18s + var(--d)*.13s);
}
.word--pop{
  color:#99C6EE;
}
@keyframes wordIn{to{opacity:1;transform:none}}
.hero__sub{
  margin:clamp(1.4rem,3vw,2.1rem) auto 0;max-width:54ch;
  font-size:clamp(.98rem,1.8vw,1.16rem);line-height:1.7;
  color:rgba(255,255,255,.78);text-wrap:pretty;
}
.heroFade{opacity:0;transform:translateY(20px);animation:fadeUp .9s var(--ease) forwards;animation-delay:calc(.3s + var(--d,0)*.13s)}
@keyframes fadeUp{to{opacity:1;transform:none}}

.cue{
  position:absolute;left:50%;bottom:clamp(1.6rem,4vh,2.6rem);z-index:3;
  translate:-50% 0;display:grid;justify-items:center;gap:.7rem;
  color:rgba(255,255,255,.6);text-decoration:none;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
}
.cue__line{width:1px;height:clamp(28px,4.5vh,42px);background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.85));animation:cueSlide 2.1s ease-in-out infinite}
@keyframes cueSlide{0%,100%{transform:scaleY(.45);opacity:.5}50%{transform:scaleY(1);opacity:1}}
.cue:hover{color:#fff}

/* the film, tucked into the hero corner */
.peek{
  position:relative;z-index:4;
  margin:clamp(1.8rem,4.5vh,3.2rem) auto 0;
  display:inline-flex;align-items:center;gap:.9rem;
  padding:.6rem 1.15rem .6rem .6rem;border-radius:999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  color:#fff;text-align:left;
  opacity:0;transform:translateY(18px);
  animation:fadeUp .75s var(--ease) .45s forwards;
  transition:background .3s ease,transform .35s var(--ease),border-color .3s ease;
}
.peek:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);transform:translateY(-3px)}
.peek__vid{
  width:clamp(56px,6vw,74px);aspect-ratio:1;border-radius:999px;
  object-fit:cover;background:#0C1120;
}
.peek__ring{
  position:absolute;left:.6rem;top:50%;translate:0 -50%;
  width:clamp(56px,6vw,74px);aspect-ratio:1;border-radius:999px;
  border:2px solid rgba(255,255,255,.5);
  animation:peekPing 2.6s ease-out infinite;pointer-events:none;
}
@keyframes peekPing{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.42);opacity:0}}
.peek__play{
  position:absolute;left:.6rem;top:50%;translate:0 -50%;
  width:clamp(56px,6vw,74px);aspect-ratio:1;
  display:grid;place-items:center;pointer-events:none;
}
.peek__play svg{width:22px;height:22px;fill:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.peek__meta{display:grid;gap:.12rem}
.peek__kicker{font-family:var(--font-cartoon);font-size:.95rem;letter-spacing:.02em}
.peek__sub{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;opacity:.62}
@media(max-width:620px){
  .peek{
    left:50%;right:auto;translate:-50% 0;bottom:5.6rem;
    width:16.5rem;max-width:calc(100% - 1rem);
    gap:.65rem;padding:.55rem .9rem .55rem .55rem;
  }
  .peek__vid,.peek__ring,.peek__play{width:58px}
  .peek__meta{min-width:0}
  .peek__kicker{font-size:.98rem;white-space:nowrap}
  .peek__sub{font-size:.66rem;white-space:nowrap}
  .cue{display:none}
}

/* ============================================================
   2 · PROOF
   ============================================================ */
/* Light, cartoonic. The numbers carry the weight, not a dark panel. */
.proof{padding:clamp(5.5rem,14vh,9rem) 0;background:var(--paper);overflow:hidden}
.proof .wrap{position:relative;z-index:1}

.stats{display:grid;gap:clamp(1rem,2vw,1.6rem);margin-top:clamp(2.6rem,6vw,4rem);grid-template-columns:1fr}
@media(min-width:820px){.stats{grid-template-columns:repeat(3,1fr);align-items:end}}

.stat{
  position:relative;display:grid;gap:.55rem;align-content:start;
  padding:clamp(1.6rem,3vw,2.2rem);
  border-radius:1.75rem;background:#fff;
  border:2px solid var(--tone,rgba(38,48,75,.08));
  box-shadow:0 18px 46px rgba(38,48,75,.09);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.stat:hover{transform:translateY(-6px);box-shadow:0 30px 66px rgba(38,48,75,.14)}
.stat--sky{--tone:#A8D8F8;--ink-tone:#2E7FB8;background:linear-gradient(170deg,#F2FAFF 0%,#fff 62%)}
.stat--fox{--tone:#F47465;--ink-tone:#D6503F;background:linear-gradient(170deg,#FFF3F1 0%,#fff 62%)}
.stat--mint{--tone:#59C7C9;--ink-tone:#2E9A9C;background:linear-gradient(170deg,#F0FBFB 0%,#fff 62%)}
@media(min-width:820px){.stat--lead{transform:translateY(-1.8rem)}
  .stat--lead:hover{transform:translateY(-2.4rem)}}

.stat__tag{
  justify-self:start;padding:.42rem .9rem;border-radius:999px;
  background:var(--tone);color:#fff;
  font-size:.63rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}
.stat__pre{font-size:.94rem;font-weight:500;color:color-mix(in srgb,var(--ink) 55%,transparent);margin-bottom:-.55rem}
.stat__num{
  font-family:var(--font-cartoon);
  font-size:clamp(3rem,7.4vw,5rem);line-height:.9;letter-spacing:-.02em;
  color:var(--ink-tone);display:flex;align-items:baseline;gap:.02em;
}
.stat__cur{font-size:.58em;opacity:.72}
.stat__suf{font-size:.56em}

.stat__chart{display:flex;align-items:flex-end;gap:.42rem;height:clamp(64px,7.5vw,88px);margin-top:.5rem}
.stat__chart i{
  flex:1;height:0;border-radius:.4rem .4rem .18rem .18rem;
  background:color-mix(in srgb,var(--tone) 34%,#fff);
  transition:height 1.05s var(--ease);
}
.stat__chart i:last-child{background:var(--tone)}
.stat.in .stat__chart i{height:var(--h)}
.stat__chart i:nth-child(1){transition-delay:.30s}
.stat__chart i:nth-child(2){transition-delay:.38s}
.stat__chart i:nth-child(3){transition-delay:.46s}
.stat__chart i:nth-child(4){transition-delay:.54s}
.stat__chart i:nth-child(5){transition-delay:.62s}
.stat__chart i:nth-child(6){transition-delay:.70s}
.stat__chart i:nth-child(7){transition-delay:.78s}

.proof__note{
  margin-top:clamp(2.6rem,6vw,4rem);max-width:64ch;
  font-size:clamp(.95rem,1.65vw,1.06rem);line-height:1.72;
  color:color-mix(in srgb,var(--ink) 64%,transparent);text-wrap:pretty;
}

/* ============================================================
   3 · CAST
   ============================================================ */
.cast{
  padding:clamp(5rem,13vh,8rem) 0 clamp(3.5rem,8vh,5rem);
  background:#fff;overflow:hidden;
}
.cast__head{
  position:relative;z-index:1;
  display:grid;gap:2rem;align-items:end;
  margin-bottom:clamp(2.4rem,5vw,3.4rem);
}
@media(min-width:900px){.cast__head{grid-template-columns:1fr auto}}
.cast__nav{display:flex;gap:.7rem}
.navbtn{
  width:3.4rem;height:3.4rem;border-radius:999px;display:grid;place-items:center;
  background:#fff;border:2px solid rgba(38,48,75,.12);color:var(--ink);
  box-shadow:0 4px 12px rgba(38,48,75,.07);
  transition:background .25s ease,transform .25s var(--ease),opacity .25s ease;
}
.navbtn svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.2}
.navbtn:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.navbtn[disabled]{opacity:.3;pointer-events:none}

/* A paged rail: whole cards only, never a sliced one at the edge. */
.railwrap{position:relative;z-index:1;--gap:clamp(.7rem,1.2vw,1rem);--per:4}
@media(max-width:1180px){.railwrap{--per:3}}
@media(max-width:860px){.railwrap{--per:2}}
/* A small slice of the following card makes the horizontal swipe obvious on phones. */
@media(max-width:560px){.railwrap{--per:1}}

.rail{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;scroll-behavior:smooth;
}
.rail::-webkit-scrollbar{display:none}
.rail.is-drag{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing}
.rail__track{
  display:grid;grid-auto-flow:column;
  /* exactly --per cards fill the rail, so nothing is ever half shown */
  grid-auto-columns:calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  gap:var(--gap);
  padding-block:1rem 1.6rem;
}

.cub{
  scroll-snap-align:start;position:relative;
  border-radius:1.6rem;overflow:hidden;
  background:linear-gradient(168deg,var(--tint) 0%,var(--tint2) 100%);
  /* Keep the hover focused on the character; a drop shadow made the card
     look like it was floating above the rail. */
  box-shadow:none;
  transition:transform .55s var(--ease);
}
.cub:hover,.cub:focus-visible{transform:translateY(-10px);box-shadow:none}

.cub__stage{position:relative;aspect-ratio:300/430;overflow:hidden}
.cub__halo{
  position:absolute;left:50%;top:56%;translate:-50% -50%;
  width:88%;aspect-ratio:1;border-radius:999px;
  background:radial-gradient(circle,rgba(255,255,255,.6) 0%,transparent 68%);
  opacity:.55;transition:opacity .55s ease,transform .8s var(--ease);
}
.cub:hover .cub__halo{opacity:.9;transform:translate(-50%,-50%) scale(1.08)}
.cub__stage img{
  position:absolute;left:0;right:0;bottom:-2.5%;width:100%;height:102.5%;
  object-fit:contain;object-position:bottom;
  padding:3% 7% 0;
  transition:opacity .55s var(--ease),transform .7s var(--ease);
}
.cub__photo{filter:drop-shadow(0 10px 14px rgba(20,26,44,.14))}
.cub__toon{
  opacity:0;transform:scale(.84) rotate(-5deg);
  /* Keep the flipped character on the same baseline as the photo rather
     than floating in the centre of the stage. */
  object-position:center bottom;padding:12% 15% 0;filter:none;
}
.cub:hover .cub__photo,.cub:focus-visible .cub__photo,.cub.is-turned .cub__photo{opacity:0;transform:scale(1.06)}
.cub:hover .cub__toon,.cub:focus-visible .cub__toon,.cub.is-turned .cub__toon{opacity:1;transform:none}
.cub.is-turned .cub__halo{opacity:.9;transform:translate(-50%,-50%) scale(1.08)}
.cub.is-turned{transform:translateY(-10px);box-shadow:none}

.cub__foot{
  position:relative;padding:.85rem 1rem 1rem;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.88) 100%);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.cub__name{font-family:var(--font-cartoon);font-size:1.45rem;line-height:1;color:var(--ink)}
.cub__species{font-size:.8rem;font-weight:500;color:color-mix(in srgb,var(--ink) 58%,transparent);margin-top:.18rem}
.cub__trait{
  margin-top:.7rem;display:inline-flex;align-items:center;gap:.42rem;
  padding:.32rem .68rem;border-radius:999px;background:rgba(38,48,75,.07);
  font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
}
.cub__dot{width:7px;height:7px;border-radius:99px;background:var(--tint2)}

/* page dots, quieter than a scrollbar */
.dots{display:flex;justify-content:center;gap:.5rem;margin-top:.4rem}
.dots button{
  width:8px;height:8px;padding:0;border-radius:999px;
  background:rgba(38,48,75,.18);transition:width .35s var(--ease),background .3s ease;
}
.dots button[aria-selected="true"]{width:26px;background:var(--accent)}

/* ============================================================
   4 · ISLAND  (shown whole, never cropped)
   ============================================================ */
/* Full screen, artwork left at full brightness. Only the copy corner gets a
   scrim, so the map itself is never dimmed. */
.island{
  min-height:100svh;display:grid;
  background:#BEE3EF;overflow:hidden;
}
.island__art{
  grid-area:1/1;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.island__panel{
  grid-area:1/1;position:relative;
  align-self:start;justify-self:start;
  width:min(100%,44rem);
  padding:calc(clamp(70px,8vh,86px) + clamp(1.5rem,4vh,3rem)) clamp(1.4rem,4vw,4rem) clamp(2rem,5vh,3rem);
}
.island__scrim{
  position:absolute;inset:0 -20% -60% -10%;z-index:0;pointer-events:none;
  background:radial-gradient(74% 84% at 26% 22%,rgba(10,28,42,.84) 0%,rgba(10,28,42,.54) 46%,rgba(10,28,42,0) 78%);
}
.island__copy{position:relative;z-index:1}
.island__title{
  font-family:var(--font-cartoon);color:#fff;
  font-size:clamp(2rem,5.4vw,3.9rem);line-height:1.02;letter-spacing:-.01em;
  text-shadow:0 12px 40px rgba(0,0,0,.5);
}
.island__lede{
  margin-top:1.15rem;max-width:40ch;
  font-size:clamp(.96rem,1.8vw,1.12rem);line-height:1.66;
  color:rgba(255,255,255,.86);text-wrap:pretty;
  text-shadow:0 4px 18px rgba(0,0,0,.5);
}
@media(max-width:760px){
  .island{min-height:88svh}
  .island__art{object-position:58% center}
  .island__panel{width:100%}
  .island__scrim{inset:0 -20% -60% -20%}
}

/* ============================================================
   5 · UNZIP  (the transformation film)
   ============================================================ */
.unzip{min-height:100svh;display:grid;place-items:center;overflow:hidden;background:#12161F}
.unzip__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.unzip__veil{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(90% 70% at 50% 50%,rgba(10,14,22,.28) 0%,rgba(10,14,22,.72) 78%),
    linear-gradient(180deg,rgba(10,14,22,.72) 0%,transparent 24%,transparent 66%,rgba(10,14,22,.86) 100%);
}
/* Ported straight from the hero treatment on cubcoats.com: the words smoke in
   from opposite corners, first one, then a hold, then the other. */
.unzip__inner{position:absolute;inset:0;z-index:2;pointer-events:none}
.unzip__a,.unzip__b{
  position:absolute;z-index:10;
  font-family:var(--font-cartoon);font-weight:400;letter-spacing:.005em;
  color:#fff;text-transform:uppercase;white-space:nowrap;line-height:1;
  font-size:clamp(2.4rem,8.5vw,7.5rem);
  -webkit-text-stroke:3px rgba(38,48,75,.55);paint-order:stroke fill;
  text-shadow:
    0 0 26px rgba(255,255,255,.6),
    0 6px 0 rgba(38,48,75,.4),
    0 18px 36px rgba(38,48,75,.45);
  opacity:0;will-change:transform,opacity,filter;
}
.unzip__a{top:12%;left:6%;transform-origin:left center}
.unzip__b{bottom:12%;right:6%;transform-origin:right center}

@keyframes smokeIn{
  from{opacity:0;filter:blur(28px);transform:scale(.7) rotate(var(--r0))}
  to  {opacity:1;filter:blur(0);  transform:scale(1)  rotate(var(--r1))}
}
.unzip__a{--r0:-3deg;--r1:-2deg}
.unzip__b{--r0:3deg;--r1:2deg}
.unzip.show-a .unzip__a{animation:smokeIn 1.1s cubic-bezier(.16,1,.3,1) forwards}
.unzip.show-b .unzip__b{animation:smokeIn 1.1s cubic-bezier(.16,1,.3,1) forwards}
@keyframes zipA{to{opacity:1;transform:translate(0,0) rotate(-2deg)}}
@keyframes zipB{to{opacity:1;transform:translate(0,0) rotate(1.5deg)}}

/* ============================================================
   6 · ADULT
   ============================================================ */
.adult{padding:clamp(5.5rem,14vh,9rem) 0;background:var(--paper)}
.adult__grid{display:grid;gap:clamp(2.4rem,5vw,4rem);align-items:center}
@media(min-width:900px){.adult__grid{grid-template-columns:1fr .9fr}}
.beats{margin-top:1.9rem;display:grid;gap:1rem}
.beat{display:flex;gap:1rem;align-items:baseline}
.beat__no{
  font-family:var(--font-cartoon);font-size:.9rem;
  color:color-mix(in srgb,var(--ink) 34%,transparent);
}
.beat__txt{font-size:clamp(1.02rem,2vw,1.3rem);line-height:1.5;font-weight:500;color:color-mix(in srgb,var(--ink) 74%,transparent)}
.beat--hot .beat__txt{color:var(--accent);font-weight:600}
.beat--hot .beat__no{color:var(--accent);opacity:.6}
.adult__ellen{margin-top:2.2rem;max-width:220px}
.adult__ellen img{width:100%;height:auto;border-radius:.6rem}
.adult__media{
  border-radius:1.5rem;overflow:hidden;background:#fff;
  border:1px solid rgba(38,48,75,.08);box-shadow:0 26px 70px rgba(38,48,75,.14);
}
.adult__media img{width:100%;height:auto}

/* ============================================================
   7 · WILD
   ============================================================ */
/* The map runs edge to edge with no dead space above it; the copy sits in the
   empty Pacific and the sign-up rides the map's lower edge. */
.wild{position:relative;background:var(--paper);overflow:hidden;padding-bottom:clamp(6.5rem,11vw,9rem)}
.wild__map{position:relative;width:100%}
.wild__plot{position:relative}
.wild__plot img{width:100%;height:auto;display:block}

.wild__copy{
  position:absolute;left:clamp(1rem,3.5vw,4rem);top:5%;
  width:min(23ch,24%);z-index:2;
}
.wild__copy .eyebrow{margin-bottom:.7rem}
.wild__copy .h2{font-size:clamp(1.5rem,2.7vw,2.5rem);line-height:1.04;text-shadow:0 2px 0 rgba(242,239,231,.8)}
.wild__copy .lede{margin-top:.6rem;font-size:clamp(.78rem,.95vw,.9rem);line-height:1.5;max-width:28ch}
.wild__chip{
  margin-top:.8rem;display:inline-flex;align-items:center;gap:.5rem;
  padding:.42rem .85rem;border-radius:999px;
  background:rgba(255,255,255,.92);border:1px solid rgba(38,48,75,.1);
  font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  box-shadow:0 8px 22px rgba(38,48,75,.1);
}
.map__dot{width:7px;height:7px;border-radius:99px;background:var(--accent);animation:blink 2.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.28}}

/* one horizontal bar, centred so it clears Australia, low enough to clear Brazil */
.drop{
  /* Centre within the visible map, excluding the fixed contact rail. */
  position:absolute;left:calc((100% - var(--edge-w)) / 2);bottom:clamp(1.5rem,3vw,2.5rem);translate:-50% 0;
  width:min(62rem,calc(100% - var(--edge-w) - 4rem));
  z-index:3;display:grid;gap:.65rem;
  padding:1.15rem clamp(1.1rem,2vw,1.6rem) 1.25rem;
  border-radius:1.35rem;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 26px 70px rgba(38,48,75,.2);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
}
.drop__title{
  font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--ink) 52%,transparent);
}
.drop__row{display:grid;gap:.75rem;align-items:end;grid-template-columns:1fr}
@media(min-width:800px){.drop__row{grid-template-columns:repeat(3,1fr) auto}}
.drop .fld__lbl{font-size:.56rem}
.drop .fld input{padding:.7rem .85rem;font-size:.9rem;border-radius:.7rem}
.drop .btn{margin-top:0;padding:.8rem 1.5rem;font-size:.66rem;white-space:nowrap}
.drop .formmsg{font-size:.76rem;min-height:0}

/* The map rests on tiny illustrated Cubs. Their animated WebP is only mounted
   when a visitor hovers or focuses one, so the whole map never dances at once. */
.pin{
  position:absolute;left:var(--x);top:var(--y);z-index:1;
  width:clamp(30px,2.5vw,48px);aspect-ratio:1;
  translate:-50% -50%;display:grid;place-items:center;padding:0;
  border:2px solid #fff;border-radius:999px;
  background:rgba(255,255,255,.94);box-shadow:0 5px 14px rgba(20,40,70,.26);
  cursor:pointer;transition:box-shadow .25s ease,transform .25s var(--ease),background .25s ease;
}
.pin::before{
  content:"";position:absolute;top:68%;left:50%;z-index:-1;width:2px;height:clamp(10px,1.1vw,18px);
  background:var(--sing-song-sea);transform:translateX(-50%);border-radius:999px;
}
.pin__still{width:86%;height:86%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(20,40,70,.18));transition:opacity .2s ease}
.pin__motion{
  position:absolute;left:50%;bottom:-12%;width:clamp(76px,7vw,128px);height:clamp(76px,7vw,128px);
  translate:-50% 0;display:grid;place-items:end center;pointer-events:auto;
  opacity:0;transform:scale(.72);transform-origin:center bottom;
  transition:opacity .2s ease,transform .35s var(--ease);
}
.pin__motion img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 9px 12px rgba(20,40,70,.22))}
.pin.is-playing,.pin:focus-visible{z-index:4;background:#fff;box-shadow:0 8px 22px rgba(20,40,70,.32);outline:none}
.pin.is-playing .pin__still{opacity:0}
.pin.is-playing .pin__motion{opacity:1;transform:scale(1)}
.pin:focus-visible{outline:3px solid var(--accent);outline-offset:3px}



@media(max-width:900px){
  .wild{padding-bottom:0}
  .wild__map{display:grid}
  .wild__plot{order:1}
  .wild__copy{position:static;order:2;width:auto;padding-inline:var(--pad);margin-top:1.8rem}
  .wild__copy .h2{font-size:clamp(1.9rem,7vw,2.6rem)}
  .drop{
    position:static;order:3;translate:none;width:auto;
    margin:1.5rem var(--pad) 1.5rem;padding:1.25rem;
  }
  .drop .fld input{padding:.8rem .9rem;font-size:.95rem}
  .drop .btn{padding:.9rem 1rem;font-size:.68rem;width:100%}
}

/* ---------- cards + forms ---------- */
.card{
  padding:clamp(1.6rem,3vw,2.2rem);border-radius:1.5rem;background:#fff;
  border:1px solid rgba(38,48,75,.08);box-shadow:0 24px 64px rgba(38,48,75,.12);
}
.card--form{display:grid;gap:.95rem;align-content:start}
.card__title{font-family:var(--font-cartoon);font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.1;color:var(--ink)}
.card__sub{font-size:.92rem;line-height:1.55;color:color-mix(in srgb,var(--ink) 58%,transparent);margin-top:-.45rem}

.fld{display:grid;gap:.4rem}
.fld__lbl{font-size:.64rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 50%,transparent)}
.fld input,.fld textarea{
  width:100%;padding:.9rem 1.05rem;border-radius:.85rem;
  background:#FBFAF7;border:1px solid rgba(38,48,75,.15);font-size:.98rem;color:var(--ink);
  transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;resize:vertical;
}
.fld input:focus,.fld textarea:focus{outline:none;background:#fff;border-color:var(--accent);box-shadow:0 0 0 4px rgba(244,116,101,.15)}
.fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:var(--accent);background:#FFF6F5}
.fld--dark .fld__lbl{color:rgba(255,255,255,.56)}
.fld--dark input,.fld--dark textarea{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2);color:#fff}
.fld--dark input:focus,.fld--dark textarea:focus{background:rgba(255,255,255,.12);border-color:var(--cubcoats-cheer);box-shadow:0 0 0 4px rgba(255,185,104,.18)}
.fld--wide{grid-column:1/-1}

.btn{
  margin-top:.4rem;padding:1rem 1.6rem;border-radius:.85rem;
  background:var(--ink);color:#fff;
  font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transition:transform .25s var(--ease),background .25s ease,box-shadow .25s ease;
  box-shadow:0 12px 30px rgba(38,48,75,.2);
}
.btn:hover{transform:translateY(-2px);background:var(--accent);box-shadow:0 18px 40px rgba(244,116,101,.3)}
.btn--light{background:var(--cubcoats-cheer);color:var(--ink);box-shadow:0 12px 30px rgba(255,185,104,.26);justify-self:start}
.btn--light:hover{background:#fff;box-shadow:0 18px 40px rgba(255,255,255,.22)}
.formmsg{min-height:1.2em;font-size:.86rem;font-weight:500;color:var(--accent)}
.contact__form .formmsg{grid-column:1/-1;color:var(--cubcoats-cheer)}

/* ============================================================
   footer
   ============================================================ */
.foot{background:var(--crystal-caves);padding:clamp(1.6rem,3.6vh,2.3rem) 0}
.foot__in{
  position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:1rem;
  min-height:clamp(4.5rem,8vh,6rem);
  padding-right:calc(var(--pad) + var(--edge-w));
}
.foot__logo{width:clamp(104px,10vw,138px);height:auto;opacity:1;justify-self:start}
.foot__mail{
  position:absolute;left:50%;top:50%;translate:-50% -50%;margin:0;white-space:nowrap;
}
.foot__mail a{color:#fff;text-decoration:none;font-weight:600}
.foot__mail a:hover{text-decoration:underline}
.foot__credit{justify-self:end;text-align:right;font-size:.85rem;color:rgba(255,255,255,.78)}
.foot__credit a{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);transition:border-color .25s ease,color .25s ease}
.foot__credit a:hover{color:var(--cubcoats-cheer);border-color:var(--cubcoats-cheer)}

/* ============================================================
   edge arrow + contact panel
   ============================================================ */
.edge{
  /* Keep this action rail beneath the fixed header. */
  position:fixed;top:0;right:0;z-index:100;
  width:var(--edge-w);height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;
  background:linear-gradient(180deg,var(--ink) 0%,#1A2138 100%);color:#fff;
  transform:translateX(100%);
  transition:transform .6s var(--ease),width .35s var(--ease),background .35s ease;
  box-shadow:-18px 0 50px rgba(26,33,56,.24);
}
.edge.is-ready{transform:translateX(0)}
.edge:hover{width:calc(var(--edge-w) + 26px);background:linear-gradient(180deg,var(--accent) 0%,#E0604F 100%)}
.edge__label{writing-mode:vertical-rl;font-family:var(--font-cartoon);font-size:clamp(.95rem,1.5vw,1.2rem);letter-spacing:.06em;text-transform:uppercase}
.edge__arrow{display:block;width:58%;color:#fff}
.edge__arrow svg{width:100%;height:auto;stroke:currentColor;stroke-width:2.4;animation:nudge 2.2s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(20%)}}

.edge--back{
  right:auto;left:0;transform:none;position:absolute;
  background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.04) 100%);
  border-right:1px solid rgba(255,255,255,.14);box-shadow:none;
}
.edge--back:hover{width:calc(var(--edge-w) + 26px);background:rgba(255,255,255,.16)}
.edge__arrow--back svg{animation:nudgeBack 2.2s ease-in-out infinite}
@keyframes nudgeBack{0%,100%{transform:translateX(0)}50%{transform:translateX(-20%)}}

/* The contact view is an overlay, not a page-layout transition. Keeping the
   story and header fixed in place prevents scroll-bar reflow and white flashes. */
body.contact-open .edge:not(.edge--back){transform:translateX(100%)}

.contact{
  position:fixed;inset:0;z-index:200;transform:translateX(100%);
  transition:transform .72s var(--ease);
  background:
    radial-gradient(52% 62% at 88% 26%,rgba(244,116,101,.22),transparent 66%),
    radial-gradient(46% 54% at 74% 88%,rgba(255,185,104,.16),transparent 64%),
    linear-gradient(150deg,var(--ink) 0%,#151C31 55%,#10162A 100%);
  overflow-y:auto;overscroll-behavior:contain;pointer-events:none;
}
.contact.is-open{transform:translateX(0);pointer-events:auto}
.contact::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:34%;
  background:url("../img/collage/c06.webp") center/cover no-repeat;
  opacity:.16;filter:saturate(.5);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 55%);
  mask-image:linear-gradient(90deg,transparent,#000 55%);
  pointer-events:none;
}
@media(max-width:900px){.contact::after{display:none}}
.contact__inner{
  position:relative;z-index:1;
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:.4rem;
  padding:clamp(4rem,10vh,6rem) var(--pad) clamp(3rem,8vh,5rem);
  padding-left:calc(var(--edge-w) + var(--pad));max-width:62rem;
}
.contact__title{font-family:var(--font-cartoon);color:#fff;font-size:clamp(2.3rem,6.4vw,4.8rem);line-height:1;letter-spacing:-.01em;text-wrap:balance}
.contact__lede{margin-top:1.3rem;max-width:48ch;font-size:clamp(1rem,1.9vw,1.14rem);line-height:1.66;color:rgba(255,255,255,.72);text-wrap:pretty}
.contact__form{display:grid;gap:.95rem;margin-top:clamp(2.2rem,5vw,3rem);grid-template-columns:1fr}
@media(min-width:760px){.contact__form{grid-template-columns:repeat(3,1fr)}}
.contact__foot{
  display:flex;align-items:center;gap:1rem;
  /* Use the remaining panel space so the brand row rests at the bottom. */
  margin-top:auto;padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.5);font-size:.78rem;letter-spacing:.05em;
}
.contact__foot img{width:clamp(96px,10vw,136px);height:auto;opacity:.9}

/* ============================================================
   film lightbox
   ============================================================ */
.box{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(9,12,20,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease;
}
.box.is-open{opacity:1;visibility:visible}
.box__frame{
  width:min(100%,68rem);border-radius:1.2rem;overflow:hidden;
  background:#000;box-shadow:0 40px 120px rgba(0,0,0,.6);
  transform:scale(.95);transition:transform .5s var(--ease);
}
.box.is-open .box__frame{transform:none}
.box__frame video{width:100%;height:auto;aspect-ratio:16/9;background:#000}
.box__close{
  position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);
  width:3rem;height:3rem;border-radius:999px;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;
  transition:background .25s ease,transform .25s var(--ease);
}
.box__close:hover{background:rgba(255,255,255,.26);transform:scale(1.06)}
.box__close svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.2}

/* ============================================================
   responsive
   ============================================================ */
@media(max-width:760px){
  :root{--edge-w:0px}
  .cast__head{grid-template-columns:1fr}
  .cast__nav{display:none}

  /* Keep the long-form story compact and consistent on a phone. */
  .proof,.cast,.adult{padding-block:3.75rem}
  .cast__head{margin-bottom:2rem}

  /* Keep the transformation film in its native widescreen frame on phones.
     A viewport-height container with `cover` was cutting off its sides. */
  .unzip{min-height:0;aspect-ratio:16/9}
  .unzip__vid{object-fit:contain}

  /* The contact rail is fixed at the bottom on phones, so reserve its space
     instead of letting it cover the final footer line. */
  .foot{
    padding-top:1.5rem;
    padding-bottom:calc(1.5rem + 60px + env(safe-area-inset-bottom,0px));
  }

  /* a side rail is wrong on a phone, so it lies down as a bar */
  .edge{
    top:auto;bottom:0;left:0;right:0;
    width:100%;height:auto;min-height:60px;
    flex-direction:row;gap:.9rem;
    transform:translateY(110%);
    box-shadow:0 -14px 34px rgba(26,33,56,.26);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .edge.is-ready{transform:none}
  .edge:hover{width:100%}
  .edge__label{writing-mode:horizontal-tb;font-size:1rem}
  .edge__arrow{width:44px}
  body.contact-open .edge:not(.edge--back){transform:translateY(110%)}

  .edge--back{
    position:absolute;top:0;bottom:auto;left:0;right:0;
    width:100%;height:auto;min-height:56px;
    flex-direction:row;transform:none;
    border-right:0;border-bottom:1px solid rgba(255,255,255,.14);
  }
  .edge--back:hover{width:100%}
  .contact__inner{padding-top:calc(56px + 2rem);padding-left:var(--pad)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .col{animation:none}
  .reveal,.heroFade{opacity:1;transform:none}
  .word,.unzip__a,.unzip__b,.peek{opacity:1;transform:none}
}

/* ============================================================
   YouTube facade (the link the deck points to on the Coming soon slide)
   Loads nothing until it is clicked.
   ============================================================ */
.tube{position:relative;border-radius:1.5rem;overflow:hidden;background:#000;aspect-ratio:16/9}
.tube img,.tube iframe{width:100%;height:100%;border:0;display:block}
.tube__poster{object-fit:cover;transition:transform .7s var(--ease),filter .4s ease}
.tube:hover .tube__poster{transform:scale(1.04);filter:brightness(.86)}
.tube__play{
  position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;
}
.tube__play::before{
  content:"";position:absolute;width:clamp(64px,7vw,86px);aspect-ratio:1;border-radius:999px;
  background:var(--accent);box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:transform .35s var(--ease),background .3s ease;
}
.tube__play svg{
  position:relative;width:clamp(24px,2.6vw,32px);fill:#fff;
  /* The triangle itself is weighted to the right inside its SVG viewbox. */
  margin:0;transform:translateX(-8.333%);
}
.tube:hover .tube__play::before{transform:scale(1.08);background:#fff}
.tube:hover .tube__play svg{fill:var(--ink)}
.tube__play:focus-visible::before{outline:3px solid #fff;outline-offset:4px}

/* The original clip has embedding disabled by its owner, so this opens it on YouTube. */
.tube{display:block;text-decoration:none}
.tube__tag{
  position:absolute;left:1rem;bottom:1rem;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.48rem .9rem;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--ink);
  font-size:.63rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
}

/* ============================================================
   Coming soon, laid out the way the deck places it
   ============================================================ */
.adult__head{max-width:46rem;margin-bottom:clamp(2.2rem,5vw,3.2rem)}
.adult__grid{display:grid;gap:clamp(1.2rem,2.6vw,2rem);align-items:start;grid-template-columns:1fr}
@media(min-width:900px){.adult__grid{grid-template-columns:1.62fr 1fr}}

.beatcard{display:grid;gap:1rem}
.beatcard > img,.beatcard .tube{
  border-radius:1.5rem;overflow:hidden;width:100%;
  border:1px solid rgba(38,48,75,.08);
  box-shadow:0 22px 60px rgba(38,48,75,.14);
}
.beatcard > img{aspect-ratio:1/1;object-fit:cover;background:#fff}
.beatcard--wide > img{aspect-ratio:16/9}
.beatcard__cap{
  display:flex;gap:.85rem;align-items:baseline;
  font-size:clamp(1rem,1.9vw,1.22rem);line-height:1.45;font-weight:500;
  color:color-mix(in srgb,var(--ink) 74%,transparent);
}
.beatcard__cap--hot{color:var(--accent);font-weight:600}
.beatcard__no{
  font-family:var(--font-cartoon);font-size:.85rem;
  color:color-mix(in srgb,var(--ink) 32%,transparent);
}
.beatcard__cap--hot .beatcard__no{color:var(--accent);opacity:.55}

/* link-shaped play control */
.tube__play{background:transparent;padding:0;cursor:pointer}
.box__yt{width:100%;aspect-ratio:16/9;background:#000}
.box__yt iframe{width:100%;height:100%;border:0;display:block}
.box__note{
  padding:.9rem 1.1rem;background:#0F1420;color:rgba(255,255,255,.7);
  font-size:.82rem;line-height:1.5;text-align:center;
}
.box__note a{color:var(--cubcoats-cheer);font-weight:600}

.beatcard__link{
  color:var(--accent);font-weight:600;text-decoration:none;
  border-bottom:1.5px solid rgba(244,116,101,.4);transition:border-color .25s ease;
  white-space:nowrap;
}
.beatcard__link:hover{border-color:var(--accent)}


/* Coming soon holds one line */
.h2--oneline{text-wrap:nowrap;font-size:clamp(1.5rem,4.1vw,3.6rem)}
@media(max-width:560px){.h2--oneline{text-wrap:balance;font-size:clamp(1.6rem,7vw,2.4rem)}}


/* ============================================================
   Hero: THE MAGIC, the loop, then IS BACK underneath
   ============================================================ */
.hero__title--low{margin-top:clamp(1rem,2.5vh,2rem)}
.peek{
  position:relative;z-index:4;
  margin:clamp(1rem,2.6vh,2rem) auto 0;
  display:inline-flex;align-items:center;gap:.9rem;
}

/* Unzip: about a third smaller, and "your" rides above "imagination" */
.unzip__a,.unzip__b{font-size:clamp(1.7rem,5.8vw,5rem)}
.unzip__b{display:grid;justify-items:center;line-height:.92;text-align:center}
.unzip__b em{font-style:normal;display:block;font-size:.62em}

/* Adult Cubcoats: equal horizontal cards, with a lightweight looping teaser.
   The full 1080p film is requested only after pressing play. */
@media(min-width:900px){.adult__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.adult-media{
  position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:1.5rem;background:#1A2031;
  border:1px solid rgba(80,87,106,.1);box-shadow:0 22px 60px rgba(80,87,106,.16);
}
.adult-media__preview{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .4s ease}
.adult-media:hover .adult-media__preview,.adult-media:focus-within .adult-media__preview{transform:scale(1.035);filter:brightness(.84)}
.adult-media__trigger{position:absolute;inset:0;display:grid;place-items:center;padding:0;cursor:pointer}
.adult-media__play{
  display:grid;place-items:center;width:clamp(62px,6vw,78px);aspect-ratio:1;border-radius:999px;
  background:var(--crystal-caves);color:var(--ink);box-shadow:0 10px 28px rgba(18,29,55,.34);
  transition:transform .3s var(--ease),background .25s ease;
}
.adult-media__play svg{width:clamp(24px,2.4vw,30px);fill:currentColor;transform:translateX(8%)}
.adult-media__trigger:hover .adult-media__play,.adult-media__trigger:focus-visible .adult-media__play{transform:scale(1.08);background:#fff}
.adult-media__trigger:focus-visible{outline:3px solid #fff;outline-offset:-8px}
.adult-media__tag{
  position:absolute;left:1rem;bottom:1rem;padding:.48rem .86rem;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--ink);font-size:.63rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;box-shadow:0 8px 22px rgba(20,40,70,.2);
}

/* A hint of the next Cub is intentionally visible on phone-sized rails. */
@media(max-width:560px){.railwrap{--per:1.16}}

/* ============================================================
   Client round: brighter, bluer, less furniture
   ============================================================ */

/* ── 2 · the phenomenon ───────────────────────────────────── */
.proof{
  padding:0;position:relative;isolation:isolate;
  background:var(--sing-song-sea);
}
.proof .blob{display:none}

/* A quiet drift of happy-customer stills sits behind the numbers, per the
   brand's own note: tiles of moving images in the background, "as our old
   first landing page", without ever competing with the stat blocks. */
.proof-collage{
  position:absolute;inset:-6% -3%;z-index:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:2px;
  transform:rotate(-2deg) scale(1.12);
  opacity:.4;filter:saturate(.75);
}
@media(min-width:900px){.proof-collage{grid-template-columns:repeat(8,1fr)}}
.pcol{display:flex;flex-direction:column;gap:2px;animation:drift linear infinite}
.pcol--down{animation-direction:reverse}
.pcol img{width:100%;aspect-ratio:3/4;object-fit:cover}
.proof::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(72% 68% at 88% 6%,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 70%),
    linear-gradient(158deg,rgba(82,123,197,.62) 0%,rgba(111,155,221,.58) 45%,rgba(92,136,218,.64) 100%);
}
.proof__band,.proof__deck,.partner-edge{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.pcol{animation:none}}
.proof__band{
  background:transparent;
  padding:clamp(3.5rem,9vh,6rem) 0 clamp(2.5rem,6vh,4rem);
}
.proof__band .h2{
  color:#fff;text-align:center;max-width:none;margin-inline:auto;
  white-space:nowrap;font-size:clamp(1.1rem,5vw,3.6rem);
}
.proof__deck{
  background:transparent;
  padding:0 0 clamp(4rem,9vh,6.5rem);   /* clears layer three */
  margin-top:0;
}
.stats{display:grid;gap:clamp(1rem,2.4vw,1.8rem);grid-template-columns:1fr}
@media(min-width:820px){.stats{grid-template-columns:repeat(3,1fr)}}
/* one uniform card, not three different colours */
.stat{
  display:grid;gap:.35rem;justify-items:center;align-content:center;text-align:center;
  width:100%;max-width:22rem;justify-self:center;aspect-ratio:1.28/1;
  padding:clamp(1.3rem,2.6vw,1.9rem) clamp(1rem,2vw,1.5rem);
  border-radius:clamp(1.5rem,4vw,2rem);
  background:linear-gradient(145deg,#3D64AE 0%,#5687D6 100%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 18px 42px rgba(37,68,133,.24),inset 0 1px 0 rgba(255,255,255,.16);
}
.stat__num{
  font-family:var(--font-head);color:#fff;
  font-size:clamp(3.8rem,7.5vw,5.8rem);line-height:.94;
  display:flex;align-items:baseline;
}
.stat__cur{font-size:.6em}
.stat__suf{font-size:.6em}
.stat__lbl{
  color:rgba(255,255,255,.86);font-weight:500;
  font-size:clamp(.85rem,1.5vw,1rem);letter-spacing:.04em;
}

/* ── 3 · meet the Cubcoats ────────────────────────────────── */
.cast{background:var(--crystal-caves);padding:clamp(4rem,10vh,6.5rem) 0 clamp(3rem,7vh,4.5rem)}
.cast__title{text-align:center;color:#fff;margin-bottom:clamp(2rem,4.5vw,3rem)}
.railwrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(.5rem,1.6vw,1.2rem)}
/* Tall arrows that stand the full height of a card, and light up on hover. */
.railarrow{
  align-self:stretch;
  width:clamp(3.6rem,6vw,5.5rem);
  display:grid;place-items:center;border-radius:1.1rem;
  background:rgba(255,255,255,.24);color:#fff;
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 10px 26px rgba(47,52,66,.12);
  transition:background .28s ease,color .28s ease,border-color .28s ease,box-shadow .28s ease;
}
.railarrow svg{width:52%;stroke:currentColor;stroke-width:2.2;fill:none}
.railarrow:hover{background:var(--sing-song-sea);color:#fff;border-color:var(--sing-song-sea);box-shadow:0 14px 30px rgba(47,52,66,.2)}
.railwrap{align-items:stretch}
.dots{display:none}

/* ── 4 · island ───────────────────────────────────────────── */
.island__art{filter:brightness(1.16) saturate(1.04)}
.island__panel{align-self:end;justify-self:stretch}
.island__scrim{
  inset:auto -12% 0 -8%;height:52%;
  background:linear-gradient(0deg,rgba(20,40,56,.62) 0%,rgba(20,40,56,.28) 46%,rgba(20,40,56,0) 100%);
}
.island__copy{text-align:center}
.island__title{
  font-size:clamp(.98rem,2.6vw,1.9rem);          /* a further 25% down */
  text-shadow:0 8px 26px rgba(0,0,0,.42);
}
/* the words stir once they arrive, like something moving under the surface */
.island__title.in{animation:stir 3.6s ease-in-out .6s infinite}
@keyframes stir{
  0%,100%{transform:translateY(0) rotate(0)}
  25%    {transform:translateY(-2px) rotate(-.5deg)}
  50%    {transform:translateY(1px)  rotate(.45deg)}
  75%    {transform:translateY(-1px) rotate(-.3deg)}
}
@media(prefers-reduced-motion:reduce){.island__title.in{animation:none}}

/* ── 6 · adult Cubcoats ───────────────────────────────────── */
.adult{background:var(--sing-song-sea);padding:clamp(3rem,7vh,4.5rem) 0 clamp(2rem,4vh,3rem)}
.adult__line{
  color:#fff;text-align:center;text-wrap:balance;
  font-size:clamp(1.35rem,3.2vw,2.6rem);margin-bottom:clamp(1.8rem,4vw,2.6rem);
}
.adult__grid{display:grid;gap:clamp(1.2rem,2.6vw,2rem);grid-template-columns:1fr}
@media(min-width:900px){.adult__grid{grid-template-columns:1fr 1fr;align-items:start}}
.beatcard{display:grid;gap:.85rem}
.beatcard__cap{
  color:#fff;text-align:center;font-weight:500;
  font-size:clamp(.95rem,1.7vw,1.12rem);line-height:1.4;
}
.beatcard .tube,.beatcard .adult-media{aspect-ratio:16/9;width:100%;border-radius:1.25rem;overflow:hidden}
.adult__payoff{
  margin-top:clamp(1.6rem,3.4vw,2.4rem);text-align:center;color:#fff;
  font-family:var(--font-head);font-size:clamp(1.2rem,2.6vw,2rem);
}

/* ── 7 · in the wild ──────────────────────────────────────── */
.wild__copy{position:absolute;left:clamp(1rem,3.5vw,4rem);bottom:4%;top:auto;width:auto;z-index:2}
.wild__copy .h2{font-size:clamp(1.5rem,3vw,2.7rem);color:#2F3442}
.wild__note{
  position:absolute;left:53%;top:88%;translate:-50% 0;z-index:2;
  max-width:24ch;text-align:center;
  font-size:clamp(.78rem,1.15vw,.95rem);line-height:1.5;
  color:color-mix(in srgb,#2F3442 76%,transparent);
}
.cubpin{
  position:absolute;left:var(--x);top:var(--y);translate:-50% -60%;
  width:clamp(38px,4vw,64px);z-index:3;pointer-events:none;
}
.cubpin--small{width:clamp(30px,3vw,48px)}
.cubpin img{width:100%;height:auto;filter:drop-shadow(0 8px 16px rgba(47,52,66,.28))}
.dotpin{
  position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;
  width:clamp(11px,1.1vw,16px);aspect-ratio:1;border-radius:999px;z-index:2;
  background:var(--sing-song-sea);border:2px solid #fff;
  box-shadow:0 3px 9px rgba(47,52,66,.28);
}
.dotpin::after{
  content:"";position:absolute;inset:-2px;border-radius:999px;
  border:2px solid var(--sing-song-sea);opacity:0;
  animation:ping 3s cubic-bezier(.2,.6,.3,1) infinite;
  animation-delay:calc(var(--i,0)*.4s);
}
.nextup{
  position:relative;z-index:3;
  width:min(30rem,calc(100% - 2*var(--pad)));
  margin:clamp(1rem,2.5vw,2rem) auto 0;
  display:grid;gap:.7rem;justify-items:center;
}
.nextup__title{
  font-family:var(--font-head);font-size:clamp(1.1rem,2.3vw,1.7rem);color:#2F3442;
}
.nextup__row{display:flex;width:100%;gap:.5rem}
.nextup__row input{
  flex:1;padding:.8rem 1rem;border-radius:.8rem;
  border:2px solid rgba(47,52,66,.14);background:#fff;color:#2F3442;
}
.nextup__row input:focus{outline:none;border-color:var(--sing-song-sea)}
.nextup__go{
  width:3.1rem;border-radius:.8rem;display:grid;place-items:center;
  background:var(--sing-song-sea);color:#fff;
  transition:background .25s ease,transform .25s var(--ease);
}
.nextup__go svg{width:22px;stroke:currentColor;stroke-width:2.2;fill:none}
.nextup__go:hover{background:#3F63A8;transform:translateY(-1px)}

/* ── sidebar ──────────────────────────────────────────────── */
.edge{
  background:rgba(255,255,255,.34);
  backdrop-filter:blur(12px) saturate(150%);-webkit-backdrop-filter:blur(12px) saturate(150%);
  border-left:1px solid rgba(255,255,255,.5);
  transition:background .3s ease,color .3s ease;
}
.edge:hover{background:var(--sing-song-sea)}
.edge:hover .edge__label,.edge:hover .edge__arrow svg{color:#fff;stroke:#fff}
.edge .edge__label,.edge .edge__arrow svg{color:#2F3442;stroke:#2F3442}

/* ── contact panel: the supplied picture, only lightly muted ─ */
.contact{background:var(--sing-song-sea)}
.contact__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.contact__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(24,34,54,.4) 0%,rgba(24,34,54,.16) 46%,rgba(24,34,54,.05) 100%);
}
.contact__inner{position:relative;z-index:2}

/* ── captions centred over each film, no orange anywhere ──── */
.beatcard__cap{text-align:center}
.tube__play::before,.adult-media__play{background:#fff}
.tube__play svg,.adult-media__play svg{fill:var(--sing-song-sea)}
.tube:hover .tube__play::before{background:var(--crystal-caves)}
.tube__tag{display:none}

/* ── close the gap under the map ──────────────────────────── */
.wild{padding-bottom:clamp(2rem,4vw,3rem)}
/* keep the Australia Cub clear of the sidebar strip */
.wild__plot{padding-right:var(--edge-w)}

/* ── art must not be draggable or saveable in one tap ─────── */
.cub__stage img,.cubpin img,.collage img,.island__art,.contact__bg{
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none;
}

/* ============================================================
   Mobile
   ============================================================ */
@media(max-width:760px){
  /* layer 1 carries no navigation at all */
  .hero .cue{display:none}
  .head.is-hero{background:none!important;box-shadow:none!important}
  .head.is-hero .burger{opacity:0;pointer-events:none}
  .head.is-hero .head__mark{opacity:0}

  .hero__inner{display:grid;min-height:78svh;align-content:space-between;padding-block:2rem}
  .hero__title{font-size:clamp(2.8rem,13.5vw,4.2rem);white-space:nowrap}
  .hero__title .line{white-space:nowrap}
  .hero__title--low{margin-top:0}

  /* one big circle, no words */
  .peek{padding:0;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  .peek__meta{display:none}
  .peek__vid,.peek__ring,.peek__play{width:clamp(96px,26vw,132px)}

  .drawer{background:var(--crystal-caves)}
  .drawer__link{color:#2F3442;border-bottom-color:rgba(47,52,66,.14)}
  .drawer__cta{background:var(--sing-song-sea);color:#fff}

  /* the wild GIFs run on their own, no tap needed */
  .cubpin{width:clamp(34px,9vw,52px)}
  .cubpin--small{width:clamp(27px,7vw,40px)}
  .wild__copy .h2{font-size:clamp(1.9rem,8vw,2.8rem)}
  .wild__plot{padding-right:0}
  .wild__note{position:static;translate:none;margin:1rem auto 0}
  .wild__copy{position:static;margin:1.4rem var(--pad) 0}
}
.foot__in{text-align:center}

/* the transformation film reads brighter now */
.unzip__vid{filter:none}
.unzip__veil{background:transparent}

/* no blue flash when a phone registers a tap */
html{-webkit-tap-highlight-color:transparent}
a,button,input,label,summary,.cub,.pin,.dotpin,.cubpin{
  -webkit-tap-highlight-color:transparent;
}
button,a,.cub{-webkit-touch-callout:none}
/* the cards and controls should not select as text on a long press */
.cub,.cub *,.railarrow,.navbtn,.peek,.edge,.nav__cta,.drawer__cta,
.stat,.h2,.hero__title,.island__title,.unzip__a,.unzip__b{
  user-select:none;-webkit-user-select:none;
}

/* ── contact panel on phones: the picture leads, no logo ──── */
@media(max-width:760px){
  .contact__bg{object-position:50% 42%}
  /* far less muting so the shot stays bright */
  .contact__scrim{
    background:linear-gradient(180deg,rgba(24,34,54,.08) 0%,rgba(24,34,54,.2) 42%,rgba(24,34,54,.72) 100%);
  }
  /* copy sits low so the kids and the stairs stay visible */
  .contact__inner{
    display:grid;align-content:end;min-height:100svh;
    padding-block:6rem clamp(2rem,7vh,3.5rem);
  }
  .contact__foot img{display:none}
  .contact__foot{justify-content:center}
}

/* the last orange control goes blue too */
.btn--light{background:var(--crystal-caves);color:#2F3442}
.btn--light:hover{background:#fff;color:var(--sing-song-sea)}

/* ── the form sits on a photograph now, so it needs its own ground ── */
.contact__form{
  margin-top:clamp(1.2rem,3vh,2rem);
  padding:clamp(1.1rem,3vw,1.8rem);
  border-radius:1.25rem;
  background:rgba(20,28,46,.62);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 20px 50px rgba(16,22,38,.32);
}
.contact__form .fld__lbl{color:rgba(255,255,255,.82)}
.contact__form input,.contact__form textarea{
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.6);
  color:#2F3442;
}
.contact__form input:focus,.contact__form textarea:focus{
  outline:none;border-color:var(--crystal-caves);
  box-shadow:0 0 0 3px rgba(153,198,238,.45);
}
.contact__title,.contact__lede{text-shadow:0 3px 18px rgba(16,22,38,.55)}

@media(max-width:760px){
  /* on a phone the picture reads at the top and the form below it */
  .contact__inner{align-content:start;min-height:auto;padding-block:5.5rem 2.5rem}
  .contact__scrim{
    background:linear-gradient(180deg,rgba(24,34,54,.16) 0%,rgba(24,34,54,.16) 34%,rgba(24,34,54,.44) 100%);
  }
  .contact__form{background:rgba(20,28,46,.74)}
  .foot__in{min-height:5.5rem;padding-right:var(--pad)}
  .foot__credit{font-size:.72rem}
}

/* ============================================================
   Client round: bigger circle, calmer grade, centred captions
   ============================================================ */

/* ── 1 · hero: the loop is the centrepiece now ─────────────── */
.peek{
  padding:0;background:none;border:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  margin:clamp(1rem,2.4vh,2rem) auto;
}
.peek:hover{background:none;transform:translateY(-3px)}
.peek__vid,.peek__ring,.peek__play{width:clamp(150px,19vw,270px)}
.peek__ring{left:0}
.peek__play svg{width:clamp(30px,3.4vw,46px);height:auto}
/* the two halves push to the edges so the circle owns the middle */
.hero__inner{display:grid;justify-items:center;align-content:space-between;min-height:74svh}
.hero__title{margin-top:0}
.hero__title--low{margin-top:0}

/* ── 5 · unzip: the ungraded main-site film ───────────────── */
.unzip__vid{filter:none}
.unzip__b em{font-style:normal;display:block;font-size:.62em;text-align:center}

/* ── 6 · captions sit over each film ──────────────────────── */
.beatcard{position:relative}
.beatcard__cap{
  position:absolute;top:0;left:0;right:0;z-index:3;
  margin:0;padding:.9rem 1rem;
  text-align:center;color:#fff;
  font-size:clamp(.9rem,1.6vw,1.08rem);line-height:1.35;
  text-shadow:0 2px 14px rgba(0,0,0,.6);
  background:linear-gradient(180deg,rgba(20,28,46,.62) 0%,rgba(20,28,46,0) 100%);
  border-radius:1.25rem 1.25rem 0 0;
  pointer-events:none;
}
.beatcard{display:block}
.beatcard .tube,.beatcard .adult-media{margin:0}

/* the caption really does sit centred over its film */
.beatcard__cap{display:block!important;justify-content:center}

/* the mark stays light blue, but keeps a shadow so it holds on the photo wall */
.head[data-tone="dark"] .head__mark{
  background-color:var(--crystal-caves);
  filter:drop-shadow(0 2px 12px rgba(20,28,46,.75)) drop-shadow(0 0 2px rgba(20,28,46,.5));
}
.head[data-tone="dark"] .nav__link{
  color:#fff;text-shadow:0 2px 12px rgba(20,28,46,.8),0 1px 3px rgba(20,28,46,.6);
}

/* the island headline spans the full width so "centred" really is centred */
.island__panel{width:100%!important;justify-self:stretch;padding-inline:var(--pad)}
.island__copy{text-align:center;width:100%}
/* stir as soon as the section is live, whether or not the reveal class landed */
.island.is-live .island__title,.island__title.in{animation:stir 3.6s ease-in-out .6s infinite}

/* ── phone hero: visible, clear chrome and centred film ─────── */
@media(max-width:899px){
  /* At the top of the hero, keep the original clear treatment. */
  .head.is-hero{
    display:flex!important;background:transparent!important;box-shadow:none!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  .head.is-hero .head__mark{
    opacity:1;background-color:var(--crystal-caves)!important;
    filter:drop-shadow(0 2px 12px rgba(20,28,46,.75));
  }
  .head.is-hero .burger{opacity:1;pointer-events:auto}

  /* Once the header becomes sticky, switch to the clear solid version. */
  .head.is-hero.is-solid{
    background:rgba(92,136,218,.96)!important;
    box-shadow:0 1px 0 rgba(255,255,255,.16),0 8px 24px rgba(20,28,46,.2)!important;
    backdrop-filter:blur(12px) saturate(150%)!important;
    -webkit-backdrop-filter:blur(12px) saturate(150%)!important;
  }
  .head.is-hero.is-solid .head__mark{background-color:#fff!important;filter:none}

  /* Match the compact desktop composition: one full-width, centred stack
     instead of three items being spread across a tall phone viewport. */
  .hero{
    display:flex;flex-direction:column;align-items:stretch;
    padding:calc(6.4rem + env(safe-area-inset-top,0px)) var(--pad)
      calc(3rem + env(safe-area-inset-bottom,0px));
  }
  .hero__inner{
    flex:1 1 auto;width:100%;max-width:none;min-height:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:clamp(.65rem,2.4svh,1.2rem);text-align:center;
  }
  .hero__title{font-size:clamp(3.15rem,15.25vw,4.6rem)}
  .hero__title--low{margin:0}
  .hero__film-slot{display:grid;width:100%;place-items:center;line-height:0}
  .peek{
    position:relative;left:auto!important;top:auto!important;right:auto;bottom:auto!important;
    translate:none!important;transform:none;
    display:block;align-self:auto;justify-self:center;margin:0!important;
    width:clamp(190px,55vw,260px);aspect-ratio:1;
    padding:0!important;gap:0;background:none!important;border:0!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    animation:fadeUp .75s var(--ease) .45s forwards;
  }
  .peek__meta{display:none!important}
  .peek__vid,.peek__ring,.peek__play{width:100%}
  .peek__vid{display:block;height:100%}
  .peek__ring,.peek__play{left:0}
}

/* Correct hierarchy: the hero owns the large type treatment. The Cast title
   keeps its established scale, while the actual cards receive more room. */
.hero__title{font-size:clamp(5.3rem,8.4vw,10rem)!important;line-height:.82}
.cast__title{font-size:clamp(2.1rem,6vw,4.4rem)!important;line-height:1.02}
.cast .wrap{max-width:min(100%,92rem)}
.cast__heading{max-width:var(--maxw)!important}

/* Flip, Roll and Unzip enter together from the left, then each softly acts
   out its own word. A shared detail line gives the trio one visual rhythm. */
.cast__verb{position:relative;padding-bottom:.18em;opacity:0;transform:translateX(-1.8rem)}
.cast__verb::after{content:"";position:absolute;left:0;right:-.12em;bottom:0;height:3px;border-radius:99px;background:repeating-linear-gradient(90deg,currentColor 0 7px,transparent 7px 11px);opacity:.55;transform:scaleX(.7);transform-origin:left center}
.cast__verb--unzip::after{background:repeating-linear-gradient(90deg,#5C88DA 0 7px,transparent 7px 11px)}
.cast.is-in .cast__verb--flip{animation:verbEnter .58s .12s var(--ease) both,finalFlip 4.2s 1.2s cubic-bezier(.22,1,.36,1) infinite}
.cast.is-in .cast__verb--roll{animation:verbEnter .58s .3s var(--ease) both,finalRoll 4.2s 1.7s ease-in-out infinite}
.cast.is-in .cast__verb--unzip{animation:verbEnter .58s .48s var(--ease) both,finalUnzip 4.2s 2.2s ease-in-out infinite}
@keyframes verbEnter{from{opacity:0;transform:translateX(-1.8rem)}to{opacity:1;transform:none}}

@media(max-width:899px){
  .hero__title{font-size:clamp(4.15rem,17.5vw,6.5rem)!important;line-height:.84}
  .cast__title{font-size:clamp(2.1rem,8.8vw,3.5rem)!important}
  .cast .wrap{max-width:100%}
}

/* One-column stats should stay substantial, but not become giant phone tiles. */
@media(max-width:819px){
  .stats{gap:.9rem}
  .stat{
    max-width:min(17.5rem,80vw);
    aspect-ratio:1.2/1;
    padding:1.1rem;
    border-radius:1.8rem;
  }
}

/* Make the Cubcoats badge readable and let the resting puller settle like
   a small piece of hardware, without affecting the drag interaction. */
.dstage--zip .zip__pull-mark{width:37%!important}
.dstage--zip .zip__pull{
  transform-origin:50% 10%;
  animation:zipPullWiggle 2.65s cubic-bezier(.42,0,.2,1) infinite!important;
}
@keyframes zipPullWiggle{
  0%,59%,100%{rotate:0deg}
  65%{rotate:-1.5deg}
  71%{rotate:1.2deg}
  77%{rotate:-.75deg}
  83%{rotate:.4deg}
  89%{rotate:0deg}
}
.dstage--zip .zip.is-dragging .zip__pull,
.dstage--zip .zip.is-unzipping .zip__pull{animation:none!important}

/* Phone contact: keep the people framed, and place each contact step at the
   base of the scene. The small switcher lets a visitor change paths in place. */
.contact__switcher{display:none}
@media(max-width:760px){
  .contact__bg{object-position:70% 42%!important}
  .contact__inner{
    display:flex!important;flex-direction:column!important;
    justify-content:flex-end!important;gap:.65rem!important;
  }
  .contact[data-mobile-form] .contact__switcher{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.28rem;
    width:min(100% - (var(--pad) * 2),31rem);margin-inline:auto;padding:.28rem;
    border:1px solid rgba(255,255,255,.48);border-radius:.9rem;
    background:rgba(25,39,68,.58);box-shadow:0 10px 24px rgba(10,21,43,.18);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  }
  .contact__switch-option{
    min-height:2.45rem;padding:.42rem .5rem;border:0;border-radius:.65rem;
    background:transparent;color:rgba(255,255,255,.88);font-family:var(--font-body);
    font-size:.73rem;font-weight:700;letter-spacing:.035em;line-height:1.1;
  }
  .contact__switch-option:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .contact[data-mobile-form="partners"] .contact__switch-option[data-contact-choice="partners"],
  .contact[data-mobile-form="mommies"] .contact__switch-option[data-contact-choice="mommies"]{
    background:rgba(255,255,255,.92);color:#263a61;box-shadow:0 2px 7px rgba(8,20,44,.16);
  }
}

/* Give the contact panel a calmer, intentional slide in both directions. */
.contact{transition:transform 1.35s var(--ease)!important}

/* Phones use a touch carousel, not the desktop-height arrow pillars. The
   visible edge of the following card is the swipe affordance. */
@media(max-width:899px){
  .railwrap{display:block;--per:1.16}
  .railarrow{display:none!important}
  .rail__track{padding-block:.75rem 1rem}
}

/* Footer hierarchy: brand and contact first, credit as the final site ribbon. */
.foot{
  position:relative;z-index:101;
  padding:0;background:var(--sing-song-sea);
}
.foot__in{
  display:grid;grid-template-columns:1fr auto;align-items:center;
  min-height:clamp(5.25rem,9vh,7.25rem);padding-block:clamp(1.1rem,2.5vw,1.8rem);
  padding-right:var(--pad);
}
.foot__mail{position:static;translate:none;justify-self:end;margin:0;text-align:right}
.foot__mail a{
  color:#fff;font-size:clamp(1.15rem,2.2vw,1.7rem);font-weight:700;
  letter-spacing:-.03em;text-decoration:none;border-bottom:2px solid rgba(153,198,238,.4);
  transition:color .25s ease,border-color .25s ease;
}
.foot__mail a:hover{color:#fff;border-color:#fff;text-decoration:none}
.foot__creditbar{
  display:grid;place-items:center;
  background:var(--crystal-caves);
}
.foot__credit{
  display:block;width:100%;max-width:none;margin:0;padding-block:.82rem;
  color:var(--night);font-size:.76rem;text-align:center!important;
}
.foot__credit a{color:var(--night);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(47,52,66,.35)}
.foot__credit a:hover{color:#fff;border-color:#fff}

/* The footer sits above the fixed contact rail, so its lower part tucks
   naturally behind the footer while the map-side portion stays usable. */
@media(max-width:760px){
  .foot{padding:0!important}
  .foot__in{min-height:5.25rem;padding-right:var(--pad);gap:.85rem}
  .foot__logo{width:clamp(104px,33vw,138px)}
  .foot__mail a{font-size:clamp(1rem,4.5vw,1.35rem)}
  .foot__credit{padding:.8rem var(--pad) calc(.8rem + env(safe-area-inset-bottom,0px));font-size:.72rem}
}

/* ============================================================
   Hero refresh — clear two-column story and a lighter photo wall
   ============================================================ */
/* More columns and a much gentler scale make the moving photos feel like a
   background texture instead of a handful of oversized tiles. */
.collage{
  inset:-7% -6%;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;
  transform:rotate(-2deg) scale(1.06);
}
@media(min-width:720px){.collage{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media(min-width:1240px){.collage{grid-template-columns:repeat(10,minmax(0,1fr))}}

.hero__inner{
  width:min(100%,76rem);max-width:none;min-height:72svh;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(19rem,.9fr);
  align-items:center;justify-items:stretch;align-content:center;
  gap:clamp(2rem,6vw,7rem);text-align:left;
}
.hero__copy{position:relative;z-index:2;text-align:left}
.hero__title{
  margin:0;font-family:"Riya Black",var(--font-cartoon);
  font-size:clamp(4.1rem,8.6vw,9.2rem);line-height:.84;letter-spacing:-.035em;
}
.hero__title .line{white-space:nowrap}
.hero__title .line + .line{margin-top:.14em}
.hero__film-slot{display:grid;place-items:center;width:100%;line-height:0}
.peek{
  position:relative;display:block;width:clamp(270px,29vw,460px);aspect-ratio:1;
  margin:0!important;padding:0!important;overflow:visible;
  border:0!important;background:none!important;color:#fff;
  transform:none!important;translate:none!important;
}
.peek:hover{background:none!important;transform:scale(1.025)!important}
.peek__vid{
  position:relative;z-index:1;display:block;width:100%!important;height:100%;
  border-radius:50%;object-fit:cover;box-shadow:0 22px 60px rgba(17,29,57,.42);
}
.peek__ring{
  position:absolute;z-index:2;inset:0;left:auto!important;top:auto!important;
  width:100%!important;height:100%;translate:none!important;border:3px dashed rgba(255,255,255,.78);
  animation:heroRingSpin 16s linear infinite;
}
@keyframes heroRingSpin{to{transform:rotate(360deg)}}
.peek__orbit{position:absolute;z-index:4;inset:-12%;pointer-events:none;animation:heroOrbit 18s linear infinite}
@keyframes heroOrbit{to{transform:rotate(360deg)}}
.peek__sticker{
  position:absolute;display:block;width:clamp(34px,4vw,60px);aspect-ratio:1;
  animation:heroCounterOrbit 18s linear infinite reverse;filter:drop-shadow(0 5px 8px rgba(17,29,57,.32));
}
@keyframes heroCounterOrbit{to{transform:rotate(360deg)}}
/* The source stickers already carry their own character animation. The
   counter-rotation only keeps them upright while their positions orbit. */
.peek__sticker-art{display:block;width:100%;height:100%;transform-origin:center;will-change:transform,opacity}
.peek__sticker img{display:block;width:100%;height:100%;object-fit:contain;animation:none!important;transform:none!important}
.peek__sticker--a{top:0;left:50%;translate:-50% -50%}
.peek__sticker--b{top:50%;right:0;translate:50% -50%}
.peek__sticker--c{bottom:0;left:50%;translate:-50% 50%}
.peek__sticker--d{top:50%;left:0;translate:-50% -50%}
/* On hero entry, each Cub arrives independently: two fly into place while
   the side pair settle with a small hanging swing. */
.peek__orbit.is-arriving .peek__sticker-art{animation-fill-mode:both}
.peek__orbit.is-arriving .peek__sticker--a .peek__sticker-art{animation:stickerFlyInA .95s cubic-bezier(.16,.9,.25,1) .08s both}
.peek__orbit.is-arriving .peek__sticker--b .peek__sticker-art{transform-origin:top center;animation:stickerHangInB 1.18s cubic-bezier(.16,.9,.25,1) .26s both}
.peek__orbit.is-arriving .peek__sticker--c .peek__sticker-art{animation:stickerFlyInC 1s cubic-bezier(.16,.9,.25,1) .16s both}
.peek__orbit.is-arriving .peek__sticker--d .peek__sticker-art{transform-origin:top center;animation:stickerHangInD 1.2s cubic-bezier(.16,.9,.25,1) .42s both}
.peek__orbit.is-settled .peek__sticker--a .peek__sticker-art{animation:stickerDrift 3.8s ease-in-out .2s infinite}
.peek__orbit.is-settled .peek__sticker--b .peek__sticker-art{transform-origin:top center;animation:stickerHang 4.2s ease-in-out .35s infinite}
.peek__orbit.is-settled .peek__sticker--c .peek__sticker-art{animation:stickerDrift 4.3s ease-in-out 1.1s infinite reverse}
.peek__orbit.is-settled .peek__sticker--d .peek__sticker-art{transform-origin:top center;animation:stickerHang 4.6s ease-in-out 1.2s infinite reverse}
@keyframes stickerFlyInA{0%{opacity:0;transform:translate(-4.8rem,-5.8rem) scale(.22) rotate(-30deg)}62%{opacity:1;transform:translate(.2rem,.12rem) scale(1.12) rotate(7deg)}100%{opacity:1;transform:translate(0) scale(1) rotate(0)}}
@keyframes stickerFlyInC{0%{opacity:0;transform:translate(4.6rem,5.4rem) scale(.2) rotate(28deg)}64%{opacity:1;transform:translate(-.18rem,-.1rem) scale(1.1) rotate(-6deg)}100%{opacity:1;transform:translate(0) scale(1) rotate(0)}}
@keyframes stickerHangInB{0%{opacity:0;transform:translateY(-7rem) rotate(26deg) scale(.5)}48%{opacity:1;transform:translateY(.4rem) rotate(-13deg) scale(1.05)}72%{transform:translateY(-.1rem) rotate(8deg)}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes stickerHangInD{0%{opacity:0;transform:translateY(-6.6rem) rotate(-24deg) scale(.5)}50%{opacity:1;transform:translateY(.36rem) rotate(12deg) scale(1.05)}74%{transform:translateY(-.1rem) rotate(-7deg)}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes stickerDrift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-.16rem) rotate(2deg)}}
@keyframes stickerHang{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(.08rem) rotate(5deg)}}
.peek__play{
  position:absolute;z-index:5;inset:0;left:auto!important;top:auto!important;
  width:100%!important;height:100%;translate:none!important;display:grid;place-items:center;
}
.peek__play svg{width:clamp(48px,5.2vw,72px);height:auto}

/* A consistent glass header: transparent enough to let the work show, with
   just enough blur and contrast for the logo and navigation to stay readable. */
.head.is-solid,.head.is-solid[data-tone="dark"]{
  background:rgba(22,37,68,.16)!important;
  backdrop-filter:blur(16px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(145%)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.17),0 10px 28px rgba(20,30,54,.12)!important;
}
.head.is-solid[data-tone="light"]{background:rgba(255,255,255,.18)!important}
.head.is-solid[data-tone="dark"] .head__mark{background-color:var(--crystal-caves);filter:drop-shadow(0 2px 12px rgba(20,28,46,.75))}
.nav__link{font-size:clamp(.96rem,1.08vw,1.08rem);font-weight:600}

@media(max-width:899px){
  .head.is-hero.is-solid{
    background:rgba(22,37,68,.16)!important;
    backdrop-filter:blur(16px) saturate(145%)!important;
    -webkit-backdrop-filter:blur(16px) saturate(145%)!important;
  }
  .head.is-hero.is-solid .head__mark{
    background-color:var(--crystal-caves)!important;
    filter:drop-shadow(0 2px 12px rgba(20,28,46,.75))!important;
  }
  .hero{
    padding:calc(6.4rem + env(safe-area-inset-top,0px)) var(--pad)
      calc(3rem + env(safe-area-inset-bottom,0px));
  }
  .hero__inner{
    display:grid;width:min(100%,34rem);min-height:0;grid-template-columns:1fr;
    justify-items:center;align-content:center;gap:clamp(1.25rem,4svh,2.2rem);text-align:center;
  }
  .hero__copy{text-align:center}
  .hero__title{font-size:clamp(3.35rem,15vw,5.2rem);line-height:.86}
  .hero__film-slot{line-height:0}
  .peek{width:clamp(230px,66vw,340px)}
  .peek__sticker{width:clamp(30px,8vw,46px)}
}

/* Keep the hero columns independent: headline never crosses into the film. */
.hero__inner{
  grid-template-columns:minmax(0,1.05fr) minmax(22rem,1.05fr);
  gap:clamp(2rem,4vw,4.5rem);
}
.hero__copy,.hero__film-slot{min-width:0}
.hero__title{font-size:clamp(3.6rem,6.4vw,7.4rem)}
.peek{width:clamp(380px,38vw,620px)}
.peek__play svg{width:clamp(66px,7.2vw,104px)}

/* The glass header is the same before and after it becomes sticky. */
.head,.head.is-solid,.head.is-solid[data-tone="dark"]{
  min-height:clamp(70px,8vh,86px);
  background:rgba(22,37,68,.16)!important;
  backdrop-filter:blur(16px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(145%)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.17),0 10px 28px rgba(20,30,54,.12)!important;
}
.head[data-tone="light"],.head.is-solid[data-tone="light"]{background:rgba(255,255,255,.18)!important}
@media(max-width:899px){
  .hero__inner{grid-template-columns:1fr;gap:clamp(1.25rem,4svh,2.2rem)}
  .peek{width:clamp(250px,70vw,360px)}
}

/* On desktop the story begins directly below the header, not halfway down the
   collage. That gives the heading room to be deliberately larger. */
@media(min-width:900px){
  .hero{
    place-items:center;
    padding-top:clamp(6rem,14vh,9rem);
  }
  .hero__inner{
    align-self:center;width:100%;max-width:none;min-height:72svh;
    grid-template-columns:minmax(0,1.28fr) minmax(20rem,.95fr);
  }
  .hero__title{font-size:clamp(5.5rem,10.2vw,13.5rem)}
}

/* Muting the source tiles themselves keeps the wall atmospheric without
   adding another veil over the hero. */
.collage .col img{filter:brightness(.84) saturate(.8) contrast(.96)}

/* Only “MAGIC” gets a little living motion; its original colour is untouched. */
.hero__magic-word{
  position:relative;z-index:0;isolation:isolate;display:inline-block;transform-origin:center bottom;cursor:pointer;
  animation:magicWordFloat 3.8s ease-in-out 1.4s infinite;
}
.hero__magic-word::before{
  content:"";position:absolute;z-index:-1;inset:-.22em -.13em;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.48) 0%,rgba(255,255,255,.16) 40%,rgba(255,255,255,0) 72%);
  filter:blur(.12em);opacity:0;pointer-events:none;
}
.hero__magic-word::after{
  content:"✦  ✦";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:max-content;opacity:0;color:#fff;font-size:.36em;letter-spacing:.5em;
  pointer-events:none;text-shadow:0 0 12px rgba(255,255,255,.9);
}
.hero__magic-word:focus-visible{outline:2px solid #fff;outline-offset:.08em;border-radius:.08em}
.hero__magic-word.is-sparkling{animation:magicPop .7s var(--ease) both}
.hero__magic-word.is-sparkling::after{animation:magicBurst .7s var(--ease) both}
.hero__magic-word.is-entering{animation:magicArrival 1.28s cubic-bezier(.16,.92,.22,1) both}
.hero__magic-word.is-entering::before{animation:magicAura 1.1s ease-out both}
.hero__magic-word.is-entering::after{animation:magicCross 1.1s cubic-bezier(.16,.92,.22,1) both}
.magic-particle{
  position:absolute;z-index:7;display:block;color:#fff;line-height:1;font-size:clamp(.9rem,1.45vw,1.55rem);
  pointer-events:none;text-shadow:0 0 14px rgba(255,255,255,.95);
  animation:magicParticle .82s var(--ease) var(--delay,0s) both;
}
.magic-particle--intro{
  font-size:clamp(1rem,1.7vw,1.8rem);
  animation:magicParticleIntro 1.18s cubic-bezier(.16,.92,.22,1) var(--delay,0s) both;
}
.peek.is-magic-active{animation:magicFilmPulse .72s var(--ease) both}
@keyframes magicWordFloat{
  0%,58%,100%{transform:translateY(0) rotate(0)}
  66%{transform:translateY(-.07em) rotate(-1.25deg)}
  74%{transform:translateY(-.035em) rotate(1.25deg)}
  82%{transform:translateY(0) rotate(0)}
}
@keyframes magicPop{0%{transform:scale(1)}40%{transform:translateY(-.09em) scale(1.11) rotate(-1deg)}70%{transform:translateY(0) scale(.98) rotate(1deg)}100%{transform:scale(1)}}
@keyframes magicArrival{
  0%{opacity:0;transform:translateY(.28em) scale(.68) rotate(-9deg)}
  26%{opacity:1;transform:translateY(-.11em) scale(1.15) rotate(3deg)}
  48%{transform:translateY(.025em) scale(.97) rotate(-1.5deg)}
  68%{transform:translateY(-.045em) scale(1.055) rotate(1deg)}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}
@keyframes magicAura{0%{opacity:0;transform:scale(.35)}28%{opacity:1;transform:scale(1.08)}100%{opacity:0;transform:scale(1.65)}}
@keyframes magicCross{0%{opacity:0;transform:translate(-50%,-35%) scale(.2) rotate(-28deg)}34%{opacity:1;transform:translate(-50%,-50%) scale(1.2) rotate(8deg)}100%{opacity:0;transform:translate(-50%,-75%) scale(1.5) rotate(28deg)}}
@keyframes magicBurst{0%{opacity:0;transform:scale(.35)}35%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-1.3em) scale(1.35)}}
@keyframes magicParticle{0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.4) rotate(var(--r))}}
@keyframes magicParticleIntro{0%{opacity:0;transform:translate(-50%,-50%) scale(.05) rotate(0)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(34deg)}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(.55) rotate(var(--r))}}
@keyframes magicFilmPulse{0%,100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0));transform:scale(1)}42%{filter:drop-shadow(0 0 24px rgba(255,255,255,.86));transform:scale(1.045)}}
.hero__title .line:last-child .word{font-size:1.18em}

/* Header navigation belongs to the same Riya Black visual language as the
   hero, with a more legible display size on both desktop and the menu drawer. */
.nav__link,.drawer__link{
  font-family:"Riya Black",var(--font-cartoon);
  font-size:clamp(1.28rem,1.5vw,1.65rem);
  font-weight:400;letter-spacing:.005em;
}
.drawer__link{font-size:clamp(1.4rem,6vw,1.85rem)}

/* Header contrast follows the section underneath it—never a mid-blue mark
   that gets lost on the Island or photo sections. */
.head[data-tone="dark"] .head__mark,
.head.is-solid[data-tone="dark"] .head__mark{
  background-color:#fff!important;
  filter:drop-shadow(0 2px 12px rgba(10,18,36,.72))!important;
}
.head[data-tone="light"] .head__mark,
.head.is-solid[data-tone="light"] .head__mark{
  background-color:var(--night)!important;
  filter:drop-shadow(0 1px 6px rgba(255,255,255,.5))!important;
}
.head[data-tone="dark"] .nav__link{color:#fff;text-shadow:0 2px 12px rgba(10,18,36,.8)}
.head[data-tone="light"] .nav__link{color:var(--night);text-shadow:0 1px 8px rgba(255,255,255,.72)}
.head[data-tone="dark"] .burger span{background:#fff}
.head[data-tone="light"] .burger span{background:var(--night)}
@media(max-width:899px){
  .head.is-hero .head__mark,.head.is-hero.is-solid .head__mark{
    background-color:#fff!important;
    filter:drop-shadow(0 2px 12px rgba(10,18,36,.72))!important;
  }
}

/* Mobile hero gets the same generous, animated focal point as desktop. This
   deliberately affects Layer 1 only—header and the rest of the phone layout
   retain their existing sizing. */
@media(max-width:899px){
  .hero{min-height:100svh;padding-block:calc(5.8rem + env(safe-area-inset-top,0px)) calc(2.8rem + env(safe-area-inset-bottom,0px))}
  .hero__inner{width:min(100%,36rem);gap:clamp(1.35rem,3.8svh,2.35rem)}
  .hero__title{font-size:clamp(3.8rem,16.8vw,5.8rem);line-height:.84}
  .peek{width:clamp(260px,80vw,390px)}
  .peek__sticker{width:clamp(36px,10vw,56px)}
  .peek__play svg{width:clamp(54px,13vw,74px)}
}

/* ============================================================
   DISCOVER THE MAGIC
   The island opens sideways into a three stage journey:
   unzip → the cast → one Cub's page.
   ============================================================ */

/* the invitation, riding the right edge of the island */
.discover-cue{
  position:absolute;right:0;top:50%;translate:0 -50%;z-index:6;
  display:grid;justify-items:center;gap:.9rem;
  padding:clamp(1.4rem,3vw,2.2rem) clamp(.9rem,1.8vw,1.4rem);
  border-radius:1.4rem 0 0 1.4rem;
  background:rgba(255,255,255,.9);
  box-shadow:-10px 0 40px rgba(20,40,56,.24);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  transition:background .3s ease,transform .35s var(--ease);
}
.discover-cue:hover{background:#fff;transform:none;translate:0 -50%}
.discover-cue__txt{
  font-family:var(--font-head);color:var(--sing-song-sea);
  font-size:clamp(.95rem,1.6vw,1.3rem);line-height:1.1;text-align:center;
}
/* the island's own name gets a soft, breathing highlight so it reads as the
   invitation, not just a label */
.discover-cue__hl{
  position:relative;display:inline-block;color:var(--sing-song-sea);
  background:linear-gradient(90deg,var(--sing-song-sea) 0%,var(--crystal-caves) 50%,var(--sing-song-sea) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:hlShimmer 3.2s ease-in-out infinite;
}
@keyframes hlShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.discover-cue__hl{animation:none}}
.discover-cue__arrow{display:block;width:clamp(30px,3.4vw,48px)}
.discover-cue__arrow svg{width:100%;height:22px;stroke:var(--sing-song-sea);stroke-width:2.4;fill:none}
.discover-cue__arrow svg path{animation:cueNudge 1.8s ease-in-out infinite}
@keyframes cueNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){.discover-cue__arrow svg path{animation:none}}

/* the journey itself */
.discover{
  position:fixed;inset:0;z-index:90;
  transform:translateX(100%);
  transition:transform .78s var(--ease-rail);
  background:#0E1626;
  visibility:hidden;
}
.discover.is-open{transform:none;visibility:visible}
/* Discover has its own back affordance. The contact rail belongs only to the
   final site section, so don't let it steal focus from this full-screen flow. */
body.discover-open .edge:not(.edge--back){transform:translateX(100%)!important;pointer-events:none}
.head.is-discover{background:rgba(255,255,255,.24)!important;backdrop-filter:blur(16px) saturate(150%)!important;-webkit-backdrop-filter:blur(16px) saturate(150%)!important}
.head.is-discover[data-tone="dark"]{background:rgba(22,37,68,.24)!important}
@media(max-width:760px){
  .discover{inset:0}
  body.discover-open .edge:not(.edge--back){transform:translateY(110%)!important}
}
.discover__track{
  display:flex;height:100%;width:300%;
  transform:translateX(0);
  transition:transform .56s var(--ease-rail);
}
.discover[data-stage="1"] .discover__track{transform:translateX(-33.3333%)}
.discover[data-stage="2"] .discover__track{transform:translateX(-66.6666%)}
.dstage{position:relative;width:33.3333%;height:100%;overflow:hidden;flex:0 0 33.3333%}

.discover__back,.discover__next{
  position:absolute;top:50%;translate:0 -50%;z-index:20;
  display:grid;justify-items:center;gap:.7rem;
  padding:clamp(1.2rem,2.6vw,1.9rem) clamp(.7rem,1.4vw,1.1rem);
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#fff;transition:background .3s ease}
.discover__back{left:0;border-radius:0 1.2rem 1.2rem 0}
.discover__next{right:0;border-radius:1.2rem 0 0 1.2rem}
.discover__back:hover,.discover__next:hover{background:rgba(255,255,255,.3)}
.discover__back-arrow{display:block;width:clamp(26px,2.6vw,38px)}
.discover__back-arrow svg{width:100%;height:18px;stroke:currentColor;stroke-width:2.4;fill:none}
.discover__back-txt{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
}
.discover__next-arrow{display:block;width:clamp(26px,2.6vw,38px)}
.discover__next-arrow svg{width:100%;height:18px;stroke:currentColor;stroke-width:2.4;fill:none}
.discover__next-txt{writing-mode:vertical-rl;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600}

/* ── stage 1 · the homepage's illustrated Unzip hero ──────── */
.dstage--zip{background:#D8B6C8}
.dzip__landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% center}
.dzip__stars{position:absolute;inset:0;z-index:2;pointer-events:none}
.dzip__star{
  position:absolute;display:block;font-size:clamp(1rem,1.8vw,1.7rem);line-height:1;
  filter:drop-shadow(0 3px 0 rgba(38,48,75,.3));animation:dzipTwinkle 3.2s ease-in-out infinite;
}
.dzip__star--a{left:24%;top:17%;color:#F47465}
.dzip__star--b{left:50%;top:4%;color:#99C6EE;animation-delay:.7s}
.dzip__star--c{right:14%;top:22%;color:#CBB7EA;animation-delay:1.3s}
@keyframes dzipTwinkle{0%,100%{transform:translateY(0) rotate(0) scale(.9)}50%{transform:translateY(-.45rem) rotate(12deg) scale(1.12)}}
.dzip__cubs{
  position:absolute;right:-4%;bottom:0;z-index:3;width:min(54vw,1080px);height:auto;
  pointer-events:none;filter:drop-shadow(0 16px 18px rgba(38,48,75,.12));
}
.dzip__copy{position:absolute;inset:0;z-index:4;display:flex;align-items:center;pointer-events:none}
.dzip__copy-in{display:grid;justify-items:start;gap:clamp(1.1rem,2.1vw,1.8rem);width:min(50%,42rem);margin-left:clamp(1.75rem,7vw,8rem)}
.dzip__logo{display:block;width:clamp(14rem,25vw,27rem);height:auto}
.dzip__title{
  margin:0;font-family:var(--font-cartoon);font-size:clamp(3.1rem,6.5vw,7.2rem);
  line-height:.84;letter-spacing:-.035em;color:#fff;-webkit-text-stroke:clamp(1.5px,.16vw,3px) #2A3651;paint-order:stroke fill;
  text-shadow:0 4px 0 rgba(42,54,81,.8),0 13px 24px rgba(30,37,57,.28);
}
.dzip__title span{display:block}
.dzip__swoosh{display:block;width:min(100%,22rem);height:3px;border-radius:999px;background:rgba(255,255,255,.72);box-shadow:0 1px 4px rgba(42,54,81,.35)}

/* A single --zip value drives the pull and teeth over the illustrated hero. */
.dstage--zip .zip{
  position:relative;z-index:7;width:min(100%,35rem);height:clamp(5rem,7.2vw,6.3rem);
  margin-top:.5rem;translate:0;--zip:0;border:1px solid rgba(255,255,255,.68);border-radius:999px;
  pointer-events:auto;touch-action:pan-y;background:linear-gradient(90deg,rgba(42,54,81,.42),rgba(73,106,158,.36),rgba(255,255,255,.22));
  box-shadow:0 18px 38px rgba(34,43,66,.24),inset 0 1px 0 rgba(255,255,255,.58);
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
}
.dstage--zip .zip::before{content:"";position:absolute;inset:.42rem;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.22),transparent 44%,rgba(255,255,255,.1))}
.zip__half{
  position:absolute;top:0;bottom:0;width:50.4%;
  background:linear-gradient(180deg,#2C3E5E 0%,#1B2740 100%);
  box-shadow:0 0 60px rgba(0,0,0,.5) inset;
  will-change:transform;
}
.zip__half--l{
  left:0;transform-origin:left center;
  transform:translateX(calc(var(--zip) * -102%)) rotate(calc(var(--zip) * -4deg));
}
.zip__half--r{
  right:0;transform-origin:right center;
  transform:translateX(calc(var(--zip) * 102%)) rotate(calc(var(--zip) * 4deg));
}
/* the teeth run down the seam and vanish as it opens */
.zip__teeth{
  position:absolute;left:.75rem;right:.75rem;top:50%;bottom:auto;z-index:2;width:auto;height:clamp(17px,1.7vw,24px);translate:0 -50%;
  background:
    repeating-linear-gradient(90deg,
      #E7ECF4 0 7px, #AEBACD 7px 9px, transparent 9px 16px),
    linear-gradient(90deg,#8A97AC,#6C7A92);
  border-radius:9px;
  opacity:calc(1 - var(--zip));box-shadow:0 0 18px rgba(0,0,0,.4);
}
.zip__pull{
  position:absolute;left:calc(8% + var(--zip) * 84%);z-index:8;top:50%;translate:-50% -50%;
  width:clamp(70px,6.8vw,94px);aspect-ratio:1;cursor:ew-resize;
  display:grid;place-items:center;
  will-change:left;
}
.dstage--zip .zip__pull::after{content:"";position:absolute;inset:-.55rem;border:1px solid rgba(255,255,255,.72);border-radius:999px;box-shadow:0 0 0 .45rem rgba(255,255,255,.14);animation:zipPulse 2.1s ease-in-out infinite}
.dstage--zip .zip__tab{background:linear-gradient(180deg,#D7EEFF,#79A8DE);box-shadow:0 6px 16px rgba(34,43,66,.38)}
.dstage--zip .zip__hint{z-index:9;left:0;top:calc(100% + .7rem);bottom:auto;translate:0 0;padding:.58rem .9rem;background:rgba(29,43,69,.72);border-color:rgba(255,255,255,.62);font-size:.64rem;line-height:1.25;box-shadow:0 8px 20px rgba(34,43,66,.22);white-space:nowrap;text-align:left;animation:zipHintPulse 1.8s ease-in-out infinite}
.dstage--zip .zip__hint strong,.dstage--zip .zip__hint em{display:block;font-style:normal}.dstage--zip .zip__hint strong{font-size:.64rem;letter-spacing:.15em;text-transform:uppercase}.dstage--zip .zip__hint em{margin-top:.12rem;color:#D6EDFF;letter-spacing:.04em}
.dstage--zip .zip.is-dragging .zip__pull{cursor:grabbing;filter:brightness(1.12) saturate(1.1)}
.dstage--zip .zip.is-dragging .zip__pull::after{animation:none;box-shadow:0 0 0 .7rem rgba(255,255,255,.28)}
@keyframes zipPulse{0%,100%{opacity:.45;transform:scale(.92)}50%{opacity:1;transform:scale(1.05)}}
.zip__pull::before{
  content:"";position:absolute;left:50%;top:0;translate:-50% 0;width:56%;aspect-ratio:1;border-radius:6px 6px 12px 12px;
  background:linear-gradient(180deg,#F2F5FA,#B9C4D6);box-shadow:0 4px 12px rgba(0,0,0,.45);
}
.zip__tab{
  position:relative;margin-top:52%;
  width:38%;height:64%;border-radius:4px 4px 999px 999px;
  background:linear-gradient(180deg,#DCE3EE,#93A1B8);
  box-shadow:0 6px 16px rgba(0,0,0,.5);
}
.zip__pull:hover{filter:brightness(1.12)}
.zip__hint{
  position:absolute;left:50%;bottom:8%;translate:-50% 0;z-index:8;
  padding:.5rem 1.1rem;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  opacity:calc(1 - var(--zip));
  animation:hintPulse 2.2s ease-in-out infinite;
}
@keyframes hintPulse{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-5px)}}
@keyframes zipHintPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.zip.is-done{pointer-events:none}
.zip.is-done .zip__pull,.zip.is-done .zip__hint{opacity:0;transition:opacity .3s ease}
@media(prefers-reduced-motion:reduce){.zip__hint{animation:none}}
@media(max-width:900px){
  .dzip__cubs{right:-21%;width:105vw}
  .dzip__copy{align-items:flex-start;padding-top:clamp(7rem,18svh,10rem)}
  .dzip__copy-in{width:min(72%,25rem);margin-left:var(--pad);gap:1rem}
  .dzip__logo{width:clamp(11rem,47vw,16rem)}
  .dzip__title{font-size:clamp(2.8rem,13vw,4.5rem)}
  .dstage--zip .zip{width:min(100%,27rem);height:5.1rem;margin-top:.25rem}
  .dstage--zip .zip__hint{top:calc(100% + .55rem);bottom:auto;font-size:.57rem}
  .dzip__star--a{left:13%;top:23%}.dzip__star--b{left:70%;top:8%}.dzip__star--c{right:7%;top:28%}
}

/* ── stage 2 · the cast reel ───────────────────────────────── */
.dstage--cast{background:linear-gradient(160deg,#EAF4FD 0%,#CFE4F7 46%,#B9D6F2 100%)}
.dcast{
  position:absolute;inset:0;display:grid;align-content:center;gap:clamp(1.4rem,3vh,2.6rem);
  padding:clamp(4rem,9vh,6rem) calc(var(--pad) + 3.5rem);
}
.dcast__stage{position:relative;height:min(58vh,30rem)}
.dcast__reel{position:absolute;inset:0;overflow:hidden}
.dcub{
  position:absolute;left:50%;top:50%;
  width:min(30%,17rem);aspect-ratio:734/909;
  translate:-50% -50%;
  background:none;padding:0;
  transition:transform .55s var(--ease),opacity .45s ease,filter .45s ease;
  will-change:transform,opacity;
}
.dcub img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.dcub__name{
  position:absolute;left:50%;bottom:-2.2rem;translate:-50% 0;
  font-family:var(--font-head);font-size:clamp(1.1rem,2.2vw,1.8rem);
  color:var(--sing-song-sea);white-space:nowrap;opacity:0;transition:opacity .35s ease;
}
.dcub[data-pos="0"] .dcub__name{opacity:1}
.dcub:hover{filter:brightness(1.05)}
.dcast__arrow{
  position:absolute;top:50%;translate:0 -50%;z-index:5;
  width:clamp(2.8rem,4vw,3.6rem);aspect-ratio:1;border-radius:999px;
  display:grid;place-items:center;
  background:#fff;color:var(--sing-song-sea);
  box-shadow:0 10px 26px rgba(47,52,66,.18);
  transition:background .25s ease,color .25s ease,transform .25s var(--ease);
}
.dcast__arrow svg{width:46%;stroke:currentColor;stroke-width:2.3;fill:none}
.dcast__arrow:hover{background:var(--sing-song-sea);color:#fff;transform:none}
.dcast__arrow--prev{left:-1rem}
.dcast__arrow--next{right:-1rem}
.dcast__meta{text-align:center}
.dcast__title{font-family:var(--font-head);font-size:clamp(1.6rem,3.6vw,2.8rem);color:#2F3442}
.dcast__hint{margin-top:.5rem;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in srgb,#2F3442 55%,transparent)}

/* ── stage 3 · one Cub's page ──────────────────────────────── */
.dstage--profile{background:#1B2740}
.dprofile__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.dprofile__wash{position:absolute;inset:0;transition:background .5s ease}
.dprofile__back{
  position:absolute;left:calc(var(--pad) + 3.2rem);top:clamp(1.5rem,4vh,2.6rem);z-index:8;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.1rem;border-radius:999px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.1em;
  transition:background .25s ease}
.dprofile__back:hover{background:rgba(255,255,255,.3)}
.dprofile__back svg{width:16px;stroke:currentColor;stroke-width:2.4;fill:none}
.dprofile__inner{
  position:absolute;inset:0;z-index:4;
  display:grid;align-content:center;gap:2rem;
  padding:clamp(5rem,11vh,7rem) calc(var(--pad) + 3.5rem) clamp(2rem,5vh,3rem);
}
@media(min-width:900px){.dprofile__inner{grid-template-columns:1fr .95fr;align-items:center}}
.dprofile__copy{color:#fff;max-width:34rem}
.dprofile__badge{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;border-radius:999px;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.dprofile__name{
  margin-top:1.1rem;font-family:var(--font-head);
  font-size:clamp(2.6rem,7vw,5.5rem);line-height:.9;
}
.dprofile__species{
  display:block;font-family:var(--font-body);font-weight:700;
  font-size:clamp(.9rem,1.8vw,1.4rem);letter-spacing:.12em;text-transform:uppercase;
  opacity:.86;margin-top:.85rem;
}
.dprofile__tag{margin-top:1.2rem;font-size:clamp(1.05rem,2vw,1.4rem);font-weight:700;line-height:1.4}
.dprofile__desc{margin-top:.9rem;font-size:clamp(.9rem,1.5vw,1.05rem);line-height:1.7;opacity:.84}
.dprofile__quote{
  margin-top:1.4rem;padding:.9rem 1.2rem;border-radius:1rem;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);
  font-weight:700;font-size:clamp(.92rem,1.6vw,1.1rem);
}
.dprofile__facts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.3rem}
.dprofile__fact{
  padding:.55rem 1rem;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  font-size:.76rem;font-weight:600;
}
.dprofile__art{position:relative;justify-self:center;width:min(100%,28rem);aspect-ratio:734/909}
.dprofile__art::before{
  content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:88%;aspect-ratio:1;border-radius:999px;background:rgba(255,255,255,.22);filter:blur(50px);
}
.dprofile__art > img{position:relative;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 32px 34px rgba(16,24,40,.42))}

/* A little animated giphy badge breaks up the stillness of the portrait,
   per the brand's own note that the character page felt too static. */
.dprofile__gif{
  position:absolute;left:-4%;bottom:6%;z-index:2;
  width:clamp(88px,13vw,150px);aspect-ratio:1;border-radius:999px;overflow:hidden;
  border:3px solid rgba(255,255,255,.86);
  box-shadow:0 18px 38px rgba(16,24,40,.4);
  background:rgba(255,255,255,.14);
  animation:gifBadgeIn .6s var(--ease) .25s both, gifBadgeFloat 4.2s ease-in-out 1s infinite;
}
.dprofile__gif img{width:100%;height:100%;object-fit:cover}
@keyframes gifBadgeIn{from{opacity:0;transform:scale(.4) rotate(-14deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes gifBadgeFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-.5rem) rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.dprofile__gif{animation:gifBadgeIn .01s linear both}}
@media(max-width:900px){.dprofile__gif{width:clamp(64px,18vw,92px);left:-2%;bottom:2%}}

@media(max-width:900px){
  .discover-cue{padding:1rem .7rem}
  .discover__back-txt{display:none}
  .dcast{padding-inline:calc(var(--pad) + 2.6rem)}
  .dcub{width:min(46%,15rem)}
  .dprofile__inner{align-content:start;padding-top:5.5rem;gap:1.2rem}
  .dprofile__art{width:min(70%,18rem)}
  .dprofile__back{left:calc(var(--pad) + 2.4rem)}
}

/* The title is printed across the closed zip, so pulling it tears the words
   in half and reveals the film behind. */
.zip__half{overflow:hidden;display:grid;place-items:center}
.zip__label{
  position:absolute;top:50%;translate:0 -50%;
  width:200%;text-align:center;
  font-family:var(--font-head);color:#fff;text-transform:uppercase;
  font-size:clamp(1.4rem,4.4vw,3.6rem);line-height:1;white-space:nowrap;
  text-shadow:0 10px 30px rgba(0,0,0,.5);
  pointer-events:none;
}
.zip__half--l .zip__label{right:0}
.zip__half--r .zip__label{left:0}
/* a soft cloth texture so the curtain does not read as a flat block */
.zip__half::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 50% at 50% 0%,rgba(153,198,238,.18),transparent 70%),
    radial-gradient(60% 40% at 50% 100%,rgba(92,136,218,.2),transparent 70%);
}

/* the reel breathes: title on top, Cubs centred and clear of each other */
.dcast{align-content:center;gap:clamp(1.6rem,4vh,3rem)}
.dcast__stage{height:min(52vh,26rem);overflow:visible}
.dcast__reel{overflow:visible}
.dcub{width:min(24%,14rem)}
.dcub__name{bottom:-2.6rem}
.dzip__b{right:5%;max-width:46vw}
.dzip__a{left:5%}
@media(max-width:900px){
  .dcast__stage{height:min(44vh,20rem)}
  .dcub{width:min(40%,12rem)}
}

/* clear air between the title and the Cubs, and the block sits true centre */
.dcast{
  gap:clamp(2.4rem,6vh,4.2rem);
  padding-block:clamp(3rem,7vh,4.5rem);
  align-content:center;
}
.dcast__stage{height:min(46vh,23rem)}
.dcub{width:min(20%,12.5rem)}
.dcub__name{bottom:-2.8rem;font-size:clamp(1rem,2vw,1.6rem)}
.dcast__meta{position:relative;z-index:6}

/* Full-screen Discover carousel: the card shape and arrow affordance explain
   that every Cub opens a story without an extra instruction line. */
.discover__back,.discover__next{background:rgba(35,54,86,.9);border-color:rgba(255,255,255,.5);color:#fff;box-shadow:0 12px 32px rgba(28,42,68,.26)}
.discover__back:hover,.discover__next:hover{background:#2F61A8}
.discover[data-stage="1"] .discover__next,.discover[data-stage="2"] .discover__next{display:none}
.dcast{gap:clamp(1rem,2.4vh,1.8rem);padding-block:clamp(5rem,10vh,7rem)}
.dcast__stage{height:min(66vh,42rem);min-height:31rem}
.dcast__reel{overflow:visible}
.dcub{width:min(30vw,34rem);aspect-ratio:734/909;perspective:1100px;translate:0}
.dcub__card{position:relative;display:grid;grid-template-rows:1fr auto;width:100%;height:100%;overflow:hidden;border:1px solid rgba(255,255,255,.88);border-radius:clamp(1.5rem,2.4vw,2.25rem);background:linear-gradient(155deg,color-mix(in srgb,var(--cub-color) 83%,white),var(--cub-color));box-shadow:0 22px 46px rgba(42,54,81,.2),inset 0 1px 0 rgba(255,255,255,.58);transition:transform .35s var(--ease),box-shadow .35s ease}
.dcub__card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 28% 17%,rgba(255,255,255,.5),transparent 30%),linear-gradient(180deg,transparent 54%,rgba(42,54,81,.14))}
.dcub__art{position:relative;display:block;min-height:0;padding:clamp(.6rem,1.6vw,1.4rem) clamp(.3rem,1vw,.9rem) 0}
.dcub__art img{display:block;position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 12px rgba(42,54,81,.18))}
.dcub__info{position:relative;z-index:2;display:grid;gap:0;min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box;padding:clamp(.85rem,1.8vw,1.4rem);padding-right:clamp(3.3rem,4.8vw,4.2rem);min-height:25%;background:rgba(255,255,255,.86);text-align:left;color:var(--cub-ink)}
.dcub__info strong{display:block;font-family:var(--font-head);font-size:clamp(1.5rem,3vw,2.45rem);line-height:1.06}
.dcub__info span{display:block;margin-top:.38rem;font-size:clamp(.72rem,1.2vw,1rem);font-weight:700;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;opacity:.66}
.dcub__info em{display:-webkit-box;width:100%;min-width:0;max-width:100%;overflow:hidden;margin-top:.35rem;font-size:clamp(.75rem,1.1vw,.95rem);font-style:normal;line-height:1.3;white-space:normal!important;overflow-wrap:anywhere;word-break:normal;opacity:.82;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.dcub__open{position:absolute;right:clamp(.8rem,1.6vw,1.35rem);bottom:clamp(.9rem,2.2vw,1.5rem);z-index:3;display:grid;place-items:center;width:clamp(2.35rem,3.6vw,3.2rem);aspect-ratio:1;border-radius:999px;background:var(--cub-accent);box-shadow:0 7px 16px color-mix(in srgb,var(--cub-accent) 36%,transparent);color:#fff;transition:transform .3s var(--ease),background .3s ease}
.dcub__open svg{width:42%;stroke:currentColor;stroke-width:2.7;fill:none}
.dcub[data-pos="0"] .dcub__card{box-shadow:0 28px 60px rgba(42,54,81,.26),inset 0 1px 0 rgba(255,255,255,.75)}
.dcub[data-pos="0"]:hover .dcub__card,.dcub[data-pos="0"]:focus-visible .dcub__card{transform:translateY(-10px);box-shadow:0 34px 68px rgba(42,54,81,.3)}
.dcub[data-pos="0"]:hover .dcub__open,.dcub[data-pos="0"]:focus-visible .dcub__open{transform:translateX(4px) scale(1.06);background:var(--cub-ink)}
.dcub:focus{outline:none}
.dcub:not([data-pos="0"]) .dcub__info,.dcub:not([data-pos="0"]) .dcub__open{opacity:0;pointer-events:none}
.dcub__name{display:none}
.dcast__arrow{z-index:60;width:clamp(3.35rem,4.8vw,4.6rem);background:#2F61A8;color:#fff;border:2px solid rgba(255,255,255,.9);box-shadow:0 13px 30px rgba(42,54,81,.25)}
.dcast__arrow:hover{background:#243957;color:#fff;transform:none}
.dcast__arrow--prev{left:clamp(-1rem,-.6vw,-.35rem)}.dcast__arrow--next{right:clamp(-1rem,-.6vw,-.35rem)}
.dprofile__back{display:none}
/* Keep the active Cub composition centred in the complete viewport. The
   header floats above this screen, so it must not push the carousel upward. */
@media(min-width:901px){
  .dcast{display:block;padding:0}
  .dcast__stage{
    position:absolute;top:50%;left:calc(var(--pad) + 4.8rem);right:calc(var(--pad) + 4.8rem);
    width:auto;transform:translateY(-50%);
  }
}
/* Hover never changes an interaction's hit area or position. That avoids the
   rapid enter/leave flicker users get when hovering at an edge or corner. */
@media(min-width:761px){.edge:hover{width:var(--edge-w)}}
@media(max-width:760px){.edge:hover{width:100%}}
@media(max-width:900px){
  .discover__back,.discover__next{top:calc(64px + env(safe-area-inset-top,0px));translate:0 0;border-radius:999px;padding:.65rem .82rem;display:flex;align-items:center;gap:.5rem}
  .discover__back{left:.75rem}.discover__next{right:.75rem;flex-direction:row-reverse}
  .discover__back-txt,.discover__next-txt{display:block;writing-mode:horizontal-tb;transform:none;font-size:.58rem;letter-spacing:.14em}
  .discover__back-arrow{width:25px}.discover__back-arrow svg{height:16px}
  .discover__next-arrow{width:25px}.discover__next-arrow svg{height:16px}
  .dcast{padding:calc(8rem + env(safe-area-inset-top,0px)) var(--pad) 2rem;gap:1rem}
  .dcast__stage{height:min(62vh,37rem);min-height:25rem}
  .dcub{width:min(72vw,25rem)}
  .dcast__arrow--prev{left:-.45rem}.dcast__arrow--next{right:-.45rem}
  .dcast__arrow{width:3.2rem}
}

/* ── Meet the Cubcoats: a premium, blue-family colour field ──
   The brand guide keeps every section inside the blue family, so the
   depth here comes from layered blue tones (Crystal Caves, Sing Song
   Sea, Misty Mountain) rather than an off-brand pink/mint mix. */
.cast{
  background:
    radial-gradient(58% 76% at 6% 2%,rgba(153,198,238,.62) 0%,rgba(153,198,238,0) 70%),
    radial-gradient(60% 70% at 96% 92%,rgba(129,98,170,.28) 0%,rgba(129,98,170,0) 68%),
    radial-gradient(48% 64% at 55% 18%,rgba(92,136,218,.24) 0%,rgba(92,136,218,0) 72%),
    linear-gradient(150deg,#F4F9FF 0%,#DCEBFC 42%,#C4DEF7 76%,#AFCFF2 100%);
}
.cast::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.56;
  background-image:radial-gradient(rgba(42,54,81,.13) .75px,transparent .75px);
  background-size:15px 15px;mask-image:linear-gradient(90deg,transparent,black 24%,black 76%,transparent);
}
.cast > .wrap{position:relative;z-index:1}
.cast__title{margin-bottom:.45rem;color:#293954;text-shadow:none}
.cast__motion-line{
  display:flex;align-items:center;justify-content:center;gap:clamp(.45rem,1vw,.85rem);
  margin:0 auto clamp(1.6rem,3.8vw,2.7rem);color:#315E97;
  font-family:var(--font-head);font-size:clamp(1.25rem,2.4vw,2rem);line-height:1;letter-spacing:.015em;
}
.cast-verb{display:inline-block;cursor:default;will-change:transform,letter-spacing,clip-path}
.cast-verb--flip{transform-style:preserve-3d;animation:castVerbFlip 4.8s cubic-bezier(.4,0,.2,1) infinite}
.cast-verb--role{animation:castVerbRole 4.8s cubic-bezier(.4,0,.2,1) .45s infinite}
.cast-verb--unzip{position:relative;isolation:isolate;animation:castVerbUnzip 4.8s cubic-bezier(.4,0,.2,1) .9s infinite}
.cast-verb--unzip::after{content:"";position:absolute;z-index:-1;left:-.14em;right:-.14em;top:53%;height:2px;border-radius:99px;background:linear-gradient(90deg,transparent 0 8%,#5C88DA 8% 13%,transparent 13% 19%,#8162AA 19% 24%,transparent 24% 30%,#5C88DA 30% 35%,transparent 35% 41%,#8162AA 41% 46%,transparent 46% 54%,#5C88DA 54% 59%,transparent 59% 65%,#8162AA 65% 70%,transparent 70% 76%,#5C88DA 76% 81%,transparent 81% 87%,#8162AA 87% 92%,transparent 92%);transform:scaleX(.08);transform-origin:center;opacity:0;animation:castZipperLine 4.8s cubic-bezier(.4,0,.2,1) .9s infinite}
.cast-verb:hover{animation-play-state:paused;transform:translateY(-.18rem) scale(1.06)}
.cast-verb--unzip:hover::after{animation-play-state:paused}
.cast__motion-line i{font-style:normal;color:#5C88DA;font-size:.62em;animation:castSparkle 2.3s ease-in-out infinite}
.cast__motion-line i:nth-of-type(2){animation-delay:.58s;color:#8162AA}
@keyframes castVerbFlip{0%,18%,100%{transform:translateY(0) rotateY(0)}7%{transform:translateY(-.18rem) rotateY(0)}12%{transform:translateY(-.18rem) rotateY(180deg)}16%{transform:translateY(0) rotateY(360deg)}}
@keyframes castVerbRole{0%,18%,100%{transform:translateX(0) rotate(0)}6%{transform:translateX(-.12em) rotate(-8deg)}12%{transform:translateX(.14em) rotate(8deg)}17%{transform:translateX(0) rotate(0)}}
@keyframes castVerbUnzip{0%,18%,100%{letter-spacing:0;transform:translateY(0)}7%{letter-spacing:.09em;transform:translateY(-.08rem)}14%{letter-spacing:.015em;transform:translateY(0)}}
@keyframes castZipperLine{0%,4%,100%{transform:scaleX(.08);opacity:0}7%{transform:scaleX(1);opacity:1}14%{transform:scaleX(1);opacity:.9}18%{transform:scaleX(.12);opacity:0}}
@keyframes castSparkle{0%,100%{transform:scale(.72) rotate(0);opacity:.48}50%{transform:scale(1.14) rotate(28deg);opacity:1}}
.railarrow{background:rgba(255,255,255,.5);border-color:rgba(41,57,84,.18);color:#30496B;box-shadow:0 12px 28px rgba(63,85,127,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.railarrow:hover{background:#2F61A8;border-color:#2F61A8;color:#fff;box-shadow:0 16px 34px rgba(47,97,168,.26)}

/* A compact preview lives under the rail, so the character cards stay clear. */
.cast__film-row{display:flex;justify-content:flex-end;margin-top:clamp(.45rem,1.5vw,1.25rem)}
.castfilm{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.75rem;min-width:min(100%,17rem);
  padding:.42rem .8rem .42rem .42rem;border-radius:999px;text-align:left;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.88);color:#293954;
  box-shadow:0 14px 34px rgba(60,80,122,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .3s var(--ease),box-shadow .3s ease,background .3s ease;
}
.castfilm:hover,.castfilm:focus-visible{transform:translateY(-3px);background:rgba(255,255,255,.92);box-shadow:0 20px 42px rgba(60,80,122,.25);outline:none}
.castfilm__thumb{position:relative;display:block;overflow:hidden;width:clamp(5.6rem,9vw,8.4rem);aspect-ratio:1.72/1;border-radius:999px;background:#8AB1DC}
.castfilm__preview{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .55s var(--ease),filter .3s ease}
.castfilm:hover .castfilm__preview,.castfilm:focus-visible .castfilm__preview{transform:scale(1.08);filter:saturate(1.08)}
.castfilm__play{position:absolute;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:2.25rem;aspect-ratio:1;border-radius:999px;background:rgba(42,54,81,.84);color:#fff;box-shadow:0 5px 14px rgba(20,30,50,.28)}
.castfilm__play svg{width:40%;fill:currentColor;transform:translateX(8%)}
.castfilm__copy{display:grid;gap:.16rem;min-width:0}
.castfilm__copy strong{font-size:clamp(.74rem,1.1vw,.9rem);line-height:1.15}
.castfilm__copy small{font-size:clamp(.57rem,.8vw,.67rem);line-height:1.2;letter-spacing:.12em;text-transform:uppercase;color:rgba(41,57,84,.66)}

/* Four compact proof cards on wide displays; pairs remain easy to scan on tablets. */
@media(min-width:820px) and (max-width:1119px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1120px){
  .stats{grid-template-columns:repeat(4,minmax(0,1fr));max-width:88rem}
  .stat{max-width:none;aspect-ratio:1.12/1}
  .stat__num{font-size:clamp(3.15rem,5vw,4.8rem)}
}

/* The popup keeps the film's native landscape/portrait composition intact. */
.box--motion .box__frame{width:min(92vw,74rem)}
.box--motion .box__frame video{display:block;aspect-ratio:1920/766;object-fit:contain}
@media(max-width:699px){
  .cast__film-row{justify-content:center;margin-top:1rem}
  .castfilm{min-width:min(100%,18rem)}
  .box--motion .box__frame{width:auto;max-width:90vw;height:min(78svh,41rem)}
  .box--motion .box__frame video{width:auto;max-width:90vw;height:100%;aspect-ratio:374/624}
}
@media(prefers-reduced-motion:reduce){.cast-verb,.cast-verb::after,.cast__motion-line i{animation:none}.castfilm__preview{transition:none}}

/* The Discover Cub reel borrows a different soft palette from every active Cub. */
@property --cast-base{syntax:"<color>";inherits:true;initial-value:#EAF4FD}
@property --cast-glow{syntax:"<color>";inherits:true;initial-value:#D8ECFF}
@property --cast-bloom{syntax:"<color>";inherits:true;initial-value:#DCD4F6}
@property --cast-depth{syntax:"<color>";inherits:true;initial-value:#9ABEE1}
.dstage--cast{
  --cast-base:#EAF4FD;--cast-glow:#D8ECFF;--cast-bloom:#DCD4F6;--cast-depth:#9ABEE1;
  background-color:var(--cast-base);
  background-image:
    radial-gradient(88% 82% at 1% -6%,color-mix(in srgb,var(--cast-glow) 84%,#fff) 0%,transparent 69%),
    radial-gradient(74% 78% at 102% 106%,color-mix(in srgb,var(--cast-bloom) 82%,#fff) 0%,transparent 70%),
    radial-gradient(62% 50% at 50% 108%,color-mix(in srgb,var(--cast-depth) 38%,transparent) 0%,transparent 78%),
    linear-gradient(138deg,color-mix(in srgb,var(--cast-base) 62%,#fff) 0%,var(--cast-base) 100%);
  transition:--cast-base .62s var(--ease),--cast-glow .62s var(--ease),--cast-bloom .62s var(--ease),--cast-depth .62s var(--ease);
}
.dstage--cast::before{content:"";position:absolute;inset:-8%;z-index:0;pointer-events:none;opacity:.64;filter:blur(20px);background:radial-gradient(34% 48% at 18% 33%,color-mix(in srgb,var(--cast-glow) 68%,transparent),transparent 100%),radial-gradient(38% 54% at 84% 65%,color-mix(in srgb,var(--cast-bloom) 58%,transparent),transparent 100%)}
.dstage--cast > .dcast{z-index:1}

/* The Flip, Roll & Unzip film becomes a centred editorial preview, not a pill. */
.cast__film-row{justify-content:center;margin-top:clamp(1rem,2.6vw,1.85rem)}
.castfilm{position:relative;display:block;width:min(100%,35rem);min-width:0;padding:.48rem;border-radius:1.5rem;text-align:left}
.castfilm__thumb{width:100%;aspect-ratio:1920/766;border-radius:1.08rem}
.castfilm__play{width:3.35rem;background:rgba(35,54,86,.9);box-shadow:0 10px 24px rgba(20,31,51,.3);transition:transform .3s var(--ease),background .3s ease}
.castfilm:hover .castfilm__play,.castfilm:focus-visible .castfilm__play{transform:scale(1.1);background:#2F61A8}
.castfilm__copy{position:absolute;left:1.15rem;bottom:1.15rem;z-index:2;gap:.18rem;padding:.58rem .78rem;border-radius:.8rem;background:rgba(27,39,64,.76);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff}
.castfilm__copy strong{font-size:clamp(.82rem,1.15vw,.98rem)}
.castfilm__copy small{color:rgba(255,255,255,.76);font-size:clamp(.57rem,.78vw,.68rem)}
@media(max-width:699px){
  .castfilm{width:min(76vw,18rem)}
  .castfilm__thumb{aspect-ratio:374/624}
  .castfilm__copy{left:.9rem;bottom:.9rem}
}

/* ── Cubs go global: clear map label + country picker ─────── */
.wild__copy .h2{font-size:clamp(3rem,5.25vw,5.6rem);line-height:.8;color:#5C88DA;text-shadow:0 2px 0 rgba(255,255,255,.72)}
.wild__copy .h2 span{display:block}
.country-picker{position:relative;flex:1;min-width:0}
.country-picker input{width:100%}
.country-picker__list{
  position:absolute;z-index:30;top:calc(100% + .45rem);left:0;right:0;
  max-height:min(19rem,48vh);overflow:auto;padding:.35rem;border-radius:.9rem;
  background:rgba(255,255,255,.98);border:1px solid rgba(47,52,66,.14);
  box-shadow:0 18px 36px rgba(32,47,76,.2);overscroll-behavior:contain;
}
.country-picker--up .country-picker__list{top:auto;bottom:calc(100% + .45rem)}
.country-picker__option{
  display:flex;align-items:center;gap:.65rem;width:100%;padding:.62rem .7rem;border-radius:.62rem;
  color:#2F3442;text-align:left;font-size:.9rem;line-height:1.2;transition:background .18s ease,color .18s ease;
}
.country-picker__option:hover,.country-picker__option:focus-visible,.country-picker__option[aria-selected="true"]{outline:none;background:#EAF3FF;color:#315E97}
.country-picker__flag{width:1.4rem;font-size:1.15rem;line-height:1}
.country-picker__empty{display:block;padding:.7rem;color:rgba(47,52,66,.64);font-size:.85rem;text-align:center}
.contact::after{display:none}
.contact__form select{
  width:100%;padding:.9rem 2.45rem .9rem 1.05rem;border-radius:.85rem;appearance:none;
  background:rgba(255,255,255,.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='m2 2 6 6 6-6' fill='none' stroke='%232F3442' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E") right 1rem center/1rem no-repeat;
  border:1px solid rgba(255,255,255,.6);color:#2F3442;font:inherit;
}
.contact__form select:focus{outline:none;border-color:var(--crystal-caves);box-shadow:0 0 0 3px rgba(153,198,238,.45)}
.fld--other[hidden]{display:none!important}
@media(max-width:760px){
  .wild__copy .h2{font-size:clamp(3rem,13vw,4.4rem);line-height:.82}
  .country-picker__list{max-height:42vh}
}

/* ── First-load polish ──────────────────────────────────────
   A short, unmistakably Cubcoats moment — built from the actual Cub art,
   rather than a generic tech spinner or an AI-looking abstract animation. */
.site-loader{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(145deg,#A9CDEE 0%,#C8E0F5 52%,#E2EFFA 100%);
  opacity:1;visibility:visible;transition:opacity .52s var(--ease),visibility .52s step-end;
}
.site-loader::before,.site-loader::after{display:none}
.site-loader.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.site-loader__inner{position:relative;z-index:1;display:grid;justify-items:center;gap:clamp(.85rem,2vw,1.3rem);text-align:center;color:#fff}
.site-loader__logo{width:clamp(10.5rem,22vw,13.6rem);height:auto;filter:drop-shadow(0 4px 0 rgba(255,255,255,.26))}
.site-loader__cubs{position:relative;display:flex;align-items:end;justify-content:center;width:clamp(15rem,33vw,23rem);height:clamp(7.9rem,15vw,10.7rem);padding:0 1.1rem .42rem;border:1px solid rgba(255,255,255,.75);border-radius:1.45rem;background:rgba(255,255,255,.24);box-shadow:0 16px 0 rgba(54,103,177,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.site-loader__cubs::after{content:"";position:absolute;z-index:0;left:8%;right:8%;bottom:.56rem;height:.62rem;border-radius:50%;background:rgba(48,83,144,.22);filter:blur(3px)}
.site-loader__cub{position:relative;z-index:1;flex:0 0 auto;object-fit:contain;transform-origin:center bottom;filter:drop-shadow(0 8px 5px rgba(42,72,125,.17));animation:loaderCubBob 1.25s ease-in-out infinite alternate}
.site-loader__cub--uki{width:34%;margin-right:-3%;animation-delay:-.44s}.site-loader__cub--papo{width:38%;margin-inline:-5%;animation-delay:-.05s}.site-loader__cub--tomo{width:34%;margin-left:-3%;animation-delay:-.75s}
.site-loader__spark{position:absolute;z-index:2;width:.7rem;aspect-ratio:1;background:#fff;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);filter:drop-shadow(0 2px 2px rgba(44,76,130,.2));animation:loaderSpark 1.55s ease-in-out infinite alternate}
.site-loader__spark--one{top:-.6rem;left:1.25rem;animation-delay:-.4s}.site-loader__spark--two{right:1.35rem;top:.95rem;width:.48rem;animation-delay:-.95s}
.site-loader__inner p{display:flex;align-items:center;gap:.5rem;font-size:.67rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(45,60,90,.76)}
.site-loader__inner p span{width:.44rem;aspect-ratio:1;border-radius:50%;background:#5C88DA;box-shadow:.72rem 0 0 rgba(92,136,218,.68),1.44rem 0 0 rgba(92,136,218,.38);animation:loaderDots 1.05s steps(3,end) infinite}
@keyframes loaderCubBob{from{transform:translateY(0) rotate(-1.5deg)}to{transform:translateY(-.52rem) rotate(1.5deg)}}
@keyframes loaderSpark{from{transform:scale(.72) rotate(0deg);opacity:.52}to{transform:scale(1.12) rotate(22deg);opacity:1}}
@keyframes loaderDots{to{transform:translateX(.72rem)}}
body.is-loading{overflow:hidden}

/* ── Phone navigation: a proper side sheet, never a harsh blue panel ── */
@media(max-width:899px){
  html,body{overflow-x:clip}
  body.menu-open{overflow:hidden}
  .drawer{
    top:0;bottom:0;left:auto;right:0;z-index:105;width:min(86vw,25rem);height:100svh;
    display:flex;flex-direction:column;gap:.4rem;overflow-y:auto;
    padding:calc(5.9rem + env(safe-area-inset-top,0px)) 1rem calc(1.5rem + env(safe-area-inset-bottom,0px));
    border:0;border-left:1px solid rgba(255,255,255,.78);border-radius:1.6rem 0 0 1.6rem;
    background:
      radial-gradient(84% 48% at 100% 0%,rgba(153,198,238,.8),transparent 76%),
      radial-gradient(68% 44% at 0% 100%,rgba(215,193,234,.54),transparent 76%),
      rgba(250,252,255,.98);
    box-shadow:-22px 0 52px rgba(17,31,57,.27);
    transform:translateX(106%);transition:transform .48s var(--ease);
  }
  .drawer.is-open{transform:translateX(0)}
  .drawer__link{
    position:relative;z-index:1;display:flex;align-items:center;min-height:3.75rem;
    padding:.75rem .9rem;border:1px solid transparent;border-bottom:0;border-radius:1rem;
    color:#2D3C5A!important;font-size:clamp(1.3rem,6.4vw,1.75rem);line-height:1.05;
    background:rgba(255,255,255,.48);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
    transition:background .22s ease,color .22s ease,transform .22s var(--ease),box-shadow .22s ease;
  }
  .drawer__link::after{content:"";margin-left:auto;width:.58rem;aspect-ratio:1;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
  .drawer__link:hover,.drawer__link:focus-visible{outline:none;background:#5C88DA;color:#fff!important;transform:translateX(-.18rem);box-shadow:0 10px 22px rgba(71,109,177,.24)}
  .head.menu-open{background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .head.menu-open[data-tone="dark"] .head__mark{background-color:#fff!important}
  .head.menu-open[data-tone="light"] .head__mark{background-color:var(--night)!important}
  .head.menu-open .burger{position:relative;z-index:1;border-radius:.8rem;background:rgba(255,255,255,.66);box-shadow:0 5px 16px rgba(17,31,57,.13)}
  .head.menu-open .burger span{background:#2D3C5A!important}

  /* The new contact/country controls retain safe touch targets on phones. */
  .nextup{width:min(100% - 2*var(--pad),31rem)}
  .nextup__row{gap:.55rem}
  .nextup__row input{min-height:3.05rem}
  .nextup__go{flex:0 0 3.15rem;min-height:3.05rem}
  .contact__form{grid-template-columns:1fr}
  .contact__form select{min-height:3.05rem}
  .contact__form .fld--wide{grid-column:auto}
}

@media(prefers-reduced-motion:reduce){
  .site-loader__cub,.site-loader__spark,.site-loader__inner p span{animation:none}
  .site-loader{transition-duration:.01ms}
}

/* ============================================================
   LAYER 3 · PARTNER REEL
   This is deliberately a single, optional horizontal detour from the
   statistics: the poster is instant, while the video only transfers after
   someone signals interest.
   ============================================================ */
body.partners-open{overflow:hidden}
.proof{position:relative}
.partner-edge{
  position:absolute;right:0;top:50%;z-index:6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  width:clamp(4.7rem,6.5vw,6.25rem);height:clamp(11.5rem,25vh,15rem);
  padding:.9rem .65rem;border:1px solid rgba(255,255,255,.58);border-right:0;
  border-radius:1.2rem 0 0 1.2rem;
  background:rgba(42,91,163,.94);color:#fff;
  box-shadow:-12px 16px 34px rgba(26,51,91,.22);
  backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);
  transform:translateY(-50%);transition:transform .35s var(--ease),opacity .2s ease,background .25s ease,box-shadow .25s ease;
}
.partner-edge.is-ready{transform:translateY(-50%)}
.partner-edge:hover,.partner-edge:focus-visible{outline:none;background:#5C88DA;box-shadow:-14px 18px 38px rgba(26,51,91,.3)}
.partner-edge__label{writing-mode:vertical-rl;font-family:var(--font-head);font-size:clamp(.75rem,1vw,.94rem);letter-spacing:.08em;text-transform:uppercase}
.partner-edge svg{width:2rem;height:2rem;stroke:currentColor;stroke-width:2;flex:none}
body.partners-open #partnersOpen{opacity:0;pointer-events:none}

.partners{
  position:fixed;inset:0;z-index:190;overflow-y:auto;overscroll-behavior:contain;
  pointer-events:none;visibility:hidden;transform:translateX(100%);
  color:#2D3C5A;
  background:
    radial-gradient(58% 72% at 92% 16%,rgba(215,193,234,.66),transparent 72%),
    radial-gradient(48% 54% at 13% 92%,rgba(153,198,238,.68),transparent 72%),
    linear-gradient(142deg,#F7FBFF 0%,#E7F3FF 48%,#D7EAFF 100%);
  transition:transform .68s var(--ease-rail),visibility .68s step-end;
}
.partners::before,.partners::after{content:"";position:absolute;pointer-events:none;border-radius:50%;filter:blur(2px);opacity:.68}
.partners::before{width:min(42vw,38rem);aspect-ratio:1;right:-12%;bottom:-30%;background:radial-gradient(circle,rgba(92,136,218,.2),transparent 68%)}
.partners::after{width:min(32vw,28rem);aspect-ratio:1;left:12%;top:-26%;background:radial-gradient(circle,rgba(255,184,150,.22),transparent 70%)}
.partners.is-open{visibility:visible;pointer-events:auto;transform:none;transition:transform .68s var(--ease-rail),visibility 0s}
.partners__inner{
  position:relative;z-index:1;min-height:100svh;width:min(100%,88rem);margin-inline:auto;
  display:grid;grid-template-columns:minmax(15rem,.72fr) minmax(30rem,1.45fr);align-items:center;gap:clamp(2rem,7vw,7.5rem);
  padding:clamp(6rem,11vh,9rem) max(var(--pad),calc(var(--edge-w) + 1rem)) clamp(3rem,8vh,6rem);
}
.partners__copy .eyebrow{color:#416DAD;margin-bottom:.95rem}
.partners__copy .h2{font-size:clamp(3rem,6.4vw,6rem);line-height:.88;color:#2D3C5A;text-wrap:balance}
.partners__copy > p:last-child{max-width:30ch;margin-top:1.35rem;font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.6;color:rgba(45,60,90,.73);text-wrap:pretty}
.partner-film{display:block;width:100%;padding:0;border-radius:1.65rem;text-align:left;overflow:hidden;box-shadow:0 28px 68px rgba(39,71,115,.25);transform:translateZ(0)}
.partner-film:focus-visible{outline:4px solid rgba(47,97,168,.5);outline-offset:5px}
.partner-film__media{position:relative;display:block;isolation:isolate;aspect-ratio:16/9;overflow:hidden;background:#9ABEE1}
.partner-film__poster,.partner-film__preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.partner-film__poster{z-index:0;transition:transform .8s var(--ease),filter .35s ease}
.partner-film__preview{z-index:1;opacity:0;transition:opacity .32s ease}
.partner-film.is-previewing .partner-film__preview{opacity:1}
.partner-film__shade{position:absolute;z-index:2;inset:0;background:linear-gradient(180deg,rgba(18,35,66,.04) 28%,rgba(18,35,66,.68) 100%);pointer-events:none}
.partner-film__play{position:absolute;z-index:3;left:50%;top:50%;translate:-50% -50%;display:grid;place-items:center;width:clamp(4rem,7vw,5.6rem);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 12px 30px rgba(15,33,63,.32);color:#345E9E;transition:transform .35s var(--ease),background .25s ease,color .25s ease}
.partner-film__play svg{width:40%;height:40%;fill:currentColor;translate:6% 0}
.partner-film:hover .partner-film__poster,.partner-film:focus-visible .partner-film__poster{transform:scale(1.035);filter:saturate(1.06)}
.partner-film:hover .partner-film__play,.partner-film:focus-visible .partner-film__play{transform:scale(1.1);background:#345E9E;color:#fff}
.partner-film__hint{position:absolute;z-index:3;left:1.05rem;bottom:1rem;padding:.5rem .72rem;border-radius:.66rem;background:rgba(19,38,71,.76);color:#fff;font-family:var(--font-body);font-size:clamp(.62rem,.83vw,.76rem);font-weight:600;letter-spacing:.055em;text-transform:uppercase;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.partner-film__hint--mobile{display:none}
.partner-edge--back{
  position:absolute;left:0;right:auto;top:50%;z-index:3;transform:translateY(-50%);
  height:clamp(10rem,22vh,13rem);border:1px solid rgba(45,60,90,.14);border-left:0;
  background:rgba(255,255,255,.6);color:#2D3C5A;box-shadow:10px 14px 30px rgba(34,65,106,.12);
}
.partner-edge--back .partner-edge__label{font-size:.7rem}.partner-edge--back:hover,.partner-edge--back:focus-visible{background:rgba(255,255,255,.92);color:#2F61A8}
.box--partners .box__frame{width:min(94vw,76rem)}

@media(max-width:760px){
  .partner-edge{
    top:auto;bottom:1rem;right:1rem;
    width:auto;height:auto;min-height:3.45rem;flex-direction:row-reverse;gap:.55rem;padding:.7rem .92rem;
    border:1px solid rgba(255,255,255,.62);border-radius:999px;
    transform:none;
  }
  .partner-edge.is-ready{transform:none}
  .partner-edge__label{writing-mode:horizontal-tb;font-size:.74rem}
  .partner-edge svg{width:1.35rem;height:1.35rem}
  body.partners-open #partnersOpen{opacity:0;pointer-events:none}
  .partners__inner{min-height:100svh;grid-template-columns:1fr;align-content:center;gap:2.15rem;padding:calc(5.8rem + env(safe-area-inset-top,0px)) var(--pad) calc(3.8rem + env(safe-area-inset-bottom,0px))}
  .partners__copy{text-align:center}.partners__copy .h2{font-size:clamp(3.15rem,16vw,4.7rem)}.partners__copy > p:last-child{margin-inline:auto}
  .partner-film{border-radius:1.3rem}.partner-film__hint--desktop{display:none}.partner-film__hint--mobile{display:block}
  .partner-edge--back{top:calc(1rem + env(safe-area-inset-top,0px));bottom:auto;left:1rem;right:auto;min-height:3rem;height:auto;transform:none;padding:.58rem .78rem;flex-direction:row;box-shadow:0 8px 22px rgba(34,65,106,.13)}
  .partner-edge--back .partner-edge__label{font-size:.66rem}
}
@media(prefers-reduced-motion:reduce){.partner-edge,.partners,.partner-film__poster,.partner-film__preview,.partner-film__play{transition-duration:.01ms}}

/* ============================================================
   FINAL LAYER PASS — shared controls, motion, and responsive layout
   ============================================================ */

:root{--edge-w:clamp(64px,5.4vw,84px)}

/* Layer 1: the film is intentionally clean; no stickers compete with it. */
.peek__orbit{display:none!important}
.hero__title{font-size:clamp(4.25rem,7vw,8.15rem)}
.peek{width:clamp(310px,31vw,480px)}
.peek__play svg{width:clamp(58px,6.2vw,86px)}

/* Layer 2: three large cards and an editorial Flip / Roll / Unzip treatment. */
.cast{padding:clamp(4.8rem,9vh,7rem) 0 clamp(3.5rem,7vh,5.5rem)}
.cast__heading{margin-bottom:clamp(1.25rem,2.8vw,2.15rem)}
.cast__title{text-align:center;text-transform:uppercase;color:#293954;font-size:clamp(3.5rem,7.5vw,6.9rem);line-height:.9}
.railwrap{--per:3;--gap:clamp(.85rem,1.4vw,1.3rem)}
.rail__track{padding-block:.75rem 1.2rem}
.cast__film-row{display:grid;grid-template-columns:minmax(8rem,.48fr) minmax(0,1.52fr);align-items:stretch;gap:clamp(1rem,2.4vw,2.25rem);margin-top:clamp(1.1rem,2.6vw,2rem)}
.cast__verbs{display:grid;align-content:center;justify-items:start;gap:clamp(.45rem,1.35vw,1rem);padding-left:clamp(.25rem,1vw,.9rem);font-family:var(--font-head);font-size:clamp(1.7rem,3.3vw,3.35rem);line-height:.88;color:#2E4D79}
.cast__verb{display:inline-block;will-change:transform;cursor:default}
.cast__verb--flip{animation:finalFlip 4.2s cubic-bezier(.22,1,.36,1) infinite}
.cast__verb--roll{animation:finalRoll 4.2s ease-in-out .5s infinite}
.cast__verb--unzip{position:relative;animation:finalUnzip 4.2s ease-in-out 1s infinite}
.cast__verb--unzip::after{content:"";position:absolute;left:0;right:-.16em;bottom:-.14em;height:3px;border-radius:99px;background:repeating-linear-gradient(90deg,#5C88DA 0 7px,transparent 7px 11px);opacity:.75}
@keyframes finalFlip{0%,72%,100%{transform:rotateY(0) translateY(0)}10%{transform:rotateY(180deg) translateY(-.08em)}18%{transform:rotateY(360deg) translateY(0)}}
@keyframes finalRoll{0%,72%,100%{transform:rotate(0)}12%{transform:rotate(-8deg) translateX(-.05em)}20%{transform:rotate(8deg) translateX(.05em)}27%{transform:rotate(0)}}
@keyframes finalUnzip{0%,72%,100%{letter-spacing:0}14%{letter-spacing:.12em}26%{letter-spacing:.01em}}
.castfilm{width:100%;padding:clamp(.45rem,1vw,.65rem);border-radius:clamp(1.25rem,2vw,1.75rem);align-self:stretch}
.castfilm__thumb{width:100%;height:100%;min-height:clamp(8.5rem,15vw,13.5rem);aspect-ratio:auto;border-radius:clamp(.9rem,1.5vw,1.25rem)}
.castfilm__play{width:clamp(3.7rem,6vw,5.3rem);background:rgba(35,54,86,.9)}
.castfilm__copy{display:none!important}
.cast .cub{opacity:.4;transform:translateY(1rem) scale(.92)}
.cast.is-in .cub{animation:castArrive .72s var(--ease) both;animation-delay:calc((var(--card, 0)) * 70ms)}
.cast.is-in .cub:nth-child(1){--card:1}.cast.is-in .cub:nth-child(2){--card:2}.cast.is-in .cub:nth-child(3){--card:3}.cast.is-in .cub:nth-child(4){--card:4}.cast.is-in .cub:nth-child(5){--card:5}.cast.is-in .cub:nth-child(6){--card:6}.cast.is-in .cub:nth-child(7){--card:7}.cast.is-in .cub:nth-child(8){--card:8}
@keyframes castArrive{to{opacity:1;transform:none}}

/* Layer 3: a real full-height section rail, never a detached badge. */
.proof{min-height:108svh;display:flex;flex-direction:column;justify-content:center}
.partner-edge,.partner-edge--back,.discover-cue,.discover__back{
  width:var(--edge-w);min-width:var(--edge-w);border-radius:0 1.1rem 1.1rem 0;
  transition:background .25s ease,color .25s ease,box-shadow .25s ease,opacity .2s ease;
}
.partner-edge{top:0;bottom:0;right:0;height:auto;transform:none;border-radius:1.1rem 0 0 1.1rem}
.partner-edge.is-ready{transform:none}
.partner-edge__label{font-size:clamp(.66rem,.86vw,.84rem)}
.partners{overflow:hidden}
.partners__inner{height:100svh;min-height:0;overflow:hidden;padding-block:clamp(4rem,7vh,6rem)}
.partner-edge--back{top:0;bottom:0;left:0;height:auto;transform:none;border-radius:0 1.1rem 1.1rem 0;background:rgba(255,255,255,.55)}
.partner-edge--back .partner-edge__label{font-size:clamp(.66rem,.86vw,.84rem)}
.partners__copy .h2{margin:0}.partners__copy > p:last-child{margin-top:.85rem}
.contact{overflow:hidden}
.contact__inner{height:100svh;min-height:0;overflow:hidden}
body.partners-open .head{opacity:0;pointer-events:none}

/* The Island call-to-action uses the same rail system before the journey opens. */
.discover-cue{top:0;bottom:0;right:0;height:auto;translate:none;display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:.8rem .55rem;background:rgba(42,91,163,.9);border:1px solid rgba(255,255,255,.45);border-right:0;color:#fff;box-shadow:-12px 16px 34px rgba(26,51,91,.22);backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%)}
.discover-cue:hover{translate:none;transform:none;background:#5C88DA}
.discover-cue__txt{font-size:clamp(.68rem,.95vw,.9rem);line-height:1.14;color:#fff}.discover-cue__hl{color:#fff;background:none;-webkit-text-fill-color:currentColor;animation:none}.discover-cue__arrow svg{stroke:#fff}

/* Full-screen Island journey: no site chrome or browser-scroll interruptions. */
.discover{overflow:hidden}
body.discover-open .head,body.discover-open .edge{opacity:0!important;pointer-events:none!important}
.discover__track{width:200%;height:100%;transform:translateX(0)}
.discover[data-stage="1"] .discover__track,.discover[data-stage="2"] .discover__track{transform:translateX(-50%)}
.discover__track > .dstage{width:50%;height:100%;flex:0 0 50%}
.discover__back{top:0;bottom:0;left:0;translate:none;height:auto;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;padding:.8rem .55rem;background:rgba(35,54,86,.84);border-color:rgba(255,255,255,.45);box-shadow:10px 14px 30px rgba(25,43,77,.18)}
.discover__back:hover{background:#5C88DA}
.discover__back-txt{font-family:var(--font-head);font-size:clamp(.64rem,.85vw,.82rem)}
.dstage--profile{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;transform:translateY(105%);transition:transform .68s var(--ease-rail);z-index:30;overflow:hidden}
.discover.is-profile-open .dstage--profile{transform:none}

/* Island Unzip stage: a left-edge, full-height zipper that is pulled down. */
.dstage--zip .dzip__copy{left:clamp(8rem,13vw,15rem);top:50%;transform:translateY(-50%);max-width:min(42vw,36rem)}
.dzip__logo{display:none!important}.dzip__title{font-size:clamp(3.1rem,7vw,7rem);line-height:.82}.dzip__title span:first-child{display:block}.dzip__title span:last-child{display:block;font-size:.8em;margin-top:.12em}
.dstage--zip .zip{position:absolute;z-index:15;left:0;top:0;bottom:0;width:clamp(5.8rem,9vw,8.6rem);height:auto;margin:0;border:0;border-radius:0;background:linear-gradient(90deg,rgba(17,31,57,.52),rgba(17,31,57,.06));box-shadow:inset -1px 0 rgba(255,255,255,.36)}
.dstage--zip .zip::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:clamp(1.1rem,1.7vw,1.55rem);translate:-50% 0;border-radius:0;background:repeating-linear-gradient(180deg,#f4f6fb 0 7px,#7f8ca5 7px 13px,#dce4f0 13px 19px);box-shadow:0 0 0 2px rgba(26,42,74,.35),0 0 16px rgba(5,15,34,.42)}
.dstage--zip .zip::after{content:"";position:absolute;left:50%;top:calc(var(--zip,0) * 100%);width:clamp(1.6rem,2.4vw,2.2rem);height:calc((1 - var(--zip,0)) * 100%);translate:-50% 0;background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,0));mix-blend-mode:screen;opacity:.72;pointer-events:none}
.dstage--zip .zip__teeth{display:none}.dstage--zip .zip__pull{position:absolute;z-index:3;left:50%;top:calc(0% + var(--zip,0) * 89%);translate:-50% 0;width:clamp(3rem,4.5vw,4.2rem);height:clamp(4.4rem,7vw,6.2rem);border-radius:1.15rem;background:linear-gradient(155deg,#f7faff,#9daac0);box-shadow:0 12px 20px rgba(8,19,43,.36);transition:filter .2s ease}
.dstage--zip .zip__pull::before{content:"";position:absolute;left:50%;top:19%;translate:-50% 0;width:1.1rem;aspect-ratio:1;border-radius:50%;background:#2b3e60;box-shadow:inset 0 0 0 .28rem #dce4f0}.dstage--zip .zip__pull::after{content:"";position:absolute;left:50%;bottom:-1.1rem;width:1.25rem;height:2rem;translate:-50% 0;border-radius:0 0 .8rem .8rem;background:linear-gradient(90deg,#8c9cb5,#eef3fa,#8595ad)}
.dstage--zip .zip__tab{display:none}.dstage--zip .zip__hint{position:relative;display:inline-block;margin-top:1.2rem;color:#fff;font-family:var(--font-callout);font-size:clamp(.72rem,1.1vw,1rem);letter-spacing:.13em;text-transform:uppercase;text-shadow:0 3px 14px rgba(11,24,45,.55)}
.discover.is-open[data-stage="0"] .dzip__cubs{animation:cubsEnter .85s .12s var(--ease) both}@keyframes cubsEnter{from{opacity:0;transform:translateX(12vw) translateY(3rem)}to{opacity:1;transform:none}}

/* Island cast: the carousel lives in the exact visual centre and its labels
   stay in the card without a white information block or border. */
.dstage--cast .dcast{position:absolute;inset:0;display:grid;place-items:center;padding:0;gap:0}
.dstage--cast .dcast__stage{position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;width:min(78vw,63rem);height:min(70svh,48rem);min-height:0;transform:none!important;overflow:visible}
.dcub{width:min(30vw,31rem);aspect-ratio:734/909}
.dcub__card{grid-template-rows:1fr auto;border:0!important;border-radius:clamp(1.4rem,2.4vw,2.3rem);background:linear-gradient(160deg,color-mix(in srgb,var(--cub-color) 88%,#fff),color-mix(in srgb,var(--cub-color) 74%,var(--cub-accent)));box-shadow:0 24px 56px rgba(36,55,86,.21)}
.dcub__info{min-height:auto;padding:clamp(.72rem,1.3vw,1.15rem) clamp(1rem,1.8vw,1.5rem) clamp(1.3rem,2vw,1.8rem);background:transparent;color:var(--cub-ink);text-align:center;overflow:visible}
.dcub__info strong{font-size:clamp(1.7rem,3.5vw,3.1rem);line-height:.9}.dcub__info span{margin-top:.32rem;font-size:clamp(.66rem,1.1vw,.92rem);color:var(--cub-ink);opacity:.8}
.dcub__info em{display:none!important}.dcub__open{right:50%;bottom:clamp(.35rem,1vw,.7rem);translate:50% 0;width:clamp(2.55rem,3.7vw,3.2rem);background:var(--cub-ink);box-shadow:0 7px 16px color-mix(in srgb,var(--cub-ink) 28%,transparent)}.dcub__open svg{width:48%}
.dcub[data-pos="0"] .dcub__card:hover,.dcub[data-pos="0"] .dcub__card:focus-visible{transform:translateY(-8px);box-shadow:0 32px 68px rgba(36,55,86,.28)}
.dcast__arrow{width:clamp(3.4rem,5vw,4.6rem);background:#2F61A8;border:2px solid rgba(255,255,255,.9)}
.dcast__arrow--prev{left:-4rem}.dcast__arrow--next{right:-4rem}

/* Profile rises from the bottom and leaves only the shared left rail to go back. */
.dprofile__inner{height:100%;padding:clamp(3.5rem,7vh,6rem) max(calc(var(--edge-w) + 2rem),var(--pad)) clamp(2rem,5vh,4rem);overflow:hidden;align-content:center}
.dprofile__art{width:min(100%,26rem)}

/* Layer 5: three separate words, sequenced over the original video. */
.unzip.show-b .unzip__b{animation:smokeIn 1.05s cubic-bezier(.16,1,.3,1) forwards}

@media(max-width:899px){
  .hero__title{font-size:clamp(4rem,17vw,5.75rem)}.cast__title{font-size:clamp(3rem,12.5vw,4.45rem);line-height:.92}.peek{width:clamp(230px,63vw,330px)}
  .railwrap{--per:2}.cast__film-row{grid-template-columns:minmax(6.7rem,.52fr) minmax(0,1.48fr);gap:.75rem}.cast__verbs{font-size:clamp(1.35rem,6.3vw,2rem)}.castfilm__thumb{min-height:9rem}
  .proof{min-height:auto;padding-block:4.5rem}.partner-edge{top:auto;bottom:1rem;right:1rem;width:auto;min-width:0;height:auto;padding:.7rem .92rem;border:1px solid rgba(255,255,255,.62);border-radius:999px}.partner-edge__label{writing-mode:horizontal-tb}.partner-edge--back{top:calc(1rem + env(safe-area-inset-top,0px));bottom:auto;left:1rem;width:auto;min-width:0;height:auto;padding:.58rem .78rem;border-radius:999px}.partners__inner{height:100svh;padding:calc(4.2rem + env(safe-area-inset-top,0px)) var(--pad) calc(2.2rem + env(safe-area-inset-bottom,0px));gap:1.5rem}.partners{overflow:hidden}
  .discover-cue{top:auto;bottom:1rem;right:1rem;width:auto;min-width:0;height:auto;flex-direction:row;gap:.7rem;padding:.75rem .95rem;border-radius:999px;border:1px solid rgba(255,255,255,.5)}.discover-cue__txt{text-align:left}.discover-cue__arrow{width:1.6rem}.discover-cue__arrow svg{height:18px}
  .discover__back{top:calc(1rem + env(safe-area-inset-top,0px));bottom:auto;left:1rem;width:auto;min-width:0;height:auto;flex-direction:row;gap:.55rem;padding:.58rem .78rem;border-radius:999px}.discover__back-txt{writing-mode:horizontal-tb;transform:none;font-size:.62rem}.discover__back-arrow{width:24px}.discover__back-arrow svg{height:16px}
  .dstage--zip .dzip__copy{left:calc(var(--pad) + 4.2rem);right:var(--pad);max-width:none}.dzip__title{font-size:clamp(2.5rem,12vw,4.3rem)}.dstage--zip .zip{width:4.7rem}.dstage--zip .zip__pull{width:2.7rem;height:4rem}
  .dstage--cast .dcast__stage{width:min(88vw,35rem);height:min(65svh,37rem)}.dcub{width:min(68vw,23rem)}.dcast__arrow--prev{left:-.65rem}.dcast__arrow--next{right:-.65rem}.dcast__arrow{width:3.1rem}
  .dprofile__inner{padding:calc(5rem + env(safe-area-inset-top,0px)) var(--pad) calc(2rem + env(safe-area-inset-bottom,0px));align-content:center;gap:1rem}.dprofile__art{width:min(72%,18rem)}
}
@media(max-width:560px){.railwrap{--per:1.14}.cast__film-row{grid-template-columns:minmax(5.8rem,.48fr) minmax(0,1.52fr)}.cast__verbs{font-size:clamp(1.25rem,6.6vw,1.7rem)}.castfilm__thumb{min-height:7.75rem}.dcub__info strong{font-size:2rem}}
@media(prefers-reduced-motion:reduce){.cast__verb,.cast.is-in .cub,.discover.is-open[data-stage="0"] .dzip__cubs{animation:none}.cast .cub{opacity:1;transform:none}}

/* ── Refined section invitations ────────────────────────────
   These are intentionally compact, horizontal edge panels—not full-height
   bars—so each section reads as a continuous piece of the page. */
.proof{min-height:0;display:block}
.partner-edge{
  top:50%;right:0;bottom:auto;width:clamp(12.5rem,17vw,16.5rem);min-width:0;height:clamp(6.7rem,10vw,8.1rem);
  padding:1rem 1.15rem 1rem 1.3rem;transform:translateY(-50%);flex-direction:row;justify-content:space-between;gap:1rem;
  border:1px solid rgba(255,255,255,.52);border-right:0;border-radius:1.45rem 0 0 1.45rem;
  background:linear-gradient(135deg,rgba(32,56,101,.96),rgba(61,100,174,.96));
  box-shadow:-18px 18px 42px rgba(27,52,99,.28),inset 0 1px 0 rgba(255,255,255,.16);
}
.partner-edge.is-ready{transform:translateY(-50%)}
.partner-edge:hover,.partner-edge:focus-visible{transform:translateY(-50%) translateX(-.35rem);background:linear-gradient(135deg,#293F70,#5C88DA);box-shadow:-22px 22px 48px rgba(27,52,99,.34)}
.partner-edge__label{writing-mode:horizontal-tb;text-align:left;font-size:clamp(1rem,1.5vw,1.38rem);line-height:.96;letter-spacing:.01em;text-transform:none}
.partner-edge__label::before{display:none}
.partner-edge svg{width:2.7rem;height:2.7rem;padding:.62rem;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);stroke-width:2.15}
.partner-edge--back{top:50%;bottom:auto;width:clamp(8rem,10vw,9.5rem);min-width:0;height:clamp(6.7rem,10vw,8.1rem);padding:1rem .8rem;transform:translateY(-50%);flex-direction:column;border:1px solid rgba(45,60,90,.13);border-left:0;border-radius:0 1.45rem 1.45rem 0;background:rgba(255,255,255,.78);box-shadow:12px 18px 36px rgba(34,65,106,.13)}
.partner-edge--back:hover,.partner-edge--back:focus-visible{transform:translateY(-50%) translateX(.25rem);background:#fff;color:#2F61A8}.partner-edge--back .partner-edge__label{font-size:.7rem;text-align:center}.partner-edge--back .partner-edge__label::before{display:none}

/* A warm, glass side invitation gives Island its own personality. */
.discover-cue{
  top:50%;right:0;bottom:auto;width:clamp(15.5rem,22vw,20.5rem);min-width:0;height:auto;translate:0 -50%;
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem 1.2rem 1.15rem 1.45rem;
  border:1px solid rgba(255,255,255,.7);border-right:0;border-radius:1.45rem 0 0 1.45rem;
  background:rgba(248,252,255,.88);color:#29476f;box-shadow:-18px 18px 42px rgba(15,42,76,.25),inset 0 1px 0 rgba(255,255,255,.72);
}
.discover-cue:hover,.discover-cue:focus-visible{translate:-.35rem -50%;transform:none;background:#fff;outline:none;box-shadow:-22px 22px 48px rgba(15,42,76,.3)}
.discover-cue__txt{display:grid;gap:.24rem;color:#29476f;text-align:left;font-size:clamp(1rem,1.45vw,1.32rem);line-height:1}.discover-cue__txt small{font-family:var(--font-body);font-size:.52em;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5C88DA}.discover-cue__hl{display:block;color:#29476f;background:none;-webkit-text-fill-color:currentColor;font-family:var(--font-head);animation:none}
.discover-cue__arrow{display:grid;place-items:center;flex:0 0 auto;width:clamp(3rem,4.2vw,3.7rem);aspect-ratio:1;border-radius:999px;background:#5C88DA;color:#fff;box-shadow:0 8px 18px rgba(54,96,160,.26)}.discover-cue__arrow svg{width:52%;height:auto;stroke:currentColor}.discover-cue__arrow svg path{animation:nudge 2.2s ease-in-out infinite}

@media(max-width:899px){
  .proof{padding-block:3.75rem}.partner-edge{top:auto;bottom:1rem;right:1rem;width:min(20rem,calc(100% - 2rem));height:auto;min-height:4.35rem;padding:.72rem .85rem .72rem 1rem;border-radius:1.15rem;transform:none}.partner-edge.is-ready{transform:none}.partner-edge:hover,.partner-edge:focus-visible{transform:translateY(-.15rem)}.partner-edge__label{font-size:1rem}.partner-edge__label::before{margin-bottom:.2rem;font-size:.46em}.partner-edge svg{width:2.35rem;height:2.35rem;padding:.52rem}.partner-edge--back{top:1rem;bottom:auto;left:1rem;width:4rem;height:4rem;min-height:0;padding:.5rem;border-radius:999px;transform:none}.partner-edge--back .partner-edge__label{display:none}.partner-edge--back:hover,.partner-edge--back:focus-visible{transform:scale(1.04)}
  .discover-cue{top:auto;bottom:1rem;right:1rem;width:min(20rem,calc(100% - 2rem));padding:.85rem 1rem;border-radius:1.15rem;translate:0}.discover-cue:hover,.discover-cue:focus-visible{translate:0;transform:translateY(-.15rem)}.discover-cue__txt{font-size:1rem}.discover-cue__arrow{width:2.8rem}
}

/* ── Cast + journey corrections: one cohesive interaction system ─────── */
/* A richer blue field gives the Cubs contrast without returning to the old
   pale blue / pink wash. */
.cast{
  background:
    radial-gradient(56% 74% at 14% 0%,rgba(218,241,255,.48),transparent 69%),
    radial-gradient(48% 72% at 100% 100%,rgba(61,111,190,.34),transparent 72%),
    linear-gradient(136deg,#B9DCF5 0%,#99C6EE 46%,#6F9DDA 100%);
}
.cast::before{opacity:.14;background-image:radial-gradient(rgba(255,255,255,.75) .72px,transparent .72px)}
.cast__title{color:#293954!important;text-shadow:0 8px 24px rgba(67,111,164,.12)}

/* The Cubs now get the space and controls of a true premium carousel. */
.cast{padding:clamp(3.75rem,7vh,5.25rem) 0 calc(clamp(3.75rem,7vh,5.25rem) + clamp(1rem,1.5vw,1.4rem))}
.cast .wrap{max-width:min(100%,88rem)}
.cast__heading{max-width:var(--maxw)!important}
.railarrow{align-self:center;width:clamp(3.4rem,4.8vw,4.7rem);height:clamp(3.4rem,4.8vw,4.7rem);min-height:0;padding:0;border-radius:999px;display:grid;place-items:center;background:#2F61A8;border:2px solid rgba(255,255,255,.92);color:#fff;box-shadow:0 12px 28px rgba(35,74,137,.34);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .25s ease,transform .28s var(--ease),box-shadow .25s ease}
.railarrow svg{width:43%;height:43%;stroke:currentColor;stroke-width:2.5}.railarrow:hover,.railarrow:focus-visible{transform:scale(1.08);background:#234983;color:#fff;box-shadow:0 18px 34px rgba(35,74,137,.42)}
.rail{scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-inline:clamp(.4rem,.8vw,.75rem);scroll-padding-inline:clamp(.4rem,.8vw,.75rem);overscroll-behavior-x:contain}
.rail__track{padding:.7rem clamp(.1rem,.25vw,.25rem) 1rem}
.cast .cub{opacity:1;transform:none;will-change:auto;border-radius:1.6rem;isolation:isolate}
.cast .cub__stage{border-radius:1.6rem 1.6rem 0 0}.cast .cub__foot{border-radius:0 0 1.6rem 1.6rem}
.cast.is-in .cub{animation:none}

/* A full desktop row introduces the Cubs in the requested order: Kali,
   Papo, Flynn, then Tomo. Smaller breakpoints retain their roomier rails. */
@media(min-width:900px){.cast .railwrap{--per:4}}

.cast .railwrap{opacity:0;transform:translateY(1.4rem) scale(.93);filter:blur(5px);transform-origin:center center}
.cast.is-in .railwrap{animation:castRailSettle .78s cubic-bezier(.16,1,.3,1) both}
@keyframes castRailSettle{0%{opacity:0;transform:translateY(1.4rem) scale(.93);filter:blur(5px)}68%{opacity:1;transform:translateY(0) scale(1.012);filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
.railarrow[disabled]{opacity:.36;pointer-events:none;box-shadow:none}

/* Large, sequential word treatment—every word has the same visual language. */
.cast__film-row{width:100%;grid-template-columns:minmax(8rem,.58fr) minmax(0,1.42fr);margin-inline:auto;margin-top:clamp(.8rem,1.8vw,1.45rem)}
.cast__verbs{font-size:clamp(2.1rem,3.9vw,4.25rem);min-height:clamp(9rem,14vw,12rem);gap:clamp(.5rem,1vw,.85rem)}
.castfilm__thumb{min-height:clamp(7rem,11vw,9.5rem)}
.cast__verb::after{height:4px;opacity:.78;transform:scaleX(1)}
.cast.is-in .cast__verb--flip{animation:verbEnter .7s .18s var(--ease) both,finalFlip 4.2s 1.55s cubic-bezier(.22,1,.36,1) infinite}
.cast.is-in .cast__verb--roll{animation:verbEnter .7s .78s var(--ease) both,finalRoll 4.2s 2.15s ease-in-out infinite}
.cast.is-in .cast__verb--unzip{animation:verbEnter .7s 1.38s var(--ease) both,finalUnzip 4.2s 2.75s ease-in-out infinite}

/* Previous Partner and all return rails deliberately share Get in Touch's
   clean, full-height vertical treatment. No extra labels were invented. */
.proof{min-height:clamp(42rem,88svh,56rem);display:flex;flex-direction:column;justify-content:center}
.partner-edge{
  top:0;bottom:0;right:0;width:var(--edge-w);min-width:var(--edge-w);height:auto;padding:.8rem .55rem;
  transform:none;flex-direction:column;justify-content:center;gap:1.35rem;border:0;border-left:1px solid rgba(255,255,255,.24);border-radius:0;
  overflow:hidden;isolation:isolate;background:transparent;color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.62),-18px 0 34px rgba(20,48,94,.16),inset 1px 0 rgba(255,255,255,.3);backdrop-filter:blur(24px) saturate(155%);-webkit-backdrop-filter:blur(24px) saturate(155%);
}
#partnersOpen.partner-edge::before{content:"";position:absolute;z-index:0;inset:-1.25rem;background:linear-gradient(180deg,rgba(85,145,223,.58),rgba(31,72,143,.68)),url("../img/collage/c06.webp") center/cover no-repeat;filter:blur(13px) saturate(1.16);transform:scale(1.08)}
#partnersOpen.partner-edge > *{position:relative;z-index:1}
.partner-edge.is-ready{transform:none}.partner-edge:hover,.partner-edge:focus-visible{transform:none;background:transparent;box-shadow:0 1px 0 rgba(255,255,255,.78),-18px 0 34px rgba(20,48,94,.22),inset 1px 0 rgba(255,255,255,.46)}
#partnersOpen.partner-edge:hover::before,#partnersOpen.partner-edge:focus-visible::before{background-image:linear-gradient(180deg,rgba(111,169,237,.5),rgba(38,82,157,.6)),url("../img/collage/c06.webp")}
.partner-edge__label{writing-mode:vertical-rl;text-align:center;font-family:var(--font-head);font-size:clamp(.88rem,1.3vw,1.12rem);line-height:1;letter-spacing:.055em;text-transform:uppercase}.partner-edge__label::before{display:none}.partner-edge svg{width:58%;height:auto;padding:0;border:0;border-radius:0;background:transparent;stroke-width:2.4}
.partner-edge--back{top:0;bottom:0;left:0;right:auto;width:var(--edge-w);min-width:var(--edge-w);height:auto;padding:.8rem .55rem;transform:none;flex-direction:column;justify-content:center;gap:1.35rem;border:0;border-right:1px solid rgba(255,255,255,.42);border-radius:0;background:linear-gradient(180deg,rgba(43,88,151,.64),rgba(31,65,121,.72));color:#fff;box-shadow:8px 0 26px rgba(31,61,111,.14),inset -1px 0 rgba(255,255,255,.18);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%)}
.partner-edge--back:hover,.partner-edge--back:focus-visible{transform:none;background:linear-gradient(180deg,rgba(60,112,183,.72),rgba(38,77,142,.8));color:#fff}.partner-edge--back .partner-edge__label{display:block;writing-mode:vertical-rl;font-size:clamp(.76rem,1vw,.9rem);text-align:center}
.discover__back{border-radius:0;background:rgba(35,54,86,.45);backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%)}.discover__back:hover{background:rgba(92,136,218,.72)}

/* Restore Island's original two-line invitation and put the zipper on the
   requested right edge. */
.dzip__title span:first-child{font-size:1em}.dzip__title span:last-child{font-size:1em;margin-top:.12em}
.dstage--zip .zip{left:auto;right:0;background:linear-gradient(270deg,rgba(17,31,57,.52),rgba(17,31,57,.06));box-shadow:inset 1px 0 rgba(255,255,255,.36)}

@media(max-width:899px){
  .cast .wrap{max-width:100%}
  .railwrap{display:grid;grid-template-columns:0 minmax(0,1fr) 0;position:relative;align-items:center}
  .rail{grid-column:1 / -1;grid-row:1}
  .railarrow{display:grid!important;position:absolute;z-index:3;top:50%;width:3.25rem;height:3.25rem;translate:0 -50%}
  .railarrow--prev{left:.45rem}.railarrow--next{right:.45rem}
  .railarrow:hover,.railarrow:focus-visible{transform:scale(1.08)}
  .cast{padding-block:3.25rem}
  .cast__film-row{width:min(100%,30rem);grid-template-columns:minmax(5.8rem,.56fr) minmax(0,1.44fr);gap:.7rem}
  .cast__verbs{font-size:clamp(1.7rem,7.2vw,2.5rem);min-height:8.2rem;gap:.5rem}.cast.is-in .cast__verb--flip{animation-delay:.12s,1.15s}.cast.is-in .cast__verb--roll{animation-delay:.56s,1.6s}.cast.is-in .cast__verb--unzip{animation-delay:1s,2.05s}
  .partner-edge{top:0;bottom:0;right:0;width:4.2rem;min-width:4.2rem;height:auto;padding:.7rem .4rem;border-left:1px solid rgba(255,255,255,.24);border-radius:0;transform:none}.partner-edge__label{writing-mode:vertical-rl;font-size:.78rem}.partner-edge svg{width:62%;height:auto}.partner-edge--back{top:0;bottom:0;left:0;width:4.2rem;min-width:4.2rem;height:auto;padding:.7rem .4rem;border-radius:0;transform:none}.partner-edge--back .partner-edge__label{display:block;writing-mode:vertical-rl;font-size:.68rem}
  .dstage--zip .zip{left:auto;right:0}
}

/* Island invitation and journey: the panel itself never jumps on hover, and
   stays visible long enough to slide cleanly back to the Island. */
.discover{transition:transform .78s var(--ease-rail),visibility 0s linear .78s}
.discover.is-open{transition:transform .78s var(--ease-rail),visibility 0s linear 0s}
.discover-cue:hover,.discover-cue:focus-visible{translate:0 -50%;transform:none}
.discover-cue:hover .discover-cue__arrow,.discover-cue:focus-visible .discover-cue__arrow{animation:discoverArrowTap .56s var(--ease)}
@keyframes discoverArrowTap{50%{transform:translateX(.35rem) scale(1.06)}}

/* The active Cub points down from outside its card, keeping the name clear. */
.dcub__card{overflow:hidden}
.dcub__open{right:50%;bottom:clamp(-2.45rem,-3.5vw,-1.85rem);translate:50% 0;width:2.25rem;height:1.35rem;aspect-ratio:auto;padding:0;border-radius:0;background:transparent!important;color:var(--cub-ink);box-shadow:none;animation:dcubOpenCue 1.65s ease-in-out infinite}
.dcub__open svg{width:100%;height:100%;stroke-width:2.9}
.dcub[data-pos="0"]:hover .dcub__open,.dcub[data-pos="0"]:focus-visible .dcub__open{transform:none;background:transparent!important}
@keyframes dcubOpenCue{0%,100%{transform:translateY(0)}50%{transform:translateY(.38rem)}}
.dcub__info{display:flex;flex-direction:column;gap:.46rem}.dcub__info strong{line-height:1.05}.dcub__info span{margin-top:0;line-height:1.2}
@media(max-width:899px){.discover-cue:hover,.discover-cue:focus-visible{translate:0;transform:none}.dcub__open{bottom:-2.05rem}}

/* Keep the unzip invitation clean: the instruction belongs with the headline,
   not at the bottom of the scene. */
.dzip__swoosh{display:none}
.dstage--zip .dzip__copy-in .zip__hint{position:static;left:auto;top:auto;right:auto;bottom:auto;translate:none;display:inline-block;margin:.9rem 0 0;padding:.58rem .9rem;border-radius:999px;background:rgba(29,43,69,.72);border:1px solid rgba(255,255,255,.62);box-shadow:0 8px 20px rgba(34,43,66,.22);color:#fff;font-family:var(--font-callout);font-size:clamp(.72rem,1.1vw,1rem);line-height:1.25;letter-spacing:.13em;text-align:left;text-transform:uppercase;white-space:nowrap;animation:zipHintPulse 1.8s ease-in-out infinite}
.dstage--zip .dzip__copy{left:clamp(5rem,9vw,10rem)}

/* Map locations pair a tactile country-flag badge with the Cub animation. */
.mapspot{position:absolute;z-index:4;left:var(--x);top:var(--y);translate:-50% -58%;display:flex;align-items:center;gap:clamp(.12rem,.4vw,.42rem);pointer-events:none}
.mapspot__sticker{display:block;width:clamp(2rem,3.5vw,4.1rem);filter:drop-shadow(0 8px 12px rgba(38,57,91,.24))}
.mapspot__sticker img{display:block;width:100%;height:auto;-webkit-user-drag:none;user-select:none}
@media(max-width:760px){.mapspot{gap:.08rem}.mapspot__sticker{width:clamp(1.7rem,8vw,2.7rem)}}

/* Retailer pass: an editorial logo belt after the hero and four live,
   equal-weight preview films in the Previous Partner panel. */
.retailer-marquee{position:relative;z-index:3;overflow:hidden;padding:clamp(.9rem,1.8vw,1.4rem) 0;background:rgba(255,255,255,.97);border-bottom:1px solid rgba(64,106,165,.12);box-shadow:0 10px 24px rgba(38,76,127,.08)}
.retailer-marquee__mask{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.retailer-marquee__track{display:flex;width:max-content;will-change:transform;animation:retailerMarquee 62s linear infinite}
.retailer-marquee__set{display:flex;align-items:center;gap:clamp(2.6rem,5vw,5.5rem);flex:none;padding-right:clamp(2.6rem,5vw,5.5rem)}
.retailer-marquee__set img{display:block;flex:none;width:clamp(6.37rem,9.75vw,10.4rem);height:clamp(2.86rem,4.42vw,4.16rem);object-fit:contain;opacity:1;filter:none;transition:none}
@keyframes retailerMarquee{to{transform:translateX(-50%)}}

.retailer-films{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.65rem,1.15vw,1rem);align-self:center}
.retailer-film{display:block;min-width:0;padding:0;overflow:hidden;border-radius:clamp(.8rem,1.25vw,1.15rem);background:#8bb0d7;box-shadow:0 14px 28px rgba(36,68,111,.17);transform:translateZ(0);transition:transform .32s var(--ease),box-shadow .32s ease;isolation:isolate}
.retailer-film:focus-visible{outline:3px solid #345E9E;outline-offset:4px}
.retailer-film__media{position:relative;display:block;isolation:isolate;aspect-ratio:16/9;overflow:hidden}
.retailer-film__preview{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;background:#9ABEE1;transition:transform .65s var(--ease),filter .28s ease}
.retailer-film__shade{position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(13,35,70,.04),rgba(13,35,70,.3));pointer-events:none;transition:background .28s ease}
.retailer-film__play{position:absolute;z-index:2;left:50%;top:50%;display:grid;place-items:center;width:clamp(2.25rem,3.9vw,3.6rem);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:rgba(255,255,255,.94);color:#345E9E;box-shadow:0 7px 18px rgba(16,36,70,.28);transition:transform .32s var(--ease),background .25s ease,color .25s ease}
.retailer-film__play svg{width:42%;height:42%;fill:currentColor;translate:7% 0}
.retailer-film:hover,.retailer-film:focus-visible{transform:translateY(-.26rem);box-shadow:0 19px 34px rgba(36,68,111,.25)}
.retailer-film:hover .retailer-film__preview,.retailer-film:focus-visible .retailer-film__preview{transform:scale(1.045);filter:saturate(1.06)}
.retailer-film:hover .retailer-film__shade,.retailer-film:focus-visible .retailer-film__shade{background:linear-gradient(180deg,rgba(13,35,70,.02),rgba(13,35,70,.12))}
.retailer-film:hover .retailer-film__play,.retailer-film:focus-visible .retailer-film__play{transform:scale(1.11);background:#345E9E;color:#fff}

@media(max-width:760px){
  .retailer-marquee{padding:.7rem 0}.retailer-marquee__set{gap:2.3rem;padding-right:2.3rem}.retailer-marquee__set img{width:6.24rem;height:2.73rem}
  .retailer-films{width:min(100%,32rem);margin-inline:auto;gap:.62rem}.retailer-film{border-radius:.82rem}
}
@media(prefers-reduced-motion:reduce){.retailer-marquee__track{animation:none}.retailer-film,.retailer-film__preview,.retailer-film__play{transition-duration:.01ms}}

/* Retailer roster — a considered white presentation rather than a ticker.
   Each row remains manually scrollable so its full partner list has room to
   breathe on every viewport. */
.retailer-roster{
  position:relative;z-index:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:hidden;
  padding:0;
  background:#fff;
  border-top:1px solid rgba(21,29,43,.78);
  border-bottom:0;
}
.retailer-roster__row{
  min-width:0;padding:clamp(1.7rem,3.4vw,3rem) clamp(1.25rem,2.5vw,2.5rem);
}
.retailer-roster__row + .retailer-roster__row{
  margin:0;padding-top:clamp(1.7rem,3.4vw,3rem);
  border-top:0;border-left:1px solid rgba(21,29,43,.16);
}
.retailer-roster__title{
  position:relative;margin:0 0 clamp(2rem,3.3vw,3rem);padding-bottom:.82rem;
  color:#20293A;text-align:center;
  font-family:var(--font-head);font-size:clamp(2rem,3.5vw,2.96rem);line-height:1;
  font-variant-caps:all-small-caps;letter-spacing:.19em;text-transform:uppercase;
}
.retailer-roster__title::after{
  content:"";position:absolute;left:50%;bottom:0;width:clamp(6.5rem,14vw,11.5rem);height:1px;translate:-50% 0;
  background:linear-gradient(90deg,transparent,rgba(32,41,58,.28),transparent);
}
.retailer-roster__scroll{
  overflow:hidden;
  padding:.45rem 0 .65rem;
  scrollbar-width:none;
  mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
}
.retailer-roster__scroll::-webkit-scrollbar{display:none}
.retailer-roster__track{
  display:flex;width:max-content;will-change:transform;
  animation:retailerRosterSlide 40s linear infinite;
}
.retailer-roster__logos{
  display:flex;align-items:center;gap:clamp(1.8rem,2.8vw,3.2rem);
  flex:none;width:max-content;margin:0;padding:0 clamp(1.8rem,2.8vw,3.2rem) 0 0;list-style:none;
}
@keyframes retailerRosterSlide{to{transform:translateX(-50%)}}
.retailer-roster__logo{
  --logo-width:8.1rem;
  --logo-height:3rem;
  flex:0 0 clamp(8rem,9.7vw,10.2rem);min-height:4.3rem;
  display:grid;place-items:center;scroll-snap-align:center;
}
.retailer-roster__logo img{
  display:block;width:var(--logo-width);height:var(--logo-height);
  max-width:100%;object-fit:contain;transform:scale(1.15);
}
.retailer-roster__logo--nordstrom{--logo-width:9.6rem;--logo-height:2.1rem}
.retailer-roster__logo--disneyland{--logo-width:8rem;--logo-height:3.4rem}
.retailer-roster__logo--amazon{--logo-width:8.4rem;--logo-height:2.7rem}
.retailer-roster__logo--target{--logo-width:3.6rem;--logo-height:3.6rem}
.retailer-roster__logo--macys{--logo-width:7.1rem;--logo-height:2.75rem}
.retailer-roster__logo--camp span{font-family:var(--font-body);font-size:2.15rem;font-weight:800;letter-spacing:-.08em;color:#20293A}
.retailer-roster__logo--kohls{--logo-width:7.65rem;--logo-height:2.3rem}
.retailer-roster__logo--tj-maxx{--logo-width:7.5rem;--logo-height:3rem}
.retailer-roster__logo--walmart{--logo-width:8.9rem;--logo-height:2.8rem}
.retailer-roster__logo--qvc{--logo-width:5.3rem;--logo-height:3rem}
.retailer-roster__logo--fao{--logo-width:8.8rem;--logo-height:2.5rem}
.retailer-roster__logo--indigo{--logo-width:6.5rem;--logo-height:3.2rem}
.retailer-roster__logo--disney{--logo-width:8.4rem;--logo-height:3.2rem}
.retailer-roster__logo--marvel{--logo-width:7.35rem;--logo-height:2.5rem}
.retailer-roster__logo--star-wars{--logo-width:7.2rem;--logo-height:2.8rem}
.retailer-roster__logo--sanrio{--logo-width:7.7rem;--logo-height:2.55rem}
.retailer-roster__logo--warner{--logo-width:4.2rem;--logo-height:4.2rem}
.retailer-roster__logo--nbc{--logo-width:8.6rem;--logo-height:3.3rem}
.retailer-roster__logo--nickelodeon{--logo-width:9.35rem;--logo-height:2.45rem}
.retailer-roster__logo--nfl{--logo-width:3.4rem;--logo-height:4.05rem}
.retailer-roster__logo--nba{--logo-width:6rem;--logo-height:3.15rem}
.retailer-roster__logo--mlb{--logo-width:6.2rem;--logo-height:3.15rem}
.retailer-roster__logo--nhl{--logo-width:3.65rem;--logo-height:3.9rem}
.retailer-roster__logo--kakao{--logo-width:5.8rem;--logo-height:3.1rem}

@media(max-width:760px){
  .retailer-roster{display:block;padding:2.9rem 0 3.5rem}
  .retailer-roster__row{padding:0 clamp(1.2rem,6vw,2rem)}
  .retailer-roster__row + .retailer-roster__row{margin-top:2.7rem;padding-top:2.7rem;border-top:1px solid rgba(21,29,43,.28);border-left:0}
  .retailer-roster__title{margin-bottom:2.6rem;font-size:2rem;letter-spacing:.16em}
  .retailer-roster__scroll{padding:.55rem 0 .95rem}
  .retailer-roster__logos{gap:clamp(2.8rem,11vw,4rem);padding-right:clamp(2.8rem,11vw,4rem)}
  .retailer-roster__logo{flex-basis:clamp(8.6rem,35vw,10.25rem);min-height:4.35rem}
  .retailer-roster__logo--camp span{font-size:1.9rem}
}
@media(prefers-reduced-motion:reduce){.retailer-roster__track{animation:none}}

/* Keep the opening statement unmistakably dominant on every screen. */
.hero__title{font-size:clamp(5.25rem,8.8vw,10.75rem)!important}
@media(max-width:899px){.hero__title{font-size:clamp(4.65rem,18.5vw,6.55rem)!important}}

/* Updated Cubcoats marks: the supplied blue logo sits on light surfaces and
   its matching white asset takes over wherever the header is on a dark one. */
.head .head__mark,.head.is-hero .head__mark,.head[data-tone] .head__mark,.head.is-solid[data-tone] .head__mark,.head.menu-open[data-tone] .head__mark{display:block;position:relative;width:clamp(140px,13.75vw,198px);height:auto;aspect-ratio:2206/713;opacity:1!important;background:transparent!important;-webkit-mask:none!important;mask:none!important;filter:none!important}
.head__logo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;transition:opacity .25s ease}
.head__logo--light{opacity:1!important}.head__logo--blue,.head__logo--white{opacity:0!important}
/* The darker original blue has enough contrast on pale sections; the light
   blue mark reads cleanly over dark imagery and blue-toned panels. */
.head[data-tone="light"] .head__logo--light{opacity:0!important}.head[data-tone="light"] .head__logo--blue{opacity:1!important}
.head.is-proof .head__logo--light,.head.is-proof .head__logo--blue,.head.is-contrast-white .head__logo--light,.head.is-contrast-white .head__logo--blue{opacity:0!important}.head.is-proof .head__logo--white,.head.is-contrast-white .head__logo--white{opacity:1!important;filter:drop-shadow(0 2px 9px rgba(19,32,57,.52))}
.head.menu-open .head__logo--light{opacity:0!important}.head.menu-open .head__logo--blue{opacity:1!important}.head.menu-open .head__logo--white{opacity:0!important}

/* Footer mark follows the requested 25% scale increase. */
.foot__logo{width:clamp(130px,12.5vw,173px)}
@media(max-width:760px){.foot__logo{width:clamp(130px,41.25vw,173px)}}

/* Layer 2 preview stays deliberately compact; its click target still opens
   the existing full-size film. The play glyph is geometrically centred. */
.castfilm{width:88%;justify-self:center;align-self:center}
.castfilm__thumb{height:auto;min-height:clamp(6.2rem,8.8vw,8.35rem);aspect-ratio:1920/766}
.castfilm__play{inset:0;margin:auto;translate:none;background:rgba(125,177,231,.92);color:#fff;border:1px solid rgba(255,255,255,.72);box-shadow:0 10px 28px rgba(38,83,144,.28)}
.castfilm:hover .castfilm__play,.castfilm:focus-visible .castfilm__play{background:#99C6EE}
.castfilm__play svg{transform:none;translate:none}
/* The film uses the exact middle track of the Cub rail. Its edges therefore
   line up with the first and last visible cards—not with the outer arrows. */
.cast__film-content{display:grid;min-width:0;grid-template-columns:minmax(8rem,.58fr) minmax(0,1.42fr);gap:clamp(.7rem,1.6vw,1.2rem)}
@media(min-width:900px){
  .cast__film-row{width:100%;max-width:min(100%,88rem);display:grid;grid-template-columns:clamp(3.4rem,4.8vw,4.7rem) minmax(0,1fr) clamp(3.4rem,4.8vw,4.7rem);gap:clamp(.5rem,1.6vw,1.2rem)}
  .cast__film-content{grid-column:2}
  .castfilm{width:82%}
}
@media(max-width:899px){.cast__film-row{display:block}.cast__film-content{grid-template-columns:minmax(5.8rem,.56fr) minmax(0,1.44fr);gap:.7rem}.castfilm{width:90%}.castfilm__thumb{min-height:clamp(6rem,19vw,7.4rem)}}

/* Layer 2 now follows the hero-film language: a direct moving image and a
   light floating play glyph. The only deliberate difference is its rounded
   square silhouette, so it never reads like a white phone/device frame. */
.castfilm,.castfilm:hover,.castfilm:focus-visible{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;transform:none}
.castfilm__thumb{height:auto;min-height:0;aspect-ratio:1;border-radius:clamp(1.25rem,2.2vw,1.9rem);background:#7EAEE1;box-shadow:0 16px 36px rgba(38,83,144,.25)}
.castfilm__thumb::after{content:"";position:absolute;inset:0;border:2px solid rgba(255,255,255,.66);border-radius:inherit;box-shadow:0 0 0 0 rgba(213,237,255,.58);pointer-events:none;animation:castFilmPulse 2.6s ease-out infinite}
.castfilm__preview{object-fit:cover}
.castfilm__play,.castfilm:hover .castfilm__play,.castfilm:focus-visible .castfilm__play{width:clamp(3.4rem,5.4vw,4.7rem);background:transparent;border:0;box-shadow:none;color:#fff}
.castfilm__play svg{width:62%;height:62%;filter:drop-shadow(0 3px 9px rgba(25,48,86,.72))}
@keyframes castFilmPulse{0%{box-shadow:0 0 0 0 rgba(213,237,255,.62)}70%,100%{box-shadow:0 0 0 15px rgba(213,237,255,0)}}
@media(min-width:900px){.castfilm{width:min(78%,clamp(13rem,18vw,19.5rem));justify-self:end}}
@media(max-width:899px){.castfilm{width:min(90%,15rem)}.castfilm__thumb{min-height:0}}

/* Keep the compact film anchored to the final visible Cub (Papo) and prevent
   any older device-frame declarations from changing its square silhouette. */
@media(min-width:900px){.castfilm__thumb{height:auto!important;min-height:0!important;aspect-ratio:16/9!important}}
.castfilm__play,.castfilm:hover .castfilm__play,.castfilm:focus-visible .castfilm__play{background:transparent!important;box-shadow:none!important}

/* The film row begins at Dayo and ends exactly on Papo's right edge. A
   modestly larger square removes the unused air around the preview. */
@media(min-width:900px){
  .cast__film-row{margin-top:clamp(2.25rem,4vw,3.5rem)}
  .cast__film-content{width:min(100%,52rem);justify-self:center;grid-template-columns:minmax(10rem,.38fr) minmax(0,1.62fr);gap:clamp(1rem,2vw,1.75rem)}
  .castfilm{width:min(108%,clamp(21rem,29vw,35rem));justify-self:end}
  .cast__verbs{justify-self:end;padding-left:0}
}

/* The lower Layer 2 row has its own viewport trigger. The copy comes in
   clearly from the left; the film answers it from the right. */
.cast__film-row:not(.is-entered) .cast__verb,.cast__film-row:not(.is-entered) .castfilm{opacity:0;animation:none!important}
.cast__film-row.is-entered .cast__verb--flip{animation:castWordFromLeft .58s 0s var(--ease) both,finalFlip 4.2s .62s cubic-bezier(.22,1,.36,1) infinite!important}
.cast__film-row.is-entered .cast__verb--roll{animation:castWordFromLeft .58s .16s var(--ease) both,finalRoll 4.2s .78s ease-in-out infinite!important}
.cast__film-row.is-entered .cast__verb--unzip{animation:castWordFromLeft .58s .32s var(--ease) both,finalUnzip 4.2s .94s ease-in-out infinite!important}
.cast__film-row.is-entered .castfilm{animation:castFilmFromRight .68s 0s var(--ease) both!important}
@keyframes castWordFromLeft{
  from{opacity:0;transform:translateX(-52vw) rotate(-3deg);filter:blur(5px)}
  72%{opacity:1;transform:translateX(.14rem) rotate(.25deg);filter:blur(0)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes castFilmFromRight{
  from{opacity:0;transform:translateX(52vw) rotate(3deg) scale(.94);filter:blur(5px)}
  72%{opacity:1;transform:translateX(-.12rem) rotate(-.15deg) scale(1.01);filter:blur(0)}
  to{opacity:1;transform:none;filter:none}
}
@media(prefers-reduced-motion:reduce){
  .cast__film-row:not(.is-entered) .cast__verb,.cast__film-row:not(.is-entered) .castfilm{opacity:1}
  .cast__film-row.is-entered .cast__verb--flip,.cast__film-row.is-entered .cast__verb--roll,.cast__film-row.is-entered .cast__verb--unzip,.cast__film-row.is-entered .castfilm{animation:none!important}
}

/* A little more air between the Cub carousel and the Flip / Roll / Unzip row. */
.cast__film-row{margin-top:clamp(2rem,4vw,3.15rem)}
@media(min-width:900px){.cast__film-row{margin-top:clamp(3rem,5vw,4.25rem)}}

/* Keep the lower cast invitation on the same inner span as the four visible
   Cubs: copy begins under Kali and the full-width film finishes under Tomo. */
@media(min-width:900px){
  .cast__film-row{
    display:block;width:100%;max-width:min(100%,88rem);box-sizing:border-box;
    padding-inline:calc(clamp(3.4rem,4.8vw,4.7rem) + clamp(.5rem,1.6vw,1.2rem) + clamp(.4rem,.8vw,.75rem) + clamp(4rem,4.5vw,6rem));
  }
  .cast__film-content{width:100%;max-width:none;justify-self:start;gap:clamp(2rem,3vw,4rem)}
  .cast__verbs{justify-self:start}
  .castfilm{width:90%;max-width:none;justify-self:end}
  .castfilm__thumb{aspect-ratio:1920/766!important}
  .castfilm__preview{object-fit:contain}
}

/* Layer 3 keeps its visual centre, with less empty vertical runway. */
@media(min-width:900px){
  .proof__band{padding-block:clamp(2.6rem,5.5vh,4rem) clamp(1.65rem,3.5vh,2.5rem)}
  .proof__deck{padding-bottom:clamp(2.5rem,4.5vh,3.75rem)}
}

/* Layer 3 title enters from the section's left edge. */
.proof__band .h2.reveal{transform:translateX(-5rem);transition:opacity .72s var(--ease),transform .72s var(--ease)}
.proof__band .h2.reveal.in{transform:translateX(0)}
@media(max-width:899px){.proof__band .h2.reveal{transform:translateX(-2.5rem)}}

/* A compact desktop proof layer: enough room for the metrics, without the
   previous near-full-screen empty space. */
@media(min-width:900px){.proof{min-height:clamp(32.34rem,69.3svh,44.352rem)}}

/* Previous Partners is a single editorial column: title first, then four
   wider, non-interactive moving previews. */
.partners__copy > p:last-child{display:none}
.retailer-film__shade,.retailer-film__play{display:none!important}
.retailer-film{cursor:default}
@media(min-width:900px){
  .partners__inner{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:clamp(2.4rem,4.6vh,4rem)}
  .partners__copy{width:min(100%,65rem);justify-self:center;text-align:center}
  .partners__copy .h2{font-size:clamp(3rem,5.1vw,5rem)}
  /* 65rem is roughly 20% wider than the former right-column film grid. */
  .retailer-films{width:min(100%,65rem);justify-self:center}
}

/* Island gets a compact floating invitation instead of a heavy edge bar. */
.discover-cue{
  top:50%;right:clamp(1rem,3.2vw,3.5rem);bottom:auto;width:auto;min-width:0;height:auto;
  translate:0 -50%;display:flex;align-items:center;justify-content:center;gap:.8rem;padding:.68rem .78rem .68rem 1.2rem;
  border:1px solid rgba(255,255,255,.7);border-radius:999px;background:rgba(246,252,255,.82);color:#29476f;
  box-shadow:0 16px 34px rgba(20,48,91,.24),inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
}
.discover-cue__txt{display:block;color:#29476f;font-size:clamp(1rem,1.35vw,1.22rem);line-height:1;white-space:nowrap}
.discover-cue__hl{color:#29476f!important;background:none!important;-webkit-text-fill-color:currentColor!important;animation:none!important}
.discover-cue__arrow{display:grid;place-items:center;width:2.8rem;aspect-ratio:1;border-radius:999px;background:#5C88DA;color:#fff;box-shadow:0 7px 15px rgba(46,91,161,.28)}
.discover-cue__arrow svg{width:52%;height:auto;stroke:currentColor!important}.discover-cue__arrow svg path{animation:nudge 1.8s ease-in-out infinite}
.discover-cue:hover,.discover-cue:focus-visible{translate:0 -50%;transform:none;background:rgba(255,255,255,.94);box-shadow:0 18px 38px rgba(20,48,91,.28),inset 0 1px 0 rgba(255,255,255,.9)}
.discover-cue:hover .discover-cue__arrow,.discover-cue:focus-visible .discover-cue__arrow{animation:discoverArrowTap .56s var(--ease)}
@media(max-width:899px){
  .discover-cue{top:auto;right:1rem;bottom:1rem;translate:0;padding:.72rem .8rem .72rem 1.05rem}
  .discover-cue:hover,.discover-cue:focus-visible{translate:0;transform:none}
}

/* Island zipper: keep the invitation high in the scene and make opening the
   seam feel like a physical action before the Cast screen takes over. */
.dstage--zip .dzip__copy{
  inset:auto;
  top:0;
  left:clamp(6rem,10vw,11.5rem);
  right:auto;
  width:min(48vw,44rem);
  max-width:none;
  display:block;
  transform:none;
  padding-top:clamp(5.5rem,11svh,9.5rem);
}
.dstage--zip .dzip__copy-in{width:100%;margin-left:0}
.dstage--zip .zip__hint{display:none!important}

.dstage--zip .zip{overflow:visible;isolation:isolate}
.dstage--zip .zip::before{
  top:calc(var(--zip, 0) * 100%);
  bottom:0;
  height:auto;
  background:
    repeating-linear-gradient(180deg,
      #f7f9fd 0 6px,#9baac1 6px 11px,#e3eaf4 11px 17px);
  box-shadow:0 0 0 2px rgba(26,42,74,.38),0 0 20px rgba(5,15,34,.44);
  transition:top .04s linear;
}
.dstage--zip .zip::after{
  top:calc(var(--zip, 0) * 100% - .3rem);
  height:clamp(2.8rem,4.5vw,4.6rem);
  border-radius:999px;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.95),rgba(213,229,249,.5) 32%,rgba(78,111,164,.04) 70%);
  mix-blend-mode:normal;
  opacity:calc(.46 + var(--zip, 0) * .54);
  filter:blur(1px);
}
.dstage--zip .zip__teeth{
  display:block;
  left:50%;
  right:auto;
  top:calc(var(--zip, 0) * 100% - .34rem);
  bottom:auto;
  width:clamp(1.65rem,2.4vw,2.25rem);
  height:clamp(1.1rem,1.8vw,1.65rem);
  translate:-50% 0;
  border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#f9fbff 0 13%,#9aaac2 14% 27%,#435979 28% 43%,#dfe8f4 44% 57%,#71829d 58% 69%,transparent 70%);
  box-shadow:0 .65rem 1rem rgba(11,25,50,.32),0 0 0 2px rgba(236,242,251,.72);
  opacity:calc(.94 - var(--zip, 0) * .38);
  pointer-events:none;
  transition:top .04s linear;
}
.dstage--zip .zip__pull{
  box-shadow:0 12px 20px rgba(8,19,43,.36),0 0 0 .3rem rgba(239,246,255,.2);
  transition:filter .2s ease,transform .16s ease;
}
.dstage--zip .zip.is-dragging .zip__pull{transform:scale(1.05) rotate(-2deg)}
.dstage--zip .zip.is-unzipping .zip__pull{animation:zipPullRattle .12s linear 5}
.discover.is-unzipping .dzip__landscape{animation:zipSceneRelease .62s cubic-bezier(.22,1,.36,1) both}
.discover.is-unzipping .dzip__cubs{animation:zipCubsRelease .62s .05s cubic-bezier(.22,1,.36,1) both}
.discover.is-unzipping .dzip__title{animation:zipCopyRelease .45s ease-out both}
@keyframes zipPullRattle{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-.18rem) rotate(-2deg)}75%{transform:translateX(.18rem) rotate(2deg)}}
@keyframes zipSceneRelease{0%{filter:brightness(1);transform:scale(1)}45%{filter:brightness(1.08);transform:scale(1.015)}100%{filter:brightness(1.02);transform:scale(1.04)}}
@keyframes zipCubsRelease{from{transform:translateX(0) scale(1)}to{transform:translateX(2.5rem) scale(1.03)}}
@keyframes zipCopyRelease{to{opacity:0;transform:translateX(-1.25rem);filter:blur(3px)}}
@media(max-width:899px){
  .dstage--zip .dzip__copy{
    left:var(--pad);
    right:5.25rem;
    width:auto;
    padding-top:calc(4.75rem + env(safe-area-inset-top, 0px));
  }
}
@media(prefers-reduced-motion:reduce){
  .dstage--zip .zip.is-unzipping .zip__pull,.discover.is-unzipping .dzip__landscape,.discover.is-unzipping .dzip__cubs,.discover.is-unzipping .dzip__title{animation:none}
}

/* The zipper opens as two fabric tapes parting behind the slider. The closed
   teeth remain below it, so progress visibly travels down the seam. */
.dstage--zip .zip{--zip-open:calc(var(--zip, 0) * 100%)}
.dstage--zip .zip::before{
  top:var(--zip-open);
  background:repeating-linear-gradient(180deg,#f8fbff 0 5px,#8d9db7 5px 10px,#dfe8f4 10px 15px);
}
.dstage--zip .zip::after{top:calc(var(--zip-open) - .45rem)}
.dstage--zip .zip__tape{
  position:absolute;
  z-index:1;
  top:0;
  width:clamp(.62rem,1.05vw,.95rem);
  height:var(--zip-open);
  overflow:hidden;
  opacity:calc(var(--zip, 0) * .96);
  background:repeating-linear-gradient(180deg,#8fa1bd 0 14px,#dce6f2 14px 19px,#7487a5 19px 30px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.56),0 6px 10px rgba(10,25,51,.25);
  transition:height .04s linear,transform .04s linear,opacity .12s linear;
  pointer-events:none;
}
.dstage--zip .zip__tape--left{
  left:calc(50% - .45rem);
  transform:translateX(calc(-1rem - var(--zip, 0) * 1.6rem)) skewY(-1.8deg);
  transform-origin:top right;
}
.dstage--zip .zip__tape--right{
  right:calc(50% - .45rem);
  transform:translateX(calc(1rem + var(--zip, 0) * 1.6rem)) skewY(1.8deg);
  transform-origin:top left;
}
.dstage--zip .zip__teeth{
  z-index:4;
  width:clamp(1.9rem,2.7vw,2.5rem);
  height:clamp(1.35rem,2vw,1.8rem);
  background:radial-gradient(circle at 50% 38%,#fff 0 12%,#adbdd1 13% 24%,#354d73 25% 40%,#edf4fc 41% 56%,#7186a7 57% 68%,transparent 69%);
  box-shadow:0 .72rem 1.15rem rgba(11,25,50,.34),0 0 0 2px rgba(247,251,255,.86);
}
.dstage--zip .zip.is-unzipping .zip__tape--left{transform:translateX(-3.15rem) skewY(-3deg)}
.dstage--zip .zip.is-unzipping .zip__tape--right{transform:translateX(3.15rem) skewY(3deg)}
@media(max-width:899px){
  .dstage--zip .zip.is-unzipping .zip__tape--left{transform:translateX(-2.3rem) skewY(-3deg)}
  .dstage--zip .zip.is-unzipping .zip__tape--right{transform:translateX(2.3rem) skewY(3deg)}
}

/* Island invitation is attached to the edge, then slips into view as the
   section arrives—without changing its restored visual treatment. */
.island .discover-cue{
  right:0;
  border-radius:1.15rem 0 0 1.15rem;
  opacity:0;
  pointer-events:none;
  transform:translateX(calc(100% + .65rem));
  transition:transform .68s var(--ease-rail),opacity .36s ease,background .25s ease,box-shadow .25s ease;
}
.island.is-cue-ready .discover-cue{
  opacity:1;
  pointer-events:auto;
  transform:translateX(0);
}
.island.is-cue-ready .discover-cue:hover,.island.is-cue-ready .discover-cue:focus-visible{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){
  .island .discover-cue{transform:none;transition:none}
}

/* Pair each Cub's animated sticker with their name, rather than letting it
   float independently over the portrait. */
.dprofile__name-row{
  display:flex;
  align-items:center;
  gap:clamp(.7rem,1.35vw,1.2rem);
  margin-top:1.1rem;
}
.dprofile__name-row .dprofile__name{margin-top:0;min-width:0}
.dprofile__name-row .dprofile__gif{
  position:relative;
  left:auto;
  bottom:auto;
  flex:0 0 auto;
  width:clamp(4.25rem,6vw,6.5rem);
}
@media(max-width:900px){
  .dprofile__name-row{align-items:flex-start;gap:.65rem}
  .dprofile__name-row .dprofile__gif{width:clamp(3.15rem,15vw,4.6rem);margin-top:.05rem}
}

/* Coming Soon arrives as a small two-sided reveal: the title leads from the
   left and the two locally-playing films answer from opposite edges. */
.adult__line.reveal{
  transform:translateX(-8vw);
  transition:opacity .78s var(--ease),transform .78s var(--ease);
}
.adult__line.reveal.in{transform:translateX(0)}
.adult__grid .beatcard.reveal{
  transition:opacity .82s var(--ease),transform .82s var(--ease);
}
.adult__grid .beatcard.reveal:nth-child(1){transform:translateX(-10vw)}
.adult__grid .beatcard.reveal:nth-child(2){transform:translateX(10vw)}
.adult__grid .beatcard.reveal.in{transform:translateX(0)}
@media(max-width:899px){
  .adult__line.reveal{transform:translateX(-2.5rem)}
  .adult__grid .beatcard.reveal:nth-child(1){transform:translateX(-2.5rem)}
  .adult__grid .beatcard.reveal:nth-child(2){transform:translateX(2.5rem)}
}

/* The map now speaks with one clear title at its top; each location is marked
   only by a Cub sticker, with no competing country-flag badges or lower copy. */
.wild__global-title{
  position:absolute;
  z-index:5;
  top:clamp(1.2rem,2.8vw,2.6rem);
  left:50%;
  width:min(calc(100% - 2rem),58rem);
  transform:translateX(-50%);
  pointer-events:none;
  text-align:center;
}
.wild__global-title .h2{
  margin:0;
  color:#151515;
  font-size:clamp(1.45rem,3.45vw,3.45rem);
  line-height:.96;
  text-shadow:0 2px 0 rgba(255,255,255,.8),0 12px 28px rgba(68,105,159,.16);
}
.wild__global-title.reveal{transform:translate(calc(-50% - 4rem),0)}
.wild__global-title.reveal.in{transform:translate(-50%,0)}
.mapspot{display:block;translate:-50% -50%}
.mapspot--feet{translate:-50% -100%}
.mapspot__sticker{width:clamp(2.35rem,4.2vw,4.85rem)}
/* Reserve a deliberate title area above the map instead of leaving spare
   whitespace after the section. */
.wild{padding-bottom:0}
.wild__map{padding-top:clamp(5.75rem,9vw,9.25rem)}
@media(max-width:760px){
  .wild__global-title{top:clamp(.8rem,3vw,1.2rem);width:calc(100% - 1.25rem)}
  .wild__global-title .h2{font-size:clamp(1.28rem,5.7vw,2rem)}
  .mapspot__sticker{width:clamp(1.75rem,8.2vw,2.95rem)}
  .wild__map{padding-top:clamp(4.55rem,18vw,6rem)}
}

/* ============================================================
   Contact — two clear paths, with a calm reading surface over the photo.
   This sits at the end of the stylesheet intentionally: the panel has had
   several one-off visual treatments, while these rules are its single source
   of truth going forward.
   ============================================================ */
.contact{
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.contact__bg,.contact__scrim{position:fixed;inset:0}
.contact__bg{width:100%;height:100%;object-fit:cover}
.contact__inner{
  width:min(100%,82rem);
  max-width:none;
  min-height:100svh;
  height:auto;
  overflow:visible;
  margin-inline:auto;
  padding:clamp(5.5rem,8vh,7rem) var(--pad) clamp(2rem,5vh,4rem);
  padding-left:max(calc(var(--edge-w) + var(--pad)),var(--pad));
  justify-content:center;
}
.contact__forms{
  display:grid;
  grid-template-columns:minmax(0,1.22fr) minmax(18rem,.78fr);
  align-items:start;
  gap:clamp(1rem,2vw,1.65rem);
  width:100%;
}
.contact-card{
  min-width:0;
  padding:clamp(1.25rem,2.4vw,2rem);
  border:1px solid rgba(255,255,255,.38);
  border-radius:clamp(1.35rem,2.4vw,2rem);
  background:linear-gradient(145deg,rgba(28,43,73,.82),rgba(23,34,57,.66));
  box-shadow:0 24px 60px rgba(9,16,31,.28);
  backdrop-filter:blur(20px) saturate(130%);
  -webkit-backdrop-filter:blur(20px) saturate(130%);
}
.contact-card--mommies{
  background:linear-gradient(145deg,rgba(43,62,96,.82),rgba(39,49,77,.72));
}
.contact-card__head{padding-bottom:1.15rem;border-bottom:1px solid rgba(255,255,255,.18)}
.contact-card__eyebrow{
  margin:0 0 .55rem;color:#BDE1FF;font-size:.64rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}
.contact-card__head h2{
  margin:0;font-family:var(--font-cartoon);font-size:clamp(2rem,3.4vw,3.15rem);
  line-height:.96;letter-spacing:-.025em;color:#fff;text-wrap:balance;
  text-shadow:0 3px 18px rgba(12,19,35,.24);
}
.contact-card__head p:last-child{
  margin:.6rem 0 0;max-width:42ch;color:rgba(255,255,255,.82);
  font-size:clamp(.87rem,1.1vw,1rem);line-height:1.48;
}
.contact__form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.88rem;
  margin:1.2rem 0 0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.contact__form--mommies{grid-template-columns:1fr}
.contact-field{min-width:0;gap:.42rem}
.contact-field--full{grid-column:1/-1}
.contact__form .fld__lbl{
  display:flex;align-items:baseline;gap:.25rem;color:rgba(255,255,255,.92);
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.contact__form .fld__lbl > span[aria-hidden="true"]{color:#FFB89A;font-size:.9rem;line-height:1}
.contact-field__optional{
  margin-left:auto;color:rgba(255,255,255,.55);font-size:.57rem;font-weight:600;
  letter-spacing:.08em;text-transform:none;
}
.contact__form input,.contact__form textarea,.contact__form select{
  width:100%;min-height:3.15rem;padding:.8rem .95rem;border:1px solid rgba(220,235,255,.72);
  border-radius:.84rem;background:rgba(250,253,255,.97);color:#27354F;
  font-family:var(--font-body);font-size:.95rem;line-height:1.35;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 2px 0 rgba(10,21,41,.07);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.contact__form textarea{min-height:7.25rem;resize:vertical}
.contact__form select{
  appearance:auto;padding-right:.95rem;
  background:#FAFDFF;
}
.contact__form input::placeholder,.contact__form textarea::placeholder{color:#75829A;opacity:1}
.contact__form input:focus,.contact__form textarea:focus,.contact__form select:focus{
  outline:0;background:#fff;color:#1E2C45;border-color:#99C6EE;
  box-shadow:0 0 0 3px rgba(153,198,238,.42),0 8px 20px rgba(9,23,50,.14);
}
.contact__form input[aria-invalid="true"],.contact__form textarea[aria-invalid="true"],.contact__form select[aria-invalid="true"]{
  border-color:#FFB89A;box-shadow:0 0 0 3px rgba(255,184,154,.3);
}
.contact__form input:-webkit-autofill,.contact__form textarea:-webkit-autofill{
  -webkit-text-fill-color:#27354F;box-shadow:0 0 0 1000px #FAFDFF inset;
}
.contact__actions{
  display:flex;align-items:center;gap:.8rem;min-height:3.15rem;
}
.contact__submit{
  flex:0 0 auto;min-height:3.15rem;padding:.85rem 1.25rem;background:#99C6EE;color:#243452;
  box-shadow:0 10px 24px rgba(8,20,44,.2);
}
.contact__submit:hover{background:#fff;color:#244E86;box-shadow:0 14px 30px rgba(8,20,44,.27)}
.contact__form .formmsg{
  min-height:0;margin:0;color:#fff;font-size:.76rem;line-height:1.4;text-shadow:none;
}
.contact__foot{width:100%;margin-top:1.25rem;padding-top:1.1rem}

@media(max-width:980px){
  .contact__forms{grid-template-columns:1fr;max-width:44rem}
  .contact__inner{width:min(100%,48rem);margin-inline:auto}
}
@media(max-width:760px){
  .contact__bg,.contact__scrim{position:absolute}
  .contact__inner{
    display:block;width:100%;min-height:100svh;padding:calc(56px + 1.35rem) var(--pad) 5rem;
  }
  .contact__forms{gap:1rem;max-width:none}
  .contact-card{padding:1.15rem;border-radius:1.25rem}
  .contact-card__head h2{font-size:clamp(2rem,10.5vw,2.65rem)}
  .contact__form{grid-template-columns:1fr;gap:.78rem}
  .contact-field--full{grid-column:auto}
  .contact__form textarea{min-height:6.8rem}
  .contact__actions{align-items:flex-start;flex-direction:column;gap:.55rem}
  .contact__form .formmsg{min-height:1.2em}
  .contact__foot{justify-content:center;margin-top:1rem;padding-top:1rem}
}

/* Contact refinement: the photo is the hero; the forms are compact glass
   surfaces rather than two large opaque blocks. */
.contact{background:#D6C0AF}
.contact::after{display:none!important}
.contact__bg{
  width:100vw;max-width:none;min-width:100vw;
  object-position:center center;
}
@media(min-width:761px){.contact__bg{transform:translateX(5%)}}
.contact__scrim{
  background:linear-gradient(90deg,rgba(24,37,61,.19) 0%,rgba(24,37,61,.05) 42%,rgba(24,37,61,.1) 100%);
}
.contact__inner{
  width:min(100%,74rem);
  padding-top:clamp(4.4rem,6vh,5.8rem);
  padding-bottom:clamp(1.5rem,3.5vh,3rem);
}
.contact__forms{
  grid-template-columns:minmax(0,1.15fr) minmax(18rem,.85fr);
  max-width:69rem;
  margin-inline:auto;
  gap:clamp(.8rem,1.5vw,1.2rem);
}
.contact-card{
  padding:clamp(1rem,1.8vw,1.35rem);
  border-color:rgba(255,255,255,.34);
  border-radius:1.5rem;
  background:linear-gradient(145deg,rgba(29,44,74,.55),rgba(23,33,57,.44));
  box-shadow:0 18px 42px rgba(9,16,31,.19);
  backdrop-filter:blur(11px) saturate(125%);
  -webkit-backdrop-filter:blur(11px) saturate(125%);
}
.contact-card--mommies{background:linear-gradient(145deg,rgba(42,59,93,.52),rgba(35,45,72,.42))}
.contact-card__head{padding-bottom:.82rem}
.contact-card__head h2{font-size:clamp(1.75rem,2.65vw,2.45rem);line-height:1.02}
.contact-card__head p:last-child{margin-top:.38rem;font-size:clamp(.8rem,1vw,.92rem);line-height:1.42}
.contact__form{margin-top:.9rem;gap:.66rem}
.contact__form--partners{grid-template-columns:repeat(3,minmax(0,1fr))}
.contact__form--partners #cFrom{grid-column:auto}
.contact__form--mommies{grid-template-columns:repeat(2,minmax(0,1fr))}
.contact__form--partners #cFrom{min-width:0}
.contact__form input,.contact__form textarea,.contact__form select{min-height:2.7rem;padding:.65rem .78rem;border-radius:.72rem;font-size:.89rem}
.contact__form textarea{min-height:5.2rem}
.contact__form--partners .contact-field:nth-child(5){grid-column:span 2}
.contact__form--mommies .contact-field--full{grid-column:1/-1}
.contact__actions{min-height:2.7rem}
.contact__submit{min-height:2.7rem;padding:.72rem 1.05rem;font-size:.61rem}
.contact__foot{margin-top:.85rem;padding-top:.8rem}

@media(max-width:980px){
  .contact__inner{width:min(100%,48rem)}
  .contact__forms{grid-template-columns:1fr;max-width:42rem}
}
@media(max-width:760px){
  .contact__bg{width:100%;min-width:100%;max-width:none;object-position:50% 40%}
  .contact__scrim{background:linear-gradient(180deg,rgba(24,37,61,.08),rgba(24,37,61,.32))}
  .contact__form--partners,.contact__form--mommies{grid-template-columns:1fr}
  .contact__form--partners .contact-field:nth-child(5){grid-column:auto}
  .contact-card__head h2{font-size:clamp(1.95rem,10vw,2.5rem)}
}

/* One focused form at a time keeps the contact journey light and lets the
   children remain the visual focus above it. */
.contact__inner{justify-content:flex-end}
.contact__forms{
  grid-template-columns:1fr;
  width:min(100%,57rem);
  max-width:57rem;
  margin:0 auto;
  gap:.65rem;
}
.contact-switch{
  display:inline-flex;justify-self:center;align-items:center;gap:.25rem;
  padding:.28rem;border:1px solid rgba(255,255,255,.38);border-radius:999px;
  background:rgba(23,35,60,.45);box-shadow:0 10px 24px rgba(12,20,37,.16);
  backdrop-filter:blur(12px) saturate(130%);-webkit-backdrop-filter:blur(12px) saturate(130%);
}
.contact-switch__option{
  min-height:2.4rem;padding:.45rem 1rem;border-radius:999px;color:rgba(255,255,255,.78);
  font-family:var(--font-body);font-size:.64rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.contact-switch__option:hover,.contact-switch__option:focus-visible{outline:0;color:#fff}
.contact-switch__option.is-active{
  color:#233552;background:#F8FCFF;box-shadow:0 4px 14px rgba(9,18,35,.2);
}
.contact__forms .contact-card{width:100%}
.contact__foot{margin-top:.65rem}

/* Keep scrolling available without reserving a tinted scrollbar gutter at the
   right edge of the artwork. */
.contact{scrollbar-gutter:auto;scrollbar-width:none}
.contact::-webkit-scrollbar{width:0;height:0}
.contact__scrim{background:linear-gradient(90deg,rgba(24,37,61,.1) 0%,rgba(24,37,61,.02) 42%,rgba(24,37,61,.05) 100%)}

@media(max-width:760px){
  .contact__inner{display:flex;flex-direction:column;justify-content:flex-end;min-height:100svh}
  .contact__forms{width:100%;max-width:none;margin-top:auto}
  .contact-switch{align-self:stretch;justify-content:stretch}
  .contact-switch__option{flex:1;padding-inline:.45rem;font-size:.57rem}
  .contact__scrim{background:linear-gradient(180deg,rgba(24,37,61,.04),rgba(24,37,61,.18))}
}

/* Mobile Layer 1: the moving photo wall is deliberately overscanned, so no
   underlying blue field can peek through on tall or narrow phone viewports.
   The title keeps its established display scale; a touch of tighter tracking
   creates a clean visual safety gutter rather than letting letters kiss edges. */
@media(max-width:899px){
  .hero{
    min-height:94svh;
    padding-top:calc(5.55rem + env(safe-area-inset-top,0px));
    padding-bottom:calc(2.35rem + env(safe-area-inset-bottom,0px));
    background:#203457 url("../img/collage/c11.webp") center/cover no-repeat;
  }
  .hero .collage{
    inset:-18% -24%;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:3px;
    transform:rotate(-1.5deg) scale(1.17);
  }
  .hero__inner{width:min(100%,36rem);padding-inline:clamp(.8rem,4vw,1.25rem)}
  .hero__title{letter-spacing:-.055em}

  /* Same quiet transparent glass treatment as desktop, instead of a blank
     mobile header. It retains contrast over the animated photography. */
  .head.is-hero:not(.is-solid){
    background:rgba(22,37,68,.22)!important;
    backdrop-filter:blur(16px) saturate(145%)!important;
    -webkit-backdrop-filter:blur(16px) saturate(145%)!important;
    box-shadow:0 1px 0 rgba(255,255,255,.17),0 10px 28px rgba(20,30,54,.12)!important;
  }
}

/* ============================================================
   PHONE-FIRST FINISH
   Layer controls are compact bottom actions on phones. This deliberately
   comes last: previous desktop rail treatments must not take phone width.
   ============================================================ */

/* The site footer deliberately keeps its approved left-logo / right-email
   layout. The centred lock-up belongs inside the Get in Touch panel below. */
.contact__foot{
  justify-content:center;
  margin-inline:auto;
  text-align:center;
}
.contact__foot img{display:block;width:clamp(116px,12vw,154px);height:auto;opacity:1}
.contact__foot span{color:#243452;font-weight:650;letter-spacing:.035em}
@media(max-width:760px){
  .contact__foot{gap:.68rem}
  .contact__foot img{display:block!important;width:clamp(108px,34vw,138px)}
  .contact__foot span{font-size:clamp(.72rem,3.2vw,.88rem)}
}

@media(max-width:899px){
  /* Prevent page-width overflow without turning the document into a second
     scroll container; vertical phone scrolling stays native and smooth. */
  html,body{overflow-x:clip}
  #shell,#stage{width:100%;max-width:100%;overflow-x:clip}

  /* Preserve the hero's deliberately large type while adding a real visual
     gutter on the narrowest screens. */
  .hero__copy{width:100%;padding-inline:clamp(.55rem,2.5vw,1rem)}
  .hero__title{
    max-width:calc(100vw - clamp(2rem,9vw,3rem));
    margin-inline:auto;
    font-size:clamp(4rem,16vw,5.65rem)!important;
  }
  /* Do not leave the header brand visible behind the mobile side sheet. */
  .head.menu-open .head__brand{opacity:0;visibility:hidden;pointer-events:none}
  .head.menu-open .burger{
    position:relative;z-index:111;display:grid;place-items:center;
    width:2.85rem;height:2.85rem;padding:0;border-radius:50%;
    background:rgba(255,255,255,.9);box-shadow:0 8px 20px rgba(17,31,57,.18);
  }
  .head.menu-open .burger span{background:#2D3C5A!important}

  /* Layer 3: concise app-style cards instead of a narrow vertical stack. */
  .proof{display:block;min-height:0;padding:0 0 calc(4.85rem + clamp(2.7rem,9vw,3.6rem) + env(safe-area-inset-bottom,0px))}
  .proof__band{padding:clamp(2.7rem,9vw,3.6rem) var(--pad) 1.25rem}
  .proof__band .wrap{width:100%;max-width:27rem;margin-inline:auto}
  .proof__band .h2{
    max-width:12ch;white-space:normal;font-size:clamp(2rem,9.2vw,3.1rem);
    line-height:.94;text-wrap:balance;
  }
  .proof__deck{padding:0 var(--pad)}
  .proof .stats{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:.72rem;
    width:100%;max-width:32rem;margin:0 auto;padding:0 6px 6px 0;
  }
  .proof .stat{
    max-width:none;min-height:8.7rem;aspect-ratio:auto;padding:.82rem .45rem;
    border-radius:1.2rem;align-content:center;justify-items:center;text-align:center;
  }
  .proof .stat::after{transform:translateY(var(--stat-depth))}
  .proof .stat__num{font-size:clamp(2.35rem,10.4vw,3.35rem);line-height:.88}
  .proof .stat__lbl{font-size:clamp(.7rem,2.9vw,.85rem);line-height:1.15}
  #partnersOpen.partner-edge{
    top:auto;right:50%;bottom:calc(clamp(2.7rem,9vw,3.6rem) + env(safe-area-inset-bottom,0px));
    width:auto;min-width:0;height:3.25rem;min-height:3.25rem;padding:.58rem .88rem .58rem 1.05rem;
    transform:translateX(50%);flex-direction:row;justify-content:center;gap:.68rem;
    border:1px solid rgba(255,255,255,.55);border-radius:999px;
    background:rgba(40,83,153,.92);box-shadow:0 9px 24px rgba(24,51,98,.27);
    backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);
  }
  #partnersOpen.partner-edge::before{display:none}
  #partnersOpen.partner-edge:hover,#partnersOpen.partner-edge:focus-visible{transform:translateX(50%) translateY(-.14rem);background:#5C88DA}
  #partnersOpen.partner-edge .partner-edge__label{display:block;writing-mode:horizontal-tb;font-size:.74rem;letter-spacing:.075em}
  #partnersOpen.partner-edge svg{width:1.5rem;height:1.5rem;padding:0;border:0;background:transparent}

  /* Previous Partners takes the whole phone canvas without an obstructive rail. */
  .partners{overflow:hidden}
  .partners__inner{
    height:100svh;min-height:100svh;align-content:start;gap:1.25rem;
    padding:calc(5.25rem + env(safe-area-inset-top,0px)) var(--pad) calc(5.7rem + env(safe-area-inset-bottom,0px));
  }
  .partners__copy{text-align:center}
  .partners__copy .h2{font-size:clamp(2.45rem,12vw,3.45rem);line-height:.9}
  .retailer-films{width:min(100%,25rem);gap:.58rem}
  #partnersClose.partner-edge{
    top:auto;right:auto;bottom:calc(.7rem + env(safe-area-inset-bottom,0px));left:50%;
    width:auto;min-width:0;height:3rem;min-height:3rem;padding:.52rem .95rem;
    transform:translateX(-50%);flex-direction:row;justify-content:center;gap:.55rem;
    border:1px solid rgba(45,60,90,.15);border-radius:999px;
    background:rgba(255,255,255,.88);color:#29476f;box-shadow:0 8px 22px rgba(34,65,106,.16);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  }
  #partnersClose.partner-edge:hover,#partnersClose.partner-edge:focus-visible{transform:translateX(-50%) translateY(-.12rem);background:#fff;color:#2F61A8}
  #partnersClose.partner-edge .partner-edge__label{display:block;writing-mode:horizontal-tb;font-size:.68rem;letter-spacing:.08em}
  #partnersClose.partner-edge svg{width:1.3rem;height:1.3rem;padding:0;border:0;background:transparent}

  /* Island is a true full-screen scene rather than a partial viewport card. */
  .island{
    height:100svh;min-height:100svh;isolation:isolate;
    background:#BEE3EF url("../img/art/island.webp") center/cover no-repeat;
  }
  .island::before{
    content:"";position:absolute;inset:-1.5rem;z-index:-1;
    background:inherit;filter:blur(18px) saturate(1.05);transform:scale(1.06);opacity:.42;
  }
  .island__art{
    width:100%;height:100%;object-fit:contain;object-position:center center;
  }

  /* Keep Coming Soon films centred with deliberate phone gutters. */
  .adult{padding-inline:0}
  .adult > .wrap{width:min(calc(100% - 2rem),34rem);margin-inline:auto}
  .adult__grid{width:100%;gap:1rem}
  .adult__grid .beatcard.reveal{opacity:0;will-change:transform,opacity}
  .adult__grid .beatcard.reveal:nth-child(1){transform:translateX(-2.65rem)}
  .adult__grid .beatcard.reveal:nth-child(2){transform:translateX(2.65rem)}
  .adult__grid .beatcard.reveal.in{opacity:1;transform:translateX(0)}

  /* Keep the important mobile contact action visible and reachable. */
  body:not(.contact-open) #edgeOpen.edge{
    transform:translateY(0)!important;opacity:1!important;pointer-events:auto!important;
  }
  #edgeOpen.edge{
    z-index:150;min-height:3.85rem;color:#fff;
    background:linear-gradient(90deg,#273B67,#355A9A);
  }
  #edgeOpen.edge .edge__label,#edgeOpen.edge .edge__arrow,#edgeOpen.edge .edge__arrow svg{
    color:#fff!important;stroke:#fff!important;
  }
  body.discover-open #edgeOpen.edge,
  body.partners-open #edgeOpen.edge{
    transform:translateY(120%)!important;opacity:0!important;pointer-events:none!important;
  }
}

/* ── Final mobile sheet + slider polish ──────────────────────
   This is deliberately last: it replaces the leftover side-sheet and
   full-height rail rules above with one consistent, app-like mobile system. */
@media(max-width:899px){
  /* Navigation is a self-contained screen, never a translucent side drawer
     that leaves the underlying hero and CTA visible. */
  body.menu-open #edgeOpen.edge{
    transform:translateY(120%)!important;opacity:0!important;pointer-events:none!important;
  }
  .drawer{
    inset:0!important;width:100%!important;height:100svh!important;
    display:flex!important;flex-direction:column;justify-content:center;gap:.7rem;overflow:auto;
    padding:calc(1rem + env(safe-area-inset-top,0px)) var(--pad) calc(1.35rem + env(safe-area-inset-bottom,0px))!important;
    border:0!important;border-radius:0!important;
    background:#F8FBFF!important;
    box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    transform:translateX(102%)!important;transition:transform .42s var(--ease)!important;
    overscroll-behavior:contain;
  }
  .drawer.is-open{transform:translateX(0)!important}
  .drawer__brand{
    position:absolute;top:calc(.85rem + env(safe-area-inset-top,0px));left:var(--pad);
    display:flex;align-items:center;width:max-content;height:3.2rem;margin:0;text-decoration:none;
  }
  .drawer__brand img{display:block;width:clamp(9.4rem,45vw,12rem);height:auto}
  .drawer__link{
    flex:0 0 auto;min-height:4.25rem;padding:.82rem 1rem!important;border:1px solid rgba(255,255,255,.86)!important;
    border-radius:1.05rem!important;background:rgba(255,255,255,.62)!important;
    box-shadow:0 8px 22px rgba(52,83,135,.07),inset 0 1px 0 rgba(255,255,255,.92)!important;
    color:#2D3C5A!important;font-size:clamp(1.35rem,6.8vw,1.8rem)!important;line-height:1.05;
  }
  .drawer__link:hover,.drawer__link:focus-visible{transform:none!important;background:rgba(226,240,253,.94)!important;color:#2D3C5A!important;box-shadow:0 8px 22px rgba(52,83,135,.07),inset 0 1px 0 rgba(255,255,255,.92)!important}
  .head.menu-open{z-index:112!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  .head.menu-open .head__brand{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
  .head.menu-open .burger{
    position:fixed!important;z-index:120!important;top:calc(.85rem + env(safe-area-inset-top,0px));right:var(--pad);
    display:grid!important;place-items:center!important;gap:0!important;width:3.2rem!important;height:3.2rem!important;
    padding:0!important;border-radius:50%!important;background:rgba(255,255,255,.96)!important;
    box-shadow:0 10px 26px rgba(33,58,101,.18)!important;
  }
  .head.menu-open .burger span{position:absolute!important;width:1.32rem!important;height:2px!important;background:#2D3C5A!important}
  .head.menu-open .burger span:first-child{transform:rotate(45deg)!important}
  .head.menu-open .burger span:last-child{transform:rotate(-45deg)!important}

  /* Every slide-over page (apart from the unzip stage) centres its content
     and uses the same wide, frosted return bar. */
  .partners__inner{
    height:100svh!important;min-height:100svh!important;display:grid!important;
    grid-template-columns:1fr!important;grid-template-rows:auto auto!important;
    align-content:center!important;justify-items:center!important;gap:1.35rem!important;
    padding:calc(1.4rem + env(safe-area-inset-top,0px)) var(--pad) calc(5.8rem + env(safe-area-inset-bottom,0px))!important;
  }
  .partners__copy,.retailer-films{justify-self:center!important;text-align:center!important}
  .retailer-films{width:min(100%,25rem)!important}
  #partnersClose.partner-edge,
  .discover__back{
    position:absolute!important;z-index:90!important;top:auto!important;right:var(--pad)!important;bottom:calc(.72rem + env(safe-area-inset-bottom,0px))!important;left:var(--pad)!important;
    display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:.6rem!important;
    width:auto!important;min-width:0!important;height:3.45rem!important;min-height:3.45rem!important;padding:.65rem 1rem!important;
    transform:none!important;translate:0!important;border:1px solid rgba(255,255,255,.68)!important;border-radius:1.1rem!important;
    background:rgba(38,76,137,.42)!important;color:#fff!important;
    box-shadow:0 12px 30px rgba(31,58,101,.22),inset 0 1px 0 rgba(255,255,255,.38)!important;
    backdrop-filter:blur(22px) saturate(145%)!important;-webkit-backdrop-filter:blur(22px) saturate(145%)!important;
  }
  #partnersClose.partner-edge:hover,#partnersClose.partner-edge:focus-visible,
  .discover__back:hover,.discover__back:focus-visible{transform:none!important;translate:0!important;background:rgba(47,97,168,.62)!important;color:#fff!important}
  #partnersClose.partner-edge .partner-edge__label,
  .discover__back-txt{display:block!important;writing-mode:horizontal-tb!important;font-size:.78rem!important;line-height:1!important;letter-spacing:.09em!important;text-transform:uppercase!important}
  #partnersClose.partner-edge svg,.discover__back-arrow{width:1.3rem!important;height:1.3rem!important;padding:0!important;background:transparent!important}
  .discover__back-arrow svg{width:100%!important;height:100%!important;stroke:currentColor!important}
  /* The zipper is a slide in the same journey, so it receives the same
     reliable Back control as the other discovery screens. */
  .discover[data-stage="0"] .discover__back{display:flex!important}
  .dstage--cast .dcast,
  .dstage--profile .dprofile__inner{padding-bottom:calc(5.8rem + env(safe-area-inset-bottom,0px))!important;align-content:center!important}

  /* The art image is the island. Do not draw a second, cover-cropped island
     behind it on phones. */
  .island{
    height:auto!important;min-height:0!important;aspect-ratio:2400 / 1300;
    background:transparent!important;
  }
  .island::before{display:none!important}
  .island__art{position:relative;z-index:0;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important}

  /* The landing-page CTA is a single uninterrupted blue bar. It must not
     inherit the translucent rail's pale side borders. */
  #edgeOpen.edge{
    box-sizing:border-box!important;
    border:0!important;border-inline:0!important;outline:0!important;
    background-clip:border-box!important;
  }
#edgeOpen.edge::before,#edgeOpen.edge::after{border:0!important;outline:0!important}

}

/* Keep the final site credit above the fixed mobile contact bar. */
@media(max-width:899px){
  .foot__creditbar{
    padding-bottom:calc(3.85rem + env(safe-area-inset-bottom,0px));
  }
  .foot__credit{
    padding-bottom:.82rem!important;
  }

  /* The menu is its own solid screen.  It must sit above the sticky header,
     otherwise the header's frosted background masks the drawer logo. */
  .drawer{
    z-index:119!important;
    background:#F8FBFF!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .drawer__brand{z-index:1!important}
  .head.menu-open .burger{z-index:120!important}
}

/* Keep the contact journey lightweight on larger screens: it should support
   the photo, not mask it. Phone controls retain their comfortable touch size. */
@media(min-width:761px){
  .contact__inner{
    width:min(100%,70rem);
    padding-top:clamp(3.7rem,4.8vh,4.55rem);
    padding-bottom:1.2rem;
  }
  .contact__forms{width:min(100%,48rem);max-width:48rem;gap:.5rem}
  .contact-card{padding:.85rem 1rem .95rem;border-radius:1.25rem}
  .contact-card__head{padding-bottom:.62rem}
  .contact-card__head h2{font-size:clamp(1.55rem,2.25vw,2.1rem)}
  .contact-card__head p:last-child{margin-top:.28rem;font-size:clamp(.75rem,.9vw,.84rem);line-height:1.35}
  .contact__form{margin-top:.65rem;gap:.48rem}
  .contact__form input,.contact__form textarea,.contact__form select{
    min-height:2.38rem;padding:.46rem .68rem;border-radius:.66rem;font-size:.82rem;
  }
  .contact__form textarea{min-height:3.85rem}
  .contact-field{gap:.28rem}
  .contact__form .fld__lbl{font-size:.58rem}
  .contact__actions,.contact__submit{min-height:2.4rem}
  .contact__submit{padding:.58rem .92rem;font-size:.56rem}
  .contact__foot{margin-top:.45rem;padding-top:.5rem}
}

/* Contact: let the photo lead.  Visitors see one small choice card first;
   the selected form stays compact at the bottom and appears only on demand. */
.contact__bg{
  object-position:center top!important;
  transform:none!important;
}
.contact__scrim{
  background:linear-gradient(180deg,rgba(24,37,61,.03) 0%,rgba(24,37,61,.04) 48%,rgba(24,37,61,.16) 100%)!important;
}
.contact__inner{
  width:min(100%,70rem)!important;
  justify-content:flex-end!important;
  padding-top:clamp(3.25rem,4.5vh,4.4rem)!important;
  padding-bottom:clamp(.85rem,2.2vh,1.5rem)!important;
}
.contact__forms{
  width:min(100%,42rem)!important;
  max-width:42rem!important;
  margin:0 auto!important;
  gap:0!important;
}
.contact__launcher{
  width:min(100%,24rem);
  justify-self:center;
  padding:.9rem;
  border:1px solid rgba(255,255,255,.55);
  border-radius:1.3rem;
  background:rgba(29,44,74,.48);
  box-shadow:0 14px 34px rgba(9,16,31,.2),inset 0 1px 0 rgba(255,255,255,.25);
  backdrop-filter:blur(16px) saturate(125%);
  -webkit-backdrop-filter:blur(16px) saturate(125%);
}
.contact__launcher h2{
  margin:0 0 .68rem;
  color:#fff;
  font-family:var(--font-cartoon);
  font-size:clamp(1.65rem,2.8vw,2.25rem);
  line-height:1;
  text-align:center;
}
.contact__launcher-actions{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.contact-launch{
  display:flex;align-items:center;justify-content:space-between;gap:.4rem;
  min-height:3rem;padding:.62rem .72rem;border:1px solid rgba(255,255,255,.42);border-radius:.92rem;
  background:rgba(255,255,255,.93);color:#273B61;
  font-family:var(--font-body);font-size:.67rem;font-weight:700;letter-spacing:.025em;line-height:1.2;text-align:left;
  box-shadow:0 7px 16px rgba(8,20,44,.12);
  transition:transform .22s var(--ease),background .22s ease,box-shadow .22s ease;
}
.contact-launch span{font-family:var(--font-head);font-size:1.25rem;line-height:1;color:#5C88DA}
.contact-launch:hover,.contact-launch:focus-visible{
  outline:0;transform:translateY(-2px);background:#fff;color:#213A67;box-shadow:0 12px 22px rgba(8,20,44,.18);
}
.contact__dialog{
  width:100%;
  opacity:0;transform:translateY(1rem);
  transition:opacity .18s ease,transform .24s var(--ease);
}
.contact__dialog.is-open{opacity:1;transform:none}
.contact__dialog-top{display:flex;justify-content:flex-start;margin:0 0 .38rem .18rem}
.contact__dialog-close{
  display:inline-flex;align-items:center;gap:.38rem;padding:.32rem .12rem;
  border:0;background:transparent;color:#fff;font-family:var(--font-body);font-size:.64rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.contact__dialog-close:hover,.contact__dialog-close:focus-visible{outline:0;color:#DCEEFF}
.contact__dialog .contact-card{
  width:100%;padding:clamp(.78rem,1.3vw,1rem) clamp(.85rem,1.6vw,1.2rem) .95rem;
  border-radius:1.25rem;background:linear-gradient(145deg,rgba(29,44,74,.68),rgba(23,33,57,.56));
  box-shadow:0 16px 36px rgba(9,16,31,.22);backdrop-filter:blur(14px) saturate(122%);-webkit-backdrop-filter:blur(14px) saturate(122%);
}
.contact__dialog .contact-card__head{padding-bottom:.5rem}
.contact__dialog .contact-card__head h2{font-size:clamp(1.45rem,2.2vw,2rem)}
.contact__dialog .contact-card__head p:last-child{margin-top:.25rem;font-size:.76rem;line-height:1.32}
.contact__dialog .contact__form{margin-top:.58rem;gap:.45rem}
.contact__dialog .contact__form input,
.contact__dialog .contact__form textarea,
.contact__dialog .contact__form select{min-height:2.3rem;padding:.42rem .62rem;border-radius:.62rem;font-size:.8rem}
.contact__dialog .contact__form textarea{min-height:3.6rem}
.contact__dialog .contact-field{gap:.26rem}
.contact__dialog .contact__form .fld__lbl{font-size:.57rem}
.contact__dialog .contact__actions,.contact__dialog .contact__submit{min-height:2.3rem}
.contact__dialog .contact__submit{padding:.55rem .9rem;font-size:.56rem}
.contact__foot{margin-top:.6rem!important;padding-top:.55rem!important}

/* The partner form is deliberately available immediately.  It is one compact
   card at the bottom of the picture, with the family form one clear tap away. */
.contact__forms > .contact-card{
  width:100%;
  padding:clamp(.8rem,1.35vw,1.05rem) clamp(.9rem,1.7vw,1.25rem) .95rem;
  border-radius:1.25rem;
  background:linear-gradient(145deg,rgba(29,44,74,.66),rgba(23,33,57,.54));
  box-shadow:0 16px 36px rgba(9,16,31,.22);
  backdrop-filter:blur(14px) saturate(122%);
  -webkit-backdrop-filter:blur(14px) saturate(122%);
}
.contact__forms > .contact-card .contact-card__head{position:relative;padding-bottom:.52rem}
.contact__forms > .contact-card .contact-card__head h2{
  padding-right:8.25rem;
  font-size:clamp(1.5rem,2.25vw,2.05rem);
}
.contact__forms > .contact-card .contact-card__head p:last-child{margin-top:.25rem;font-size:.76rem;line-height:1.32}
.contact-card__switch{
  position:absolute;top:.05rem;right:0;
  display:inline-flex;align-items:center;gap:.28rem;
  min-height:1.9rem;padding:.35rem .55rem;border:1px solid rgba(255,255,255,.36);border-radius:999px;
  background:rgba(255,255,255,.9);color:#293F67;
  font-family:var(--font-body);font-size:.55rem;font-weight:700;letter-spacing:.045em;line-height:1;text-transform:uppercase;
  transition:transform .2s var(--ease),background .2s ease,box-shadow .2s ease;
}
.contact-card__switch span{font-size:.9rem;line-height:1;color:#5C88DA}
.contact-card__switch:hover,.contact-card__switch:focus-visible{
  outline:0;transform:translateY(-1px);background:#fff;box-shadow:0 6px 14px rgba(8,20,44,.16);
}
.contact__forms > .contact-card .contact__form{margin-top:.6rem;gap:.45rem}
.contact__forms > .contact-card .contact__form input,
.contact__forms > .contact-card .contact__form textarea,
.contact__forms > .contact-card .contact__form select{min-height:2.3rem;padding:.42rem .62rem;border-radius:.62rem;font-size:.8rem}
.contact__forms > .contact-card .contact__form textarea{min-height:3.6rem}
.contact__forms > .contact-card .contact-field{gap:.26rem}
.contact__forms > .contact-card .contact__form .fld__lbl{font-size:.57rem}
.contact__forms > .contact-card .contact__actions,.contact__forms > .contact-card .contact__submit{min-height:2.3rem}
.contact__forms > .contact-card .contact__submit{padding:.55rem .9rem;font-size:.56rem}

@media(max-width:760px){
  .contact__bg{object-position:center top!important}
  .contact__inner{
    display:flex!important;min-height:100svh!important;
    padding:calc(56px + 1rem) var(--pad) calc(4.8rem + env(safe-area-inset-bottom,0px))!important;
  }
  .contact__forms{width:100%!important;max-width:27rem!important;margin-top:auto!important}
  .contact__launcher{width:min(100%,22rem);padding:.78rem;border-radius:1.1rem}
  .contact__launcher h2{font-size:1.75rem;margin-bottom:.55rem}
  .contact-launch{min-height:2.8rem;padding:.5rem .6rem;font-size:.6rem;border-radius:.8rem}
  .contact__dialog{max-height:calc(100svh - 8rem);overflow-y:auto;padding-right:.12rem}
  .contact__dialog .contact-card{padding:.78rem .82rem .88rem;border-radius:1.1rem}
  .contact__dialog .contact-card__head h2{font-size:1.65rem}
  .contact__dialog .contact__form{grid-template-columns:1fr;gap:.42rem}
  .contact__dialog .contact-field--full{grid-column:auto}
  .contact__dialog .contact__form--partners .contact-field:nth-child(5){grid-column:auto}
  .contact__dialog .contact__form textarea{min-height:3.5rem}
  .contact__dialog .contact__actions{flex-direction:row;align-items:center}
  .contact__forms > .contact-card{padding:.78rem .82rem .88rem;border-radius:1.1rem}
  .contact__forms > .contact-card .contact-card__head h2{padding-right:7.4rem;font-size:1.65rem}
  .contact-card__switch{min-height:1.78rem;padding:.3rem .48rem;font-size:.5rem}
  .contact__forms > .contact-card .contact__form{grid-template-columns:1fr;gap:.42rem}
  .contact__forms > .contact-card .contact-field--full{grid-column:auto}
  .contact__forms > .contact-card .contact__form--partners .contact-field:nth-child(5){grid-column:auto}
  .contact__forms > .contact-card .contact__form textarea{min-height:3.5rem}
  .contact__forms > .contact-card .contact__actions{flex-direction:row;align-items:center}
}

/* Contact panel — keep both simple forms visibly open, small, and anchored
   together at the bottom so the children in the photograph remain the focus. */
.contact__forms{
  display:grid!important;
  grid-template-columns:minmax(0,1.12fr) minmax(15.5rem,.88fr)!important;
  align-items:end!important;
  gap:clamp(.48rem,1vw,.8rem)!important;
  width:min(100%,58rem)!important;
  max-width:58rem!important;
}
.contact__forms > .contact-card{
  min-width:0!important;
  padding:clamp(.68rem,1vw,.88rem) clamp(.74rem,1.25vw,1rem) .78rem!important;
  border-radius:1.08rem!important;
}
.contact__forms > .contact-card .contact-card__head{padding-bottom:.36rem!important}
.contact__forms > .contact-card .contact-card__head h2{
  padding-right:0!important;
  font-size:clamp(1.25rem,1.8vw,1.68rem)!important;
  line-height:.98!important;
}
.contact__forms > .contact-card .contact-card__head p:last-child{
  margin-top:.18rem!important;
  font-size:.66rem!important;
  line-height:1.27!important;
}
.contact__forms > .contact-card .contact__form{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  margin-top:.42rem!important;
  gap:.34rem .42rem!important;
}
.contact__forms > .contact-card .contact__form--partners .contact-field:nth-child(5),
.contact__forms > .contact-card .contact-field--full{grid-column:1 / -1!important}
.contact__forms > .contact-card .contact-field{gap:.18rem!important}
.contact__forms > .contact-card .contact__form .fld__lbl{font-size:.5rem!important;letter-spacing:.08em!important}
.contact__forms > .contact-card .contact__form input,
.contact__forms > .contact-card .contact__form select,
.contact__forms > .contact-card .contact__form textarea{
  min-height:2.02rem!important;
  padding:.32rem .5rem!important;
  border-radius:.52rem!important;
  font-size:.71rem!important;
}
.contact__forms > .contact-card .contact__form textarea{min-height:2.78rem!important}
.contact__forms > .contact-card .contact__actions,
.contact__forms > .contact-card .contact__submit{min-height:2.04rem!important}
.contact__forms > .contact-card .contact__submit{padding:.45rem .66rem!important;font-size:.51rem!important}
.contact__forms > .contact-card .formmsg{font-size:.58rem!important;line-height:1.15!important}

@media(max-width:760px){
  /* A two-column form inside a half-width card would make fields unusable.
     Keep the two compact cards stacked on phones, flush to the bottom. */
  .contact__forms{
    grid-template-columns:1fr!important;
    gap:.42rem!important;
    width:min(100%,22.5rem)!important;
    max-width:22.5rem!important;
  }
  .contact__forms > .contact-card{padding:.62rem .66rem .7rem!important;border-radius:.95rem!important}
  .contact__forms > .contact-card .contact-card__head h2{font-size:1.32rem!important}
  .contact__forms > .contact-card .contact-card__head p:last-child{font-size:.61rem!important}
  .contact__forms > .contact-card .contact__form{gap:.3rem .36rem!important}
  .contact__forms > .contact-card .contact__form input,
  .contact__forms > .contact-card .contact__form select,
  .contact__forms > .contact-card .contact__form textarea{min-height:1.96rem!important;font-size:.68rem!important}
  .contact__forms > .contact-card .contact__form textarea{min-height:2.55rem!important}
}

/* Final compact contact composition: the two forms are one low, horizontal
   row.  These rules intentionally override every earlier contact variation. */
.contact__inner{
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-end!important;
  gap:.34rem!important;
  height:100svh!important;
  min-height:100svh!important;
  overflow:hidden!important;
  padding-top:clamp(4.4rem,8vh,6rem)!important;
  padding-bottom:.72rem!important;
}
.contact__forms{
  display:grid!important;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)!important;
  align-items:end!important;
  width:min(100%,50rem)!important;
  max-width:50rem!important;
  margin:0 auto!important;
  gap:.5rem!important;
}
.contact__forms > .contact-card{
  width:auto!important;
  min-width:0!important;
  padding:.58rem .66rem .64rem!important;
  border-radius:.95rem!important;
  box-shadow:0 12px 28px rgba(9,16,31,.2)!important;
}
.contact__forms > .contact-card .contact-card__head{padding-bottom:.28rem!important}
.contact__forms > .contact-card .contact-card__head h2{
  padding:0!important;
  font-size:clamp(1.14rem,1.55vw,1.42rem)!important;
  line-height:1!important;
}
.contact__forms > .contact-card .contact-card__head p:last-child{
  margin-top:.12rem!important;
  font-size:.58rem!important;
  line-height:1.2!important;
}
.contact__forms > .contact-card .contact__form{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  margin-top:.3rem!important;
  gap:.26rem .34rem!important;
}
.contact__forms > .contact-card .contact-field{gap:.13rem!important}
.contact__forms > .contact-card .contact__form .fld__lbl{font-size:.46rem!important;line-height:1.1!important}
.contact__forms > .contact-card .contact__form input,
.contact__forms > .contact-card .contact__form select,
.contact__forms > .contact-card .contact__form textarea{
  min-height:1.82rem!important;
  padding:.22rem .42rem!important;
  border-radius:.45rem!important;
  font-size:.64rem!important;
}
.contact__forms > .contact-card .contact__form textarea{min-height:2.28rem!important}
.contact__forms > .contact-card .contact__actions,
.contact__forms > .contact-card .contact__submit{min-height:1.82rem!important}
.contact__forms > .contact-card .contact__submit{padding:.35rem .56rem!important;font-size:.46rem!important}
.contact__forms > .contact-card .formmsg{font-size:.52rem!important}
.contact__foot{
  flex:0 0 auto!important;
  margin:.25rem auto 0!important;
  padding-top:.3rem!important;
}

@media(max-width:760px){
  .contact__inner{
    padding-top:calc(56px + .75rem)!important;
    padding-bottom:calc(4.05rem + env(safe-area-inset-bottom,0px))!important;
  }
  .contact__forms{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)!important;
    width:calc(100% - 1rem)!important;
    max-width:25rem!important;
    gap:.32rem!important;
  }
  .contact__forms > .contact-card{padding:.46rem .48rem .52rem!important;border-radius:.78rem!important}
  .contact__forms > .contact-card .contact-card__head h2{font-size:1rem!important}
  .contact__forms > .contact-card .contact-card__head p:last-child{font-size:.49rem!important}
  .contact__forms > .contact-card .contact__form{grid-template-columns:1fr!important;gap:.22rem!important}
  .contact__forms > .contact-card .contact-field--full,
  .contact__forms > .contact-card .contact__form--partners .contact-field:nth-child(5){grid-column:auto!important}
  .contact__forms > .contact-card .contact__form .fld__lbl{font-size:.4rem!important}
  .contact__forms > .contact-card .contact__form input,
  .contact__forms > .contact-card .contact__form select,
  .contact__forms > .contact-card .contact__form textarea{min-height:1.62rem!important;padding:.18rem .32rem!important;font-size:.56rem!important}
  .contact__forms > .contact-card .contact__form textarea{min-height:2rem!important}
  .contact__forms > .contact-card .contact__actions,
  .contact__forms > .contact-card .contact__submit{min-height:1.62rem!important}
  .contact__forms > .contact-card .contact__submit{padding:.3rem .38rem!important;font-size:.39rem!important}
  .contact__foot{margin-top:.16rem!important;padding-top:.18rem!important}
}

/* Contact form composition — both forms stay open, light, and low in the
   photograph. This is intentionally the final contact rule set. */
.contact__inner{
  width:100%!important;
  max-width:none!important;
  min-height:100svh!important;
  height:100svh!important;
  align-items:center!important;
  justify-content:flex-end!important;
  padding:clamp(4rem,7vh,5.75rem) var(--pad) clamp(.7rem,1.25vh,1rem)!important;
  padding-left:max(calc(var(--edge-w) + var(--pad)),var(--pad))!important;
}
.contact__forms{
  display:grid!important;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)!important;
  align-items:end!important;
  width:min(100%,54rem)!important;
  max-width:54rem!important;
  margin:0 auto!important;
  gap:.58rem!important;
}
.contact__forms > .contact-card{
  width:100%!important;
  min-width:0!important;
  padding:.64rem .74rem .68rem!important;
  border:1px solid rgba(255,255,255,.38)!important;
  border-radius:1rem!important;
  background:linear-gradient(142deg,rgba(31,47,78,.69),rgba(21,32,56,.55))!important;
  box-shadow:0 14px 30px rgba(9,16,31,.19)!important;
  backdrop-filter:blur(14px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(14px) saturate(125%)!important;
}
.contact__forms > .contact-card .contact-card__head{
  padding-bottom:.38rem!important;
  border-bottom-color:rgba(255,255,255,.2)!important;
}
.contact__forms > .contact-card .contact-card__head h2{
  padding:0!important;
  font-size:clamp(1.23rem,1.8vw,1.55rem)!important;
  line-height:1!important;
}
.contact__forms > .contact-card .contact-card__head p:last-child{
  margin-top:.16rem!important;
  font-size:.59rem!important;
  line-height:1.2!important;
}
.contact__forms > .contact-card .contact__form{
  margin-top:.38rem!important;
  gap:.28rem .36rem!important;
}
.contact__forms > .contact-card .contact__form--partners{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.contact__forms > .contact-card .contact__form--mommies{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.contact__forms > .contact-card .contact__form--partners .contact-field--role{
  grid-column:span 2!important;
}
.contact__forms > .contact-card .contact__form--partners .contact-field--message,
.contact__forms > .contact-card .contact__form--mommies .contact-field--comment,
.contact__forms > .contact-card .contact__actions{
  grid-column:1 / -1!important;
}
.contact__forms > .contact-card .contact-field{gap:.14rem!important}
.contact__forms > .contact-card .contact__form .fld__lbl{
  font-size:.48rem!important;
  line-height:1.08!important;
  letter-spacing:.075em!important;
}
.contact__forms > .contact-card .contact__form input,
.contact__forms > .contact-card .contact__form select,
.contact__forms > .contact-card .contact__form textarea{
  min-height:1.9rem!important;
  padding:.24rem .46rem!important;
  border-radius:.5rem!important;
  font-size:.66rem!important;
}
.contact__forms > .contact-card .contact__form textarea{min-height:2.45rem!important}
.contact__forms > .contact-card .contact__actions,
.contact__forms > .contact-card .contact__submit{min-height:1.9rem!important}
.contact__forms > .contact-card .contact__submit{padding:.36rem .62rem!important;font-size:.48rem!important}
.contact__forms > .contact-card .formmsg{font-size:.52rem!important;line-height:1.12!important}
.contact__foot{margin:.22rem auto 0!important;padding-top:.2rem!important}

@media(max-width:760px){
  .contact__inner{
    padding:calc(54px + .55rem) .5rem calc(3.8rem + env(safe-area-inset-bottom,0px))!important;
  }
  .contact__forms{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)!important;
    width:calc(100% - 1rem)!important;
    max-width:25rem!important;
    gap:.32rem!important;
  }
  .contact__forms > .contact-card{padding:.46rem .48rem .5rem!important;border-radius:.78rem!important}
  .contact__forms > .contact-card .contact-card__head h2{font-size:1rem!important}
  .contact__forms > .contact-card .contact-card__head p:last-child{font-size:.48rem!important}
  .contact__forms > .contact-card .contact__form{grid-template-columns:1fr!important;gap:.22rem!important}
  .contact__forms > .contact-card .contact__form--partners .contact-field--role,
  .contact__forms > .contact-card .contact-field--full{grid-column:auto!important}
  .contact__forms > .contact-card .contact__form .fld__lbl{font-size:.4rem!important}
  .contact__forms > .contact-card .contact__form input,
  .contact__forms > .contact-card .contact__form select,
  .contact__forms > .contact-card .contact__form textarea{min-height:1.6rem!important;padding:.16rem .3rem!important;font-size:.55rem!important}
  .contact__forms > .contact-card .contact__form textarea{min-height:1.95rem!important}
  .contact__forms > .contact-card .contact__actions,
  .contact__forms > .contact-card .contact__submit{min-height:1.6rem!important}
  .contact__forms > .contact-card .contact__submit{padding:.28rem .36rem!important;font-size:.38rem!important}
}

/* Final desktop contact placement: keep the children in view, then anchor the
   two compact forms together at the lower-left rather than the panel centre. */
@media(min-width:761px){
  .contact__bg{
    /* The source artwork has a generous empty band above the children. A
       centred crop brings the people upward while keeping every face clear. */
    object-position:center 52%!important;
    /* Do not shift the artwork off the left edge: the girl on that side
       remains part of the contact composition. */
    transform:none!important;
  }
  .contact__inner{
    align-items:flex-start!important;
    padding-top:clamp(2.35rem,3.4vh,3.35rem)!important;
    padding-bottom:clamp(.7rem,1.2vh,1rem)!important;
  }
  .contact__forms{
    width:min(100%,60rem)!important;
    max-width:60rem!important;
    margin:0!important;
    gap:.68rem!important;
  }
  .contact__forms > .contact-card{
    padding:.72rem .84rem .76rem!important;
  }
  .contact__forms > .contact-card .contact-card__head h2{
    font-size:clamp(1.3rem,1.95vw,1.68rem)!important;
  }
  .contact__forms > .contact-card .contact__form input,
  .contact__forms > .contact-card .contact__form select,
  .contact__forms > .contact-card .contact__form textarea{
    min-height:2rem!important;
  }

  /* Three concise fields on row one; Country and “I am” share row two equally. */
  .contact__forms > .contact-card .contact__form--partners{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
  }
  .contact__forms > .contact-card .contact__form--partners .contact-field:nth-child(-n+3){
    grid-column:span 2!important;
  }
  .contact__forms > .contact-card .contact__form--partners .contact-field:nth-child(4),
  .contact__forms > .contact-card .contact__form--partners .contact-field--role{
    grid-column:span 3!important;
  }

  /* Keep Country and “I am” as the two equal fields on the second row. */
  .contact__forms > .contact-card .contact__form--partners > .contact-field:nth-child(4){
    grid-column:1 / span 3!important;
  }
  .contact__forms > .contact-card .contact__form--partners > .contact-field.contact-field--full.contact-field--role{
    grid-column:4 / span 3!important;
  }
}

/* Previous Partners — bring each preview in as a single vertical story on
   phones. The larger individual frames preserve legibility without letting
   the panel spill beneath its Back control. */
@media(max-width:899px){
  .partners__inner{
    grid-template-rows:auto auto!important;
    gap:.9rem!important;
    padding-top:calc(1rem + env(safe-area-inset-top,0px))!important;
    padding-bottom:calc(5.2rem + env(safe-area-inset-bottom,0px))!important;
  }
  .retailer-films{
    width:min(100%,15.5rem)!important;
    grid-template-columns:1fr!important;
    gap:.45rem!important;
  }
  .retailer-film__media{aspect-ratio:16 / 9!important}
}

/* Hero photo wall — keep the moving photography visible, but let it read as
   a soft branded watermark behind the headline and film. The even wash also
   prevents individual bright tiles from competing with the foreground. */
.hero__veil{
  background:
    radial-gradient(62% 54% at 50% 48%,rgba(181,220,244,.14) 0%,rgba(32,52,87,.1) 64%,rgba(32,52,87,.17) 100%),
    linear-gradient(180deg,rgba(27,45,77,.29) 0%,rgba(46,78,122,.23) 48%,rgba(27,45,77,.3) 100%)!important;
}

@media(max-width:899px){
  .hero__veil{
    background:
      radial-gradient(72% 48% at 50% 45%,rgba(181,220,244,.12) 0%,rgba(32,52,87,.08) 68%,rgba(32,52,87,.15) 100%),
      linear-gradient(180deg,rgba(27,45,77,.27) 0%,rgba(46,78,122,.21) 50%,rgba(27,45,77,.28) 100%)!important;
  }
}

/* Keep the original hero treatment; only the mark changes to white. */
.head.is-hero:not(.menu-open) .head__logo--light,.head.is-hero:not(.menu-open) .head__logo--blue{opacity:0!important}
.head.is-hero:not(.menu-open) .head__logo--white{opacity:1!important;filter:drop-shadow(0 2px 8px rgba(35,103,158,.3))}

/* Header navigation stays text-only: a bold, friendly word-mark menu without
   tiles, outlines, underlines, or any button treatment. */
@media(min-width:1171px){
  .head .nav{gap:clamp(1.3rem,2.2vw,2.15rem)}
  .head .nav__link{
    display:block;width:auto;height:auto;padding:.32rem 0;
    background:transparent!important;border:0!important;clip-path:none!important;filter:none!important;
    font-family:var(--font-head);font-size:clamp(1.14rem,1.34vw,1.42rem);font-weight:900;line-height:1;letter-spacing:.012em;
    -webkit-text-stroke:.55px rgba(255,255,255,.82);paint-order:stroke fill;
    text-shadow:0 1px 0 rgba(31,43,72,.62)!important;
    transition:color .2s ease;
  }
  .head .nav__link::before,.head .nav__link::after{display:none!important}
  .head[data-tone="light"] .nav__link{color:#26324D!important}
  .head[data-tone="dark"] .nav__link{color:#fff!important;-webkit-text-stroke:.45px rgba(18,33,61,.55);text-shadow:0 1px 0 rgba(10,18,36,.7)!important}
  .head[data-tone="light"] .nav__link:hover,.head[data-tone="light"] .nav__link:focus-visible,.head[data-tone="dark"] .nav__link:hover,.head[data-tone="dark"] .nav__link:focus-visible{color:#F8755B!important}
}

@media(min-width:900px) and (max-width:1170px){
  .head .nav{display:none}
  .head .burger{display:grid}
}

/* The cartoon cutout receives its highlight only when it appears. A layered
   white edge keeps similar hues—such as Kali on pink—visibly separate. */
.cast__title.reveal{
  opacity:0;transform:translateY(-2.2rem) scale(.94) rotate(-1deg);
  will-change:opacity,transform;
}
.cast.is-in .cast__title.reveal{animation:castTitleReveal .62s .06s cubic-bezier(.16,1,.3,1) both}
@keyframes castTitleReveal{
  0%{opacity:0;transform:translateY(-2.2rem) scale(.94) rotate(-1deg)}
  72%{opacity:1;transform:translateY(.08rem) scale(1.018) rotate(.12deg)}
  100%{opacity:1;transform:none}
}
.cast__title-word{display:inline-block;will-change:transform}
.cast__title-word + .cast__title-word{margin-left:.28em}
.cast.is-in .cast__title-word{animation:castTitleWordPulse 1.5s ease-in-out infinite}
.cast.is-in .cast__title-word:nth-child(1){animation-delay:.2s}
.cast.is-in .cast__title-word:nth-child(2){animation-delay:.36s}
.cast.is-in .cast__title-word:nth-child(3){animation-delay:.53s}
@keyframes castTitleWordPulse{
  0%,100%{transform:none}
  6%{transform:translateY(-.1em) scale(1.045) rotate(-.55deg)}
  11%{transform:translateY(.015em) scale(.992) rotate(.16deg)}
  15%{transform:none}
}
.cast .cub__toon{
  left:50%;right:auto;top:50%;bottom:auto;width:116%;height:116%;padding:0;
  object-position:center;
  transform:translate(-50%,-50%) scale(.84) rotate(-5deg);
}
.cast .cub:hover .cub__toon,.cast .cub:focus-visible .cub__toon,.cast .cub.is-turned .cub__toon{
  transform:translate(-50%,-50%) scale(1);
  filter:drop-shadow(0 0 2.5px rgba(255,255,255,1)) drop-shadow(0 0 5.5px rgba(255,255,255,.88)) drop-shadow(0 10px 13px rgba(40,54,84,.22));
}
@media(prefers-reduced-motion:reduce){.cast.is-in .cast__title.reveal,.cast.is-in .cast__title-word{animation:none;opacity:1;transform:none}}

/* Keep the simple name footer, but centre its single line cleanly now that
   the supporting species and trait copy have gone. */
.cast .cub__foot{
  display:flex;align-items:center;justify-content:center;min-height:3.55rem;padding:.6rem .9rem .65rem;text-align:center;
  border-top:1px solid rgba(80,87,106,.08);background:linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.9));
}
.cast .cub__name{font-size:clamp(1.45rem,2.1vw,1.75rem);line-height:1;color:#50576A;text-align:center}

/* The raw-reference cutouts share one visual top line and a safe horizontal
   frame. Their extra height exits only through the bottom of the card. */
.cast .cub:not(.cub--uki) .cub__photo{
  left:var(--photo-left);right:auto;top:var(--photo-top);bottom:auto;
  width:var(--photo-width);max-width:none;height:auto;padding:0;
}
.cast .cub--kali .cub__photo{--photo-width:149.23%;--photo-left:-22.90%;--photo-top:-4.18%}
.cast .cub--papo .cub__photo{--photo-width:100%;--photo-left:0;--photo-top:7%}
.cast .cub--flynn .cub__photo{--photo-width:100%;--photo-left:0;--photo-top:7%}
.cast .cub--tomo .cub__photo{--photo-width:96.25%;--photo-left:3.58%;--photo-top:-13.83%}
.cast .cub--pimm .cub__photo{--photo-width:165.70%;--photo-left:-26.77%;--photo-top:-7.43%}
.cast .cub--bori .cub__photo{--photo-width:151.56%;--photo-left:-25.93%;--photo-top:-6.16%}
.cast .cub--dayo .cub__photo{--photo-width:174.96%;--photo-left:-28.75%;--photo-top:-2.72%}

/* Uki uses the separately supplied image and keeps its previous framing. */
.cast .cub--uki .cub__photo{--photo-scale:99%;left:calc((100% - var(--photo-scale)) / 2);right:auto;bottom:-2.5%;width:var(--photo-scale);height:var(--photo-scale);padding:0}

/* Layered stat cards: a darker rounded card peeks out on the right and
   bottom, echoing the hand-cut depth from the supplied reference. */
.proof .stat{
  --stat-depth:clamp(5px,.8vw,11px);
  position:relative;isolation:isolate;overflow:visible;
  border:0;background:transparent;box-shadow:none;
}
.proof .stat::before{
  content:"";position:absolute;inset:0;z-index:1;
  border:2px solid #29466f;border-radius:inherit;
  background:linear-gradient(145deg,#3D64AE 0%,#5687D6 100%);
  box-shadow:0 12px 22px rgba(23,54,111,.18),inset 0 1px 0 rgba(255,255,255,.16);
}
.proof .stat::after{
  content:"";position:absolute;inset:0;z-index:0;
  border:2px solid #29466f;border-radius:inherit;background:#315a9e;
  transform:translate(var(--stat-depth),var(--stat-depth));
}
.proof .stat > *{position:relative;z-index:2}
.proof .stat:hover{
  box-shadow:none;
}
@media(min-width:900px){
  .proof{min-height:clamp(39rem,82svh,53rem)}
  .proof__band .proof__title{max-width:none;white-space:normal;font-size:clamp(3.7rem,5.9vw,5.8rem);line-height:1.04}
  .proof .stats{gap:clamp(1.45rem,2.5vw,2.5rem)}
}

/* The proof statement arrives as two deliberate editorial lines, instead of
   leaving the title stranded in one wide line above the cards. */
.proof__band .proof__title{line-height:1.04}
.proof__band .proof__title.reveal{opacity:1;transform:none;transition:none}
.proof__title-line{display:block}
.proof__title-word{display:inline-block;opacity:0;transform:translateY(.34em) scale(.96) rotate(-.55deg);will-change:opacity,transform,filter}
.proof__title-word + .proof__title-word{margin-left:.25em}
.proof__title.reveal.in .proof__title-word{animation:proofTitleWordEnter .58s var(--proof-word-delay) cubic-bezier(.16,1,.3,1) both,proofTitleWordPulse 1.5s calc(.3s + var(--proof-word-delay)) ease-in-out infinite}
.proof__title-line:nth-child(1) .proof__title-word:nth-child(1){--proof-word-delay:.04s}
.proof__title-line:nth-child(1) .proof__title-word:nth-child(2){--proof-word-delay:.22s}
.proof__title-line:nth-child(2) .proof__title-word:nth-child(1){--proof-word-delay:.4s}
.proof__title-line:nth-child(2) .proof__title-word:nth-child(2){--proof-word-delay:.58s}
@keyframes proofTitleWordEnter{
  from{opacity:0;transform:translateY(.34em) scale(.96) rotate(-.55deg);filter:blur(4px)}
  72%{opacity:1;transform:translateY(-.035em) scale(1.018) rotate(.12deg);filter:blur(0)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes proofTitleWordPulse{
  0%,100%{transform:none}
  7%{transform:translateY(-.075em) scale(1.032) rotate(.32deg)}
  13%{transform:translateY(.012em) scale(.994) rotate(-.12deg)}
  18%{transform:none}
}
@media(prefers-reduced-motion:reduce){.proof__title-word,.proof__title.reveal.in .proof__title-word{animation:none;opacity:1;transform:none;filter:none}}

/* Coming Soon follows the same friendly word-by-word rhythm, while its two
   films use more of the available desktop width. */
.adult{padding:clamp(4.25rem,9vh,6.5rem) 0 clamp(4rem,8vh,6rem)}
.adult > .wrap{max-width:100rem;padding-inline:clamp(1.5rem,2.2vw,2.75rem)}
.adult__line{opacity:1;transform:none;transition:none;font-size:clamp(1.65rem,4.2vw,3.8rem);margin-bottom:clamp(2rem,4.5vw,3.25rem)}
.adult__title-word{display:inline-block;opacity:0;transform:translateY(.32em) scale(.96) rotate(-.45deg);will-change:opacity,transform,filter}
.adult__title-word + .adult__title-word{margin-left:.24em}
.adult__line.is-title-ready .adult__title-word{animation:adultTitleWordEnter .56s var(--adult-word-delay) cubic-bezier(.16,1,.3,1) both,adultTitleWordPulse 1.5s calc(.29s + var(--adult-word-delay)) ease-in-out infinite}
.adult__title-word:nth-child(1){--adult-word-delay:.04s}.adult__title-word:nth-child(2){--adult-word-delay:.2s}.adult__title-word:nth-child(3){--adult-word-delay:.36s}.adult__title-word:nth-child(4){--adult-word-delay:.52s}
@keyframes adultTitleWordEnter{
  from{opacity:0;transform:translateY(.32em) scale(.96) rotate(-.45deg);filter:blur(4px)}
  72%{opacity:1;transform:translateY(-.03em) scale(1.018) rotate(.1deg);filter:blur(0)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes adultTitleWordPulse{
  0%,100%{transform:none}
  7%{transform:translateY(-.07em) scale(1.03) rotate(.28deg)}
  13%{transform:translateY(.012em) scale(.994) rotate(-.1deg)}
  18%{transform:none}
}
@media(min-width:900px){.adult__grid{gap:clamp(1rem,1.8vw,1.6rem)}}
@media(max-width:760px){.adult > .wrap{padding-inline:1rem}}
@media(prefers-reduced-motion:reduce){.adult__title-word,.adult__line.is-title-ready .adult__title-word{animation:none;opacity:1;transform:none;filter:none}}

/* Keep the fixed header from covering any header-menu target on anchor jumps. */
#l2,#l3,#l4,#l6{scroll-margin-top:clamp(5rem,9vh,6.5rem)}

/* Keep the right-hand Previous Partners rail visibly brighter than the
   photo collage behind it. */
#partnersOpen.partner-edge::before{
  background:linear-gradient(180deg,#79B8F1 0%,#4B82D5 100%);
  filter:none;transform:none;
}
#partnersOpen.partner-edge:hover::before,#partnersOpen.partner-edge:focus-visible::before{
  background:linear-gradient(180deg,#79B8F1 0%,#4B82D5 100%);
  filter:none;transform:none;
}
#partnersOpen.partner-edge svg{stroke-width:3;filter:drop-shadow(0 2px 3px rgba(22,57,117,.28))}

/* Discover begins with the transferred transformation film, then continues
   through the existing zip and Cub journey. */
.discover__track{width:300%!important}
.discover__track > .dstage{width:33.3333%!important;flex:0 0 33.3333%!important}
.discover[data-stage="1"] .discover__track{transform:translateX(-33.3333%)!important}
.discover[data-stage="2"] .discover__track{transform:translateX(-66.6666%)!important}
.discover[data-stage="3"] .discover__track{transform:translateX(-66.6666%)!important}
.discover.is-open[data-stage="1"] .dzip__cubs{animation:cubsEnter .85s .12s var(--ease) both}

.dstage--intro{background:#12161F}
.discover-intro.unzip{position:absolute;inset:0;width:100%;height:100%;min-height:0}
.discover-intro .unzip__vid{object-fit:cover}
.dstage--intro .discover__next{z-index:12}

/* The first slide's forward control uses the same button treatment as Back,
   mirrored to the right-hand edge. */
#discoverIntroNext{
  top:0;right:0;bottom:0;left:auto;translate:none;height:auto;z-index:70;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;
  width:var(--edge-w);min-width:var(--edge-w);padding:.8rem .55rem;
  border-color:rgba(255,255,255,.45);border-radius:0;
  background:rgba(35,54,86,.45);box-shadow:-10px 14px 30px rgba(25,43,77,.18);
  backdrop-filter:blur(16px) saturate(125%);-webkit-backdrop-filter:blur(16px) saturate(125%);
  color:#fff;transition:background .3s ease;
}
#discoverIntroNext:hover,#discoverIntroNext:focus-visible{background:rgba(92,136,218,.72)}

@media(max-width:760px){
  .discover-intro .unzip__vid{object-fit:contain}
}

@media(max-width:899px){
  #discoverIntroNext{
    position:absolute!important;z-index:90!important;top:auto!important;right:var(--pad)!important;
    bottom:calc(.72rem + env(safe-area-inset-bottom,0px))!important;left:var(--pad)!important;
    display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:.6rem!important;
    width:auto!important;min-width:0!important;height:3.45rem!important;min-height:3.45rem!important;padding:.65rem 1rem!important;
    transform:none!important;translate:0!important;border:1px solid rgba(255,255,255,.68)!important;border-radius:1.1rem!important;
    background:rgba(38,76,137,.42)!important;color:#fff!important;
    box-shadow:0 12px 30px rgba(31,58,101,.22),inset 0 1px 0 rgba(255,255,255,.38)!important;
    backdrop-filter:blur(22px) saturate(145%)!important;-webkit-backdrop-filter:blur(22px) saturate(145%)!important;
  }
  #discoverIntroNext:hover,#discoverIntroNext:focus-visible{background:rgba(47,97,168,.62)!important}
  #discoverIntroNext .discover__next-txt{
    display:block!important;writing-mode:horizontal-tb!important;font-size:.78rem!important;line-height:1!important;
    letter-spacing:.09em!important;text-transform:uppercase!important;
  }
  #discoverIntroNext .discover__next-arrow{width:1.3rem!important;height:1.3rem!important;padding:0!important;background:transparent!important}
  #discoverIntroNext .discover__next-arrow svg{width:100%!important;height:100%!important;stroke:currentColor!important}
}

/* Give Island's invitation the requested extra presence and use the supplied
   illustrated sign in place of the generic arrow. */
.discover-cue{
  width:fit-content;min-width:0;max-width:calc(100% - .75rem);
  justify-content:flex-start;gap:.8rem;padding:.8rem 1rem .8rem 1.15rem;
}
.discover-cue__arrow{
  width:clamp(3.9rem,5.46vw,4.81rem);aspect-ratio:auto;
  background:transparent;box-shadow:none;
}
.discover-cue__arrow img{display:block;width:100%;height:auto}
.discover-cue__txt{font-size:clamp(1.25rem,1.8vw,1.65rem);line-height:1.05}
.discover-cue__arrow{width:clamp(4.65rem,6.1vw,5.3rem)}
@media(max-width:899px){
  .discover-cue{width:fit-content;max-width:calc(100% - 2rem);gap:.75rem;padding:.65rem .85rem}
  .discover-cue__txt{font-size:1.4rem}
  .discover-cue__arrow{width:4.7rem}
}

/* The footer has its own small Island moment instead of repeating the main
   Cubcoats logo already visible in the header. */
.foot__island-pictograms{display:flex;align-items:center;gap:clamp(.25rem,.6vw,.5rem);min-width:0}
.foot__island-pictogram{width:clamp(2.45rem,3.2vw,3.35rem);height:clamp(2.45rem,3.2vw,3.35rem);object-fit:contain}
.foot__island-pictogram--sign{width:clamp(3.9rem,5vw,5.2rem);height:auto}
.foot__mail a{font-family:var(--font-body)}
.foot__in{padding-block:clamp(.55rem,1.25vw,.8rem)}
@media(max-width:760px){
  .foot__in{padding-block:.5rem}
  .foot__island-pictograms{gap:.18rem}
  .foot__island-pictogram{width:2.15rem;height:2.15rem}
  .foot__island-pictogram--sign{width:3.5rem;height:auto}
}

/* Global map: clearer land/ocean separation and more legible Cub markers. */
.wild__plot > img{filter:contrast(1.12) saturate(1.12) brightness(.98)}
.mapspot__sticker{width:clamp(3.2rem,5.7vw,6.7rem)}
@media(max-width:760px){.mapspot__sticker{width:clamp(2.45rem,11vw,4.25rem)}}

/* Contact forms: keep the family photograph present while making both paths
   feel like one concise, modern glass prompt. */
@media(min-width:761px){
  .contact__inner{
    align-items:center!important;
    justify-content:flex-end!important;
    padding-top:clamp(3rem,5vh,4.5rem)!important;
    padding-bottom:clamp(1.2rem,2.8vh,2rem)!important;
    padding-left:var(--pad)!important;
  }
  .contact__forms{
    width:min(100%,60rem)!important;
    max-width:60rem!important;
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)!important;
    gap:.8rem!important;
  }
  .contact__forms > .contact-card{
    padding:.86rem .98rem .92rem!important;
    border-color:rgba(255,255,255,.46)!important;
    background:linear-gradient(145deg,rgba(24,40,70,.3),rgba(21,31,54,.18))!important;
    box-shadow:0 14px 30px rgba(9,16,31,.16),inset 0 1px 0 rgba(255,255,255,.16)!important;
    backdrop-filter:blur(7px) saturate(114%)!important;
    -webkit-backdrop-filter:blur(7px) saturate(114%)!important;
  }
  .contact__forms > .contact-card--mommies{
    background:linear-gradient(145deg,rgba(39,56,91,.28),rgba(28,39,67,.16))!important;
  }
  .contact__forms > .contact-card .contact-card__head{padding-bottom:.5rem!important}
  .contact__forms > .contact-card .contact-card__head h2{font-size:clamp(1.5rem,2.05vw,1.9rem)!important}
  .contact__forms > .contact-card .contact-card__head p:last-child{font-size:.76rem!important;line-height:1.35!important}
  .contact__forms > .contact-card .contact__form{margin-top:.58rem!important;gap:.46rem .54rem!important}
  .contact__forms > .contact-card .contact-field{gap:.24rem!important}
  .contact__forms > .contact-card .contact__form .fld__lbl{font-size:.6rem!important}
  .contact__forms > .contact-card .contact__form input,
  .contact__forms > .contact-card .contact__form select,
  .contact__forms > .contact-card .contact__form textarea{
    min-height:2.45rem!important;
    padding:.45rem .65rem!important;
    border-radius:.65rem!important;
    font-size:.8rem!important;
  }
  .contact__forms > .contact-card .contact__form textarea{min-height:3.65rem!important}
  .contact__forms > .contact-card .contact__actions,
  .contact__forms > .contact-card .contact__submit{min-height:2.45rem!important}
  .contact__forms > .contact-card .contact__submit{padding:.54rem .9rem!important;font-size:.58rem!important}

  .contact__forms > .contact-card{
    will-change:transform,opacity;
    transition:transform .72s var(--ease),opacity .32s ease!important;
  }
  .contact:not(.is-open) .contact-card--partners{opacity:0;transform:translateX(calc(-50vw - 100%))}
  .contact:not(.is-open) .contact-card--mommies{opacity:0;transform:translateX(calc(50vw + 100%))}
  .contact.is-open .contact-card--partners,.contact.is-open .contact-card--mommies{opacity:1;transform:translateX(0)}
}

@media(prefers-reduced-motion:reduce){
  .contact__forms > .contact-card{transition:none!important}
}

/* Give the two otherwise solid story fields a quiet Cubcoats watermark. The
   art stays behind every card, heading and control, so it enriches rather
   than competes with the content. */
.cast,.adult{position:relative;isolation:isolate;overflow:hidden}
.cast{
  background:linear-gradient(142deg,#DCEFFF 0%,#A8D2F2 50%,#78AEE0 100%);
}
.adult{
  background:linear-gradient(142deg,#2E6EA9 0%,#478FC5 52%,#75B5D6 100%);
}
.cast::after,.adult::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-position:center;background-repeat:no-repeat;background-size:cover;
  mix-blend-mode:soft-light;
}
.cast::after{
  background-image:url("../img/art/forest-cubs.webp");
  background-position:center;
  background-size:cover;
  opacity:.2;
  filter:grayscale(1) saturate(.25) brightness(1.28) contrast(.76);
}
.adult::before{
  background-image:url("../img/art/forest-cubs.webp");
  background-position:64% center;
  background-size:cover;
  opacity:.16;
  filter:grayscale(1) saturate(.25) brightness(1.12) contrast(.76);
}
.cast > .wrap,.adult > .wrap{position:relative;z-index:1}

/* The contact URL sits over a bright part of the photograph, so give it a
   small high-contrast treatment without competing with the main logo. */
.contact__foot span{
  display:inline-flex;align-items:center;
  padding:.3rem .65rem;
  border:1px solid rgba(255,255,255,.56);
  border-radius:999px;
  background:rgba(25,48,84,.64);
  color:#fff!important;
  font-weight:700;
  line-height:1;
  text-shadow:0 1px 3px rgba(7,18,36,.42);
  box-shadow:0 6px 16px rgba(8,20,44,.18),inset 0 1px 0 rgba(255,255,255,.2);
}

/* Mobile slide framework: one reliable safety zone keeps titles, photography,
   illustrations and actions clear of the viewport edges on every main slide. */
@media(max-width:760px){
  :root{--mobile-slide-safe:clamp(1rem,5vw,1.35rem);--pad:var(--mobile-slide-safe)}

  html,body,#shell,#stage{overflow-x:clip}
  .layer,.discover,.partners,.contact{overflow-x:clip}
  .hero__inner,.proof .wrap,.cast > .wrap,.adult > .wrap,.foot .wrap{
    width:min(100%,36rem);margin-inline:auto;
  }

  /* Keep the fixed brand visible above every mobile slide. */
  .head{padding-inline:var(--mobile-slide-safe)}
  .head.is-hero .head__mark{
    opacity:1!important;background-color:#fff;
    filter:drop-shadow(0 2px 8px rgba(20,40,72,.35));
  }

  /* Slide titles follow the requested presentation treatment. */
  .hero__title,.cast__title,.proof__band .h2,.adult__line,.island__title,
  .wild__global-title .h2,.dcast__title,.dprofile__name,.dzip__title{
    font-family:var(--font-head);text-transform:uppercase;
  }

  /* Do not let carousel controls, map content or actions sit on an edge. */
  .railarrow--prev{left:var(--mobile-slide-safe)!important}
  .railarrow--next{right:var(--mobile-slide-safe)!important}
  .island .discover-cue{right:var(--mobile-slide-safe)!important}
  .wild__map{max-width:calc(100% - (var(--mobile-slide-safe) * 2));margin-inline:auto}

  /* All text actions are clear Montserrat labels inside highlighted rounded
     controls, centred irrespective of the section where they appear. */
  .btn,.contact__submit,.castfilm,.discover-cue,.partner-edge,.edge,
  .nextup__go,.contact-card__switch,.contact-switch__option{
    font-family:var(--font-body)!important;
    font-weight:700!important;
    text-align:center!important;
  }
  /* .discover-cue,.castfilm,.partner-edge,.edge{border-radius:1rem} */
  .discover-cue{justify-content:center!important}
  .discover-cue__txt,.partner-edge__label,.edge__label{
    font-family:var(--font-body)!important;text-align:center!important;
  }
}

/* A realistic zipper puller asset is overlaid on the existing, working
   vertical zip. The official blue Cubcoats C sits in its recessed badge. */
.dstage--zip .zip__pull{
  display:block;width:clamp(5rem,6.2vw,6.3rem);height:auto;aspect-ratio:2 / 3;
  padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;cursor:ns-resize;isolation:isolate;
}
.dstage--zip .zip__pull::before,.dstage--zip .zip__pull::after,.dstage--zip .zip__tab{display:none!important}
.dstage--zip .zip__pull-art{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(5,15,34,.3));pointer-events:none}
.dstage--zip .zip__pull-mark{
  position:absolute;z-index:2;left:50%;top:76%;display:grid;place-items:center;width:31%;aspect-ratio:1;translate:-50% -50%;
  overflow:hidden;border-radius:50%;box-shadow:0 1px 4px rgba(20,43,79,.32);pointer-events:none;
}
.dstage--zip .zip__pull-mark img{display:block;width:100%;height:100%;object-fit:contain}
.dstage--zip .zip__pull:focus-visible{outline:3px solid rgba(255,255,255,.92);outline-offset:.5rem}
@media(max-width:899px){.dstage--zip .zip__pull{width:3.75rem;height:auto}}

/* Keep the rail clean above the puller, then give the moving zipper line a
   continuous, interlocking-metal finish rather than a circular progress cap. */
.dstage--zip .zip__teeth{display:none!important}
.dstage--zip .zip::before{
  width:clamp(1.22rem,1.8vw,1.7rem);
  background:
    repeating-linear-gradient(180deg,
      #f6f9fd 0 4px,#9caec5 4px 7px,#4e6381 7px 10px,#d8e2ee 10px 14px),
    linear-gradient(90deg,#677b97 0 17%,#e8eff7 17% 36%,#637a97 36% 44%,#f7fbff 44% 56%,#637a97 56% 64%,#e8eff7 64% 83%,#677b97 83%);
  border-inline:1px solid rgba(24,42,72,.72);
  box-shadow:inset 1px 0 rgba(255,255,255,.74),inset -1px 0 rgba(30,51,84,.48),0 0 10px rgba(6,17,37,.34);
}

/* Discover refinement: retain the high-resolution transferred video but use
   its original-site wording/timing; the reel now enters from below the zip. */
.discover__track{position:relative;width:200%!important}
.discover__track > .dstage{width:50%!important;flex:0 0 50%!important}
.discover[data-stage="1"] .discover__track,.discover[data-stage="2"] .discover__track,.discover[data-stage="3"] .discover__track{transform:translateX(-50%)!important}
.dstage--cast{
  position:absolute!important;inset:0!important;z-index:31;width:100%!important;height:100%!important;
  flex:none!important;transform:translateY(105%);transition:transform 1.02s var(--ease-rail);overflow:hidden;
}
.discover.is-cast-open .dstage--cast{transform:translateY(0)}
.discover__jumpnav{
  position:absolute;z-index:7;top:clamp(1rem,3vh,2rem);left:50%;translate:-50% 0;
  display:flex;align-items:center;justify-content:center;gap:clamp(1.1rem,3vw,3.25rem);
  width:max-content;max-width:calc(100% - (var(--pad) * 2));padding:.58rem clamp(.85rem,1.8vw,1.45rem);
  border:1px solid rgba(42,54,81,.13);border-radius:999px;background:rgba(255,255,255,.58);
  box-shadow:0 10px 26px rgba(32,56,98,.1),inset 0 1px rgba(255,255,255,.78);
  backdrop-filter:blur(16px) saturate(135%);-webkit-backdrop-filter:blur(16px) saturate(135%);
}
.discover__jumpnav a{
  color:#26324D;font-family:"Riya Black",var(--font-cartoon);font-size:clamp(.88rem,1.18vw,1.25rem);font-weight:700;
  line-height:1;text-decoration:none;white-space:nowrap;-webkit-text-stroke:.35px rgba(18,33,61,.48);
  text-shadow:0 1px 0 rgba(255,255,255,.92);transition:color .2s ease,transform .2s ease;
}
.discover__jumpnav a:hover,.discover__jumpnav a:focus-visible{color:#F8755B;transform:translateY(-1px);outline:none}

/* The supplied puller already contains its Cubcoats C. Keep the rail as a
   complete metal zip, with interlocking teeth and two opened tape edges. */
.dstage--zip .zip__pull-mark{display:none!important}
.dstage--zip .zip::before{
  width:clamp(1.48rem,2.1vw,1.95rem);border-inline:1px solid rgba(18,35,61,.78);
  background:
    repeating-linear-gradient(180deg,transparent 0 2px,rgba(17,34,61,.58) 2px 3px,transparent 3px 6px,rgba(255,255,255,.72) 6px 8px,transparent 8px 12px),
    linear-gradient(90deg,#354b69 0 8%,#7f91aa 8% 20%,#dbe5f0 20% 36%,#7d8fa8 36% 45%,#f8fbff 45% 55%,#7d8fa8 55% 64%,#dbe5f0 64% 80%,#7f91aa 80% 92%,#354b69 92%);
  box-shadow:inset 1px 0 rgba(255,255,255,.9),inset -1px 0 rgba(11,27,52,.66),0 0 0 1px rgba(235,243,251,.42),0 0 14px rgba(6,17,37,.4);
}
.dstage--zip .zip__tape{
  border-inline:1px solid rgba(18,35,61,.5);
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.55) 0 3px,rgba(56,76,107,.35) 3px 5px,transparent 5px 13px),
    linear-gradient(90deg,#506985,#cedbe9 35%,#f8fbff 52%,#9aadc2 75%,#405a78);
  box-shadow:inset 1px 0 rgba(255,255,255,.82),inset -1px 0 rgba(22,43,72,.55),0 6px 12px rgba(10,25,51,.3);
}

/* Keep profiles concise: only the supplied card line remains. Make the
   right-side portrait the clear visual anchor. */
.dprofile__name{margin-top:0}
.dprofile__quote{margin-top:1.35rem;max-width:31rem;font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.42}
.dprofile__art{width:min(100%,38rem)}
.dprofile__art > img{
  filter:drop-shadow(0 0 1px rgba(255,255,255,1)) drop-shadow(0 0 4px rgba(255,255,255,.96)) drop-shadow(0 28px 34px rgba(16,24,40,.42));
}
@media(min-width:900px){
  .dprofile__inner{grid-template-columns:minmax(0,.78fr) minmax(24rem,1.22fr)}
  .dprofile__art{width:min(112%,40rem);justify-self:end}
}
@media(max-width:899px){
  .discover__jumpnav{top:calc(.85rem + env(safe-area-inset-top,0px));display:grid;grid-template-columns:repeat(2,max-content);gap:.65rem 1.1rem;border-radius:1rem;text-align:center}
  .discover__jumpnav a{font-size:clamp(.75rem,3.25vw,.98rem)}
  .dprofile__art{width:min(86%,22rem)}
}

/* Get in touch: keep the paired forms equally tall and anchored at the base,
   with their actions consistently aligned in the lower-right corner. */
.contact__inner{position:relative!important;justify-content:flex-end!important;padding-bottom:clamp(5rem,7.5vh,6.5rem)!important}
.contact__forms{align-items:stretch!important;margin-bottom:0!important}
.contact__forms > .contact-card{display:flex!important;flex-direction:column!important}
.contact__forms > .contact-card .contact__form{flex:1 1 auto!important;align-content:start!important}
.contact__forms > .contact-card .contact__actions{margin-top:auto!important;justify-content:flex-end!important}
.contact__forms > .contact-card .contact__submit{text-transform:none!important}
.contact__forms > .contact-card .contact-card__head p:last-child{font-size:clamp(.84rem,1.05vw,1rem)!important;line-height:1.35!important}
.contact__foot{
  position:absolute!important;right:var(--pad)!important;bottom:clamp(1rem,2vh,1.6rem)!important;
  width:auto!important;margin:0!important;padding:0!important;border:0!important;
  justify-content:flex-end!important;
}
.contact__foot img{width:clamp(104px,10vw,148px)!important}
@media(max-width:760px){
  .contact__inner{padding-bottom:calc(4.4rem + env(safe-area-inset-bottom,0px))!important}
  .contact__forms{align-items:stretch!important}
  .contact__forms > .contact-card .contact-card__head p:last-child{font-size:clamp(.62rem,2.55vw,.76rem)!important}
  .contact__foot{right:var(--mobile-slide-safe)!important;bottom:calc(.7rem + env(safe-area-inset-bottom,0px))!important}
  .contact__foot img{width:clamp(84px,26vw,112px)!important}
}

/* Contact follow-up: the Mommies form now has three full-width fields, so
   both cards reach a matching natural height without forced stretching. */
.contact__inner{padding-bottom:clamp(1.7rem,3vh,2.6rem)!important}
.contact__forms{align-items:end!important}
.contact__forms > .contact-card{display:block!important}
.contact__forms > .contact-card .contact__form{display:grid!important;flex:none!important}
.contact__forms > .contact-card .contact__actions{margin-top:0!important}
.contact__forms > .contact-card .contact__form--mommies{grid-template-columns:1fr!important}
.contact__forms > .contact-card .contact__form--mommies .contact-field{grid-column:1 / -1!important}
.contact__forms > .contact-card .contact-card__head{padding-bottom:.68rem!important}
.contact__forms > .contact-card .contact-card__head p:last-child{margin-top:.62rem!important; font-weight: 700;}
@media(max-width:760px){
  .contact__inner{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0px))!important}
}

/* Contact form correction: compact side-by-side Name and Email for Mommies,
   then retain equal card heights and aligned actions. */
.contact__forms{align-items:stretch!important}
.contact__forms > .contact-card{display:flex!important;flex-direction:column!important}
.contact__forms > .contact-card .contact__form{flex:1 1 auto!important}
.contact__forms > .contact-card .contact__actions{margin-top:auto!important}
.contact__forms > .contact-card .contact__form--mommies{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.contact__forms > .contact-card .contact__form--mommies .contact-field{grid-column:auto!important}
.contact__forms > .contact-card .contact__form--mommies .contact-field--comment,
.contact__forms > .contact-card .contact__form--mommies .contact__actions{grid-column:1 / -1!important}

/* Keep the generated puller, but turn the seam into a slimmer metal chain
   without the two vertical steel-looking side rails. */
.dstage--zip .zip{width:clamp(4.2rem,5.8vw,5.6rem)!important}
.dstage--zip .zip__pull{width:clamp(4.15rem,5.2vw,5.2rem)!important}
.dstage--zip .zip__tape,.dstage--zip .zip::after{display:none!important}
.dstage--zip .zip::before{
  width:clamp(1.04rem,1.35vw,1.28rem)!important;
  background:
    repeating-linear-gradient(180deg,rgba(255,255,255,.94) 0 2px,rgba(34,51,78,.74) 2px 4px,rgba(178,194,211,.92) 4px 7px,rgba(42,60,87,.86) 7px 9px,rgba(236,242,248,.96) 9px 12px),
    linear-gradient(90deg,#273d5b 0 9%,#8ea0b7 9% 23%,#ecf3f9 23% 42%,#536b88 42% 49%,#fcfeff 49% 55%,#536b88 55% 62%,#ecf3f9 62% 77%,#8ea0b7 77% 91%,#273d5b 91%)!important;
  border-inline:1px solid rgba(18,35,61,.82)!important;
  box-shadow:inset 1px 0 rgba(255,255,255,.94),inset -1px 0 rgba(7,20,43,.72),0 0 0 1px rgba(236,244,252,.55),0 5px 13px rgba(6,17,37,.42)!important;
}

/* Restart the Cub group entrance every time this slide is visited. */
#dZip .dzip__cubs{animation:none!important}
#dZip .dzip__cubs.is-entering{animation:zipCubsEnter 1.05s .32s cubic-bezier(.22,1,.36,1) both!important}
.discover.is-unzipping #dZip .dzip__cubs{animation:zipCubsRelease .62s .05s cubic-bezier(.22,1,.36,1) both!important}
@keyframes zipCubsEnter{from{opacity:0;transform:translateX(12vw);filter:blur(2px)}to{opacity:1;transform:translateX(0);filter:blur(0)}}

/* Keep the supplied profile-card strength visible beneath its single line. */
.dprofile__strength{margin-top:1rem;font-size:clamp(.72rem,1vw,.88rem);font-weight:700;letter-spacing:.13em;text-transform:uppercase;opacity:.86}

/* Keep the physical unzip motion: two subtle fabric edges part behind the
   puller as it travels down. They are intentionally thin and soft, never
   the heavy steel columns the earlier treatment created. */
.dstage--zip .zip__tape{
  display:block!important;z-index:1;width:clamp(.28rem,.5vw,.46rem);
  height:var(--zip-open);opacity:calc(var(--zip, 0) * .78);
  border:0!important;
  background:linear-gradient(90deg,rgba(54,78,112,.38),rgba(241,247,253,.85) 47%,rgba(83,109,145,.28));
  box-shadow:0 3px 9px rgba(7,20,43,.19),inset 1px 0 rgba(255,255,255,.74);
}
.dstage--zip .zip__tape--left{
  left:calc(50% - .27rem);transform:translateX(calc(-.36rem - var(--zip, 0) * .86rem)) skewY(-1.2deg);
}
.dstage--zip .zip__tape--right{
  right:calc(50% - .27rem);transform:translateX(calc(.36rem + var(--zip, 0) * .86rem)) skewY(1.2deg);
}
.dstage--zip .zip.is-unzipping .zip__tape--left{transform:translateX(-1.25rem) skewY(-2deg)}
.dstage--zip .zip.is-unzipping .zip__tape--right{transform:translateX(1.25rem) skewY(2deg)}
@media(max-width:899px){
  .dstage--zip .zip.is-unzipping .zip__tape--left{transform:translateX(-.95rem) skewY(-2deg)}
  .dstage--zip .zip.is-unzipping .zip__tape--right{transform:translateX(.95rem) skewY(2deg)}
}

/* Retain the original hardware puller; only restore the official Cubcoats
   C in its blue badge and give the resting pull a quiet natural movement. */
.dstage--zip .zip__pull-mark{display:grid!important}
.dstage--zip .zip__pull{animation:zipPullWiggle 3.8s ease-in-out infinite}
.dstage--zip .zip.is-dragging .zip__pull,.dstage--zip .zip.is-unzipping .zip__pull{animation:none}
@keyframes zipPullWiggle{
  0%,72%,100%{rotate:0deg}
  78%{rotate:-1.25deg}
  84%{rotate:1deg}
  90%{rotate:-.45deg}
}
@media(prefers-reduced-motion:reduce){.dstage--zip .zip__pull{animation:none}}

@media(min-width:900px){
  .discover__jumpnav{left:auto;right:clamp(1.75rem,5vw,6rem);translate:0 0}
}

/* Keep the Island invitation compact on phones without changing its desktop
   presentation or the supplied illustrated arrow. */
@media(max-width:899px){
  .island .discover-cue{gap:.5rem;padding:.55rem .7rem .55rem .85rem}
  .island .discover-cue__txt{font-size:clamp(1.05rem,4.4vw,1.25rem)}
  .island .discover-cue__arrow{width:clamp(3.35rem,13vw,3.95rem)}
}

/* Footer: a single blue strip with contact left and site credit right. */
.foot__in{grid-template-columns:1fr auto!important;min-height:0!important}
.foot__mail{justify-self:start!important;text-align:left!important}
.foot__credit{
  display:block!important;width:auto!important;margin:0!important;padding:0!important;
  color:rgba(255,255,255,.86)!important;font-family:var(--font-body);font-size:clamp(.7rem,.9vw,.82rem)!important;
  font-weight:600;text-align:right!important;
}
.foot__credit a{color:#fff!important;border-bottom-color:rgba(255,255,255,.42)!important}
.foot__creditbar{display:none!important}
@media(max-width:760px){
  .foot__in{align-items:center!important}
  .foot__credit{font-size:.66rem!important}
}

/* Compact the Coming Soon films on phones and restore readable form actions. */
@media(max-width:760px){
  .adult__grid{width:70%!important;margin-inline:auto!important}
  .contact__forms > .contact-card .contact__submit{
    min-height:1.9rem!important;padding:.38rem .56rem!important;font-size:.64rem!important;
  }
}

/* Keep each Cub's animal label directly under its name. */
.cast .cub__foot{flex-direction:column;gap:.12rem;min-height:4.35rem}
.cast .cub__species{display:block;margin:.08rem 0 0;font-size:clamp(.72rem,1.05vw,.82rem);line-height:1.1;color:rgba(80,87,106,.72);text-align:center}

/* Make both contact actions comfortably legible without altering the forms. */
.contact__forms > .contact-card .contact__submit{font-size:clamp(.78rem,1.2vw,.94rem)!important}
@media(max-width:760px){
  .contact__forms > .contact-card .contact__submit{
    min-height:2.15rem!important;padding:.44rem .66rem!important;font-size:.74rem!important;
  }
}

/* Keep the two Adult Cubcoats previews deliberately compact across mobile
   and tablet portrait widths. */
.adult__grid{width:75%!important;margin-inline:auto!important}

/* Fine-tune the current landing composition without altering its layout. */
.hero__inner{transform:translateY(.5in)}

/* Give the animal labels their own clear, stronger line beneath each Cub. */
.cast .cub__foot{gap:.28rem;min-height:5rem}
.cast .cub__species{
  margin:.2rem 0 0;
  font-size:clamp(1.08rem,1.575vw,1.23rem);
  font-weight:700;
  line-height:1.28;
}

/* The lower Cast row arrives as a measured sequence: words first, then film. */
.cast__film-row.is-entered .cast__verb--flip{animation:castWordFromLeft .85s 1.35s var(--ease) both,finalFlip 5.4s 4.6s cubic-bezier(.22,1,.36,1) infinite!important}
.cast__film-row.is-entered .cast__verb--roll{animation:castWordFromLeft .85s 2.35s var(--ease) both,finalRoll 5.4s 5.2s ease-in-out infinite!important}
.cast__film-row.is-entered .cast__verb--unzip{animation:castWordFromLeft .85s 3.35s var(--ease) both,finalUnzip 5.4s 5.8s ease-in-out infinite!important}
.cast__film-row.is-entered .castfilm{animation:castFilmFromRight 1.1s .15s var(--ease) both!important}

/* Country completes the Mommies form while preserving its shared card height. */
.contact__forms > .contact-card .contact__form--mommies .contact-field--country{grid-column:1 / -1!important}

/* On phones, keep the Discover menu in one compact row and lower the Cub reel. */
@media(max-width:899px){
  .discover__jumpnav{
    display:flex!important;flex-wrap:nowrap!important;justify-content:center!important;
    gap:.3rem!important;width:calc(100% - 1rem)!important;max-width:none!important;
    box-sizing:border-box;padding:.55rem!important;
  }
  .discover__jumpnav a{flex:0 0 auto;font-size:clamp(.58rem,2.6vw,.72rem)!important}
  .dstage--cast .dcast__stage{transform:translateY(clamp(2rem,6svh,3.25rem))!important}
}

/* Contact forms need their own readable, stacked mobile composition. */
@media(max-width:760px){
  .contact{overflow-y:auto!important}
  .contact__inner{
    height:auto!important;min-height:100svh!important;justify-content:flex-start!important;
    padding-top:calc(4.5rem + env(safe-area-inset-top,0px))!important;
    padding-bottom:calc(1.25rem + env(safe-area-inset-bottom,0px))!important;
    gap:.9rem!important;
  }
  .contact__forms{
    grid-template-columns:1fr!important;width:min(100% - (var(--pad) * 2),31rem)!important;
    max-width:31rem!important;margin-inline:auto!important;gap:1rem!important;
  }
  .contact__foot{
    position:static!important;width:auto!important;margin:.1rem auto 0!important;
    justify-content:center!important;
  }
  .contact__foot{display:none!important}
}

/* Restore the paired low-row contact layout on phones. */
@media(max-width:760px){
  .contact__bg{object-position:50% 42%!important}
  .contact__inner{
    height:100svh!important;min-height:0!important;justify-content:flex-end!important;
    padding-top:calc(3.6rem + env(safe-area-inset-top,0px))!important;
    padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0px))!important;
  }
  .contact__forms{
    grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)!important;
    width:calc(100% - 1rem)!important;max-width:none!important;gap:.32rem!important;
  }
}

/* Partner films now reveal one at a time while their matching preview starts. */
.partners.is-open .retailer-film:not(.is-entering){opacity:0!important;transform:translateX(-1.5rem)!important}
.partners.is-open .retailer-film.is-entering{
  opacity:1!important;transform:translateX(0)!important;
  transition:opacity .8s var(--ease),transform .8s var(--ease),box-shadow .32s ease;
}

/* Move the unzip invitation slightly down and keep Panda clear of the seam. */
.dstage--zip .dzip__copy{padding-top:clamp(6.45rem,12.5svh,10.45rem)}
#dZip .dzip__cubs{right:clamp(3.5rem,4vw,5rem)!important}
.unzip__b > span{display:block}

/* Footer: copyright left, restrained email centred, development credit right. */
.foot__in{grid-template-columns:1fr auto 1fr!important;align-items:center!important;gap:1rem!important}
.foot__rights{
  display:block;margin:0;justify-self:start;color:rgba(255,255,255,.78);
  font-family:var(--font-body);font-size:clamp(.62rem,.78vw,.74rem);font-weight:500;text-align:left;
}
.foot__mail{justify-self:center!important;text-align:center!important}
.foot__mail a{font-size:clamp(.78rem,1.05vw,.96rem)!important}
.foot__credit{justify-self:end!important}
@media(max-width:899px){
  .hero__inner{transform:translateY(.38in)}
  .dstage--zip .dzip__copy{padding-top:calc(5.65rem + env(safe-area-inset-top, 0px))}
  .dzip__cubs{right:-4%!important}
  .foot__in{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;gap:.42rem!important}
  .foot__rights{font-size:.48rem}
  .foot__mail a{font-size:.64rem!important}
  .foot__credit{font-size:.5rem!important;line-height:1.15!important}
}

/* Lift only the homepage words above the already-positioned film circle. */
@media(max-width:899px){.hero__copy{transform:translateY(-.5in)}}

/* A slightly livelier resting movement makes the puller read as hardware. */
.dstage--zip .zip__pull{animation:zipPullWiggle 2.3s cubic-bezier(.42,0,.2,1) infinite!important}
.dstage--zip .zip.is-dragging .zip__pull,
.dstage--zip .zip.is-unzipping .zip__pull{animation:none!important}
@keyframes zipPullWiggle{
  0%,46%,100%{rotate:0deg}
  52%{rotate:-2.2deg}
  58%{rotate:1.8deg}
  64%{rotate:-1.25deg}
  70%{rotate:.75deg}
  76%{rotate:-.35deg}
  82%{rotate:0deg}
}

/* On the desktop contact crop, retain the left child while using the spare
   space beside the right child. */
@media(min-width:761px){
  .contact__bg{
    object-position:center center!important;
    transform:translateX(clamp(1.25rem,2vw,2.25rem))!important;
  }
}

/* Phone contact begins with one clear choice, then shows the selected form. */
.contact__chooser{display:none}
.contact{transition:transform 1.35s var(--ease)!important}
@media(max-width:760px){
  .contact__bg{object-position:50% 42%!important}
  .contact__inner{
    display:flex!important;flex-direction:column!important;
    height:auto!important;min-height:100svh!important;justify-content:flex-end!important;
    padding-top:calc(4.5rem + env(safe-area-inset-top,0px))!important;
    padding-bottom:calc(1.5rem + env(safe-area-inset-bottom,0px))!important;
    gap:.65rem!important;
  }
  .contact__chooser{
    display:grid;width:min(100% - (var(--pad) * 2),22rem);margin-inline:auto;padding:1.35rem 1.2rem;
    border:1px solid rgba(255,255,255,.55);border-radius:1.2rem;
    background:rgba(28,42,73,.68);box-shadow:0 18px 42px rgba(13,25,51,.28);
    backdrop-filter:blur(13px) saturate(120%);-webkit-backdrop-filter:blur(13px) saturate(120%);
    color:#fff;text-align:center;
  }
  .contact__chooser-kicker{
    margin:0;font-family:var(--font-body);font-size:.68rem;font-weight:700;letter-spacing:.15em;
    text-transform:uppercase;opacity:.82;
  }
  .contact__chooser h2{
    margin:.32rem 0 1rem;font-family:var(--font-head);font-size:clamp(1.65rem,8vw,2.2rem);
    line-height:1;color:#fff;
  }
  .contact__chooser-actions{display:grid;grid-template-columns:1fr;gap:.62rem}
  .contact__chooser-option{min-height:3.15rem;padding:.65rem 1rem;font-size:1rem!important;text-transform:none!important}
  .contact:not([data-mobile-form]) .contact__forms{display:none!important}
  .contact[data-mobile-form] .contact__chooser{display:none!important}
  .contact[data-mobile-form] .contact__forms{
    display:block!important;width:min(100% - (var(--pad) * 2),31rem)!important;
    max-width:31rem!important;margin-inline:auto!important;
  }
  .contact[data-mobile-form] .contact-card{display:none!important}
  .contact[data-mobile-form="partners"] .contact-card--partners,
  .contact[data-mobile-form="mommies"] .contact-card--mommies{
    display:flex!important;width:100%!important;
  }
  .contact[data-mobile-form] .contact__switcher{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.28rem;
    width:min(100% - (var(--pad) * 2),31rem);margin-inline:auto;padding:.28rem;
    border:1px solid rgba(255,255,255,.48);border-radius:.9rem;
    background:rgba(25,39,68,.58);box-shadow:0 10px 24px rgba(10,21,43,.18);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  }
  .contact__switch-option{
    min-height:2.45rem;padding:.42rem .5rem;border:0;border-radius:.65rem;
    background:transparent;color:rgba(255,255,255,.88);font-family:var(--font-body);
    font-size:.73rem;font-weight:700;letter-spacing:.035em;line-height:1.1;
  }
  .contact__switch-option:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .contact[data-mobile-form="partners"] .contact__switch-option[data-contact-choice="partners"],
  .contact[data-mobile-form="mommies"] .contact__switch-option[data-contact-choice="mommies"]{
    background:rgba(255,255,255,.92);color:#263a61;box-shadow:0 2px 7px rgba(8,20,44,.16);
  }
}