/* ==========================================================
   NNNAIL Salon — Alicante
   Paleta sacada del local: cartel salvia, madera clara,
   sillas verde musgo, pared blanca y uñas blush.
   ========================================================== */
:root {
  --cream: #f7f4ee;
  --paper: #fdfcf9;
  --sage: #7a8671;
  --sage-d: #5d6856;
  --sage-dd: #454e40;
  --sage-l: #dfe4d7;
  --moss: #56744a;
  --wood: #e8d0a4;
  --wood-d: #cfae78;
  --blush: #f3d6d3;
  --rose: #f2b8c6;
  --ink: #23271f;
  --muted: #6b7065;
  --glow: #fffdf3;
  --skin: #f1cdb4;
  --skin-d: #d9a98a;

  --f-logo: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-body: "Outfit", system-ui, sans-serif;
  --f-script: "Parisienne", cursive;

  --gutter: clamp(16px, 3vw, 44px);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.is-loading { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
::selection { background: var(--rose); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.eyebrow { font-size: 13px; letter-spacing: .02em; color: var(--muted); }
.strong { font-family: var(--f-logo); font-weight: 600; font-size: 15px; }
.h2 {
  font-family: var(--f-logo);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 92px);
  line-height: .95;
  letter-spacing: -.02em;
}

/* ---------- buttons ---------- */
.btn-group { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; }
.btn {
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 24px;
  border-radius: 999px;
  background: var(--sage);
  color: #fff;
  font-family: var(--f-logo); font-weight: 500; font-size: 14px;
  transition: background .3s;
}
.btn-circle {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--sage); color: #fff; font-size: 18px;
  transition: background .3s;
}
.btn-circle span { display: block; transition: transform .5s var(--ease); }
.btn-group:hover .btn, .btn-group:hover .btn-circle { background: var(--sage-d); }
.btn-group:hover .btn-circle span { transform: rotate(-45deg); }
.btn:focus-visible, .btn-circle:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }

/* ---------- preloader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: var(--sage-dd);
  color: var(--glow);
  clip-path: inset(0 0 0 0);
}
.loader__hedge {
  position: absolute; top: 0; left: 0; right: 0; height: 70px;
  background:
    radial-gradient(circle at 10px 10px, #6a8c49 8px, transparent 9px) 0 0 / 20px 16px,
    radial-gradient(circle at 10px 10px, #3e5c2b 8px, transparent 9px) 10px 8px / 20px 16px,
    #4a6b35;
  opacity: .8;
}
.loader__sign { text-align: center; }
.loader__logo {
  font-family: var(--f-logo); font-weight: 600;
  font-size: clamp(72px, 16vw, 230px);
  line-height: 1; letter-spacing: .02em;
}
.loader__logo span {
  display: inline-block; opacity: .12;
  text-shadow: 0 0 12px rgba(255,255,240,.9), 0 0 40px rgba(255,248,220,.6), 0 0 90px rgba(255,240,200,.35);
}
.loader__script { font-family: var(--f-script); font-size: clamp(28px, 4vw, 52px); opacity: 0; margin-top: -.2em; }
.loader__count, .loader__addr { position: absolute; bottom: 28px; font-size: 13px; letter-spacing: .06em; opacity: .7; }
.loader__count { right: var(--gutter); font-family: var(--f-logo); font-size: 20px; }
.loader__addr { left: var(--gutter); }

/* ---------- floating CTA ---------- */
.fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--moss); color: #fff;
  box-shadow: 0 14px 30px -10px rgba(40,60,30,.55);
  transform: scale(0);
}
.fab svg { width: 28px; height: 28px; }

/* ---------- nav ---------- */
.nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  padding: 30px var(--gutter);
}
.nav__links { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--muted); }
.nav__links a { width: fit-content; position: relative; transition: color .3s; }
.nav__links a:hover { color: var(--ink); }
.nav__links a.is-active { color: var(--sage-d); font-weight: 500; }
.nav__links i {
  display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 4px;
  font-style: normal; font-size: 10px; border-radius: 50%; background: var(--sage); color: #fff;
}
.nav__logo {
  position: relative;
  font-family: var(--f-logo); font-weight: 600; font-size: 30px; letter-spacing: .03em;
  color: var(--sage-d);
}
.nav__logo em { position: absolute; right: -34px; bottom: -14px; font-family: var(--f-script); font-style: normal; font-weight: 400; font-size: 22px; color: var(--moss); }
.nav__right { justify-self: end; display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--muted); }
.nav__right a:hover { color: var(--ink); }
.nav__pin svg { width: 20px; height: 20px; display: block; }
.nav__menu { display: none; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--sage); color: #fff; font-family: var(--f-logo); font-weight: 500; font-size: 14px; }

/* ---------- menú móvil ---------- */
.menu {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 110px var(--gutter) 40px;
  background: var(--sage-dd); color: var(--glow);
  clip-path: inset(0 0 100% 0); visibility: hidden;
}
.menu__close { position: absolute; top: 22px; right: var(--gutter); height: 38px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.14); font-family: var(--f-logo); font-weight: 500; font-size: 14px; }
.menu__links { display: flex; flex-direction: column; gap: 4px; }
.menu__links a { display: block; overflow: hidden; font-family: var(--f-logo); font-weight: 500; font-size: clamp(40px, 12vw, 64px); line-height: 1.15; }
.menu__links span { display: inline-block; }
.menu__foot { display: flex; flex-direction: column; gap: 8px; font-size: 15px; opacity: .85; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.hero__stage { position: relative; flex: 1; min-height: 560px; display: grid; place-items: center; padding-top: 90px; }
.hero__title {
  position: absolute; top: 55%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-logo); font-weight: 500;
  font-size: clamp(96px, 21vw, 380px);
  line-height: .9; letter-spacing: -.035em;
  white-space: nowrap; color: var(--ink);
  z-index: 1; pointer-events: none;
}
.hero__word { display: inline-block; }
.hero__bottle {
  --bw: clamp(130px, min(22vw, 42svh), 330px);
  position: absolute; z-index: 3; left: 50%; top: 55%;
  /* +253px = desplazamiento que tenía la versión original */
  width: var(--bw); margin: calc(var(--bw) * -.86 + 253px) 0 0 calc(var(--bw) * -.5);
  will-change: transform;
}
.hero__float { will-change: transform; filter: drop-shadow(0 40px 40px rgba(90,60,60,.25)); }
.bottle { display: block; width: 100%; height: auto; overflow: visible; --polish: #f2b8c6; }
.bottle__liquid { fill: var(--polish); }
.bottle__brand { font-family: var(--f-logo); font-weight: 600; font-size: 42px; letter-spacing: 2px; fill: #fff; }
.bottle__script { font-family: var(--f-script); font-size: 36px; fill: #fff; }
.blob { display: block; overflow: visible; filter: drop-shadow(0 20px 22px rgba(0,0,0,.22)); }
.blob--hero { position: absolute; z-index: 4; width: clamp(120px, 15vw, 250px); aspect-ratio: 4 / 3; left: calc(50% - clamp(150px, 19vw, 340px)); top: 22%; }
.hero__tips { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tip {
  position: absolute; left: var(--x); top: var(--y);
  width: 38px; height: 54px;
  border-radius: 50% 50% 44% 44% / 62% 62% 38% 38%;
  background: var(--c);
  transform: rotate(var(--r)) scale(var(--s));
  box-shadow: inset 0 -6px 10px rgba(0,0,0,.12), inset 0 4px 8px rgba(255,255,255,.4), 0 12px 20px -8px rgba(0,0,0,.25);
}
.tip::after { content: ""; position: absolute; top: 14%; left: 20%; width: 18%; height: 42%; border-radius: 99px; background: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,0)); }

.hero__meta {
  display: grid; grid-template-columns: 1fr 1fr; align-items: end;
  padding: 0 var(--gutter) 56px; gap: 24px; position: relative; z-index: 5;
}
.hero__pitch { justify-self: end; max-width: 400px; }
.hero__pitch p { font-family: var(--f-logo); font-weight: 500; font-size: 17px; line-height: 1.35; }

.hero__photo {
  position: absolute; z-index: 0; margin: 0; overflow: hidden;
  width: clamp(110px, 12vw, 200px); aspect-ratio: 3 / 4;
  border-radius: 999px 999px 24px 24px;
  box-shadow: 0 24px 40px -20px rgba(40,50,35,.45);
}
.hero__photo .ph__img, .hero__photo .ph__fallback, .polaroid .ph__img, .polaroid .ph__fallback { position: absolute; inset: 0; }
.hero__photo .ph__img, .polaroid .ph__img { background-size: cover; background-position: center; }
.hero__photo--a { left: 9%; top: 52%; transform: rotate(-8deg); }
.hero__photo--b { right: 10%; top: 17%; transform: rotate(7deg); border-radius: 24px 24px 999px 999px; }

/* polaroids con fotos reales */
.polaroid { margin: 0; padding: 10px 10px 0; background: #fff; box-shadow: 0 24px 44px -22px rgba(40,50,35,.5); width: 200px; }
.polaroid__img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.polaroid figcaption { font-family: var(--f-script); font-size: 22px; text-align: center; padding: 6px 0 8px; color: var(--sage-dd); }
.hand-wrap { position: relative; }
.polaroid--shelf { position: absolute; z-index: 2; left: -40px; top: -30px; transform: rotate(-7deg); width: 170px; }
.polaroid--sign { margin-top: 40px; transform: rotate(4deg); width: 230px; }
.polaroid--sign .polaroid__img { aspect-ratio: 3 / 4; }
.visit__map { position: relative; }
.polaroid--front { position: absolute; z-index: 2; right: 14px; bottom: 14px; width: 150px; transform: rotate(-5deg); }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid rgba(0,0,0,.08); padding: 18px 0; background: var(--cream); }
.marquee__inner { display: flex; width: max-content; align-items: center; gap: 36px; padding-right: 36px; }
.marquee span { font-family: var(--f-logo); font-weight: 500; font-size: clamp(28px, 4vw, 56px); color: var(--sage-d); white-space: nowrap; }
.marquee b { color: var(--rose); font-size: 26px; }

/* ---------- services ---------- */
.services { background: var(--sage); color: #fff; padding: 110px 0 100px; position: relative; overflow: hidden; }
.services__tabs { display: flex; justify-content: center; align-items: center; gap: clamp(18px, 4vw, 56px); padding: 0 var(--gutter); margin-bottom: 56px; }
.tab { font-family: var(--f-logo); font-weight: 500; font-size: clamp(14px, 1.6vw, 20px); opacity: .5; white-space: nowrap; transition: opacity .3s; }
.tab:hover { opacity: .85; }
.tab.is-active { font-weight: 600; font-size: clamp(34px, 5vw, 68px); opacity: 1; text-transform: uppercase; letter-spacing: .03em; }

.services__carousel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.arrow { width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.16); font-size: 20px; transition: background .3s, opacity .3s; }
.arrow:hover { background: rgba(255,255,255,.3); }
.arrow:disabled { opacity: .3; cursor: default; }
.services__viewport { min-width: 0; overflow: hidden; padding: 30px 6px; margin: -30px -6px; touch-action: pan-y; }
.services__track { display: flex; gap: 30px; will-change: transform; }
.card { flex: 0 0 calc((100% - 60px) / 3); perspective: 900px; }
.card__arch {
  position: relative; aspect-ratio: 5 / 6;
  border-radius: 999px 999px 44px 44px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  display: grid; place-items: center; overflow: hidden;
  transform-style: preserve-3d;
}
.card__photo { position: absolute; inset: 0; z-index: 1; background-size: cover; background-position: center; transition: transform 1s var(--ease); }
.card__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(60,70,55,.35), transparent 30%, transparent 60%, rgba(60,70,55,.6)); }
.card:hover .card__photo { transform: scale(1.08); }
.card__badge, .card__price { z-index: 2; }
.card__arch::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%); }
.card__badge {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.22);
  font-family: var(--f-logo); font-weight: 600; font-size: 11px; letter-spacing: .06em; white-space: nowrap;
}
.card__price {
  position: absolute; bottom: 20px; right: 22px;
  font-family: var(--f-logo); font-weight: 600; font-size: 30px; line-height: 1;
}
.card__price small { font-size: .5em; font-weight: 500; }
.card__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding: 0 6px; }
.card__foot h3 { font-family: var(--f-logo); font-weight: 600; font-size: 17px; line-height: 1.15; }
.card__foot p { font-size: 13px; opacity: .72; }
.card__btn { flex: none; padding: 7px 16px; border-radius: 999px; background: #fff; color: var(--sage-d); font-family: var(--f-logo); font-weight: 600; font-size: 12px; transition: background .3s; }
.card__btn:hover { background: var(--blush); }
.services__note { text-align: center; margin-top: 36px; font-size: 13px; opacity: .75; padding: 0 var(--gutter); min-height: 1.5em; }

/* nail-tip wheel (como los muestrarios del salón) */
.wheel { position: relative; width: 64%; aspect-ratio: 1; }
.wheel__tip {
  position: absolute; left: 41%; top: 35%;
  width: 18%; height: 30%;
  border-radius: 50% 50% 42% 42% / 62% 62% 38% 38%;
  background: var(--c);
  transform: rotate(var(--r)) translateY(-100%);
  transform-origin: 50% 50%;
  box-shadow: inset 0 -5px 8px rgba(0,0,0,.14), inset 0 3px 6px rgba(255,255,255,.4), 0 6px 12px -6px rgba(0,0,0,.3);
}
.wheel__tip::after { content: ""; position: absolute; top: 14%; left: 22%; width: 16%; height: 40%; border-radius: 99px; background: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,0)); }
.wheel::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20%; height: 20%;
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 4px solid rgba(255,255,255,.85); background: rgba(255,255,255,.15);
}

/* ---------- about ---------- */
.about { position: relative; padding: 130px var(--gutter) 40px; overflow: hidden; }
.about__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; max-width: 1280px; margin: 0 auto; align-items: center; }
.about__text { max-width: 380px; margin-left: 6%; font-size: 14px; line-height: 1.5; color: #3f443a; }
.about__text p + p { margin-top: 14px; }
.about__lead { font-family: var(--f-logo); font-weight: 500; font-size: 19px; line-height: 1.3; color: var(--ink); }
.about__collage { position: relative; height: clamp(460px, 56vw, 700px); }
.ph { position: absolute; margin: 0; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(40,50,35,.45); }
.ph__img, .ph__fallback { position: absolute; inset: 0; }
.ph__img { background-size: cover; background-position: center; z-index: 2; }
.ph figcaption {
  position: absolute; z-index: 3; left: 12px; bottom: 12px;
  padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.85);
  font-size: 11px; font-weight: 500; color: var(--ink);
}
.ph--big { left: 16%; top: 18%; width: 62%; height: 72%; border-radius: 24px; background: #fbfaf7; }
.ph--small { right: 2%; top: 0; width: 30%; height: 34%; border-radius: 16px; background: var(--wood); z-index: 2; }
.ph--pink { left: 2%; bottom: 0; width: 30%; height: 30%; border-radius: 16px; background: var(--blush); z-index: 3; }
.blob--about { position: absolute; left: 0; top: 0; width: 22%; aspect-ratio: 200 / 260; z-index: 4; }

/* illustrated fallbacks (se ven si no hay foto en /img) */
.mini-front { display: flex; flex-direction: column; background: #f2ece0; }
.mini-front__hedge { height: 18%; background: radial-gradient(circle at 6px 6px, #6a8c49 5px, transparent 6px) 0 0 / 12px 10px, radial-gradient(circle at 6px 6px, #3e5c2b 5px, transparent 6px) 6px 5px / 12px 10px, #4a6b35; }
.mini-front__wood { height: 26%; display: grid; place-items: center; background: repeating-linear-gradient(0deg, #ead3a8 0 9px, #d5b884 9px 10px); }
.mini-front__wood span { font-family: var(--f-logo); font-weight: 600; font-size: clamp(14px, 2vw, 26px); color: #fff; text-shadow: 0 0 6px #fff, 0 0 18px rgba(255,250,220,.9); }
.mini-front__door { flex: 1; margin: 0 22% 0; background: linear-gradient(#fffbe9, #f1e4c4); border: 5px solid #fff; border-bottom: 0; box-shadow: inset 0 0 30px rgba(230,200,140,.6); }
.mini-shelf { padding: 12% 10% 0; display: flex; flex-direction: column; gap: 11%; background: linear-gradient(#fff, #f3f1ec); }
.mini-shelf__row { height: 11%; border-bottom: 6px solid var(--wood); background-size: 12px 100%; background-repeat: repeat-x; }
.mini-shelf__row:nth-child(1) { background-image: linear-gradient(90deg, #e84d6a 0 60%, transparent 60%), linear-gradient(90deg, transparent 0); width: 80%; background-image: repeating-linear-gradient(90deg, #e05570 0 7px, transparent 7px 9px, #f29bb0 9px 16px, transparent 16px 18px, #c73a4a 18px 25px, transparent 25px 27px, #1c1c1c 27px 34px, transparent 34px 36px); }
.mini-shelf__row:nth-child(2) { margin-left: 20%; background-image: repeating-linear-gradient(90deg, #f4f2ee 0 7px, transparent 7px 9px, #e9e3da 9px 16px, transparent 16px 18px); filter: drop-shadow(0 0 1px rgba(0,0,0,.25)); }
.mini-shelf__row:nth-child(3) { background-image: repeating-linear-gradient(90deg, #2a5fb0 0 7px, transparent 7px 9px, #1f7f86 9px 16px, transparent 16px 18px, #e3c73a 18px 25px, transparent 25px 27px, #7d5aa3 27px 34px, transparent 34px 36px); }
.mini-shelf__desk { margin-top: auto; height: 26%; background: linear-gradient(var(--wood) 0 14%, #fff 14%); border-top: 1px solid rgba(0,0,0,.05); }
.mini-wheel { display: grid; place-items: center; }
.mini-wheel .wheel { width: 78%; }

.about__giant {
  position: relative; z-index: 1;
  margin: -6vw 0 0 -1vw;
  font-family: var(--f-logo); font-weight: 700;
  font-size: clamp(90px, 25vw, 440px);
  line-height: .8; letter-spacing: -.02em;
  color: var(--sage);
  pointer-events: none;
}

/* ---------- colors ---------- */
.colors { padding: 120px var(--gutter) 140px; background: #fff; position: relative; }
.colors__head { max-width: 1280px; margin: 0 auto 60px; display: grid; grid-template-columns: auto 1fr; gap: 10px 60px; align-items: end; }
.colors__head .eyebrow { grid-column: 1 / -1; }
.colors__hint { justify-self: end; max-width: 240px; font-size: 13px; color: var(--muted); }
.colors__layout { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px; align-items: center; }
.shelves { display: flex; flex-direction: column; gap: 40px; padding: 20px 0; }
.shelf { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 74px; padding: 0 14px; overflow: visible; }
.shelf:nth-child(even) { margin-left: 12%; }
.shelf::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px;
  background: linear-gradient(#efd9b1, var(--wood-d)); border-radius: 2px;
  box-shadow: 0 10px 14px -8px rgba(80,60,20,.35);
}
.bottle-s {
  position: relative; flex: none; width: 18px; height: 44px;
  border-radius: 5px 5px 4px 4px; background: var(--c);
  box-shadow: inset -3px 0 5px rgba(0,0,0,.18), inset 3px 0 4px rgba(255,255,255,.35);
  cursor: pointer; transform-origin: 50% 100%;
}
.bottle-s::before {
  content: ""; position: absolute; left: 22%; bottom: 100%; width: 56%; height: 18px;
  border-radius: 3px 3px 1px 1px; background: var(--cap, #1b1b1b);
  box-shadow: inset -2px 0 3px rgba(0,0,0,.25);
}
.bottle-s::after { content: ""; position: absolute; left: 3px; top: 6px; width: 3px; height: 20px; border-radius: 3px; background: rgba(255,255,255,.55); }
.shelf:nth-child(2) .bottle-s { --cap: #f4f3f0; }
.shelf:nth-child(3) .bottle-s { --cap: #c4c8cc; }

.hand-wrap { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.hand { position: relative; width: min(340px, 78vw); aspect-ratio: 34 / 44; }
.hand__fingers { position: absolute; left: 22%; right: 2%; top: 0; bottom: 30%; display: flex; align-items: flex-end; gap: 4%; }
.finger {
  position: relative; flex: 1; height: var(--h);
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, var(--skin-d), var(--skin) 35%, var(--skin) 60%, var(--skin-d));
}
.hand .nail, .work .nail { position: absolute; top: 5%; left: 50%; transform: translateX(-50%); width: 70%; }
.hand__palm { position: absolute; left: 20%; right: 2%; bottom: 0; height: 36%; border-radius: 30px 30px 0 0; background: linear-gradient(90deg, var(--skin-d), var(--skin) 25%, var(--skin) 75%, var(--skin-d)); }
.hand__thumb {
  position: absolute; left: 0; bottom: 14%; width: 21%; height: 42%;
  border-radius: 999px 999px 30px 30px;
  background: linear-gradient(90deg, var(--skin-d), var(--skin) 40%, var(--skin-d));
  transform: rotate(-34deg); transform-origin: 70% 100%; z-index: 1;
}
.hand__thumb .nail { position: absolute; top: 5%; left: 50%; transform: translateX(-50%); width: 72%; }

.nail {
  --c: #f2b8c6;
  position: relative; width: 48px; aspect-ratio: .78;
  border-radius: 50% 50% 44% 44% / 58% 58% 42% 42%;
  background: var(--c); overflow: hidden;
  box-shadow: inset 0 -6px 10px rgba(0,0,0,.14), inset 0 3px 8px rgba(255,255,255,.35);
}
.nail::after { content: ""; position: absolute; z-index: 3; top: 12%; left: 20%; width: 18%; height: 44%; border-radius: 99px; background: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,0)); }
.paint { position: absolute; inset: 0; z-index: 2; background: var(--p, transparent); transform: scaleY(0); transform-origin: 50% 100%; }
.nail--french::before { content: ""; position: absolute; z-index: 1; left: -14%; right: -14%; top: -40%; height: 72%; border-radius: 50%; background: var(--t, #fff); }
.nail--almond { aspect-ratio: .64; border-radius: 50% 50% 46% 46% / 78% 78% 26% 26%; }
.nail--square { border-radius: 16% 16% 40% 40% / 14% 14% 36% 36%; aspect-ratio: .7; }
.nail--glitter { background-image: radial-gradient(rgba(255,255,255,.95) 1px, transparent 1.6px), radial-gradient(rgba(255,240,250,.7) 1px, transparent 1.6px); background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 5px; }
.nail--lines::before { content: ""; position: absolute; inset: 0; z-index: 1; background: repeating-linear-gradient(118deg, transparent 0 6px, rgba(255,255,255,.95) 6px 7.5px); clip-path: polygon(40% 0, 100% 0, 100% 100%, 70% 100%); }
.nail--flower::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 35% 40%, #fff 0 9%, transparent 10%), radial-gradient(circle at 55% 32%, #fff 0 8%, transparent 9%), radial-gradient(circle at 60% 55%, #fff 0 7%, transparent 8%), radial-gradient(circle at 42% 62%, #9fb4e6 0 5%, transparent 6%), radial-gradient(circle at 50% 46%, #f3d36b 0 5%, transparent 6%); }

.swatch-label { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px; background: var(--cream); font-family: var(--f-logo); font-weight: 500; font-size: 18px; overflow: hidden; }
.swatch-label__dot { width: 28px; height: 28px; border-radius: 50%; background: var(--rose); box-shadow: inset 0 -3px 6px rgba(0,0,0,.15); }
.swatch-label__name { display: inline-block; min-width: 9ch; }

/* ---------- works (horizontal) ---------- */
.works { background: var(--cream); position: relative; }
.works__pin { height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; position: relative; }
.works__track { display: flex; align-items: center; gap: clamp(24px, 3.4vw, 54px); padding: 0 var(--gutter); width: max-content; will-change: transform; }
.works__head { width: clamp(280px, 34vw, 520px); flex: none; }
.works__count { font-family: var(--f-logo); font-weight: 500; font-size: 20px; margin-top: 26px; color: var(--sage-d); }
.works__sub { font-size: 14px; color: var(--muted); margin-top: 6px; }
.work { flex: none; width: clamp(250px, 25vw, 380px); }
.work:nth-child(odd) { margin-top: 8vh; }
.work:nth-child(even) { margin-bottom: 8vh; }
.work__media { position: relative; height: clamp(330px, 52svh, 540px); overflow: hidden; background: var(--bg); }
.work:nth-child(3n+2) .work__media { border-radius: 999px 999px 32px 32px; }
.work:nth-child(3n) .work__media { border-radius: 32px; }
.work:nth-child(3n+1) .work__media { border-radius: 32px 999px 32px 32px; }
.work__fingers { position: absolute; left: 12%; right: 12%; bottom: 0; height: 74%; display: flex; align-items: flex-end; gap: 5%; }
.work__fingers .finger { will-change: transform; }
.work__media .ph__img { z-index: 2; }
.work__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 14px; }
.work__cap h3 { font-family: var(--f-logo); font-weight: 600; font-size: 19px; }
.work__cap p { font-size: 13px; color: var(--muted); text-align: right; }
.work__num { position: absolute; z-index: 3; top: 18px; left: 50%; transform: translateX(-50%); font-family: var(--f-logo); font-weight: 600; font-size: 12px; padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,.7); }
.works__progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 34px; height: 2px; background: rgba(0,0,0,.08); }
.works__progress i { position: absolute; inset: 0; background: var(--sage); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- prices ---------- */
.prices { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 6vw, 90px); max-width: 1280px; margin: 0 auto; padding: 150px var(--gutter); align-items: start; }
.prices__side { position: sticky; top: 120px; }
.prices__side .h2 { margin-top: 12px; }
.prices__txt { margin-top: 24px; max-width: 380px; color: #464b41; }
.sign { background: var(--sage); padding: clamp(14px, 2.4vw, 30px); border-radius: 6px; box-shadow: 0 40px 70px -40px rgba(40,50,35,.6); transform-origin: 50% 0; }
.sign__paper { background: var(--paper); padding: clamp(28px, 4vw, 54px) clamp(20px, 3.6vw, 48px); color: #3c4138; }
.sign__title { font-family: var(--f-logo); font-weight: 500; font-size: clamp(34px, 4vw, 54px); text-align: center; color: #4d5348; margin-bottom: 34px; }
.sign__sub { font-weight: 500; margin-bottom: 8px; }
.plist { display: flex; flex-direction: column; gap: 8px; }
.plist li { display: flex; align-items: baseline; gap: 10px; font-size: clamp(14px, 1.3vw, 17px); }
.plist__name { flex: 0 1 auto; min-width: 0; }
.prices > * { min-width: 0; }
.plist__dots { flex: 1; height: 1px; border-bottom: 2px dotted rgba(60,65,56,.3); transform-origin: 0 50%; }
.plist__price { flex: none; font-family: var(--f-logo); font-weight: 600; min-width: 2.4ch; text-align: right; }
.plist--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 34px; }
.sign__rule { border: 0; height: 1.5px; background: #4d5348; width: 56%; margin: 30px auto; transform-origin: 50% 50%; }
.sign__note { font-size: 12px; text-align: right; margin-top: 8px; color: var(--muted); }
.sign__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-top: 40px; padding-top: 22px; border-top: 1.5px solid #4d5348; font-size: 13px; }

/* ---------- visit ---------- */
.visit { background: var(--sage-l); padding: 130px var(--gutter) 120px; overflow: hidden; }
.visit__title { max-width: 1280px; margin: 0 auto; }
.visit__big { font-family: var(--f-logo); font-weight: 600; font-size: clamp(64px, 14vw, 230px); line-height: .88; letter-spacing: -.03em; color: var(--sage-dd); margin-top: 10px; }
.visit__script { font-family: var(--f-script); font-size: clamp(30px, 4.4vw, 64px); color: var(--moss); margin: -.1em 0 0 .3em; }
.visit__grid { max-width: 1280px; margin: 60px auto 0; display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 40px; align-items: center; }
.visit__info { display: flex; flex-direction: column; gap: 28px; }
.visit__info li { border-top: 1px solid rgba(35,39,31,.18); padding-top: 14px; }
.visit__k { display: block; font-size: 12px; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.visit__v { font-family: var(--f-logo); font-weight: 500; font-size: clamp(20px, 2vw, 28px); line-height: 1.2; transition: color .3s; }
.visit__v:hover { color: var(--moss); }
.visit__map { height: clamp(320px, 38vw, 480px); border-radius: 999px 999px 32px 32px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(40,50,35,.5); background: var(--sage); }
.visit__map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.85) sepia(.25) hue-rotate(40deg) saturate(.9) contrast(.95); }
.ring { position: relative; width: 190px; height: 190px; display: grid; place-items: center; }
.ring__text { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring__text text { font-family: var(--f-logo); font-weight: 600; font-size: 14.5px; letter-spacing: 2px; fill: var(--sage-dd); }
.ring__core { width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--moss); color: #fff; font-family: var(--f-logo); font-weight: 600; font-size: 20px; line-height: 1; transition: background .3s, transform .5s var(--ease); }
.ring:hover .ring__core { background: var(--sage-dd); transform: scale(1.06); }

/* ---------- footer ---------- */
.footer { background: var(--sage-dd); color: #fff; }
.hedge {
  height: 86px;
  background:
    radial-gradient(circle at 12px 12px, #7a9c55 9px, transparent 10px) 0 0 / 24px 20px,
    radial-gradient(circle at 12px 12px, #3b5a28 9px, transparent 10px) 12px 10px / 24px 20px,
    radial-gradient(circle at 12px 12px, #5d8040 7px, transparent 8px) 6px 4px / 18px 17px,
    #4a6b35;
}
.facade {
  position: relative; text-align: center; padding: clamp(50px, 8vw, 110px) var(--gutter) clamp(40px, 6vw, 80px);
  background: repeating-linear-gradient(0deg, #ecd5ab 0 46px, #d6b985 46px 48px);
  box-shadow: inset 0 18px 30px -18px rgba(0,0,0,.35);
}
.neon {
  font-family: var(--f-logo); font-weight: 600;
  font-size: clamp(84px, 21vw, 340px); line-height: .9; letter-spacing: .02em; color: var(--glow);
}
.neon span { display: inline-block; opacity: .25; text-shadow: 0 0 8px #fff, 0 0 26px rgba(255,255,235,.95), 0 0 70px rgba(255,236,190,.9); }
.facade__script { font-family: var(--f-script); font-size: clamp(30px, 4.6vw, 70px); color: #fff; text-shadow: 0 0 12px rgba(255,255,240,.9); margin-top: -.1em; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding: 22px var(--gutter) 28px; font-size: 13px; opacity: .85; }
.footer__bottom nav { display: flex; gap: 20px; }
.footer__bottom a:hover { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .card { flex-basis: calc((100% - 30px) / 2); }
  .visit__grid { grid-template-columns: 1fr 1fr; }
  .ring { grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 760px) {
  .nav { grid-template-columns: 1fr auto; padding-top: 22px; }
  .nav__links { display: none; }
  .nav__logo { font-size: 26px; justify-self: start; }
  .nav__right a:first-child { display: none; }
  .nav__menu { display: inline-flex; }
  .hero__stage { min-height: 520px; padding-top: 70px; }
  .hero__title { font-size: 23vw; top: 50%; }
  .hero__bottle { --bw: min(38vw, 30svh); top: 52%; margin-top: calc(var(--bw) * -.1); }
  .card__arch { aspect-ratio: 1 / 1; }
  .hand { width: 64vw; }
  .polaroid--shelf { left: auto; right: 0; top: -40px; width: 110px; transform: rotate(6deg); }
  .blob--hero { width: 30vw; left: 6%; top: 22%; }
  .hero__photo { width: 88px; }
  .hero__photo--a { left: 4%; top: 64%; }
  .hero__photo--b { right: 5%; top: 16%; }
  .polaroid--sign { width: 180px; }
  .polaroid--front { width: 110px; }
  .hero__meta { grid-template-columns: 1fr; padding-bottom: 40px; }
  .hero__pitch { justify-self: start; }
  .services { padding: 80px 0; }
  .services__tabs { gap: 14px; margin-bottom: 36px; }
  .tab.is-active { font-size: 32px; }
  .services__carousel { grid-template-columns: 1fr 1fr; }
  .services__viewport { grid-column: 1 / -1; grid-row: 1; }
  .arrow--prev { justify-self: end; }
  .card { flex-basis: 100%; }
  .about { padding-top: 90px; }
  .about__grid { grid-template-columns: 1fr; }
  .about__text { margin-left: 0; }
  .about__collage { height: 120vw; }
  .about__giant { margin-top: 4vw; }
  .colors { padding: 90px var(--gutter); }
  .colors__head { grid-template-columns: 1fr; }
  .colors__hint { justify-self: start; }
  .colors__layout { grid-template-columns: 1fr; }
  .shelves { gap: 30px; overflow: hidden; }
  .shelf { gap: 4px; height: 58px; }
  .shelf:nth-child(even) { margin-left: 0; }
  .bottle-s { width: 14px; height: 34px; }
  .bottle-s::before { height: 14px; }
  .works__head { width: 78vw; }
  .work { width: 72vw; }
  .work:nth-child(odd), .work:nth-child(even) { margin: 0; }
  .prices { grid-template-columns: 1fr; padding: 100px var(--gutter); }
  .prices__side { position: static; }
  .plist--grid { grid-template-columns: 1fr; }
  .visit__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  .loader { display: none; }
  .neon span, .loader__logo span { opacity: 1; }
  .fab { transform: none; }
}