/* ══════════════════════════════════════════════════════════════════════
   WebSpace — a project page in the scene template (portfolio/*.html, 2026-11-03)
   One long picture of the same frosty space, top to bottom, cut into bands (assets/img/work/<project>/scene/).
   Every band shows its slice of the picture at the same width (--sw), centred, so the slices meet with no seam;
   on narrow screens the picture keeps 760 px and its sides are cropped. Everything tied to the picture (the name,
   the hero's front layer, the glass cards, text blocks) is placed in picture pixels: y / 1440 of --sw from the
   band's top, so it stays on its rock, plinth or phone at every width. Band heights at 1440: 1080 · 640 · 1040 ·
   780 · 660 · 300 · 450 (the footer). The nav, buttons, "Ready for launch?" and footer markup are shared (style.css).
   ══════════════════════════════════════════════════════════════════════ */

.cw-page{background:#060C15}
.cw{background:#060C15;container-type:inline-size}   /* the page is the container (not each band), so text can run over the next band */
.cw-band{position:relative;overflow-x:clip;background:#060C15;
  --sw:max(100cqw,760px)}   /* resolved where it is used, so cqw is the page's width */
.cw-pic{display:block;width:var(--sw);max-width:none;height:auto;margin-left:calc(50% - var(--sw) / 2);user-select:none}

/* text laid on the picture: --y is the top in picture pixels (1440 wide) from the band's top */
.cw-over{position:absolute;left:0;right:0;z-index:3;top:calc(var(--sw) * var(--y, 0) / 1440)}
/* the fog behind text is mid-grey, so the text gets a soft shadow and a faint dark halo behind its block */
.cw-over .wrap{position:relative;isolation:isolate}
.cw-over .wrap::before{content:"";position:absolute;inset:-60px 4% -60px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(6,12,21,.62),rgba(6,12,21,0))}
.cw-over :is(p,h2,li){text-shadow:0 2px 18px rgba(4,8,14,.75)}
.cw-h{margin-top:16px;font:700 clamp(30px,3.6vw,54px)/1.04 var(--font);letter-spacing:-.04em;color:var(--white)}
.cw-text{margin:18px auto 0;max-width:44rem;font-size:clamp(15px,1.15vw,17px);line-height:1.65;color:var(--cloud)}

/* ── 1 · hero: the name behind the lid ── */
.cw-name{position:absolute;z-index:1;left:calc(50% - var(--sw) / 2);width:var(--sw);top:calc(var(--sw) * 22 / 1440);margin:0;
  text-align:center;white-space:nowrap;pointer-events:none;
  font:800 calc(var(--sw) * var(--ns, .136))/1 var(--font);letter-spacing:-.015em;text-transform:uppercase}
.cw-name span{color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(180deg,rgba(255,255,255,.4) 0%,rgba(255,255,255,.22) 45%,rgba(255,255,255,.08) 100%)}
.cw-front{position:absolute;z-index:2;top:0;left:calc(50% - var(--sw) / 2);width:var(--sw);max-width:none;height:auto;pointer-events:none}
.cw-hero-in{--y:752;text-align:center}
.cw-hero-in .eyebrow{justify-content:center}
.cw-lede{margin:18px auto 0;max-width:40rem;font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:var(--cloud)}
.cw-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}

/* ── 2 · at a glance: three spotlight cards standing on the plinth. Its top face runs from y 310 (back edge) to 334
   (front edge); the cards stand at y 325, so a strip of the stone shows in front of them and their shadow falls on it. A plain-CSS port of the
   "GlowCard" React component: a light that follows the pointer (case-scene.js sets --x / --y in screen pixels and
   --xp, 0 → 1 across the screen), drawn with background-attachment:fixed so one light spans all three cards; the
   edge lights up where the light is (::before, ::after), and a blurred copy of that edge glows outside (.glow-halo).
   The hue moves from our cyan (184) towards light blue as the pointer crosses the screen. ── */
.cw-cards{position:absolute;z-index:3;list-style:none;margin:0;padding:0;
  left:calc(50% - var(--sw) / 2 + var(--sw) * .085);width:calc(var(--sw) * .83);bottom:calc(100% - var(--sw) * 325 / 1440);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--sw) * .018);align-items:stretch}
.glow{--base:184;--spread:30;--radius:22;--border:2;--size:300;
  --border-size:calc(var(--border) * 1px);--spotlight-size:calc(var(--size) * 1px);--hue:calc(var(--base) + var(--xp, 0) * var(--spread));
  position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:calc(var(--sw) * .215);
  padding:clamp(18px,2.1vw,34px);border-radius:calc(var(--radius) * 1px);color:var(--cloud);
  border:var(--border-size) solid hsl(0 0% 100% / .14);
  background-color:hsl(205 30% 70% / .1);
  background-image:radial-gradient(var(--spotlight-size) var(--spotlight-size) at calc(var(--x, -999) * 1px) calc(var(--y, -999) * 1px),
    hsl(var(--hue) 100% 70% / .12),transparent);
  background-size:calc(100% + 2 * var(--border-size)) calc(100% + 2 * var(--border-size));background-position:50% 50%;background-attachment:fixed;
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:inset 0 1px 0 hsl(0 0% 100% / .22),0 1rem 2rem -1rem #000}
.glow::before,.glow::after,.glow-halo::before{content:"";position:absolute;inset:calc(var(--border-size) * -1);pointer-events:none;
  border:var(--border-size) solid transparent;border-radius:calc(var(--radius) * 1px);
  background-attachment:fixed;background-size:calc(100% + 2 * var(--border-size)) calc(100% + 2 * var(--border-size));
  background-repeat:no-repeat;background-position:50% 50%;
  -webkit-mask:linear-gradient(transparent,transparent),linear-gradient(#fff,#fff);-webkit-mask-clip:padding-box,border-box;-webkit-mask-composite:source-in;
  mask:linear-gradient(transparent,transparent),linear-gradient(#fff,#fff);mask-clip:padding-box,border-box;mask-composite:intersect}
.glow::before,.glow-halo::before{filter:brightness(2);
  background-image:radial-gradient(calc(var(--spotlight-size) * .75) calc(var(--spotlight-size) * .75) at calc(var(--x, -999) * 1px) calc(var(--y, -999) * 1px),
    hsl(var(--hue) 100% 50% / 1),transparent 100%)}
.glow::after{background-image:radial-gradient(calc(var(--spotlight-size) * .5) calc(var(--spotlight-size) * .5) at calc(var(--x, -999) * 1px) calc(var(--y, -999) * 1px),
    hsl(0 100% 100% / 1),transparent 100%)}
.glow-halo{position:absolute;inset:0;pointer-events:none;border-radius:calc(var(--radius) * 1px);will-change:filter;
  filter:blur(calc(var(--border-size) * 10))}
.glow-halo::before{inset:-10px;border-width:10px}
/* a soft contact shadow where the card meets the stone */
/* standing on the stone, lit from the upper left: a brighter top-left edge, a little shade inside the glass near its
   foot, a tight dark line where it meets the stone, and a soft shadow thrown back and to the right */
.cw-cards .glow{box-shadow:inset 1px 1px 0 hsl(0 0% 100% / .26),inset -1px 0 0 hsl(0 0% 0% / .18),
  inset 0 -34px 34px -22px rgba(0,0,0,.42),0 3px 2px -1px rgba(0,0,0,.85),14px 6px 16px -8px rgba(0,0,0,.55),0 1rem 2rem -1.2rem #000}
/* contact shadows on the plinth\x27s top face, one under each card */
.cw-cards::after{content:"";position:absolute;z-index:-1;left:-1.5%;right:-1.5%;bottom:-9px;height:20px;pointer-events:none;filter:blur(3px);
  background:radial-gradient(closest-side,rgba(0,0,0,.7),rgba(0,0,0,0)) 0 0/34.5% 100% no-repeat,
    radial-gradient(closest-side,rgba(0,0,0,.7),rgba(0,0,0,0)) 50% 0/34.5% 100% no-repeat,
    radial-gradient(closest-side,rgba(0,0,0,.7),rgba(0,0,0,0)) 100% 0/34.5% 100% no-repeat}
.cw-num{display:inline-block;padding:8px 15px;border-radius:999px;font:600 13px/1 var(--font);letter-spacing:.08em;
  color:var(--white);background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.glow:last-child .cw-num{background:var(--white);color:var(--navy)}
.glow h2,.glow h3{margin-top:auto;padding-top:clamp(16px,1.8vw,30px);font:600 12px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:#C9CED8}
.glow h3{margin-top:0;padding-top:16px}
.glow p{margin-top:10px;font-size:clamp(14px,1.1vw,16px);line-height:1.5;color:rgba(245,247,249,.82)}
.glow .cw-card-big{margin-top:12px;font:600 clamp(18px,1.75vw,26px)/1.22 var(--font);letter-spacing:-.01em;color:var(--white)}
.cw-live{display:flex;align-items:center;gap:9px}
.cw-live i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px rgba(30,193,203,.2)}
.cw-pills{display:flex;flex-wrap:wrap;gap:7px}
.cw-pills i{font-style:normal;padding:8px 14px;border-radius:999px;font:500 clamp(13px,1vw,15px)/1 var(--font);color:var(--cloud);
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}

/* ── 3 · the challenge above the phones (they start at y 98); the impact in the clear sky to their right. The big
   phone's right edge runs down at x 1100, so the list starts at 1138 (a clear gap) and keeps a gutter on the right ── */
.cw-challenge-head{--y:-140;text-align:center}
.cw-challenge-head .eyebrow{justify-content:center}
.cw-impact{--y:190;left:auto;right:calc(50% - var(--sw) / 2 + var(--sw) * .03);width:calc(var(--sw) * .18)}
.cw-impact .wrap{padding:0}
.cw-impact-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:18px}
.cw-impact-list li{padding-left:16px;border-left:1px solid rgba(255,255,255,.28)}
.cw-impact-list b{display:block;font:600 clamp(15px,1.2vw,17px)/1.3 var(--font);color:var(--white)}
.cw-impact-list span{display:block;margin-top:5px;font-size:clamp(14px,1.05vw,15px);line-height:1.5;color:rgba(245,247,249,.86)}

/* ── 4 · the admin panel: the heading in the dark fog above the laptops (between the phone, which ends at y -64, and
   the lids, which start at y 95), the text well under them in the open fog (the front laptop ends at y 550), larger so it reads ── */
.cw-admin{--y:600;text-align:center}
.cw-admin .eyebrow{justify-content:center}
.cw-admin-head{position:absolute;left:0;right:0;bottom:calc(100% + var(--sw) * 568 / 1440)}
.cw-admin .cw-text{margin-top:24px;max-width:54rem;font-size:clamp(17px,1.5vw,22px);line-height:1.55;color:var(--white)}

/* ── 5 · behind the build: the boarding pass, in the open middle of the scene ── */
.cw-build-in{--y:56}
.cw-build-in .wrap::before{display:none}

/* ── 6 · ready for launch, in the sky above the planet. This stretch of sky is an even dark navy (the picture's row at
   y 4500), so the text sits in the flow and the band grows to hold it: its colour carries on below the picture and the
   planet meets it with no seam, at every width. --cta-top: where the text starts, from the top of this band. ── */
.cw-launch{text-align:center;--cta-top:-20px;padding-bottom:calc(var(--sw) * 30 / 1440);
  background:linear-gradient(90deg,#00050D,#020C16 35%,#020D18 50%,#020C16 65%,#00050D) 50% 0/var(--sw) 100% no-repeat,#01070F}
.cw-launch .cw-over{position:relative;top:auto;margin-top:calc(var(--sw) * -300 / 1440 + var(--cta-top))}
.cw-launch .s-cta-h{margin:18px 0 16px;font-size:clamp(40px,5.6vw,96px)}

/* ── footer: the planet is the picture's last band; the shared photo and its rise are not used here ── */
.footer-slim.cw-footer{container-type:inline-size;--sw:max(100cqw,760px);padding:0;min-height:0;background:#060C15}
.cw-footer .s-earth{position:relative;left:auto;top:auto;width:var(--sw);margin-left:calc(50% - var(--sw) / 2);
  aspect-ratio:auto;transform:none;mix-blend-mode:normal;will-change:auto}
.cw-footer .s-earth img{height:auto;object-fit:fill}
.cw-footer .fs-in{position:absolute;left:0;right:0;z-index:1;top:calc(var(--sw) * 236 / 1440)}
/* the links sit on the brightest frost of the planet: a soft dark pool behind them and firmer shadows keep them readable */
.cw-footer .fs-in::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(1240px,100%);height:calc(100% + 130px);
  transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(4,8,14,.74),rgba(4,8,14,.45) 55%,rgba(4,8,14,0))}
.cw-footer :is(.fs-nav,.fs-comms,.fs-bottom){text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 14px rgba(0,0,0,.75)}
.cw-footer :is(.fs-nav,.fs-comms) a{color:rgba(245,247,249,.95)}
.cw-footer .fs-bottom{color:rgba(245,247,249,.78);border-top-color:rgba(255,255,255,.2)}
.cw-footer .fs-bottom a{color:rgba(245,247,249,.92)}
.cw-footer :is(.fs-comms,.fs-bottom) a:hover{color:var(--aurora)}

/* ══ the boarding pass (case-scene.js → [data-pass]); a plain-JS port of the "Lunar Boarding Pass" React component,
     in our type and colours. Sizes inside are in cqw of the pass (1000 × 370 on computers). ══ */
.pass{max-width:960px;margin:0 auto}
.pass-stage{position:relative;aspect-ratio:1000/370;perspective:1800px;container-type:inline-size;touch-action:pan-y}
.pass-tilt,.pass-flip{position:absolute;inset:0;transform-style:preserve-3d}
.pass-tilt{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pass-flip{cursor:pointer;transition:transform 1.05s cubic-bezier(.65,-.2,.25,1.2)}
.pass.is-back .pass-flip{transform:rotateY(180deg)}
.pass-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  filter:drop-shadow(0 2.4cqw 3cqw rgba(0,0,0,.55)) drop-shadow(0 .3cqw .5cqw rgba(0,0,0,.3))}
.pass-back{transform:rotateY(180deg)}
.pass-l{display:block;margin-bottom:.5cqw;font:600 max(9px,.78cqw)/1 var(--font);letter-spacing:.18em;text-transform:uppercase;opacity:.7}

/* front: the night pass */
.pass-front{border-radius:1.2cqw;overflow:hidden;color:var(--cloud);
  background:radial-gradient(circle at var(--mx,62%) var(--my,40%),rgba(111,232,240,.09),rgba(111,232,240,0) 42%),#070B14;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.pass-moon{position:absolute;left:0;top:0;width:22.6%;height:100%}
.pass-stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pass-stars .tw{animation:pass-tw 3.4s ease-in-out infinite}
@keyframes pass-tw{0%,100%{opacity:1}50%{opacity:.2}}
.pass-cut{position:absolute;left:22.6%;top:0;bottom:0;border-left:1px dashed rgba(245,247,249,.45)}
.pass-body{position:absolute;left:22.6%;right:0;top:0;bottom:0;padding:2.4cqw 3cqw 2.2cqw;display:flex;flex-direction:column}
.pass-head{display:flex;align-items:baseline;justify-content:space-between;gap:2cqw;padding-bottom:1.3cqw;
  border-bottom:1px solid rgba(255,255,255,.16);font:600 max(10px,1.05cqw)/1 var(--font);letter-spacing:.18em;text-transform:uppercase}
.pass-tier{display:inline-flex;align-items:center;gap:.7cqw;color:var(--aurora)}
.pass-tier svg{width:1.2em;height:1.2em;fill:currentColor}
.pass-title{font:700 max(17px,2.7cqw)/1 var(--font);letter-spacing:.02em;color:var(--white)}
.pass-grid{display:grid;grid-template-columns:1fr 1.15fr 2.4fr;margin:0}
.pass-grid > div{padding:1.7cqw 1.8cqw 0 0;min-width:0}
.pass-grid > div + div{padding-left:1.8cqw;border-left:1px solid rgba(255,255,255,.12)}
.pass-grid dt{font:600 max(9px,.8cqw)/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}
.pass-grid dd{margin:.8cqw 0 0;font:600 max(13px,1.55cqw)/1.25 var(--font);color:var(--white)}
.pass-grid ul{list-style:none;margin:0;padding:0;columns:2;column-gap:2.4cqw}
.pass-grid li{position:relative;break-inside:avoid;padding:0 0 .8cqw 1.3cqw;font:500 max(12px,1.18cqw)/1.4 var(--font);color:var(--cloud)}
.pass-grid li::before{content:"";position:absolute;left:0;top:.55em;width:.45cqw;height:.45cqw;min-width:4px;min-height:4px;border-radius:50%;background:var(--cyan)}
.pass-foot{margin-top:auto;display:flex;justify-content:space-between;gap:2cqw;padding-top:1.1cqw;border-top:1px solid rgba(255,255,255,.12);
  font:600 max(9px,.85cqw)/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}

/* back: the silver pass, its stub on a perforated edge */
.pass-main,.pass-stub{position:absolute;top:0;bottom:0;overflow:hidden;color:var(--navy);
  background:linear-gradient(162deg,#F3F5F7 0%,#D9DDE2 48%,#B9BEC6 100%)}
.pass-main::after,.pass-stub::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(115deg,transparent calc(var(--mx,50%) - 24%),rgba(255,255,255,.7) var(--mx,50%),transparent calc(var(--mx,50%) + 24%))}
.pass-main{left:0;width:77.4%;border-radius:1.2cqw 0 0 1.2cqw;padding:2.4cqw 3cqw 2.2cqw;display:flex;flex-direction:column;
  -webkit-mask:radial-gradient(circle at 100% 50%,#0000 .32cqw,#000 .38cqw) 0 0/100% 1.3cqw repeat-y;
  mask:radial-gradient(circle at 100% 50%,#0000 .32cqw,#000 .38cqw) 0 0/100% 1.3cqw repeat-y}
.pass-main .pass-head{border-bottom-color:rgba(28,28,40,.35);color:var(--navy)}
.pass-main .pass-title{color:var(--navy)}
.pass-brand{flex:1;display:grid;grid-template-columns:1.3fr 1fr;gap:3.4cqw;align-items:center;padding-top:1.4cqw}
.pass-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:.9cqw;margin-top:.6cqw}
.pass-swatches i{display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:5/8;padding:1cqw;border-radius:1cqw;font-style:normal;
  background:var(--c);color:var(--white);box-shadow:inset 0 0 0 1px rgba(28,28,40,.12)}
.pass-swatches i.is-light{color:var(--navy)}
.pass-swatches b{font:600 max(10px,1cqw)/1.15 var(--font)}
.pass-swatches span{margin-top:.3cqw;font:500 max(9px,.82cqw)/1 var(--font);opacity:.75}
.pass-type{display:grid;grid-template-columns:1fr 1fr;gap:2.2cqw 2.4cqw;margin-top:.8cqw}
.pass-type > span{display:flex;flex-direction:column;font:600 max(11px,1.05cqw)/1.25 var(--font)}
.pass-type b{font:600 max(22px,3.6cqw)/1 var(--font);margin-bottom:.6cqw}
.pass-type b[lang="hy"]{font-family:'Noto Sans Armenian',var(--font)}
.pass-type img{width:100%;max-width:14cqw;height:auto;margin:.8cqw 0 .6cqw}
.pass-type small{font:500 max(9px,.8cqw)/1.2 var(--font);opacity:.65;margin-top:.2cqw}
/* a client's wordmark set in type (its font and colours inline on the page), Havn's house mark, a logo picture */
.pass-type .pass-word{font-size:max(14px,1.9cqw);line-height:1.1;margin:.8cqw 0 .6cqw;white-space:nowrap}
.pass-type .pass-havn{display:flex;align-items:center;gap:.4em;font:700 max(20px,2.8cqw)/1 Inter,var(--font);letter-spacing:-.025em;color:#0F172A}
.pass-havn svg{flex:none;width:1.3em;height:1.3em;color:#1F43F5}
.pass-havn em,.pass-havn i{font-style:normal}
.pass-havn i{color:#1F43F5}
.pass-type img.pass-logo{max-width:8cqw}
.pass-stamp{position:absolute;left:30%;top:74%;padding:.45cqw;border:.25cqw solid var(--cyan);border-radius:.6cqw;color:var(--cyan);
  opacity:0;transform:rotate(-9deg);pointer-events:none;mix-blend-mode:multiply}
.pass-stamp > span{display:block;padding:.6cqw 1.6cqw;border:.1cqw solid var(--cyan);border-radius:.35cqw;text-align:center}
.pass-stamp b{display:block;font:800 max(16px,2.6cqw)/1 var(--font);letter-spacing:.18em;text-transform:uppercase}
.pass-stamp small{display:block;margin-top:.5cqw;font:600 max(8px,.8cqw)/1 var(--font);letter-spacing:.1em}
.pass-back.is-torn .pass-stamp{opacity:.9;animation:pass-stamp .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes pass-stamp{0%{opacity:0;transform:rotate(-4deg) scale(1.9)}100%{opacity:.9;transform:rotate(-9deg) scale(1)}}
.pass-stub{left:77.4%;width:22.6%;border:0;margin:0;border-radius:0 1.2cqw 1.2cqw 0;padding:2.4cqw 2.2cqw 2.2cqw;text-align:left;font:inherit;
  display:flex;flex-direction:column;gap:1.6cqw;cursor:grab;touch-action:pan-y;transform-origin:0 100%;
  transition:transform .75s cubic-bezier(.2,.9,.25,1.25);
  -webkit-mask:radial-gradient(circle at 0 50%,#0000 .32cqw,#000 .38cqw) 0 0/100% 1.3cqw repeat-y;
  mask:radial-gradient(circle at 0 50%,#0000 .32cqw,#000 .38cqw) 0 0/100% 1.3cqw repeat-y}
.pass-stub:active{cursor:grabbing}
.pass-stub:focus-visible{outline:2px solid var(--cyan);outline-offset:-5px}
.pass-back.is-torn .pass-stub{transform:translate(2.4cqw,1.1cqw) rotate(4deg);cursor:pointer}
.pass-stub-head{padding-bottom:1.3cqw;border-bottom:1px solid rgba(28,28,40,.35);font:600 max(10px,1.05cqw)/1 var(--font);letter-spacing:.18em;text-transform:uppercase}
.pass-f{display:block;font:600 max(12px,1.3cqw)/1.2 var(--font)}
.pass-row{display:flex;gap:2cqw}
.pass-hint{position:absolute;left:77.4%;bottom:2cqw;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;
  font:600 max(8px,.7cqw)/1 var(--font);letter-spacing:.3em;text-transform:uppercase;color:var(--navy);opacity:.45;pointer-events:none;transition:opacity .3s}
.pass-back.is-torn .pass-hint{opacity:0}

/* the two sides as a pill switch, so it reads as something to press; a line under it says what the pass does */
.pass-switch{display:flex;justify-content:center;flex-wrap:wrap;gap:4px;width:fit-content;max-width:100%;margin:26px auto 0;padding:5px;
  border-radius:26px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.pass-switch button{padding:12px 20px;border-radius:999px;font:600 11px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;
  color:var(--cloud);transition:color .3s,background-color .3s}
.pass-switch button:hover{color:var(--white);background:rgba(255,255,255,.08)}
.pass-switch button[aria-pressed="true"]{color:var(--navy);background:var(--white)}
.pass-switch i{display:none}
.pass-tip{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;font-size:13px;color:rgba(245,247,249,.7)}
.pass-tip::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:pass-tip 2.4s ease-in-out infinite}
@keyframes pass-tip{0%,100%{box-shadow:0 0 0 0 rgba(30,193,203,.5)}50%{box-shadow:0 0 0 6px rgba(30,193,203,0)}}
.pass-tip-back,.pass.is-back .pass-tip-front{display:none}
.pass.is-back .pass-tip-back{display:inline}

@media (prefers-reduced-motion:reduce){
  .pass-tilt,.pass-flip,.pass-stub{transition-duration:.01ms}
  .pass-stars .tw,.pass-back.is-torn .pass-stamp,.pass-tip::before{animation:none}
}

/* ── narrower screens ── */
@media (max-width:1180px){
  .glow{min-height:0;padding:18px 20px}
  .glow h2{padding-top:16px}
  .cw-challenge-head{--y:-200}
  .cw-build-in{--y:150}
  .cw-launch{--cta-top:60px}
  /* the impact moves from the side of the phones to under them */
  .cw-impact{--y:930;left:0;right:0;width:auto}
  .cw-impact .wrap{padding:0 var(--gutter)}
  .cw-impact-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
  .cw-impact-list span{display:none}
  /* the impact row takes the gap above the laptops, so the admin heading goes back on top of its text */
  .cw-admin{--y:556}
  .cw-admin-head{position:static}
  .cw-admin .cw-text{margin-top:18px;font-size:clamp(16px,1.7vw,18px)}
}

/* ── phones and small tablets (to 900 px): the picture keeps at least 760 px and its sides are cropped; the text blocks move to the clear fog between
   the devices; the pass stands upright (the Moon rises over a horizontal perforation); and the sky above the planet
   grows to hold the pass and "Ready for launch?" — that stretch of sky is an even dark navy (the picture's row at
   y 4500), so its colour simply carries on and the planet meets it with no seam. ── */
@media (max-width:900px){
  .pass{max-width:480px}
  .cw-over .wrap::before{inset:-40px -6% -40px}
  .cw-h{font-size:30px}
  .cw-text{font-size:14.5px;line-height:1.6}
  .cw-lede{font-size:15.5px}
  /* the lid comes up to the nav here, and the home page on the laptop already shows the name large: the big
     name stays for screen readers only. To leave room for the cards, the hero keeps its label and buttons and the
     challenge its headline (the hero line and the challenge text say much the same) */
  .cw-name{width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .cw-front{display:none}
  .cw-challenge-head .cw-text,.cw-lede{display:none}
  .cw-hero-in{--y:750}
  .cw-challenge-head{--y:-726}
  html:is([lang="hy"],[lang="ru"]) .cw-challenge-head{--y:-636}   /* the longer Armenian and Russian buttons wrap onto two rows */
  .cw-impact{--y:868}
  .cw-impact-list{grid-template-columns:repeat(3,1fr);gap:10px 12px;margin-top:12px}
  .cw-impact-list li{padding-left:12px}
  .cw-impact-list b{font-size:13px}
  .cw-impact-list span{display:none}
  .cw-admin{--y:620}   /* a clear gap under the laptop's front edge (y 550) */
  .cw-admin .cw-text{font-size:15.5px}
  .cw-build-in{--y:420}
  .cw-build-in .wrap{padding:0 16px}

  .cw-launch{--cta-top:632px;padding-bottom:56px}   /* room for the pass, its switch and the line under it */

  /* the cards: a row to swipe, standing in front of the plinth */
  .cw-cards{left:0;width:100%;bottom:-40px;display:flex;gap:12px;padding:0 16px 14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .cw-cards::-webkit-scrollbar{display:none}
  .cw-cards::after{content:none}
  .glow{flex:0 0 272px;min-height:0;padding:14px 16px;scroll-snap-align:center}
  .glow p{font-size:13px;margin-top:6px}
  .glow .cw-card-big{font-size:16px}
  .glow h2{padding-top:16px}
  .glow h3{padding-top:12px}
  .cw-launch .s-cta-h{font-size:40px}

  .pass-stage{aspect-ratio:auto;height:580px}
  html[lang="hy"] .pass-stage{height:640px}   /* the Armenian list runs longer */
  html[lang="hy"] .cw-launch{--cta-top:692px}
  @media (max-width:480px){   /* the Armenian admin text runs two lines longer on phones: the pass and the ending move down */
    html[lang="hy"] .cw-build-in{--y:615}
    html[lang="hy"] .cw-launch{--cta-top:822px}
  }
  .pass-front,.pass-main,.pass-stub{border-radius:16px}
  .pass-moon{width:100%;height:32%}
  .pass-cut{left:0;right:0;top:32%;bottom:auto;border-left:0;border-top:1px dashed rgba(245,247,249,.45)}
  .pass-body{left:0;top:32%;padding:16px 18px 16px}
  .pass-head{flex-wrap:wrap;gap:8px 14px;padding-bottom:12px}
  .pass-title{order:-1;width:100%;font-size:22px}
  .pass-grid{grid-template-columns:1fr 1fr}
  .pass-grid > div{padding:14px 12px 0 0}
  .pass-grid > div + div{padding-left:12px}
  .pass-grid .pass-wide{grid-column:1/-1;padding-left:0;border-left:0}
  .pass-grid dd{font-size:14px;margin-top:6px}
  .pass-grid ul{columns:1}
  .pass-grid li{font-size:13px;padding-bottom:4px;padding-left:12px}
  .pass-foot{padding-top:10px}

  .pass-main{left:0;width:100%;top:0;bottom:auto;height:66%;padding:16px 18px;border-radius:16px 16px 0 0;
    -webkit-mask:radial-gradient(circle at 50% 100%,#0000 4px,#000 5px) 0 0/13px 100% repeat-x;
    mask:radial-gradient(circle at 50% 100%,#0000 4px,#000 5px) 0 0/13px 100% repeat-x}
  .pass-brand{grid-template-columns:1fr;gap:16px;align-items:start;padding-top:14px}
  .pass-swatches{gap:6px}
  .pass-swatches i{aspect-ratio:4/5;padding:6px;border-radius:8px}
  .pass-type{grid-template-columns:repeat(4,1fr);gap:10px}
  .pass-type b{font-size:22px}
  .pass-type img{max-width:100%}
  .pass-type small{display:none}
  .pass-stamp{left:18%;top:58%}
  .pass-stub{left:0;width:100%;top:66%;bottom:0;padding:16px 18px;border-radius:0 0 16px 16px;
    display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:10px 16px;
    -webkit-mask:radial-gradient(circle at 50% 0,#0000 4px,#000 5px) 0 0/13px 100% repeat-x;
    mask:radial-gradient(circle at 50% 0,#0000 4px,#000 5px) 0 0/13px 100% repeat-x}
  .pass-stub-head{grid-column:1/-1;padding-bottom:10px}
  .pass-back.is-torn .pass-stub{transform:translate(0,14px) rotate(2.5deg)}
  .pass-hint{display:none}
  .pass-switch{padding:4px;gap:2px}
  .pass-switch button{padding:11px 10px;font-size:10px;letter-spacing:.06em}
  .pass-tip{font-size:12.5px;text-align:center}

  /* the footer: the planet at a larger scale, so the links fit on it (the sky above it is even, so the scales meet unseen) */
  .footer-slim.cw-footer{--sw:max(100cqw,1200px)}
  .cw-footer .fs-in{top:96px}
}