/* ==========================================================================
   NADA ENERGY
   Base CSS renders a plain, readable, stacked document. `html.motion` (added
   by app.js only when motion is allowed and the viewport is big enough) opts
   into the pinned scenes and the 3D arc. Nothing below the fold depends on JS.
   ========================================================================== */

@font-face{
  font-family:"Archivo";src:url(fonts/archivo-roman.woff2) format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo";src:url(fonts/archivo-italic.woff2) format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:swap;
}

:root{
  --ink:#07080a;
  --ink-2:#101319;
  --paper:#f3f1ed;
  --mute:#8b919b;
  --accent:#c8ced8;          /* JS overwrites per flavour */
  --flood:#0b0d11;
  --edge:rgba(255,255,255,.12);
  --hud-h:62px;
}
*{box-sizing:border-box}
/* A decorative element past the viewport makes the document scroll sideways
   and slides the fixed header off. clip, not hidden, so sticky still works. */
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.6;font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--paper);color:var(--ink);
  padding:11px 18px;border-radius:2px;font-weight:700;text-decoration:none;transition:top .18s ease}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- display type ---------- */
.disp{
  font-style:italic;font-weight:900;font-stretch:125%;
  text-transform:uppercase;letter-spacing:-.025em;line-height:.86;
}

/* ==========================================================================
   HUD
   ========================================================================== */
.hud{
  position:fixed;top:0;left:0;right:0;height:var(--hud-h);z-index:90;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 18px;gap:12px;
  /* No backdrop-filter here. The header sits over the product scenes, and a
     blurred backdrop turns the can tops into a smeared halo along the exact
     line where the filter region ends. A taller scrim does the same job. */
  background:linear-gradient(rgba(7,8,10,.96) 40%,rgba(7,8,10,.72) 70%,rgba(7,8,10,0));
  height:calc(var(--hud-h) + 26px);padding-bottom:26px;
}
.hud-read{
  margin:0;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);font-variant-numeric:tabular-nums;
}
.hud-sep{opacity:.45;padding:0 .35em}
.hud-mark{
  justify-self:center;text-decoration:none;font-style:italic;font-weight:900;
  font-stretch:125%;font-size:19px;letter-spacing:-.02em;color:var(--paper);
}
.hud-nav{justify-self:end;display:flex;align-items:center;gap:10px}
.hud-menu,.hud-cta{
  font:inherit;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:9px 16px;min-height:36px;border-radius:100px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;
}
.hud-menu{background:none;border:1px solid var(--edge);color:var(--paper)}
.hud-menu:hover{border-color:var(--paper)}
.hud-cta{background:var(--paper);color:var(--ink);border:1px solid var(--paper);
  transition:background .2s ease,color .2s ease}
.hud-cta:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}

.menu{
  position:fixed;top:var(--hud-h);right:14px;z-index:95;
  display:flex;flex-direction:column;min-width:210px;padding:8px;
  background:rgba(16,19,25,.96);border:1px solid var(--edge);border-radius:14px;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 26px 60px rgba(0,0,0,.6);
}
.menu[hidden]{display:none}
.menu a{
  text-decoration:none;padding:12px 14px;border-radius:9px;font-size:14px;font-weight:600;
  min-height:44px;display:flex;align-items:center;
}
.menu a:hover{background:rgba(255,255,255,.08)}

/* ==========================================================================
   BASE (no-JS / reduced-motion / small screens) — a plain document
   ========================================================================== */
.scene{padding:calc(var(--hud-h) + 40px) 18px 60px}
.pin{max-width:1180px;margin:0 auto}
.void,.plinth,.ghost{display:none}

.stage-kicker{
  margin:0 0 26px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
  text-align:center;
}
.ring{display:none}

.grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;
}
.grid a{
  display:flex;flex-direction:column;align-items:center;gap:12px;padding:22px 8px 18px;
  text-decoration:none;border:1px solid var(--edge);border-radius:16px;
  background:radial-gradient(120% 80% at 50% 0%,rgba(255,255,255,.05),transparent 70%);
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}
.grid a:hover{border-color:var(--accent);transform:translateY(-3px)}
.grid img{height:190px;width:auto;filter:drop-shadow(0 18px 26px rgba(0,0,0,.6))}
.grid span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-align:center}

/* Controls that only work with scripting are hidden until `js` is present,
   and the content they reveal is served in full as static text instead. */
.scrub,.rail,.claim-one{display:none}
.js .scrub{display:block}
.js .rail{display:flex}
.js .claim-one{display:block}
.js .claim-all{display:none}
.claim-all{margin:0}
.claim-all dt{margin:20px 0 6px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.claim-all dt:first-child{margin-top:0}
.claim-all dd{margin:0;color:#c3c8d1;max-width:62ch}

/* the scrub bar */
.scrub{max-width:620px;margin:38px auto 40px;text-align:center}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:34px;background:none;cursor:grab;
}
input[type=range]:active{cursor:grabbing}
input[type=range]::-webkit-slider-runnable-track{
  height:3px;border-radius:2px;
  background:linear-gradient(90deg,#8b8f98,var(--accent) 55%,#ffffff);
}
input[type=range]::-moz-range-track{
  height:3px;border-radius:2px;
  background:linear-gradient(90deg,#8b8f98,var(--accent) 55%,#ffffff);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-6.5px;
  border-radius:50%;background:#fff;border:0;
  box-shadow:0 0 0 5px rgba(255,255,255,.14),0 6px 16px rgba(0,0,0,.55);
}
input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:#fff;border:0;
  box-shadow:0 0 0 5px rgba(255,255,255,.14),0 6px 16px rgba(0,0,0,.55);
}
.scrub-now{margin:14px 0 0;font-size:13.5px;color:var(--mute);min-height:3.2em}
.scrub-now strong{
  display:block;font-style:italic;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:23px;letter-spacing:-.02em;color:var(--paper);margin-bottom:5px;
}

/* ---------- flavour detail ---------- */
.detail{display:grid;gap:30px}
.detail-eyebrow{margin:0 0 12px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  font-variant-numeric:tabular-nums}
.detail-name{
  margin:0;font-style:italic;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(38px,10vw,92px);line-height:.86;letter-spacing:-.03em;
}
.detail-note{margin:16px 0 0;max-width:34ch;color:#c3c8d1}
.claim{margin-top:32px;padding-top:26px;border-top:1px solid var(--edge);max-width:42ch;min-height:190px}
.claim-h{margin:0 0 10px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.claim-p{margin:0;color:#c3c8d1;line-height:1.72}
.detail-can{margin:0;text-align:center}
.detail-can img{height:min(52vh,430px);width:auto;margin:0 auto;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.7))}

.rail{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rail button{
  font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:11px 16px;min-height:44px;border-radius:100px;cursor:pointer;
  background:none;border:1px solid var(--edge);color:var(--mute);
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.rail button:hover{color:var(--paper);border-color:var(--paper)}
.rail button[aria-selected=true]{background:var(--accent);border-color:var(--accent);color:#0a0b0d}

/* ---------- line-up ---------- */
.scene-lineup{padding:80px 18px 90px;background:linear-gradient(var(--ink),#0d1015)}
.lineup-head{max-width:1180px;margin:0 auto 44px}
.lineup-head h2{
  margin:0;font-style:italic;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(40px,10vw,110px);line-height:.85;letter-spacing:-.035em;
}
.lineup-head h2 em{font-style:italic;color:var(--accent)}
.lineup-head p{margin:20px 0 0;max-width:46ch;color:#aab0ba}
.row{
  max-width:1180px;margin:0 auto;display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(2px,1.4vw,14px);flex-wrap:wrap;
}
.row img{height:clamp(150px,26vw,300px);width:auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.65))}

/* ---------- faq ---------- */
.scene-faq{padding:90px 18px 100px;background:#0d1015}
.faq-h{
  max-width:1180px;margin:0 auto 44px;
  font-style:italic;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(38px,10vw,104px);line-height:.84;letter-spacing:-.035em;
}
.faq-h em{font-style:italic;-webkit-text-stroke:1px var(--paper);color:transparent}
.faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--edge)}
.faq-list details{border-bottom:1px solid var(--edge)}
.faq-list summary{
  cursor:pointer;padding:22px 44px 22px 0;position:relative;list-style:none;
  font-size:clamp(16px,2.4vw,19px);font-weight:600;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq-list details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-list summary:hover{color:var(--accent)}
.faq-list p{margin:0 0 26px;max-width:62ch;color:#aab0ba}

/* ---------- footer ---------- */
.foot{background:var(--ink);padding:70px 18px 40px;border-top:1px solid var(--edge)}
.foot-in{max-width:1180px;margin:0 auto}
.foot-mark{
  margin:0 0 34px;font-style:italic;font-weight:900;font-stretch:125%;
  font-size:clamp(56px,17vw,190px);line-height:.8;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.3);
}
.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px}
.foot-cols h3{margin:0 0 8px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.foot-cols p{margin:0;font-size:14.5px;color:#9aa0aa;line-height:1.7}
.foot-note{margin:44px 0 0;padding-top:22px;border-top:1px solid var(--edge);
  font-size:12.5px;color:#7d838e;max-width:62ch}   /* 5.26:1; #6f7580 was 4.32 */

/* ==========================================================================
   MOTION MODE — pinned scenes and the 3D arc
   ========================================================================== */
html.motion .scene{padding:0;position:relative}
/* One screen. In v1 this was 360vh because document scroll WAS the arc's
   position; here the arc has its own wheel surface, so the section is just a
   section and the page is ~2,000px shorter. */
html.motion .scene-range{height:100vh}
/* In motion mode the flavour copy lives in the click-opened viewer, so this
   section is only the plain-mode / no-JS home for the same words. */
html.motion .scene-flavour{display:none}
/* No negative margin. There is no sticky tail to cover any more: the range is
   exactly one viewport and the line-up simply follows it. */
html.motion .scene-lineup{position:relative;z-index:3;
  background:linear-gradient(180deg,var(--ink),#0d1015)}

/* No CSS scroll-snap. The arc is not a scroll container, so the browser has
   nothing to snap; settling on a can is done in JS after the wheel goes quiet. */
html.locked{overflow-y:hidden}
html.motion .pin{
  position:relative;height:100vh;max-width:none;
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;
}
html.motion .grid{display:none}

/* the studio void */
html.motion .void{
  display:block;position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(80% 55% at 50% 34%, color-mix(in srgb, var(--flood) 82%, #fff 6%) 0%, transparent 70%),
    radial-gradient(120% 70% at 50% 108%, color-mix(in srgb, var(--accent) 22%, #000) 0%, transparent 62%),
    var(--flood);
  transition:background 300ms cubic-bezier(.4,0,.2,1);
}
html.motion .scene-range .stage-kicker{position:relative;z-index:3;margin-top:calc(var(--hud-h) + 6px)}

/* the arc */
html.motion .stage{
  position:relative;z-index:2;flex:1;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  perspective:1500px;perspective-origin:50% 46%;
}
html.motion .ring{
  display:block;position:relative;width:100%;height:min(46vh,380px);
  transform-style:preserve-3d;
  /* THE RING MUST NOT BE HIT-TESTABLE. preserve-3d puts its own box on the
     Z=0 plane of the 3D context, and every can sits at NEGATIVE z (behind it),
     so the ring wins every hit test while being completely invisible. Clicks on
     the cans silently did nothing. pointer-events inherits, so the cans have to
     opt back in below. */
  pointer-events:none;
}
html.motion .can{
  position:absolute;left:50%;top:50%;width:auto;
  /* `translate` composes BEFORE `transform`, so the JS transform can own the
     arc maths without having to know the can's rendered width. */
  translate:-50% -50%;
  will-change:transform,opacity;
  pointer-events:auto;          /* see the note on .ring above */
}
html.motion .can img{
  height:min(42vh,340px);width:auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.75));
}
/* absolute so the reflection does not add to the wrapper height, which would
   push the can itself off centre */
html.motion .can .refl{
  position:absolute;left:0;top:100%;margin-top:2px;
  height:min(42vh,340px);width:auto;transform:scaleY(-1);opacity:.11;
  -webkit-mask-image:linear-gradient(transparent 74%,#000);
  mask-image:linear-gradient(transparent 74%,#000);
  filter:none;
}
html.motion .can-btn{
  position:absolute;inset:0;z-index:2;background:none;border:0;padding:0;cursor:pointer;
}
html.motion .plinth{
  display:block;position:absolute;left:50%;bottom:8%;translate:-50% 0;
  width:min(30vw,300px);height:min(4vw,34px);border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 32%, transparent), transparent 70%);
  filter:blur(11px);opacity:.5;transition:background 300ms cubic-bezier(.4,0,.2,1);
}
html.motion .scrub{position:relative;z-index:3;margin:0 auto 42px;padding:0 18px;width:100%}

/* flavour scene */
html.motion .scene-flavour .pin{justify-content:center}
/* Sits behind the CAN on the right, not behind the copy on the left, and a
   left scrim keeps the paragraph off it entirely. Ghost type crossing body
   text is the fastest way to make a scene look busy and unreadable. */
html.motion .ghost{
  display:block;position:absolute;right:3%;top:50%;translate:0 -50%;z-index:1;
  margin:0;white-space:nowrap;pointer-events:none;user-select:none;
  font-style:italic;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(64px,12vw,180px);line-height:.8;letter-spacing:-.045em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.10);
}
html.motion .scene-flavour .pin::after{
  content:"";position:absolute;inset:0 auto 0 0;width:min(62%,880px);z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(4,5,8,.88) 0%, rgba(4,5,8,.62) 45%, transparent 100%);
}
html.motion .scene-flavour{background:none}
html.motion .scene-flavour .pin{
  background:
    radial-gradient(70% 60% at 62% 46%, color-mix(in srgb, var(--flood) 70%, #fff 8%), transparent 68%),
    linear-gradient(160deg, var(--flood), #06070a 78%);
  transition:background 300ms cubic-bezier(.4,0,.2,1);
}
html.motion .detail{
  position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;
  padding:calc(var(--hud-h) + 20px) clamp(18px,5vw,70px) 40px;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr) auto;
  align-items:center;gap:clamp(20px,4vw,60px);
}
html.motion .detail-can img{height:min(66vh,620px)}
html.motion .rail{flex-direction:column;flex-wrap:nowrap;gap:10px}
html.motion .rail button{width:100%;justify-content:flex-start;text-align:left}

/* line-up gets real depth in motion mode */
html.motion .row{
  flex-wrap:nowrap;perspective:1100px;perspective-origin:50% 50%;
  transform-style:preserve-3d;justify-content:center;
}
html.motion .row img{
  height:clamp(170px,25vw,320px);flex:0 0 auto;
  transition:transform .36s cubic-bezier(.2,.7,.3,1);will-change:transform;
}

/* ==========================================================================
   THE VIEWER — the zoom-in state
   ========================================================================== */
.viewer{display:none}
.viewer[hidden]{display:none}
html.motion .viewer:not([hidden]){
  display:block;position:fixed;inset:0;z-index:120;
}
.viewer .rail,.viewer .rail button{cursor:pointer}
.viewer-close{cursor:pointer}
.viewer-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(66% 58% at 62% 46%, color-mix(in srgb, var(--flood) 66%, #fff 9%), transparent 68%),
    linear-gradient(160deg, var(--flood), #05060a 78%);
  opacity:0;transition:opacity .24s ease;
}
.viewer-bg::after{
  content:"";position:absolute;inset:0 auto 0 0;width:min(62%,880px);
  background:linear-gradient(90deg, rgba(4,5,8,.9) 0%, rgba(4,5,8,.64) 45%, transparent 100%);
}
.viewer.in .viewer-bg{opacity:1}

.viewer .ghost{
  display:block;position:absolute;right:3%;top:50%;translate:0 -50%;z-index:1;
  margin:0;white-space:nowrap;pointer-events:none;user-select:none;
  font-style:italic;font-weight:900;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(64px,12vw,180px);line-height:.8;letter-spacing:-.045em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.10);
  opacity:0;transition:opacity .27s ease .04s;
}
.viewer.in .ghost{opacity:1}

.viewer-close{
  position:absolute;top:calc(var(--hud-h) + 14px);right:20px;z-index:6;
  font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 18px;
  border-radius:100px;cursor:pointer;color:var(--paper);
  background:rgba(255,255,255,.07);border:1px solid var(--edge);
  opacity:0;transition:opacity .22s ease .05s,background .17s ease,border-color .17s ease;
}
.viewer-close span{font-size:17px;line-height:0}
.viewer-close:hover{background:rgba(255,255,255,.16);border-color:var(--paper)}
.viewer.in .viewer-close{opacity:1}

.viewer-in{
  position:relative;z-index:4;height:100%;width:100%;max-width:1240px;margin:0 auto;
  padding:calc(var(--hud-h) + 30px) clamp(18px,5vw,70px) 40px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr) auto;
  align-items:center;gap:clamp(20px,4vw,60px);
}
.viewer-copy{opacity:0;transform:translateY(14px);
  transition:opacity .23s ease .04s,transform .3s cubic-bezier(.2,.7,.3,1) .04s}
.viewer.in .viewer-copy{opacity:1;transform:none}
.viewer-can{margin:0;text-align:center}
/* The image that grows. It is NOT faded in: it takes over from the arc's can at
   the identical rect with the identical pixels, so it must be opaque from the
   first frame or the handover shows as a flicker. JS owns its transform. */
.viewer-can img{height:min(74vh,680px);width:auto;margin:0 auto;
  filter:drop-shadow(0 44px 62px rgba(0,0,0,.72));
  will-change:transform}
.viewer .rail{flex-direction:column;flex-wrap:nowrap;gap:10px;
  opacity:0;transition:opacity .23s ease .07s}
.viewer.in .rail{opacity:1}
.viewer .rail button{width:100%;justify-content:flex-start;text-align:left}

/* the arc ducks out of the way while the viewer is open */
html.motion .stage,html.motion .scrub,html.motion .stage-kicker{
  transition:opacity .21s ease,transform .28s cubic-bezier(.4,0,.2,1);
}
html.viewing .stage{opacity:0;pointer-events:none}
html.viewing .scrub,html.viewing .stage-kicker{opacity:0;pointer-events:none}

/* The affordance is the can itself lifting under the pointer, not a caption
   telling you to click. The JS owns .can's transform and filter every frame,
   so hover has to live on the image. */
html.motion .can-btn{cursor:pointer}
html.motion .can img{transition:filter .16s ease}
html.motion .can:hover img:not(.refl),
html.motion .can-btn:focus-visible ~ img{
  filter:drop-shadow(0 30px 44px rgba(0,0,0,.8)) brightness(1.12);
}

@media(max-width:900px){
  .viewer-in{grid-template-columns:1fr;gap:18px;align-content:center;
    padding-top:calc(var(--hud-h) + 56px)}
  .viewer-can{order:-1}
  .viewer-can img{height:min(38vh,330px)}
  .viewer .rail{flex-direction:row;flex-wrap:wrap}
  .viewer .rail button{width:auto}
}

/* loader */
/* Hidden unless motion mode asked for it, so a plain document never sees it.
   .gone is also set by a failsafe timer in the head, so a missing app.js
   cannot leave the loader covering the page. */
#loader{display:none}
html.motion #loader{
  position:fixed;inset:0;z-index:300;background:var(--ink);
  display:grid;place-items:center;transition:opacity .24s ease;
}
#loader.gone{display:none!important}
#loader.done{opacity:0;pointer-events:none}
.loader-in{text-align:center}
.loader-mark{
  display:block;font-style:italic;font-weight:900;font-stretch:125%;font-size:clamp(48px,12vw,120px);
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.4);
}
.loader-pct{
  display:block;margin-top:16px;font-size:13px;letter-spacing:.3em;color:var(--paper);
  font-variant-numeric:tabular-nums;
}
.loader-step{display:block;margin-top:7px;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--mute)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  html.motion .detail{grid-template-columns:1fr;gap:22px;padding-top:calc(var(--hud-h) + 12px)}
  html.motion .detail-can{order:-1}
  html.motion .detail-can img{height:min(34vh,300px)}
  html.motion .rail{flex-direction:row;flex-wrap:wrap}
  html.motion .rail button{width:auto}
  html.motion .claim{min-height:150px;margin-top:20px;padding-top:18px}
}
@media(max-width:620px){
  .hud{grid-template-columns:auto 1fr auto;padding:0 12px}
  .hud-read{display:none}
  .hud-mark{justify-self:start}
  .hud-cta{display:none}
  .grid img{height:150px}
  .foot-cols{gap:24px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}