/* Royal Beauty Clinic — landing page
   Every value below comes from a named token. The reasons for each token and for
   every use of it are written up in /design/ (EN) and /design/pl.html (PL).
   Sources: the clinic's wall mural (navy + gold wings), the marble reception, the
   navy uniforms, the gold crown logo, and their own promo posters. */

:root {
  /* ---- color: surfaces ---- */
  --navy: #0A1A3F;        /* primary surface; poster navy deepened so gold reaches 7.4:1 */
  --navy-deep: #060F27;   /* footer, menu, veil; text on gold */
  --navy-2: #122456;      /* hover state on navy buttons; map placeholder */
  --cream: #EFE6D6;       /* reading surface; the cream of their promo cards */
  --marble: #F7F4EE;      /* review cards and text on navy; the reception marble */
  /* ---- color: accents ---- */
  --gold: #C9A75A;        /* the logo gold; buttons, eyebrows, wings */
  --gold-light: #E6CF8B;  /* italic headline, prices, links on navy (11.1:1) */
  --gold-ink: #7F612A;    /* gold for small text on cream (4.65:1) */
  --red: #9E0E17;         /* the poster red, darkened until it clears 3.5:1 on gold; promo prices and the laser line only */
  --white: #FFFFFF;       /* only where something is lit: the scanned price row */
  --green: #5CC98B;       /* the open-now lamp only */
  /* ---- color: text ---- */
  --ink: #0E1836;         /* text on cream; a navy-black, never pure black */
  --ink-soft: rgba(14, 24, 54, .72);
  --on-navy: var(--marble);
  --on-navy-soft: rgba(247, 244, 238, .68);
  /* ---- color: lines ---- */
  --line-navy: rgba(247, 244, 238, .12);
  --line-cream: rgba(14, 24, 54, .18);
  --line-ink: rgba(14, 24, 54, .30);
  --line-gold: rgba(201, 167, 90, .30);
  --line-gold-strong: rgba(201, 167, 90, .55);
  --line-on-gold: rgba(6, 15, 39, .25);
  --on-gold-soft: rgba(6, 15, 39, .75);
  --gold-tint: rgba(201, 167, 90, .12);        /* hover fill on ghost buttons and the cursor light */
  --navy-glass: rgba(10, 26, 63, .82);         /* header and captions over photos */
  --navy-deep-glass: rgba(6, 15, 39, .9);      /* the phone booking bar */
  --red-glow: rgba(158, 14, 23, .6);           /* the laser line's halo */

  /* ---- type: faces ---- */
  --display: "Bodoni Moda", "Times New Roman", Georgia, serif;
  --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* ---- type: scale (17px body, ratio 1.25 at the small end, viewport clamps above) ---- */
  --t-label: .72rem;                              /* 11.5px */
  --t-nav: .78rem;                                /* 12.5px */
  --t-btn: .8rem;                                 /* 12.8px */
  --t-btn-lg: .85rem;                             /* 13.6px */
  --t-small: .85rem;                              /* 13.6px */
  --t-body: 1.0625rem;                            /* 17px */
  --t-lead: clamp(1.05rem, 1.6vw, 1.33rem);       /* 17 → 21px */
  --t-price: 1.5rem;                              /* 24px */
  --t-figure: 1.25rem;                            /* 21px: small display figures (hours, "Od 2015") */
  --t-marquee: clamp(1.4rem, 2.6vw, 2.2rem);
  --t-h3: clamp(1.8rem, 3.4vw, 3rem);
  --t-acc: clamp(1.8rem, 4.2vw, 3.6rem);
  --t-statement: clamp(1.9rem, 4.2vw, 3.9rem);
  --t-h2: clamp(2.2rem, 5.2vw, 4.6rem);
  --t-h2-tight: clamp(1.6rem, 3.2vw, 2.9rem);
  --t-phone: clamp(2.2rem, 5.5vw, 5rem);
  --t-stat: clamp(3rem, 7vw, 6rem);
  --t-menu: clamp(2.6rem, 11vw, 4.5rem);
  --t-display: clamp(4.4rem, 14.5vw, 14rem);      /* 70 → 224px */
  --t-num: clamp(6rem, 22vw, 22rem);              /* 96 → 352px */
  --t-eleven: clamp(7rem, 24vw, 24rem);
  --t-promo-line: clamp(1.8rem, 4.5vw, 4.2rem);
  --t-quote: clamp(1.25rem, 1.9vw, 1.6rem);
  --lh-body: 1.55;
  --lh-h2: 1.05;
  --lh-statement: 1.12;
  --lh-display: .9;
  --track-label: .2em;
  --track-nav: .16em;
  --track-btn: .14em;
  --track-caption: .14em;
  --track-name: .18em;

  /* ---- space: 4px base ---- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;    --sp-5: 1.25rem;
  --sp-6: 1.5rem;  --sp-7: 1.75rem; --sp-8: 2rem;    --sp-9: 2.25rem; --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-14: 3.5rem; --sp-16: 4rem;   --sp-20: 5rem;   --sp-24: 6rem;
  --sp-28: 7rem;   --sp-32: 8rem;   --sp-36: 9rem;
  --touch: 2.75rem;                                       /* 44px minimum target size */
  --section: clamp(var(--sp-20), 10vw, var(--sp-36));   /* 80 → 144px */
  --safe: clamp(var(--sp-5), 4vw, 4.5rem);                /* 20 → 72px gutter */
  --max: 1440px;
  --header-h: 5.5rem;                                     /* 56px logo + 16px above and below */
  --measure-body: 56ch;
  --measure-lead: 34ch;
  --measure-title: 18ch;
  --measure-statement: 26ch;

  /* ---- shape ---- */
  --radius: 0;
  --radius-pill: 999px;          /* the two round things: the open-now lamp and the cursor light */
  --hairline: 1px;
  --shadow-object: 0 30px 60px -30px rgba(14, 24, 54, .5);   /* a print lying on the marble */
  --shadow-poster: 0 40px 60px -30px rgba(6, 15, 39, .5);    /* a poster pinned on the wall */

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --ease-inout: cubic-bezier(.77, 0, .18, 1);
  --d-fast: .3s;
  --d-base: .5s;
  --d-reveal: 1s;
  --d-hero: 1.3s;

  /* ---- layers ---- */
  --z-sticky: 700;
  --z-menu: 750;
  --z-header: 800;
  --z-veil: 9000;
  --z-cursor: 9500;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--on-navy);
  background: var(--navy);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
html.menu-open body { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }
::selection { background: var(--gold); color: var(--navy-deep); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.section-gold :focus-visible { outline-color: var(--navy); }
.ico { width: 1.1em; height: 1.1em; flex: none; }
.wrap { width: min(100% - 2 * var(--safe), var(--max)); margin-inline: auto; }

.skip-link {
  position: absolute; left: var(--sp-4); top: -4rem; z-index: 9999;
  padding: var(--sp-3) var(--sp-4); background: var(--gold); color: var(--navy-deep);
  font-weight: 700; text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: var(--sp-4); }

/* ---------- cursor light (fine pointers only) ---------- */
.cursor-ring {
  position: fixed; top: 0; left: 0; z-index: var(--z-cursor); pointer-events: none;
  width: var(--sp-8); height: var(--sp-8); border-radius: var(--radius-pill);
  border: var(--hairline) solid var(--gold); opacity: 0;
  transition: width .35s var(--ease-out), height .35s var(--ease-out), opacity .4s, background var(--d-fast);
}
html.cursor-on .cursor-ring { opacity: 1; }
.cursor-ring.big { width: var(--sp-14); height: var(--sp-14); background: var(--gold-tint); }

/* ---------- type helpers ---------- */
.eyebrow {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 700;
  color: var(--gold);
}
.eyebrow::before { content: ""; width: var(--sp-10); height: var(--hairline); background: currentColor; opacity: .7; }
.section-cream .eyebrow { color: var(--gold-ink); }
.section-gold .eyebrow { color: var(--navy); }

.section-title {
  margin: 0 0 var(--sp-10);
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: -.01em;
  max-width: var(--measure-title); text-wrap: balance;
}

/* word masks (filled by main.js from [data-split]); the .08em pad keeps Bodoni descenders unclipped */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; transform: translateY(108%); transition: transform .9s var(--ease-out); }
.in .w > span { transform: none; }

[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--d-reveal) var(--ease-out), transform var(--d-reveal) var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }

html.no-anim [data-reveal], html:not(.js) [data-reveal] { opacity: 1; transform: none; transition: none; }
html.no-anim .w > span, html:not(.js) .w > span { transform: none; transition: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: 1.1em 1.7em;
  font-family: var(--body); font-size: var(--t-btn); font-weight: 700; letter-spacing: var(--track-btn); text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: var(--hairline) solid transparent; border-radius: var(--radius);
  transition: background var(--d-fast), color var(--d-fast), border-color var(--d-fast), transform var(--d-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-light); border-color: var(--gold-light); }
.btn-ghost { border-color: var(--line-gold-strong); color: var(--on-navy); }
.btn-ghost:hover { border-color: var(--gold); background: var(--gold-tint); }
.btn-navy { background: var(--navy); color: var(--gold-light); border-color: var(--navy); }
.btn-navy:hover { background: var(--navy-2); }
.btn-lg { padding: 1.15em 2em; font-size: var(--t-btn-lg); }

.link-more {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--gold-light); text-decoration: none; font-weight: 600; font-size: var(--t-small);
  border-bottom: var(--hairline) solid var(--line-gold); padding-bottom: .2rem;
  transition: border-color var(--d-fast), gap var(--d-fast);
}
.link-more:hover { border-color: var(--gold-light); gap: var(--sp-3); }

/* ---------- sections ---------- */
.section-cream, .section-navy, .section-gold { padding-block: var(--section); }
.section-cream { background: var(--cream); color: var(--ink); }
.section-navy { background: var(--navy); color: var(--on-navy); }
.section-gold { background: var(--gold); color: var(--navy-deep); }

/* ---------- header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: calc(var(--sp-4) + env(safe-area-inset-top, 0px)) var(--safe) var(--sp-4);
  transition: transform .55s var(--ease-out), background .4s, backdrop-filter .4s;
}
.site-header.hidden { transform: translateY(-110%); }
.site-header.solid { background: var(--navy-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.brand { display: block; line-height: 0; }
.brand img { height: var(--sp-14); width: auto; }
.header-actions { display: flex; align-items: center; gap: var(--sp-4); }

.nav-desktop { display: flex; gap: var(--sp-8); }
.nav-desktop a {
  display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3em;
  font-size: var(--t-nav); letter-spacing: var(--track-nav); text-transform: uppercase; font-weight: 600;
  text-decoration: none; color: var(--on-navy);
}
.nav-desktop a span { display: block; transition: transform .45s var(--ease-out); }
.nav-desktop a span::after { content: attr(data-hover); display: block; color: var(--gold-light); }
.nav-desktop a:hover span, .nav-desktop a:focus-visible span { transform: translateY(-1.3em); }

.menu-btn {
  display: none; width: var(--touch); height: var(--touch); padding: 0;
  border: var(--hairline) solid var(--line-gold-strong); background: none; cursor: pointer;
  flex-direction: column; justify-content: center; align-items: center; gap: 6px;
}
.menu-btn span { width: var(--sp-5); height: var(--hairline); background: var(--gold-light); transition: transform .4s var(--ease-out); }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: var(--z-menu); background: var(--navy-deep);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--sp-24) var(--safe) var(--sp-12);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .7s var(--ease-inout), visibility 0s .7s;
}
.menu.open { clip-path: inset(0); visibility: visible; transition-delay: 0s; }
.menu nav a {
  display: block; text-decoration: none; color: var(--marble);
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: var(--t-menu); line-height: 1.1;
  transition: color var(--d-fast), padding-left .4s var(--ease-out);
}
.menu nav a:hover { color: var(--gold-light); padding-left: .3em; }
.menu-foot { margin-top: var(--sp-10); display: flex; flex-direction: column; gap: var(--sp-2); color: var(--on-navy-soft); }
.menu-foot a { text-decoration: none; color: var(--on-navy); }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: grid; grid-template-rows: 1fr auto;
  overflow: hidden; background: var(--navy);
}
.wings { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-mask {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 38% 30% at 50% 52%, rgba(10, 26, 63, .55), rgba(10, 26, 63, 0) 72%);
}
.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--header-h) + var(--sp-8)) var(--safe) var(--sp-12);
}
.hero-eyebrow { justify-content: center; color: var(--gold-light); opacity: 0; transition: opacity var(--d-reveal) .2s; }
.hero-eyebrow::before { display: none; }
.hero-title {
  margin: 0;
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: -.02em;
  color: var(--marble);
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero-title .line > span { display: block; transform: translateY(112%); transition: transform var(--d-hero) var(--ease-out) .1s; }
.hero-title .line-it > span { transition-delay: .25s; }
.line-it { font-style: italic; color: var(--gold-light); padding-left: .06em; }
.hero-lead {
  margin: var(--sp-8) auto 0; max-width: var(--measure-lead);
  font-size: var(--t-lead); line-height: 1.5; color: var(--on-navy-soft);
  opacity: 0; transition: opacity var(--d-reveal) .7s;
}
.hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; margin-top: var(--sp-9); opacity: 0; transition: opacity var(--d-reveal) .9s; }
html.ready .hero-title .line > span { transform: none; }
html.ready .hero-eyebrow, html.ready .hero-lead, html.ready .hero-cta { opacity: 1; }
html.no-anim .hero-title .line > span, html.no-anim .hero-eyebrow, html.no-anim .hero-lead, html.no-anim .hero-cta { transform: none; opacity: 1; transition: none; }

.hero-strip {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--safe) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  border-top: var(--hairline) solid var(--line-gold);
  font-size: var(--t-small); color: var(--on-navy-soft);
}
.strip-addr { display: inline-flex; gap: var(--sp-2); align-items: center; text-decoration: none; color: var(--on-navy); }
.strip-addr .ico { color: var(--gold); }
.strip-since { font-family: var(--display); font-style: italic; font-size: var(--t-figure); color: var(--gold-light); }

.status {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: .45rem .95rem; border: var(--hairline) solid var(--line-gold); border-radius: var(--radius-pill);
  font-weight: 600; color: var(--on-navy); font-size: var(--t-small);
}
.status-lg { font-size: var(--t-body); padding: .6rem 1.1rem; }
.status-dot { width: .55rem; height: .55rem; border-radius: var(--radius-pill); background: var(--gold); animation: pulse 2.4s infinite; }
.status.open .status-dot { background: var(--green); }
.status.closed .status-dot { background: transparent; box-shadow: inset 0 0 0 var(--hairline) var(--gold); animation: none; } /* lamp off: an empty ring, no colour needed */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(92, 201, 139, .55); }
  70% { box-shadow: 0 0 0 .6rem rgba(92, 201, 139, 0); }
  100% { box-shadow: 0 0 0 0 rgba(92, 201, 139, 0); }
}

/* ---------- marquee ---------- */
.marquee {
  background: var(--gold); color: var(--navy-deep);
  overflow: hidden; padding: var(--sp-4) 0;
}
.marquee-track {
  display: flex; align-items: center; width: max-content;
  font-family: var(--display); font-style: italic; font-size: var(--t-marquee); white-space: nowrap;
  animation: marquee 48s linear infinite;
}
.marquee-track > * { margin-right: var(--sp-10); }
.marquee-track i { width: .42em; height: .42em; background: var(--navy); transform: rotate(45deg); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- about ---------- */
.statement {
  margin: 0 0 var(--sp-16); max-width: var(--measure-statement);
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-statement); line-height: var(--lh-statement); letter-spacing: -.005em;
}
.manifesto-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-5); }
.photo { margin: 0; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-a { grid-column: 1 / 9; grid-row: 1; aspect-ratio: 3 / 2; }
.manifesto-copy { grid-column: 9 / 13; grid-row: 1; align-self: end; padding-bottom: var(--sp-4); }
.photo-b {
  grid-column: 6 / 9; grid-row: 2; margin-top: calc(-1 * var(--sp-28)); position: relative; z-index: 2;
  aspect-ratio: 3 / 4; box-shadow: var(--shadow-object);
}
.manifesto-copy p { margin: 0 0 var(--sp-5); color: var(--ink-soft); }
.auth-label { margin: var(--sp-8) 0 var(--sp-3); font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: 700; color: var(--gold-ink); }
.auth-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.auth-list li { padding: .35rem .7rem; border: var(--hairline) solid var(--line-ink); font-size: var(--t-small); font-weight: 600; }

.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8);
  margin: var(--sp-20) 0 0; padding-top: var(--sp-10); border-top: var(--hairline) solid var(--line-cream);
}
.stats div { display: flex; flex-direction: column; }
.stats dt { margin: 0; }
.stats .num { font-family: var(--display); font-weight: 400; font-size: var(--t-stat); line-height: .9; color: var(--navy); }
.stats .num em { font-style: italic; color: var(--gold-ink); }
.stats dd { margin: var(--sp-3) 0 0; font-size: var(--t-label); letter-spacing: var(--track-btn); text-transform: uppercase; font-weight: 700; color: var(--ink-soft); }

/* ---------- vectus ---------- */
.vectus-head { margin-bottom: var(--sp-16); }
.vectus-big { overflow: visible; }
.num-big {
  display: block;
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-num); line-height: .82; letter-spacing: -.04em;
  color: var(--gold);
}
.num-big i { font-style: italic; font-size: .42em; vertical-align: top; margin-left: .04em; color: var(--gold-light); }
.vectus-title {
  margin: var(--sp-6) 0 0; max-width: 30ch;
  font-family: var(--display); font-weight: 400;
  font-size: var(--t-h2-tight); line-height: 1.15;
}
.vectus-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-12); align-items: center; }
.vectus-photo { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 4; }
.vectus-photo img { width: 100%; height: 100%; object-fit: cover; }
.scan {
  position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--red);
  box-shadow: 0 0 12px 2px var(--red-glow), 0 0 40px 6px var(--red-glow);
  animation: scan 6s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes scan { 0% { top: -2px; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.vectus-copy p { margin: 0 0 var(--sp-5); max-width: var(--measure-body); color: var(--on-navy-soft); }
.vectus-copy .link-more { margin-top: var(--sp-3); }

.pricelist { position: relative; margin-top: var(--sp-24); padding-top: var(--sp-12); border-top: var(--hairline) solid var(--line-gold); }
.pricelist-head { display: flex; justify-content: space-between; gap: var(--sp-8); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--sp-8); }
.pricelist-head h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: var(--t-h3); line-height: 1.05; }
.pricelist-head p { margin: 0; color: var(--on-navy-soft); max-width: 36ch; }
.price-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--sp-16); }
.price-rows li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  padding: .85rem 0; border-bottom: var(--hairline) solid var(--line-navy);
  transition: color var(--d-fast), border-color var(--d-fast), padding-left var(--d-fast);
}
.price-rows li small { display: block; font-size: var(--t-small); color: var(--on-navy-soft); font-weight: 500; }
.price-rows li b { font-family: var(--display); font-size: var(--t-price); font-weight: 400; color: var(--gold-light); white-space: nowrap; transition: color var(--d-fast); }
.price-rows li.lit { border-color: var(--red); padding-left: var(--sp-2); }
.price-rows li.lit b { color: var(--white); }
.price-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--red); opacity: 0;
  box-shadow: 0 0 14px 2px var(--red-glow); pointer-events: none;
}

/* ---------- offer ---------- */
.acc { border-top: var(--hairline) solid var(--line-cream); }
.acc-row { border-bottom: var(--hairline) solid var(--line-cream); }
.acc-btn {
  position: relative; width: 100%; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--sp-8);
  padding: var(--sp-7) 0; background: none; border: 0; text-align: left; color: inherit; cursor: pointer;
}
.acc-btn::before {
  content: ""; position: absolute; inset: 0; background: var(--navy);
  transform: scaleY(0); transform-origin: bottom; transition: transform var(--d-base) var(--ease-out);
}
.acc-btn > * { position: relative; }
.acc-btn:hover::before, .acc-row.open .acc-btn::before { transform: scaleY(1); }
.acc-btn:hover, .acc-row.open .acc-btn { color: var(--marble); }
.acc-btn:hover .acc-name, .acc-row.open .acc-name { padding-left: var(--sp-4); }
.acc-btn:hover .acc-count, .acc-row.open .acc-count { color: var(--gold-light); }
.acc-btn:hover .acc-plus, .acc-row.open .acc-plus { margin-right: var(--sp-4); }
.acc-name { font-family: var(--display); font-weight: 400; font-size: var(--t-acc); line-height: 1; transition: padding-left var(--d-base) var(--ease-out); }
.acc-count { font-size: var(--t-label); letter-spacing: var(--track-btn); text-transform: uppercase; font-weight: 700; color: var(--ink-soft); transition: color var(--d-fast); white-space: nowrap; }
.acc-plus { width: var(--touch); height: var(--touch); border: var(--hairline) solid currentColor; display: grid; place-items: center; transition: transform var(--d-base) var(--ease-out), margin-right var(--d-base) var(--ease-out); }
.acc-row.open .acc-plus { transform: rotate(45deg); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-inout); }
.acc-row.open .acc-panel { grid-template-rows: 1fr; }
.acc-inner { overflow: hidden; min-height: 0; }
.acc-inner p { margin: var(--sp-6) 0 var(--sp-5); max-width: 60ch; color: var(--ink-soft); }
.chips { list-style: none; margin: 0; padding: 0 0 var(--sp-9); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chips li { padding: var(--sp-2) .85rem; border: var(--hairline) solid var(--line-ink); font-size: var(--t-small); font-weight: 600; }
.offer-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-8); flex-wrap: wrap; margin-top: var(--sp-12); }
.offer-foot p { margin: 0; max-width: var(--measure-body); color: var(--ink-soft); }

/* ---------- promo ---------- */
.promo-head { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-8); align-items: end; }
.promo-title { margin: 0; font-family: var(--display); font-weight: 400; line-height: .9; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .25em; }
.promo-11 { display: block; font-size: var(--t-eleven); line-height: .8; letter-spacing: -.06em; color: var(--navy); }
.promo-line { display: block; max-width: 12ch; font-style: italic; font-size: var(--t-promo-line); }
.promo-poster { margin: 0; width: clamp(150px, 18vw, 260px); transform: rotate(4deg); box-shadow: var(--shadow-poster); }
.promo-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-12); margin-top: var(--sp-16); }
.promo-list { list-style: none; margin: 0; padding: 0; border-top: var(--hairline) solid var(--line-on-gold); }
.promo-list li { display: flex; justify-content: space-between; gap: var(--sp-6); align-items: baseline; padding: var(--sp-4) 0; border-bottom: var(--hairline) solid var(--line-on-gold); font-weight: 500; }
.promo-list b { font-family: var(--display); font-size: var(--t-price); font-weight: 400; color: var(--red); white-space: nowrap; text-align: right; }
.promo-vouchers { display: flex; flex-direction: column; gap: var(--sp-4); align-items: flex-start; }
.voucher { width: 100%; background: var(--navy); color: var(--gold-light); padding: var(--sp-6) var(--sp-7); display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); }
.voucher b { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1; }
.voucher span { font-size: var(--t-small); color: var(--on-navy-soft); }
.promo-foot { margin: var(--sp-12) 0 0; font-size: var(--t-small); max-width: 70ch; color: var(--on-gold-soft); }

/* ---------- gallery ---------- */
.gallery { padding: 0; overflow: hidden; }
.gallery-pin { padding: clamp(var(--sp-20), 10vw, var(--sp-32)) 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-12); }
.gallery-head .section-title { margin-bottom: 0; }
.gallery-track { display: flex; gap: var(--sp-5); padding-inline: var(--safe); width: max-content; will-change: transform; }
.gallery-track figure { margin: 0; flex: none; width: clamp(280px, 34vw, 560px); position: relative; overflow: hidden; }
.gallery-track figure.tall { width: clamp(220px, 22vw, 360px); }
.gallery-track img { width: 100%; height: clamp(320px, 52vh, 560px); object-fit: cover; transition: transform 1.2s var(--ease-out); }
.gallery-track figure:hover img { transform: scale(1.04); }
.gallery-track figcaption {
  position: absolute; left: 0; bottom: 0; padding: .6rem .9rem;
  background: var(--navy-glass); color: var(--gold-light);
  font-size: var(--t-label); letter-spacing: var(--track-caption); text-transform: uppercase; font-weight: 700;
}

/* ---------- reviews ---------- */
.review-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
.review-grid blockquote { margin: 0; padding: var(--sp-10) var(--sp-9) var(--sp-8); background: var(--marble); position: relative; border-top: 2px solid var(--gold); }
.review-grid blockquote::before {
  content: "\201C"; position: absolute; top: .9rem; left: 1.6rem;
  font-family: var(--display); font-size: 5rem; line-height: 1; color: var(--gold); opacity: .8;
}
.review-grid p { margin: var(--sp-6) 0; font-family: var(--display); font-size: var(--t-quote); line-height: 1.35; }
.review-grid footer { font-size: var(--t-label); letter-spacing: var(--track-name); text-transform: uppercase; font-weight: 700; color: var(--gold-ink); }
.loyalty { margin-top: var(--sp-16); padding: var(--sp-10); background: var(--navy); color: var(--on-navy); display: grid; grid-template-columns: auto 1fr; gap: var(--sp-10); align-items: start; }
.loyalty .eyebrow { margin: .2rem 0 0; white-space: nowrap; color: var(--gold); }
.loyalty p:last-child { margin: 0; max-width: 62ch; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--sp-16); align-items: start; }
.contact-phone {
  display: inline-block; margin: var(--sp-4) 0 var(--sp-2); text-decoration: none;
  font-family: var(--display); font-size: var(--t-phone); line-height: 1; letter-spacing: -.01em; color: var(--gold-light);
  transition: color var(--d-fast);
}
.contact-phone:hover { color: var(--marble); }
.contact-mail { display: inline-block; margin-bottom: var(--sp-8); color: var(--on-navy-soft); text-decoration: none; border-bottom: var(--hairline) solid var(--line-gold); }
.contact-ctas { margin-bottom: var(--sp-10); }
.contact-addr { font-style: normal; display: flex; gap: .8rem; align-items: flex-start; line-height: 1.5; margin-bottom: var(--sp-5); }
.contact-addr .ico { color: var(--gold); margin-top: .3rem; }
.hours { width: 100%; border-collapse: collapse; margin: var(--sp-6) 0 var(--sp-8); }
.hours th, .hours td { padding: var(--sp-3) 0; border-bottom: var(--hairline) solid var(--line-navy); text-align: left; font-weight: 500; color: var(--on-navy-soft); }
.hours td { text-align: right; font-family: var(--display); font-size: var(--t-figure); color: var(--on-navy); }
.hours tr.today th, .hours tr.today td { color: var(--gold-light); }
.today-tag {
  display: inline-block; margin-left: .6rem; padding: .15rem .45rem; vertical-align: middle;
  font-family: var(--body); font-size: var(--t-label); letter-spacing: var(--track-btn); text-transform: uppercase; font-weight: 700;
  border: var(--hairline) solid var(--line-gold-strong);
}
.map { aspect-ratio: 4 / 3; background: var(--navy-2); }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05) opacity(.85); }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-deep); color: var(--on-navy-soft); padding: var(--sp-16) 0 var(--sp-12); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: var(--sp-12); }
.footer-brand img { height: 4.5rem; width: auto; margin-bottom: var(--sp-5); }
.footer-brand p { margin: 0; max-width: 40ch; }
.footer-nav, .footer-contact { display: flex; flex-direction: column; gap: .55rem; }
.footer-nav a, .footer-contact a { color: var(--on-navy); text-decoration: none; transition: color var(--d-fast); }
.footer-nav a:hover, .footer-contact a:hover { color: var(--gold-light); }
.footer-contact a { display: inline-flex; gap: var(--sp-2); align-items: center; }
.footer-cards { margin: var(--sp-4) 0 0; font-size: var(--t-label); letter-spacing: var(--track-btn); text-transform: uppercase; font-weight: 700; }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-14); padding-top: var(--sp-6); border-top: var(--hairline) solid var(--line-gold); font-size: var(--t-small); }
.to-top { color: var(--gold-light); text-decoration: none; }

/* ---------- sticky cta (phones) ---------- */
.sticky-cta {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  gap: .6rem; padding: .7rem var(--safe) calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--navy-deep-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: var(--hairline) solid var(--line-gold);
}
.sticky-cta .btn-gold { flex: 1; justify-content: center; }
.sticky-cta .btn-ghost { padding-inline: 1.1em; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px) {
  .nav-desktop, .header-actions .btn { display: none; }
  .menu-btn { display: flex; }
  .brand img { height: 2.8rem; }
  .hero-strip { justify-content: flex-start; }
  .manifesto-grid { display: flex; flex-direction: column; gap: var(--sp-5); }
  .photo-b { margin: calc(-1 * var(--sp-12)) 0 0 auto; width: 58%; }
  .manifesto-copy { padding: var(--sp-4) 0 0; }
  .vectus-grid, .promo-grid, .contact-grid, .review-grid { grid-template-columns: 1fr; }
  .promo-head { grid-template-columns: 1fr; }
  .promo-poster { transform: rotate(-3deg); margin-top: var(--sp-4); }
  .price-rows { grid-template-columns: 1fr; }
  .loyalty { grid-template-columns: 1fr; gap: var(--sp-4); }
  .gallery-pin { min-height: 0; }
  .gallery-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: var(--sp-4); scrollbar-width: none; }
  .gallery-track::-webkit-scrollbar { display: none; }
  .gallery-track figure { scroll-snap-align: start; width: min(78vw, 420px); }
  .gallery-track figure.tall { width: min(60vw, 300px); }
  .gallery-track img { height: 60vw; max-height: 440px; }
  .sticky-cta { display: flex; }
  .site-footer { padding-bottom: 6.5rem; }
}
@media (max-width: 599px) {
  .stats { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-9); }
  .footer-contact a { overflow-wrap: anywhere; }
  .acc-btn { grid-template-columns: 1fr auto; }
  .acc-count { grid-column: 1; grid-row: 2; }
  .acc-plus { grid-column: 2; grid-row: 1 / 3; }
  .acc-btn:hover .acc-plus, .acc-row.open .acc-plus { margin-right: 0; }
  .offer-foot .btn { width: 100%; justify-content: center; }
  .hero-cta .btn { width: 100%; justify-content: center; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .marquee-track { animation: none; }
  .scan, .price-scan { display: none; }
  .veil { display: none; }
}
html.no-anim .marquee-track { animation: none; }
html.no-anim .scan { display: none; }