/* ==========================================================================
   Magic Touch — Zouk Mosbeh
   Palette sampled from the shop's own poster. See BUILD-PLAN.md.
   ========================================================================== */

:root{
  --ink:        #0D0D0D;
  --ink-deep:   #080908;
  --concrete:   #151515;
  --concrete-2: #1D1D1D;
  --cream:      #E8DBCA;
  --cream-dim:  #A79E92;
  --blood:      #8F181A;  /* deep paint, fills only            */
  --blood-lit:  #A61B1E;  /* button fill, cream on it = 5.4:1  */
  --blood-spray:#C8272C;  /* graffiti + display, large = 3.5:1 */
  --blood-text: #E04B41;  /* small red text, 4.6:1 minimum     */
  --wa:         #25D366;
  --bar-h:      0px; /* set by JS to the order bar's height while it is up */

  --wall: url("../img/wall.png");

  --ease-poster: cubic-bezier(.76,0,.24,1);
  --ease-out:    cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-loading{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* Tailwind's Preflight used to supply the rest of the reset. The CDN was a
   runtime compiler doing nothing (the markup uses no utility classes) and was
   removed, so the parts the layout actually depended on live here now.
   Without these, UA defaults return: h1 regains a 0.67em margin that shoves
   the wordmark 181px down into the hero columns. */
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}
p,figure,blockquote,dl,dd,fieldset,pre{margin:0}
ul,ol,menu{list-style:none;margin:0;padding:0}
svg{display:block}
button,input,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;border:0}
button{background-color:transparent;background-image:none;padding:0}
table{border-collapse:collapse}

:focus-visible{outline:2px solid var(--cream);outline-offset:3px;border-radius:2px}

.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Shared type roles ------------------------------------------------------ */
.t-display{font-family:"Anton",Impact,"Arial Narrow Bold",sans-serif;font-weight:400;letter-spacing:.005em;text-transform:uppercase}
.t-eyebrow{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--blood-text);font-weight:600}
.t-label{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-dim);font-weight:600}
a.t-label:hover{color:var(--cream)}

.wall{background:var(--wall) repeat;background-size:520px}

/* Section rhythm --------------------------------------------------------- */
.band{position:relative;padding:clamp(64px,9vw,132px) 0}
.wrap{width:min(1240px,92vw);margin-inline:auto}
.rule{height:1px;background:linear-gradient(to right,rgba(232,219,202,.22),rgba(232,219,202,0))}

/* ==========================================================================
   1. Loader
   ========================================================================== */
.loader{position:fixed;inset:0;z-index:120;display:grid;grid-template-columns:1fr 1fr}
.loader[hidden]{display:none}
.loader__half{
  background:#FFFFFF;display:flex;align-items:center;overflow:hidden;
  transition:transform .9s var(--ease-poster);
}
.loader__half--l{justify-content:flex-end;padding-right:.28em}
.loader__half--r{justify-content:flex-start;padding-left:.28em}
.loader__word{
  font-family:"Anton",Impact,sans-serif;color:#0D0D0D;
  font-size:min(9.4vw,116px);line-height:1;letter-spacing:.005em;
  opacity:0;transform:translateY(.14em);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out),translate 1s cubic-bezier(.7,0,.2,1);
  white-space:nowrap;
}
.loader.is-ready .loader__word{opacity:1;transform:translateY(0)}
.loader.is-open .loader__half--l{transform:translateX(-101%)}
.loader.is-open .loader__half--r{transform:translateX(101%)}
.loader.is-open .loader__word--l{translate:-22% 0}
.loader.is-open .loader__word--r{translate:22% 0}

/* ==========================================================================
   2. Hero
   ========================================================================== */
.hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:var(--ink);isolation:isolate;
  --mark-size:min(19.4vw,30vh);
  --mark-bottom:calc(4.5vh + 0.9 * var(--mark-size));
  /* The graffiti underline is pinned at 31vh but the wordmark shrinks with
     the viewport, so below ~1200px the left stack rode up into it. */
  --col-top:max(calc(var(--mark-bottom) + 5.5vh),35vh);}
.hero__wall{position:absolute;inset:0;background:var(--wall) repeat;background-size:520px;opacity:.94}
.hero__vig{position:absolute;inset:0;background:
  radial-gradient(115% 85% at 50% 38%,rgba(0,0,0,0) 32%,rgba(0,0,0,.72) 100%),
  linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 62%,rgba(8,9,8,.92) 100%);}
.hero__mark{
  position:absolute;left:0;right:0;top:4.5vh;z-index:1;
  text-align:center;white-space:nowrap;color:var(--cream);
  font-size:var(--mark-size);line-height:.9;
  text-shadow:0 .04em .12em rgba(0,0,0,.45);
}
.hero__figure{
  position:absolute;left:50%;bottom:0;z-index:2;
  transform:translateX(-50%);
  height:min(88vh,900px);width:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.9));
}
.hero__graffiti{
  position:absolute;left:2.6vw;top:14.5vh;z-index:3;
  font-family:"Permanent Marker",cursive;color:var(--blood-spray);
  font-size:min(5.4vw,74px);line-height:.92;
  transform:rotate(-7deg);
  text-shadow:0 0 26px rgba(200,39,44,.4);
  pointer-events:none;
}
.hero__graffiti span{display:block;margin-left:1.6em}
.hero__slash{position:absolute;left:3.4vw;top:31vh;z-index:3;width:min(22vw,300px);pointer-events:none}

.hero__col{position:absolute;z-index:4;display:flex;flex-direction:column}
.hero__col--l{left:3vw;top:var(--col-top);width:min(320px,26vw);gap:24px;align-items:stretch}
.hero__col--r{right:3vw;top:calc(var(--mark-bottom) + 4vh);gap:22px;align-items:flex-start;text-align:left}

.cutgrid{display:flex;gap:3px;align-self:center}
.cutgrid__cell{width:66px;height:66px;background:linear-gradient(160deg,#2A2724,#0E0E0E);border:1px solid rgba(232,219,202,.16);display:grid;place-items:center;overflow:hidden}
.cutgrid__cell img{width:100%;height:100%;object-fit:cover;filter:brightness(.9)}
.cutgrid__cell svg{width:44px;height:44px;color:var(--cream);opacity:.82}

.hero__tiktok{display:inline-flex;align-items:center;min-height:44px;margin:0;text-decoration:none}

.pricelist{display:flex;flex-direction:column;gap:9px;min-width:210px}
.pricelist li{display:flex;justify-content:space-between;gap:22px;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase}
.pricelist b{font-weight:600;color:var(--cream)}

/* Product carousel: a sibling of .hero__col, not a child of it, so it still
   shows below 1024px where .hero__col--l is hidden entirely (see Responsive). */
.hero__carousel{
  position:relative;z-index:4;width:100%;
  /* Height-aware: the hero is a fixed 100vh, so a plate sized only in px runs
     off the bottom of a short laptop screen. */
  --car-w:min(172px,19vh);
  --car-int:4200ms;
  --ease-car:cubic-bezier(.32,.72,0,1);
}
.hero__car-row{display:block}
.hero__car-btn{
  position:absolute;top:50%;z-index:5;transform:translateY(-50%);
  width:44px;height:44px;display:grid;place-items:center;
  background:none;border:0;color:var(--cream);cursor:pointer;
  opacity:0;transition:opacity .22s var(--ease-out),color .2s var(--ease-out);
}
.hero__car-btn--prev{left:-6px}
.hero__car-btn--next{right:-6px}
.hero__car-btn svg{width:26px;height:26px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.9))}
.hero__car-btn--prev svg{transform:scaleX(-1)}
.hero__car-btn:hover{color:var(--blood-spray)}
/* Hover-only controls strand keyboard and touch users, so reveal on
   focus-within too and keep them permanently visible where hover does not
   exist. */
@media (hover:hover){
  .hero__car-stage:hover .hero__car-btn,
  .hero__car-stage:focus-within .hero__car-btn{opacity:1}
}
@media (hover:none){ .hero__car-btn{opacity:1} }
.hero__car-btn:focus-visible{opacity:1}

/* Depth stage. Every product is a real node placed by its signed distance from
   the active index, so a step animates continuously instead of cutting. The
   reference uses a 1200px perspective against a 300px card; 820px against our
   204px plate gives the same foreshortening (0.845 at the first step). */
.hero__car-stage{
  position:relative;
  width:100%;height:calc(var(--car-w) * 1.25);
  perspective:820px;perspective-origin:50% 50%;
}
.hero__car-slide{
  position:absolute;left:50%;top:50%;
  width:var(--car-w);height:calc(var(--car-w) * 1.25);
  margin:calc(var(--car-w) * -0.625) 0 0 calc(var(--car-w) / -2);
  padding:0;background:none;border:0;color:inherit;cursor:pointer;
  transition:transform .64s var(--ease-car),filter .64s var(--ease-car),opacity .64s var(--ease-car);
  will-change:transform,filter;
}
.hero__car-art{
  display:block;width:100%;height:100%;overflow:hidden;position:relative;
  background:linear-gradient(165deg,var(--concrete-2),#0B0B0B);
  border:1px solid rgba(232,219,202,.18);
}
.hero__car-art img{width:100%;height:100%;object-fit:cover;display:block}
.hero__car-slide--main .hero__car-art{transition:border-color .25s var(--ease-out)}
.hero__car-slide--main:hover .hero__car-art,
.hero__car-slide--main:focus-visible .hero__car-art{border-color:rgba(232,219,202,.55)}
.hero__car-own{
  position:absolute;top:6px;left:6px;background:var(--blood-lit);color:var(--cream);
  font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:2px 5px;line-height:1.4;
}

/* The timer, drawn across the bottom of the active plate. Its animationend is
   what advances the carousel, so the bar and the switch cannot drift apart and
   pausing the animation pauses the advance. Never runs under reduced motion:
   the global block would collapse it to .01ms and spin the carousel. */
.hero__car-prog{
  position:absolute;left:50%;bottom:0;z-index:4;
  width:var(--car-w);margin-left:calc(var(--car-w) / -2);
  height:3px;background:rgba(232,219,202,.16);overflow:hidden;
}
.hero__car-prog i{
  display:block;width:100%;height:100%;background:var(--blood-spray);
  transform:scaleX(0);transform-origin:left center;
}
.hero__car-prog.is-running i{animation:carprog var(--car-int) linear forwards}
.hero__carousel.is-paused .hero__car-prog i{animation-play-state:paused}
@keyframes carprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.hero__car-n{
  margin:10px 0 0;
  font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cream-dim);text-align:center;line-height:1.3;overflow-wrap:break-word;
}

/* Buttons ---------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:13px 22px;
  font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--cream);color:var(--cream);
  background:transparent;transition:background .25s var(--ease-out),color .25s var(--ease-out),transform .25s var(--ease-out);
}
.btn:hover{background:var(--cream);color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;flex:none}
.btn--blood{border-color:var(--blood-lit);background:var(--blood-lit);color:var(--cream)}
.btn--blood:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn--ghost{border-color:rgba(232,219,202,.35)}

.hero__meta{display:flex;flex-direction:column;gap:6px;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase}
.loc{display:inline-flex;flex-direction:column;gap:7px;align-items:flex-start;
  padding:10px 0;color:var(--cream);text-decoration:none}
.loc__place{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.loc__map{display:inline-flex;align-items:center;gap:7px;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cream-dim);border:1px solid rgba(232,219,202,.3);
  padding:8px 12px;transition:background .25s var(--ease-out),color .25s var(--ease-out),border-color .25s}
.loc__map svg{width:15px;height:15px;flex:none}
.loc:hover .loc__map{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.hero__hours{font-family:"Anton",Impact,sans-serif;font-size:1.6rem;letter-spacing:.02em;color:var(--cream)}

/* ==========================================================================
   3. Sticky nav
   ========================================================================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(8,9,8,.95);
  border-bottom:1px solid rgba(232,219,202,.12);
  transform:translateY(-100%);
  transition:transform .45s var(--ease-out);
}
.nav.is-shown{transform:translateY(0)}
.nav__in{width:min(1240px,92vw);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;height:62px}
.nav__mark{font-family:"Anton",Impact,sans-serif;font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cream);text-decoration:none}
.nav__links{display:flex;gap:14px;list-style:none;margin:0;padding:0}
.nav__links a{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim);text-decoration:none;transition:color .2s}
.nav__links a:hover{color:var(--cream)}
.nav .btn{min-height:44px;padding:9px 16px;font-size:.68rem}

/* Mobile menu trigger + overlay: hidden by default, shown only below 767px
   (see Responsive). The button doubles as the close control too, so focus
   only ever has to return to one place. */
.nav__burger{
  display:none;flex:none;width:44px;height:44px;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:none;border:0;padding:0;cursor:pointer;
}
.nav__burger span{display:block;width:22px;height:2px;background:var(--cream);
  transition:transform .25s var(--ease-out),opacity .25s var(--ease-out)}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav__overlay{
  position:fixed;inset:0;z-index:59;
  background:var(--cream);color:var(--ink);
  padding:78px 8vw 40px;
  display:flex;flex-direction:column;justify-content:center;gap:34px;
  transform:translateX(100%);transition:transform .35s var(--ease-out);
}
.nav__overlay[hidden]{display:none}
.nav__overlay.is-open{transform:translateX(0)}
.nav__overlay-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.nav__overlay-links a{
  display:flex;align-items:center;min-height:56px;
  font-family:"Anton",Impact,sans-serif;font-size:clamp(1.8rem,9vw,2.6rem);
  text-transform:uppercase;color:var(--ink);text-decoration:none;
}
.nav__overlay .btn{align-self:flex-start;margin-top:8px}
/* The shared focus ring is cream-on-dark; on this cream panel it needs to
   flip dark to stay visible. */
.nav__overlay :focus-visible{outline-color:var(--ink)}

body.has-nav-open{overflow:hidden}

/* ==========================================================================
   4. About
   ========================================================================== */
.about{background:var(--ink-deep)}
.about__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,90px);align-items:start}
.about__h{font-size:clamp(2.4rem,6vw,4.6rem);line-height:.94;margin:14px 0 0}
.about__h em{font-style:normal;color:var(--blood-spray)}
.about__body p{margin:0 0 20px;color:#CFC7BC;font-size:1.02rem;line-height:1.72;max-width:58ch}
.about__body p:last-child{margin-bottom:0}
.about__facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:34px;background:rgba(232,219,202,.14)}
.about__facts div{background:var(--ink-deep);padding:18px 16px}
.about__facts dt{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--blood-text);margin-bottom:7px}
.about__facts dd{margin:0;font-size:.92rem;color:var(--cream)}

/* ==========================================================================
   5. Services
   ========================================================================== */
.services{background:var(--ink)}
.svc{list-style:none;margin:38px 0 0;padding:0;border-top:1px solid rgba(232,219,202,.16)}
.svc__row{border-bottom:1px solid rgba(232,219,202,.16)}
.svc__link{
  display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr) auto;
  gap:clamp(16px,3vw,44px);align-items:center;
  padding:26px 4px;text-decoration:none;color:inherit;
  transition:background .3s var(--ease-out),padding-inline .3s var(--ease-out);
}
.svc__link:hover{background:var(--concrete);padding-inline:20px}
.svc__name{font-family:"Anton",Impact,sans-serif;font-size:clamp(1.35rem,2.6vw,2rem);text-transform:uppercase;letter-spacing:.02em;grid-column:1/3}
.svc__desc{display:none;color:var(--cream-dim);font-size:.92rem}
.svc__go{width:22px;height:22px;color:var(--cream-dim);transition:transform .3s var(--ease-out),color .3s}
/* Desktop gets the affordance from hover. Touch has no hover, so the row needs
   to say what it does on its face; shown below 768px. */
.svc__cta{display:none;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--blood-text)}
.svc__link:active{background:var(--concrete)}
.svc__link:hover .svc__go{transform:translateX(6px);color:var(--cream)}

/* ==========================================================================
   6. Shop
   ========================================================================== */
.shop{background:var(--ink-deep)}
.shop__cat{margin-top:clamp(44px,6vw,76px)}
.shop__cathead{display:flex;align-items:baseline;gap:18px;margin-bottom:24px}
.shop__cathead h3{font-family:"Anton",Impact,sans-serif;font-size:clamp(1.2rem,2.4vw,1.6rem);text-transform:uppercase;letter-spacing:.06em;margin:0}
.shop__cathead .rule{flex:1}
.shop__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.card{
  background:var(--concrete);border:1px solid rgba(232,219,202,.12);
  display:flex;flex-direction:column;cursor:pointer;
  transition:border-color .3s var(--ease-out),transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.card:hover{border-color:rgba(232,219,202,.34);transform:translateY(-3px)}
.card:has(.card__check:checked){border-color:var(--blood-lit)}
.card.is-highlight{box-shadow:0 0 0 3px var(--blood-spray)}
.card__check{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.card__art{aspect-ratio:4/5;display:grid;place-items:center;position:relative;background:
  radial-gradient(80% 70% at 50% 30%,rgba(232,219,202,.09),rgba(0,0,0,0) 70%),
  linear-gradient(165deg,var(--concrete-2),#0B0B0B);
  border-bottom:1px solid rgba(232,219,202,.1)}
.card__art{overflow:hidden}
.card__art svg{width:52%;height:52%;color:var(--cream);opacity:.9}
.card__art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s var(--ease-out)}
.card:hover .card__art img{transform:scale(1.05)}
.card__tick{
  position:absolute;top:10px;right:10px;width:26px;height:26px;z-index:1;
  border:1.5px solid rgba(232,219,202,.65);background:rgba(8,9,8,.55);
  display:grid;place-items:center;transition:background .2s var(--ease-out),border-color .2s var(--ease-out);
}
.card__tick::after{content:'';width:12px;height:7px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg) translateY(-1px);opacity:0;transition:opacity .15s var(--ease-out)}
.card__check:checked ~ .card__art .card__tick{background:var(--cream);border-color:var(--cream)}
.card__check:checked ~ .card__art .card__tick::after{opacity:1}
.card__check:focus-visible ~ .card__art .card__tick{outline:2px solid var(--cream);outline-offset:2px}
.card__b{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.card__own{align-self:flex-start;background:var(--blood-lit);color:var(--cream);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:3px 8px;margin-bottom:2px}
.card__by{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim)}
.card__n{font-size:.95rem;font-weight:600;line-height:1.35;margin:0}
.card__d{margin:0;color:#B9B0A4;font-size:.82rem;line-height:1.5}

/* ==========================================================================
   7. Lookbook
   ========================================================================== */
.look{background:var(--ink)}
.look__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:38px}
.look__cell{
  position:relative;overflow:hidden;border:1px solid rgba(232,219,202,.12);
  background:linear-gradient(158deg,#2B2825,#0C0C0C);
  aspect-ratio:9/16;display:grid;place-items:center;
  padding:0;cursor:zoom-in;color:inherit;
  transition:border-color .3s var(--ease-out)}
.look__cell:hover{border-color:rgba(232,219,202,.4)}
.look__cell svg{width:58%;height:58%;color:var(--cream);opacity:.5;transition:opacity .35s var(--ease-out),transform .5s var(--ease-out)}
.look__cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out),filter .4s var(--ease-out);filter:brightness(.86)}
.look__cell:hover img{transform:scale(1.05);filter:brightness(1)}
.look__cell b{z-index:2;text-shadow:0 2px 10px rgba(0,0,0,.9)}
.look__cell:hover svg{opacity:.78;transform:scale(1.04)}
.look__cell b{position:absolute;left:12px;bottom:10px;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim);font-weight:600}

.lightbox{position:fixed;inset:0;z-index:110;background:rgba(5,5,5,.94);display:grid;place-items:center;padding:24px}
.lightbox[hidden]{display:none}
.lightbox__fig{width:min(560px,90vw);aspect-ratio:4/5;background:linear-gradient(158deg,#2B2825,#0C0C0C);border:1px solid rgba(232,219,202,.24);display:grid;place-items:center}
.lightbox__fig svg{width:60%;height:60%;color:var(--cream);opacity:.62}
.lightbox__fig img{width:100%;height:100%;object-fit:cover}
.lightbox__cap{margin-top:16px;text-align:center;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim)}
.lightbox__x{position:absolute;top:18px;right:18px;width:48px;height:48px;display:grid;place-items:center;background:none;border:1px solid rgba(232,219,202,.3);color:var(--cream);cursor:pointer}
.lightbox__x svg{width:20px;height:20px}

/* ==========================================================================
   8. Testimonials belt
   ========================================================================== */
.belt-sec{background:var(--ink-deep);overflow:hidden}
.belt{overflow:hidden;margin-top:38px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.belt__track{display:flex;gap:16px;width:max-content;animation:belt 46s linear infinite}
.belt.is-paused .belt__track,.belt:hover .belt__track{animation-play-state:paused}
@keyframes belt{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.quote{
  width:min(400px,80vw);flex:none;background:var(--concrete);
  border:1px solid rgba(232,219,202,.14);padding:26px 24px;
  display:flex;flex-direction:column;gap:14px}
.quote__stars{display:flex;gap:5px}
.quote__stars svg{width:17px;height:17px;color:#E8C87A;filter:drop-shadow(0 0 6px rgba(232,200,122,.5))}
.quote p{margin:0;color:#CFC7BC;font-size:.98rem;line-height:1.62}
.quote footer{display:flex;align-items:center;gap:10px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-dim)}
.quote__dot{width:26px;height:26px;border-radius:50%;background:var(--concrete-2);border:1px solid rgba(232,219,202,.24);display:grid;place-items:center;font-family:"Anton",Impact,sans-serif;font-size:.8rem;color:var(--cream)}

/* ==========================================================================
   9. Footer + FAB
   ========================================================================== */
.foot{background:var(--ink-deep);border-top:1px solid rgba(232,219,202,.14);padding:56px 0 calc(40px + var(--bar-h,0px));transition:padding-bottom .3s var(--ease-out)}
.foot__grid{display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:center}
.foot__mark{font-family:"Anton",Impact,sans-serif;font-size:1.7rem;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.foot__tag{font-family:"Permanent Marker",cursive;color:var(--blood-text);font-size:.92rem;margin:8px 0 0}
.foot__addr{font-size:.82rem;line-height:1.7;color:var(--cream-dim);margin:10px 0 0}
.foot__addr a{color:var(--cream-dim);display:inline-block;padding-block:12px;
  text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(167,158,146,.5)}
.foot__addr a:hover{color:var(--cream)}
.foot__social{display:flex;gap:12px;justify-content:flex-end}
.foot__social a{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(232,219,202,.24);color:var(--cream);transition:background .25s,color .25s}
.foot__social a:hover{background:var(--cream);color:var(--ink)}
.foot__social svg{width:20px;height:20px}
.foot__fine{margin-top:38px;padding-top:20px;border-top:1px solid rgba(232,219,202,.1);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#8A8175;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

.fab{
  position:fixed;z-index:70;right:max(18px,env(safe-area-inset-right));
  bottom:max(18px,env(safe-area-inset-bottom));
  width:58px;height:58px;border-radius:50%;
  background:var(--wa);color:#0A2E17;display:grid;place-items:center;
  box-shadow:0 10px 28px rgba(0,0,0,.55),0 0 0 6px rgba(37,211,102,.14);
  transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out),opacity .22s var(--ease-out),visibility .22s}
.fab:hover{transform:scale(1.07);box-shadow:0 12px 34px rgba(0,0,0,.6),0 0 0 10px rgba(37,211,102,.18)}
.fab svg{width:30px;height:30px}
/* Hidden while the order bar occupies the same corner, so the two CTAs never compete. */
.fab.is-hidden{opacity:0;visibility:hidden;pointer-events:none}

/* ==========================================================================
   10. Order bar
   ========================================================================== */
.orderbar{
  position:fixed;left:0;right:0;bottom:0;z-index:75;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;
  padding:14px max(18px,env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
  background:rgba(8,9,8,.97);border-top:1px solid rgba(232,219,202,.18);
  transform:translateY(100%);transition:transform .32s var(--ease-out);
}
.orderbar.is-up{transform:translateY(0)}
.orderbar__count{margin:0;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream)}
.orderbar__clear{
  background:none;border:1px solid rgba(232,219,202,.3);color:var(--cream-dim);
  min-height:44px;padding:0 18px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;transition:background .2s var(--ease-out),color .2s var(--ease-out);
}
.orderbar__clear:hover{background:var(--cream);color:var(--ink)}
.orderbar__send{margin-left:auto}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
/* Reveal is opt-in: JS adds .js-reveal only when it can actually drive it,
   so with no JS (or reduced motion) the content is simply visible. */
.js-reveal .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js-reveal .rv.is-in{opacity:1;transform:none}

/* Scroll cue ------------------------------------------------------------- */
/* Transient by design: it shares the bottom-left corner with the carousel, and
   bottom-centre is the figure while bottom-right is the FAB, so there is
   nowhere to park it permanently. It rises in after the reveal, then leaves on
   the first scroll or on a timer. JS owns the classes; see site.js. */
.scroll-cue{
  position:absolute;left:3vw;bottom:14px;z-index:7;
  display:inline-flex;align-items:center;gap:11px;
  min-height:44px;padding:0 4px;text-decoration:none;color:var(--cream-dim);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out),color .2s var(--ease-out);
}
.scroll-cue.is-in{opacity:1;transform:none;pointer-events:auto}
.scroll-cue span{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;white-space:nowrap}
.scroll-cue__chev{width:13px;height:13px;color:var(--blood-spray);animation:cue 1.8s var(--ease-out) infinite}
.scroll-cue:hover{color:var(--cream)}
@keyframes cue{0%,100%{transform:rotate(90deg) translateX(0)}50%{transform:rotate(90deg) translateX(4px)}}
/* Below this the carousel reaches the corner it sits in. Measured: 740px
   leaves 23px of clearance, 680px overlaps by 1px. */
@media (max-height:720px){ .scroll-cue{display:none} }

/* Embedded map ----------------------------------------------------------- */
.map{margin:34px 0 0;border:1px solid rgba(232,219,202,.16);overflow:hidden;background:var(--concrete)}
.map iframe{display:block;width:100%;height:260px;border:0;filter:grayscale(.55) contrast(1.05) brightness(.88)}
@media (max-width:767px){.map iframe{height:210px}}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width:768px){
  .svc__desc{display:block}
  .svc__name{grid-column:1/2}
  .nav__overlay{display:none}
}

@media (max-width:1199px) and (min-width:1024px){
  .hero__carousel{--car-w:min(148px,17vh)}
}

@media (max-width:1023px){
  /* Hero recomposed for phones and tablets: type on top, figure rising under it.
     Every layer stays positioned so its z-index still counts. */
  .hero{min-height:auto;padding-bottom:36px;display:flex;flex-direction:column}
  .hero__vig{background:linear-gradient(to bottom,rgba(0,0,0,.35),rgba(0,0,0,0) 26%,rgba(0,0,0,0) 70%,rgba(8,9,8,.9) 100%)}
  .hero__mark{
    position:relative;z-index:3;top:auto;
    font-size:min(25vw,168px);line-height:.84;letter-spacing:-.005em;
    white-space:normal;text-align:left;padding:46px 5vw 0;
  }
  .hero__mark span{display:block}
  .hero__graffiti{
    position:relative;z-index:5;top:auto;left:auto;
    display:inline-block;align-self:flex-start;
    margin:8px 0 0 6vw;font-size:min(11.5vw,66px);transform:rotate(-6deg);
  }
  .hero__graffiti span{margin-left:1.1em}
  .hero__slash{display:none}
  .hero__figure{
    position:relative;z-index:4;left:auto;bottom:auto;transform:none;
    height:auto;width:min(78vw,372px);margin:-15vw auto 0;
    filter:drop-shadow(0 18px 34px rgba(0,0,0,.85));
  }
  .hero__col{position:relative;z-index:6;transform:none;left:auto;right:auto;top:auto}
  .hero__col--l{position:relative;left:auto;top:auto;width:min(90vw,420px);margin:20px auto 0}
  .hero__col--l .hero__tiktok,
  .hero__col--l .cutgrid{display:none}
  .hero__col--r{width:90vw;margin:14px auto 0;align-items:stretch;gap:22px}
  .hero__col--r .btn{width:100%}
  .pricelist{min-width:0}
  .hero__carousel{z-index:6;width:100%;--car-w:min(48vw,225px)}
  .scroll-cue{display:none}
  .about__grid{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr;text-align:left;justify-items:start}
  .foot__social{justify-content:flex-start}
}

@media (max-width:767px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  .svc__link{grid-template-columns:1fr auto auto;gap:10px;padding:20px 2px}
  .svc__name{grid-column:1/2}
  .svc__cta{display:inline-block}
  .svc__go{width:17px;height:17px}
  .shop__grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
  .card__b{padding:13px;gap:8px}
  .card__n{font-size:.85rem}
  .look__grid{grid-template-columns:repeat(2,1fr)}
  .about__facts{grid-template-columns:1fr}
  .orderbar{padding:12px 14px calc(12px + env(safe-area-inset-bottom));gap:10px 14px}
  .orderbar__send{padding:11px 16px;font-size:.68rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .belt__track{animation:none;transform:none}
  .belt{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .belt__track{width:auto}
  .hero__car-prog{display:none}
  .scroll-cue__chev{animation:none;transform:rotate(90deg)}
  .js-reveal .rv{opacity:1;transform:none}
  .loader__word{opacity:1;transform:none}
}

/* Anchor offset for the fixed nav ---------------------------------------- */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:76px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Pointer target floor: every standalone link reaches 44px ---------------- */
.nav__mark{display:inline-flex;align-items:center;min-height:44px}
.nav__links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:8px}
.about__facts dd a{display:inline-block;padding-block:11px;text-decoration:underline;text-underline-offset:4px}