/* =========================================================================
   G8te /play — styles.
   Un seul principe : tout ce qui bouge est un transform ou une opacité.
   Les couleurs sont des variables pilotées par le scroll (voir app.js).
   La porte, c'est le logo : un SVG, décliné en trait (le couloir) et en
   plein (la porte à ouvrir, puis le signe du logotype).
   ========================================================================= */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/space-grotesk-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/space-grotesk-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* palette vivante (écrite par app.js à chaque frame de scroll) */
  --bg:#0D0D17;--acc:#F93486;--acc2:#3D5BFF;--text:#FFFFFF;--label:#FF7AB8;
  --glow:1;--scan:1;--grain:1;
  /* la marque */
  --rose:#F93486;--rose-deep:#C21361;--bleu:#16257A;--bleu-vif:#3D5BFF;
  --graphite:#1E2226;--brume:#E9ECEA;--navy:#0D0D17;
  /* le logo : bande claire, corps rose, plaque de fermeture, lumière */
  --p-out:#E9ECEA;--p-body:#F93486;--p-seal:transparent;--p-glow:0;
  /* géométrie de la scène */
  --vh:100vh;
  --doorW:min(76vw,400px,45vh);
  --doorH:calc(var(--doorW) * 146 / 112);
  --lintel:clamp(52px,min(16vw,19vh),132px);
  --lineFs:clamp(20px,min(5.6vw,4.7vh),38px);
  --wm:clamp(29px,7.9vw,80px);
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  --safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);
  --eo5:cubic-bezier(.22,1,.36,1);--eo4:cubic-bezier(.25,1,.5,1);--eio:cubic-bezier(.65,0,.35,1);
}
@supports (height:100svh){
  :root{--vh:100svh;--doorW:min(76vw,400px,45svh);--lintel:clamp(52px,min(16vw,19svh),132px);--lineFs:clamp(20px,min(5.6vw,4.7svh),38px)}
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-snap-type:y proximity;-webkit-text-size-adjust:100%;text-size-adjust:100%;height:100%;overscroll-behavior-y:contain}
html.opened,html.in-game{scroll-snap-type:none}
html.in-game{overflow:hidden;overscroll-behavior:none}
body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
  font-family:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:400;line-height:1.4;overflow-x:hidden;-webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.in-game{overflow:hidden;height:100%}
html.opened,html.opened body{transition:background-color .7s var(--eio),color .7s var(--eio)}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
a{color:inherit;touch-action:manipulation}
svg{display:block}
.defs{position:absolute;width:0;height:0;overflow:hidden}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sr-focus:focus{position:fixed!important;left:16px;top:16px;width:auto;height:auto;margin:0;padding:10px 14px;clip:auto;background:var(--brume);color:var(--graphite);z-index:200;border-radius:8px;font-weight:500}

/* ---------- barre du haut ------------------------------------------------ */
.top{position:fixed;left:0;right:0;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;
  padding:calc(14px + var(--safe-t)) calc(20px + var(--safe-r)) 0 calc(20px + var(--safe-l));pointer-events:none}
.top>*{pointer-events:auto}
.brand{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:700;font-size:15px;letter-spacing:-.02em;opacity:.55;transition:opacity .2s}
.brand span{font-weight:500;opacity:.7}
.brand:hover,.brand:focus-visible{opacity:1}
.skipgate{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:8px 2px;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;opacity:.45;transition:opacity .2s;min-height:44px}
.skipgate:hover,.skipgate:focus-visible{opacity:1}
.opened .skipgate,.returning .skipgate,.in-game .top{display:none}
.returning .top{position:absolute}

/* ---------- le couloir --------------------------------------------------- */
.corridor{position:relative;height:calc(6 * var(--vh) + 100vh)}
.returning .corridor{display:none}
.stage{position:sticky;top:0;height:var(--vh);overflow:hidden;perspective:900px;isolation:isolate;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.step{position:absolute;left:0;width:100%;height:var(--vh);scroll-snap-align:start;pointer-events:none}
.step[data-k="0"]{top:0}.step[data-k="1"]{top:calc(1 * var(--vh))}.step[data-k="2"]{top:calc(2 * var(--vh))}
.step[data-k="3"]{top:calc(3 * var(--vh))}.step[data-k="4"]{top:calc(4 * var(--vh))}.step[data-k="5"]{top:calc(5 * var(--vh))}
.step[data-k="6"]{top:calc(6 * var(--vh))}
.opened .step{display:none}

.fx{position:absolute;inset:0;pointer-events:none;will-change:opacity}
.fx.vignette{background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(0,0,0,.55) 100%);opacity:calc(var(--grain) * .9);z-index:3}
.fx.scan{background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);opacity:calc(var(--scan) * .55);z-index:4}
.fx.grain{background-repeat:repeat;background-size:96px 96px;opacity:calc(var(--grain) * .55);z-index:4}
.opened .fx{transition:opacity .7s;opacity:0}

/* les portes : le logo ----------------------------------------------------- */
.doors{position:absolute;inset:0;z-index:2}
.door{position:absolute;left:50%;top:53%;width:var(--doorW);height:var(--doorH);
  margin:calc(var(--doorH) / -2) 0 0 calc(var(--doorW) / -2);
  transform:scale(var(--s,1));opacity:var(--o,1);will-change:transform,opacity;backface-visibility:hidden}
.door.off{visibility:hidden}
.door:not(.front){pointer-events:none}
.door[data-i="0"]{z-index:7}.door[data-i="1"]{z-index:6}.door[data-i="2"]{z-index:5}.door[data-i="3"]{z-index:4}
.door[data-i="4"]{z-index:3}.door[data-i="5"]{z-index:2}.door[data-i="6"]{z-index:1}

.lg{width:100%;height:100%;overflow:visible}
.door>.lg{position:absolute;inset:0;color:var(--acc)}
.door:nth-child(even)>.lg{color:var(--acc2)}
.core{stroke-width:2}
.halo{stroke-width:9;opacity:calc(var(--glow) * .2)}
.door.front>.lg{animation:breathe 1.2s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.008)}}

.line{position:absolute;left:8%;right:8%;top:8%;margin:0;
  font-size:var(--lineFs);font-weight:500;letter-spacing:-.02em;line-height:1.16;color:var(--text);
  opacity:var(--lo,1);transform:translateY(var(--ly,0px))}
.line br{display:block}

/* volet de tableau d'affichage (les marchés) */
.flap{position:relative;display:inline-block;perspective:520px;line-height:1.16;vertical-align:top;white-space:nowrap}
.flap .fm{visibility:hidden}
.flap .ft,.flap .fb{position:absolute;left:0;right:0;overflow:hidden;backface-visibility:hidden;white-space:nowrap}
.flap .ft{top:0;height:50%;transform-origin:50% 100%}
.flap .fb{bottom:0;height:50%;transform-origin:50% 0}
.flap .fb .fi{position:absolute;left:0;bottom:0}
.flap .ft.b{z-index:1}.flap .ft.a{z-index:2}.flap .fb.a{z-index:1}.flap .fb.b{z-index:2}
.flap .ft.a.go{transform:rotateX(-90deg);transition:transform .18s ease-in}
.flap .fb.b{transform:rotateX(90deg)}
.flap .fb.b.go{transform:rotateX(0);transition:transform .18s ease-out .18s}
.flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--bg);opacity:.9}

/* la porte du hub : convergence */
.tags{position:absolute;left:6%;right:6%;bottom:9%;margin:0;font-size:clamp(8px,2.8vw,9.5px);font-weight:500;letter-spacing:.12em;opacity:0;
  color:var(--text);display:flex;gap:8px;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden}
.tags i{flex:0 0 12px;height:1px;background:currentColor;opacity:.6}
.door.front .tags{opacity:.7;transition:opacity .5s .2s}

/* la porte à ouvrir : le logo en plein, coupé en deux ---------------------- */
.door.sealed{border:0;padding:0;background:none;color:inherit;touch-action:none;-webkit-touch-callout:none;
  user-select:none;-webkit-user-select:none;cursor:pointer;outline-offset:8px;--p-glow:var(--open,0);--p-seal:#1E2226}
.door.sealed:focus-visible{outline:2px solid var(--rose)}
.sealed .half{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;transform-origin:0 0;
  transition:transform .4s var(--eo4)}
.sealed .half.l{left:0;transform:translateX(calc(var(--open,0) * -6px))}
.sealed .half.r{left:50%;transform:translateX(calc(var(--open,0) * 6px))}
.sealed .half .lg{position:absolute;top:0;width:200%;height:100%}
.sealed .half.l .lg{left:0}
.sealed .half.r .lg{left:-100%}
.sealed.holding .half{transition:none}
.sealed.holding{transform:scale(calc(var(--s,1) * .985))}
.hold-label{position:absolute;left:-20%;right:-20%;top:calc(100% + 14px);text-align:center;font-size:12px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text);opacity:0;transition:opacity .3s}
.door.front .hold-label{opacity:.85}
.door.front .hold-label.dim{opacity:.4}
.sealed.opening{transition:none;transform:scale(1)}
.sealed.opening .half{transition:transform .62s var(--eo4)}
.sealed.opening .half.l{transform:translateX(-54%)}
.sealed.opening .half.r{transform:translateX(54%)}
.sealed.opening .hold-label{opacity:0}
.sealed.flying .half{transition:transform .68s var(--eio),opacity .25s .55s}
.sealed.flying .half{opacity:1}
.sealed.faded .half{opacity:0}
.sealed.gone{visibility:hidden}
.doors.gone .door:not(.sealed){opacity:0;transition:opacity .3s}

.spill{position:absolute;left:50%;top:53%;width:calc(var(--doorW) * .5);height:calc(var(--doorH) * .62);
  margin:calc(var(--doorH) * -.31) 0 0 calc(var(--doorW) * -.25);border-radius:50% 50% 12% 12%;
  background:var(--brume);opacity:0;transform:scale(1);pointer-events:none;z-index:1;will-change:transform}
.spill.on{opacity:1;transform:scale(14);transition:transform .8s var(--eio)}
.spill.off{transition:opacity .35s;opacity:0}

/* le mot du linteau -------------------------------------------------------- */
.lintel{position:absolute;left:0;right:0;top:calc(53% - var(--doorH) / 2);text-align:center;z-index:8;pointer-events:none;
  font-size:var(--lintel);font-weight:700;letter-spacing:-.045em;line-height:1;color:var(--text);
  transform:translateY(calc(-100% - .1em))}
.word{display:inline-block;white-space:nowrap}
.lintel.out{opacity:0;transform:translateY(calc(-100% - .1em)) translateY(.4em) scale(.94);
  transition:opacity .45s var(--eio),transform .55s var(--eio)}
.lintel.gone{visibility:hidden}

/* le logotype, à la fin ---------------------------------------------------- */
.wordmark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9;display:flex;align-items:center;gap:.2em;
  white-space:nowrap;font-size:var(--wm);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--graphite);visibility:hidden}
.wordmark.on{visibility:visible}
.mark{flex:0 0 auto;width:calc(var(--wm) * .82);height:calc(var(--wm) * 1.07);opacity:0;
  --p-out:#1E2226;--p-body:#F93486;--p-seal:#E9ECEA;--p-glow:.78;transition:opacity .3s}
.mark.in{opacity:1}
.wm-g8te .eight{color:var(--rose)}
.colon{color:var(--rose);font-weight:500;padding:0 .04em}
.wm-g8te,.colon,.wm-hub{opacity:0;transform:translateY(.28em);transition:opacity .4s,transform .45s var(--eo5)}
.wordmark.txt-in .wm-g8te{opacity:1;transform:none}
.wordmark.txt-in .colon{opacity:1;transform:none;transition-delay:.12s}
.wordmark.txt-in .wm-hub{opacity:1;transform:none;transition-delay:.2s}
.wm-hub span{display:inline-block}
.tagline{position:absolute;left:24px;right:24px;top:calc(50% + var(--wm) * 1.05);margin:0;text-align:center;z-index:9;
  font-size:clamp(16px,4.2vw,22px);font-weight:400;line-height:1.35;color:var(--graphite);opacity:0;transform:translateY(12px);
  transition:opacity .45s,transform .5s var(--eo5)}
.tagline.on{opacity:1;transform:none}

/* HUD du bas -------------------------------------------------------------- */
.hud{position:absolute;left:0;right:0;bottom:0;z-index:12;height:calc(64px + var(--safe-b));padding:0 calc(20px + var(--safe-r)) var(--safe-b) calc(20px + var(--safe-l));pointer-events:none}
.hud>*{pointer-events:auto}
.label{position:absolute;left:calc(20px + var(--safe-l));bottom:calc(24px + var(--safe-b));display:inline-flex;align-items:center;gap:7px;
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--label);transition:color .3s}
.cue{position:absolute;left:50%;bottom:calc(14px + var(--safe-b));transform:translateX(-50%);width:56px;height:56px;border:0;background:none;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;color:var(--text);opacity:0;visibility:hidden;
  transition:opacity .5s,visibility 0s .5s}
.cue.on{opacity:.9;visibility:visible;transition-delay:0s}
.cue svg{animation:cue 1.6s ease-in-out infinite;transform:rotate(var(--rot,0deg))}
@keyframes cue{0%,100%{translate:0 0}50%{translate:0 5px}}
.cue-text{font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;opacity:.7;white-space:nowrap}
.tapopen{position:absolute;right:calc(20px + var(--safe-r));bottom:calc(16px + var(--safe-b));border:1px solid var(--rose);background:none;color:var(--text);
  min-height:44px;padding:0 16px;border-radius:999px;font-size:12px;font-weight:500;letter-spacing:.06em}
.done .label,.done .cue{color:var(--graphite)}

/* ---------- l'autre côté (formulaire) ------------------------------------ */
.other-side{position:relative;z-index:15;background:var(--brume);color:var(--graphite);min-height:var(--vh);
  padding:calc(72px + var(--safe-t)) calc(24px + var(--safe-r)) calc(40px + var(--safe-b)) calc(24px + var(--safe-l));display:flex;flex-direction:column}
.other-side[hidden]{display:none}
.returning .other-side{min-height:100vh;min-height:100svh}
.wrap{width:100%;max-width:440px;margin:0 auto;flex:1}
.smallmark{margin:0 0 40px;font-size:15px;font-weight:700;letter-spacing:-.02em}
.smallmark span,.foot b{color:var(--rose);font-weight:700}
.eyebrow{margin:0 0 14px;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--rose-deep)}
.other-side h2{margin:0 0 12px;font-size:clamp(27px,7.2vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.sub{margin:0 0 30px;font-size:16px;line-height:1.5;color:rgba(30,34,38,.72)}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:500;margin-bottom:6px;color:rgba(30,34,38,.85)}
.field input{width:100%;height:56px;padding:0 16px;font:inherit;font-size:17px;font-weight:500;color:var(--graphite);background:#fff;
  border:1px solid rgba(30,34,38,.22);border-radius:10px;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.field input::placeholder{color:rgba(30,34,38,.32)}
.field input:focus{border-color:var(--rose);box-shadow:0 0 0 3px rgba(249,52,134,.2)}
.field input.bad{border-color:var(--rose-deep);background:#FCF3F6}
.err{margin:6px 0 0;font-size:13px;line-height:1.4;color:var(--rose-deep);min-height:0}
.err:empty{display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:58px;margin-top:8px;padding:0 18px;
  border:0;border-radius:10px;background:var(--rose);color:#fff;font-size:19px;font-weight:700;letter-spacing:-.01em;
  overflow:hidden;transition:transform .12s,filter .2s;-webkit-appearance:none;appearance:none}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--graphite);outline-offset:3px}
.btn[disabled]{cursor:default}
.btn .btn-arr{transition:transform .2s var(--eo4)}
.btn:hover .btn-arr,.btn:focus-visible .btn-arr{transform:translateX(4px)}
.btn-8{display:none;font-weight:700;font-size:20px;line-height:1;transition:transform .5s var(--eio)}
.btn.sending .btn-8{display:block;animation:eightspin 1.2s ease-in-out infinite}
.btn.sending .btn-arr{display:none}
@keyframes eightspin{0%{transform:rotate(0)}40%,60%{transform:rotate(90deg)}100%{transform:rotate(90deg)}}
.btn::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%;opacity:.75}
.btn.sending::after{transform:scaleX(1);transition:transform .7s var(--eio)}
.micro{margin:18px 0 0;font-size:13.5px;line-height:1.5;color:rgba(30,34,38,.62)}
.legal{margin:6px 0 0;font-size:12px;line-height:1.45;color:rgba(30,34,38,.5)}
.link{display:inline-block;background:none;border:0;padding:10px 0;margin:-10px 0;color:var(--rose-deep);text-decoration:underline;text-underline-offset:3px;font-size:inherit}
.welcome[hidden],.signup[hidden]{display:none}
.foot{width:100%;max-width:440px;margin:56px auto 0;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:500;letter-spacing:.02em;color:rgba(30,34,38,.55)}
.foot a{color:inherit;text-decoration:none}
.foot a:hover{color:var(--graphite)}

/* ---------- le jeu -------------------------------------------------------- */
.game{position:fixed;inset:0;z-index:50;background:var(--navy)}
.game[hidden]{display:none}
.game iframe{position:absolute;inset:0;width:100%;height:100%;border:0;visibility:hidden;background:var(--navy)}
.game.live iframe{visibility:visible}
.panel{position:absolute;top:0;bottom:0;width:50.5%;background:var(--graphite);will-change:transform}
.panel.l{left:0;transform:translateX(-101%)}
.panel.r{right:0;transform:translateX(101%)}
.panel::after{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--rose);opacity:0;transition:opacity .08s}
.panel.l::after{right:0}.panel.r::after{left:0}
.game.closing .panel{transform:none;transition:transform .5s var(--eo4)}
.game.parting .panel.l{transform:translateX(-101%);transition:transform .6s var(--eio)}
.game.parting .panel.r{transform:translateX(101%);transition:transform .6s var(--eio)}
.game.flash .panel::after{opacity:1}
.game.done .panel{display:none}
.count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;text-align:center;padding:0 20px;
  overflow-wrap:anywhere;font-size:clamp(34px,10vw,120px);font-weight:700;letter-spacing:-.04em;line-height:1;color:#fff;opacity:0;
  transform:scale(.96);transition:opacity .18s,transform .18s var(--eo4)}
.count.on{opacity:1;transform:none}
.count.rose{color:var(--rose)}.count.bleu{color:#6E86FF}
.count.zoom{transform:scale(6);opacity:0;transition:transform .3s var(--eio),opacity .25s}
.pill{position:absolute;left:calc(12px + var(--safe-l));bottom:calc(12px + var(--safe-b));z-index:3;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px 0 12px;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(14,12,22,.55);color:#fff;font-size:12px;font-weight:500;letter-spacing:.06em;
  visibility:hidden;opacity:.55;transition:opacity .2s}
.pill:hover,.pill:focus-visible{opacity:1}
.game.done .pill{opacity:.4;visibility:visible}

/* ---------- curseur (desktop) et toast ---------------------------------- */
.cursor{position:fixed;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;z-index:100;pointer-events:none;opacity:0;color:var(--text);will-change:transform}
.cursor-on .stage{cursor:none}
.cursor-on .cursor.live{opacity:.9}
.cursor-on .cursor.over{opacity:0}
.toast{position:fixed;left:50%;top:calc(14px + var(--safe-t));z-index:60;transform:translate(-50%,-20px);opacity:0;pointer-events:none;
  padding:10px 16px;border-radius:999px;background:rgba(30,34,38,.92);color:var(--brume);font-size:13.5px;font-weight:500;white-space:nowrap;
  max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis;transition:opacity .3s,transform .4s var(--eo5)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- mouvement réduit ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .door.front>.lg{animation:none}
  .cue svg{animation:none}
  .flap .ft.a.go,.flap .fb.b.go{transition:none}
  /* Le volet est remplacé par un fondu : le marché continue de changer sans
     mouvement. Voir flapTo() dans app.js. */
  .flap{transition:opacity .15s linear}
  .flap.fade{opacity:0}
  .arr{transition:none}
  .btn.sending .btn-8{animation:none}
  .rm .sealed .half,.rm .lintel,.rm .spill,.rm .tagline,.rm .mark,.rm .wm-g8te,.rm .colon,.rm .wm-hub{transition:opacity .3s!important}
  .rm .panel{transition:transform .3s!important}
  .rm .count{transition:opacity .2s!important}
}

/* ---------- desktop ------------------------------------------------------- */
@media (min-width:900px){
  .brand{font-size:16px}
  .line{left:9%;right:9%}
  .other-side{padding-top:96px}
  .other-side h2{font-size:38px}
}
@media (max-height:520px){
  :root{--lintel:clamp(42px,13vh,80px)}
  .hold-label{top:calc(100% + 6px)}
}