/** Shopify CDN: Minification failed

Line 683:0 Unexpected "}"

**/
/* Forest palette. Dark spruce ground so the orb glows against it, candle gold
   for anything you click, warm off-white for type. */
:root{
  --canvas:#0c1a12;--canvas-2:#102217;--canvas-warm:#0a1a10;
  --panel:#14301f;--panel-2:#1b3d2a;
  --line:#1e3d2b;--line-strong:#4a7a5c;
  --accent:#e0b04a;--accent-hover:#f0c469;--accent-muted:#6b5117;
  --gold:#e8c574;--gold-dim:#9c8244;
  --pearl:#cfe0d3;--pearl-dim:#8aa392;
  --text-primary:#f2f5ee;--text-secondary:#b3c4b4;
  --accent-glow:224,176,74;
  --grad:linear-gradient(180deg,#081410 0%,#0d2117 18%,#12291d 40%,#0f2419 62%,#0b1d14 82%,#07120e 100%);
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"DM Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --maxw:1180px;
}

/* Drifting motes. Warm specks rising slowly through the page, echoing the
   snow glitter in the hero footage. Transform and opacity only, so they cost
   nothing to paint, and they stop dead for reduced motion and hidden tabs. */
.motes{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  transform:translate3d(0,var(--push,0px),0);will-change:transform}
.mote{
  position:absolute;bottom:-8vh;border-radius:50%;
  background:radial-gradient(circle,rgba(242,219,160,.95),rgba(242,219,160,0) 68%);
  opacity:0;will-change:transform,opacity;
  animation-name:rise;animation-timing-function:linear;animation-iteration-count:infinite;
}
@keyframes rise{
  0%   {transform:translate3d(0,0,0) scale(.55);opacity:0}
  10%  {opacity:var(--mo,.5)}
  85%  {opacity:var(--mo,.5)}
  100% {transform:translate3d(var(--dx,14px),-118vh,0) scale(1);opacity:0}
}
@media (prefers-reduced-motion:reduce){.motes{display:none}}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:var(--body);color:var(--text-primary);background:var(--canvas);
  background-image:var(--grad);
  -webkit-font-smoothing:antialiased;line-height:1.6;
}
.env{position:fixed;inset:0;z-index:0;pointer-events:none}
/* the ambient layer: two slow drifting pools of light, a vignette that keeps
   the edges from going flat, and a highlight that follows the pointer */
.env::before{
  content:"";position:absolute;inset:-25%;
  background:
    radial-gradient(56% 48% at var(--gx1,16%) var(--gy1,14%),rgba(232,197,116,.075),transparent 72%),
    radial-gradient(62% 52% at var(--gx2,86%) var(--gy2,78%),rgba(224,176,74,.06),transparent 74%),
    radial-gradient(50% 42% at var(--gx3,62%) var(--gy3,42%),rgba(140,200,160,.034),transparent 72%);
  animation:drift 140s var(--ease-soft) -40s infinite alternate;
}
.env::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(760px 760px at var(--mx,50%) var(--my,38%),rgba(232,197,116,.072),transparent 70%),
    radial-gradient(300px 300px at var(--mx,50%) var(--my,38%),rgba(240,214,150,.05),transparent 66%),
    radial-gradient(120% 90% at 50% 50%,transparent 42%,rgba(4,10,7,.55) 100%);
  opacity:var(--glowon,0);
  transition:opacity 1.6s var(--ease-soft);
}
/* the vignette is wanted even before the pointer arrives */
.envvig{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 45%,transparent 40%,rgba(4,10,7,.6) 100%);
}
@keyframes drift{from{transform:translate3d(-4%,-3%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.07)}}
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--accent);color:#160806;padding:12px 18px;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.06;letter-spacing:-.015em;margin:0}
p{margin:0}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--pearl-dim);display:block;margin:0 0 16px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,44px);position:relative;z-index:2}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:transparent;
  font-family:var(--body);font-weight:600;font-size:15px;
  padding:15px 30px;border-radius:999px;border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);
}
.btn--primary{background:var(--accent);color:#1a0705;box-shadow:0 10px 34px -14px rgba(var(--accent-glow),.85)}
.btn--primary:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 16px 40px -14px rgba(var(--accent-glow),.9)}
.btn--ghost{border-color:var(--line-strong);color:var(--text-primary)}
.btn--ghost:hover{border-color:var(--gold);background:rgba(224,171,107,.07);transform:translateY(-2px)}
.btn--big{width:100%;padding:18px 30px;font-size:16.5px}
@media (pointer:coarse){.btn{min-height:48px}}

/* nav */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:22px;
  padding:14px clamp(16px,4vw,34px);
  background:rgba(12,15,12,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:600;font-size:19px}
.brand svg{width:22px;height:22px;flex:none}
.nav__links{display:flex;gap:26px;margin-left:auto;align-items:baseline}
.nav__links a{text-decoration:none;font-size:13.5px;color:var(--text-secondary);transition:color .4s var(--ease)}
.nav__links a:hover{color:var(--text-primary)}
.nav__cta{margin-left:22px;padding:11px 22px;font-size:14px}

/* ---------- the phone menu ---------- */
.burger{display:none;width:44px;height:44px;margin-left:6px;flex:none;background:none;border:0;padding:0;cursor:pointer;color:var(--text-primary);position:relative}
.burger span{position:absolute;left:11px;width:22px;height:1.6px;background:currentColor;border-radius:2px;transition:transform .4s var(--ease),opacity .3s var(--ease)}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.menu{
  position:fixed;left:0;right:0;top:var(--navh,76px);z-index:59;
  background:rgba(12,15,12,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
  padding:8px clamp(16px,4vw,34px) 20px;
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:transform .38s var(--ease),opacity .3s var(--ease);
}
.menu.open{transform:none;opacity:1;pointer-events:auto}
.menu a{display:block;padding:15px 2px;text-decoration:none;font-family:var(--display);font-weight:600;font-size:20px;color:var(--text-primary);border-bottom:1px solid var(--line);transition:color .35s var(--ease),padding-left .35s var(--ease)}
.menu a:last-child{border-bottom:0}
.menu a:hover,.menu a:focus-visible{color:var(--gold);padding-left:8px}
@media (max-width:900px){.nav__links{display:none}.nav__cta{margin-left:auto}.burger{display:block}}
@media (min-width:901px){.menu{display:none}}

/* The cut-off strip sits directly under the fixed nav. --navh is measured from
   the real nav in JS, because a hardcoded guess was 13 to 15px short and the
   nav ended up covering the top of this text. The fallback is deliberately
   generous so a JS failure leaves a gap rather than an overlap. */
.strip{
  margin-top:var(--navh,84px);
  background:rgba(12,15,12,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  line-height:1.65;
  /* all caps has no descenders, so the glyphs sit high in the line box and
     leave 3px of dead space underneath. Nudged to optically centre it. */
  color:var(--gold);text-align:center;padding:16px 18px 13px;position:relative;z-index:2;
}
.strip b{color:var(--text-primary);font-weight:600}

/* ---------- the buy block ---------- */
.buy{padding:clamp(30px,5vh,52px) 0 clamp(50px,7vh,78px)}
.buy__grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(30px,4.5vw,66px);align-items:start}

/* ---------- gallery: a swipeable strip ----------
   Eight square frames on a native scroll-snap track, so dragging with a
   finger is the browser's own scrolling: momentum, rubber-banding and all.
   Every image is square and shown whole, so nothing is ever cropped. */
.gallery__stage{position:relative}
.gallery__track{
  display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  border-radius:22px;border:1px solid var(--line);background:#141a15;
  box-shadow:0 44px 100px -60px rgba(0,0,0,.95);
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
}
.gallery__track::-webkit-scrollbar{display:none}
.gallery__track:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.gallery__slide{
  flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;
  margin:0;aspect-ratio:1;
}
.gallery__slide img{
  display:block;width:100%;height:100%;object-fit:contain;
  -webkit-user-drag:none;user-select:none;pointer-events:none;
}
.zoom{
  position:absolute;right:12px;bottom:12px;z-index:3;
  width:42px;height:42px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:rgba(10,16,12,.72);border:1px solid var(--line-strong);color:var(--text-primary);
  backdrop-filter:blur(10px);transition:background .35s var(--ease),transform .35s var(--ease);
}
.zoom svg{width:19px;height:19px}
.zoom:hover{background:rgba(10,16,12,.92);transform:scale(1.06)}
/* the frame counter is the honest signal that there are more than five */
.gal__count{
  position:absolute;left:12px;bottom:12px;z-index:3;pointer-events:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--text-primary);background:rgba(10,16,12,.72);
  border:1px solid var(--line-strong);border-radius:999px;padding:7px 12px;
  backdrop-filter:blur(10px);
}
/* arrows are for the mouse, which cannot swipe; they never appear on touch */
.gal__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  background:rgba(10,16,12,.74);border:1px solid var(--line-strong);color:var(--text-primary);
  backdrop-filter:blur(10px);opacity:0;
  transition:opacity .3s var(--ease),background .3s var(--ease);
}
.gallery__stage:hover .gal__arrow,.gal__arrow:focus-visible{opacity:1}
.gal__arrow:hover{background:rgba(10,16,12,.94)}
.gal__arrow[disabled]{opacity:0!important;pointer-events:none}
.gal__arrow--prev{left:12px}
.gal__arrow--next{right:12px}
.gal__arrow svg{width:17px;height:17px}
@media (pointer:coarse){.gal__arrow{display:none}}

/* On a phone the picture runs edge to edge and carries nothing on top of it.
   The negative margin exactly cancels the wrap padding, so this cannot cause
   sideways overflow the way a 100vw rule can. */
@media (max-width:700px){
  .buy{padding-top:0}
  .gallery__track{
    margin-inline:calc(-1 * clamp(20px,5vw,44px));
    border-radius:0;border-left:0;border-right:0;
  }
  .zoom,.gal__count{display:none}
  .gallery__thumbs{margin-top:14px}
}

/* five thumbs across, the rest revealed by sliding the rail */
.gallery__thumbs{
  display:flex;gap:10px;margin-top:12px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;
}
.gallery__thumbs::-webkit-scrollbar{display:none}
.thumb{
  flex:0 0 calc((100% - 40px) / 5);scroll-snap-align:start;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;aspect-ratio:1;
  background:#141a15;padding:0;cursor:pointer;opacity:.6;
  transition:border-color .45s var(--ease),transform .45s var(--ease),opacity .45s var(--ease);
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb:hover{transform:translateY(-2px);border-color:var(--line-strong);opacity:1}
.thumb[aria-current="true"]{border-color:var(--gold);opacity:1}

/* tap to enlarge, so the small print in the graphics is readable on a phone
   without anything being cropped away */
.lightbox{position:fixed;inset:0;z-index:200;display:none;background:rgba(6,12,8,.95);overflow:auto;-webkit-overflow-scrolling:touch;padding:clamp(12px,3vw,40px)}
.lightbox.open{display:flex;align-items:center;justify-content:center}
.lightbox img{display:block;max-width:100%;height:auto;border-radius:12px}
.lightbox.zoomed{align-items:flex-start;justify-content:flex-start}
.lightbox.zoomed img{max-width:none;width:1254px;border-radius:0}
.lightbox__close{position:fixed;top:14px;right:14px;z-index:2;width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center;background:rgba(10,16,12,.88);border:1px solid var(--line-strong);color:var(--text-primary);font-size:24px;line-height:1;font-family:var(--body)}
.lightbox__hint{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pearl-dim);background:rgba(10,16,12,.88);padding:8px 14px;border-radius:999px;border:1px solid var(--line);pointer-events:none}

.pd__title{font-size:clamp(30px,3.6vw,46px);letter-spacing:-.02em}
.pd__blurb{margin-top:14px;color:var(--text-secondary);font-size:16.5px;max-width:44ch}
.pd__meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font-size:13.4px;color:var(--text-secondary)}
.pd__meta span{display:flex;gap:8px;align-items:baseline}
.pd__meta svg{width:14px;height:14px;color:var(--gold);flex:none;transform:translateY(2px)}

.picker{margin-top:30px;display:grid;gap:11px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt label{
  display:grid;grid-template-columns:22px 1fr auto;gap:15px;align-items:center;
  border:1px solid var(--line);border-radius:16px;padding:17px 19px;cursor:pointer;
  background:rgba(27,36,29,.4);
  transition:border-color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease);
}
.opt label:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.opt input:checked + label{border-color:var(--accent);background:rgba(224,176,74,.09)}
.opt input:focus-visible + label{outline:2px solid var(--accent);outline-offset:3px}
.dot{width:20px;height:20px;border-radius:50%;border:1.6px solid var(--line-strong);position:relative;transition:border-color .4s var(--ease)}
.opt input:checked + label .dot{border-color:var(--accent)}
.dot::after{
  content:"";position:absolute;inset:4px;border-radius:50%;background:var(--accent);
  transform:scale(0);transition:transform .4s var(--ease);
}
.opt input:checked + label .dot::after{transform:scale(1)}
.opt__name{font-family:var(--display);font-weight:600;font-size:17.5px;display:block}
.opt__sub{font-size:13.2px;color:var(--text-secondary);display:block;margin-top:3px}
.opt__price{text-align:right}
.opt__price b{display:block;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.01em}
.opt__price span{display:block;font-family:var(--mono);font-size:10.5px;color:var(--pearl-dim);margin-top:3px}
.tag{
  position:absolute;top:-9px;right:18px;z-index:2;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--accent);color:#1a0705;padding:4px 10px;border-radius:999px;
}

.total{
  margin-top:24px;display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:18px;border-bottom:1px solid var(--line);
}
.total__l{font-size:14px;color:var(--text-secondary)}
.total__r{display:flex;align-items:baseline;gap:10px}
.total__r b{font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:-.02em}
.total__r s{color:var(--pearl-dim);font-size:16px}
.savepill{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(255,111,87,.14);color:var(--accent);border:1px solid var(--accent-muted);
  padding:4px 10px;border-radius:999px;
}
.buybox{margin-top:20px}
.buynote{margin-top:12px;font-size:12.8px;color:var(--pearl-dim);line-height:1.55}
.assure{display:grid;gap:9px;margin-top:22px}
.assure p{display:flex;gap:10px;align-items:baseline;font-size:13.8px;color:var(--text-secondary)}
.assure svg{width:14px;height:14px;color:var(--gold);flex:none;transform:translateY(2px)}

@media (max-width:900px){
  .buy__grid{grid-template-columns:1fr}
  .gallery{position:static!important}
}

/* ---------- sections ---------- */
section{position:relative;z-index:1}
.sec{padding:clamp(64px,9vh,110px) 0;border-top:1px solid var(--line)}
.sec__head{margin-bottom:clamp(30px,4.5vh,50px)}
.sec__head h2{font-size:clamp(26px,3.2vw,40px);max-width:16ch}
.sec__head p{margin-top:14px;color:var(--text-secondary);max-width:52ch}

.rise{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.in .rise{opacity:1;transform:none}
.in .rise:nth-child(2){transition-delay:.08s}
.in .rise:nth-child(3){transition-delay:.16s}
.in .rise:nth-child(4){transition-delay:.24s}
.in.done .rise:nth-child(2),.in.done .rise:nth-child(3),.in.done .rise:nth-child(4){transition-delay:0s!important}

/* specs */
.specs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,58px);align-items:start}
.spectable{width:100%;border-collapse:collapse;font-size:14.8px}
.spectable th,.spectable td{text-align:left;padding:14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spectable th{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--pearl-dim);font-weight:400;width:42%}
.spectable td{color:var(--text-primary)}
.boxlist{display:grid;gap:11px;margin-top:20px}
.boxlist li{list-style:none;display:flex;gap:12px;align-items:baseline;font-size:14.8px;color:var(--text-secondary)}
.boxlist svg{width:14px;height:14px;color:var(--gold);flex:none;transform:translateY(2px)}
.specimg{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--canvas-2)}
@media (max-width:840px){.specs{grid-template-columns:1fr}}

/* on the tree: the only real footage on the page, so it gets room */
.ontree{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,4.5vw,64px);align-items:center;
}
.ontree__vid{
  position:relative;margin:0;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);background:#141a15;
  box-shadow:0 44px 100px -60px rgba(0,0,0,.95);
}
/* the same warm bloom the product photograph sits in */
.ontree__vid::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 90px -30px rgba(232,197,116,.20);
}
.ontree__vid video{display:block;width:100%;height:auto;background:#141a15}
.ontree__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:64px;height:64px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(10,16,12,.72);border:1px solid var(--line-strong);color:var(--text-primary);
  backdrop-filter:blur(10px);
  transition:background .35s var(--ease),transform .35s var(--ease),opacity .35s var(--ease);
}
.ontree__play svg{width:26px;height:26px;margin-left:3px}
.ontree__play:hover{background:rgba(10,16,12,.92);transform:translate(-50%,-50%) scale(1.06)}
.ontree__play[hidden]{display:none}
.ontree__copy h2{font-size:clamp(26px,3.2vw,40px);max-width:15ch}
.ontree__copy p{margin-top:16px;color:var(--text-secondary);max-width:46ch;font-size:16px}
.ontree__note{font-size:14px!important;color:var(--pearl-dim)!important}
@media (max-width:860px){
  .ontree{grid-template-columns:1fr;gap:26px}
  .ontree__vid{order:2}
  .ontree__copy{order:1}
}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,28px)}
.step{position:relative;border:1px solid var(--line);border-radius:18px;padding:24px 22px;background:rgba(27,36,29,.4);transition:border-color .55s var(--ease),transform .55s var(--ease)}
.step:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.step b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:clamp(40px,4.4vw,58px);line-height:.86;letter-spacing:-.05em;
  color:var(--gold);margin-bottom:14px;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .step b{
    background:linear-gradient(180deg,var(--gold) 10%,rgba(224,176,74,.28) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.step h3{font-size:18.5px;margin-bottom:8px}
.step p{font-size:14.4px;color:var(--text-secondary)}
.step__art{height:112px;margin:6px 0 22px;color:var(--gold)}
.step__art svg{width:100%;height:100%;overflow:visible}
.step__art path,.step__art circle,.step__art line,.step__art rect{
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 2.4s var(--ease-soft);
}
/* each card starts a fraction later than the last, so they draw in sequence */
.step--in .step__art path,.step--in .step__art circle,.step--in .step__art line,.step--in .step__art rect{stroke-dashoffset:0}
@media (min-width:801px){.step:nth-child(2) .step__art *{transition-delay:.35s}}
@media (min-width:801px){.step:nth-child(3) .step__art *{transition-delay:.7s}}
@media (prefers-reduced-motion:reduce){.step__art *{transition:none;stroke-dashoffset:0}}

/* the line the three cards hang from. It draws with the scroll but eases
   behind it, so a fast scroll still leaves something to watch. */
.stepline{margin:0 0 clamp(14px,2vw,26px)}
.stepline svg{display:block;width:100%;height:auto;overflow:visible}
.stepline .rail{
  fill:none;stroke:var(--gold);stroke-width:1.3;opacity:.34;
  stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--sdraw,0));
}
.stepline .node{
  fill:var(--gold);stroke:none;opacity:0;
  transition:opacity .55s var(--ease-soft);
}
.stepline .node.lit{opacity:.95;filter:drop-shadow(0 0 5px rgba(232,197,116,.85))}
@media (max-width:800px){.stepline{display:none}}

/* On a phone the cards stack, so the line stands up and runs down beside them.
   Same eased draw as the horizontal one, so it is still something you watch
   rather than something that is simply already finished. */
.stepsflow{position:relative}
.steprail{display:none}
@media (max-width:800px){
  .steprail{
    display:block;position:absolute;left:0;top:0;bottom:0;width:2px;
    pointer-events:none;z-index:1;
  }
  .steps{margin-left:28px}
  .steprail__line{
    position:absolute;left:0;top:0;width:1.5px;border-radius:2px;
    background:linear-gradient(180deg,var(--gold),rgba(224,176,74,.45));
    height:calc(var(--vdraw,0) * 100%);opacity:.4;
  }
  .steprail__node{
    position:absolute;left:-3.2px;width:8px;height:8px;border-radius:50%;
    background:var(--gold);opacity:0;transition:opacity .55s var(--ease-soft);
  }
  .steprail__node.lit{opacity:.95;box-shadow:0 0 7px rgba(232,197,116,.9)}
}
@media (prefers-reduced-motion:reduce){
  .steprail__line{height:100%}
  .steprail__node{opacity:.95}
}
@media (max-width:800px){.steps{grid-template-columns:1fr}}

/* the guarantee block, which stands where reviews will go */
.promise{
  border:1px solid var(--line);border-radius:22px;padding:clamp(28px,4vw,46px);
  background:linear-gradient(180deg,rgba(30,23,23,.62),rgba(18,15,16,.42));
}
.promise h2{font-size:clamp(24px,2.9vw,36px);max-width:18ch}
.promise p{margin-top:16px;color:var(--text-secondary);max-width:56ch}
.promise__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px);margin-top:32px}
.promise__grid div b{display:block;font-family:var(--display);font-weight:600;font-size:17px;margin-bottom:6px}
.promise__grid div span{font-size:14px;color:var(--text-secondary)}
@media (max-width:760px){.promise__grid{grid-template-columns:1fr;gap:18px}}

/* faq */
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{
  list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:clamp(16.5px,1.5vw,19.5px);
  transition:color .4s var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--gold)}
.qa summary::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;margin-top:-6px;
  background:linear-gradient(var(--gold),var(--gold)) center/13px 1.4px no-repeat,
             linear-gradient(var(--gold),var(--gold)) center/1.4px 13px no-repeat;
  transition:transform .5s var(--ease),opacity .4s var(--ease);opacity:.65;
}
.qa[open] summary::after{transform:rotate(135deg);opacity:1}
.qa__a{padding:0 0 24px;color:var(--text-secondary);max-width:62ch;font-size:15.2px}
.faq__grid{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1fr);gap:clamp(28px,4.5vw,66px);align-items:start}
@media (max-width:860px){.faq__grid{grid-template-columns:1fr}}

/* footer */
.foot{border-top:1px solid var(--line);padding:56px 0 110px;position:relative;z-index:1}
.foot__grid{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:start}
.foot__links{display:flex;gap:24px;flex-wrap:wrap}
.foot__links a{font-size:13.6px;color:var(--text-secondary);text-decoration:none;transition:color .4s var(--ease)}
.foot__links a:hover{color:var(--text-primary)}
.foot__note{margin-top:22px;font-size:12.4px;color:var(--pearl-dim);max-width:62ch;line-height:1.6}
.foot__brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:19px}
.foot__brand svg{width:22px;height:22px}
@media (max-width:640px){.foot__grid{grid-template-columns:1fr}}

/* the sticky buy bar, narrow screens only */
.stickybuy{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  gap:14px;align-items:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(13,16,13,.94);backdrop-filter:blur(16px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .55s var(--ease);
}
.stickybuy.on{transform:none}
.stickybuy__p{display:flex;flex-direction:column;line-height:1.25}
.stickybuy__p b{font-family:var(--display);font-weight:700;font-size:20px}
.stickybuy__p span{font-family:var(--mono);font-size:10.5px;color:var(--pearl-dim)}
.stickybuy .btn{margin-left:auto;padding:14px 24px}
@media (max-width:900px){.stickybuy{display:flex}}

.breathe{animation:breathe 7s var(--ease-soft) -2.1s infinite alternate}
@keyframes breathe{from{opacity:.4}to{opacity:.75}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ============================================================
   PAGE FURNITURE
   The devices that give this page a face: a bloom behind the
   product, a string of lights between sections, the trust strip,
   the pull quote and the review wall.
   ============================================================ */

/* a warm bloom behind the product, so the orb reads as lit rather than pasted on */
.gallery__stage::before{
  content:"";position:absolute;z-index:0;
  left:-13%;right:-13%;top:-9%;bottom:-9%;
  background:radial-gradient(56% 50% at 50% 48%,rgba(232,197,116,.22),rgba(224,176,74,.07) 56%,transparent 74%);
  filter:blur(16px);pointer-events:none;
  animation:bloom 9s var(--ease-soft) -3s infinite alternate;
}
.gallery__track{position:relative;z-index:1}
@keyframes bloom{from{opacity:.7;transform:scale(.985)}to{opacity:1;transform:scale(1.025)}}
@media (prefers-reduced-motion:reduce){.gallery__stage::before{animation:none}}

/* every section opens with the same small gold mark */
.kicker{position:relative;padding-bottom:11px}
.kicker::after{
  content:"";position:absolute;left:0;bottom:0;width:26px;height:1.5px;
  background:var(--accent);opacity:.85;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .95s var(--ease-soft) .1s;
}
.kicker.mark-in::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.kicker::after{transform:none;transition:none}}

/* a string of lights, borrowed from the thing inside the orb */
/* the tilt lives on the container, in CSS pixels, so the stretched viewBox
   cannot shear it into a diagonal smear */
.lights{
  display:block;width:100%;line-height:0;pointer-events:none;
  transform-origin:50% -90px;
  animation:sway 4.6s var(--ease-soft) -1.4s infinite alternate;
  will-change:transform;
}
@keyframes sway{from{transform:rotate(-.9deg)}to{transform:rotate(.9deg)}}
/* and the sag lives on the svg, on a period that does not divide into the
   sway, so the two never line up into one obvious loop */
.lights svg{
  display:block;width:100%;height:42px;transform-origin:50% 0;
  animation:sag 6.7s var(--ease-soft) -2.9s infinite alternate;
  will-change:transform;
}
@keyframes sag{from{transform:scaleY(.93)}to{transform:scaleY(1.15)}}
.lights .wire{fill:none;stroke:var(--line-strong);stroke-width:1.1;opacity:.5}
.lights g{filter:drop-shadow(0 0 5px rgba(232,197,116,.55))}
/* the bulbs ride a slow wave down the string, and breathe while they do it.
   The two cycles are different lengths on purpose, so the pattern never
   settles into an obvious repeat. */
.lights circle{
  fill:var(--gold);opacity:.9;transform-box:view-box;
  animation:bob 2.9s var(--ease-soft) infinite alternate,
            twinkle 4.4s var(--ease-soft) infinite alternate;
  animation-delay:var(--tw,0s),var(--tw,0s);
}
@keyframes bob{from{transform:translateY(-1.2px)}to{transform:translateY(1.2px)}}
@keyframes twinkle{from{opacity:.74}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .lights,.lights svg{animation:none;transform:none}
  .lights circle{animation:none;opacity:.85;transform:none}
}

/* the four things worth knowing before scrolling any further */
/* Four separate cards rather than four rows of one box. As one bordered block
   with hairline dividers this read as a table, which is the last thing wanted
   directly under the buy button. */
.trust{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.2vw,14px);
  margin-top:clamp(36px,5vh,58px);
}
.trust div{
  display:flex;gap:13px;align-items:flex-start;
  padding:19px 17px;border-radius:16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(27,61,42,.36),rgba(12,26,18,.30));
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.trust div:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.trust .trust__ico{
  position:relative;flex:none;display:grid;place-items:center;
  width:38px;height:38px;border-radius:50%;
  background:rgba(224,176,74,.10);
}
/* the ring is drawn rather than bordered, so it can sweep round on arrival */
.trust .trust__ring{
  position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;
}
.trust .trust__ring .ring{
  fill:none;stroke:rgba(224,176,74,.42);stroke-width:1.15;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  transform:rotate(-90deg);transform-box:view-box;transform-origin:20px 20px;
  transition:stroke-dashoffset 1s var(--ease-soft) var(--td,0s);
}
.trust .trust__art{position:relative;width:18px;height:18px;color:var(--accent)}
.trust b{display:block;font-family:var(--display);font-weight:600;font-size:14.6px;margin-bottom:4px;line-height:1.25}
.trust span span{display:block;font-size:12.7px;color:var(--text-secondary);line-height:1.5}
.trust .trust__art path,.trust .trust__art circle{
  fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset .85s var(--ease-soft) calc(var(--td,0s) + .34s);
}
/* the cascade: each badge starts a beat after the one before it */
.trust div:nth-child(1){--td:0s}
.trust div:nth-child(2){--td:.15s}
.trust div:nth-child(3){--td:.3s}
.trust div:nth-child(4){--td:.45s}

/* the title and the line under it rise in behind the icon, so the whole
   tile assembles as one thing rather than an icon drawing onto finished text */
.trust b,.trust span span{
  opacity:0;transform:translateY(7px);
  transition:opacity .8s var(--ease-soft) calc(var(--td,0s) + .5s),
             transform .8s var(--ease-soft) calc(var(--td,0s) + .5s);
}
.trust span span{transition-delay:calc(var(--td,0s) + .66s)}
.trust div.is-in b,.trust div.is-in span span{opacity:1;transform:none}
.trust div.is-in .trust__ring .ring{stroke-dashoffset:0}
.trust div.is-in .trust__art path,.trust div.is-in .trust__art circle{stroke-dashoffset:0}

/* --- one motion particular to each promise --- */
/* the van arrives */
.trust__art--truck .drive{
  transform:translateX(-9px);opacity:0;
  transition:transform .95s var(--ease-soft) calc(var(--td,0s) + .2s),
             opacity .5s var(--ease) calc(var(--td,0s) + .2s);
}
.trust div.is-in .trust__art--truck .drive{transform:none;opacity:1}
/* the tick lands after the shield is finished */
.trust__art--shield .tick{transition-delay:calc(var(--td,0s) + .95s)}
/* the hands sweep round clockwise and stop where a clock should stop */
.trust__art--clock .hand{
  transform-box:view-box;transform-origin:12px 12px;transform:rotate(0deg);
  transition:transform 1.5s var(--ease-soft) calc(var(--td,0s) + .5s);
}
.trust div.is-in .trust__art--clock .hand--h{transform:rotate(300deg)}
.trust div.is-in .trust__art--clock .hand--m{transform:rotate(690deg)}
/* the carton builds a face at a time */
.trust__art--box .f2{transition-delay:calc(var(--td,0s) + .62s)}
.trust__art--box .f3{transition-delay:calc(var(--td,0s) + .9s)}

@media (max-width:900px){
  .trust{grid-template-columns:repeat(2,1fr)}
  /* roughly half speed: on a small screen this is the only thing moving */
  .trust div:nth-child(1){--td:0s}
  .trust div:nth-child(2){--td:.26s}
  .trust div:nth-child(3){--td:.52s}
  .trust div:nth-child(4){--td:.78s}
  .trust .trust__ring .ring{transition-duration:1.5s}
  .trust .trust__art path,.trust .trust__art circle{transition-duration:1.3s}
  .trust__art--truck .drive{transition-duration:1.35s,.75s}
  .trust__art--clock .hand{transition-duration:2.1s}
  .trust b,.trust span span{transition-duration:1s}
}
@media (max-width:560px){
  .trust div{flex-direction:column;gap:11px;padding:17px 15px}
  .trust b{font-size:14px}
  .trust span span{font-size:12.4px}
}
/* nothing moves for anyone who has asked for that */
@media (prefers-reduced-motion:reduce){
  .trust .trust__ring .ring,.trust .trust__art path,.trust .trust__art circle{
    stroke-dashoffset:0;transition:none;
  }
  .trust__art--truck .drive{transform:none;opacity:1;transition:none}
  .trust__art--clock .hand{transition:none}
  .trust b,.trust span span{opacity:1;transform:none;transition:none}
}
}

/* one real review, blown up, because it says it better than we can */
.quote{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(54px,8vh,98px) 0;position:relative;z-index:1;
  background:linear-gradient(180deg,rgba(27,61,42,.24),rgba(12,26,18,.10));
}
.quote blockquote{margin:0;max-width:22ch}
.quote q{
  quotes:none;display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(30px,5.2vw,62px);line-height:1.05;letter-spacing:-.025em;
}
.quote q::before{content:"\201C"}
.quote q::after{content:"\201D"}
.quote figcaption{
  margin-top:24px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--pearl-dim);
}
.quote figcaption b{color:var(--text-secondary);font-weight:400}

/* the review wall */
.rev__top{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(26px,5vw,64px);
  align-items:center;margin-bottom:clamp(28px,4vh,44px);
}
.rev__score{text-align:center;flex:none}
.rev__score b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(44px,5vw,58px);line-height:1;letter-spacing:-.03em}
.rev__score em{display:block;margin-top:9px;font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pearl-dim)}
.stars{display:inline-flex;gap:3px}
.stars svg{width:17px;height:17px}
.stars .on{color:var(--accent)}
.stars .off{color:var(--accent-muted)}
.rev__bars{display:grid;gap:9px;max-width:430px}
.rev__bar{display:grid;grid-template-columns:44px minmax(0,1fr) 30px;gap:12px;align-items:center;font-family:var(--mono);font-size:10.5px;color:var(--pearl-dim);white-space:nowrap}
.rev__bar i{display:block;height:6px;border-radius:999px;background:rgba(255,255,255,.07)}
.rev__bar i::after{content:"";display:block;height:100%;width:var(--w,0%);background:var(--accent);border-radius:999px}
.rev__bar em{font-style:normal;text-align:right}
.rev__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px)}
@media (max-width:900px){.rev__grid{grid-template-columns:repeat(2,1fr)}.rev__top{grid-template-columns:1fr;justify-items:start}.rev__score{text-align:left}}
@media (max-width:620px){.rev__grid{grid-template-columns:1fr}}
.rev{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:18px;padding:20px 20px 16px;
  background:rgba(27,36,29,.4);
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.rev:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.rev[hidden]{display:none}
.rev h3{font-size:16.4px;margin:11px 0 8px;letter-spacing:-.01em;line-height:1.25}
.rev p{font-size:14.3px;color:var(--text-secondary);flex:1}
.rev footer{
  margin-top:16px;padding-top:13px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.rev__who{font-family:var(--display);font-weight:600;font-size:13.5px}
.rev__src{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pearl-dim)}
.rev__more{margin:clamp(22px,3vh,30px) auto 0;display:flex}
.rev__note{margin-top:18px;text-align:center;font-size:12.4px;color:var(--pearl-dim)}

/* the rating next to the price, where it does the most work */
.ratingline{
  display:inline-flex;align-items:center;gap:10px;margin-top:14px;
  text-decoration:none;color:inherit;
}
.ratingline b{font-family:var(--display);font-weight:600;font-size:14.5px}
.ratingline u{text-decoration:none;font-size:13.2px;color:var(--text-secondary);border-bottom:1px solid var(--line-strong);transition:color .4s var(--ease)}
.ratingline:hover u{color:var(--text-primary)}

/* the chosen bundle now glows instead of merely being outlined */
.opt input:checked + label{box-shadow:0 0 0 1px var(--accent),0 20px 50px -32px rgba(224,176,74,.9)}
/* the price changes with a beat, so a bundle switch is felt as well as seen */
.total__r b{transition:opacity .22s var(--ease),transform .22s var(--ease)}
.total__r b.flip{opacity:0;transform:translateY(-7px)}

/* the sticky bar earns its place on desktop too */
.stickybuy{display:flex;padding-left:0;padding-right:0}
.stickybuy__in{
  display:flex;gap:14px;align-items:center;width:100%;
  max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,5vw,44px);
}
@media (min-width:901px){.stickybuy__p b{font-size:19px}}


@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important}
  .rise{opacity:1;transform:none}
  .env::before{animation:none}
  .stickybuy{transform:none}
}