/* What the five pages share: a small reset, the demo bar, the style switcher,
   the page transition, reveals, split headlines, marquees, photo fallbacks,
   forms and the FAQ. Each page's own stylesheet sets the tokens and the look. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { margin: 0; min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; padding-bottom: 92px; }
img, svg, video { max-width: 100%; }
img { display: block; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--sel, rgba(0,0,0,.18)); }
:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: 8px; background: #111; color: #fff; text-decoration: none; font: 600 14px/1.2 system-ui, sans-serif; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }
[class*="-grid"] > * { min-width: 0; }
section[id], [id].anchor { scroll-margin-top: 84px; }

/* ── The demo bar (thin, at the very top, never sticky) ── */
.demo-bar { position: relative; z-index: 60; background: #0d0d0f; color: #d9d9de; font: 500 12.5px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .005em; }
.demo-bar p { max-width: 1320px; margin: 0 auto; padding: 8px 20px; text-align: center; }
.demo-bar a { color: #fff; font-weight: 650; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; white-space: nowrap; margin-left: 4px; transition: text-decoration-color .2s; }
.demo-bar a:hover { text-decoration-color: #fff; }
.demo-bar b { color: #fff; font-weight: 650; }
@media (max-width: 640px) { .demo-bar { font-size: 11.5px; } .demo-bar p { padding: 7px 14px; } }

/* ── The style switcher: a floating pill at the bottom of every page ── */
.switcher { position: fixed; z-index: 80; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 16px; border-radius: 999px;
  background: rgba(16, 16, 19, .93); color: #f2f2f4;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 18px 50px -12px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  font: 600 13.5px/1 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; max-width: calc(100vw - 20px); }
.js .switcher { animation: sw-in .8s cubic-bezier(.2,.9,.2,1) .9s both; }
@keyframes sw-in { from { opacity: 0; transform: translate(-50%, 30px); } }
.sw-label { color: #a6a6ae; font-weight: 500; white-space: nowrap; margin-right: 4px; }
.sw-track { position: relative; display: flex; align-items: center; }
.sw-track a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 999px; text-decoration: none; color: #e8e8ec; white-space: nowrap; transition: color .25s; }
.sw-track a[aria-current="page"] { color: var(--sw-ink, #fff); }
.sw-track a:hover { color: #fff; }
.sw-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 2px rgba(255,255,255,.14); flex: none; }
.sw-pill { position: absolute; z-index: 0; left: 0; top: 0; height: 38px; width: 0; border-radius: 999px; opacity: 0; transition: transform .45s cubic-bezier(.3,1.3,.4,1), width .45s cubic-bezier(.3,1.3,.4,1), background .3s, opacity .3s; box-shadow: 0 0 0 1px rgba(255,255,255,.16) inset; }
.sw-home { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #cfcfd6; text-decoration: none; transition: background .2s, color .2s; }
.sw-home:hover { background: rgba(255,255,255,.1); color: #fff; }
.sw-home[aria-current="page"] { background: #fff; color: #111; }
.sw-home svg { width: 17px; height: 17px; }
.switcher :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 560px) {
  body { padding-bottom: 84px; }
  .switcher { left: 8px; right: 8px; transform: none; padding: 5px; gap: 2px; justify-content: space-between; bottom: max(10px, env(safe-area-inset-bottom)); }
  .js .switcher { animation-name: sw-in-m; }
  @keyframes sw-in-m { from { opacity: 0; transform: translateY(30px); } }
  .sw-label { display: none; }
  .sw-track { flex: 1; justify-content: space-between; }
  .sw-track a { padding: 0 10px; font-size: 13px; gap: 5px; height: 40px; }
  .sw-pill { height: 40px; }
  .sw-home { width: 40px; height: 40px; flex: none; }
}
@media (max-width: 370px) { .sw-dot { display: none; } .sw-track a { padding: 0 8px; } }

/* ── Page transition between styles: a curtain in the next style's colour ── */
.pt-curtain { position: fixed; inset: 0; z-index: 10000; background: var(--pt-color); color: var(--pt-ink); display: grid; place-items: center; pointer-events: all;
  clip-path: circle(0% at var(--x) var(--y)); animation: pt-in .64s cubic-bezier(.7,0,.25,1) forwards; }
.pt-curtain span { font: 600 clamp(28px, 6vw, 72px)/1 Inter, system-ui, sans-serif; letter-spacing: -.03em; opacity: 0; transform: translateY(16px); animation: pt-name .5s cubic-bezier(.2,.8,.2,1) .2s forwards; }
@keyframes pt-in { to { clip-path: circle(150% at var(--x) var(--y)); } }
@keyframes pt-name { to { opacity: 1; transform: none; } }
html.pt-enter body::after { content: ""; position: fixed; inset: 0; z-index: 10000; background: var(--pt-color, #111); pointer-events: none; }
html.pt-lift body::after { animation: pt-out .75s cubic-bezier(.7,0,.2,1) forwards; }
@keyframes pt-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
html.lang-swap main, html.lang-swap .nav { opacity: .25; transition: opacity .18s; }
main, .nav { transition: opacity .35s; }

/* ── Reveal on scroll (only once JS has added .js to <html>) ── */
.js [data-reveal] { opacity: 0; transform: translate3d(0, var(--rv-y, 28px), 0); transition: opacity var(--rv-dur, .9s) var(--rv-ease, cubic-bezier(.2,.8,.2,1)), transform var(--rv-dur, .9s) var(--rv-ease, cubic-bezier(.2,.8,.2,1)), clip-path 1.1s cubic-bezier(.7,0,.2,1), filter .9s; transition-delay: calc(var(--si, 0) * var(--rv-step, 90ms)); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="left"] { transform: translate3d(-48px, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(48px, 0, 0); }
.js [data-reveal="scale"] { transform: scale(.9); }
.js [data-reveal="blur"] { transform: translate3d(0, 18px, 0); filter: blur(10px); }
.js [data-reveal="mask"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); }
.js [data-reveal="wipe"] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); }
.js [data-reveal="pop"] { transform: scale(.6) rotate(-6deg); transition-timing-function: cubic-bezier(.3,1.6,.5,1); }
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }

/* Split headlines: words rise out of their own line */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .07em .1em; margin: 0 -.07em -.1em; }
.wi { display: inline-block; will-change: transform; }
.js:not(.is-loaded) [data-split] .wi { transform: translateY(110%); }
.is-loaded [data-split] .wi { animation: word-up var(--split-dur, 1s) var(--split-ease, cubic-bezier(.2,.85,.2,1)) both; animation-delay: calc(var(--wi) * var(--split-step, 65ms) + var(--split-delay, 0ms)); }
@keyframes word-up { from { transform: translateY(110%) rotate(var(--split-rot, 0deg)); } }
.js:not(.is-loaded) [data-intro] { opacity: 0; }
.is-loaded [data-intro] { animation: var(--intro-anim, intro-up) var(--intro-dur, 1s) cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d, 0ms); }
@keyframes intro-up { from { opacity: 0; transform: translateY(24px); } }
@keyframes intro-fade { from { opacity: 0; } }

/* ── Marquee ── */
.marquee { overflow: hidden; display: flex; }
.marquee-track { display: flex; flex: none; min-width: 100%; align-items: center; animation: marquee var(--mq-dur, 40s) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ── Photos and their fallback ── */
.ph { position: relative; overflow: hidden; background: var(--ph-bg, linear-gradient(135deg, #ccc, #999)); isolation: isolate; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; color: transparent; font-size: 0; }
.ph img.ph-off { opacity: 0; }
.ph::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ph-pattern, none); opacity: .6; }

/* ── Forms (each page sets the colours) ── */
.field { display: grid; gap: 7px; font-size: 14px; font-weight: 500; }
.field i { font-style: normal; font-weight: 400; opacity: .65; }
.field input, .field select, .field textarea { width: 100%; font-size: 16px; padding: 13px 14px; border-radius: var(--field-radius, 10px); border: 1px solid var(--field-line, #ccc); background: var(--field-bg, #fff); color: var(--field-ink, inherit); transition: border-color .2s, box-shadow .2s, background .2s; }
.field textarea { resize: vertical; min-height: 110px; }
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--focus, #333); box-shadow: 0 0 0 4px var(--field-ring, rgba(0,0,0,.08)); }
.form-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.status { min-height: 1.4em; font-size: 14px; line-height: 1.45; }
.status[data-kind="error"] { color: var(--error, #b42318); }
.status[data-kind="ok"] { color: var(--ok, #157a3c); }
@media (max-width: 560px) { .form-two { grid-template-columns: 1fr; } }

/* ── FAQ ── */
details[data-faq] summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
details[data-faq] summary::-webkit-details-marker { display: none; }
details[data-faq] .faq-a { overflow: hidden; }
.faq-x { position: relative; flex: none; width: 22px; height: 22px; }
.faq-x::before, .faq-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.6px; margin: -.8px 0 0 -7px; background: currentColor; border-radius: 2px; transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.faq-x::after { transform: rotate(90deg); }
details[open] .faq-x::after { transform: rotate(0deg); }

/* Booking on the barber, nails and tattoo pages: one demo diary for all four */
.book-note { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; padding: 12px 14px; border-radius: 12px; }
.book-note svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }

/* Open now */
[data-open-now] { display: inline-flex; align-items: center; gap: 9px; }
[data-open-now] .dot { width: 8px; height: 8px; border-radius: 50%; background: #b9b9b9; flex: none; }
[data-open-now][data-open] .dot { background: #1fae5b; box-shadow: 0 0 0 0 rgba(31,174,91,.5); animation: open-pulse 2s infinite; }
@keyframes open-pulse { 70% { box-shadow: 0 0 0 8px rgba(31,174,91,0); } 100% { box-shadow: 0 0 0 0 rgba(31,174,91,0); } }

/* Language switch structure (each page styles it) */
.lang { display: inline-flex; align-items: center; gap: 2px; }
.lang button { border: 0; background: transparent; cursor: pointer; padding: 6px 7px; font-size: 13px; font-weight: 600; letter-spacing: .04em; opacity: .55; transition: opacity .2s; border-radius: 6px; }
.lang button[aria-pressed="true"] { opacity: 1; }
.lang button:hover { opacity: 1; }

/* ── Reduced motion: everything shown complete, nothing moves ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
  .js [data-reveal], .js [data-intro] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
  .js [data-split] .wi { transform: none !important; }
  .marquee-track { animation: none !important; }
  .marquee { overflow-x: auto; }
  html.pt-enter body::after { display: none; }
}