/* ============================================================
   FUEL DIGITAL DESIGNS — site system
   Loads AFTER tokens.css. Every colour points at a token.

   The design language is borrowed from the artwork itself:
   halftone dots, hard flat colour, and RGB misregistration.
   Those three things appear as texture, as blocks, and as motion.
   ============================================================ */

/* ---------------------------------------------------------- base */
body{background:var(--paper);overflow-x:hidden}
::selection{background:var(--accent);color:var(--brand)}
.wrap{max-width:1200px}
.wrap.narrow{max-width:840px}

/* halftone dot texture — the signature. Sits over dark blocks. */
.dots{position:relative;isolation:isolate}
.dots::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(currentColor 1.1px,transparent 1.2px);
  background-size:9px 9px;opacity:.10}
.dots > *{position:relative;z-index:1}

/* ---------------------------------------------------------- type */
.display{font-family:var(--font-display);text-transform:uppercase;line-height:.92;
  letter-spacing:-.012em;font-weight:400}
.h-xl{font-size:clamp(46px,8.2vw,112px)}
.h-lg{font-size:clamp(34px,5.4vw,66px)}
.h-md{font-size:clamp(26px,3.4vw,42px)}
.eyebrow{font-family:var(--font-label);font-size:11.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:11px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);flex:0 0 auto}
.lede{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:58ch;line-height:1.6}
.dark .lede,.dark p{color:var(--tint)}
.dark,.dark h1,.dark h2,.dark h3,.dark h4{color:var(--white)}

/* RGB misregistration, the artwork's fingerprint, as a type treatment */
.rgb{position:relative;display:inline-block}
.rgb::before,.rgb::after{content:attr(data-t);position:absolute;inset:0;
  opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
.rgb::before{color:#FF2D2D;mix-blend-mode:screen}
.rgb::after{color:#12E8FF;mix-blend-mode:screen}
.card:hover .rgb::before{opacity:.8;transform:translate(-3px,1px)}
.card:hover .rgb::after{opacity:.8;transform:translate(3px,-1px)}

/* ---------------------------------------------------------- sections */
.band{padding:clamp(64px,9vw,124px) 0;position:relative}
.band.pt0{padding-top:clamp(34px,4vw,54px)}
.band.dark{background:var(--brand);color:var(--white)}
.band.ink{background:var(--brand-dk);color:var(--white)}
.band.soft{background:var(--cream)}
.band-head{max-width:62ch}
.band-head .lede{margin-top:16px}
.band-head h2{margin-top:18px}

/* ---------------------------------------------------------- nav */
.nav{background:rgba(250,250,247,.82)}
.nav.scrolled{background:rgba(250,250,247,.96)}
.brand{align-self:center;margin-top:0;gap:0}
.brand svg{height:38px;width:auto;color:var(--brand);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.brand:hover svg{transform:rotate(-2deg) scale(1.04)}
.navlinks a:not(.btn){font-weight:500}
.navlinks .btn{padding:12px 24px}

/* ---------------------------------------------------------- buttons */
.btn{position:relative;overflow:hidden;isolation:isolate;font-weight:600;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,color .22s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);
  transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.btn:hover{transform:translateY(-3px)}
.btn-accent{background:var(--accent);color:var(--brand);box-shadow:0 7px 0 -1px var(--accent-dk)}
.btn-accent::before{background:var(--brand)}
.btn-accent:hover{color:var(--white);box-shadow:0 14px 30px -12px rgba(255,90,31,.75)}
.btn-accent:hover::before{transform:translateY(0)}
.btn-brand{background:var(--brand);color:var(--white);box-shadow:0 7px 0 -1px #000}
.btn-brand::before{background:var(--accent)}
.btn-brand:hover{color:var(--brand);box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.btn-brand:hover::before{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.4)}
.btn-ghost::before{background:var(--white)}
.btn-ghost:hover{color:var(--brand);border-color:var(--white)}
.btn-ghost:hover::before{transform:translateY(0)}
.btn-out{background:transparent;color:var(--brand);border:2px solid var(--brand)}
.btn-out::before{background:var(--brand)}
.btn-out:hover{color:var(--white)}
.btn-out:hover::before{transform:translateY(0)}
.tlink{display:inline-flex;align-items:center;gap:8px;border-bottom-width:2px;
  transition:gap .22s,color .22s;padding-bottom:3px}
.tlink:hover{gap:14px}
.cta-row{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:34px}

/* ---------------------------------------------------------- reveal */
.rv{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.rv-1{transition-delay:.07s}.rv-2{transition-delay:.14s}.rv-3{transition-delay:.21s}
.rv-4{transition-delay:.28s}.rv-5{transition-delay:.35s}.rv-6{transition-delay:.42s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  .marquee__track,.artmq__track,.fh__glow,.tagbox{animation:none!important}
  *{transition-duration:.001ms!important}
}

/* ---------------------------------------------------------- hero */
.fhero{background:var(--brand);color:var(--white);position:relative;overflow:hidden}
.fhero .wrap{position:relative;z-index:2;padding:clamp(52px,6.5vw,92px) 32px clamp(46px,6vw,78px)}
.fh__glow{position:absolute;z-index:0;width:60vw;height:60vw;max-width:760px;max-height:760px;
  right:-14vw;top:-16vw;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,90,31,.34),transparent 62%);
  animation:drift 16s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,34px) scale(1.09)}}
.fh__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,4vw,64px);align-items:center}
.fhero h1{margin:22px 0 0}
.fhero h1 .l2{display:block;color:var(--accent)}
.fhero .lede{margin-top:26px;max-width:40ch}
.fh__meta{margin-top:40px;display:flex;gap:30px;flex-wrap:wrap;padding-top:26px;
  border-top:2px solid rgba(255,255,255,.14)}
.fh__meta div{min-width:86px}
.fh__meta b{display:block;font-family:var(--font-display);font-size:30px;color:var(--accent);line-height:1}
.fh__meta span{font-size:12.5px;color:var(--slate);letter-spacing:.03em;display:block;margin-top:7px}

/* stacked, tilted art in the hero */
.fan{position:relative;aspect-ratio:1/1}
.fan img{position:absolute;width:60%;border-radius:14px;box-shadow:0 40px 70px -30px rgba(0,0,0,.9);
  transition:transform .55s cubic-bezier(.2,.8,.2,1);will-change:transform}
.fan img:nth-child(1){left:0;top:4%;transform:rotate(-7deg)}
.fan img:nth-child(2){right:2%;top:0;transform:rotate(5deg);z-index:2}
.fan img:nth-child(3){left:8%;bottom:0;transform:rotate(3deg);z-index:3}
.fan img:nth-child(4){right:0;bottom:6%;transform:rotate(-4deg);z-index:1}
.fan:hover img:nth-child(1){transform:rotate(-11deg) translate(-16px,-10px)}
.fan:hover img:nth-child(2){transform:rotate(8deg) translate(14px,-12px)}
.fan:hover img:nth-child(3){transform:rotate(5deg) translate(-8px,12px) scale(1.03)}
.fan:hover img:nth-child(4){transform:rotate(-7deg) translate(16px,10px)}

/* ---------------------------------------------------------- marquees */
.marquee{overflow:hidden;background:var(--accent);color:var(--brand);padding:15px 0;
  border-top:3px solid var(--brand);border-bottom:3px solid var(--brand)}
.marquee__track{display:flex;gap:44px;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{font-family:var(--font-display);font-size:20px;text-transform:uppercase;
  letter-spacing:.03em;display:flex;align-items:center;gap:44px;white-space:nowrap}
.marquee span::after{content:"";width:9px;height:9px;background:var(--brand);border-radius:50%;flex:0 0 auto}
@keyframes slide{to{transform:translateX(-50%)}}

/* moving pictures — the "movement" the site was missing */
.artmq{overflow:hidden;background:var(--brand);padding:26px 0}
.artmq__track{display:flex;gap:18px;width:max-content;animation:slide 52s linear infinite}
.artmq img{width:190px;height:190px;object-fit:cover;border-radius:12px;flex:0 0 auto;
  filter:grayscale(.4) brightness(.8);transition:filter .4s,transform .4s}
.artmq img:hover{filter:none;transform:scale(1.07)}
.artmq:hover .artmq__track{animation-play-state:paused}

/* ---------------------------------------------------------- filter chips */
.filters{display:flex;gap:11px;flex-wrap:wrap;margin:30px 0 8px}
.chip{font-family:var(--font-label);font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:12px 24px;border-radius:100px;border:2px solid var(--line);
  background:var(--paper);color:var(--muted);cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s,color .2s,border-color .2s,box-shadow .2s}
.chip:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--white);
  box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
.count{font-size:14px;color:var(--muted);margin:18px 0 26px;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------- art cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:clamp(16px,2vw,30px)}
.card{position:relative;border:0;padding:0;background:none;font:inherit;color:inherit;width:100%;
  text-align:left;cursor:pointer;display:flex;flex-direction:column;
  transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.card:hover{transform:translateY(-10px)}
.card__img{position:relative;overflow:hidden;border-radius:14px;background:var(--greige);
  box-shadow:0 14px 30px -20px rgba(0,0,0,.55);transition:box-shadow .34s}
.card:hover .card__img{box-shadow:0 34px 54px -26px rgba(0,0,0,.6)}
.card__img img{width:100%;aspect-ratio:1;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.card:hover .card__img img{transform:scale(1.06)}
.card__img::after{content:"";position:absolute;inset:auto 0 0 0;height:5px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1);z-index:2}
.card:hover .card__img::after{transform:scaleX(1)}
.card__view{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .3s;
  background:linear-gradient(to top,rgba(11,11,13,.7),rgba(11,11,13,0) 58%)}
.card:hover .card__view{opacity:1}
.card__view span{background:var(--accent);color:var(--brand);font-family:var(--font-label);
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:11px 20px;
  border-radius:100px;transform:translateY(12px);transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.card:hover .card__view span{transform:none}
.card__meta{padding:16px 2px 0;display:flex;flex-direction:column;gap:6px}
.card__cat{font-family:var(--font-label);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-dk)}
.card__t{font-family:var(--font-display);font-size:22px;text-transform:uppercase;line-height:1.02;
  color:var(--brand);letter-spacing:-.005em}
.card__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:2px}
.card__line{font-size:14px;color:var(--muted);line-height:1.45}
.card__p{font-family:var(--font-display);font-size:19px;color:var(--brand);flex:0 0 auto}
.card.hidden{display:none}

/* ---------------------------------------------------------- lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(6,6,8,.94);display:none;padding:24px;
  overflow:auto;backdrop-filter:blur(6px)}
.lb.open{display:grid;place-items:center;animation:fadein .25s ease both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.lb-inner{background:var(--paper);border-radius:18px;max-width:1000px;width:100%;display:grid;
  grid-template-columns:1.05fr .95fr;overflow:hidden;position:relative;
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9);animation:pop .34s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes pop{from{opacity:0;transform:scale(.94) translateY(18px)}to{opacity:1;transform:none}}
.lb-inner > img{width:100%;height:100%;object-fit:cover;background:var(--brand);aspect-ratio:1}
.lb-body{padding:clamp(28px,3.4vw,46px)}
.lb-body .cat{font-family:var(--font-label);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-dk)}
.lb-body h2{font-family:var(--font-display);font-size:clamp(28px,3.6vw,42px);text-transform:uppercase;
  margin:10px 0 16px;line-height:1;color:var(--brand)}
.lb-body p{color:var(--muted);font-size:16px}
.lb-price{margin:26px 0 0;padding-top:22px;border-top:2px solid var(--line)}
.lb-price b{font-family:var(--font-display);font-size:34px;color:var(--brand);display:block;line-height:1}
.lb-price span{font-size:14px;color:var(--muted);display:block;margin-top:8px}
.lb-nav{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.lb-close{position:absolute;top:14px;right:16px;z-index:3;background:var(--paper);
  border:2px solid var(--line);border-radius:50%;width:44px;height:44px;font-size:20px;line-height:1;
  cursor:pointer;color:var(--brand);transition:transform .22s,background .22s,border-color .22s}
.lb-close:hover{background:var(--accent);border-color:var(--accent);transform:rotate(90deg)}

/* ---------------------------------------------------------- numbered blocks */
.blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2px;margin-top:52px;
  background:rgba(255,255,255,.14)}
.block{background:var(--brand);padding:34px 30px 38px;position:relative;overflow:hidden;
  transition:background .34s,transform .34s cubic-bezier(.2,.8,.2,1)}
.block:hover{background:var(--brand-soft);transform:translateY(-6px);z-index:2}
.block__n{font-family:var(--font-display);font-size:54px;line-height:1;color:var(--accent)}
.block h3{font-family:var(--font-display);font-size:21px;text-transform:uppercase;margin:14px 0 10px;
  color:var(--white);letter-spacing:-.005em}
.block p{font-size:15px;color:var(--tint);line-height:1.55}
.block::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.block:hover::after{transform:scaleX(1)}
.blocks.light{background:var(--line)}
.blocks.light .block{background:var(--paper)}
.blocks.light .block:hover{background:var(--cream)}
.blocks.light h3{color:var(--brand)}
.blocks.light p{color:var(--muted)}

/* ---------------------------------------------------------- editorial split */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,76px);align-items:center}
.duo.flip .duo__art{order:2}
.duo__art{position:relative}
.duo__art img{width:100%;border-radius:16px;box-shadow:0 40px 70px -34px rgba(0,0,0,.55)}
.tagbox{position:absolute;left:-22px;bottom:26px;background:var(--accent);color:var(--brand);
  padding:16px 22px;border-radius:12px;box-shadow:0 20px 40px -20px rgba(0,0,0,.5);
  animation:bob 5.5s ease-in-out infinite}
.tagbox b{font-family:var(--font-display);font-size:26px;display:block;line-height:1}
.tagbox span{font-size:12px;display:block;margin-top:5px;font-weight:600}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------------------------------------------------------- statement */
.statement{text-align:center}
.statement h2{max-width:17ch;margin:0 auto}
.statement h2 em{font-style:normal;color:var(--accent)}
.statement .lede{margin:26px auto 0}

/* ---------------------------------------------------------- price cards */
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:24px;margin-top:48px}
.pcard{position:relative;border:2px solid var(--line);border-radius:16px;padding:34px 30px 32px;
  background:var(--paper);display:flex;flex-direction:column;overflow:hidden;
  transition:transform .34s cubic-bezier(.2,.8,.2,1),box-shadow .34s,border-color .34s}
.pcard::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .42s cubic-bezier(.2,.8,.2,1)}
.pcard:hover{transform:translateY(-10px);border-color:var(--brand);
  box-shadow:0 36px 60px -30px rgba(0,0,0,.4)}
.pcard:hover::before{transform:scaleX(1)}
.pcard.hilite{border-color:var(--accent);background:var(--cream)}
.pcard.hilite::before{transform:scaleX(1)}
.pcard.hilite:hover{border-color:var(--accent);box-shadow:0 36px 60px -26px rgba(255,90,31,.45)}
.pcard__tag{font-family:var(--font-label);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-dk)}
.pcard h3{font-family:var(--font-display);font-size:25px;text-transform:uppercase;margin:12px 0 0;
  color:var(--brand);line-height:1.05}
.pcard__amt{font-family:var(--font-display);font-size:52px;color:var(--brand);line-height:1;margin:18px 0 0}
.pcard__sub{font-size:14px;color:var(--muted);margin-top:10px}
.pcard ul{list-style:none;margin:24px 0 0;padding:0;flex:1}
.pcard li{font-size:15px;color:var(--muted);padding:9px 0 9px 26px;position:relative;line-height:1.5}
.pcard li::before{content:"";position:absolute;left:0;top:17px;width:13px;height:2px;background:var(--accent)}
.pcard .btn{margin-top:28px;text-align:center;width:100%}

/* ---------------------------------------------------------- notice */
.notice{border:2px solid var(--line);border-left:6px solid var(--accent);background:var(--cream);
  padding:24px 28px;border-radius:0 14px 14px 0;margin:32px 0}
.dark .notice{background:var(--brand-soft);border-color:var(--brand-soft);border-left-color:var(--accent)}
.notice p{font-size:16px;color:var(--muted)}
.dark .notice p{color:var(--tint)}
.notice p + p{margin-top:12px}
.notice b{color:var(--brand)}
.dark .notice b{color:var(--white)}

/* ---------------------------------------------------------- faq */
.faqs{margin-top:44px;border-top:2px solid var(--line)}
.faq{border-bottom:2px solid var(--line);transition:background .25s}
.faq:hover{background:var(--cream)}
.faq h3{font-family:var(--font-display);font-size:21px;text-transform:uppercase;color:var(--brand);
  padding:26px 44px 12px 0;position:relative;line-height:1.1;letter-spacing:-.005em}
.faq h3::after{content:"+";position:absolute;right:6px;top:22px;color:var(--accent);font-size:30px;
  font-family:var(--font-body);line-height:1}
.faq p{color:var(--muted);font-size:16px;padding:0 44px 26px 0}

/* ---------------------------------------------------------- footer */
.ft{background:var(--brand-dk);color:var(--tint);padding:clamp(56px,7vw,88px) 0 34px;position:relative}
.ft a{color:var(--tint);text-decoration:none;transition:color .2s}
.ft a:hover{color:var(--accent)}
.ft__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;
  padding-bottom:44px;border-bottom:2px solid rgba(255,255,255,.1)}
.ft__top svg{height:34px;width:auto;color:var(--white);margin-bottom:18px}
.ft__top p{font-size:15px;color:var(--slate);line-height:1.6}
.ft__top h4{font-family:var(--font-display);font-size:15px;text-transform:uppercase;color:var(--white);
  margin-bottom:14px;letter-spacing:.05em}
.ft__top ul{list-style:none;padding:0;margin:0}
.ft__top li{font-size:15px}
.ft__top li a{display:inline-block;padding:7px 0;min-height:44px;line-height:30px}
.ft__bot{padding-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13px;color:var(--slate)}
.ig{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);
  border:2px solid rgba(255,255,255,.14);border-radius:100px;padding:11px 20px;font-weight:600;
  font-size:14px;transition:background .24s,border-color .24s,transform .24s;min-height:44px}
.ig:hover{background:var(--accent);border-color:var(--accent);color:var(--brand)!important;
  transform:translateY(-3px)}
.ig svg{width:18px;height:18px;flex:0 0 auto}

/* ---------------------------------------------------------- responsive */
@media(max-width:1000px){.ft__top{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:900px){
  .fh__grid{grid-template-columns:1fr;gap:44px}
  .fan{max-width:430px;margin:0 auto;width:100%}
  .duo{grid-template-columns:1fr;gap:32px}
  .duo.flip .duo__art{order:0}
  .tagbox{left:16px}
  .lb-inner{grid-template-columns:1fr;max-width:520px}
  .lb-inner > img{aspect-ratio:1;height:auto}
  .wrap{padding:0 22px}
  .artmq img{width:150px;height:150px}
  .menu{display:grid;place-items:center;min-width:44px;min-height:44px}
}
@media(max-width:560px){
  .grid{grid-template-columns:1fr 1fr;gap:14px}
  .card__t{font-size:16px}
  .card__line{display:none}
  .card__p{font-size:15px}
  .card__meta{padding-top:12px}
  .fh__meta{gap:20px}
  .fh__meta b{font-size:24px}
  .lb{padding:12px}
  .marquee span{font-size:16px;gap:30px}
  .marquee__track{gap:30px}
  .ft__top{grid-template-columns:1fr}
  .blocks{grid-template-columns:1fr}
  .prices{grid-template-columns:1fr}
}

/* ---- explicit colour on dark grounds (tokens.css sets headings to --brand) ---- */
.fhero h1,.fhero h2,.fhero h3{color:var(--white)}
.fhero .lede,.fhero p{color:var(--tint)}
.band.dark h2,.band.dark h3,.band.ink h2,.band.ink h3{color:var(--white)}
.band.dark .lede,.band.dark p,.band.ink .lede,.band.ink p{color:var(--tint)}
.band.dark .notice p,.band.ink .notice p{color:var(--tint)}
.band.dark .notice b,.band.ink .notice b{color:var(--white)}
.band.dark .block p,.band.ink .block p{color:var(--tint)}
.band.dark .blocks.light h3{color:var(--brand)}
.band.dark .blocks.light p{color:var(--muted)}
.ft__top p{color:var(--slate)}
/* the eyebrow should never wrap awkwardly */
.eyebrow{max-width:52ch;line-height:1.5}

/* ---- dark-ground link + hero polish ---- */
.fhero .tlink,.band.dark .tlink,.band.ink .tlink{color:var(--white);border-bottom-color:var(--accent)}
.fhero .tlink:hover,.band.dark .tlink:hover{color:var(--accent)}
.fan img{width:56%}
.fan img:nth-child(1){left:0;top:2%}
.fan img:nth-child(2){right:0;top:0}
.fan img:nth-child(3){left:6%;bottom:0}
.fan img:nth-child(4){right:4%;bottom:4%}

/* keep the misregistration readable */
.card:hover .rgb::before{opacity:.55;transform:translate(-2px,1px)}
.card:hover .rgb::after{opacity:.55;transform:translate(2px,-1px)}

@media(max-width:560px){
  .eyebrow{letter-spacing:.14em;font-size:11px;gap:9px}
  .eyebrow::before{width:18px}
}

/* ============================================================
   REVISION 2
   - the orange text ticker is gone (it shouted over the artwork)
   - orange is pulled back to CTAs and numerals only
   - one piece is allowed to be BIG, breaking the centred rhythm
   ============================================================ */

/* ---- eyebrow: quiet label, small orange tick. Was solid orange everywhere. ---- */
.eyebrow{color:var(--muted);letter-spacing:.2em}
.eyebrow::before{width:22px;height:2px;background:var(--accent)}
.band.dark .eyebrow,.band.ink .eyebrow,.fhero .eyebrow,.spot .eyebrow{color:var(--slate)}

/* ---- spotlight: one piece, oversized, bleeding past the column ---- */
.spot{background:var(--brand-dk);color:var(--white);position:relative;overflow:hidden;
  padding:clamp(60px,8vw,110px) 0}
.spot::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(#fff 1.1px,transparent 1.2px);background-size:9px 9px;opacity:.07}
.spot .wrap{position:relative;z-index:1}
.spot__grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(30px,4vw,64px);align-items:center}
.spot__txt h2{color:var(--white);margin-top:18px}
.spot__txt .lede{color:var(--tint);margin-top:18px}
.spot__art{position:relative}
.spot__art img{width:118%;max-width:none;border-radius:18px;display:block;
  box-shadow:0 60px 100px -40px rgba(0,0,0,.95);
  transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.spot__art:hover img{transform:scale(1.02) rotate(-.6deg)}

/* ---- pull orange back: numerals and CTAs keep it, chrome does not ---- */
.card__cat{color:var(--muted)}
.pcard__tag{color:var(--muted)}
.lb-body .cat{color:var(--muted)}
.fh__meta b{color:var(--white)}
.fh__meta b + span{color:var(--slate)}
.fh__meta div{border-left:2px solid var(--accent);padding-left:14px;min-width:120px}
.tagbox{background:var(--white);color:var(--brand)}
.tagbox b{color:var(--brand)}

/* ---- statement block: let the type carry it ---- */
.statement h2{max-width:20ch}

@media(max-width:900px){
  .spot__grid{grid-template-columns:1fr;gap:34px}
  .spot__art img{width:100%}
}
@media(max-width:560px){
  .fh__meta{gap:14px}
  .fh__meta div{min-width:0;flex:1 1 100%;padding-left:12px}
}

/* ---- hero fan: spread so each piece reads, was overlapping too heavily ---- */
.fan img{width:50%}
.fan img:nth-child(1){left:0;top:0;transform:rotate(-6deg)}
.fan img:nth-child(2){right:0;top:6%;transform:rotate(4deg)}
.fan img:nth-child(3){left:4%;bottom:0;transform:rotate(3deg)}
.fan img:nth-child(4){right:6%;bottom:6%;transform:rotate(-3deg)}
.fan:hover img:nth-child(1){transform:rotate(-9deg) translate(-14px,-8px)}
.fan:hover img:nth-child(2){transform:rotate(7deg) translate(12px,-10px)}
.fan:hover img:nth-child(3){transform:rotate(5deg) translate(-6px,10px) scale(1.02)}
.fan:hover img:nth-child(4){transform:rotate(-6deg) translate(14px,8px)}

/* ============================================================
   LIGHTBOX v2 — mobile-first sheet
   The old one centred with grid place-items, so a card taller than
   the viewport overflowed upward and was unreachable. This version
   gives the sheet its own scroller, a sticky back bar, and a sticky
   buy bar in thumb reach.
   ============================================================ */
.lb{position:fixed;inset:0;z-index:300;background:var(--paper);display:none;
  padding:0;overflow:hidden}
.lb.open{display:block;animation:lbIn .22s ease both}
@keyframes lbIn{from{opacity:0}to{opacity:1}}

/* sticky top bar — the missing back button */
.lb__bar{position:absolute;top:0;left:0;right:0;height:60px;z-index:3;
  display:flex;align-items:center;gap:10px;padding:0 8px 0 4px;
  background:rgba(250,250,247,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.lb__back{display:inline-flex;align-items:center;gap:4px;background:none;border:0;
  font:inherit;font-weight:600;font-size:15px;color:var(--brand);cursor:pointer;
  padding:10px 12px;min-height:44px;border-radius:100px}
.lb__back:hover{background:var(--cream)}
.lb__back svg{width:22px;height:22px}
.lb__bartitle{flex:1;font-family:var(--font-display);font-size:16px;text-transform:uppercase;
  color:var(--brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.lb__x{background:none;border:0;font-size:30px;line-height:1;color:var(--muted);cursor:pointer;
  width:44px;height:44px;border-radius:50%;flex:0 0 auto}
.lb__x:hover{background:var(--cream);color:var(--brand)}

/* the scroller — this is what was missing */
.lb__scroll{position:absolute;top:60px;left:0;right:0;bottom:76px;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.lb-inner{background:var(--paper);border-radius:0;max-width:none;width:100%;display:block;
  box-shadow:none;animation:none;overflow:visible;position:static}
.lb__art{position:relative;background:var(--brand)}
.lb__art img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block}

/* prev / next */
.lb__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(250,250,247,.9);color:var(--brand);display:grid;place-items:center;
  transition:background .2s,transform .2s}
.lb__arrow svg{width:24px;height:24px}
.lb__arrow:hover{background:var(--accent);transform:translateY(-50%) scale(1.06)}
.lb__arrow--prev{left:10px}
.lb__arrow--next{right:10px}

.lb-body{padding:26px 22px 34px}
.lb-body h2{margin:8px 0 14px}
.lb__count{margin-top:18px;font-size:13px;color:var(--slate);
  font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* sticky buy bar, thumb reach */
.lb__foot{position:absolute;left:0;right:0;bottom:0;height:76px;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:0 18px calc(env(safe-area-inset-bottom,0px)) 18px;
  background:rgba(250,250,247,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line)}
.lb__footprice{display:flex;flex-direction:column;line-height:1.15}
.lb__footprice b{font-family:var(--font-display);font-size:24px;color:var(--brand)}
.lb__footprice span{font-size:12.5px;color:var(--muted)}
.lb__foot .btn{padding:13px 24px}

/* the old in-body price block and button row are redundant on mobile */
@media(max-width:900px){
  .lb-price,.lb-nav{display:none}
  .lb__foot{display:flex}
}

/* ---- desktop: back to a centred card ---- */
@media(min-width:901px){
  .lb{background:rgba(6,6,8,.93);backdrop-filter:blur(6px);padding:34px}
  .lb.open{display:grid;place-items:center}
  .lb__bar{display:none}
  .lb__foot{display:none}
  .lb__scroll{position:relative;top:auto;left:auto;right:auto;bottom:auto;
    max-height:calc(100vh - 68px);width:100%;max-width:1020px;border-radius:18px;
    overflow-y:auto;background:var(--paper);
    box-shadow:0 60px 120px -40px rgba(0,0,0,.9)}
  .lb-inner{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;
    animation:pop .3s cubic-bezier(.2,.9,.3,1.2) both}
  .lb__art{height:100%}
  .lb__art img{height:100%;aspect-ratio:auto;min-height:100%}
  .lb-body{padding:clamp(30px,3vw,46px);align-self:center}
  .lb-price,.lb-nav{display:block}
  .lb-nav{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
  /* floating close, outside the card */
  .lb__x{position:fixed;top:22px;right:26px;display:block;background:var(--paper);
    border:2px solid var(--line);width:48px;height:48px;font-size:26px;z-index:5}
  .lb__x:hover{background:var(--accent);border-color:var(--accent);transform:rotate(90deg)}
}

/* ============================================================
   FIND YOUR MOMENT
   One step visible at a time. Big tap targets, no typing.
   ============================================================ */
.fnd{min-height:70vh}
.fstep{display:none}
.fstep.is-on{display:block;animation:fIn .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes fIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.fnd__h{margin:16px 0 22px}
.fnd__h .l2{display:block;color:var(--accent)}
.fnd__note{margin-top:32px;font-size:13.5px;color:var(--slate);
  padding-top:20px;border-top:2px solid var(--line)}

/* progress */
.fprog{height:5px;background:var(--line);border-radius:100px;overflow:hidden;margin-bottom:26px}
.fprog span{display:block;height:100%;width:0;background:var(--accent);border-radius:100px;
  transition:width .45s cubic-bezier(.2,.8,.2,1)}
.fq{font-family:var(--font-label);font-size:11.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-dk);margin-bottom:10px}

/* options */
.fopts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:30px}
.fo{text-align:left;background:var(--paper);border:2px solid var(--line);border-radius:14px;
  padding:22px 24px;cursor:pointer;font:inherit;color:inherit;position:relative;overflow:hidden;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s;
  min-height:76px;display:flex;flex-direction:column;justify-content:center}
.fo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.fo:hover{transform:translateY(-4px);border-color:var(--brand);
  box-shadow:0 22px 40px -24px rgba(0,0,0,.45)}
.fo:hover::after{transform:scaleX(1)}
.fo.is-hit{background:var(--brand);border-color:var(--brand);transform:scale(.97)}
.fo.is-hit .fo__label,.fo.is-hit .fo__sub{color:var(--white)}
.fo__label{font-family:var(--font-display);font-size:22px;text-transform:uppercase;
  color:var(--brand);line-height:1.05;letter-spacing:-.005em}
.fo__sub{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.4}
.fback{margin-top:28px;background:none;border:0;font:inherit;font-size:15px;font-weight:600;
  color:var(--muted);cursor:pointer;padding:12px 0;min-height:44px}
.fback:hover{color:var(--accent-dk)}

/* thinking */
.fthink{text-align:center;padding:70px 0}
.fthink__dots{display:flex;gap:12px;justify-content:center;margin-bottom:28px}
.fthink__dots i{width:15px;height:15px;border-radius:50%;background:var(--accent);
  animation:bounceDot 1s infinite ease-in-out}
.fthink__dots i:nth-child(2){animation-delay:.16s}
.fthink__dots i:nth-child(3){animation-delay:.32s}
@keyframes bounceDot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}

/* result */
.fres__card{margin-top:22px;border:2px solid var(--brand);border-radius:18px;overflow:hidden;
  background:var(--paper);box-shadow:0 40px 70px -34px rgba(0,0,0,.5);
  animation:pop .45s cubic-bezier(.2,.9,.3,1.25) both}
.fres__art img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.fres__body{padding:clamp(24px,3.5vw,38px)}
.fres__cat{font-family:var(--font-label);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-dk)}
.fres__body h2{font-size:clamp(30px,5vw,52px);text-transform:uppercase;margin:10px 0 14px;
  line-height:1;color:var(--brand);font-family:var(--font-display)}
.fres__why{font-size:18px;color:var(--muted);line-height:1.55}
.fres__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;align-items:center}
.fres__vaultnote{font-size:14px;color:var(--muted);flex:1 1 220px;line-height:1.5}
.fres__alsoh{font-family:var(--font-display);font-size:17px;text-transform:uppercase;
  color:var(--brand);margin:44px 0 16px;letter-spacing:.02em}
.fres__also{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.falso__art{border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.falso__art img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.falso__t{font-family:var(--font-display);font-size:17px;text-transform:uppercase;
  color:var(--brand);margin-top:11px;line-height:1.1}
.falso__c{font-size:13px;color:var(--muted);margin-top:3px}

/* vault placeholder — art that exists but is not prepped for sale */
.vault{position:relative;aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;gap:8px;padding:22px;background:var(--brand);color:#fff;
  overflow:hidden}
.vault::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(#fff 1.3px,transparent 1.4px);background-size:11px 11px;opacity:.13}
.vault::before{content:"";position:absolute;width:150%;height:150%;
  background:radial-gradient(circle,rgba(255,90,31,.4),transparent 62%);
  animation:drift 14s ease-in-out infinite}
.vault > *{position:relative;z-index:1}
.vault__tag{font-family:var(--font-label);font-size:9.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);border:1.5px solid var(--accent);
  border-radius:100px;padding:5px 12px}
.vault__t{font-family:var(--font-display);font-size:clamp(20px,4.5vw,38px);text-transform:uppercase;
  line-height:1;color:#fff;margin-top:4px}
.vault__sub{font-size:12px;color:var(--slate);max-width:22ch;line-height:1.4}
.vault--big .vault__tag{font-size:11px;padding:7px 16px}
.vault--big .vault__sub{font-size:14px}

@media(max-width:560px){
  .fopts{grid-template-columns:1fr;gap:11px}
  .fo{padding:18px 20px;min-height:66px}
  .fo__label{font-size:19px}
  .fres__also{grid-template-columns:1fr}
  .fthink{padding:48px 0}
}

/* ---- touch targets: text links and the logo need 44px on mobile ---- */
@media(max-width:900px){
  .tlink{min-height:44px;padding-top:11px;padding-bottom:11px}
  .brand{min-height:44px;align-items:center}
  .fback{min-height:44px}
}

/* ============================================================
   REAL LOGO (supplied by Tony, Feb 2025, extracted from PDF at 600 DPI)
   Roundel in the nav, transparent wordmark in the footer where a black
   circle would vanish against the dark ground.
   ============================================================ */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand svg{display:none}                       /* retire the reconstruction */
.brand__mark{height:46px;width:46px;display:block;
  transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.brand:hover .brand__mark{transform:rotate(-6deg) scale(1.06)}
.brand__name{font-family:var(--font-display);font-size:15px;text-transform:uppercase;
  letter-spacing:.02em;color:var(--brand);line-height:1.05;max-width:8ch}
.ft__top .brand__wm{height:auto;width:auto;max-width:210px;margin-bottom:18px;display:block}
.ft__top svg{display:none}

@media(max-width:900px){
  .brand__name{display:none}                   /* mark only, keeps the bar tidy */
  .brand__mark{height:42px;width:42px}
}

/* tokens.css sets .brand img{height:138px} — beat it on specificity */
.nav .brand img.brand__mark{height:46px;width:46px;filter:none}
.ft .brand__wm,.ft__top img.brand__wm{height:auto;width:auto;max-width:200px}
.brand__name{max-width:none;white-space:nowrap;font-size:14px;letter-spacing:.01em}
@media(max-width:900px){.nav .brand img.brand__mark{height:42px;width:42px}}